/* This CSS file needs to live inside the /tidy/v{number}/css */
@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.animate__slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}
@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.animate__slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}
@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.animate__slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes fadeInDownHeader {
    0% {      
      transform: translateY(-72px);
    }
    100% {     
      transform: translateY(0);
    }
}
@keyframes fadeInUpHeader {
    0% {      
      transform: translateY(0);
    }
    100% {     
      transform: translateY(-72px);
    }
}
.fadeInDownHeader {
  animation-name: fadeInDownHeader;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.fadeInUpHeader {
  animation-name: fadeInUpHeader;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
html.searching #header .search-close {
    display: block !important;
    position: absolute;
    right: 6px;
}
body.overflow-hidden {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}
/* Push Dixa behind the menu when the menu is open on mobile & desktop */
html.mobile-menu-open .dixaContainer,
body.overflow-hidden .dixaContainer,
html.mobile-menu-open .dixa-messenger-namespace,
body.overflow-hidden .dixa-messenger-namespace {
    z-index:99;
    position:absolute;
}
/* Hide animation on the header on Desktops when the mobile closes on resizing */
@media screen and (min-width: 992px) {
    header {
      animation-name: none !important;
      animation-duration: 0s !important;
      animation-delay: 0s !important;
      animation-iteration-count: 0 !important;
    }
}
/* html.searching #navigation-categories {
    display: none !important;
} */
.header-top > div {
    height: unset;
    background: unset;
}
#header #navigation-bar img {
    overflow: revert;
}
form.shop-search input {
    background: #fff;
}
#header-search input[type="search"] {
    height: 45px!important;
    width:100%!important;
}
header#header .nav-input:checked + label + .nav-tab {
    top: 72px!important;
}
#header .header-top {
    grid-gap: 0;
}
#header #navigation-bar #menu-upper a {
    margin-right: auto;
}
#header #navigation-bar #sticky-nav a {
    margin-left: auto;
    margin-right: auto;
}
body.webshop-erhvervslogin #header #header-toplinks,
body.webshop-erhvervslogin #header #header-basket,
body.webshop-erhvervslogin #header #navigation-categories {
    display: none;
}
form.shop-search button:before {
    content: "\ea0c";
    display: inline-block;
    font: 1em/1 andlight-icons;
    speak: none;
    margin-right: 0.5em;
    margin-bottom: 0.25em;
    text-transform: none;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
form.shop-search button {
    color: #757575;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
}
#header-search {
    position: relative;
}
@media screen and (max-width: 1024px) {
    #header-basket #basket-container:after {
        margin-left: 0 !important;
    }
}
@media screen and (max-width: 991px) {
    html.searching #navigation-categories,
    html.searching .img-static,
    html.searching .navigation-container.customer-service h3 {
        display:none!important;
    }
    html.searching {
        overflow:hidden;    
    }
    /* CSS applied on the checkout page */
    body.webshop-checkout header#header #navigation-logo-mobile {
        padding-right:0!important;
    }
    body.webshop-checkout div#mobile-sticky-upper {
        position:fixed!important;
    }
    body.webshop-checkout header#header #hamburger-nav,
    body.webshop-checkout header#header #search-icon {
        display:none;
    }
    body.webshop-checkout #checkout-container {
        padding-top:55px;
    }
     /* Semi sticky menu */
    div#mobile-sticky-upper.fixed {
        position: fixed!important;
        top:0;
        transition: top 0.3s;
    }    
    div#header-basket.fixed {
        position: fixed!important;
    }
}

#header-basket span.basket-count {
    right: -8px;
    top: -18px;
    height: 17px;
    width: 17px;
    color: #fff;
    background: #b79a51;
    left: unset;
    text-align: center;
    line-height: 12px;
    font-size: 11px;
    vertical-align: middle;
    border-radius: 100px;
    overflow: hidden;
    padding: 0.25em 0.5em;
    position: absolute;
    webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.33);
    box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.33);
}

@media screen and (min-width: 991px) {
    #header-basket label[for="nav-basket"].show {
        z-index: 1;
    }
}

.category-title,
.level-1 {
    text-align: center;
    font-weight: 500;
}
#header,
.search-container,
.submenu,
.with-submenu {
    position: relative;
}
:root {
    --animate-duration: calc(1s / 3);
}
* {
    box-sizing: border-box;
}
body,
html {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-style: normal;
    font-display: swap;
    max-width: 100%;
    height: auto;
}
.submenu.hidden,
header .nav-input,
header .nav-input + label {
    display: none;
}
#header {
    height: 100%;
    z-index: 9999999 !important;
    max-width: 100%;
    width: 100%;
}
#navigation-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 15px;
    cursor: pointer;
}
.category-title {
    display: block;
    width: 100%;
    font-size: 18px;
    margin: 0 auto;
}
#menu-upper,
.level-1,
.level-2 ul li {
    display: flex;
}
#menu-upper {
    padding-top: 40px;
    justify-content: center;
    align-items: center;
}
input#search,
input#search:focus,
input#search:focus-visible,
form.shop-search input,
form.shop-search input:focus,
form.shop-search input:focus-visible {
    width: 100%;
    height: 45px;
    border: 1px solid #000;
    text-align: center;
    border-radius: 0;
    outline: 0;
    font-weight: 500;
    color: #555555;
    line-height: 21px;
    position: relative;
    font-size: 16px;
    background-image: url("/tidy/media/menu/search-icon.svg");
    background-repeat: no-repeat;
    background-position: 15px center;
    background-color: #fff;
}
input#search::placeholder {
    color: #989898;
    opacity: 1;
    font-weight: 300;
}
input#search::before {
    content: "\ea03";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    display: inline-block;
}
.level-1 {
    justify-content: start;
    align-items: center;
    flex-direction: row;
    height: 45px;
    font-size: 30px;
    cursor: pointer;
}
.level-1.with-submenu {
    text-transform: uppercase;
}
#customer-service-menu h3,
.see-all-link {
    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
}
#header #header-basket {
    margin-right: 0;
}
.arrow-right {
    margin-left: auto;
    cursor: pointer;
}
.submenu {
    top: 100%;
    left: 0;
    display: none;
    width: 100%;
    z-index: 1;
}
.submenu.active {
    display: block;
}
.submenu ul {
    list-style-type: none;
    margin: 0;
    padding: 15px 0 0;
}
.submenu ul li {
    margin: 0;
    padding: 15px 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    cursor: pointer;
}
.submenu ul li.campaign {
    font-weight: 275;
}
.submenu ul li a,
.submenu ul li a:hover {
    color: #000;
    text-decoration: none;
}
@media screen and (min-width: 1451px) {
    .level-3.submenu ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0 15px;
    }
}
@media screen and (min-width: 1100px) and (max-width: 1450px) {
    .level-3.submenu ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0 15px;
    }
}
@media screen and (max-width:1099px) {
    .level-3.submenu ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 0 15px;
    } 
}
/* If the level 2 is brands, then apply different layout */
.level-2.submenu[data-category='brands'] ~ .level-3.submenu ul{
    grid-template-columns: 1fr 1fr;
}
.level-2.submenu[data-category='brands'] ~ .level-3.submenu ul li a{
    padding-left:0;
}
.level-3.submenu li {
    list-style: none;
}

.level-3.submenu li a {
    display: grid;
    position: relative;
    align-items: center;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 3fr 1fr;
    padding-left: 1rem;
    height: 90px;
}
@media screen and (max-width:1099px) {
    .level-3.submenu li a {
        height: 80px;
    }
}
/* If it has a span and not an image or 
   the opposite make it one column */
.level-3.submenu li a:has(span):not(:has(img)),
.level-3.submenu li a:has(img):not(:has(span)) {
    grid-template-columns: 1fr; 
}
/* Make a specific fix for FireFox */
.level-2[data-category='brands'] ~ .level-3.submenu li a {
    grid-template-columns: 1fr; 
 } 
.level-2[data-category='brands'] ~ .level-3.submenu li img {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 18px;
}

#customer-service-menu {
    padding: 25px 20px;
}
.level-2-active .img-static {
    margin: 0 20px;
    padding: 0;
}
.level-2-active #customer-service-menu {
    background-color: #f8f7f5;
}
.img-static {
    margin-top: 90px;
    margin-left: -50px;
    margin-right: -50px;
}
#customer-service-menu h3 {
    margin: 0;
}
.level-3-active #customer-service-menu h3 {
    border-top: 1px solid #dbdbdb;
    padding-top: 24px;
}
.see-all-link {
    color: #000;
    text-decoration: underline;
}
.see-all-link:hover {
    color: #b79a51;
}
.header-top>div {
    height:unset!important;
}

/* .level-3.submenu li a {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width:100%;
 } */
 
 .level-3.submenu li a::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #FAFAFA; /* Gray background color */
   mix-blend-mode: multiply; /* Blend mode to change the white background */
   z-index: 9999; /* Ensure the pseudo-element is behind the image */
 }
 
 .level-3.submenu li a img {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    max-width:100%;
    max-height:70px!important;
    object-fit: contain;
    margin-left: auto;
    margin-top:auto;
    margin-bottom:auto;
    padding:10px;
 }
 /* If the li a container has only an image (brands) 
    apply specific style to the image */
 .level-3.submenu li a:has(img):not(:has(span)) img {
    width:100%!important;
    margin-left:auto;
    margin-right:auto;
}
 .level-3.submenu li a span {
   /* padding-top: 0; */
   display: inline-block;
   position: relative;
   background-color: #FAFAFA!important;
   width: 100%;
   z-index: 99999;
   text-align: left;
   font-size: 18px;
 }


@media screen and (max-width: 991px) {
    header.level-2-active #navigation-bar,
    header.level-3-active #navigation-bar {
        min-height: 100vh;
    }
    #header #navigation-bar #menu-upper a {
        margin-right: auto;
        margin-left: auto;
    }
    header#header .nav-input:checked + label + .nav-tab > * {
        display: block !important;
    }
    #header-basket .swiper-container .swiper .left-pane {
        display: none;
    }
    #header-usp {
        margin-top: 0;
    }
    header.level-2-active #navigation-bar,
    header.level-3-active #navigation-bar {
        padding-bottom: 0 !important;
        margin-bottom: 20px !important;
    }
    #header h2.category-title {
        padding-top: 0px;
    }
    #sticky-nav,
    div#menu-upper {
        padding-top: 20px;
    }
    #header .level-2.submenu .img-static,
    #header .level-3.submenu #customer-service-menu {
        margin-left: -20px;
        margin-right: -20px;
    }
    div#menu-upper.active {
        margin-left: -20px;
        margin-right: -20px;
        padding-top: 20px;
    }
    .animate__animated {
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 100%;
    }
    body.mobile-menu-open{
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100%;
    }
    html.mobile-menu-open {
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100%;
    }
    body.mobile-menu-open #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999999;
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
        -webkit-backdrop-filter: blur(10px);
    }
    body.mobile-menu-open .dixa-container {
        right: 20px!important;
        bottom: 35px!important;
    }
    #header .img-static.active,
    body.mobile-menu-open #overlay.active {
        display: block;
    }
    #header.active {
        display: block;
        position: absolute;
        z-index: 9999999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
    #header.active #navigation-bar {
        margin: 20px 20px 0;
        padding: 0 20px 90px;
        background-color: #fff;
    }
    header.level-2-active #navigation-bar,
    header.level-2-active div#menu-upper.active {
        background-color: #f8f7f5 !important;
    }
    #header #header-basket #header-basket-content,
    #header #header-basket .basket-totalprice,
    #header #header-basket.hidden,
    #header #header-search,
    #header #header-toplinks,
    #header .level-1.hidden,
    #header .search-close,
    div#menu-upper,
    div#mobile-sticky-upper.hidden,
    header.level-2-active > .img-static,
    header.level-3-active > .img-static {
        display: none;
    }
    div#menu-upper.active {
        display: flex;
    }   
    div#mobile-sticky-upper {
        position: relative;
        top: 0;
        width: 100%;
        z-index: 10;
        display: block;
        background-color: #fff;
        padding: 0 20px;
    }    
    #header .header-top {
        background-color: #fff;
        padding-bottom: 0;
    }
    #header.level-2-active .header-top {
        background-color: #f8f7f5;
    }
    #sticky-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
    }
    img#arrow-back {
        visibility: visible;
        cursor: pointer;
        padding: 20px;
    }
    img#hamburger-nav {
        cursor: pointer;
    }
    img#close-btn {
        display: block;
        cursor: pointer;
        padding: 20px;
    }
    img#search-icon {
        padding: 10px;
        box-sizing: content-box;
        margin: -10px;
        position: relative;
        right: 2.5rem;
    }
    #navigation-logo-mobile {
        margin-left: auto;
        margin-right: auto;
        display: block;
        height: 15px;
        cursor: pointer;
        padding-right: 1rem;
    }
    #header #header-search.active {
        display: flex;
        margin-top: 20px;
        margin-bottom: 25px;
        justify-content: center;       
    }
    #header.level-2-active #header-search.active {
        background-color: #f8f7f5;
    }
    #header #header-basket {
        position: absolute;
        top: 28px;
        right: 10px;
        margin: 10px;
        width: 0;
        z-index: 11;
    }
    #header div#header-basket::after {
        content: url("/tidy/media/menu/basket-icon.svg");
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    #header #header-basket a#basket-container {
        width: 40px;
        display: none;
        height: 0;
        cursor: pointer;
        z-index: 99;
        position: relative;
    }
    #header #header-basket > label:before {
       /*  content: url("/tidy/media/menu/basket-icon.svg"); */
        content: " ";
        display: inline-block;
        font: 1em/1 andlight-icons;
        speak: none;
        margin-right: 0;
        margin-bottom: 0;
        padding: 20px;
        text-transform: none;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    #header #header-basket span.basket-count[data-basketcount="0"] {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    #header-basket span.basket-count {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0;
        word-spacing: 0px;
        -webkit-box-direction: normal;
        box-sizing: border-box;
        margin: 0;
        border: 0;
        font: inherit;
        font-family: Poppins, sans-serif !important;
        color: #fff;
        background: #b79a51;
        vertical-align: middle;
        overflow: hidden;
        position: absolute;
        right: -8px;
        top: -18px;
        border-radius: 100px;
        font-size: 0.6875rem;
        padding: 0.25em 0.5em;
        line-height: 1em;
        transition: all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-transition: all 0.15s cubic-bezier(0.645,0.045,0.355,1);
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
        z-index: 10;
        font-weight: 500;
    }
    #header #navigation-categories {
        flex-direction: column;
        display: none;
    }
    #header #customer-service-menu.active,
    #header #navigation-categories.active {
        display: flex;
        opacity: 1 !important;
    }
    #header > .img-static {
        padding: 0 20px;
        line-height: 0;
    }
    #header .level-2.submenu .img-static {
        padding-top: 90px;
    }
    #header .img-static {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        display: none;
    }
    .level-3.submenu li {
        font-size: 14px;
    }
    #header #customer-service-menu {
        padding: 25px 20px;
        height: auto;
        display: none;
        background-color: #fff;
    }
    header.active .navigation-container.no-image-above #customer-service-menu {
        margin-top: 90px;
        border-top: 1px solid #dbdbdb;
        padding-top: 24px;
        padding-left:0!important;
    }
    header.active.level-2-active .navigation-container.no-image-above #customer-service-menu {
        /* margin-top: 90px; */
        border-top: 1px solid #dbdbdb;
        padding-left: 0!important;
        margin-left: 0!important;
        margin-right: 0!important;
    }
    #header #navigation-bar.no-static-image {
        padding-bottom:0!important;
        margin-bottom:20px;    
        min-height:calc(100vh - 40px);
    }
    #header > .customer-service.active {
        margin: 0 20px 20px;
    }
    #header #customer-service-menu a {
        text-decoration: none;
        color: #000;
    }
    #header .level-2.submenu #customer-service-menu {
        background-color: #f8f7f5;
        margin-left: -20px;
        margin-right: -20px;
    }
    .level-3-active #customer-service-menu h3 {
        width: 100%;
        text-align: left;
    }
    form.shop-search input {
        margin: 0!important;
    }
    /* Move the Customer service always at the bottom */
    #header #navigation-bar {
        display:flex;
        flex-direction:column;
    }    
    #header #navigation-categories.active {
        flex-grow:1;
    }
    header.active .navigation-container.no-image-above #customer-service-menu {
        margin-top:0;
    }    
    header.active #navigation-categories.active .navigation-container.customer-service {
        margin-top:auto;
    }    
    .level-2.active,
    .level-3.active {
        min-height: calc(100vh - 214px);
        position: relative;
        padding-bottom: 90px;
    }    
    .level-2.active .navigation-container.customer-service,
    .level-3.active .navigation-container.customer-service {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    } /* End of Customer Service at the bottom */
}
@media screen and (min-width: 992px) {
    #header .img-static,
    #header div#mobile-sticky-upper,
    #header img#arrow-back,
    #header img#close-btn,
    #header-basket-content,
    .arrow-right,
    .submenu,
    header .nav-input,
    header .nav-input + label {
        display: none;
    }
    #header #header-toplinks a,
    #header #search-searchBox,
    #header .search-close,
    #header-search {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        -webkit-font-smoothing: antialiased;
        color: #202020;
        letter-spacing: 0;
        word-spacing: 0px;
        box-sizing: border-box;
        border: 0;
        vertical-align: baseline;
    }
    .level-1.active:after,
    .level-1:hover:after,
    .submenu {
        width: 100%;
    }
    #header #menu-upper {
        grid-area: logo;
        padding-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #header #navigation-bar {
        padding: 0 50px;
    }
    #header #navigation-logo {
        margin-left: unset;
        margin-right: auto;
        display: block;
        height: 19px;
        cursor: pointer;
        float: right;
    }
    #header .navigation-container {
        height: auto;
        padding: 0 20px;
    }
    .level-1 {
        position: relative;
        height: 100%;
        font-size: 18px;
        padding-bottom: 21px;
    }
    .level-1:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 4px;
        background-color: #b79a51;
        transition: width 0.3s ease-in-out;
    }
    #header .img-static.active,
    #header .level-2 .img-static,
    .level-2 .arrow-right,
    .with-submenu:hover .submenu {
        display: block;
    }
    .level-2.submenu ul li {
        cursor: pointer;
        font-size: 20px;
    }
    .level-2.submenu ul li.active,
    .level-2.submenu ul li.active a,
    .level-3.submenu ul li:hover a {
        color: #b79a51;
        transition: color 0.2s ease-in-out;
    }
    .level-2.submenu ul li.active img {
        filter: invert(93%) sepia(8%) saturate(4277%) hue-rotate(331deg) brightness(83%) contrast(66%);
        transition: filter 0.2s ease-in-out;
    }
    .level-2.submenu {
       overflow-y: auto;
       scroll-behavior: smooth;
       max-height:100%;       
    }
    .level-2.submenu.active {
        scrollbar-width: thin;
        scrollbar-color: #c9c5c5 #efefef;
        max-height: calc(100vh - 100px);
    }
    .level-2.submenu.active::-webkit-scrollbar {
        width: 6px;
        background-color: #efefef;
     }
     .level-2.submenu.active::-webkit-scrollbar-thumb {
        background-color: #c9c5c5;
        border-radius: 5rem;
    }
    .level-3.submenu {
        background-color: #fff;
        overflow-y: auto;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #000 #efefef;
        max-width: 480px;
        height: calc(100vh - 150px);
    }
    .level-3.submenu::-webkit-scrollbar {
        width: 6px;
        background-color: #efefef;
    }
    .level-3.submenu li {
        font-size: 16px;
    }
    .level-3.submenu::-webkit-scrollbar-thumb {
        background-color: #000;
    }
    .submenu {
        position: relative;
        top: 0;
        left: 0;
        background-color: #f8f7f5;
        z-index: 1;
        max-width: 480px;
        padding: 50px;
        height: 100%;
    }
    .submenu ul {
        list-style-type: none;
        margin: 0;
        padding: 35px 0 0;
    }
    #header .header-top {
        display: grid;
        grid-template-areas: "login login login" "logo search basket";
        grid-template-columns: 1fr 1fr 1fr;
    }
    #header #header-toplinks {
        grid-area: login;
        display: flex;
        justify-content: end;
        font-size: 11px;
        height: 40px!important;
        align-items: center;
        line-height: 1.5;
        font-weight: 300;
        margin: 0;
    }
    #header #header-toplinks a {
        margin: 0 0 0 10px;
        padding: 0;
        font: inherit;
        text-decoration: none;
        cursor: pointer;
        font-family: Poppins, sans-serif !important;
    }
    #header #logo {
        grid-area: logo;
    }
    #header-search {
        grid-area: search;
        margin: 0;
        padding: 0;
        font: inherit;
        min-width: 0;
        font-family: Poppins, sans-serif !important;
        height: 100%;
        display: flex;
        background: #fff;
    }
    #header .search-close {
        margin: 0;
        padding: 0;
        font: inherit;
        font-family: Poppins, sans-serif !important;
        display: none;
    }
    #header #search-searchBox {
        margin: 0;
        padding: 0;
        font: inherit;
        font-family: Poppins, sans-serif !important;
        width: 100%;
        position: relative;
        max-width: 550px;
    }
    #header #header-basket {
        grid-area: basket;
        display: flex;
        align-items: center;
        justify-content: end;
    }
    #header-basket #basket-container,
    #header-basket label[for="nav-basket"] {
        display: inline-block;
        position: relative;
        float: right;
        background: #000;
        color: #fff;
        font-size: 1.25rem;
        line-height: 45px;
        padding: 0 20px;
        text-decoration: none;
        text-align: center;
        width: auto !important;
        border-radius: 0;
    }
    #header-basket #basket-container:after,
    #header-basket label[for="nav-basket"]:after {
        content: url("/tidy/media/menu/basket-icon.svg");
        display: inline-block;
        font: 1em/1 andlight-icons;
        speak: none;
        margin-left: 0.5em;
        margin-bottom: 0.25em;
        text-transform: none;
        vertical-align: middle;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(2deg) brightness(103%) contrast(102%);
    }
    #header-basket #basket-container span.basket-heading,
    #header-basket label[for="nav-basket"] span.basket-heading {
        font-weight: 500;
        margin-right: 1em;
    }
    header #basket-container:hover #header-basket-content {
        display: block !important;
    }
    #header-basket label[for="nav-basket"] {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 1s ease-in-out 1s, _ 1s ease-in-out 1s;
        transition: 1s ease-in-out 1s, _ 1s ease-in-out 1s;
        display: block !important;
        position: fixed !important;
        top: 20px;
        right: 30px;
        z-index: -1;
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
        -webkit-box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 50px 20px rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }
    #header-basket span.basket-count {
        top: 0.6rem;
        left: -1em;
        color: #fff;
        background-color: #b79a51;
        font-size: 13px;
        width: 24px;
        height: 24px;
        line-height: 20px;
        font-weight: 500;        
    }
    #header-basket span.basket-count[data-basketcount="0"] {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    #header #navigation-categories {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        height: auto;
        padding-top: 35px;
    }
    #header .navigation-container.customer-service {
        margin-left: auto;
        padding-right: 0;
    }
    #header #customer-service-menu {
        padding: 0 0 20px;
    }
    #header #customer-service-menu h3 a,
    #header #customer-service-menu h3 a:hover {
        color: #000;
        text-decoration: none;
    }
    #navigation-categories .navigation-container:first-child {
        padding-left: 0;
    }
}

/* ------------------------ Search Styles ---------------------- */

@media screen and (max-width: 991px) {
    
    .search-container.active {
        display: flex!important;
        width: 100%;
        flex-direction: column;
    }

    #search-static-content, 
    #search-filtering-container {
        flex: 0 0 100%;
    }
    /* On Mobile display the Algolia Search static content 
       to the end of the div (logic when there no results) */
    html.searching .search-container.active #search-static-content {
        order: 1;
    }
    html.searching #content,
    html.searching #header-usp,
    html.searching body.mobile-menu-open .search-container.active {
        display: flex;
    }
    html.searching header#header {
        border-bottom: unset !important;
    }
    html.searching .header-top {
        position: relative !important;
        top: 0;
        z-index: 9999999;
    }
    #search-buttons {
        position: relative;
        top: 0 !important;
        justify-content: end;
        padding: 0 0 25px 0!important;
        z-index: 100;
        background: white;
        -webkit-transition: all 0.15s cubic-bezier(0.645,0.045,0.355,1);
        transition: all 0.15s cubic-bezier(0.645,0.045,0.355,1);
        display: flex!important;
    }
    html.searching #header-search input[type="search"] {
        height: 45px!important;
        font-size: 16px!important;
        width:100%;
    }
    #search-buttons button {
        background-color: #bdbdbd;
        height: 40px;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        border-radius: 0;
        color: #ffffff;
        text-align: center;
        line-height: 2.5;
        cursor: pointer;
        -webkit-transition: background-color 0.15s cubic-bezier(0.645,0.045,0.355,1);
        transition: background-color 0.15s cubic-bezier(0.645,0.045,0.355,1);
        width: 100%;
        max-width: 140px;
        height: 40px;
        position: relative;
        padding-left: 1rem;
    }
    #search-buttons button::before {
        content: url("/tidy/media/menu/filter-icon.svg");
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px; /* Adjust the font size as needed */
        line-height: 1;
        padding-left:1rem;
    }
    #search-filters {
        position: relative;
        z-index: 1000;
        overflow: auto;
        overflow-x: hidden;
        max-height: 100%;
        padding: 10px 20px 30px!important;
        margin-left: -20px;
        margin-right: -20px!important;
        margin-bottom: 1rem;
    }
    .search-container .search-wrap .search-content {
        margin: 0;
        padding: 0;
    }
    .search-container .search-wrap > * {
        margin: 0;
    }
    #search-filter-tags .ais-CurrentRefinements-category {
        margin-right: 0.5em;
        margin-bottom: 0.5em;
        background: #e8e8e8;
        border-radius: 0;
        color: #000;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        padding: 0.25em 1em;
        height: 40px;
        display: flex;
        align-items: center;
    }

    .search-container .search-wrap {
        padding: 0;
    }

    .search-container.active #search-filters>.filter {
        margin-right: 2vw;
        padding: 20px 0;
        border-bottom: 1px solid #DBDBDB;
        width: 100%;
    }

    #search-filters .close-filter-cross {
        display: block!important;
        position: absolute;
        top: 0;
        right: 10px;
        cursor: pointer;
    }

    .search-container .search-wrap {
       padding:0!important;
    }

    #search-filters .filter .filter-list {
        background: #FAFAFA!important;
    }

    #search-filters .close-filter {
        display: flex!important;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 300px;
        height:40px;
        font-size: 16px;
        font-weight: 500;
        background: #000;
        color: #ffffff;
        text-align: center;
        line-height: 2.5;
        border-radius: 0;
        cursor: pointer;
        padding: 0;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto; 
    }

    #search-filters .close-filter:hover {
        background-color: #353333;
    }

    #price-range-container {
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 16px;
        margin-left: 0;
        padding-top: 10px;
    }

    #filters-selected-container {
        display: grid;
        grid-template-columns: auto;
        position: relative!important;
        top: 0!important;
    }

    #search-filters #toggle_stock {
        margin-bottom: 40px!important;
    }

    header.level-2-active #filters-selected-container {
        background-color: #f8f7f5!important;
    }

    #filters-selected-container #clear-filters {
        justify-content: center;
        display: none;
        /* display: flex; */
        align-self: center;
        padding: 10px 0 25px 0;
    }

    #search-hits .show-more {
        display: flex!important;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 300px;
        height: 40px;
        font-size: 16px;
        font-weight: 500;
        background: #000;
        color: #ffffff;
        text-align: center;
        line-height: 2.5;
        border-radius: 0;
        cursor: pointer;
        padding: 0;
        white-space: nowrap;    
        margin-left: auto;
        margin-right: auto;    
    }

    html.searching.search-filters .search-container #search-filters {
        display:none!important;   
    }    
    
    html.searching.search-filters-open .search-container #search-filters {
        display:block!important;   
    }

    html.searching.search-filters-open .search-container button.open-search-filter {
        background-color: #000!important;
    }

    .search-container .search-content,
    .search-container .search-content #search-hits {
        padding:0!important;
    }

    header.level-2-active .search-container .search-wrap,
    header.level-2-active .search-container #search-static-content,
    header.level-2-active .search-container #search-buttons {
        background-color: #f8f7f5 !important;
    }
}

/* Center the Search filters container on tablet devices */
@media screen and (min-width: 540px) and (max-width: 991px) {
    #search-filters {
       margin-left: auto!important;
       margin-right: auto!important;
    }
 }

/* Put the header on the background when the PLP filter search open */
@media screen and (max-width: 1024px) {
  html.filter-active.show-filter header#header {
  z-index: 0!important;
  }
}

@media screen and (min-width:992px) {
    /* Hide the body overflow when search is open */
    html.searching body {
        position: fixed;
        width: 100%;
        overflow-y: scroll;
    }

    .search-container.active {
        display: flex!important;
        width: 100%;
        flex-direction: row;
    }
    #search-static-content, 
    #search-filtering-container {
        flex: 0 0 480px;
        background-color: #FAFAFA;    
    }

    #search-static-content {
        padding: 50px;
    }

    .search-container {
        width: 100%;
        z-index: 1200;
        background: transparent!important;
        display: none;
    }

    /* When searching, make the load more button visible */
    .search-container .search-wrap {
       padding-bottom:3rem!important;
       height: calc(100vh - 150px);
       scrollbar-width: thin;
       scrollbar-color: #000 #efefef;
    }

    .search-wrap::-webkit-scrollbar-thumb {
        background-color: #000;
        border-radius:5rem;
    }
        
    .search-wrap::-webkit-scrollbar {
        width: 6px;
        background-color: #efefef;
    }

    #search-filters {
        overflow-y: auto!important;
        overflow-x: hidden!important;
        max-height: calc(100vh - 150px);
        min-height: 0;        
        padding: 30px 50px;
        scrollbar-width: thin;
        scrollbar-color: #c9c5c5 #efefef;
        scroll-behavior: smooth;
     }
     #search-filters::-webkit-scrollbar {
         width: 6px;
         background-color: #efefef;
     }
     #search-filters::-webkit-scrollbar-thumb {
         background-color: #c9c5c5;
         border-radius: 5rem;
     }
 
     .search-container.active #search-filters>.filter {
         margin-right: 2vw;
         padding: 20px 0;
         border-bottom: 1px solid #DBDBDB;
         width: 100%;
     }
 
     #search-hits .show-more {
         font-size: 1.5rem;
         font-weight: 500;
         background-color: #000000;
         color: #ffffff;
         text-align: center;
         line-height: 2.5;
         padding: 0 2.5em;
         cursor: pointer;
         -webkit-transition: background-color 0.15s cubic-bezier(0.645,0.045,0.355,1);
         transition: background-color 0.15s cubic-bezier(0.645,0.045,0.355,1);
         max-width: 600px;
         display: block;
         margin: auto;
         width: 450px;
         height: 70px;
     }
     
     #search-hits .show-more:hover {
        background-color: #353333;
     }

     #search-filters .filter .filter-list {
        position: absolute;
        background: #FAFAFA!important;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        height: 0;
        pointer-events: none;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        position: relative;
    }

    #price-range-container {
        margin-left: 0;
        width: 100%;
        font-size: 14px;
        margin-right: 0;
        border-bottom: 1px solid #DBDBDB;
        padding: 0 1rem;
    }

    #filters-selected-container {
        display: grid;
        grid-template-columns: auto 1fr;
        position: relative!important;
        top: 0!important;
    }

    #filters-selected-container #clear-filters {
        justify-content: end;
        display: flex;
        align-self: center;
    }
}

.search-container .search-wrap {
   display: flex;
   flex-grow: 1;
   position: relative;
   flex-direction: column;
   max-width: 100%;
   padding: 30px 50px;
   background-color:#fff;
   margin:0!important;
   scroll-behavior: smooth;
   overflow-y: auto;
   overflow-x: auto;
}


#search-filters {
    display: flex!important;
    flex-direction: column!important;
    height: 100%!important;
    max-width: 480px!important;
    align-items: start!important;    
    background-color: #FAFAFA!important;
    flex-wrap:nowrap!important;
 }

 
 #search-filters .filter label[class*=collapse] {
    font-size: 18px!important;
    font-weight: 500;
    position: relative!important;
    cursor: pointer!important; 
    display: block; 
 }
 
 
 #search-filters .filter label[class*=collapse]:after {
    content: "\ea11";
    display: inline-block;
    font: normal normal normal 1em/1 "andlight-icons";
    speak: none;
    margin-left: 0;
    margin-bottom: 0.25em;
    text-transform: none;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.15s cubic-bezier(0.645,0.045,0.355,1);
    transition: all 0.15s cubic-bezier(0.645,0.045,0.355,1);
    float: right;
    font-weight: 600;
    font-size: 20px;
}


#price-range-container {
    margin-left: 0;
    width: 100%;
    font-size: 14px;
    margin-right: 0;
    border-bottom: 1px solid #DBDBDB;
    padding: 0 1rem;
}

.ais-RangeSlider {
    width:94%;
}

.rheostat-handle {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-color: #000;
    border: 1px solid #333;
    border-radius: 50%;
    cursor: grab;
}

#toggle_offers {
   padding-top: 20px;
   padding-bottom: 10px; 
}

#search-filters .ais-ToggleRefinement-label {
    display: flex;
    align-items: center;
}

#toggle_offers label,
#toggle_stock label {
    font-size: 18px;
    font-weight: 500;
    line-height:27px;  
    cursor: pointer;
}

#search-filters .ais-RefinementList-checkbox {
    position: relative;
    z-index: 2;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    margin-right: 1em!important;
    border-radius: 3px;
    overflow: hidden;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    width: 22px;
    height: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    outline: none;
    background-color: #EFEFEF;
    color: #fff;
    margin-top:0!important;
}

#search-filters .ais-ToggleRefinement-checkbox {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-font-smoothing: antialiased;
    -webkit-box-direction: normal;
    visibility: visible;
    pointer-events: all;
    list-style: none;
    box-sizing: border-box;
    line-height: 1.15!important;
    margin: 0 0.5em 0 0!important;
    font-size: 16px;
    font-family: Poppins,sans-serif!important;
    position: relative;
    z-index: 2;
    appearance: none;
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
    transition: .1s ease-in-out;
    width: 22px;
    height: 22px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    outline: 0!important;
    background-color: #EFEFEF;
    color: #fff;
}

#search-filters .ais-RefinementList-checkbox:checked,
#search-filters .ais-ToggleRefinement-checkbox:checked {
    background: #B79A51;
}

#search-filters .ais-RefinementList-checkbox:checked:before,
#search-filters .ais-ToggleRefinement-checkbox:checked:before {
    content: "\ea19";
    display: inline-block;
    font: 15px/1 andlight-icons;
    speak: none;
    text-transform: none;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff;
    margin: 0;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

#search-filters .filter .filter-list {
    position:relative!important;
}

#search-filters .ais-ToggleRefinement-labelText {
    align-items: center;
    margin-right: 2vw;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: 18px!important;
    font-weight: 500;
}

#search-filter-tags .ais-CurrentRefinements-category {
    margin-right: 0.5rem;
    margin-bottom:0.5rem;
    display: inline-block;
    background: #EFEFEF;
    border-radius: 0;
    color: #000000;
    font-size: 16px;
    font-weight: 300;
    padding: 10px 12px;
    line-height: 150%;
}

#search-filter-tags .ais-CurrentRefinements-delete {
    margin-left: 1em;
    opacity: 1;
    color: #000000;
    font-weight: 600;
    font-size: 16px;
}

.ais-ClearRefinements-button {
    font-size: 1rem;
    font-weight:300;
    color: #000000;
    text-align: center;
    text-decoration: underline;
    line-height: 150%;
    padding: 0 1em;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}

.ais-ClearRefinements-button:hover {
    color: #b79a51; 
}

#search-filters .ais-RefinementList-labelText {
    margin-right: 20px;
    line-height: 0;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    font-size: 16px;
    font-weight: 400;
}

#search-filters .ais-RefinementList-count {
    margin-left: auto;
    font-size: 16px;
    font-weight:300;
    color: #9C9C9C;
    border-radius: 3px;
    padding: 0.25em 0 0.3rem 0.3em;
}

#search-filters .filter input.collapse:checked+label,
#search-filters .ais-ToggleRefinement-checkbox:checked+.ais-ToggleRefinement-labelText,
#search-filters .ais-RefinementList-checkbox:checked+.ais-RefinementList-labelText {
    color:#000000;
}

#search-filters .ais-RefinementList {
    padding: 20px 0 0 0!important;
    min-width: 150px;
}

html.searching #content, 
html.searching #header-usp,
html.searching footer {
    display: block!important;
}

html.searching #nav-body-search {
    display:flex;
}

#nav-body-search {
    display:none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(7px);
    z-index: 9999;
    margin-top: -38px;
}

section#static-search {
    padding:0;
}