/*
#mainCarousel .carousel__viewport {
    width: 330px;
    margin: 0 auto 1rem auto;
}

#mainCarousel .carousel__slide {
    width: 330px;
    padding: 0;
}
#thumbCarousel .carousel__button, #car-example-carousel .carousel__button {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
}
#thumbCarousel .carousel__button svg {
    width: 15px;
    height: 15px;
    color: #4e4e4e;
}
#thumbCarousel .carousel__button.is-prev {
    left: -3.5rem;
}
#thumbCarousel .carousel__button.is-next {
    right: -3.5rem;
}
#mainCarousel .carousel__nav{
    display: none;
}
#mainCarousel .carousel__nav button{

}
#mainCarousel .carousel__button.is-prev {
    left: -1.5rem;
}
#mainCarousel .carousel__button.is-next {
    right: -1.5rem;
}
#thumbCarousel {
    width: 60%;
    margin: 25px auto 0;
}
#thumbCarousel .carousel__slide {
    opacity: 0.7;
    margin: 0.5rem;
    width: auto;
    height: auto;
    padding: 4px;
}
#thumbCarousel .carousel__slide img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 2px;
}
#thumbCarousel .carousel__slide.is-nav-selected {
    opacity: 1;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.fancybox__container {
    color: #8e8e8e;
    --carousel-button-svg-filter: none;
}
.fancybox__toolbar {
    text-shadow: none;
}
.fancybox__backdrop {
    background: #fff;
}
.fancybox__caption {
    display: none;
    color: #4e4e4e;
}
.fancybox__toolbar {
    background: #fff;
}
.fancybox__thumbs {
    margin-bottom: 10px;
}
.fancybox__thumbs .carousel__slide {
    height: 50px;
    width: 50px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.fancybox__thumbs .carousel__slide.is-nav-selected {
    border: 1px solid #ff4a39;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb {
    height: 40%;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    display: none;
}
.ImageGalleryFullscreenVertical__sidebar {
    width: 250px;
    height: auto;
    position: absolute;
    right: 130px;
    top: 64px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    z-index: 999;
    padding: 10px;
}

!*=====================RESPONSIVE========================*!
@media (min-width: 1540px) {
    #thumbCarousel {
        width: 65%;
    }
    #mainCarousel .carousel__viewport, #mainCarousel .carousel__slide {
        width: 370px;
    }
}
@media only screen and (max-width: 991px) {
    #thumbCarousel {
        display: none;
    }
    #mainCarousel .carousel__nav{
        display: block;
    }
    .fancybox__thumbs {
        margin-bottom: 60px;
    }
}*/

















/*#mainCarousel .f-carousel__viewport {
    width: 370px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.fancybox__backdrop {
    background: #fff;
}
#mainCarousel .f-carousel__nav{
    display: none;
}
#thumbCarousel {
    height: 400px;
    !*width: 56px;*!
    !*margin: 25px auto 0;*!
}
#thumbCarousel .f-carousel__slide {
    height: calc(100% / 5);
    cursor: pointer;
}
!*#thumbCarousel .f-carousel__track {
     height: 300px;
}*!
#thumbCarousel .f-carousel__slide img {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 2px;
}
!*#thumbCarousel .f-carousel__slide img:hover {
    border-color: rgba(255, 74, 57, 0.26);
}*!
#thumbCarousel .f-carousel__slide.is-nav-selected img {
    border-color: #ff4a39;
}
!*------------start nav-------------------*!
.f-carousel-with-nav .f-carousel__nav .f-button {
    width: 30px;
    height: 30px;
    background: #0c78ed;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    z-index: 2;
    transition: opacity .3s ease, transform .3s, background .2s;
    opacity: 0;
}
.f-carousel-with-nav .f-carousel__nav .f-button svg {
    width: 15px;
    height: 15px;
}
.f-carousel-with-nav .f-carousel__nav .f-button:hover {
    background: #db3727;
    color: #fff;
    transition: color .2s, background .2s;
}
.f-carousel-with-nav .f-carousel:hover .f-carousel__nav .f-button {
    opacity: 1;
}
.f-carousel-with-nav .f-carousel.is-vertical .f-carousel__nav .is-next {
    bottom: 0.5rem;
    top: auto;
    transform: translateX(-50%) translateY(30%);
}
.f-carousel-with-nav .f-carousel.is-vertical .f-carousel__nav .is-prev {
    top: -0.5rem;
    bottom: auto;
    transform: translateX(-50%) translateY(-30%);
}
.f-carousel-with-nav .f-carousel.is-vertical:hover .f-carousel__nav button {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
!*------------end nav-------------------*!
!*------------start thumb inside-------------------*!
!*.fancybox__thumbs .carousel__slide.is-nav-selected {
    border: 1px solid #ff4a39;
}
.f-thumbs__slide .f-thumbs__slide__button {
    height: 50px;
    width: 50px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #eee;
    border-radius: 8px;
}*!
!*------------end thumb inside-------------------*!
!*------------------responsive--------------------*!
@media (max-width: 1540px) {
    #mainCarousel .f-carousel__viewport, #mainCarousel .f-carousel__slide {
        width: 330px;
    }
}
@media only screen and (max-width: 991px) {
    !*.product-images-slider {
        grid-template-columns: 100%;
    }
    #thumbCarousel {
        display: none;
    }
    #mainCarousel .f-carousel__nav {
        display: block;
    }*!
}*/

#mainCarousel {
    order: 999;
}
#mainCarousel .f-carousel__viewport {
    width: 370px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
/*.product-images-slider {
    height: 404px;
}*/
/*.product-images-slider .f-thumbs__slide__img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 2px;
}
.product-images-slider .f-thumbs__slide__button {
    width: 50px;
    height: 50px;
}*/
/*.product-images-slider*/ .f-thumbs.is-classic.is-vertical {
    height: 350px;
}
/*.f-carousel__thumbs*/.f-thumbs.is-classic {
    --f-thumb-width: 60px;
    --f-thumb-height: 60px;
    --f-thumb-gap: 1rem;
    --f-thumb-opacity: 0.7;
    --f-thumb-selected-opacity: 1;
    /*--f-thumb-selected-opacity: 0.2;

    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;

    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;*/
}
.product-images-slider .f-carousel__thumbs.f-thumbs.is-classic.is-horizontal {
    margin-top: 10px;
    --f-thumb-gap: 0.5rem;
}
.is-classic .is-nav-selected .f-thumbs__slide__button::after {
    border: none;
}


/*.product-images-slider*/ .f-thumbs__slide__img {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 4px;
}
/*.product-images-slider*/ .f-thumbs__slide__img:hover {
     border-color: rgba(255, 74, 57, 0.26);
 }
/*.product-images-slider*/ .f-thumbs__slide.is-nav-selected .f-thumbs__slide__img {
      border-color: #ddd;
}
/*-------------------fancybox start-----------------------*/
.fancybox__container {
    --fancybox-bg: #fff;
}
.fancybox__toolbar,
.fancybox__nav {
    --f-button-border-radius: 50%;
    --f-button-svg-stroke-width: 2.5px;
    --f-button-bg: transparent;
    --f-button-hover-bg: rgba(24, 24, 27, 0.3);
    --f-button-svg-filter: none;
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --fancybox-toolbar-text-shadow: none;
    /*--f-button-color: #8e8e8e;*/
    --fancybox-color: #8e8e8e;
}
.fancybox__toolbar,
.fancybox__nav .f-button {
    margin: 10px;
}
.fancybox__yandex {
    max-height: 90px;
}
/*-------------------fancybox end-----------------------*/

/*-------------------start nav-----------------------*/
.f-carousel__thumbs .f-button, :not(#mainCarousel).f-carousel > .f-carousel__nav .f-button {
    width: 30px;
    height: 30px;
    background: #0c78ed;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    z-index: 2 !important;
    transition: opacity .3s ease, transform .3s, background .2s;
    opacity: 0;
}
.f-carousel__thumbs .f-button svg, :not(#mainCarousel).f-carousel > .f-carousel__nav .f-button svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.5px;
}
.f-carousel__thumbs .f-button:hover, :not(#mainCarousel).f-carousel > .f-carousel__nav .f-button:hover {
    background: #db3727;
    color: #fff;
    transition: color .2s, background .2s;
}
.f-carousel__thumbs:hover .f-carousel__nav .f-button, :not(#mainCarousel) > .f-carousel:hover .f-carousel__nav .f-button {
    opacity: 1;
}
/*vertical animation*/
.f-carousel__thumbs.is-vertical .f-carousel__nav .is-next {
    bottom: 1.5rem;
    top: auto;
    transform: translateX(-39%) translateY(30%);
}
.f-carousel__thumbs.is-vertical .f-carousel__nav .is-prev {
    top: 0.5rem;
    bottom: auto;
    transform: translateX(-39%) translateY(-30%);
}
.f-carousel__thumbs.is-vertical:hover .f-carousel__nav button {
    transform: translateX(-39%) translateY(0);
    opacity: 1 !important;
}
/*horizontal animation*/
:not(#mainCarousel).f-carousel.is-horizontal .f-carousel__nav .is-next, :not(#mainCarousel).f-carousel__thumbs.is-horizontal .f-carousel__nav .is-next {
    right: 1.5rem;
    left: auto;
    transform: translateX(10px) translateY(-50%);
}
:not(#mainCarousel).f-carousel.is-horizontal .f-carousel__nav .is-prev, :not(#mainCarousel).f-carousel__thumbs.is-horizontal .f-carousel__nav .is-prev {
    left: 1.5rem;
    right: auto;
    transform: translateX(-10px) translateY(-50%);
}
:not(#mainCarousel).f-carousel.is-horizontal:hover .f-carousel__nav button, :not(#mainCarousel).f-carousel__thumbs.is-horizontal:hover .f-carousel__nav button {
    transform: translateX(0) translateY(-50%);
}
/*.product-images-slider .f-carousel__thumbs.f-thumbs.is-horizontal.width-horizontal {
    !*margin: auto;*!
    width: 350px;
}*/
/*-------------------end nav-----------------------*/

/*----------------responsive---------------------*/
@media (max-width: 1540px) {
    /*.product-images-slider .f-thumbs.is-classic.is-vertical {
        height: 300px;
    }*/
    .product-images-slider {
        grid-template-columns: 100% !important;
    }
    #mainCarousel {
        order: unset;
    }
    #mainCarousel .f-carousel__viewport {
        width: 330px;
    }
    .product-images-slider .f-carousel__thumbs.f-thumbs.is-horizontal {
       /* margin: auto;*/
    }
}
@media (max-width: 1199px) {
    /*.product-images-slider .f-carousel__thumbs.f-thumbs.is-classic {
        margin: unset;
        width: unset;
    }*/
    /*.product-images-slider .f-thumbs.is-classic.is-vertical {
        height: 300px;
    }*/

    #mainCarousel {
        order: 999;
    }
}
@media only screen and (max-width: 991px) {
    .fancybox__footer {
        margin-bottom: 60px;
    }
}