.catalog-item {
    display: flex;
    flex-direction: column;
}
.catalog-item-image {
    position: relative;
    overflow: hidden;
    user-select: none;
    /* z-index: 14; */
    margin: 0;
    height: 265px;
    width: calc(100% + 40px);
    right: 20px;
}
.catalog-item-image img, .catalog-item-image .image-placeholder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.catalog-item-image img.group_single_image {
    opacity: 1;
}
.catalog-item-image img.active, .catalog-item-image .image-placeholder.active img, .catalog-item-image .image-placeholder.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    cursor: pointer;
}

.catalog-item-image .image-placeholder.active {
    display: block !important;
}
.catalog-item-image .image-placeholder img.lazy {
    height: 100% !important;
    padding: 23px 0 23px 0;
}
.dots {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    /* margin-bottom: 16px; */
    gap: 16px;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0049D9;
    cursor: pointer;
    opacity: 0.5;
    transition: background 0.3s ease;
}
.dot.active {
    opacity: 1;
}

.gl-block{
    display: flex;
    gap: 24px;
    padding-bottom: 60px;
}

.gl-block__main{
    max-width: 570px;
    min-width: 0;
}

.gl-block .splide__slide{
    background: none !important;
    height: auto !important;
}

.gl-block .splide__slide img{
    display: block !important;
}

.gl-block__main:not(.show-nav) .splide__arrow {
  display: none;
}


.splide__arrow svg{
    display: none;
}

.splide__arrow{
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    background: 0 !important; 
}

.splide__arrow::before{
    content: '';
    width: 41px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='40' viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_170_1359)'%3E%3Cpath opacity='0.1' d='M20.7516 1.5C30.9689 1.50001 39.2516 9.78274 39.2516 20C39.2516 30.2173 30.9689 38.5 20.7516 38.5C10.5343 38.5 2.25159 30.2173 2.25159 20C2.25159 9.78273 10.5343 1.5 20.7516 1.5Z' fill='white' stroke='%23164CB5' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M16.6721 19.9404L26.7352 19.9404' stroke='%230049BC' stroke-width='1.75' stroke-miterlimit='10'/%3E%3Cpath d='M19.7803 23.8203L15.8002 19.9403L15.8104 19.9303L19.6572 16.1803' stroke='%230049BC' stroke-width='1.75' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_170_1359'%3E%3Crect width='40' height='40' fill='white' transform='matrix(1 1.74846e-07 1.74846e-07 -1 0.751587 40)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.splide__arrow.splide__arrow--next::before{
    transform: rotate(180deg);
}

.splide__slide {
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: 0;
}


#main-slider {
    cursor: pointer;
    min-width: 0;
}

#main-slider .splide__slide{
    width: 100%;
    height: 552px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-slider .splide__slide img{
    max-width: 100%;
    max-height: 100%;
}

#main-slider .splide__arrows{
    opacity: 0;
    transition: 0.15s;
}

#main-slider:hover .splide__arrows{
    opacity: 1;
    transition: 0.15s;
}

.gl-block__main{
    display: grid;
    gap: 16px;
}

.gl-block__main.show-nav #thumbnail-slider.is-initialized{
    padding: 0 60px;
}

#thumbnail-slider{
    
    min-height: 75px;
    min-width: 0;
}



#thumbnail-slider:not(.is-initialized){
    gap: 24px;
}

#thumbnail-slider .splide__arrow--prev{
    left: 10px !important;
}

#thumbnail-slider .splide__arrow--next{
    right: 10px !important;
}

#thumbnail-slider .splide__list{
    gap: 24px;
    display: flex;
}

#thumbnail-slider .splide__slide{
    padding-bottom: 7px;
	transition: 0.5s;
}

.splide__track--nav>.splide__list>.splide__slide{
    border: 0 !important;
    opacity: 50%;
    transition: 0.5s;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90px;
}

.splide__track--nav>.splide__list>.splide__slide img{
    max-height: 70px;
}

#thumbnail-slider .splide__slide::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    background: linear-gradient(90deg, #23CBFE 0%, #004AD9 100%);

    width: 100%;
    height: 3px;
    opacity: 0;
    transition: 0.5s;
}

#thumbnail-slider .splide__slide.thumb-active{
    opacity: 1;

} 

#thumbnail-slider .splide__slide.thumb-active:after{
    opacity: 1;
}
/* 
#thumbnail-slider:not(.is-initialized).splide__track--nav>.splide__list>.splide__slide.is-active:first-child:after{
    opacity: 1;
    visibility: visible;
    transition: 0.5s;
}

#thumbnail-slider:not(.is-initialized).splide__track--nav>.splide__list>.splide__slide.is-active:after{
   display: none;
} */

.colors-block{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

.colors-block__item{
    width: 24px;
    height: 24px;
    position: relative;
    transition: 0.5s;
    border-radius: 50%;
    cursor: pointer;
}

.colors-block__item::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: 0.5s;
    /*border: 1px solid #E4E7EB; */
}

.colors-block__item.active::before{
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    right: -4px;
    bottom: -4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: 0.5s;
    border: 2px solid #1248B2;
}

.colors-block__item.active::after{
    display: none;
}

.catalog-item .colors-block{
    margin-bottom: 16px;
    position: relative;
}

.catalog-item .colors-block__item{
    width: 16px;
    height: 16px;
}

.catalog-item .colors-block__item.active::before{
    width: 24px;
    height: 24px;
}

.catalog-item-cover{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 13;
}

.catalog-item__btn{
    display: inline-flex;
    /* align-items: center; */
    /* justify-content: center; */
    padding: 12px 28px;
    background: #F2F6FE;
    border-radius: 25px;
    font-family: var(--font-family-b);
    font-size: 16px;
    line-height: 14px;
    text-transform: uppercase;
    color: #2347AC;
    position: relative;
    /* right: 12px; */
    bottom: -6px;
    transition: 0.5s;
    cursor: pointer;
    align-self: flex-end;
    /* justify-content: flex-end; */ /* vertical position */
    align-items: flex-end;
}

.catalog-item__btn:hover{
    color: rgba(35, 72, 172, 0.5);
    transition: 0.5s;
}

.catalog-item__badges{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 14;
    pointer-events: none;
}

.catalog-item__badge{
    padding: 5px 12px;    
    color: #fff;
    font-family: var(--font-family-b);
    font-size: 12px;
    line-height: 14px;
}

.catalog-item__badge.discount{
    background: linear-gradient(115.55deg, #164CB5 16.1%, #22C1FC 100.78%);
}

.catalog-item__badge.eco{
    background: linear-gradient(143.84deg, #075905 7.28%, #00FF66 86.24%);

}

.catalog-item h3, .catalog-item .h3 {
    margin: 16px 0;
}

.hide-text {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
}

.gl-block .price-block {
    display: flex;
    margin-bottom: 8px;
    font: 32px/40px var(--font-family-sm), sans-serif;
    color: #0049D9;
    gap: 24px;
}
.gl-block .price-block span {
    font-weight: var(--font-family-sm);
}

.gl-block .price-block div:first-child {
    margin-left:0;
    align-self: baseline;
}
.gl-block .price-block div.discount {
    position: relative;
    color: #2B1B35;
    font: 24px / 20px var(--font-family-rg), sans-serif;
    display: flex;
    gap: 8px;
    align-self: baseline;
    bottom: 3px;
}
.gl-block .price-block div.discount span {
    font-weight: 400;
}
.gl-block .price-block div.discount  span.currency_rouble {
    font-size: 22px;
}
.gl-block .price-block div.discount:after {
position: absolute;
    top: 50%;
    left: 0px;
    width: calc(100% + 6px);
    height: 2px;
    background: #0049D9;
    content: '';
}
.gl-block .price-block .rouble {
    font-size:26px;
}

.gl-block__title{
    font-family: var(--font-family-sm);
    font-size: 38px;
    line-height: 100%;
}

.gl-block__caption{
    font-size: 20px;
    line-height: 140%;
    margin-top: 8px;
}

.gl-block__aside{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    text-align: left;
    max-width: 515px;
    flex-shrink: 0;
    padding-top: 73px;
}

.gl-block__preview{
    display: flex;
    align-items: center;
    
    text-align: left;
    gap: 8px;
    padding: 8px 12px 8px 0;

    background: 0;
    border: 0;
    max-width: 134px;

    font-size: 12px;
    line-height: 120%;
    color: #164CB5;
}

 .catalog-item-price{
     padding: 0;
     margin: 0;
     position: unset !important;
     width: unset !important;
     flex-direction: column;
     align-self: flex-end;
}
.catalog-item-price-saving {
    margin-bottom: 8px;
    width: auto;
}
.catalog-item-price-new, .catalog-item-price-old {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    height: 32px;
    align-self: baseline;
    min-width: 87%;
    flex-grow: 1;
}

.btn-price-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1;
}

@media (min-width: 767px) {
    .gl-block .splide__pagination{
        display: none;
    }
}


@media (max-width: 1199px) {
    .gl-block__aside{
        max-width: 50%;
    }

    #main-slider .splide__slide{
        height: auto !important;
    }

}

@media (max-width: 1480px) {
    .catalog-item-price-new, .catalog-item-price-old {
        font-size: 22px;
        height: 30px;
    }
    .catalog-item {
        padding-left: 8px;
        padding-right: 8px;
    }
    .catalog-item-image {
        width: calc(100% + 24px);
        right: 12px;
    }
}

@media (max-width: 1360px) {
    .catalog-item-price-new, .catalog-item-price-old {
        font-size: 20px;
        height: 28px;
    }

}
@media (min-width: 1024px) {
    .catalog-item__btn {
        padding: 12px 16px;
    }
}
@media (min-width: 1180px) {
    .catalog-item__btn {
        padding: 12px 24px;
    }
}
@media (min-width: 1280px) {
    .catalog-item__btn {
         padding: 12px 32px;
    }
}
@media (max-width: 1023px){
    .catalog-item-image {
        width: auto;
        right: unset;
    }
}
@media (max-width: 992px){
    .gl-block{
        flex-direction: column;
    }
    .gl-block__main{
        max-width: 70%;
        margin: 0 auto;
    }
    .gl-block__aside{
        margin-top: 24px;
        padding-top: 0;
        max-width: 100%;
    }
}

@media (max-width: 766px) {
    #thumbnail-slider{
        display: none;
    }
    .gl-block__main{
        max-width: 100%;
    }

    .gl-block .splide__arrow{
        display: none;
    }

    .gl-block .splide__pagination{
        position: static;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 0;
    }

    .gl-block .splide__pagination__page{
        width: 8px;
        height: 8px;
        background: #0049D9;
        opacity: 0.5;
        margin: 0;
    }

    .gl-block .splide__pagination__page.is-active{
        transform: none !important;
        opacity: 1;
        background: #0049D9;
    }

    .gl-block__title{
        font-size: 32px;
        text-align: left;
        line-height: 36px;
    }
    .gl-block__caption{
        font-size: 18px;
        line-height: 150%;
        margin-top: 0;
    }

    .gl-block__preview{
        display: none;
    }

    .gl-block .buy_blue{
        width: 100%;
        max-width: 480px;
    }

    .content-wrapper{
        padding: 0 32px;
    }
}

@media (max-width: 600px) {
    .catalog-item-price {
        bottom: 22px;
    }
    .catalog-item-price-ghost-small {
        height: 25px;
    }
}

@media (max-width: 559px) {
    .catalog-item-image {
        height: 167px;
    }
    .dots {
        margin-top: 24px;
    }
    .catalog-item h3, .catalog-item .h3 {
        margin: 16px 0 20px 0;
    }
    .catalog-item-price-new, .catalog-item-price-old {
        font-size: 24px;
        line-height: 32px;
    }
    .catalog-item__btn{
        bottom: -8px;
        right: 0;
    }
     .catalog__p.no-price {
        margin-bottom: 32px;
     }
    .catalog-item__badges{
        left: 0;
    }
}