.ipa-vg-gallery { width: var(--ipa-vg-width-desktop, 100%); margin-bottom: 24px; }
.ipa-vg-main { position: relative; background: #fff; margin-bottom: var(--ipa-vg-thumb-gap, 8px); }
.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; }
@media (max-width: 1024px) { .ipa-vg-gallery { 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; } }

/* Smooth variation-gallery replacement */
.product .woocommerce-product-gallery + .ipa-vg-gallery,
.product .ipa-vg-gallery + .ipa-vg-gallery { clear: both; float:left; }
.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 { overflow: hidden; }
.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); }
@media (max-width: 1024px) { .ipa-vg-slide-exit { width: var(--ipa-vg-width-tablet, 100%); } }
@media (max-width: 767px) { .ipa-vg-slide-exit { width: var(--ipa-vg-width-mobile, 100%); } }