.ipa-vg-gallery { width: var(--ipa-vg-width-desktop, 48%); margin-bottom: 24px; }
.ipa-vg-main { position: relative; background: #fff; margin-bottom: var(--ipa-vg-thumb-gap, 8px); overflow: hidden; }
.ipa-vg-main-image { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden; }
.ipa-vg-main-image img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.ipa-vg-zoom-enabled .ipa-vg-main-image:hover img { transform: scale(1.5); }
.ipa-vg-thumbs { display: grid; grid-template-columns: repeat(var(--ipa-vg-thumbs, 5), minmax(0, 1fr)); gap: var(--ipa-vg-thumb-gap, 8px); align-items: start; width: 100%; }
.ipa-vg-thumb-btn { position: relative; width: 100%; aspect-ratio: 1 / 1; height: auto; min-height: 0; padding: 0; border: 1px solid rgba(0,0,0,.18); background: #fff; cursor: pointer; overflow: hidden; opacity: .78; border-radius: 4px; }
.ipa-vg-thumb-btn.is-active { opacity: 1; border-color: currentColor; }
.ipa-vg-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipa-vg-video-thumb { display: grid; place-items: center; width: 100%; height: 100%; font-size: 28px; background: #111; color: #fff; }
.ipa-vg-more-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.58); color: #fff; font-weight: 700; font-size: 21px; line-height: 1; }
.ipa-vg-more-overlay span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 2px solid rgba(255,255,255,.88); background: rgba(0,0,0,.22); }
.ipa-vg-video { width: 100%; height: var(--ipa-vg-video-height, 420px); border: 0; background: #000; display: block; }
.ipa-vg-thumbs-left, .ipa-vg-thumbs-right { display: grid; grid-template-columns: calc(var(--ipa-vg-thumb-size, 82px) + 4px) 1fr; gap: var(--ipa-vg-thumb-gap, 8px); align-items: start; }
.ipa-vg-thumbs-right { grid-template-columns: 1fr calc(var(--ipa-vg-thumb-size, 82px) + 4px); }
.ipa-vg-thumbs-left .ipa-vg-main, .ipa-vg-thumbs-right .ipa-vg-main { margin-bottom: 0; }
.ipa-vg-thumbs-left .ipa-vg-thumbs, .ipa-vg-thumbs-right .ipa-vg-thumbs { grid-template-columns: var(--ipa-vg-thumb-size, 82px); max-height: 620px; overflow-y: auto; width: auto; }
.ipa-vg-thumbs-left .ipa-vg-thumb-btn, .ipa-vg-thumbs-right .ipa-vg-thumb-btn { width: var(--ipa-vg-thumb-size, 82px); height: var(--ipa-vg-thumb-size, 82px); aspect-ratio: auto; }
.ipa-vg-thumbs-left .ipa-vg-thumbs { grid-column: 1; grid-row: 1; }
.ipa-vg-thumbs-left .ipa-vg-main { grid-column: 2; grid-row: 1; }
.ipa-vg-thumbs-right .ipa-vg-main { grid-column: 1; grid-row: 1; }
.ipa-vg-thumbs-right .ipa-vg-thumbs { grid-column: 2; grid-row: 1; }
.ipa-vg-lightbox { position: fixed; inset: 0; z-index: 999999; background: rgba(0,0,0,.88); display: grid; grid-template-rows: 1fr auto auto; align-items: center; justify-items: center; gap: 14px; padding: 34px 72px 24px; }
.ipa-vg-lightbox-stage { max-width: 94vw; max-height: 76vh; display: grid; place-items: center; }
.ipa-vg-lightbox-stage img, .ipa-vg-lightbox-image img { max-width: 94vw; max-height: 76vh; object-fit: contain; display: block; }
.ipa-vg-lightbox-image { padding: 0; border: 0; background: transparent; cursor: default; }
.ipa-vg-lightbox-stage .ipa-vg-video { width: min(94vw, 1100px); height: min(70vh, 720px); }
.ipa-vg-lightbox-close { position: fixed; right: 18px; top: 18px; z-index: 2; padding: 8px 12px; border: 0; background: #fff; color: #111; cursor: pointer; }
.ipa-vg-lightbox-prev, .ipa-vg-lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 64px; border: 0; border-radius: 4px; background: rgba(255,255,255,.92); color: #111; font-size: 44px; line-height: 1; cursor: pointer; }
.ipa-vg-lightbox-prev { left: 18px; } .ipa-vg-lightbox-next { right: 18px; }
.ipa-vg-lightbox-count { color: #fff; font-size: 14px; }
.ipa-vg-lightbox-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 92vw; max-height: 120px; overflow: auto; }
.ipa-vg-lightbox-thumb { width: 64px; height: 64px; padding: 0; border: 1px solid rgba(255,255,255,.35); background: #fff; opacity: .7; cursor: pointer; overflow: hidden; }
.ipa-vg-lightbox-thumb.is-active { opacity: 1; border-color: #fff; }
.ipa-vg-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipa-vg-gallery { transition: transform .32s ease, opacity .32s ease; }
.ipa-vg-slide-enter { opacity: 0; transform: translateX(34px); }
.ipa-vg-slide-enter-active { opacity: 1; transform: translateX(0); }
.ipa-vg-slide-exit { position: absolute; pointer-events: none; width: var(--ipa-vg-width-desktop, 100%); }
.ipa-vg-slide-exit-active { opacity: 0; transform: translateX(-34px); }
.ipa-vg-main-enter, .ipa-vg-main-exit { display: block; transition: transform .32s ease, opacity .32s ease; }
.ipa-vg-main-enter { opacity: 0; transform: translateX(24px); }
.ipa-vg-main-enter-active { opacity: 1; transform: translateX(0); }
.ipa-vg-main-exit { position: absolute; inset: 0; width: 100%; }
.ipa-vg-main-exit-active { opacity: 0; transform: translateX(-24px); }

/* Keep the IPA gallery in the same left-column position as the native WooCommerce product gallery. */
.woocommerce div.product div.ipa-vg-gallery,
.woocommerce-page div.product div.ipa-vg-gallery,
.single-product div.product .ipa-vg-gallery {
    float: left;
    clear: none;
    width: var(--ipa-vg-width-desktop, 48%);
    max-width: 100%;
}
.woocommerce div.product div.ipa-vg-gallery + div.summary,
.woocommerce-page div.product div.ipa-vg-gallery + div.summary,
.single-product div.product .ipa-vg-gallery + .summary {
    float: right;
    clear: none;
}
.product.ipa-vg-active::after {
    content: "";
    display: table;
    clear: both;
}
@media (max-width: 767px) {
    .woocommerce div.product div.ipa-vg-gallery,
    .woocommerce-page div.product div.ipa-vg-gallery,
    .single-product div.product .ipa-vg-gallery {
        float: none;
        width: var(--ipa-vg-width-mobile, 100%);
    }
}

.product.ipa-vg-active > .woocommerce-product-gallery, .product.ipa-vg-active .woocommerce-product-gallery:not(.ipa-vg-gallery *), .product.ipa-vg-active .woocommerce-product-gallery__wrapper:not(.ipa-vg-gallery *) { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.product.ipa-vg-active .ipa-vg-gallery { visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; }
/* Preserve the side-thumbnail grid. The old display:block !important rule above
   overrode .ipa-vg-thumbs-left/right { display:grid }, which pushed the
   thumbnail rail underneath the main image and made its scrollbar span the
   whole gallery width. */
.product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-left,
.product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-right {
    display: grid !important;
}
.product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-bottom {
    display: block !important;
}
.ipa-vg-thumbs-left .ipa-vg-main,
.ipa-vg-thumbs-right .ipa-vg-main { min-width: 0; }
.ipa-vg-thumbs-left .ipa-vg-thumbs,
.ipa-vg-thumbs-right .ipa-vg-thumbs {
    width: calc(var(--ipa-vg-thumb-size, 82px) + 4px);
    box-sizing: border-box;
}
@media (max-width: 1024px) { .ipa-vg-gallery { width: var(--ipa-vg-width-tablet, 100%); } .ipa-vg-slide-exit { width: var(--ipa-vg-width-tablet, 100%); } }
@media (max-width: 767px) { .ipa-vg-gallery { width: var(--ipa-vg-width-mobile, 100%); } .ipa-vg-thumbs { grid-template-columns: repeat(var(--ipa-vg-thumbs, 5), minmax(0, 1fr)); } .ipa-vg-thumbs-left, .ipa-vg-thumbs-right { display: block; } .ipa-vg-thumbs-left .ipa-vg-thumbs, .ipa-vg-thumbs-right .ipa-vg-thumbs { grid-template-columns: repeat(var(--ipa-vg-thumbs, 5), minmax(0, 1fr)); width: 100%; max-height: none; overflow: visible; margin-top: var(--ipa-vg-thumb-gap, 8px); } .ipa-vg-thumbs-left .ipa-vg-thumb-btn, .ipa-vg-thumbs-right .ipa-vg-thumb-btn { width: 100%; height: auto; aspect-ratio: 1 / 1; } .ipa-vg-video { height: 260px; } .ipa-vg-lightbox { padding: 60px 16px 18px; } .ipa-vg-lightbox-prev, .ipa-vg-lightbox-next { width: 38px; height: 52px; font-size: 34px; } .ipa-vg-slide-exit { width: var(--ipa-vg-width-mobile, 100%); } }


/* v1.0.13 responsive/layout hardening */
.ipa-vg-thumbs-left,
.ipa-vg-thumbs-right {
    grid-template-columns: calc(var(--ipa-vg-thumb-size, 82px) + 4px) minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ipa-vg-thumbs-right {
    grid-template-columns: minmax(0, 1fr) calc(var(--ipa-vg-thumb-size, 82px) + 4px);
}
.ipa-vg-main {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.ipa-vg-main-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.ipa-vg-main-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

/* Keep side thumbnails scrollable without showing the browser scrollbar. */
.ipa-vg-thumbs-left .ipa-vg-thumbs,
.ipa-vg-thumbs-right .ipa-vg-thumbs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ipa-vg-thumbs-left .ipa-vg-thumbs::-webkit-scrollbar,
.ipa-vg-thumbs-right .ipa-vg-thumbs::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

@media (max-width: 767px) {
    /* The desktop selector uses display:grid !important, so the mobile reset
       must match that specificity and importance. Main image stays first in
       the DOM and thumbnails become a row directly underneath it. */
    .product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-left,
    .product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-right {
        display: block !important;
    }

    .woocommerce div.product div.ipa-vg-gallery,
    .woocommerce-page div.product div.ipa-vg-gallery,
    .single-product div.product .ipa-vg-gallery {
        float: none !important;
        clear: both !important;
        width: var(--ipa-vg-width-mobile, 100%) !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .woocommerce div.product div.ipa-vg-gallery + div.summary,
    .woocommerce-page div.product div.ipa-vg-gallery + div.summary,
    .single-product div.product .ipa-vg-gallery + .summary {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .ipa-vg-thumbs-left .ipa-vg-main,
    .ipa-vg-thumbs-right .ipa-vg-main {
        width: 100% !important;
        margin-bottom: 0;
    }

    .ipa-vg-thumbs-left .ipa-vg-thumbs,
    .ipa-vg-thumbs-right .ipa-vg-thumbs {
        display: grid !important;
        grid-template-columns: repeat(var(--ipa-vg-thumbs, 5), minmax(0, 1fr)) !important;
        gap: var(--ipa-vg-thumb-gap, 8px);
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: var(--ipa-vg-thumb-gap, 8px);
        box-sizing: border-box;
    }
}

/* v1.0.14 main-stage sizing / clipping hardening
   Keep the complete product image inside the visible gallery and let the
   main stage use all space left after the side thumbnail rail. */
.product.ipa-vg-active .ipa-vg-gallery {
    box-sizing: border-box;
    max-width: 100% !important;
    overflow: hidden !important;
}

.product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-left,
.product.ipa-vg-active .ipa-vg-gallery.ipa-vg-thumbs-right {
    align-items: stretch;
}

.ipa-vg-thumbs-left .ipa-vg-main,
.ipa-vg-thumbs-right .ipa-vg-main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ipa-vg-main-image {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

.ipa-vg-main-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(72vh, 720px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Hover zoom was causing large products to be visibly clipped inside the
   gallery frame. Keep the image fully contained; clicking still opens the
   full lightbox. */
.ipa-vg-zoom-enabled .ipa-vg-main-image:hover img {
    transform: none !important;
}

/* Keep the thumbnail column from making the whole gallery taller than the
   main image. It remains independently scrollable and the scrollbar stays hidden. */
@media (min-width: 768px) {
    .ipa-vg-thumbs-left .ipa-vg-thumbs,
    .ipa-vg-thumbs-right .ipa-vg-thumbs {
        align-self: stretch;
        max-height: min(72vh, 720px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* The slide transforms could temporarily move half of a gallery/image outside
   its column when a variation changed. Fade in/out in place instead. */
.ipa-vg-slide-enter,
.ipa-vg-main-enter {
    opacity: 0;
    transform: none !important;
}
.ipa-vg-slide-enter-active,
.ipa-vg-main-enter-active {
    opacity: 1;
    transform: none !important;
}
.ipa-vg-slide-exit-active,
.ipa-vg-main-exit-active {
    opacity: 0;
    transform: none !important;
}

@media (max-width: 767px) {
    .product.ipa-vg-active .ipa-vg-gallery {
        overflow: visible !important;
    }
    .ipa-vg-main-image img {
        max-height: none !important;
    }
}