/* Фон PhotoSwipe: по умолчанию чёрный, JS подставляет градиент через --pswp-bg */
.pswp {
    --pswp-bg: #000;
}

.pswp__bg {
    opacity: 1 !important;
    /* Не переопределяем background — он берётся из var(--pswp-bg), который задаёт JS */
    transition: background 0.3s ease;
}

.pswp.pswp--open .pswp__bg {
    opacity: 1 !important;
}

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--single-slide .product-gallery__thumbnails {
    display: none !important;
}

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

/* Основные стили галереи */
.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;
}

/* Стили для стрелок в основной галерее */
.product-gallery__featured .swiper-button-next,
.product-gallery__featured .swiper-button-prev {
    width: 42px;
    height: 42px;
    background-color: #fff;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
}
.product-gallery__featured .swiper:hover .swiper-button-next,
.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;
}

.product-gallery__featured .swiper-button-next::after,
.product-gallery__featured .swiper-button-prev::after {
    content: '' !important;
}

.product-gallery__featured .swiper-button-next,
.product-gallery__featured .swiper-button-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.product-gallery__featured .swiper-button-next svg,
.product-gallery__featured .swiper-button-prev svg {
    display: none;
}

.product-gallery__featured .swiper-button-prev::before,
.product-gallery__featured .swiper-button-next::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    transition: background-color .3s;
    -webkit-mask: var(--gallery-nav-mask) center / contain no-repeat;
    mask: var(--gallery-nav-mask) center / contain no-repeat;
}

.product-gallery__featured .swiper-button-prev {
    --gallery-nav-mask: 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");
}

.product-gallery__featured .swiper-button-next {
    --gallery-nav-mask: 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");
}

.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: 64px !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, block);
    top: 22px;
    position: absolute;
    padding: 9px;
    margin: 0;
    border: none;
    border-radius: 21px;
    fill: currentColor;
    z-index: 2;
    -webkit-transition: background .15s,
        color .15s;
    transition: background .15s,
        color .15s;
    background-color: #fff;
    color: #ccc;
    right: 5px
}

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

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

.product-gallery__zoom:focus {
    outline: none
}

.product-gallery__zoom svg {
    display: block
}

/* Иконка zoom через CSS (оригинальная форма из шаблона) */
.product-gallery__zoom.gallery-zoom-icon-css::before {
    content: "";
    display: block;
    width: 23.5px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.5 24'%3E%3Cg%3E%3Cpath d='M19.7,1.8c1.9,1.4,3.2,3.5,3.6,5.8c0.5,2.5-0.1,5.2-1.7,7.2c-1.4,1.9-3.7,3.3-6,3.6c-2.4,0.4-4.9-0.2-6.8-1.6c-2.4,2.4-4.8,4.8-7.2,7.2C1,23.5,0.5,23,0,22.5c2.4-2.4,4.7-4.7,7.1-7.1c-2.4-2.8-2.9-7-1.2-10.3C7.2,2.5,9.8,0.6,12.6,0.1c2.4-0.4,5,0.2,7,1.7M9.3,2.7c-1.9,1.4-3.2,3.7-3.3,6.1c-0.2,2.2,0.6,4.4,2.1,6.1c1.5,1.6,3.7,2.6,5.9,2.6c2,0,4.1-0.7,5.6-2.1c1.4-1.2,2.3-2.9,2.6-4.8c0.4-2.3-0.2-4.7-1.7-6.5c-1.2-1.5-3-2.6-4.9-2.9c-2.2-0.4-4.5,0.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,0c0,1.3,0,2.6,0,3.8c-0.4,0-0.7,0-1.1,0c0-1.3,0-2.5,0-3.8c-1.3,0-2.6,0-3.8,0v-1.1c1.3,0,2.6,0,3.8,0c0-1.3,0-2.6,0-3.8c0.4,0,0.7,0,1.1,0c0,1.3,0,2.6,0,3.8Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.5 24'%3E%3Cg%3E%3Cpath d='M19.7,1.8c1.9,1.4,3.2,3.5,3.6,5.8c0.5,2.5-0.1,5.2-1.7,7.2c-1.4,1.9-3.7,3.3-6,3.6c-2.4,0.4-4.9-0.2-6.8-1.6c-2.4,2.4-4.8,4.8-7.2,7.2C1,23.5,0.5,23,0,22.5c2.4-2.4,4.7-4.7,7.1-7.1c-2.4-2.8-2.9-7-1.2-10.3C7.2,2.5,9.8,0.6,12.6,0.1c2.4-0.4,5,0.2,7,1.7M9.3,2.7c-1.9,1.4-3.2,3.7-3.3,6.1c-0.2,2.2,0.6,4.4,2.1,6.1c1.5,1.6,3.7,2.6,5.9,2.6c2,0,4.1-0.7,5.6-2.1c1.4-1.2,2.3-2.9,2.6-4.8c0.4-2.3-0.2-4.7-1.7-6.5c-1.2-1.5-3-2.6-4.9-2.9c-2.2-0.4-4.5,0.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,0c0,1.3,0,2.6,0,3.8c-0.4,0-0.7,0-1.1,0c0-1.3,0-2.5,0-3.8c-1.3,0-2.6,0-3.8,0v-1.1c1.3,0,2.6,0,3.8,0c0-1.3,0-2.6,0-3.8c0.4,0,0.7,0,1.1,0c0,1.3,0,2.6,0,3.8Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

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

/* ================================================
   УЛУЧШЕНИЯ: Спиннер загрузки, уведомления,
   анимации и доступность
   ================================================ */

/* Спиннер загрузки */
.gallery-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.spinner-ring {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
}

.spinner-ring::after {
    content: " ";
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px;
    border-radius: 50%;
    border: 5px solid #EC1C24;
    border-color: #EC1C24 transparent transparent transparent;
    animation: spinner-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spinner-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Уведомления об ошибках */
.gallery-error-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #dc3545;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    max-width: 400px;
    word-wrap: break-word;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(450px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Уведомления о скачивании */
.gallery-download-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    animation: slideIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-download-notification::before {
    content: "✓";
    font-size: 18px;
    font-weight: bold;
}

.gallery-download-notification.gallery-download-success {
    background-color: #28a745;
}

/* Плавное появление изображений при ленивой загрузке */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Улучшенная доступность для кнопок - только для кнопки зума */
.product-gallery__zoom:focus {
    outline: 2px solid #EC1C24;
    outline-offset: 2px;
}

/* Focus-visible для более современных браузеров - только для кнопки зума */
.product-gallery__zoom:focus-visible {
    outline: 2px solid #EC1C24;
    outline-offset: 2px;
}

/* Оптимизация CSS для лучшей производительности */
.product-gallery {
    contain: layout style paint;
    position: relative;
}

.product-gallery__featured .swiper {
    will-change: transform;
}

.product-gallery__featured .swiper-slide {
    will-change: opacity;
}

/* Минимизация переходов для средств доступности */
@media (prefers-reduced-motion: reduce) {
    .gallery-loading-spinner::after,
    .gallery-error-notification,
    .gallery-download-notification,
    .product-gallery__featured .swiper-button-next,
    .product-gallery__featured .swiper-button-prev,
    .product-gallery__thumbnails .swiper-slide {
        animation: none !important;
        transition: none !important;
    }
}

/* Улучшенные стили для высокого контраста */
@media (prefers-contrast: more) {
    .product-gallery__featured .swiper-button-next,
    .product-gallery__featured .swiper-button-prev {
        border: 2px solid #000;
    }

    .product-gallery__thumbnails .swiper-slide {
        border-width: 3px;
    }

    .product-gallery__zoom {
        border: 2px solid #000;
    }
}

/* ================================================
   PHOTOSWIPE 5 — SKIN V4 (default skin PhotoSwipe 4)
   mainClass: pswp--v4-skin, пустые *SVG в lightbox
   ================================================ */

.pswp--v4-skin {
    --pswp-v4-skin: url("../vendor/photoswipe5/skin/default-skin.svg");
    --pswp-icon-color: #fff;
    --pswp-icon-color-secondary: #4f4f4f;
}

@media (-webkit-min-device-pixel-ratio: 1.1),
       (min-resolution: 105dpi),
       (min-resolution: 1.1dppx) {
    .pswp--v4-skin {
        --pswp-v4-skin: url("../vendor/photoswipe5/skin/default-skin.svg");
    }
}

.pswp--v4-skin .pswp__button .pswp__icn,
.pswp--v4-skin .pswp__button .pswp__icn-shadow {
    display: none !important;
}

.pswp--v4-skin .pswp__top-bar {
    height: 44px;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: flex-end;
}

.pswp--v4-skin .pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    margin: 0;
    padding: 0 10px;
    font-size: 13px;
    line-height: 44px;
    color: #fff;
    opacity: 0.75;
    text-shadow: none;
}

.pswp--v4-skin .pswp__button {
    width: 44px;
    height: 44px;
    opacity: 0.75;
    transition: opacity 0.2s;
    background-image: var(--pswp-v4-skin);
    background-repeat: no-repeat;
    background-size: 264px 88px;
    background-position: 0 0;
    background-color: transparent;
}

.pswp--v4-skin .pswp__button:hover,
.pswp--v4-skin .pswp__button:focus {
    opacity: 1;
}

.pswp--v4-skin .pswp__button:active {
    opacity: 0.9;
}

.pswp--v4-skin .pswp__button--close {
    background-position: 0 -44px;
}

.pswp--v4-skin .pswp__button--zoom {
    display: none;
    background-position: -88px 0;
}

.pswp--v4-skin.pswp--zoom-allowed .pswp__button--zoom {
    display: block;
}

.pswp--v4-skin.pswp--zoomed-in .pswp__button--zoom {
    background-position: -132px 0;
}

.pswp--v4-skin .pswp__button--download-button {
    width: 44px;
    height: 44px;
    background-image: var(--pswp-v4-skin);
    background-repeat: no-repeat;
    background-size: 264px 88px;
    background-position: -44px -44px;
    background-color: transparent;
    opacity: 0.75;
}

.pswp--v4-skin .pswp__button--download-button:hover {
    opacity: 1;
}

.pswp--v4-skin .pswp__preloader {
    width: 44px;
    height: 44px;
    margin-right: auto;
}

.pswp--v4-skin .pswp__button--arrow {
    width: 70px;
    height: 100px;
    margin-top: -50px;
    background: none;
}

.pswp--v4-skin .pswp__button--arrow::before {
    content: '';
    position: absolute;
    top: 35px;
    height: 30px;
    width: 32px;
    background-color: rgba(0, 0, 0, 0.3);
    background-image: var(--pswp-v4-skin);
    background-repeat: no-repeat;
    background-size: 264px 88px;
}

.pswp--v4-skin .pswp__button--arrow--prev::before {
    left: 6px;
    background-position: -138px -44px;
}

.pswp--v4-skin .pswp__button--arrow--next::before {
    right: 6px;
    left: auto;
    background-position: -94px -44px;
}

.pswp--v4-skin.pswp--touch .pswp__button--arrow {
    visibility: hidden;
}

.pswp--v4-skin.pswp--has_mouse .pswp__button--arrow {
    visibility: visible;
}

@supports not (background-image: url("../vendor/photoswipe5/skin/default-skin.svg")) {
    .pswp--v4-skin {
        --pswp-v4-skin: url("../vendor/photoswipe5/skin/default-skin.png");
    }
}

/* ================================================
   КНОПКА СКАЧИВАНИЯ НА СЛАЙДАХ (при наведении)
   ================================================ */

.product-gallery__featured .swiper-slide {
    position: relative;
}

/* Кнопка скачивания на слайде */
.product-gallery__download-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 2;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-gallery__featured .swiper-slide:hover .product-gallery__download-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.product-gallery__download-btn:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-gallery__download-btn:active {
    transform: scale(0.95);
}

.product-gallery__download-btn svg {
    width: 22px;
    height: 22px;
    stroke: #333;
    stroke-width: 2;
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
    .product-gallery__download-btn {
        width: 40px;
        height: 40px;
        bottom: 10px;
        right: 10px;
    }

    .product-gallery__download-btn svg {
        width: 20px;
        height: 20px;
    }

    .gallery-download-notification,
    .gallery-error-notification {
        left: 10px;
        right: 10px;
        max-width: none;
        text-align: center;
    }
}

/* ================================================
   АНИМАЦИЯ ПУЛЬСАЦИИ ДЛЯ КНОПКИ СКАЧИВАНИЯ
   ================================================ */

@keyframes downloadPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 2px 15px rgba(40, 167, 69, 0.4);
    }
}

.product-gallery__download-btn:hover {
    animation: downloadPulse 1.5s ease infinite;
}