/* =========================================================
   DROP-IN REPLACEMENT (SAFE)
   Thumbnails + Modal CSS (CLS-safe, minimal side-effects)
   Replace your entire current block with this.
   ========================================================= */


/* ---------- THUMBNAILS (CLS-safe reserve) ---------- */

/* Reserve only what we KNOW: the thumbs themselves */
#productThumbs{
  margin-top:12px;
  /* Avoid big min-heights that can create new spacing issues */
}

/* Container that holds the thumbs */
#productThumbs .pagination-container{
  width:100%;
  display:flex;
  justify-content:center;
  padding:10px 0;
  box-sizing:border-box;
}

/* Thumb list */
#productThumbs .pagination{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

/* Each thumb slot: hard reserve so layout cannot change */
#productThumbs .pagination li{
  margin:0;
  width:100px;
  height:100px;
  flex:0 0 100px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* IMPORTANT: make the <a> block-level and fixed-size (kills baseline shifts) */
#productThumbs .pagination li > a{
  display:block;
  width:100px;
  height:100px;
  line-height:0;           /* prevents inline baseline wiggle */
  text-decoration:none;
}

/* Border box: fixed geometry */
#productThumbs .image-border{
  width:100%;
  height:100%;
  border:1px solid #ccc;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow:hidden;
}

/* Thumb image: cannot affect layout */
#productThumbs .pagination li img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}


/* ---------- PAYMENT STRIP (scope this tightly) ---------- */
/* If you can wrap it, add class="tcs-payment-strip" to its parent container.
   This avoids affecting other Visa images sitewide. */

.tcs-payment-strip img[src*="vmad"],
.tcs-payment-strip img[alt*="Visa"]{
  display:block;
  width:165px;
  height:20px;
}


/* ---------- MODAL (overlay; no CLS) ---------- */

#imageModal.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.9);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

#imageModal.modal.is-open{ display:block; }

#imageModal .modal-header{
  display:flex;
  justify-content:flex-end;
  padding:15px;
  width:100%;
  box-sizing:border-box;
}

#imageModal .close{
  color:#000;
  background:#fff;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  padding:5px 10px;
  border-radius:5px;
  border:2px solid #fff;
  box-shadow:0 0 10px rgba(255,255,255,.8);
}

/* Centered image */
#imageModal .modal-content{
  margin:24px auto;
  display:block;
  max-width:80%;
  max-height:80vh;     /* vh is more stable inside fixed overlays */
  border-radius:10px;
  background:#000;
  object-fit:contain;
}

/* Arrows: absolute inside overlay (more predictable than fixed) */
#imageModal .prev,
#imageModal .next{
  cursor:pointer;
  position:absolute;
  top:50%;
  padding:16px;
  color:#fff;
  font-weight:bold;
  font-size:30px;
  user-select:none;
  text-decoration:none;
  background:rgba(0,0,0,.4);
  transform:translateY(-50%);
  z-index:1001;
}

#imageModal .prev{ left:12px; }
#imageModal .next{ right:12px; }

#imageModal .prev:hover,
#imageModal .next:hover{
  background:rgba(0,0,0,.8);
}

/* Optional: remove zoom animation (animations can be mistaken as movement in audits) */
/*
#imageModal .modal-content{ animation:none !important; }
*/