/* начало bread-crumbs */
#bread-crumbs {
    margin-top: 137px;
}

.bread-crumb {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bread-crumb-group {
    display: flex;
    gap: 16px;
}

.bread-crumb-group-row {
    display: flex;
    gap: 5px;
    align-items: center;
}

.ys-catalog .ys-hidden {
    display: none;
}

.ys-catalog {
    overflow: hidden;
}

.ys-catalog .container.bread-crumb h2 {
    margin-bottom: 0px;
}

.footer-logo {
    width: 120px;
    height: auto;
}

@media screen and (max-width: 1200px) {
    #bread-crumbs {
        margin-top: 95px;
    }

    .bread-crumb {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .bread-crumb-group-row {
        gap: 5px;
    }

}

@media screen and (max-width: 500px) {
    .ys-catalog .container.nav .category-text {
        display: none;
    }
}
/* конец bread-crumbs */

/* начало категорий */
#nav {
    background-color: var(--gray);
    margin-top: 28px;
    border-bottom: 1px solid var(--light-gray);
    border-top: 1px solid var(--light-gray);
}

.nav {
    display: flex;
    gap: 40px;
    padding: 5px 20px;
    color: var(--white);
    align-items: center;
    
} 

.nav-group {
    display: flex;
    align-items: center;
}
  
.nav-group.category {
    gap: 10px;
    transition: var(--base-transition);
    cursor: pointer;
} 

.nav-group.arrow {
    gap: 5px;
    transition: var(--base-transition);
    cursor: pointer;
}  

.nav-group.arrow path,
.nav-group.arrow svg {
    transition: var(--base-transition);
}

.nav-group.arrow:has(.active),
.nav-group.arrow:has(.fill) {
    color: var(--accent);
}
.nav-group.arrow:has(.active) path,
.nav-group.arrow:has(.fill) path {
    fill: var(--accent);
}
.nav-group.arrow:has(.active) svg {
    transform: rotate(-180deg);
    transform-origin: center;
}

.nav-group.switch {
    gap: 12px;
}

.nav-group.svg {
    cursor: pointer;
}

.nav-filters {
    display: flex;
    gap: 20px;
}

.nav-group-text,
.category-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

.nav-group__ys p {
    margin-bottom: 0;
}

.nav-group-text {
    margin-right: 30px;
    margin-bottom: 0;
}

.nav-group__switch input:checked + .nav-group__switch-slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}
.nav-group__switch input:checked + .nav-group__switch-slider {
    background-color: var(--accent);

}
.header-group-icon .basket {
    position: relative;
}
.ys-catalog footer:not(._ys-footer){
    display: none;
}
.header-group-icon .basket span {
    background: var(--accent);
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 9px;
    line-height: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 9px;
    top: -5px;
}
.header-group-icon .basket img {
    width: 16px;
    height: 16px;
}
.nav-group__search form {
    position: relative;
    width: 300px;
    margin: 0 auto;
}

.nav-group__search input, .nav-group__search-btn .nav-group__search-btn-item {
    border: none;
    outline: none;
    border-radius: 3px;
}

.nav-group__search input {
    width: 100%;
    height: 30px;
    background: var(--white);
    border-radius: 10px;
    border: 1px solid #C3C5C3;
    padding: 6px 9px 6px 32px;
}

.nav-group__search input::placeholder {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #C3C5C3;
}

.nav-group__search-btn .nav-group__search-btn-item {
    all: unset;
    width: max-content;
    background: var(--white);
    cursor: pointer;
}

.nav-group__search-btn {
    position: absolute;
    top: 7px;
    right: 9px;
    display: flex;
    gap: 16px;
}

.nav-group__switch {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 16px;
  }
  
.nav-group__switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
  
.nav-group__switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    -webkit-transition: var(--base-transition);
    transition: var(--base-transition);
    border-radius: 10px;
    border: 1px solid var(--accent);
}
  
.nav-group__switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 16px;
    left: 0px;
    bottom: 0px;
    background-color: var(--light-accent);
    -webkit-transition: var(--base-transition);
    transition: var(--base-transition);
    border-radius: 10px;
    border: 1px solid var(--accent);
}
.footer-info-development-group img {
    height: 30px;
}
.ys-card-add-btn {
    background-color: var(--accent);
    border-top-left-radius: 16.5px;
    border-bottom-left-radius: 16.5px;
    display: flex;
    align-items: center;
    color: var(--white);
    padding-right: 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    transform: translateX(calc(100% - 32px));
    transition: .5s;
    border: 1px solid var(--accent);
    overflow: hidden;
}

.ys-card-add-btn:active {
    background-color: var(--white);
    color: var(--accent);
}
/* .ys-card-add-btn:active rect{
    fill: var(--accent);
} */

.big-card .ys-card-add-btn {
    padding-right: 30px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    border-top-left-radius: 37.5px;
    border-bottom-left-radius: 37.5px;
    transform: translateX(calc(100% - 74px));
}
.ys-card-add-btn:hover {
    transform: translateX(0);
}
@media screen and (max-width:1320px) {
    .nav {
        justify-content: space-between;
        padding: 5px 30px;
        gap: 0;
    }

    .nav-group__ys {
        padding: 5px 0px;
    }

    .ys-catalog .container.nav {
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .nav-group__search {
        max-width: 600px;
        width: 100%;
    }

    
    .nav-group {
        display: none;
    }
    .nav-group.svg {
        display: block;
    }

    .nav-group.svg .nav-group-svg {
        display: none;
    }

    .nav-group.category {
        display: flex;
        flex-wrap: nowrap;
    }
    .nav-group.nav-group__ys {
        display: flex;
    }
    .nav-group__search form {
        width: 100%;
    }
    
    .nav-filters.mobile > *:not(.svg) {
        display: none;
        gap: 20px;
    }

    .nav-filters.mobile {
        position: absolute;
    }
}
/* конец категорий */

/* начало банер-слайдер */
#banner-slider {
    margin-top: 40px;
}

.banner-slider {
    display: flex;
    flex-direction: column;
}    


.swiper {
    overflow: hidden;
}

.banner-slider__banner h2 {
    margin: 0 0 -9px 170px;
    z-index: 10;
    position: relative;
}

.banner-slider__banner a {
    z-index: 1;
}

.banner-slider__banner-group {
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(141,139,217,1) 43%, rgba(198,197,255,1) 43%);
    padding: 12px 155px 90px 157px;
    height: 500px;
    position: relative;
}

#table-banner-slider .banner-slider__banner-group {
    padding: 25px 196px 66px 470px;
}

#table-banner-slider .banner-slider__banner-group-img img:last-of-type {
    width: 321px;
    height: 355px;
    margin-top: 34px;
}

.banner-slider__banner-group button {
    margin: 0px 0 0 13px;
    font-size: 14px;
    font-weight: 600;
    line-height: 17.07px;
    background: var(--accent);
    color: var(--white);
    padding: 5px 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--base-transition);
    height: auto;
    text-transform: unset;
    letter-spacing: normal;
    position: absolute;
    width: max-content;
}

.banner-slider__banner-group button::after,
.banner-slider__banner-group button::before {
    display: none;
}

#chain-banner-slider {
    margin-top: 100px;
}

#chain-banner-slider .banner-slider__banner-group-img {
    display: grid;
    grid-template-columns: 215px 490px;
    gap: 0px;
}

.banner-slider__banner-group-img {
    position: relative;
}

#chain-banner-slider .banner-slider__banner-group {
    padding: 50px 171px 150px 466px;
    position: relative;
}

#chain-banner-slider .banner-slider__banner-group h2 {
    text-transform: unset;
    position: absolute;
    top: 249px;
    left: 0px;
    color: var(--white);
}

#chain-banner-slider  .card-img__img {
    width: 300px;
    height: 215px;
}

#chain-banner-slider .banner-slider__banner-group span {
    font-size: 64px;
    font-weight: 600;
    line-height: 51px;
    color: var(--white);
}

.banner-slider__banner-group-img {
    display: grid;
    align-items: center;
    grid-template-columns: 542px 432px;
    gap: 34px;
}

.banner-slider__banner-group-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

#banner-slider .banner-slider__banner-group-img img:first-child {
    transform: scaleX(-1);
    margin-top: 48px;
}

#chain-banner-slider .banner-slider__banner-group-img img {
    height: 300px;
}

.bannerSwiper {
    width: 100%;
    height: 100%;
    max-width: 980px;
    margin-top: -100px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    display: none;
}

.slider {
    position: relative;
}

.slider-nav {
    position: absolute;
    top: 50%;
    left: 65px;
    right: 65px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.tabSwiper .swiper-slide {
    width: unset;
}


.card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--light-gray);
    border-radius: 10px;
    /* width: 320px; */
    gap: 10px;
    transition: var(--base-transition);
    position: relative;
    overflow: hidden;
    min-height: 544px;
}

.card-img {
    border-radius: 10px;
    position: relative;
    width: 100%;
    height: 320px;
}
.card-img.background {
    /* background-color: var(--light-accent); */
    height: 320px;
    position: relative;
    overflow: hidden;
} 

.card-img__star img {
    width: 20px;
    height: 21px;
}

._card-slide p {
    margin-bottom: 0;
}

.banner-wrapper:last-child {
    margin-bottom: 100px;
}

@media screen and (max-width: 1200px) {
    .banner-wrapper:last-child {
        margin-bottom: 50px;
    }
}

.card-img__group {
    display: flex;
    justify-content: space-between;
}

.card-img__group-sale {
    background: var(--accent);
    padding: 9px 5px;
    color: var(--white);
    border-top-left-radius: 10px;
    aspect-ratio: 1;
    width: 33px;
    display: flex;
    justify-content: center;
}

.card-img__group img {
    margin: 13px 13px 0 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.card-img__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-img__basket { 
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    position: absolute;
    top: 246px;
    right: 0px;
}

#chain-banner-slider .card-img__basket {
    position: absolute;
    right: 0;
    bottom: 41px;
}

.ys-card-add-btn img {
    height: 33px;
    aspect-ratio: 1;
    padding: 9px 8px 9px 9px;
    width: 33px;
    filter: brightness(2);
    transition: var(--base-transition);
}

.ys-card-add-btn:active img {
    filter: brightness(1);
}

.big-card .ys-card-add-btn img {
    height: 75px;
    aspect-ratio: 1;
    padding: 22px 14px 22px 26px;
    width: 75px;
}

.card-img__star {
    display: flex;
    margin: 0 0 11px 10px;
}

.card-info {
    display: flex;
    flex-direction: column;
}

.card-info__subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0;
}

.card-info__subtitle-split {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-info__subtitle-split {
    white-space: nowrap;
}

.card-info__subtitle-split-black {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #000;
    color: var(--white);
    padding: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.card-info__subtitle-split-black img {
    height: 14px;
}

.card-info__subtitle-split-black p {
    font-size: 12px;
    line-height: 12px;
}

.card-info__subtitle-split-red {
    background: #FF4C52;
    color: var(--white);
    border-radius: 10px;
    padding: 2px 3px 2px 4px;
    font-size: 10px;
    line-height: 10px;
}

.card-info h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 10px;
    margin-top: 9px;
}

.card-info__info {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 10px;
}

.card-info__info-text {
    margin-top: 10px;
}

.card-info__info-price {
    display: flex;
    align-items: center;
    gap: 5px;
    /* margin-top: 10px; */
}

.card-info__info p {
    color: var(--gray);
    max-width: 97px;
}

.card-info__info-price p {
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--gray);
}

.card-info__info-price span {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    padding: 5px 15px;
    color: var(--white);
    background-color: var(--accent);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    white-space: nowrap;
}

.card-info__parameter {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 10px 20px;
    margin-top: 1px;
}

.card-info__parameter p {
    color: var(--gray);
}

.color {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.card-info__parameter-group {
    display: flex;
    justify-content: space-between;
}

.card-info__parameter-group-span {
    display: flex;
    gap: 5px;
}

.card-info__parameter-group-span span { 
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-color: #D9D9D9;
    transition: var(--base-transition);
}

.card-info__parameter-group-span-black {
    background-color: #000!important;
}
.selected {
    border: 2px solid var(--accent)
}

footer p {
    margin-bottom: 0px;
}

.new-catalog_ys .card {
    height: max-content;
    flex: 1;
}

.card-info__info-price-large {  
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: var(--gray);
}

.big-card-info__info-price .card-info__info-price-large {  
    font-size: 20px;
    line-height: 20px;
}

@media screen and (max-width: 1200px) {
    .banner-slider__banner-group button {
        margin: 0px 0 0 0px;
        white-space: nowrap;
    }
    .banner-slider__banner-group-img {
        grid-template-columns: 277px;
        gap: 0px;
        margin-left: 23px;
    }
    .banner-slider__banner-group {
        height: 304px;
    }
    .banner-group-img-none {
        display: none;
    }
    .banner-slider__banner-group {
        padding: 10px 30px 76px 30px;
    }
    #chain-banner-slider {
        margin-top: 30px;
    }
    .banner-slider {
        padding: 0;
    }
    .slider-nav {
        display: none;
    }
    .banner-slider__banner-group-img-desktop {
        display: none;
    }
    .banner-slider__banner h2 {
        margin: 0 0 -9px 30px;
    }
    #chain-banner-slider .banner-slider__banner-group {
        padding: 30px 30px 94px 216px;
        position: relative;
        background: linear-gradient(0deg, rgba(141, 139, 217, 1) 44%, rgba(198, 197, 255, 1) 44%);
    }
    #chain-banner-slider .banner-slider__banner-group-img {
        display: grid;
        grid-template-columns: 129px;
    }
    #chain-banner-slider .banner-slider__banner-group h2 {
        position: absolute;
        top: 144px;
        left: 0px;
        color: var(--white);
        font-size: 20px;
        line-height: 16px;
    }
    #chain-banner-slider .banner-slider__banner-group span {
        font-size: 36px;
        line-height: 29px;
    }
    .bannerSwiper {
        margin-top: 20px;
        padding: 0px 0px 0px 30px!important;
    }

    .bannerSwiper .swiper-slide,
    #slider .swiper-slide {
        width: max-content;
        height: unset;
    }

    .card {
        width: 100%;
        max-width: 180px;
        height: 100%;
        min-height: unset;
    }

    .new-catalog_ys .card {
        height: 100%;
        max-width: unset;
    }

    #slider .container {
        padding: 0px 0px 0px 30px!important;
    }
    
    #chain-banner-slider .card-img__img {
        width: 176px;
        height: 180px;
    }
    #chain-banner-slider  .card-img__basket {
        position: absolute;
        right: 0;
        bottom: 52px;
    }
    #chain-banner-slider  .card-img__star {
        position: absolute;
        left: -2px;
        bottom: 0;
        margin: 0 0 11px 10px;
    }
    #chain-banner-slider .card-img__group {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    .card-img__group-sale {
        font-size: 12px;
        line-height: 15px;
    }
    .card-info__subtitle {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 5px;
    }
    .card-info h3 {
        margin-top: 15px;
        margin-bottom: 5px;
    }
    .card-info__info {
        flex-direction: column-reverse;
        gap: 5px;
    }
    
    .banner-wrapper .swiper-slide{
        height: unset;
    }
    .card-info__info-price span {
        padding: 5px 10px;
        white-space: nowrap;
    }
    .card-info__info-price {
        justify-content: space-between;
        gap: 0;
        width: 100%;
        margin-top: 5px;
    }
    .card-info__info-price-large {  
        font-size: 16px!important;
        line-height: 19px!important;
    }
    .big-card-info__info-price .card-info__info-price-large {  
        font-size: 20px;
        line-height: 20px;
    }
    .card-info__info-text {
        margin-top: 0px;
    }
    .card-info__info p {
        font-size: 10px;
        line-height: 12px;
        margin-bottom: 0;
    }

    .card-info p {
        margin-bottom: 0;
    }
    .card-info__parameter p {
        font-size: 10px;
        line-height: 12px;
    }
    .card-info__parameter-group {
        display: flex;
        justify-content: space-between;
    }
    .card-info__parameter {
        gap: 5px;
        padding: 0 10px 20px;
        margin-top: 5px;
    }
    .card-img.background {
        height: 200px;
    }
    .ys_currentcolor {
        width: 15px;
        height: 15px;
    }

    .card-img__star img {
        width: 13px;
        height: 15px;
    }
}
/* конец банер-слайдер */

/* начало стилей каталога */
#new-catalog_first {
    margin-top: 40px;
}

#new-catalog {
    margin-top: 100px;
}
.ys_remove_mb p {
    margin-bottom: 0;
}

.new-catalog_ys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px 40px;
}

.new-catalog_ys p {
    margin-bottom: 0;
}



.big-card:nth-of-type(2n) {
    margin-top: -260px;
}

.new-catalog-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.new-catalog-group .card-img__group {
    position: absolute;
    top: 0;
    right: 0;
}

.new-catalog-group .card-img__img {
    padding: 0 42px;  
    height: 300px;
}

.new-catalog-group .card-img__img img {
    width: 215px;
    height: 100%;
    object-fit: contain;
}

.new-catalog-group .card-img__basket {
    position: absolute;
    bottom: 41px;
    right: 0;
}

.new-catalog-group .card-img__star {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.new-catalog-group .card-info__subtitle-split p {
    white-space: nowrap;
}

.new-catalog-group .card:hover {
    border: 1px solid #8D8BD9;
}

.big-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 10px;
    border: 1px solid var(--light-gray);
    transition: .5s;
    overflow: hidden;
}

.big-card:hover {
    border: 1px solid var(--accent);
}

.big-card:hover,
.big-card:active,
.big-card:focus {
    text-decoration: unset;
}
.card:hover,
.card:active,
.card:focus {
    text-decoration: unset;
    border: 1px solid var(--accent);
}

.big-card-img { 
    position: relative;
}

.big-card-img__group {
    position: absolute;
    top: 25px;
    right: 34px;
}

.big-card-img__group img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.big-card-img__img {
    width: 100%;
    height: 501px;
}

.big-card-img__img img {
   height: 100%;
   width: 100%;
    object-fit: contain;
}
.big-card-img__basket {
    position: absolute;
    right: 0;
    bottom: 30px;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.ys-catalog figure {
    margin-bottom: 0;
}
/* 
.ys-catalog .ys-card-add-btn img {
    display: block;
    background: transparent;
    filter: brightness(.5);
}
.ys-catalog .ys-card-add-btn .recolor {
    position: relative;
    display: inline-block;
    filter: brightness(1) contrast(300%) invert(1);
    background: #575d00;
}
.ys-catalog .ys-card-add-btn .recolor:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0000004d;
} */
.footer-info-newslettetr-group input::placeholder {
    color: #DCDDDC;
}
.big-card-img__basket img {
    height: 75px;
    aspect-ratio: 1;
    padding: 22px 14px 22px 26px;
}
.big-card-img__star {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 30px;
}

.big-card-img__star img {
    width: 40px;
    height: 43px;
}

.big-card-info {
    display: flex;
    flex-direction: column;
}

.big-card-info__subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0;
}

.big-card-info__subtitle-split {
    display: flex;
    align-items: center;
    gap: 4px;
}

.big-card-info__subtitle-split-black {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #000;
    color: var(--white);
    padding: 2px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    text-wrap: nowrap;
    word-break: keep-all;
}

.big-card-info__subtitle-split-black img {
    height: 14px;
}

.big-card-info__subtitle-split-black p {
    font-size: 12px;
    line-height: 12px;
}
.big-card-info__subtitle-split > p {
    text-wrap: nowrap;
    word-break: keep-all;
}

.big-card-info__subtitle-split-red {
    background: #FF4C52;
    color: var(--white);
    border-radius: 10px;
    padding: 2px 3px 3px 4px;
    font-size: 14px;
    line-height: 12px;
}

.big-card-info h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 30px;
    margin-top: 10px;
}

.big-card-info__info {
    display: flex;
    justify-content: space-between;
    padding: 27px 0 36px 30px;
}

.big-card-info__info-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: max-content;
}

.big-card-info__info-col-group { 
    display: flex;
    justify-content: space-between;
    min-width: 307px;
}

.big-card-info__info-price {
    display: flex;
    align-items: center;
    gap: 5px;
}

.big-card-info__info p {
    color: var(--gray);
}

.big-card-info__info-price span {
    padding: 15px;
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    color: var(--white);
    background-color: var(--accent);
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    white-space: nowrap;
}

.big-card-info__info-col-group-span {
    display: flex;
    gap: 5px;
}

.big-card-info__info-col-group-span span { 
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-color: #D9D9D9;
}

.big-card-info__info-col-group-span-black {
    background-color: #000!important;
}

.col-group-span {
    border-radius: 3px;
    width:  15px;
    height:  15px;
    border: 1px solid #00000020;
}

.big-card-info__info-col-group-span-blue {
    background-color: #1712C4!important;
}

.new-catalogSwiper {
    display: none!important;
}

@media screen and (max-width: 1320px) {
    .new-catalog-group {
        gap: 20px;
    }
    .new-catalog {
        gap: 100px 20px;
    }
}

@media screen and (max-width: 1200px) {
    .big-card-img__group {
        top: 13px;
        right: 13px;
    }
    .new-catalog-group .card-info__info-price  {
        justify-content: flex-end;
    } 
    .new-catalog-group .card-img__basket {
        height: 33px;
    }
    .new-catalog-group .card-img__group { 
        justify-content: flex-end;
    }
    .new-catalog-group {
        display: flex;
        gap: 5px;
    }
    .new-catalog {
        gap: 30px 20px;
    }
    .new-catalog-group .card-img__img img {
        width: 176px;
        height: 180px;
        object-fit: contain;
    }
    .new-catalog-group .card-img__img {
        padding: 0;
        display: flex;
        justify-content: center;
        height: 200px;
    }
    
    .big-card {
        max-height: max-content;
        gap: 20px;
    }
    .big-card-img__img {
        width: 100%;
        height: 246px;
    }
    .big-card-img__group img {
        width: 20px;
        height: 20px;
    }
    .big-card-img__star img {
        width: 20px;
        height: 20px;
    }
    .big-card .ys-card-add-btn img {
        height: 33px;
        padding: 9px 8px 9px 10px;
        width: 33px;
    }
    .big-card .ys-card-add-btn {
        transform: translateX(calc(100% - 33px));
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        padding-right: 10px;
    }
    .big-card .ys-card-add-btn:hover {
        transform: translateX(0);
    }

    .big-card:nth-of-type(2n) {
        margin-top: -85px;
    } 

    .big-card-img__star {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
    .big-card-info h2 {
        font-size: 20px;
        line-height: 24px;
        padding: 0 10px;
        margin-top: 10px;
    }

    .big-card-info__subtitle {
        padding: 0 10px;
    }

    .big-card-info__info {
        padding: 10px 0 20px 10px;
        flex-direction: column-reverse;
        gap: 10px;
    }
    .big-card-info__info-price {
        justify-content: flex-end;
    }
    .big-card-info__info-price span {
        padding: 5px 10px;
        font-size: 16px;
        line-height: 19px;
    }
    .big-card-info__info-col {
        padding-right: 10px;
    }

    #new-catalog_first {
        margin-top: 30px;
    }
    
    #new-catalog {
        margin-top: 30px;
    }
    .big-card-info__info-col-group { 
        min-width: unset;
        justify-content: flex-start;
        flex-direction: column;
    }
}

@media screen and (max-width: 775px) {
    .new-catalog_ys {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 5px;
    }
    .new-catalog_ys .big-card {
        margin-bottom: 20px;
    }
    .new-catalog_ys .card {
        height: unset;
    }
    /* .big-card:last-child {
        display: none;
    } */
    .big-card {
        margin: 0 25px;
    }
    .new-catalog-group:nth-child(5),
    .new-catalog-group:nth-child(6) {
        display: none;
    }
        
    .big-card:nth-of-type(2n) {
        margin-top: 0px;
    }

    .new-catalogSwiper {
        max-width: 980px;
        width: 100%;
        height: 100%;
        padding-left: 25px!important;
        display: block!important;
    }
    .new-catalogSwiper .card-img__img {
        width: 176px;
        height: 180px;
    }
    .new-catalogSwiper .card-img__img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
/* конец стилей каталога */

/* начало стилей инфо */
#info {
    margin: 100px 0;
}

.info,
.info span {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.info h2,
.info h3 {
    font-size: 36px !important;
    font-weight: 600 !important;
}

.category-to-sort:hover {
    text-decoration: unset;
}

.category-to-sort p {
    margin-bottom: 0;
}
/* 
.info > * > span:first-of-type {
    border: 1px solid var(--accent) ;
    border-radius: 10px;
    padding: 10px;
    display: block;
} */
@media screen and (max-width:1200px) {
    #info {
        margin: 50px 0;
    }
}
/* конец стилей инфо */

/* начало стилей для фильтров на странице */
#filter {
    margin-top: 5px;
}

.filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    padding: 4px 10px;
    border: 1px solid var(--light-gray);
    position: relative;
    transition: var(--base-transition);
    overflow: visible !important;
}



.filter-item._inner-filters {
    border-color: var(--accent);
}
.category-child-minor-link:hover {
    text-decoration: unset;
}
.filter-item._inner-filters p{
    color: var(--accent)
}

.filter-item-group {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    cursor: pointer;
}

.filter-item:hover { 
    background-color: var(--light-accent);
}

.filter-item p {
    color: var(--gray);
    white-space: nowrap;
    margin-bottom: 0;
}

.filter-item svg {
    transition: var(--base-transition);
} 

.filter-item.active svg {
    transform: rotate(180deg);
}

.filter-item.selected svg path {
    fill: var(--white);
}

.filter-item-child {
    display: flex;
    transition: var(--base-transition);
    flex-direction: column;
    gap: 5px;
    box-shadow: 0px 0px 6px 0px #00000040;
    background-color: var(--white);
    padding: 5px 14px 5px 5px;
    position: absolute;
    top: 35px;
    left: 10px;
    width: max-content;
    max-width: 250px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.filter-item .filter-item-child p.small {
    white-space: unset;
}

.filter-item.active .filter-item-child {
    opacity: 1;
    pointer-events: fill;
}

.filter-item-child-group {
    display: flex;
    gap: 10px;
}

.filter-item-child-group p {
    color: var(--text);
}

input[type="checkbox"] {
    accent-color: var(--accent);
    height: 15px;
}

.filter-item.selected {
    background-color: var(--accent);
}

.filter-item.selected p {
    color: var(--white);
}

.filter-item.selected .filter-item-child-group p {
    color: var(--text);
}
.filter-item-child-grid, .nav-item-child-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
}

.filter-item-child-grid._select-color, .nav-item-child-grid._select-color {
    display: flex;
    flex-wrap: wrap;
    min-height: 0;
    height: 100%;
}

.color-option, .nav-color-option{
    border: 2px solid var(--light-gray);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    transition: var(--base-transition);
}

.color-option img, .nav-color-option img{
    display: block;
    width: 100%;
    height: 100%;
}

.color-option.selected, .nav-color-option.selected{
    border-color: var(--accent); 
}

.color-option.active, .nav-color-option.active{
    border-color: #000; 
}

pre {
    display: none;
}

@media screen and (max-width: 1200px) {
    .filter-bg {
        height: 70px;
        padding-bottom: 10px;
    }
    #filter .container {
        max-width: unset;
    }
}
/* конец стилей для фильтров на странице*/
/* начало табов */
#tab {
    margin-top: 50px;
}
.tab {
    display: flex;
    gap:73px;
    /* justify-content: space-between; */
}

.arrow-child-item {
    color: var(--gray);
    white-space: nowrap;
    margin-bottom: 0;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    transition: var(--base-transition);
    border: 1px solid transparent;
    border-radius: 10px;
    width: max-content;
    color: var(--text);
}

.popup-tel {
    display: none;
}

.popup-tel.active {
    display: block;
}

.tab-item p {
    text-align: center;
}

.tab-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.tab-item:hover {
    /* background-color: var(--light-accent); */
    border: 1px solid var(--accent);
    color: var(--text);
}

._current_page .tab-item {
    background-color: var(--light-accent);
    border: 1px solid var(--accent);
}

.tabSwiper {
    display: none!important;
}

@media screen and (max-width:1320px) {
    #tab {
        margin-top: 20px;
    }

    .tab {
        display: none;
    }

    .tabSwiper {
        display: block!important;
    }
}
.filter-item-instock,
.filter-item-category.nav-group-svg {
    display: none;
}
@media screen and (max-width: 1320px) {
    .filter-item-instock,
    .filter-item-category.nav-group-svg {
        display: flex;
        align-items: center;
        gap: 5px;
        border-radius: 10px;
        padding: 4px 10px;
        border: 1px solid var(--light-gray);
        position: relative;
        transition: var(--base-transition);
        overflow: visible !important;
        order: 2;
        color: var(--gray);
        white-space: nowrap;
    }
    .filter-item-category.nav-group-svg {
        color: var(--gray) !important;
    }

    .ys-catalog .container.nav .category-text {
        text-wrap: nowrap;
        word-break: keep-all;
    }
    .filter-item-category .category-text {
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        text-align: left;
        margin-bottom: 0;
    }
    .filter-item {
        order: 3;
    }
    .filter-bg .filter-item.reset-filters {
        order: 1;
    }
}
@media screen and (max-width: 1200px) {
    .tab-item p {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        text-align: center;
    } 
    
}
/* конец табов */

/* начало стилей категорий */
.category-child {
    position: fixed;
    z-index: 100;
    top: 90px;
    left: 0;
    height: calc(100vh - 98px);
    width: 100%;
    opacity: 0;
    transform: translateX(-100%);
    transition: var(--base-transition);
    color: var(--text);
    pointer-events: none;
}

.category-child.active { 
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.category-child-bg {
    position: absolute;
    inset: 0;
}

.category-child-main {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    width: 295px;
    background-color: var(--white);
    height: calc(100vh - 98px);
    box-shadow: 0px 0px 6px 0px #00000040;
    padding: 30px 16px 0px 20px;
    border-radius: 0px 10px 10px 10px;
    transition: var(--base-transition);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-child-main-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.category-child-main-title p {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

.category-child-main-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}

.category-child-minor {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 285px;
    width: 300px;
    background-color: var(--light-accent);
    height: calc(100vh - 98px);
    box-shadow: 0px 0px 6px 0px #00000040;
    opacity: 0;
    transform: translateX(-100%);
    transition: var(--base-transition);
    color: var(--text);
    padding: 69px 30px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 0px 10px 10px 0px;
}

.category-child-minor.active {
    opacity: 1;
    transform: translateX(0);
}

.category-child-minor-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ys-catalog a.category-child-minor-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    cursor: pointer;
}

.nav-group.category p,
.nav-group.category svg path {
    transition: var(--base-transition);
}

.nav-group.category:hover p {
    color: var(--light-accent);
}

.nav-group.category:hover svg path {
    fill: var(--light-accent);
}

.nav-group.category.active p {
    color: var(--accent);
}

.nav-group.category.active svg path {
    fill: var(--accent);
}

.category-child-main-text-item {
    transition: var(--base-transition);
}

.category-child-main-text-item:hover {
    color: var(--light-accent);
}

.category-child-main-text-item.active {
    color: var(--accent);
}

.category-child-minor-close {
    display: none;
}

@media screen and (max-width: 1200px) {
    .category-child {
        top: 90px;
        height: 100%;
        width: 100%;
        transform: translateX(0);
        transform: translateY(-100%);
    }

    .category-child.active { 
        opacity: 1;
        transform: translateY(0);
    }
    .category-child-bg {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .category-child-main {
        width: 100%;
        height: max-content;
        padding: 30px;
        border-radius: 0px 0px 10px 10px;
        gap: 30px;
    }

    .category-child-main-title p {
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
    }

    .category-child-minor {
        left: 0;
        z-index: 200;
        width: 100%;
        height: max-content;
        transform: translateX(0);
        transform: translateY(-100%);
        padding: 30px;
        gap: 10px;
        border-radius: 0px 0 10px 10px;
    }
    
    .category-child-minor.active {
        opacity: 1;
        transform: translateY(0);
    }

    .category-child-minor-text {
        font-size: 20px;
        line-height: 24px;
    }

    .category-child-minor-close {
        display: flex;
        /* margin-right: 140px; */
        width: 8px;
        height: 8px;
    }

    .category-child-minor-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;
    }
}
/* конец стилей категорий */

/* начало стилей для попапа фильтров */
.nav-group-child {
    position: fixed;
    top: 92px;
    width: 295px;
    height: calc(100vh - 98px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--white);
    color: var(--text);
    padding: 30px 16px 0px 20px;
    box-shadow: 0px 0px 6px 0px #00000040;
    z-index: 100;
    opacity: 0;
    transition: var(--base-transition);
    pointer-events: none;
    transform: translateX(-100%);
    overflow-y: auto;
}

.nav-group-child-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    cursor: default;
}

.nav-group-child-bg:has(.nav-group-child.active) {
    pointer-events: all;
}

.nav-group-child.active {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

.nav-group-svg {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-group-svg,
.nav-group-svg path {
    transition: var(--base-transition);
}

.nav-group-svg:hover {
    color: var(--light-accent);
}

.nav-group-svg.active {
    color: var(--accent);
}

.nav-group-svg:hover path {
    fill: var(--light-accent);
}

.nav-group-svg.active path {
    fill: var(--accent);
}


.nav-group-child-group {
    display: flex;
    justify-content: space-between;
}

.nav-group-child-group-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
}

.nav-group-child-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-group-child-list-group {
    display: flex;
    flex-direction: column;
}

.nav-group-child-list-group-text {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.nav-group-child-list-chekbox {
    opacity: 0;
    transition: var(--base-transition);
    display: grid;
    grid-template-rows: 0fr;
    height: auto;
    pointer-events: none;
    padding: 0;
    overflow: hidden;
}

.nav-group-child-list-chekbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 16px;
}

.nav-group-child-list-chekbox-scroll {
    max-height: 163px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-align: start;
}

.nav-group-child-list-chekbox-bg {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.nav-group-child-list-chekbox-bg label {
    font-size: 12px;
    line-height: 14px;
}

.nav-group-child-list-chekbox.active.add .nav-group-child-list-chekbox-scroll {
    overflow-y: auto; 
}

.nav-group-child-list-chekbox.active {
    opacity: 1;
    height: auto;
    grid-template-rows: 1fr;
    margin-top: 10px;
    overflow: hidden;
    gap: 5px; 
    pointer-events: all;
}

.nav-group-child-list-chekbox-btn {
    all: unset;
    background-color: var(--white);
    border-radius: 10px;
    /* border: 1px solid var(--light-accent); */
    padding: 0 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    width: max-content;
    /* margin-top: 10px; */
    transition: var(--base-transition);
    margin-top: 0px;
    border: none;
    height: 0;
    color: #555;
}

.filter-item-btns {
    margin-top: 50px;
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding-bottom: 20px;
}

.filter-item-btn {
    all: unset;
    background-color: var(--white);
    border-radius: 10px;
    border: 1px solid #DCDDDC;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    width: max-content;
    transition: var(--base-transition);
    color: #121214;
}

.filter-item-btn:hover,
.nav-group-child-list-chekbox-btn:hover {
    color: #555;
    background-color: #C6C5FF;
}
.filter-item-btn:active,
.nav-group-child-list-chekbox-btn:active {
    background-color: #8D8BD9;
    color:#FFFFFF;
}

.filter-item-btn:before,
.filter-item-btn::after,
.nav-group-child-list-chekbox-btn::before,
.nav-group-child-list-chekbox-btn::after {
    display: none;
}

.nav-group-child-list-chekbox.active .nav-group-child-list-chekbox-btn { 
    height: max-content;
    margin-top: 10px;
    border: 1px solid var(--light-accent);
    padding: 5px 10px;
    border: 1px solid #DCDDDC;
}
.nav-group-child-list-chekbox.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.nav-group-child-list-chekbox.row span {
    width: 20px;
    height: 20px;
    background-color: var(--accent);
    border-radius: 3px;
}

@media screen and (max-width: 700px) {
    .nav-group-child {
        width: 100%;
    }
    .nav-group-svg span {
        display: none;
    }
}
/* конец стилей для попапа фильтров */

/* начало стилей свайпера карточек */
.slider-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.slider-grid p {
    margin-bottom: 0;
}

#table-banner-slider .banner-slider__banner-group h2 {
    position: absolute;
    top: 258px;
    left: 0px;
    color: var(--white);
    max-width: 225px;
}

#slider .card-img__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.banner-slider .card-img__star {
    position: absolute;
    bottom: 0;
    left: 0;
}

.banner-slider .card-img__group, 
.card-img__group._full {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

#slider .card-img__group {
    position: absolute;
    top: 0px;
    right: 0;
}

.gridSwiper {
    display: none!important;
}

#slider {
    margin-top: 100px;
}

#slider  .card-img__star {
    position: absolute;
    bottom: 0;
    left: 0;
}

#table-banner-slider {
    margin-top: 100px;
}

#table-banner-slider .banner-slider__banner h2 {
    margin: 0 0 -9px 337px;
    width: max-content;
}

#table-banner-slider .banner-slider__banner-group button {
    margin: 0px;
    left: 341px;
}

#chain-banner-slider .banner-slider__banner-group button {
    margin: 0px;
    left: 170px;
    top: 12px;
}

#table-banner-slider .banner-slider__banner-group-img {
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

#table-banner-slider .banner-slider__banner-group-title {
    margin-left: 170px!important;
    font-size: 36px;
    font-weight: 600;
    line-height: 28.8px;
    text-transform: unset;
}

#table-banner-slider .banner-slider__banner .banner-slider__banner-group-title {
    margin-bottom: 0;
}

#table-banner-slider .banner-group-img-none {
    position: absolute;
    top: 25px;
    right: 0;
    width: 324px;
    height: 309px;
}

@media screen and (max-width: 1200px) {
    .slider-grid {
        display: none;
    }

    #slider .card-img__img img {
        width: 176px;
        height: 180px;
        object-fit: contain;
    }

    .gridSwiper {
        display: block!important;
    }

    /* #slider .card-img__basket img {
        position: absolute;
        right: 0;
    }     */

    #slider {
        margin-top: 30px;
    }

    #slider .card-info__info-price {
        justify-content: flex-end;
    }

    #table-banner-slider .banner-slider__banner-group h2 {
        max-width: 300px;
        top: 161px;
    }

    #table-banner-slider {
        margin-top: 30px;
    }
    
    #table-banner-slider .banner-slider__banner h2 {
        margin: 0 0 -1px 30px;
    }
    
    #table-banner-slider .banner-slider__banner-group-img img:last-child {
        transform: rotate(5.61deg); 
        margin-left: 85px;
        margin-top: -20px;
    }
    
    #table-banner-slider .banner-slider__banner-group button {
        margin: 0px;
    }

    #table-banner-slider .banner-group-img-none {
        display: block;
        position: absolute;
        top: 78px;
        left: 10px;
        width: 78px!important;
        height: 74px!important;
    }
    
    #table-banner-slider .banner-slider__banner-group-img {
        grid-template-columns: 227px;
        gap: 0px;
    }
    
    #table-banner-slider .banner-slider__banner-group {
        padding-left: 0px;
        padding: 10px 0px 58px 30px;
    }
    
    #table-banner-slider .banner-slider__banner-group-title {
        margin-left: 30px!important;
    }
    
}
/* конец стилей свайпера карточек */


/* пагинация */

.pagination-arrow {
    cursor: pointer;
}


/* .pagination-arrow._hide-arrow {
    display: none;
} */

.pagination-wrapper {
    display: flex;
    gap: 17px;
    grid-column: span 2;
    justify-content: center;
}
._hide-arrow {
    visibility: hidden;
}

/* Стили активного элемента */
.pagination-nums-item.active {
    color: var(--accent);
    font-weight: 600;
}

.pagination-nums {
    display: flex;
    gap: 17px;
}

/* Стиль для троеточия */
.pagination-nums-item {
    margin: 0 5px;
    cursor: pointer;
}

/* конец пагинации */

.arrow-child {
    display: flex;
    transition: var(--base-transition);
    flex-direction: column;
    gap: 5px;
    box-shadow: 0px 0px 6px 0px #00000040;
    background-color: var(--white);
    padding: 5px 14px 5px 5px;
    position: absolute;
    top: 35px;
    right: 10px;
    /* width: 105%; */
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    max-height: 105px;
    /* overflow-y: auto; */
    z-index: 1000;
}
.arrow-child.active {
    opacity: 1;
    pointer-events: all;
}

.nav-group.arrow {
    position: relative;
}

.arrow-child-input {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #121214;
}

.arrow-child-input input {
    all: unset;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #121214;
    border-bottom: 1px solid #DCDDDC;
    max-width: 60px;
}

.banner-slider__banner h2.desktop {
    display: block;
}

.banner-slider__banner h2.mobile {
    display: none;
}

@media screen and (max-width: 1380px) {
    .card-img {
        width: 100%;
    }

    .slider-grid {
        gap: 25px;
    }

    #table-banner-slider .banner-slider__banner-group {
        padding-left: 380px;
    }

    #table-banner-slider .banner-group-img-none {
        /* right: 130px; */
    }


    .footer {
        padding: 30px 30px 60px;
    }
}

@media screen and (max-width: 1200px) {
    .catalog header .container {
        height: auto;
        transition: .5s;
    }

    #nav {
        margin-top: 30px;
    }

    #nav .container .nav-filters.desktop {
        display: none;
    }

    #table-banner-slider .banner-slider__banner-group button {
        top: 27px;
        left: 30px;
    }

    #table-banner-slider .banner-slider__banner .banner-slider__banner-group h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 16px;
        top: 182px;
    }

    .card-img {
        height: 200px;
    }

    .card-img__basket {
        top: 115px;
    }

    #table-banner-slider .banner-slider__banner-group {
        padding-left: 0px;
        padding: 10px 0px 58px 30px;
    }

    #table-banner-slider .banner-slider__banner-group-img img:last-of-type {
        width: 206px;
        height: 228px;
        transform: unset;
        margin-left: 85px;
        margin-top: 0px;
    }

    #chain-banner-slider .banner-slider__banner-group-img img {
        height: auto;
    }

    #chain-banner-slider .banner-slider__banner-group h2 {
        top: 154px;
    }

    #chain-banner-slider .banner-slider__banner-group button {
        display: none;
    }

    .subscription.footer-info-newslettetr button {
        margin-left: auto;
    }

    .banner-slider__banner h2.desktop {
        display: none;
    }

    .banner-slider__banner h2.mobile {
        display: block;
    }
    
    .banner-slider__banner h2 {
        font-family: Montserrat;
        font-size: 20px;
        font-weight: 600;
        line-height: 16px;
        text-transform: unset;
    }

    #banner-slider .banner-slider__banner-group button {
        top: 11px;
        left: 30px;
    }

    .banner-slider__banner h2 {
        margin: 0 0 -1px 30px;
    }

    .filter-item:hover {
        background-color: unset;
    }

    .filter-item.selected {
        background-color: var(--accent);
    }
}

/* новые банеры каталог */

.new-catalog__banner {
    border-radius: 20px;
    background: linear-gradient(48deg, rgba(130, 128, 200, 1) 25%, rgba(173, 130, 197, 1) 66%, rgba(159, 157, 223, 1) 86%);
}

.new-catalog__banner a {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    padding: 35px 45px 50px;
}

.new-catalog__banner-img-container {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: #FFFFFF40;
    position: relative;
}

.new-catalog__banner-img-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    user-select: none;
    pointer-events: none;
}

.new-catalog__banner-content {
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.new-catalog__banner-content h2 {
    font-family: Montserrat;
    font-size: 36px;
    font-weight: 700;
    line-height: 43.88px;
    color: #fff!important;
    text-transform: unset;
}

.new-catalog__banner-content span {
    /* font-family: Montserrat; */
    font-size: 36px;
    font-weight: 400;
    line-height: 43.88px;
    color: #fff!important;
    opacity: 0.5;
}

.new-catalog__banner-btn {
    width: 200px;
    height: 87px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    margin-top: 40px;
    overflow: hidden;
    border-radius: 100px;
    border: 1px solid #8D8BD9;
}

.new-catalog__banner-btn::after,
.new-catalog__banner-btn-bg-color {
    content: '';
    height: 100%;
    width: 100%;
    background: rgba(141, 139, 217, 1);
    position: absolute;
    top: 0px;
    left: -167px;
    transition: 0.5s ease;
    z-index: 1;
}

.new-catalog__banner-btn-bg-color {
    transition: 0.1s;
}

.new-catalog__banner-btn-bg {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    border-radius: 100px;
    transition: 0.5s ease;
    border: 1px solid #8D8BD9;
}

.new-catalog__banner-btn-arrow {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    min-height: 85px;
    min-width: 85px;
    width: 85px;
    height: 85px;
    z-index: 5;
    background: rgba(141, 139, 217, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.5s ease;
}

.new-catalog__banner-btn span {
    position: relative;
    z-index: 3;
    font-size: 20px;
    font-weight: 400;
    line-height: 24.38px;
    color: rgba(141, 139, 217, 1)!important;
}

.new-catalog__banner-btn.mobile {
    display: none;
}

.new-catalog__banner .new-catalog__banner-btn-arrow svg path  {
    transition: 0.8s ease;
}

@media (hover: hover) {
    .new-catalog__banner:hover .new-catalog__banner-btn::after {
        left: -42px;
    }

    .new-catalog__banner:hover .new-catalog__banner-btn-arrow {
        background: #fff;
        transform: rotate(-45deg);
        left: 115px;
    }

    .new-catalog__banner:hover .new-catalog__banner-btn-arrow svg path  {
        fill: rgba(141, 139, 217, 1);
    }

    .new-catalog__banner:active .new-catalog__banner-btn::after {
        left: -42px;
        transition: 0.4s ease;
    }
    
    .new-catalog__banner:active .new-catalog__banner-btn-arrow {
        background: #fff;
        transform: rotate(-45deg);
        left: 115px;
        transition: 0.4s ease;
    }
    
    .new-catalog__banner:active .new-catalog__banner-btn-arrow svg path  {
        fill: rgba(141, 139, 217, 1);
        transition: 0.4s ease;
    }
}


.new-catalog__banner_stoly {
    position: relative;
}

.new-catalog__banner-stoly .new-catalog__banner-img-container img {
    height: 110%;
}

@media screen and (max-width: 1300px) {
    .new-catalog__banner.desktop {
        display: none;
    }
    .container.banner-slider {
        padding: 0;
    }
    .new-catalog__banner {
        border-radius: 30px;
    }
    .new-catalog__banner-btn.mobile {
        display: flex;
        margin-top: 0;
    }
    .new-catalog__banner-btn.desktop {
        display: none;
    }
    .new-catalog__banner a {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center; 
        padding: 30px;
    }
    .new-catalog__banner a .new-catalog__banner-content {
        align-self: flex-start;
        padding: 0;
    }
    .new-catalog__banner-img-container {
        height: 315px;
        width: 315px;
    }
    .new-catalog__banner_divany .new-catalog__banner-img-container img{
        height: 180px;
    }
    .new-catalog__banner-content h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 29px;
    }
    .new-catalog__banner-content span {
        font-size: 24px;
        font-weight: 400;
        line-height: 29px;
    }
    .new-catalog__banner_kresla .new-catalog__banner-img-container img {
        height: 364px;
    }

    .new-catalog__banner-stoly .new-catalog__banner-img-container img {
        height: 100%;
    }

    .ys-catalog .bread-crumb h1 {
        font-family: Montserrat;
        font-weight: 600;
        font-size: 24px;
        line-height: 29.26px;
        letter-spacing: 0%;
    }

    .new-catalog__banner-btn.mobile .new-catalog__banner-btn-arrow.active {
        background: #fff;
        transform: rotate(-45deg);
    }

    .new-catalog__banner-btn.mobile .new-catalog__banner-btn-arrow.active svg path {
        fill: #8D8BD9;
    }

    .new-catalog__banner-btn-arrow {
        transition: left 0.1s, background 0.5s, transform 0.5s;
    }
}