/* mobile first =====================*/

@media (min-width: 576px) {

}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

    .d-md-block {
        display: none !important;
    }
    .u-nav__item:hover .u-nav__dropdown {
        z-index: var(--index-cover);
    }
    .u-nav__item:not(:hover) .u-nav__dropdown {
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .u-nav__dropdown-main {
        column-count: 4;
        column-gap: var(--offset-fluid);
        column-rule: 2px solid #dbdbdb;
    }
    .u-nav__dropdown-title-btn {
        display: none;
    }
    .u-nav__item:hover .u-nav__link {
        z-index: calc(var(--index-cover) + 1);
    }
    .u-nav__link:hover,
    .u-nav__item:hover .u-nav__link {
        background: var(--color-white);
        color: #dc142b;
        text-decoration: none;
    }
    .u-search:not(.is-show) .u-search__dropdown {
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .footer__col--info:nth-child(1) .footer__info-card,
    .footer__col--info:nth-child(2) .footer__info-card,
    .footer__col--info:nth-child(3) .footer__info-card {
        border-right: 1px solid rgba(255,255,255, .1);
    }
}

@media (min-width: 1200px) {
    .card-page__row .swiper-button {
        left: 30000px !important;
        right: unset !important;
    }
    .header__main-contacts .u-tooltip__text {
        font-size: 17px;
        z-index: 99999;
    }
}

/* desktop first =====================*/

@media (max-width: 1199px) {
    :root {
        --font-size-default: 14rem;
        --fs-1: 40rem;
        --fs-2: 32rem;
        --fs-3: 24rem;
        --fs-4: 20rem;
        --fs-5: 18rem;
        --fs-6: 16rem;
    }
    .container {
        padding-right: var(--offset-fluid);
        padding-left: var(--offset-fluid);
    }
    .catalog-aside__nav {
        font-size: 16rem;
    }
    .header__main-row {
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    .header__main-col {
        max-width: initial;
        flex: initial;
    }
    .u-nav-dropdown__title-wrapper {
        border-width: 1px 0;
    }
    .u-nav-dropdown__title-btn {
        border-width: 0 0 0 1px;
    }
    .u-nav__dropdown-item {
        border-bottom: 1px solid rgba(0,0,0, .2);
    }
    .card-page__main-slider .swiper-button-prev {
        left: 0;
        bottom: 0;
        top: unset;
        border-radius: 0;
    }
    .card-page__main-slider  .swiper-button-next {
        right: 0;
        bottom: 0;
        top: unset;
        border-radius: 0;
    }
    .popup-reviews .swiper-button-prev {
        left: 0;
        bottom: 0;
        top: unset;
        border-radius: 0;
    }
    .popup-reviews  .swiper-button-next {
        right: 0;
        bottom: 0;
        top: unset;
        border-radius: 0;
    }
    .promo-slider__el .swiper-button {
        /*display: none !important;*/
    }
    .promo-slider__title {
        margin-bottom: 10rem;
        font-size: 32rem;
    }
    .category-section__list {
        justify-content: center;
        flex-wrap: wrap;
    }
    .category-section__list-item {
        width: 140rem;
    }
    .category-card__picture  {
        margin-bottom: 10rem;
    }
    .category-card__picture {
        width: 98rem;
        height: 98rem;
    }
    .header__info-item {
        max-width: unset;
        flex: unset;
    }
}

@media (max-width: 991px) {
    :root {
        --offset: 10rem;
        --offset-: -10rem;
        --offset-fluid: 20rem;
        --offset-fluid-: -20rem;
        --offset-site: 92rem;
    }
    
    .header .header__container {
        padding-top: 0;
    }
    .d-md-none {
        display: none !important;
    }
    body.is-menu-opened,
    body.is-search-opened {
        overflow: hidden;
    }
    .header {
        background: var(--color-white);
        height: var(--header-height);
        /*position: sticky;*/
        top: -30rem;
        /*box-shadow: 0 1px 0 rgba(0,0,0, .2);*/
        z-index: 1000;
        height: 54px;
    }
    .header.header-hidden .header__container {
        position: fixed;
        /* transform: translateY(-100%); */
        width: 100%;
        background: white;
        z-index: 11;
        top: 0;
        height: 54px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
    }
    .header__main {
        padding: var(--offset) 0;
    }
    .header__main-col--search {
        position: absolute;
    }
    .header__main-logo {
        top: -4rem;
    }
    .header__main-contacts-favorite {
        margin-right: var(--offset);
    }
    .header__main-search {
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        transition: all .4s;
        transition-property: opacity, visibility;
        z-index: 1001;
    }
    .header__main-search:not(.is-show) {
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .header__info {
        display: block;
        text-align: center;
        white-space: nowrap;
        overflow-x: auto;
    }
    .header__info-item {
        display: inline-flex;
    }
    .header__nav {
        background: var(--color-white);
        width: 80vw;
        margin: 0;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transition: all .4s;
        transition-property: transform, opacity, visibility;
        z-index: 1098;
    }
    .header__nav:not(.is-show) {
        transform: translateX(-100vw);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .header__nav:before {
        display: none;
    }
    .header__nav:not(.is-show):before {
        opacity: 0;
        visibility: hidden;
    }
    .u-nav__list {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
    }
    .u-nav__item {
        min-height: 44rem;
        display: flex;
        flex-direction: column;
        font-size: 14rem;
    }
    .u-nav__link {
    }
    .u-nav__link-icon {
        font-size: 8rem;
    }
    .u-nav__dropdown {
        background: transparent;
        position: relative;
        top: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .u-nav__dropdown-inner {
        background: rgba(0,0,0, .04);
        max-height: unset;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .u-nav__dropdown-inner:before {
        display: none;
    }
    .u-nav__item:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    .u-nav__link {
        min-height: 43rem;
        padding: var(--offset) var(--offset-fluid);
        justify-content: space-between;
        flex-direction: row;
        font-size: 16rem;
    }
    .header__nav-overlay {
        background: rgba(0,0,0, .7);
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: all .4s;
        transition-property: opacity, visibility;
        z-index: 1006;
    }
    body:not(.is-menu-opened) .header__nav-overlay {
        opacity: 0;
        visibility: hidden;
    }
    .u-nav__dropdown-item:last-child {
        border-bottom: none;
    }
    .u-nav__dropdown-list {
        background: rgba(0,0,0, .04);
    }
    .u-nav__dropdown:not(.is-show),
    .u-nav__dropdown-list:not(.is-show) {
        display: none;
    }
    .u-nav__dropdown-main > .u-nav__dropdown-item {
        border: none;
    }
    .u-nav__dropdown-title-wrapper {
        margin: 0 -15rem;
        padding: 5rem var(--offset-fluid) 5rem var(--offset-fluid);
        border-bottom-width: 1px;
        border-color: rgba(0,0,0, .2););
    }
    .u-nav__dropdown-item + .u-nav__dropdown-item .u-nav__dropdown-title-wrapper {
        margin-top: 0;
    }
    .u-nav__link-title {
        padding: 0;
    }
    .u-nav__dropdown-title-btn.is-active,
    .u-nav__link-btn.is-active {
        transform: rotate(-180deg);
    }
    .u-nav__dropdown-item a {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .u-nav__link-wrapper {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .header__main-search {
        width: 100%;
        padding: var(--offset-fluid);
        position: fixed;
        top: var(
            --header-height);
        left: 0;
        z-index: 900;
    }
    .header__main-search:not(.is-show) {
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
    .u-search__form {
        z-index: calc(var(--index-cover) + 1);
    }
    .u-search__form {
        transition-delay: 0s;
    }
    .header__info-icon {
        margin-right: 10rem;
    }
    .promo-slider__picture {
        min-height: 410rem;
        padding-bottom: 0;
    }
    .promo-slider__content {
        background: rgba(0,0,0, .2);
        backdrop-filter: none;
        width: 100%;
        padding: 30rem;
        text-align: center;
        clip-path: unset;
    }
    .category-section__list-item {
        width: 190rem;
    }
    .reviews-section__list-col {
        max-width: 25%;
        flex-basis: 25%;
    }
    .footer {
        --vy: 30rem;
    }
    .footer__col--info {
        max-width: 50%;
        margin-bottom: var(--offset-fluid);
        flex-basis: 50%;
    }
    .footer__col--nav {
        max-width: 50%;
        flex-basis: 50%;
    }
    .footer__col--subscribe {
        max-width: 100%;
        flex-basis: 100%;
    }
    .footer__subscribe {
        width: 100%;
    }
    .footer__subscribe-title {
        margin-bottom: var(--offset);
    }
    .footer__col--info + .footer__col--nav {
        margin-top: var(--vy);
    }
    .footer__nav-item:not(:first-child) {
        margin-top: 5rem;
    }
    .card-page__col--media,
    .card-page__col--main {
        max-width: 100%;
        flex-basis: 100%;
    }
    .card-page__col--media.is-sticky {
        position: relative;
        top: 0;
    }
    .card-page__faq {
        min-height: 0;
    }
    .card-page__main {
        margin-top: var(--offset-fluid);
    }
    .card-page__settings {
        padding: var(--offset-fluid);
    }
    .card-page {
        padding-bottom: 30rem;
    }
    .layout__col--aside {
        display: none;
    }
    .layout__col--main {
        max-width: 100%;
        margin-top: 30rem;
        flex-basis: 100%;
    }
    .basket__col--main,
    .basket__col--aside {
        max-width: 100%;
        flex-basis: 100%;
    }
    .basket__col--aside {
        margin-top: 30rem;
    }
    #crop-width,
    #crop-height {
        font-size: 10px;
    }
}

@media (max-width: 767px) {
    /*.popup__reviews-card .reviews-card__content {*/
    /*    padding-bottom: 44px !important;*/
    /*}*/
    .u-nav__link.u-nav__link--dropdown .js-nav-dropdown-main-btn-mobile {
        display: none !important;
    }
    .faq-card__dropdown {
        max-height: 900px;
        transition: all 0.4s ease;
        overflow: hidden;
    }
    .faq-card:not(.is-show) .faq-card__dropdown {
        display: block !important;
        transition: all 0.4s ease;
        overflow: hidden;
        max-height: 0
    }
    .logo__title {
        font-size: 28px;
    }
    .logo__slogan {
        font-weight: 600;
        font-size: 11px;
    }
    .popup__content.popup__content--theme-white.popup__content--size-md {
        max-width: 100%;
        width: 100%;
        max-height: 90vh;
        min-width: 10px;
    }
    .popup__reviews-card .reviews-card__picture {
        max-width: 100%;
        margin: 0 0 var(--offset);
        flex: 0 0 100%;
    }
    .popup__reviews-card .reviews-card__picture img {
        width: 100%;
        max-height: unset;
        min-height: 0;
    }
    :root {
        --fs-1: 32rem;
        --offset-site: 84rem;
    }
    .good-basket {
        padding: 25px 20px 20px;
    }
    .catalog-section {
        padding: 30rem 0 60rem;
    }
    .about-section__title,
    .catalog-section__title {
        margin-bottom: 30rem;
    }
    .header__main-logo {
        top: -2rem;
    }
    .header__info-icon img {
        height: 14rem;
    }
    .promo-slider__picture {
        min-height: 360rem;
    }
    .category-section__list-item {
        width: calc(25% - 20rem);
    }
    .about-section__list-col,
    .goods-list__col {
        max-width: 50%;
        flex-basis: 50%;
    }
    .catalog-section__footer {
        margin-top: 30rem;
    }
    .reviews-rating__title {
        font-size: 18rem;
    }
    .reviews-section__list-col {
        max-width: 33.33333%;
        flex-basis: 33.33333%;
    }
    .card-page__settings {
        margin-right: var(--offset-fluid-);
        margin-left: var(--offset-fluid-);
        padding: var(--offset-fluid);
        border-radius: 0;
    }
    .card-page__submain-slider .swiper-slide {
        max-width: 86rem;
    }
    .card-page__submain-slider-card-picture {
        width: 80rem;
        height: 80rem;
    }
    .u-hr {
        margin-top: var(--offset-fluid);
        margin-bottom: var(--offset-fluid);
    }
    .card-page__settings-price-title {
        font-size: 18rem;
    }
    .card-page__settings-price-old {
        font-size: 20rem;
    }
    .basket__form {
        padding: var(--offset-fluid);
    }
    .card-page__delivery {
        padding: var(--offset);
    }
    .u-pagination__link {
        min-width: 44rem;
        height: 44rem;
        padding: 4rem;
    }
    .btn--size-md {
        padding-right: 26rem;
        padding-left: 26rem;
    }
    .layout__slider .swiper-slide {
        max-width: 110rem;
    }
    .layout__category-col {
        max-width: 50%;
        flex-basis: 50%;
    }
    .reviews-card__inner {
        flex-wrap: wrap;
    }
    .popup__reviews-card .reviews-card__picture {
        max-width: 100%;
        margin: 0 0 var(--offset);
        flex: 0 0 100%;
    }
    .layout__slider .swiper-slide {
        margin: 0 -5px;
        max-width: initial;
        padding: 1px !important;
    }
}

@media (max-width: 575px) {

    .logo {
        font-size: 34rem;
        top: -5rem;
    }
    .header__main-logo {
        top: -5rem;
    }
    .btn-action {
        font-size: var(--fs-4);
    }
    .about-section__list-col {
        max-width: 100%;
        flex-basis: 100%;
    }
    .about-card__header {
        justify-content: flex-start;
    }
    .about-card__content {
        text-align: left;
    }
    .reviews-section__list-col {
        max-width: 50%;
        flex-basis: 50%;
    }
    .faq-card__result-row {
        gap: 0;
        justify-content: space-between;
    }
    .faq-card__result-row-arrows {
        margin: var(--offset) auto;
        justify-content: center;
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        transform: rotate(-90deg);
    }
    .faq-card__result-col--item {
        max-width: 44%;
        flex: 0 0 44%;
    }
    .faq-card__result-row-arrows {
        flex-direction: column;
    }
    .faq-card__result-row-arrows .u-icon,
    .faq-card__result-row-arrows img {
        margin: -20rem 0;
        transform: rotate(-90deg);
    }
    .good-basket {
        flex-wrap: wrap;
    }
    .good-basket__content {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .good-basket__action-list {
        top: 2px;
        right: 2px;
    }
    .good-basket__media {
        max-width: 100%;
        margin: 0 0 var(--offset);
        flex-basis: 100%;
    }
    .good-basket__picture {
        max-width: 100%;
    }
    .result-card__content {
        position: relative;
        background: transparent;
        color: #000;
        padding: 0;
        text-align: center;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 26rem;
    }
    .header__main-logo {
        margin: 0 -8rem;
        display: table;
        top: -3rem;
    }
    .category-section__list-item {
        width: calc(33.33% - var(--offset-fluid));
    }
    .goods-list__col,
    .footer__col--payments,
    .footer__col--info,
    .goods-list.js-catalog-masonry-column-2 .goods-list__col {
        max-width: 100%;
        flex-basis: 100%;
    }
    .info-card__media {
        margin-right: var(--offset);
    }
    .info-card__media svg,
    .info-card__media img {
        width: 44rem;
        height: 44rem;
    }
    .info-card__title {
        margin: 5rem 0;
    }
    .card-page__settings-size {
        flex-wrap: wrap;
    }
    .card-page__settings-size-item,
    .faq-card__result-form-col {
        max-width: 100%;
        flex-basis: 100%;
    }
    .card-page__settings-size-item:not(:last-child),
    .faq-card__result-form-col:not(:last-child) {
        margin-bottom: var(--offset-fluid);
    }
    .layout__category-col {
        max-width: 100%;
        flex-basis: 100%;
    }
}