.header__top {
    background: var(--faf-9-fa);
    padding: clamp(10px, 0.001875 * 100vw + 9.4px, 13px) 0;
}

.header__top .container {
    display: flex;
    justify-content: space-between;
}

.header__top-menu {
    display: flex;
    gap: clamp(5px, 0.028125 * 100vw + -4px, 50px);
}

.header__top-menu > li {
    list-style: none;
    position: relative;
}

.header__top-menu > li a {
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--9999-ab);
}

@media (min-width: 992px) {
    .header__top-menu > li a:hover {
        --color: var(--212067);
    }
}

.header__top-menu > li a * {
    transition: var(--transition);
}

.header__top-menu > li.has-childs a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header__top-menu > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

.header__top-menu .sub-menu {
    transition: all 0.3s;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 100%;
    left: clamp(-15px, -0.003125 * 100vw + -9px, -10px);
    width: calc(100% + clamp(20px, 0.00625 * 100vw + 18px, 30px));
    z-index: 5;
    background-color: var(--faf-9-fa);
    padding: 12px 15px 17px;
    border-radius: 2px;
    transition: var(--transition);
}

.header__top-menu .sub-menu li {
    margin-bottom: 0;
    list-style: none;
}

.header__top-menu .sub-menu li:not(:last-child) {
    margin-bottom: max(15 / 19.2 * 1vw, 5px);
}

.header__top-menu .sub-menu li .sub-menu {
    display: none;
}

.header__top-menu .sub-menu li a {
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--9999-ab);
}

@media (min-width: 992px) {
    .header__top-menu .sub-menu li a:hover {
        --color: var(--212067);
    }
}

.header__contacts {
    display: flex;
    gap: 5px;
    align-items: center;
}

.header__contacts-phone {
    --color: var(--212067);
}

@media (min-width: 992px) {
    .header__contacts-phone:hover {
        --color: var(--293990);
    }
}

.header__contacts-time {
    --color: var(--9999-ab);
}

.header__middle {
    padding: clamp(10px, 0.00625 * 100vw + 8px, 20px) 0;
    background-color: var(--ffffff);
}

.header__middle .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.header__logo {
    width: clamp(150px, 0.01625 * 100vw + 144.8px, 176px);
    height: clamp(50px, 0.003125 * 100vw + 49px, 55px);
}

.header__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.header__btn {
    width: clamp(25px, 0.004375 * 100vw + 23.6px, 32px);
    height: clamp(25px, 0.004375 * 100vw + 23.6px, 32px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__btn svg {
    width: clamp(20px, 0.003125 * 100vw + 19px, 25px);
    height: clamp(20px, 0.003125 * 100vw + 19px, 25px);
    --svgColor: var(--212067);
}

.header__btn .count {
    border-radius: 100px;
    background: var(--1297-ee);
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    min-height: 21px;
    font-weight: 800;
    font-size: 10px;
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--ffffff);
    position: absolute;
    top: -6px;
    left: calc(100% - 12px);
    z-index: 1;
}

.header__btn-wrap {
    display: flex;
    gap: clamp(20px, 0.003125 * 100vw + 19px, 25px);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header__btn-separation {
    height: 50px;
    width: 1px;
    background-color: #dfdfdf;
}

.header__login-wrap {
    display: flex;
    gap: clamp(5px, 0.004375 * 100vw + 3.6px, 12px);
    align-items: center;
}

.header__login-icon {
    width: clamp(35px, 0.008125 * 100vw + 32.4px, 48px);
    height: clamp(35px, 0.008125 * 100vw + 32.4px, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--faf-9-fa);
    border-radius: 50%;
}

.header__login-icon svg {
    --svgColor: var(--212067);
}

.header__login-title {
    --color: var(--9999-ab);
}

.header__login-btn {
    --color: var(--212067);
}

.header__add-cart {
    display: flex;
    gap: 20px;
    align-items: center;
}

.header__sum-title {
    --color: var(--9999-ab);
}

.header__sum-value {
    --color: var(--212067);
}

.header__sum-value * {
    font-weight: 800;
    font-size: clamp(14px, 0.00125 * 100vw + 13.6px, 16px);
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--212067);
    white-space: nowrap;
}

.header__search {
    width: clamp(400px, 0.295 * 100vw + 305.6px, 872px);
}

.header__search form {
    width: 100%;
    display: flex;
}

.header__search form input {
    flex: 1;
    border-radius: 2px;
    border: 1px solid var(--dfdfdf);
    background-color: var(--ffffff);
    padding: 17px 27px 18px;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--color, var(--141328));
}

.header__search form input::-moz-placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--9999-ab);
}

.header__search form input::placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--9999-ab);
}

.header__search form button {
    padding: 16px clamp(20px, 0.0125 * 100vw + 16px, 40px);
    border-radius: 2px;
    background: var(--212067);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.004375 * 100vw + 3.6px, 12px);
    font-weight: 800;
    font-size: clamp(14px, 0.00125 * 100vw + 13.6px, 16px);
    line-height: 150%;
    color: var(--color, var(--141328));
    --color: var(--ffffff);
    transition: var(--transition);
}

.header__search form button svg {
    --svgColor: var(--ffffff);
}

@media (min-width: 992px) {
    .header__search form button:hover {
        background-color: var(--293990);
    }
}

.header__bottom {
    background: var(--212067);
    --color: var(--ffffff);
}

.header__bottom .container {
    display: flex;
    align-items: center;
}

.header__bottom-menu {
    flex: 1;
    display: flex;
}

.header__bottom-menu li {
    flex-grow: 1;
    list-style: none;
    padding: 0 clamp(20px, 0.0125 * 100vw + 16px, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__bottom-menu li a {
    font-weight: 800;
    font-size: 14px;
    line-height: 150%;
    color: var(--color, var(--141328));
}

@media (min-width: 992px) {
    .header__bottom-menu li a:hover {
        --color: var(--141328);
    }
}

.header__bottom .header-dropdown {
    height: 100%;
    background: var(--212067);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 0.00625 * 100vw + 8px, 20px);
    position: relative;
    cursor: pointer;
}

.header__bottom .header-dropdown svg {
    --svgColor: var(--ffffff);
}

.header__bottom .header-dropdown__menu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--293990);
    z-index: -1;
    width: clamp(400px, 0.04125 * 100vw + 386.8px, 466px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.header__bottom .header-dropdown__menu > li {
    list-style: none;
    transition: var(--transition);
}

.header__bottom .header-dropdown__menu > li a {
    padding: clamp(5px, 0.00625 * 100vw + 3px, 15px);
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.0075 * 100vw + 7.6px, 22px);
}

.header__bottom .header-dropdown__menu > li .menu-item__icon {
    width: clamp(50px, 0.00625 * 100vw + 48px, 60px);
    position: relative;
    flex-shrink: 0;
    background: var(--ffffff);
}

.header__bottom .header-dropdown__menu > li .menu-item__icon:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.header__bottom .header-dropdown__menu > li .menu-item__icon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.header__bottom .header-dropdown__menu > li .menu-item__title {
    --color: var(--ffffff);
}

.header__bottom .header-dropdown__menu > li .menu-item__text {
    --color: var(--dfdffa);
}

.header__bottom .header-dropdown__menu > li .menu-item__text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.header__bottom .header-dropdown__menu > li .menu-item__btn {
    width: clamp(35px, 0.003125 * 100vw + 34px, 40px);
    height: clamp(35px, 0.003125 * 100vw + 34px, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.579px;
    background: var(--212067);
    flex-shrink: 0;
    transition: var(--transition);
}

.header__bottom .header-dropdown__menu > li .menu-item__btn svg {
    --svgColor: var(--ffffff);
    width: clamp(15px, 0.0025 * 100vw + 14.2px, 19px);
    height: clamp(15px, 0.0025 * 100vw + 14.2px, 19px);
    transition: var(--transition);
}

@media (min-width: 992px) {
    .header__bottom .header-dropdown__menu > li:hover {
        background-color: var(--212067);
    }

    .header__bottom .header-dropdown__menu > li:hover .menu-item__btn {
        background: var(--ffffff);
    }

    .header__bottom .header-dropdown__menu > li:hover .menu-item__btn svg {
        --svgColor: var(--212067);
    }
}

@media (min-width: 992px) {
    .header__bottom .header-dropdown:hover .header-dropdown__menu-wrap {
        opacity: 1;
        visibility: visible;
        z-index: 10;
    }
}

@media (max-width: 1399px) {
    .header__top-menu {
        gap: 10px;
    }

    .header__search {
        width: 500px;
    }

    .header__bottom-menu li {
        padding: 0 10px;
    }
}

@media (max-width: 1199px) {
    .header__top-menu {
        display: none;
    }

    .header__contacts {
        margin-left: auto;
    }

    .header__middle .header__search {
        display: none;
    }

    .header__btn-wrap {
        margin-left: auto;
        margin-right: 20px;
    }
}

@media (max-width: 991px) {
    .header__bottom {
        display: none;
    }
}

@media (max-width: 767px) {
    .header__btn-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        background-color: var(--ffffff);
        padding: 20px 10px;
    }

    .header__login-wrap .header__login-content {
        display: none;
    }
}

/*# sourceMappingURL=header.css.map */