/*noinspection CssNonIntegerLengthInPixels*/
body.stickyheader #navbar  { padding: 0 !important; }

.right-open { will-change: transform; }
.right-open.modalShadow { box-shadow: 5px 0 15px rgba(0,0,0,.35) /*box-shadow: -8px 0 29px rgba(0,0,0,.35);*/ }
.right-open { visibility:visible !important; transform: translate3d(0,0,0) !important; transition: all 0.3s ease; backface-visibility: hidden; }

.modalRight h3,
.modalRight strong { display: flex;  font-weight: 600; font-size: 1.1em; background-color: var(--modal-top-bg-color); color:var(--modal-top-text-color); min-height: var(--modal-close-width-height); align-items: center; padding: 0 15px; }
.modalRight h3 > svg,
.modalRight strong > svg{ width: 20px; height: 20px; fill: var(--default-text-color); margin-right: 10px; }

.modalRightClose { top: 0; transition: all 200ms ease 0s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 0; outline: none; margin-left: auto; z-index: 2;    background-color: rgba(255, 255, 255, .8); border-radius: 50px; padding: 0 10px; }
#miniCartHeader + .modalRightClose { background-color: transparent; border-radius: 0; padding: 0; }
/*.modalRightClose svg { width: 18px; height: 18px; fill: var(--default-text-color); }*/
.modalRightClose svg { width: 35px; height: 35px; fill: var(--default-text-color); border: 1px solid var(--default-text-color); border-radius: 50%; padding: 9px; transition: background-color 0.3s ease; }
.modalRightClose:hover svg,
.modalRightClose:focus-visible svg { background-color: #fff; }
#topMenuMobile { z-index: 100;}
#btnMenuDesktop { display: none; }
#navbarExtraLinks { display: none; }

/* Styles for desktop mode - The horizontal "bar" where the hamburger button is located */
#topMenu { /*border-bottom: 1px solid #dddddd;*/ background-color: #30392d; }
#topMenu .innerNav { display: flex; width: 100%; align-items: center;position: relative; bottom: 0; right: auto; max-width: var(--desktop-max-width); margin: 0 auto; }
body.stickyheader #topBar.hide { box-shadow: 0 -1px 3px rgba(0, 0, 0, .2); }

/* navbar is the outer container for the "mobile" menu */
.navbar { contain: layout; display: block; visibility:hidden; flex-direction: column; align-items: normal; background-color: #fff; z-index: 1000; height: auto; bottom: 0; width: var(--modal-width); max-width: var(--modal-width-max); position: fixed; top: 0; left:0; transform:translate3d(calc(var(--modal-width) * -1),0,0); transition: all 0.45s ease; padding-bottom: 60px; /* 60 is the header height in fixed sidebar div ... */     max-height: calc(100vh - var(--modal-close-width-height)); font-weight: 500; }

/* navbar-menu is the <ul>-element that holds the menu structure */
.navbar-menu { display: flex; width: 100%; height: 100%;  flex-wrap: wrap; align-content: baseline; align-items: normal; overflow-x: hidden; justify-content: flex-start; font-size: 1em; overscroll-behavior-y: contain; overflow-y: auto; padding-bottom: 50px; max-height: calc(100vh - var(--modal-close-width-height)); background-color: #fff; }

.navbar-menu > li > .menuTrigger { display: flex; height: 100%; align-items: center; font-size: 1em; color:var(--top-menu-text-color); background: transparent; transition: background 0.25s linear, color 0.25s linear; border: 0; text-align: left; cursor: pointer; }
.navbar-menu > li > .menuTrigger.btnloader:after { border-color: #b1b1b1; border-left-color: #3c3c3c; border-top-color: #3c3c3c; }
.navbar-menu,
.navbar-menu ul { margin: 0; padding: 0; list-style: none; }
.navbar-menu ul { position: absolute; width: 100%; box-shadow: 0 0.25rem 1.5rem -8px #91919f; background-color: #f7f7f7; height: 100%; top: 0;}
.navbar-menu li { height: 100%; display: flex; align-items: center; }
.navbar-menu li > .menuTrigger .menuImg { display: flex; display: none; width: 50px; height: 50px; margin: 0 15px 0 0;    align-items: center; justify-content: center; }
.navbar-menu li > .menuTrigger .menuImg img { max-height: 50px; width: auto; transition: opacity 0.25s linear;  mix-blend-mode: multiply; }
.navbar-menu li > .menuTrigger[aria-current=page],
.navbar-menu li > .menuTrigger[aria-current=page]:hover { }
.navbar-menu li > .menuTrigger:hover,
.navbar-menu li > .menuTrigger:focus { background-color: #ececec; }

/* First level in submenu */
.navbar-menu ul > li { height: auto; background-color: #fff; border-bottom: 1px solid #ded9d7; }
.navbar-menu ul > li > .menuTrigger { display: flex; align-items: center; flex-wrap: wrap; flex-basis: 100%; padding: 1em 20px 1em 12px !important; font-size: 1em; justify-content: space-between; color: var(--color-menu-links); width: 100%; border: 0; cursor: pointer; }
.navbar-menu ul > li > .menuTrigger:hover { background-color: #f7f7f7; color: var(--color-menu-links); }
.navbar-menu ul > li > .menuTrigger:focus-visible { outline-offset: -2px; }
.navbar-menu ul > li > .menuTrigger img { max-height: 80px; }
.navbar-menu ul > li > .menuTrigger[aria-expanded=true] { background-color: #ececec; }
.navbar-menu ul > li > .menuTrigger[aria-expanded=true]:after {left: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-left-color: #ececec; border-width: 7px; margin-top: -7px;background-color: transparent; }
.navbar-menu ul > li > .menuTrigger[aria-current="page"] { background-color: #44603a !important; color: #fff; }
.navbar-menu ul > li:last-child { border-bottom: 0; }
.navbar-menu ul > li > ul > li {flex: 0 0 100%; }
.navbar-menu ul > li > ul > li.allproducts { display: block;}
.navbar-menu ul > li > ul > li > a { padding-left: 15px; }

.navbar > .navbar-menu > li > .menuTrigger { flex: 1; color: var(--color-menu-links); padding: 1em 20px 1em 12px; justify-content: flex-start; border-bottom: 1px solid #d5d2d1;     width: 100%;}
.navbar > .navbar-menu > li > .menuTrigger > .subimg { width: 25px; height: 25px; margin-right: .5em; /*display: flex;*/  display: none; }
.navbar > .navbar-menu > li > .menuTrigger > .subimg img { object-fit: unset; }
.navbar > .navbar-menu > li > .menuTrigger > .subnamefirst { flex:1;}
.navbar > .navbar-menu > li > .menuTrigger[aria-expanded=true] { background-color: #fff; }
.navbar > .navbar-menu > li > .menuTrigger:hover,
.navbar > .navbar-menu > li > .menuTrigger:focus { color: var(--color-menu-links); }
.navbar > .navbar-menu > li > .menuTrigger:focus-visible { outline-offset: -2px; }

.navbar-menu li.level-0.no-children.extra { background-color: #f1f1f1; }
.navbar-menu li.level-0.no-children.extramenulinksbottom.extra1 { border-top: 1px solid #cecece; }
.navbar-menu li.level-0.no-children.extramenulinksbottom { background-color: #f2f2f2; }
li.level-0.no-children.extramenulinksbottom a,
li.level-0.no-children.login a { flex: 1; color: var(--color-menu-links); font-size: 1.1em; padding: 19px 13px; justify-content: flex-start; border-bottom: 1px solid #d5d2d1; width: 100%; position: relative; overflow: hidden; }

/*
.navbar-menu li.level-0.no-children.extra a { padding: 10px 30px; border-bottom: 0; transition: padding-left .3s ease-in-out; }
.navbar-menu li.level-0.no-children.extra a:hover,
.navbar-menu li.level-0.no-children.extra a:focus-visible { padding-left: 45px; }
.navbar-menu li.level-0.no-children.extra a:focus-visible { outline: 1px solid #333; }
.navbar-menu li.level-0.no-children.extra.extra a:before { content: ""; display: inline-flex; background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; width: 35px; height: 35px; margin-right: 25px; background-image: url(../images/symbols/symbol_new.svg); }
.navbar-menu li.level-0.no-children.extra.extra1 a:before { background-image: url(../images/symbols/symbol_new.svg); }
.navbar-menu li.level-0.no-children.extra.extra2 a:before { background-image: url(../images/symbols/symbol_offer.svg); }
.navbar-menu li.level-0.no-children.extra.extra3 a:before { background-image: url(../images/symbols/symbol_star.svg); }
.navbar-menu li.level-0.no-children.extra.extra3 a { border-bottom: 1px solid #d5d2d1; }
*/
.navbar-menu li.allproducts .menuTrigger { }
.navbar-menu li.has-children > .menuTrigger { position: relative; }
.navbar-menu li { flex: 0; flex-direction: column; height: auto; flex-basis: 100%; width: 100%;}
.navbar-menu li.has-children .nextArrow { width: 17px; height: 17px; transform: rotate(180deg); fill: var(--color-menu-links); margin-right: -5px; margin-left: auto;}
.navbar-menu li.has-children .menuTrigger[aria-expanded=true]:before {transform: rotate(-180deg); fill: red;}
.navbar-menu li.no-children .menuTrigger:before { content: ""; display: none;  }

.navbar-menu ul { display: none; animation: menuSlideOut .3s; }
.navbar-menu ul.activesub { display: block; transition-delay: 0s;  position: absolute; box-shadow: none; flex-wrap: wrap; align-content: baseline; height: calc(100% + var(--modal-close-width-height)); background-color: white; z-index: 1; animation: menuSlideIn .2s; overflow-y: auto; left: 0; top: 0; }
.navbar-menu ul > li.subheader {  display: flex; align-items: center; justify-content: left; padding: 0 0 9px 0; font-size: 1.1em; flex-direction: row; /*color: var(--button-default-color); background: linear-gradient(to bottom, rgb(238 235 234) 0%, rgba(255,255,255,1) 100%);*/color: #fff; background: #30392d; flex-wrap: wrap; }
.navbar-menu ul > li.subheader .subname { padding-left: 15px; }
.navbar-menu ul > li.subheader .subimg { width: 40px; height: auto; margin-right: 15px;  margin-left: 25px; display: none;}
.navbar-menu ul > li.subheader .subimg img { /*filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(181deg) brightness(107%) contrast(101%);*/ }

.navBackButton { cursor: pointer; border: 0; background-color: var(--modal-top-bg-color); font-size: 1rem; height: var(--modal-close-width-height); left: 0; display: flex; align-items: center; padding-left: 15px; color: var(--modal-top-text-color); /*z-index: 22;*/ width: 100%; top: 0; margin-bottom: 9px; /*border-bottom: 1px solid #ded9d7;*/ }
.navBackButton svg { width: 25px; height: 25px; fill: var(--modal-top-text-color);}
.navBackButton .navBtnImage { display: flex; align-items: center;margin-right: 20px; }
.navBackButton:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: -2px; }

li.no-children.allproducts { /*background-color: #f0eaea;*/ }
li.no-children.allproducts .menuTrigger { padding: 20px 30px 20px 15px; background-color: whitesmoke; }
li.no-children.allproducts .menuTrigger svg { width: 25px; height: 25px; margin-right: -9px; margin-left: auto; }
li.no-children.allproducts .menuTrigger:focus-visible { outline: var(--default-focus-visible-outline); }

.navbar-menu .-more { display: none; }
.navbar > .navbar-menu > li > .menuTrigger.other.brands:after { display: none;}
.navbar-menu.closed { display: none; }

.navbar-menu .menuTrigger { position: relative; overflow: hidden; }
.navbar-menu > li.special { display: flex; }
#attributes.modalRightTransition .modalRightClose { display: none; }

.navbar-menu li.has-children > .menuTrigger:hover .nextArrow,
.navbar-menu li.has-children > .menuTrigger:focus-visible .nextArrow { -moz-animation: bounceWithRotFix 2s infinite; -webkit-animation: bounceWithRotFix 2s infinite; animation: bounceWithRotFix 2s infinite; }
.navBackButton:hover svg { -moz-animation: bounceWithRotFixBack 2s infinite; -webkit-animation: bounceWithRotFixBack 2s infinite; animation: bounceWithRotFixBack 2s infinite; }

.navbar .navLogo { height: var(--modal-close-width-height); display: flex; align-items: center; padding: 5px 10px; }
.navbar .navLogo img { max-height: 70%; padding-left: 5px; }

@media (max-width: 767.98px) {

}

@media (max-width: 767.98px) {
    #topMenuMobile { z-index: 100;}
    #attributes.modalRightTransition .modalRightClose { display: flex; }
    #attributes.modalRightTransition { transform: translate3d(85vw, 0, 0); width: 85vw; backface-visibility: hidden; will-change: transform; /*transition: transform 0.3s;*/ transition: all 0.45s ease }
    #attributes.modalRightTransition,
    #attributes.modalRightTransition > * { transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) }
    #attributes.modalRightTransition {  transform: translate3d(calc(var(--modal-width) * -2),0,0); width: var(--modal-width); max-width: var(--modal-width-max); backface-visibility: hidden; will-change: transform; /*transition: transform 0.3s;*/ transition: all 0.45s ease}
    #attributes.modalRightTransition > * { transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) }
    .right-open { visibility:visible !important; transform: translate3d(0,0,0) !important; /*transition: transform 0.3s;*/ transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s !important; backface-visibility: hidden; will-change: transform;}
    #attributes.modalRight h3,
    #attributes.modalRight strong { display: flex; background-color: var(--modal-top-bg-color); font-weight: 600; font-size: 1.5em; color: var(--modal-top-text-color); height: var(--modal-close-width-height); align-items: center; padding: 0 30px;     border-bottom: 1px solid #e6e6e6;}
}

@media (min-width: 768px) {
    #btnMenuDesktop { display: flex; justify-content: center; align-items: center; background-color: #162213; padding:6px 16px 6px 9px; border: 0; color: #fff; border-radius: 4px; cursor: pointer; /* box-shadow: 1px 2px 4px #000; */ border-radius: 7px; }
    #btnMenuDesktop svg { fill: #252525; width: 17px; height: 17px; }
    #btnMenuDesktop .menuText { margin-left: 9px; font-size: 1em; }
    #btnMenuDesktop:focus-visible { outline: var(--default-focus-visible-outline); outline-offset: 3px; }
    #btnMenuDesktop:hover { background-color: #162213; }
    #btnMenuDesktop:focus-visible { outline: var(--default-focus-visible-outline); box-shadow: var(--default-focus-visible-box-shadow); outline-color: #fff }
    #btnMenuDesktop[aria-expanded="true"] { outline-offset: 1px; box-shadow: 2px 2px 1px inset #000; }
    #navbarExtraLinks { display: flex; align-items: center; padding-left: 1em; gap: 3em; font-size: 1em; }
    #navbarExtraLinks:before { content: ""; border-left: 1px solid #8e8e8e; padding: 12px 0; }
    #navbarExtraLinks .menuTrigger { display: flex; align-items: center; background-color: transparent; padding: 7px 17px; border-radius: 20px; }
    #navbarExtraLinks .menuTrigger:hover,
    #navbarExtraLinks .menuTrigger:focus {}
    #navbarExtraLinks .menuTrigger:focus-visible { outline-offset: 2px; outline: 2px solid #000; }
    #navbarExtraLinks a { border-bottom: 2px solid transparent; padding-bottom: .2em; font-weight: 500; color: #fff; display: flex; align-items: center; gap: .3em; margin-bottom: -4px; }
    #navbarExtraLinks a img { width: 20px; height: 20px; filter: invert(1); }
    #navbarExtraLinks a svg { width: 20px; height: 20px; fill: #fff; }
    #navbarExtraLinks a.active { border-bottom-color: #fff; }
    #navbarExtraLinks a:hover,
    #navbarExtraLinks a:focus-visible { border-bottom-color: #fff; text-decoration: none; color: #fff; outline-color: #fff; outline-offset: 3px; }
    /*
    #navbarExtraLinks .extra a:before { content: ""; display: inline-flex; background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; width: 35px; height: 35px; margin-right: 9px; background-image: url(../images/symbols/symbol_new.svg); }
    #navbarExtraLinks .extra1 a:before { background-image: url(../images/symbols/symbol_new.svg); }
    #navbarExtraLinks .extra2 a:before { background-image: url(../images/symbols/symbol_offer.svg); }
    #navbarExtraLinks .extra3 a:before { background-image: url(../images/symbols/symbol_star.svg); }
     */
}

@media (max-width: 1200px) {
    #navbarExtraLinks { font-size: .8em;}
}

@media (min-width: 980px) {
    /*body.foldableHamburger { --modal-width-max: 20rem; }*/ /* NOTE! This has no impact here, its made inline in genericPage.php !! */
    /*body.foldableHamburger #navbarExtraLinks { border-left: 1px solid #919191; }*/
    body.foldableHamburger .navbar { transition: none; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger, body.foldableHamburger .navbar-menu ul > li { border: 0; }
    body.foldableHamburger .navbar-menu ul > li { background-color: transparent; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger { padding-left: 0; padding-right: 0; }
    body.foldableHamburger .navbar-menu ul > li > .menuTrigger, body.foldableHamburger li.no-children.allproducts .menuTrigger { font-size: 1em; padding: 1em; background: transparent; }
    body.foldableHamburger .navbar-menu, body.foldableHamburger .navbar-menu ul { padding-left: 1em; padding-right: 1em; }
    body.foldableHamburger .navbar-menu ul.activesub { position: fixed; left: var(--modal-width-max); background-color: #f5f5f5; padding-top: 0; }
    body.foldableHamburger .navbar-menu ul.activesub ul.activesub { background-color: #eaeaea; border-left: 1px solid #dcdbdb; animation: menuSlideInSecond .15s; left: calc(2* var(--modal-width-max)); }
    body.foldableHamburger .navBackButton { display: none !important; }
    body.foldableHamburger .navbar-menu ul > li.subheader { position: sticky; font-size: 1.1em; padding: 20px 0; color: var(--default-text-color); border-bottom-color: #919191; background-color: #f5f5f5; z-index: 1; top: 0; }
    body.foldableHamburger .navbar-menu ul > li.level-1 li.subheader { background-color: #eaeaea; }
    body.foldableHamburger .navbar-menu ul > li.subheader:after { border-bottom: 1px solid #5e5e5e; content: ""; width: 100%; display: inline-block; position: absolute; bottom: 0; left: 0; }
    body.foldableHamburger .navbar-menu ul > li.subheader .subname { padding-left: 0; }
    body.foldableHamburger .navbar-menu li.has-children .nextArrow { margin-right: 0; }
    body.foldableHamburger li.no-children.allproducts .menuTrigger svg { width: 17px; height: 17px; margin-right: 0; margin-left: auto; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger, body.foldableHamburger .navbar-menu ul > li > .menuTrigger { border-radius: 42px; border: 0; padding-left: 15px; padding-right: 15px; }
    body.foldableHamburger .navbar-menu ul > li > .menuTrigger:hover, body.foldableHamburger li.no-children.allproducts .menuTrigger:hover { background-color: #ececec; }
    body.foldableHamburger .navbar-menu ul > li > .menuTrigger[aria-current="page"] { background-color: transparent !important; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger[aria-expanded=true], body.foldableHamburger .navbar-menu ul > li > .menuTrigger[aria-expanded=true] { background-color: var(--toparea-bg-color-desktop) !important; color: #fff; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger[aria-expanded=true] img, body.foldableHamburger .navbar-menu ul > li > .menuTrigger[aria-expanded=true] img { filter: invert(1); }
    body.foldableHamburger .navbar-menu ul > li.level-2 > .menuTrigger[aria-current="page"] { background-color: #000 !important; color: #fff; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger[aria-expanded=true]:focus-visible, body.foldableHamburger .navbar-menu ul > li > .menuTrigger[aria-expanded=true]:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
    body.foldableHamburger .navbar > .navbar-menu > li > .menuTrigger[aria-expanded=true] svg, body.foldableHamburger .navbar-menu ul > li > .menuTrigger[aria-expanded=true] svg { fill: #fff; }
    body.foldableHamburger #btnMenuDesktop { margin-right: 1em; /*font-weight: 600;*/ color: #fff; font-size: 1em; background-color: #162213; }
    body.foldableHamburger #btnMenuDesktop:hover { background-color: #1c2719; }
    body.foldableHamburger #btnMenuDesktop svg { background-color: transparent; fill: #fff; padding: .4em; width: 28px; height: 28px; border-radius: 4px; }
}