/* WsProductGallery island — static (NOT atomized), PurgeCSS-safelisted as ws-product-gallery*.
   Two-widget layout: THUMBNAILS render in the marker slot (ex wb-product-gallery-carousel);
   the STAGE (big image) portals into the hero element `.ws-pg-stage-host` (#prod-img).
   --wspg-* custom properties carry editable values (Elementor control bridge can override). */

/* Legacy in-place layout (stageTarget absent): thumbnails + stage side by side. */
.ws-product-gallery {
    position: relative;
    display: grid;
    grid-template-columns: var(--wspg-thumb-size, 84px) 1fr;
    gap: var(--wspg-gap, 16px);
    align-items: start;
}
/* Split layout (stage portaled to the hero): container is the thumbnail strip only. */
.ws-product-gallery--split { display: block; }

/* ── Pre-hydration fallback (baked WC gallery inside the marker) ────────────
   Before React mounts, the marker contains the full baked .woocommerce-product-
   gallery (big images) while sitting in the THUMBNAILS column — the user sees a
   small stage in the wrong place, then a re-layout when the stage portals into
   the hero (#prod-img). Render the baked markup as a thumbnail strip instead so
   pre- and post-hydration geometry matches; React replaces this DOM on mount.
   WC legacy rules must be beaten here: `.woocommerce #content div.product
   div.images` (1,2,2 — width:48%/float) and `.woocommerce div.product
   div.images .woocommerce-product-gallery__image:nth-child(n+2)`
   (0,5,2 — width:25%). This shim lives only until hydration, so the geometry
   props are pinned with !important instead of an specificity arms race. */
[data-island="WsProductGallery"] > .woocommerce-product-gallery.woocommerce-product-gallery {
    display: flex;
    flex-direction: column;
    float: none !important;
    width: 100% !important;
    gap: var(--wspg-gap, 16px);
    max-height: var(--wspg-stage-h, 85vh);
    overflow: hidden;
    opacity: 1 !important;
}
[data-island="WsProductGallery"] > .woocommerce-product-gallery > .woocommerce-product-gallery__image.woocommerce-product-gallery__image {
    flex: 0 0 auto;
    width: var(--wspg-thumb-size, 84px) !important;
    height: var(--wspg-thumb-size, 84px) !important;
    margin: 0;
    border-radius: var(--wspg-radius, 8px);
    overflow: hidden;
    background: #f2f2f2;
}
[data-island="WsProductGallery"] .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Thumbnails strip ─────────────────────────────────────────────────────── */
.ws-product-gallery__thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--wspg-gap, 16px);
    max-height: var(--wspg-stage-h, 85vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ws-product-gallery__thumbnails::-webkit-scrollbar { display: none; }
.ws-product-gallery__thumb {
    flex: 0 0 auto;
    width: var(--wspg-thumb-size, 84px);
    height: var(--wspg-thumb-size, 84px);
    border: 0;
    padding: 0;
    border-radius: var(--wspg-radius, 8px);
    overflow: hidden;
    cursor: pointer;
    background: #f2f2f2;
    opacity: .6;
    transition: opacity .2s ease;
    scroll-snap-align: start;
}
.ws-product-gallery__thumb:hover { opacity: .85; }
.ws-product-gallery__thumb[aria-selected="true"] { opacity: 1; outline: 2px solid currentColor; outline-offset: -2px; }
.ws-product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Stage (big image) ────────────────────────────────────────────────────── */
.ws-product-gallery__stage {
    position: relative;
    min-height: var(--wspg-stage-h, 85vh);
    border-radius: var(--wspg-radius, 8px);
    overflow: hidden;
    background-color: #f2f2f2;
}
/* Stage portaled INTO the hero: overlay-fill the host (#prod-img). */
.ws-pg-stage-host { position: relative; }
.ws-pg-stage-host .ws-product-gallery__stage {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
    z-index: 1;
}
.ws-product-gallery__main-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The whole big image is the lightbox trigger (fills the stage). */
.ws-product-gallery__zoom-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    background: transparent;
    z-index: 2;
}
.ws-product-gallery__zoom-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
/* Decorative "expand" affordance (clicks pass through to the button). */
.ws-product-gallery__stage::after {
    content: "\2922"; /* ⤢ expand */
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #222;
    font-size: 20px;
    pointer-events: none;
    z-index: 3;
}

/* ── Full-screen browsable lightbox (portaled to <body>) ──────────────────── */
.ws-product-gallery__lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
    padding: 24px;
}
.ws-product-gallery__lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}
.ws-product-gallery__lightbox-image { max-width: 90vw; max-height: 78vh; object-fit: contain; }
.ws-product-gallery__lightbox-counter { margin-top: 12px; color: #fff; font-size: 14px; letter-spacing: .04em; }
.ws-product-gallery__lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.ws-product-gallery__lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    width: 48px;
    height: 64px;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws-product-gallery__lightbox-nav:hover { background: rgba(255, 255, 255, .24); }
.ws-product-gallery__lightbox-nav--prev { left: 12px; }
.ws-product-gallery__lightbox-nav--next { right: 12px; }
.ws-product-gallery__lightbox-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    max-width: 92vw;
    overflow-x: auto;
    padding-bottom: 4px;
}
.ws-product-gallery__lightbox-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #333;
    opacity: .5;
    transition: opacity .2s ease;
}
.ws-product-gallery__lightbox-thumb:hover { opacity: .8; }
.ws-product-gallery__lightbox-thumb[aria-selected="true"] { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
.ws-product-gallery__lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ws-product-gallery { grid-template-columns: 1fr; }
    [data-island="WsProductGallery"] > .woocommerce-product-gallery.woocommerce-product-gallery { flex-direction: row; max-height: none; }
    .ws-product-gallery__thumbnails {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }
    .ws-product-gallery__stage { min-height: 60vh; }
    .ws-product-gallery__lightbox-nav { width: 40px; height: 52px; font-size: 32px; }
    .ws-product-gallery__lightbox-image { max-height: 68vh; }
}