/**
 * IllumiWeb Product Gallery styles.
 *
 * Inherited hard rule from the GMB carousel: DO NOT set width / flex-basis /
 * min-width / max-width / overflow on .swiper, .swiper-wrapper, or
 * .swiper-slide — Swiper computes those inline. Style the inner img/link only.
 */

/* Hide Woo's default viewer once our slider is in place (kept in DOM for
   variation scripts, just visually removed). */
.woocommerce-product-gallery.iwc-gallery__source-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    margin: -1px;
    padding: 0;
    border: 0;
}

.iwc-gallery {
    margin: 0 0 1.5em;
}

.iwc-gallery__main {
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
}

.iwc-gallery__link {
    display: block;
}

.iwc-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Thumbnail strip */
.iwc-gallery__thumbs {
    margin-top: 10px;
    box-sizing: border-box;
}

.iwc-gallery__thumbs .swiper-slide {
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease;
    border-radius: 6px;
    overflow: hidden;
}

.iwc-gallery__thumbs .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid var(--iwc-accent, #2271b1);
    outline-offset: -2px;
}

.iwc-gallery__thumbs img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Left (vertical) thumbnail layout on wider screens */
@media (min-width: 769px) {
    .iwc-gallery--left {
        display: flex;
        flex-direction: row-reverse;
        gap: 12px;
        align-items: flex-start;
    }
    .iwc-gallery--left .iwc-gallery__main {
        flex: 1 1 auto;
        min-width: 0; /* allow the flex child to shrink; Swiper still owns slide width */
    }
    .iwc-gallery--left .iwc-gallery__thumbs {
        flex: 0 0 90px;
        margin-top: 0;
        height: 420px; /* Swiper vertical needs a bounded height on the thumbs rail */
    }
}

/* Nav arrows: tone them to the theme accent, subtle */
.iwc-gallery__main .swiper-button-prev,
.iwc-gallery__main .swiper-button-next {
    color: var(--iwc-accent, #2271b1);
    --swiper-navigation-size: 26px;
}

.iwc-gallery__main .swiper-pagination-bullet-active {
    background: var(--iwc-accent, #2271b1);
}

/* ── WooCommerce PhotoSwipe lightbox toolbar ──────────────────────────────
   Woo opens PhotoSwipe (v4) when a gallery image is tapped. Its toolbar DOM
   order is: counter, zoom, fullscreen, share, close. We reorder so zoom is the
   leftmost control and close (X) is rightmost. WooCommerce's own woocommerce.css
   targets `button.pswp__button` with high specificity, so `order` needs
   !important to win. Scoped to .pswp__top-bar so nothing else is affected. */
.pswp__top-bar {
    display: flex !important;
    align-items: center;
}
.pswp__counter        { order: 0 !important; margin-right: auto; }  /* far left */
.pswp__button--zoom   { order: 1 !important; }                      /* zoom: leftmost control */
.pswp__button--fs     { order: 2 !important; }                      /* fullscreen */
.pswp__button--share  { order: 3 !important; }                      /* share */
.pswp__button--close  { order: 4 !important; }                      /* X: rightmost */

/* Bigger, easier tap targets on touch screens. Also guards the known Woo mobile
   bug where a tap on the X can bubble to the element beneath it: give the close
   button a solid hit area. */
@media (max-width: 768px) {
    .pswp__top-bar .pswp__button {
        width: 50px !important;
        height: 50px !important;
    }
}