@media (hover: none) and (pointer: coarse) {

    .header-menu {
        .main-menu {
            .menu-item {
                &.open {
                    &.level1 {
                        background-color: var(--submenu-color);
                    }

                    &.level2 {
                        background-color: var(--submenu-l3-color);
                    }

                    &.level3 {
                        background-color: var(--submenu-l4-color);
                    }

                    &.has-children {
                        cursor: pointer;


                        &.level1 {
                            &>.submenu {
                                display: block;
                                position: absolute;
                                top: 100%;
                                left: 0;
                            }
                        }

                        &.level2 {
                            &>.submenu {
                                display: block;
                                position: absolute;
                                left: 100%;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) {

    .header-menu {
        .main-menu {
            .menu-item {
                &:hover {
                    &.level1 {
                        background-color: var(--submenu-color);
                    }

                    &.level2 {
                        background-color: var(--submenu-l3-color);
                    }

                    &.level3 {
                        background-color: var(--submenu-l4-color);
                    }

                    &.has-children {
                        cursor: pointer;


                        &.level1 {
                            &>.submenu {
                                display: block;
                                position: absolute;
                                top: 100%;
                                left: 0;
                            }
                        }

                        &.level2 {
                            &>.submenu {
                                display: block;
                                position: absolute;
                                left: 100%;
                                top: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    .burger-menu {
        .menu-item {
            &:hover {
                &.level1 {
                    background-color: var(--submenu-color);
                }

                &.level2 {
                    background-color: var(--submenu-l3-color);
                }

                &.level3 {
                    background-color: var(--submenu-l4-color);
                }
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 950px) {
    .hidden-s {
        display: none !important;
    }

    .visible-s-block {
        display: block !important;
    }

    .visible-s-inline {
        display: inline !important;
    }

    .visible-s-inline-block {
        display: inline-block !important;
    }

    .header-navigation {
        grid-template-columns: 234px 125px 120px 150px;
        grid-template-rows: auto auto;
        justify-content: space-between;
    }

    .header-seaarch {
        grid-column: 1/-1;
        grid-row: 2;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .hidden-xs {
        display: none !important;
    }

    .visible-xs-block {
        display: block !important;
    }

    .visible-xs-inline {
        display: inline !important;
    }

    .visible-xs-inline-block {
        display: inline-block !important;
    }

    .header-navigation {
        grid-template-columns: 234px 120px 150px;
        grid-template-rows: auto auto;
        justify-content: space-between;
    }

    .header-seaarch {
        grid-column: 1/-1;
        grid-row: 2;
    }
}



@media (max-width: 768px) {
    body.lock {
        overflow: hidden;
    }

    .bottom_mobile_menu {
        display: block;
    }


    .header-menu {
        display: none;
        position: static;

        &.open {
            display: block;
        }
    }

    .level1:hover>.sub-menu>.level2 {
        display: none;
    }

    .level2:hover>.sub-menu>.level3 {
        display: none;
    }

    /* .header-menu {
        &.open {
            z-index: 100;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            display: block;
            background-color: black;
            overflow-y: auto;
            height: calc(100dvh - 60px);

            .main-menu {
                display: flex;
                flex-direction: column;
                align-items: center;

                .menu-item {
                    position: relative;
                    padding: 15px 0;
                    width: 80%;

                    .submenu {
                        &.open {
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            padding: 0 5px;

                            .level2 {
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }
    } */
    .burger-menu {
        display: none;

        &.open {
            display: block;
            position: absolute;
            top: 115px;
            left: 0;
            right: 0;
            width: 100%;
            height: calc(100vh - 169px);
            overflow-y: auto;
            border-radius: 0;

        }
    }
}

@media (max-width: 576px) {
    .hidden-xxs {
        display: none !important;
    }

    .visible-xxs-block {
        display: block !important;
    }

    .visible-xxs-inline {
        display: inline !important;
    }

    .visible-xxs-inline-block {
        display: inline-block !important;
    }

    .header-navigation {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        justify-content: space-between;
    }

    .header-seaarch {
        grid-column: 1/-1;
        grid-row: 2;
        padding: 0 10px 10px 10px !important;
    }

    .header-logo {
        width: 130px;
    }

    .header-logo img {
        width: 130px;
        padding-top: 3px;
    }

    .header-lk {
        flex-grow: 1;
    }

    .header-lk li a {
        display: flex;
        gap: 5px;
    }

    .burger-menu {
        display: none;

        &.open { 
            display: block;
            position: absolute;
            top: 89px;
            left: 0;
            right: 0;
            width: 100%;
            height: calc(100vh - 143px);
            overflow-y: auto;
            border-radius: 0;

        }
    }
}