/* ── SpiderHouse Product Gallery (Swiper) ─────────────────────────────────── */

.sh-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Vertical thumbnails: main gallery + thumbs side by side */
.sh-product-gallery[data-thumbs-direction="vertical"] {
    flex-direction: row;
    align-items: flex-start;
}

/* ── Main Swiper ─────────────────────────────────────────────────────────── */
.sh-gallery-main {
    width: 100%;
    flex: 1 1 auto;
    cursor: grab;
    overflow: hidden;
}

.sh-gallery-main:active {
    cursor: grabbing;
}

.sh-gallery-main .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ── Thumbnails Swiper ───────────────────────────────────────────────────── */
.sh-gallery-thumbs {
    flex-shrink: 0;
}

/* Horizontal thumbnails */
.sh-product-gallery:not([data-thumbs-direction="vertical"]) .sh-gallery-thumbs {
    width: 100%;
}

/* Vertical thumbnails */
.sh-product-gallery[data-thumbs-direction="vertical"] .sh-gallery-thumbs {
    width: 80px;
    order: -1; /* thumbs on the left */
}

.sh-gallery-thumbs .swiper-slide {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease;
    overflow: hidden;
}

.sh-gallery-thumbs .swiper-slide:hover {
    opacity: 0.8;
}

.sh-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var( --wp--preset--color--secondary, #F37432 );
    outline-offset: -2px;
}

.sh-gallery-thumbs .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Navigation & pagination overrides ──────────────────────────────────── */
.sh-gallery-main .swiper-button-next,
.sh-gallery-main .swiper-button-prev {
    color: var( --wp--preset--color--primary, #13354E );
}

.sh-gallery-main .swiper-button-next::after,
.sh-gallery-main .swiper-button-prev::after {
    font-size: 1.25rem;
}

.sh-gallery-main .swiper-pagination-bullet-active {
    background: var( --wp--preset--color--secondary, #F37432 );
}

.sh-gallery-main .swiper-pagination-progressbar-fill {
    background: var( --wp--preset--color--secondary, #F37432 );
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
    .sh-gallery-thumbs {
        display: none; /* too narrow for a thumb strip */
    }

    .sh-product-gallery[data-thumbs-direction="vertical"] {
        flex-direction: column;
    }

    .sh-product-gallery[data-thumbs-direction="vertical"] .sh-gallery-thumbs {
        width: 100%;
        order: 0;
    }
}