/* Основной контейнер галереи */
.woocommerce-product-gallery {
    align-self: stretch;
    height: 714px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
    flex: 1;
    max-width: 100%;
    min-width: 0;
    position: relative;
}

/* Контейнер слайдов - ОЧЕНЬ ВАЖНО! */
.flex-viewport {
    width: 100% !important;
    height: 616px !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #F8F8F8 !important; /* Серый фон всего контейнера */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch;
}

/* Wrapper - УБРАТЬ transform стили! */
.woocommerce-product-gallery__wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: block !important;
    background-color: #F8F8F8 !important;
    transform: none !important; /* ОЧЕНЬ ВАЖНО - убрать inline transform */
    transition: none !important; /* ОЧЕНЬ ВАЖНО - убрать inline transition */
}

/* Слайды - ОЧЕНЬ ВАЖНО! */
.woocommerce-product-gallery__image {
    position: absolute !important; /* Абсолютное позиционирование */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    display: flex !important; /* Для центрирования */
    align-items: center !important;
    justify-content: center !important;
    background-color: #F8F8F8 !important; /* Серый фон для каждого слайда */
    
    /* СБРОС inline стилей от FlexSlider */
    margin-right: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Активный слайд */
.woocommerce-product-gallery__image.flex-active-slide {
    opacity: 1 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Само изображение */
.woocommerce-product-gallery__image img {
    background-color: #F8F8F8 !important;
    max-width: min(916px, 100%) !important;
    max-height: 616px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    
    /* Убрать transform если используем flex */
    /* top: 50% !important;
    transform: translateY(-50%) !important; */
    position: relative !important;
}

/* Первый слайд всегда видим */
.woocommerce-product-gallery__image:first-child {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ссылка */
.woocommerce-product-gallery__image a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* Контейнер стрелок */
.custom-gallery-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 0 32px; /* Как в макете */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-gallery-nav button {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border: none;
    background-color: transparent;
    pointer-events: auto;
    opacity: 0.6;
}

.custom-gallery-nav button:hover {
    cursor: pointer;
    opacity: 0.5;
}

/* Скрыть навигацию если нет множества изображений */
.custom-gallery-nav {
    display: none;
}

.woocommerce-product-gallery.multiple-images .custom-gallery-nav {
    display: flex;
}
/* Миниатюры */
.flex-control-nav.flex-control-thumbs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    list-style: none;
    width: 100%;
    overflow-x: auto;
    height: 100px !important;
}

/* Элемент миниатюры */
.flex-control-nav.flex-control-thumbs li {
    flex: 0 0 auto !important;
    width: 82px !important;
    height: 82px !important;
    cursor: pointer !important;
}

/* Картинка миниатюры */
.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
    border: 2px solid transparent;
}

/* Активная миниатюра */
.flex-control-nav.flex-control-thumbs li img.flex-active,
.flex-control-nav.flex-control-thumbs li img:hover {
    opacity: 1 !important;
    border-color: #000;
}

/* Кнопка полноэкранного режима */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Контейнер стрелок */
.custom-gallery-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-gallery-nav button {
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border: none;
    background-color: transparent;
    pointer-events: auto;
}

.custom-gallery-nav button:hover {
    cursor: pointer;
}

.custom-gallery-nav {
    display: none;
}

.woocommerce-product-gallery.multiple-images .custom-gallery-nav {
    display: flex;
}

.return-to-prev-category-container {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1F1F1F;
    font-size: 18px !important;
    font-weight: 400;
    height: auto;
    padding: 42px 42px 0 42px;
}

.return-arrow {
    display: flex;
    align-items: center;
}

.return-text {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
}

.return-to-prev-category-container p a {
    color: #1F1F1F;
    text-align: center;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.woocommerce div.product div.images {
    margin: 0;
}

/* Одинарное изображение: убираем фиксированные высоты и абсолютное позиционирование */
.woocommerce-product-gallery.single-image {
    height: auto;
}

.woocommerce-product-gallery.single-image .flex-viewport {
    height: auto !important;
}

.woocommerce-product-gallery.single-image .woocommerce-product-gallery__wrapper {
    height: auto !important;
}

.woocommerce-product-gallery.single-image .woocommerce-product-gallery__image {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
}

.woocommerce-product-gallery.single-image .woocommerce-product-gallery__image a {
    height: auto !important;
}

/* Размер изображения в single-image оставляем как в базовой галерее,
   чтобы масштаб был одинаковым при 1 и при нескольких фото */

/* ==================== АДАПТИВ ==================== */

/* 1000px */
@media (max-width: 1000px) {
    .woocommerce-product-gallery {
        width: 100% !important;
        height: 714px !important;
        align-self: stretch;
    }

    .flex-control-nav.flex-control-thumbs {
        height: 82px !important;
    }


    .flex-viewport {
        align-self: stretch;
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 616px !important;
    }

    .woocommerce-product-gallery__wrapper {
        background-image: url(https://placehold.co/916x616);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .woocommerce-product-gallery__image img {
        max-width: 916px;
        max-height: 616px;
    }

    .flex-control-nav.flex-control-thumbs {
        height: 82px;
        gap: 16px;
    }

    .flex-control-nav.flex-control-thumbs li {
        width: 82px !important;
        height: 82px !important;
    }

    .custom-gallery-nav button {
        width: 32px;
        height: 32px;
    }

    .return-to-prev-category-container {
        padding: 42px 42px 0 42px;
        font-size: 18px;
    }
}

/* 768px */
@media (max-width: 768px) {
    .woocommerce-product-gallery__wrapper {
        background-image: url(https://placehold.co/728x616);
    }

    .woocommerce-product-gallery__image img {
        max-width: 728px;
        max-height: 616px;
    }

    .flex-control-nav.flex-control-thumbs {
        height: 82px;
        gap: 16px;
        padding: 0 !important;
    }

    .flex-control-nav.flex-control-thumbs li {
        width: 82px !important;
        height: 82px !important;
    }

    .custom-gallery-nav button {
        width: 32px;
        height: 32px;
    }

    .return-to-prev-category-container {
        padding: 42px 20px 0 20px;
        font-size: 18px;
    }

    .woocommerce-product-gallery.single-image .flex-viewport {
        height: auto !important;
    }
}

/* 480px */
@media (max-width: 480px) {
    /*.woocommerce-product-gallery,*/
    .flex-viewport{
        height: 495px !important;
    }

    .woocommerce-product-gallery__wrapper {
        background-image: url(https://placehold.co/440x397);
    }

    .woocommerce-product-gallery__image img {
        max-width: 440px;
        max-height: 495px;
    }

    .custom-gallery-nav {
        padding: 20px;
    }

    .flex-control-nav.flex-control-thumbs {
        height: 82px;
        gap: 16px;
    }

    .flex-control-nav.flex-control-thumbs li {
        width: 82px !important;
        height: 82px !important;
    }

    .custom-gallery-nav button {
        width: 32px;
        height: 32px;
    }

    .return-to-prev-category-container {
        padding: 32px 20px 0 20px;
        font-size: 18px;
    }

    .woocommerce-product-gallery.single-image .flex-viewport {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* 320px */
@media (max-width: 320px) {
    .flex-viewport {
        height: 400px !important;
    }

    .woocommerce-product-gallery__wrapper {
        background-image: url(https://placehold.co/280x322);
    }

    .woocommerce-product-gallery__image img {
        max-width: 280px;
        max-height: 400px;
    }

    .flex-control-nav.flex-control-thumbs {
        height: 62px;
        gap: 16px;
    }

    .flex-control-nav.flex-control-thumbs li {
        width: 62px !important;
        height: 62px !important;
    }

    .custom-gallery-nav {
        padding: 10px;
    }

    .custom-gallery-nav button {
        width: 16px;
        height: 16px;
    }

    .return-to-prev-category-container {
        padding: 24px 20px 0 20px;
        font-size: 16px;
        gap: 8px;
    }

    .return-to-prev-category-container p a {
        font-size: 16px !important;
    }

    .return-arrow {
        width: 16px;
        height: 16px;
    }

    .woocommerce-product-gallery.single-image .flex-viewport {
        height: auto !important;
    }
}

/* 769+ для одиночного изображения: без вертикального центрирования */
@media (min-width: 769px) {
    .woocommerce-product-gallery.single-image {
        height: auto !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .woocommerce-product-gallery.single-image .flex-viewport,
    .woocommerce-product-gallery.single-image .woocommerce-product-gallery__image,
    .woocommerce-product-gallery.single-image .woocommerce-product-gallery__image a {
        align-items: flex-start !important;
    }
}