body .pswp .pswp__container {
    transition: transform .5s ease-out;
    transition: transform 1s cubic-bezier(.3, 0, 0, 1);
}

.product-gallery[style*="--th-border-color"] .product-gallery__thumbnails .swiper-slide.swiper-slide-thumb-active {
    border: 2px solid var(--th-border-color); /* Или 2px, в зависимости от дизайна */
}

/* Основные стили галереи */
.product-gallery__featured {
    position: relative;
}

/* Общие стили для изображений */
.product-gallery__featured .image--type--product .image__body,
.image--type--category .image__body {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.image--type--product .image__tag,
.image--type--category .image__tag {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Основной слайдер */
.product-gallery__featured .swiper {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.product-gallery__featured .swiper-wrapper {
    width: 100%;
    height: 100%;
}

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

.product-gallery__featured .swiper-slide a {
    width: 100%;
    height: 100%;
    display: block;
}

.product-gallery__featured .swiper-slide .image__body {
    padding-bottom: 0 !important;
    height: 100%;
}

.product-gallery__featured .image__tag {
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Иконки галереи (SVG в CSS — не режутся TinyMCE в шаблонах) */
.product-gallery {
    --pg-icon-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
    --pg-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z'/%3E%3C/svg%3E");
    --pg-icon-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.7 1.8c1.9 1.4 3.2 3.5 3.6 5.8.5 2.5-.1 5.2-1.7 7.2-1.4 1.9-3.7 3.3-6 3.6-2.4.4-4.9-.2-6.8-1.6-2.4 2.4-4.8 4.8-7.2 7.2C1 23.5.5 23 0 22.5c2.4-2.4 4.7-4.7 7.1-7.1-2.4-2.8-2.9-7-1.2-10.3C7.2 2.5 9.8.6 12.6.1c2.4-.4 5 .2 7 1.7M9.3 2.7c-1.9 1.4-3.2 3.7-3.3 6.1-.2 2.2.6 4.4 2.1 6.1 1.5 1.6 3.7 2.6 5.9 2.6 2 0 4.1-.7 5.6-2.1 1.4-1.2 2.3-2.9 2.6-4.8.4-2.3-.2-4.7-1.7-6.5-1.2-1.5-3-2.6-4.9-2.9-2.2-.4-4.5.1-6.3 1.5Z'/%3E%3Cpath d='M14.7 8.7c1.3 0 2.5 0 3.8 0v1.1c-1.3 0-2.5 0-3.8 0 0 1.3 0 2.6 0 3.8-.4 0-.7 0-1.1 0 0-1.3 0-2.5 0-3.8-1.3 0-2.6 0-3.8 0v-1.1c1.3 0 2.6 0 3.8 0 0-1.3 0-2.6 0-3.8.4 0 .7 0 1.1 0 0 1.3 0 2.6 0 3.8Z'/%3E%3C/svg%3E");
}

/* Одно фото — без стрелок (класс ставит bruno-swipe-gallery.js) */
.product-gallery--single-slide .product-gallery__featured .swiper-button-next,
.product-gallery--single-slide .product-gallery__featured .swiper-button-prev {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Стили для стрелок в основной галерее */
.product-gallery__featured .swiper-button-next,
.product-gallery__featured .swiper-button-prev {
    --swiper-navigation-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border-radius: 50%;
    transition: opacity .3s, visibility .3s, background-color .3s, color .3s;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
    color: #000;
    overflow: hidden;
}

.product-gallery__featured .swiper-button-prev {
    left: 10px;
    right: auto;
}

.product-gallery__featured .swiper-button-next {
    left: auto;
    right: 10px;
}
.product-gallery:not(.product-gallery--single-slide) .product-gallery__featured .swiper:hover .swiper-button-next,
.product-gallery:not(.product-gallery--single-slide) .product-gallery__featured .swiper:hover .swiper-button-prev {
    opacity: 1;
    visibility: visible;
}

.product-gallery__featured .swiper-button-next.disabled,
.product-gallery__featured .swiper-button-prev.disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Swiper 12 подставляет .swiper-navigation-icon — скрываем, иконка только через ::before */
.product-gallery__featured .swiper-button-prev .swiper-navigation-icon,
.product-gallery__featured .swiper-button-next .swiper-navigation-icon,
.product-gallery__featured .swiper-button-next::after,
.product-gallery__featured .swiper-button-prev::after {
    display: none !important;
    content: none !important;
}

/* Цвет стрелок: меняйте color у .swiper-button-prev/next (иконка через mask + currentColor) */
.product-gallery__featured .swiper-button-prev::before,
.product-gallery__featured .swiper-button-next::before {
    content: "";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    transition: background-color .3s;
}

.product-gallery__featured .swiper-button-prev::before {
    -webkit-mask-image: var(--pg-icon-prev);
    mask-image: var(--pg-icon-prev);
}

.product-gallery__featured .swiper-button-next::before {
    -webkit-mask-image: var(--pg-icon-next);
    mask-image: var(--pg-icon-next);
}

.product-gallery__featured .swiper-button-next:hover,
.product-gallery__featured .swiper-button-prev:hover {
    background-color: #000;
    color: #fff;
}


/* Стили для миниатюр */
.product-gallery__thumbnails {
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.product-gallery__thumbnails .swiper {
    max-width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

.product-gallery__thumbnails .swiper-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
}

.product-gallery__thumbnails .swiper-slide {
    cursor: pointer;
    flex: 0 0 auto;
    margin: 0 5px;
    padding: 2px;
    position: relative;
    opacity: 1;
    border: 2px solid #f2f2f2;
    transition: border-color 0.3s ease;
    aspect-ratio: 1;
    height: auto;
    width: 58px !important;
}

/* Сброс границ для внутренних элементов */
.product-gallery__thumbnails .swiper-slide *,
.product-gallery__thumbnails .swiper-slide .image--type--product,
.product-gallery__thumbnails .swiper-slide .product-gallery__thumbnails-item,
.product-gallery__thumbnails .swiper-slide .image__body {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Стили состояний миниатюр */
.product-gallery__thumbnails .swiper-slide:hover {
    border-color: #e0e0e0;
}

.product-gallery__thumbnails .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

/* Размеры внутренних элементов миниатюр */
.product-gallery__thumbnails .product-gallery__thumbnails-item,
.product-gallery__thumbnails .image--type--product,
.product-gallery__thumbnails .image__body {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

.product-gallery__thumbnails .image__tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Стили для навигации миниатюр */
.product-gallery__thumbnails .swiper-button-next,
.product-gallery__thumbnails .swiper-button-prev {
    width: 20px;
    height: 20px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.product-gallery__thumbnails .swiper-button-next:after,
.product-gallery__thumbnails .swiper-button-prev:after {
    font-size: 12px;
    font-weight: bold;
}

.product-gallery__thumbnails .swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

/* Стили для кнопки зума */
.product-gallery__zoom {
    display: var(--product-gallery-zoom-display, flex);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    top: 10px;
    right: 10px;
    position: absolute;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    z-index: 10;
    line-height: 0;
    cursor: pointer;
    -webkit-transition: background .15s, color .15s;
    transition: background .15s, color .15s;
    background-color: #fff;
    color: #ccc;
}

.product-gallery__zoom::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 23.5px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--pg-icon-zoom) center / contain no-repeat;
    mask: var(--pg-icon-zoom) center / contain no-repeat;
}

.product-gallery__zoom:hover {
    background-color: #f2f2f2;
    color: #999;
}

.product-gallery__zoom:active {
    background-color: #ebebeb;
    color: gray;
}

.product-gallery__zoom:focus {
    outline: none;
}

@media (min-width: 768px) {
    .product-gallery__thumbnails {
        margin-top: 20px;
    }
}