﻿@media (max-width: 1599.98px) {
    .header__btn {
        padding-left: 30px;
                padding-right: 30px;
    }
}
/* ========================================================================================================== */

@media (max-width: 1199.98px) {
    .header__form {
        display: none;
    }

    .header__catalog-wrapper {
        gap:20px;
    }

    .header__catalog-link, .header__nav-submenu-link {
        white-space: wrap;
    }
}
/* ========================================================================================================== */

@media (max-width: 991.98px) {
    .header {
        padding-top: 8px;
                padding-bottom: 6px;
    }

    .header__top,
        .header__top-left,
        .header__top-right {
        gap: 10px;
    }

    .header.open-menu {
        overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding-top: 20px;
                padding-bottom: 0;
    }

    .header__logo {
        min-width: 72px;
    }

    .header__logo-image-desktop {
        display: none;
    }

    .header__logo-image-mobile {
        display: block;
    }

    .header {
        box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    }

    .header__social {
        display: none;
    }

    .header__phone {
        display: none;
    }

    .header__btn {
        display: none;
    }

    .header__mobile-btn {
        display: block;
    }

    .header__bottom {
        display: none;
    }

    .open-menu .header__bottom {
        display: block;
    }

    .open-menu .header__nav-list {
        flex-direction: column;
    }

    header.open-menu .header__wrapper {
        position: relative;
                display: flex;
                flex-direction: column;
                flex: 0 0 auto;
                min-height: auto;
    }

    .open-menu .header__form {
        display: block;
                position: absolute;
                top:60px;
                left:0;
                width: 100%;
    }

    .open-menu .header__form .header__search {
        width: calc(100% - 60px);
                max-width: unset;
    }

    .open-menu .header__bottom {
        margin-top: 72px;
                flex: 0 0 auto;
                min-height: auto;
                overflow: visible;
    }

    .open-menu .header__catalog {
        margin-top: 16px;
    }

    .open-menu .header__nav-list {
        margin-top: 20px;
                gap:8px;
                align-items: flex-start;
    }

    .open-menu .header__nav-list .header__nav-item {
        padding-top: 0;
                padding-bottom: 0;
                text-align: left;
                width: 100%;
    }

    .open-menu .header__nav-item:hover .header__nav-submenu {
        display: none;
    }

    .open-menu .header__nav-item:hover .header__nav-link::after {
        transform: translateY(-65%) rotate(45deg);
    }

    .open-menu .header__nav-item.open-submenu .header__nav-submenu {
        display: block;
    }

    .open-menu .header__nav-item.open-submenu .header__nav-link::after {
        transform: translateY(-35%) rotate(-135deg);
    }

    .header__nav-list {
        width: 100%;
                max-width: unset;
    }

    .header__nav-link {
        font-size: 16px;
    }

    .header__nav-item:has(.header__nav-submenu) .header__nav-link {
        width: 100%;
                padding-right: 32px;
    }

    .header__nav-item:has(.header__nav-submenu) .header__nav-link::after {
        right: 10px;
                width: 10px;
                height: 10px;
    }

    .header__nav-submenu {
        max-width: unset;
                margin-top: 10px;
    }

    .header__catalog {
        flex-direction: column;
                gap:14px;
    }

    .header__catalog-submenu, .header__nav-submenu {
        position: relative;
                background-color: #fff;
                width: 100%;
                padding: 0;
    }

    .header__catalog-submenu.open-catalog-menu {
        max-height: none;
                overflow: visible;
    }

    .header__catalog-wrapper {
        flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
                width: 100%;
    }

    .header__catalog-all {
        position: static;
                margin-top: 10px;
                border-color: rgba(41, 40, 38, 0.2);
                color: #292826;
                font-size: 14px;
    }

    .header__catalog-title {
        color:#000;
                font-size: 16px;
                font-weight: 600;
    }

    .header__catalog-link {
        color:#000;
                font-size: 12px;
    }

    .header__catalog-btn::after {
        left: 12px;
                top: 8px;
    }

    .header__catalog-btn.open-catalog-menu::after {
        background-image: url('../../img/close_icon.svg');
    }

    .header__catalog-col {
        width: 100%;
    }

    .header__nav-submenu {
        max-width: unset;
    }

    .header__catalog-link::after,
        .header__nav-submenu-link::after {
        background-image: url('../../img/small-arrow-right-gray.svg');
    }

    .header__catalog-btn {
        height: 40px;
                width: 148px;
                font-size: 16px;
                border-radius: 12px;
                padding: 10px 10px 10px 40px;
    }

    .header__nav-submenu-link {
        color:#000;
                font-size: 12px;
    }

    .header__search-input {
        height: 44px;
                padding-left: 16px;
                padding-right: 44px;
    }

    .header__search-btn {
        width: 16px;
                height: 16px;
                background-image: url('../../img/small-search_icon.svg');
                right: 14px;
    }

    .open-menu .header__burger {
        background-color: #fff;
                background-image: url('../../img/close_icon.svg');
                width: 24px;
                height: 24px;
                padding: 0;
    }

    .open-menu .header__basket {
        display: none;
    }

    .header.open-menu {
        box-shadow: none;
                border-radius: 0;
                z-index: 2147483647;
                background-color: #fff;
                min-height: 100dvh;
    }

    .open-menu .header__mobile-actions {
        display: block;
                border-top: solid 1px #a9a9a8;
                padding-top: 16px;
                padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
                margin-top: 20px;
                flex: 0 0 auto;
                background-color: #fff;
                position: relative;
                z-index: 5;
    }

    .open-menu .header__mobile-actions .header__social,
        .open-menu .header__mobile-actions .header__phone,
        .open-menu .header__mobile-actions .header__btn {
        display: block;
    }

    .open-menu .header__mobile-actions .header__phone {
        margin-top: 10px;
    }

    .open-menu .header__mobile-actions .header__btn {
        margin-top: 10px;
                width: 100%;
                font-size: 14px;
                height: 40px;
                padding-top: 12px;
                padding-bottom: 12px;
                position: relative;
                z-index: 6;
                pointer-events: auto;
    }

    .header.open-menu .container {
        display: flex;
                justify-content: flex-start;
                flex-direction: column;
                height: auto;
                min-height: 100dvh;
                overflow: visible;
                overscroll-behavior: contain;
    }

    .header__mobile-actions .header__phone-link {
        gap:9px;
                font-size: 16px;
                font-weight: 500;
    }

    .header__nav-link:hover {
        color:#000;
    }
}
/* ========================================================================================================== */

@media (max-width: 767.98px) {
    .header {
        padding-top: 6px;
                padding-bottom: 4px;
    }

    .header__top,
        .header__top-left,
        .header__top-right {
        gap: 8px;
    }
}
/* ========================================================================================================== */

