@media only screen and (min-width: 768px) {
.bbNavigation li.more_button > span,
.bbNavigation .flex > li.level0 > a {
    line-height: 40px;
    height: 40px;
    font-weight: 600;
    display: block;
}

    .menuContainer {
        left: auto !important;
    }

.bbNavigation li.level1 a,
.bbNavigation li.more_button a {
    line-height: 25px;
    font-size: 13px;
    display: block;
}

.bbNavigation li.level1 a:hover,
.bbNavigation li.more_button a:hover {
    text-decoration: underline;
}

.bbNavigation .parent:not(.level0) > .submenu {
    display: none !important;
}

.bbNavigation .parent:not(.level0) > a {
    font-weight: 400;
}

.mobile-menu-image,
.bbNavigation li.level0 > .submenu,
.mobile-menu-overlay,
.back-to-main-menu,
.more_menu,
.show-all-menu {
    display: none;
}

.bbNavigation li.level0 > .submenu {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    position: absolute;
    background: #fff;
    top: 100%;
    left: 0;
    width: 100%;
    color: var(--text-primary-default);
    padding: 20px;
}

    .column.cms {
        grid-column: 2/2;
        grid-row: 1 / -1;
        line-height: 25px;
        font-size: 13px;
    }

    .column.cms a:hover {
        text-decoration: underline;
    }

    .column.image {
        grid-column: 4/4;
        grid-row: 1 / -1;
        display: flex;
        justify-content: end;
    }
    .column.image img {
        max-height: 200px;
        height: 100%;
        width: auto;
    }

    .column.cms [data-content-type='row'] > div {
        padding: 0;
        margin: 0;
    }

    .column.cms h4{
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .column.cms [data-content-type='row'][data-appearance='contained'] {
        padding: 0;
    }

    .column.cms + .column.cms {
        grid-column: 3/3;
    }

    .menu-brand .column.cms {
        grid-column: 1/1;
    }

    .menu-brand .column.cms + .column.cms {
        grid-column: 2/2;
    }

    li.level1.category-item {
        grid-column: 1/1;
    }

.bbNavigation li.level0:hover .submenu {
    display: grid;
}

.bbNavigation .more_menu,
.bbNavigation .submenu ul {
    font-size: 13px;
}


/*MORE MENU*/
.bbNavigation li.more_button:hover .more_menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    background: #fff;
    color: var(--text-primary-default);
    width: max-content;
    padding: 20px 0;
    font-weight: 400;
}

.bbNavigation li.more_button:hover .more_menu .submenu {
    display: none;
}

.bbNavigation li.more_button:hover .more_menu li.parent:hover > .submenu {
    display: block;
}

.more_menu > li {
    display: none;
}

.bbNavigation li.more_button .parent {
    position: relative;
}

.bbNavigation li.more_button a {
    font-weight: 400;
    padding: 0 20px;
}

.bbNavigation li.more_button .submenu {
    top: 0;
    right: 100%;
    padding: 20px 0;
    position: absolute;
    left: auto;
    width: max-content;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.moreMenuVisible {
    display: block !important;
}
}
/*MOBILE MEGAMENU*/

@media only screen and (max-width: 767px) {
    .more_button,
    .column.image,
    .column.cms {
        display: none;
    }

    .menuWrapper {
        border-top: 1px solid #C7C7C7;
        margin-top: 20px;
        height: calc(100% - 215px);
        overflow-y: auto;
    }

    ul.menuContainer {
        gap: 0;
        left: 0;
        width: 100%;
        position: absolute;
        transition: left 0.3s ease-out;
    }

    .menuContainer > li.level0 {
        display: block;
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        z-index: 98;
        transition: opacity 0.3s ease-out;
    }

    .bbFilters.open .mobile-menu-overlay,
    .bbNavigation.open .mobile-menu-overlay {
        opacity: 1;
        pointer-events: all;
    }

    li.parent > a {
        position: relative;
        display: flex;
        width: 100%;
        line-height: 30px;
    }
    .back-to-main-menu > span:before,
    li.parent > a:after {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.76' height='10.953'%3E%3Cpath fill='%23282828' d='m0 9.669 4.193-4.193L0 1.283 1.284 0l5.477 5.476-5.477 5.476Z'/%3E%3C/svg%3E");
        position: absolute;
        right: 10px;
        top: 50%;
        width: 7px;
        height: 11px;
        transform: translateY(-50%);
    }

    .mobile-menu {
        position: fixed;
        left: -100%;
        overflow: hidden;
        top: 0;
        transition: left 0.3s ease-out;
        width: calc(100% - 40px);
        background: #fff;
        height: 100%;
        padding: 0 0 20px;
        z-index: 99;
    }

    .mobile-filters > .block-content {
        padding: 20px 20px 60px;
        max-height: calc(100vh - 40px);
        overflow: auto;
    }

    .mobile-filters > .block-content > .filter-option:last-child {
        margin-bottom: 50px;
    }

    .submenu {
        position: absolute;
        top: 0;
        display: none;
        left: 100%;
        width: 100%;
    }

    .back-to-main-menu > span {
        background: #f3f3f3;
    }
    .back-to-main-menu > span:before{
        transform: rotate(180deg);
        position: relative;
        height: auto;
        left: 0;
        background-repeat: no-repeat;
        background-position: 50%;
    }
    .back-to-main-menu > span,
    .bbNavigation li > a {
        border-bottom: 1px solid #C7C7C7;
        padding: 10px 20px;
        display: flex;
        gap: 10px;
        line-height: 20px;
    }
    .back-to-main-menu > span {
        height: auto;
        cursor: pointer;
    }
    .bbNavigation .level-top > a > * {
        pointer-events: none;
    }
    .bbNavigation .level-top > .mobile-menu-image {
        display: block;
        width: 40px;
        height: 40px;
    }

    .bbNavigation .level-top > span {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bbFilters.open .mobile-menu,
    .bbNavigation.open .mobile-menu {
        left: 0;
    }

    .mobileMenuOpen {
        display: block;
    }
}

@media only screen and (max-width: 420px) {
    .w-3\/5.ml-\[38\%\] {
        width: 55%;
        margin-left: 45%;
    }
}

@media only screen and (max-width: 350px) {
    .mobile-menu {
        width: 100%;
    }
}

@media only screen and (max-height: 784px) {
    .mobile-contact-block {
        display: none;
    }

    .menuWrapper {
        height: 100%;
    }
}
