/*
 * The original header switched to its mobile layout at 1024px. The cart
 * control makes the desktop header wider, so use a compact layout first and
 * switch before the navigation can overflow.
 */
.js-responsive-submenu-toggle {
    display: none;
}

@media screen and (min-width: 1400px) and (max-width: 1660px) {
    .l-header {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .l-header__branding-container {
        min-width: auto !important;
        margin-right: 24px !important;
    }

    .l-header .menu-header-menu-container > .menu > li,
    .l-header .local-preview-menu > li {
        margin-right: 12px !important;
    }

    .l-header .level .level-right > ul > li:not(:last-child) {
        margin-right: 8px !important;
    }

    .l-header .level .level-right a {
        font-size: 0.875rem !important;
    }

    .l-header .level .level-right .button,
    .l-header .level .level-right .wp-block-button__link {
        min-height: auto !important;
        padding: 7px 10px !important;
        font-size: 0.875rem !important;
    }
}

@media screen and (max-width: 1399px) {
    body.admin-bar .l-header {
        top: 0;
    }

    body.admin-bar #wpadminbar {
        display: none !important;
    }

    body.mobile-nav-is-open {
        height: 100vh;
        overflow: hidden;
    }

    header {
        height: auto;
    }

    .l-header {
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        left: 0;
        height: 60px !important;
        padding: 0 20px !important;
        background-color: #062339;
    }

    .l-header .level {
        position: relative;
        justify-content: flex-end;
    }

    .l-header .level .level-left {
        position: absolute;
        width: 100%;
        justify-content: center;
    }

    .l-header .level .level-left .level-item--branding {
        z-index: 999;
        width: 100%;
        justify-content: flex-start;
    }

    .l-header .level .level-left .level-item--navigation {
        width: 100%;
    }

    .l-header__branding-container {
        min-width: auto !important;
        margin-right: 0 !important;
    }

    .l-header__branding-container img {
        width: auto !important;
        height: 25px;
        margin-left: 15px;
    }

    .l-header .level .level-right {
        align-items: flex-end;
    }

    .l-header .level .level-right > ul.is-hidden-touch,
    .desktop-sub-menu.is-hidden-touch {
        display: none !important;
    }

    .l-header__hamburger {
        display: block !important;
    }

    .l-header__navigation {
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        overflow-y: auto;
        background-color: #fff;
        transform: translateX(-100%);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    }

    .l-header__navigation.is-active {
        transform: translateX(0);
    }

    .l-header__navigation > .container {
        width: 100%;
        max-width: none !important;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 5px;
        width: 91%;
        max-width: 760px;
        margin: 0 auto;
        padding: 80px 0 0;
        background-color: #fff;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop > small {
        display: block;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop > li {
        margin-right: 0 !important;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop > li a {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop > li.link__woo a {
        color: #fff;
        border-color: #39bdea !important;
        background-color: #39bdea !important;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop .wc_aelia_cs_currency_selector {
        max-width: 100%;
        padding-top: 0;
    }

    .l-header__navigation > .container > ul.is-hidden-desktop .selected_currency {
        max-width: 100%;
    }

    .l-header__navigation ul.menu {
        height: auto;
        min-height: calc(100vh - 330px);
        margin-top: 30px;
        padding: 10px 0 80px;
        display: flex;
        flex-direction: column !important;
        background: #fff;
    }

    .l-header__navigation ul.menu > li {
        position: relative;
        height: auto !important;
        margin-right: 0 !important;
        padding: 0 !important;
        display: block;
        border-top: 1px solid #b5b5b5;
    }

    .l-header__navigation ul.menu > li:last-child {
        border-bottom: 1px solid #b5b5b5;
    }

    .l-header__navigation ul.menu > li > a {
        width: 100%;
        margin-right: 0;
        padding: 15px 0 !important;
        display: block;
        color: #062339;
        font-size: 1rem !important;
        font-weight: 700;
    }

    .l-header__navigation ul.menu > li.menu-item-has-children > .sub-menu {
        position: static;
        margin-top: 0;
        padding: 0 0 10px;
        display: none;
        background: transparent;
        box-shadow: none;
    }

    .l-header__navigation ul.menu > li.menu-item-has-children > .sub-menu a {
        width: 100%;
        padding: 5px 30px 5px 0 !important;
        display: block;
        color: #231f20;
        font-size: 0.875rem;
        line-height: 2.5em;
    }

    .l-header__navigation ul.menu > li.menu-item-has-children > i {
        display: none !important;
    }

    .js-responsive-submenu-toggle {
        position: absolute;
        z-index: 2;
        top: 8px;
        right: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        display: block;
        color: #39bdea;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .js-responsive-submenu-toggle::before {
        content: "+";
        font-size: 1.35rem;
        font-weight: 300;
    }

    .js-responsive-submenu-toggle.is-active::before {
        content: "−";
    }

    .l-content {
        padding-top: 55px;
    }
}