/* lg <= Extra large (xl) */
@media (max-width: 1199.98px) {
    * {
        scrollbar-width: 0;
    }

    *::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* xs <= Small (sm) */
@media (max-width: 575.98px) {
    html {
        font-size: calc(1vw / 5);
    }

    .header-menu {
        width: 100%;
        height: calc(100vh - 40rem);
        max-height: max-content;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #fff;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 49;
        padding: 190rem 15rem 20rem;
        transform: translateY(-100%);
        transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
        opacity: 0;
        visibility: hidden;
        display: none;
    }

    .header-menu.open {
        transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }

    .header-menu.d-flex {
        display: flex;
    }

    .header-menu ul {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--gap);
        width: 100%;
        padding-bottom: var(--padding);
    }

    .header-contacts__item:has(.header-phone) {
        display: none;
    }

    .city-block {
        left: 0;
        top: 30rem;
    }

    .city-choice {
        left: 0;
        top: 30rem;
    }

    .social-tel {
        display: flex;
    }

    .city-name {
        max-width: 180rem;
    }

    .header-main-btn {
        width: 48rem;
        height: 48rem;
        min-width: auto;
        padding: 0;
    }

    .header-main-btn span {
        display: none;
    }

    .header-main__top .header-main-btns {
        display: flex;
    }

    .header-main__bottom .header-main-btns {
        display: none;
    }

    .header-contacts {
        gap: 4rem;
    }

    .header-main__top-left {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap);
    }

    .header-main__top>* {
        max-width: none;
    }

    .btn-bar .icon {
        padding: 4rem;
    }

    .search input {
        padding-left: 40rem;
        padding-right: 105rem;
    }

    .search .icon {
        left: 10rem;
    }

    .btn-catalog {
        margin-right: 0;
    }

    .btn-catalog span {
        display: none;
    }

    .btn-catalog::after {
        content: 'Каталог';
    }

    .catalog-menu {
        padding-left: 15rem;
        padding-right: 15rem;
    }

    .catalog-menu__wrap {
        flex-direction: column;
    }

    .catalog-menu__left {
        width: 100%;
    }

    .catalog-menu__right .catalog-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-menu__left .catalog-wrap .catalog-item {
        min-height: 200rem;
    }

    .catalog-menu__left .catalog-wrap .catalog-item:first-child {
        grid-column: span 2;
    }

    .poster-item__block {
        width: 90%;
    }

    .catalog-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-item:first-child {
        grid-column: span 1;
    }

    .catalog-item {
        min-height: 198rem;
    }

    .swiper-navigation.absolute {
        display: none;
    }

    .advantages-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantage-num {
        font-size: 45rem;
    }

    .advantage.big .advantage-text {
        width: 90%;
    }

    .advantage-text {
        font-size: 18rem;
    }

    .advantage {
        min-height: 240rem;
    }

    .advantage .btn {
        min-width: 100%;
        max-width: 100%;
    }

    .secrets-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .contacts-wrap {
        flex-direction: column;
    }

    .contacts-info {
        width: 100%;
    }

    .contacts-form {
        flex-direction: column;
    }

    .contacts-form__text {
        width: 100%;
    }

    .contacts-form__info {
        padding-left: 0;
    }

    .form-wrap {
        flex-direction: column;
        gap: 10rem;
    }

    .form-wrap .btn {
        width: 100%;
        max-width: 100%;
    }

    .form-item-city {
        flex-direction: column;
    }

    .footer-wrap,
    .footer-right,
    .footer-menu {
        flex-direction: column;
    }

    .footer-menu {
        margin: 50rem 0;
        gap: 50rem;
    }

    .footer-left,
    .footer-info {
        width: 100%;
    }

    .btn-more {
        margin-top: 40rem;
    }

    .stocks-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .stocks__item {
        width: 430rem;
    }

    .stocks__item:has(.stocks__item-btns) .stocks__item-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;  
        justify-content: space-between;
        width: 100%;
    }

    .stocks__item-btns {
        margin-left: auto;
    }

    .product-wrap {
        flex-direction: column;
    }

    .product-right {
        width: 100%;
        margin-top: calc(var(--padding)*2);
    }

    .product-infos {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-wrap {
        flex-direction: column;
    }

    .filter {
        width: 100%;
        margin-bottom: calc(var(--padding)*2);
    }

    .filter-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        cursor: pointer;
        font-size: var(--heading2);
    }

    .filter-catalog {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: var(--padding);
    }

    .filter .toggle-body {
        display: none;
    }

    body:has(.cookies) .block-clone {
        bottom: 130rem;
    }

    .block-clone {
        display: flex;
        position: fixed;
        bottom: var(--padding);
        left: var(--padding);
        width: calc(100% - calc(var(--padding)*2));
        box-shadow: 0 0 4rem 4rem rgba(0, 0, 0, .05);
        z-index: 45;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cart-wrap {
        flex-direction: column;
        gap: var(--gap);
    }

    .cart-right {
        margin-top: calc(var(--padding)*2);
        width: 100%;
    }

    .cart-info__text {
        right: 0;
    }

    .cart-info__text::after {
        right: 10rem;
    }

    .cart-form .heading-wrap.space-between {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-wrap {
        flex-direction: column;
    }

    .about-right {
        width: 100%;
    }

    .info-block__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-block .btn {
        max-width: 100%;
    }

    .comment {
        width: 410rem;
    }

    .page-wrap .contacts-info {
        width: 100%;
        flex-direction: column;
    }

    .page-wrap .contacts-info__social {
        width: 100%;
    }

    .page-description br {
        display: none;
    }

    .page-wrap .contacts-info__top {
        text-align: center;
    }

    .labs__content {
        flex-direction: column;
    }

    .labs__map {
        width: 100%;
        height: 450rem;
    }

    .labs__sidebar {
        height: max-content;
        order: -1;
    }

    .contact__wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact__map {
        height: 450rem;
    }
}

@media (min-width: 1919.99px) {
    html {
        font-size: calc(1vw / 18);
    }
}


/* hover */
@media not (hover: none) {

    a:hover,
    a:hover .icon {
        color: var(--accent);
        fill: var(--accent);
    }

    .btn:hover {
        background-color: transparent;
        color: var(--accent);
    }

    .btn:hover .icon {
        fill: var(--accent);
    }

    .btn.gray:hover {
        background-color: var(--accent);
    }

    .btn.white:hover {
        background-color: var(--accent);
        color: #fff;
    }

    .btn.light:hover {
        background-color: var(--accent);
        color: #fff;
    }

    .btn.dark:hover {
        color: var(--black);
    }

    .btn.dark:hover .icon {
        fill: var(--black);
    }

    .slip:hover:not(.no-top) {
        top: -8rem;
    }

    .slip:hover .slip-img img {
        transform: scale(var(--img-scale));
    }

    .city-name:hover {
        color: var(--accent);
        fill: var(--accent);
    }

    .close-elem:hover {
        background-color: var(--accent);
    }

    .close-elem:hover .icon {
        fill: #fff;
    }

    .social:hover {
        background-color: var(--accent);
    }

    .social:hover .icon {
        fill: #fff;
    }

    .header-main-btn:hover {
        border-color: var(--accent);
    }

    .stocks__item:hover .btn:not(.prices, .js-cart) {
        background-color: var(--accent);
        color: #fff;
    }

    .stocks__item .btn.js-cart:hover {
        background-color: var(--light-accent);
        border-color: transparent;
    }

    .stocks__item:hover .stocks__item-time .icon {
        fill: #fff;
    }

    .prices.btn:hover {
        background-color: #fff;
    }

    .swiper-button:hover {
        border-color: var(--accent);
    }

    .swiper-button:hover .icon {
        fill: var(--accent);
    }

    .catalog-item:hover .catalog-item__cart:not(:hover) .icon {
        fill: #fff;
    }

    .catalog-item__icon:hover {
        background-color: #fff;
        border-color: var(--accent);
    }

    .catalog-item__cart:hover {
        background-color: #fff;
    }

    .catalog-item__cart:hover .icon {
        fill: var(--accent);
    }

    .advantage .btn:hover {
        border-color: #fff;
        background-color: transparent;
        color: #fff;
    }

    .form button:hover {
        background-color: transparent;
        border-color: #fff;
        color: #fff;
    }

    .contacts-info__social:hover {
        background-color: var(--accent);
        color: var(--light-accent);
    }

    .contacts-info__social:hover .icon {
        fill: var(--light-accent);
    }

    .card-icon:hover {
        border-color: var(--accent);
    }

    .stocks__item-icon:hover {
        border-color: var(--accent);
    }

    .comments .swiper-button:hover .icon {
        fill: var(--black);
    }

    .search-block__item:hover {
        background-color: #fff;
    }

    .cart-deleted:hover .icon {
        fill: var(--black);
    }

    .contacts-info__item-desc a:hover {
        color: #fff;
    }

    .labs__filters-item:not(.active):hover {
        color: var(--accent);
        border-color: var(--accent);
    }

    .catalog-item__favorite.active:hover {
        background-color: var(--accent);
    }

    .catalog-item__favorite.active:hover .icon {
        fill: #fff;
    }

    .form-item-city__item:hover {
        color: var(--accent);
    }
}