/* ============================================================================
   E-Able Power — Reusable Product Image Gallery (component-scoped)
   ----------------------------------------------------------------------------
   A dependency-free, self-contained image gallery for product detail pages.
   Drop this stylesheet + assets/js/product-gallery.js onto any page and add a
   single <div class="img-gallery"> block to get a compact single-image viewer
   with left/right arrows, a "n / m" counter capsule and keyboard support.

   Design tokens are read from the host page's CSS variables when present
   (--blue, --white, etc.) and fall back to the E-Able brand palette so the
   component only ever paints its own private .img-gallery* classes.

   Structure (all classes are component-private; nothing is global):
     <div class="img-gallery" data-gallery>
       <button class="img-gallery__nav" data-dir="-1" aria-label="Previous image">‹</button>
       <div class="img-gallery__stage">
         <img class="img-gallery__main" ...>
         <span class="img-gallery__count" aria-hidden="true">1 / n</span>
       </div>
       <button class="img-gallery__nav" data-dir="1" aria-label="Next image">›</button>
       <script type="application/json" class="img-gallery__list">[ {src,alt,title} ]</script>
     </div>

   The shared JS reads .img-gallery__list JSON (or a data-list attribute) and
   wires the arrows, preloads the next image and keeps the main swap animation
   and the counter in sync. See assets/js/product-gallery.js.
   ========================================================================= */

.img-gallery{
  position:relative;
  width:100%;
  max-width:360px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
}
.img-gallery *,
.img-gallery *::before,
.img-gallery *::after{box-sizing:border-box}

/* ---- main image stage ---- */
.img-gallery__stage{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  aspect-ratio:4/5;
  background:#fbfdfe;
  border:1px solid #e2eaf2;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(15,45,80,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.img-gallery__main{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:6px;
  transition:opacity .2s ease,transform .2s ease;
}
.img-gallery__main.is-swapping{opacity:0;transform:scale(.985)}

/* ---- counter capsule (bottom-right) ---- */
.img-gallery__count{
  position:absolute;
  right:14px;
  bottom:14px;
  background:rgba(8,32,57,.74);
  color:#ffffff;
  font:600 11px/1 Manrope,Arial,sans-serif;
  letter-spacing:.05em;
  padding:5px 10px;
  border-radius:999px;
  pointer-events:none;
  backdrop-filter:blur(2px);
}

/* ---- prev / next arrow buttons ---- */
.img-gallery__nav{
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #dfe7ee;
  border-radius:50%;
  background:#ffffff;
  color:#0c638d;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  box-shadow:0 1px 3px rgba(15,45,80,.08);
  transition:background .16s,color .16s,box-shadow .16s;
}
.img-gallery__nav:hover{background:#eaf2f9}
.img-gallery__nav:active{background:#d9e7f3}
.img-gallery__nav:focus-visible{outline:3px solid #0c638d;outline-offset:2px}

/* ---- embed the image list as the only hidden container ---- */
.img-gallery__list{display:none}

/* ---- reduced motion: jump straight to the final state ---- */
@media (prefers-reduced-motion: reduce){
  .img-gallery__main{transition:none}
  .img-gallery__main.is-swapping{transform:none}
}

/* ---- responsive: smaller arrows on narrow screens ---- */
@media (max-width:520px){
  .img-gallery__nav{width:34px;height:34px}
}