.header-layout-height{
    position: relative;
}

.nav-toggle{
    fill: #E8EAED;
    fill: var(--default-font-colour);
    cursor: pointer;
    margin-left: 1.2rem;
}

.nav-toggle *{
    pointer-events: none;
}

.primary_menu ul{
    list-style: none;
}

.primary_menu, .primary_menu * {
    box-sizing: border-box;
}

.primary_menu:not(.toggle):not(.slide) .level_1.child_node{
    line-height: 0px;
}

.primary_menu .menu-item-name{
    color: var(--default-font-colour);
    gap: 5px;
    margin-top: .6rem;
}

.primary_menu .menu-item-name.heading.italic{
    font-style: italic;
}

.primary_menu .menu-item-name.heading.bold{
    font-weight: bold;
}

.primary_menu .menu-item-name.heading.underline{
    text-decoration: underline;
}

.primary_menu .level_0 {
    list-style: none;
}

.primary_menu .type_menu_group:not(.level-0) > .menu-item-name {
    display: none
}

.nav-overlay {
    z-index: 14;
    background: rgba(0, 0, 0, .2);
    transition: all ease .2s;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.primary_menu .mobile-header{
    gap: 1.2rem;
    border-bottom: 1px solid #ccc;
    border-bottom: var(--theme-border-style) solid #ccc;
    padding: 1.2rem  0;
    margin: 0 1.2rem .6rem;
    font-weight: 600;
    width: calc(100% - 2.4rem); 
    transition: width ease .2s;
    position: relative;
    height: 60px;
}

.slide-menu-header.level-1{
    width: calc(200% - 3.6rem);
}

.slide-menu-header.level-2{
    width: calc(300% - 4.8rem);
}

.primary_menu .mobile-header-level0{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    border-bottom: 1px solid #ccc;
    border-bottom: var(--theme-border-style) solid #ccc;
    padding: 1.2rem;
}

.nav_arrow {
    color: #000;
    color: var(--secondary-button-font-colour);
}

.close-nav span {
    display: none;
}

.back-nav *:not(.close-nav), .close-nav *{
    pointer-events: none;
}

.back-nav .back-label{
    margin-right: auto;
}

.primary_menu {
    position: fixed;
    width: calc(100vw - 30px);
    height: 100vh;
    z-index: 15;
    top:0;
    left: -100vw;
    transition: all ease .2s;
    background: #fff;
    border-top-right-radius: var(--theme-border-radius);
    border-bottom-right-radius: var(--theme-border-radius);
}

.primary_menu.active {
    left: 0;
}

.primary_menu .level-0.parent-node .level_1,
.primary_menu .level-0.parent-node .level_2 {
    position: fixed;
    width: calc(100vw - 30px);
    height: 100%;
    z-index: 15;
    top:0;
    left: -100vw;
    transition: all ease .2s;
    transition-delay: .2s;
    background: #fff;
    border-top-right-radius: var(--theme-border-radius);
    border-bottom-right-radius: var(--theme-border-radius);
}

.primary_menu .parent-node.active > .child_node{
    left: 0;
}

.primary_menu .level-0.parent-node > ul.level_1.active,
.primary_menu .level-0.parent-node > ul.level_.active{
    left: 0;
}

.shop-link{
    padding: .3rem .6rem;
    margin: 0 1.2rem;
    border: 1px solid #666;
    border: 1px solid var(--primary-button-font-colour);
    color: #666;
    color: var(--primary-button-font-colour);
    border-radius: var(--theme-border-radius);
}

.view-all{
    padding: .6rem 1rem;
    margin-top: .6rem;
    color: #000;
    background-color: #eeefef;
    border-radius: var(--theme-border-radius);
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    transition: all ease .2s;
}

.view-all:hover{
    background-color: #ccc;
}

.primary_menu.dropdown .parent-node {
    position: relative;
}

.primary_menu .menu-item > .menu-item-name .link-arrow{
    display: inline-block;
    transition: all ease .2s;
    opacity: 0;
    position: absolute;
    right: 1.8rem;
    top: .6rem;
}

.primary_menu .menu-item.level-2 > .menu-item-name:hover .link-arrow{
    opacity: 1;
    right: .6rem
}

@media(max-width: 1023px){
    [data-hide-item-on-mobile="yes"]{
        display: none;
    }

    .nav-toggle{
        margin-left: 0;
    }

    .primary_menu{
        border-top-right-radius: var(--theme-border-radius);
        border-bottom-right-radius: var(--theme-border-radius);
    }

    .primary_menu ul{
        overflow-y: auto;
    }

    .primary_menu .menu-item{
        line-height: 0px;
    }

    .primary_menu .level_0 {
        margin: 0;
        height: 100%;
        overflow-y: auto;
    }

    .primary_menu .menu-item-name{
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        padding: 0 1.2rem;
    }

    .primary_menu .menu-item-name.parent{
        font-weight: 600;
        margin: .6rem 1.2rem .6rem;
        padding: 0;
        border-bottom: 1px solid #ccc;
        border-bottom: var(--theme-border-style) solid #ccc;
        height: 50px;
    }

    .primary_menu .level_2.child_node .menu-item-name.level-2.link {
        font-weight: 300;
    }

    .parent-node.category > .menu-item-name{
        background-color: #ccc;
    }

    .toggle-togglemenu .shop-link{
        display: none;
    }

    .view-all{
        margin: .6rem 1.2rem;
    }

    .primary_menu .menu-item > .menu-item-name .link-arrow{
        display: none;
    }

    .primary_menu .menu-item.parent-node > a{
        pointer-events: none;
    }
    
    .primary_menu .top-bar-header{
        display: block;
        margin: 1.2rem;
        padding: 1.2rem 0;
        border-top: 1px solid #ccc;
        border-top: var(--theme-border-style) solid #ccc;
        max-width: calc(100% - 2.4rem);
    }
    
    .primary_menu .top-bar-header a{
        height: 30px;
        line-height: 30px;
        margin: 0 0 .6rem;
        padding: 0;
        border: none;
        font-size: 16px;
    }

    .primary_menu .top-bar-header .top-bar-right{
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }

    .primary_menu .top-bar-header .top-bar-right > div{
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }

    .primary_menu .level_0{
        height: auto;
    }
}

@media(min-width: 1024px){
    [data-hide-item-on-desktop="yes"]{
        display: none;
    }
    
    .primary_menu:not(.slide):not(.toggle){
        position: static;
        left: unset;
        top: unset;
        width: 100%;
        height: auto;
        z-index: unset;
        background: unset;
    }

    .primary_menu:not(.slide):not(.toggle) .level_0 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1.2rem;
        margin-left: 1.2rem;
    }

    .primary_menu .header-item{
        display: none;
    }

    .primary_menu.slide .menu-item{
        line-height: 0px;
        position: relative;
    }

    .primary_menu.slide .view-all{
        margin-left: 1.2rem;
    }

    .primary_menu.slide .mobile-header:before{
        content: '';
        position: absolute;
        display: block;
        width: calc(100% + 1.2rem);
        height: 100vh;
        background-color: #fff;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: var(--theme-border-radius);
    }

    .primary_menu.slide .menu-item-name{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 2.4rem;
    }

    .primary_menu.slide .menu-item-name.level-1{
        font-weight: 600;
    }

    .primary_menu.slide .menu-item.parent-node > a{
        pointer-events: none;
    }

    .primary_menu.slide .level-0.parent-node .level_1 .mobile-header,
    .primary_menu.slide .level-0.parent-node .level_2 .mobile-header{
        display: none;
    }

    .primary_menu .top-bar-header{
        display: none;
    }

    .primary_menu.slide .level-0 .level_1,
    .primary_menu.slide .level-1 .level_2 {
        left: -25%;
        padding-top: 3.6rem;
        padding-left: 1.2rem;
        z-index: -1;
        opacity: 0;
    }

    .primary_menu.slide .level-0 .level_1 li {
        opacity: 0;
        transition: opacity ease .2s;
        transition-delay: 0;
    }

    .primary_menu.slide .level-0.active .level_1{
        left: calc(25% - 1.2rem);
        opacity: 1;
        transition-delay: 0;
    }

    .primary_menu.slide .level-0.active .level_1 > li{
        opacity: 1;
        transition-delay: .4s;
    }

    .primary_menu.slide .level-1.active .level_2 {
        left: calc(50% - 2.4rem);
        opacity: 1;
        transition-delay: 0;
    }

    .primary_menu.slide .level-1.active .level_2 > li{
        opacity: 1;
        transition-delay: .4s;
    }

    .primary_menu.slide .menu-item-name{
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        margin: .6rem 1.2rem 0;
        position: relative;
        border-radius: var(--theme-border-radius);    
        transition: all ease .2s;
        padding: 0;
    }

    .primary_menu.slide .menu-item:hover > .menu-item-name{
        background-color: #ccc;
        padding: 0 .6rem;
    }

    .primary_menu.slide .menu-item.active > .menu-item-name{
        background-color: #000;
        color: #fff;
        padding: 0 .6rem;
    }

    .primary_menu.slide .menu-item.active > .menu-item-name > .nav_arrow{
        color: #fff;
    }

    .primary_menu.slide .menu-item > .menu-item-name .link-arrow{
        display: none;
    }

    .primary_menu.slide .menu-item-name.parent{
        font-weight: 600;
        margin: .6rem 1.2rem;
        padding: 0;
        border-bottom: 1px solid #ccc;
        border-bottom: var(--theme-border-style) solid #ccc;
        height: 50px;
    }

    .primary_menu.slide .level_2.child_node .menu-item-name.level-2.link {
        font-weight: 300;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-back, .primary_menu:not(.slide):not(.toggle):not(.dropdown) .nav_arrow{
        display: none;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 > .level_1{
        display: none;
        position: absolute;
        top: 100%;
        background-color: #fff;
        text-align: left;
        margin: 0 auto;
        box-shadow: 0 4px 4px 4px #00000026;
        padding: 1.2rem;
        height: auto;
        border: none;
        border-radius: 0 0 var(--theme-border-radius) var(--theme-border-radius);
        width: auto;
        left: calc((100vw - 1024px) / -2);
        right: calc((100vw - 1024px) / -2);
        padding-left: calc(((100vw - 1024px) / 2) + 1.2rem);
        padding-right: calc(((100vw - 1024px) / 2) + 1.2rem);
        grid-template-columns: repeat(6, auto);
    }

    .primary_menu:not(.slide) .menu-item.level-0 > .level_1 .level_2{
        position: relative;
        width: auto;
        height: auto;
        z-index: unset;
        left: 0;
        border-radius: 0;
        background: none;
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(8, auto);
        gap: .6rem;
        padding-top: .6rem;
    }

    .primary_menu.dropdown >.level_0 > .menu-item.level-0 > .level_1{
        left: -.6rem;
        right: -.6rem;
        border-radius: var(--theme-border-radius);
        width: auto;
        padding: 1.2rem;
    }

    .primary_menu.dropdown .nav_arrow{
        margin-left: 0.15rem;
    }

    .primary_menu.dropdown .level-0 > .nav_arrow{
        transform: rotate(90deg);
        margin-left: .3rem;
    }

    .primary_menu.dropdown .menu-item-name{
        white-space: nowrap;
    }

    .primary_menu.dropdown >.level_0 > .menu-item.level-0 > .level_1 .level_2{
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: #fff;
        text-align: left;
        margin: 0 auto;
        box-shadow: 0 4px 4px 4px #00000026;
        width: calc(100% + 3rem);
        padding: 1.2rem;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        height: auto;
        border: none;
        border-radius: var(--theme-border-radius);
    }

    .primary_menu.dropdown >.level_0 > .menu-item.level-0 > .level_1 > .level-1:hover > .level_2{
        display: flex;
    }

    .primary_menu.dropdown .menu-item-name{
        margin: 0;
    }

    .primary_menu:not(.slide):not(.toggle):not(.dropdown) .menu-item.level-0 > .level_1 > li.level-1{
        padding: 0 1.2rem;
    }

    .primary_menu.megamenu .menu-item.level-0 > .level_1 > li.level-1{
        /* width: calc(100% / 6); */
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 > .level_1 > li.level-1:last-child{
        border-right: none;
    }

    .primary_menu.megamneu .menu-item.level-0 > .level_1{
        padding: 2.4rem calc((100vw - 1366px) / 2);
        left: 0;
        max-width: 1920px;
        width: 100vw;
    }

    .primary_menu:not(.slide):not(.toggle) .level_2{
        border-top: 1px solid #ccc;
        border-top: var(--theme-border-style) solid #ccc;
    }
    .primary_menu:not(.slide):not(.toggle) .level_2 .level-2.heading.bold.type_menu_item.menu-item                                                {
        padding: 0;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0:hover > .level_1, .primary_menu:not(.slide):not(.toggle) .level_1:hover{
        display: grid;
    }

    .primary_menu:not(.slide):not(.toggle) .level-1.type_menu_group{
        /* width: calc(100% / 6); */
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 .menu-item-name{
        padding: .6rem 0;
        line-height: 1;
        position: relative;
        border-radius: var(--theme-border-radius);    
        transition: all ease .2s;
        pointer-events: all;
        margin: 0;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 .menu-item-name.link{
        padding-right: 2.4rem;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 > .menu-item-name {
        font-weight: 600;
        padding: .6rem;
        margin: 0;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0:hover > .menu-item-name{
        background-color: #000;
        background-color: var(--top-level-background-hover-colour);
        color: #fff;
        color: var(--top-level-font-hover-colour);
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-1 > .menu-item-name{
        font-weight: 600;
        margin: 0;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-2 > .menu-item-name:hover{
        background-color: #ccc;
        background-color: var(--menu-item-font-hover-colour);
        color: var(--menu-item-background-hover-colour);
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-2 > .menu-item-name .menu-item-text{
        position: relative;
        left: 0;
        transition: all ease .2s;
    }
    
    .primary_menu:not(.slide):not(.toggle) .menu-item.level-2 > .menu-item-name:hover .menu-item-text{
        left: .6rem;
    }

    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0:after {
        content: '';
        width: 100%;
        height: 30px;
        display: block;
        margin-bottom: -30px;
    }

    .primary_menu:not(.slide) .mobile-header{
        display: none;
    }

    .level-1.category > .child_node{
        display: inline-flex;
        flex-wrap: wrap;
    }

    .toggle-mega, .toggle-dropdown{
        display: none;
    }

    .primary_menu.slide, .primary_menu.slide .level_1, .primary_menu.slide .level_2{
        max-width: 25%;
    }

    .toggle-togglemenu svg{
        display: none;
    }

    .primary_menu.toggle{
        display: none;
        position: absolute;
        transition: none;
        height: auto;
        width: 100%;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 4px 4px 0 #00000026;
        border: none;
        border-bottom-left-radius: var(--theme-border-radius);
        border-bottom-right-radius: var(--theme-border-radius);
    }

    .primary_menu.toggle.active{
        display: block;
    }

    .toggle-menu-content{
        position: relative;
        transition: all ease .2s;
    }

    .toggle .menu-item.level-0{
        width: calc(20% - 2.4rem);
        padding: 1.2rem 0;
        margin: 0 1.2rem;
    }

    .toggle .menu-item.level-0:not(:last-child){
        border-bottom: 1px solid #ccc;
        border-bottom: var(--theme-border-style) solid #ccc;
    }

    .toggle .menu-item.level-0 > .menu-item-name{
        display: flex;
        align-items: center;
        gap: 1.2rem;
        font-weight: 600;
    }

    .primary_menu.toggle .level-0.parent-node > .level_1{
        position: absolute;
        width: calc(80% + 2.4rem);
        height: auto;
        top: 0%;
        left: calc(20% - 2.4rem);
        background: none;
        right: 0;
        padding: 1.2rem 1.2rem 1.2rem 2.4rem;
        grid-template-columns: repeat(6, 1fr);
        row-gap: 2.4rem;
        display: none;
    }

    .primary_menu.toggle .level-0.parent-node:hover > .menu-item-name{
        text-decoration: underline;
    }

    .primary_menu.toggle .level-0.parent-node:hover > .level_1{
        display: grid;
    }

    .toggle .level-0 > .level_1 > .level-1{
        padding: 0 1.2rem;
        border-right: 1px solid #ccc;
        border-right: var(--theme-border-style) solid #ccc;
    }

    .toggle .level-0 > .level_1 > .level-1:last-child{
        border-right: none;
    }

    .toggle .level-0 > .level_1 > .level-1:nth-child(6n){
        border-right: none;
    }

    .toggle .level-0 > .level_1 > .level-1 > .menu-item-name{
        padding: 0 .6rem 1.2rem;
        margin-bottom: 1.2rem;
        border-bottom: 1px solid #ccc;
        border-bottom: var(--theme-border-style) solid #ccc;
        font-weight: 600;
        display: block;
    }

    .toggle .level-0 > .level_1 > .level-1 > .level_2{
        padding: 0 .6rem;
    }

    .toggle-overlay{
        top: 120px;
    }
}

@media(min-width: 1280px){
    .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 > .level_1{
        left: calc((100vw - 1280px) / -2);
        right: calc((100vw - 1280px) / -2);
        padding-left: calc(((100vw - 1280px) / 2) + 1.2rem);
        padding-right: calc(((100vw - 1280px) / 2) + 1.2rem);
    }
}

@media(min-width: 1536px){
    #header .primary_menu:not(.slide):not(.toggle) .menu-item.level-0 > .level_1{
        left: calc((100vw - 1536px) / -2);
        right: calc((100vw - 1536px) / -2);
        padding-left: calc((100vw - 1536px) / 2);
        padding-right: calc((100vw - 1536px) / 2);
    }
}

@media(max-height: 800px){
    .primary_menu:not(.slide) .menu-item.level-0 > .level_1 .level_2{
        grid-template-rows: repeat(6, auto);
    }
}