/* ============================================================
   NESPL Gallery Enhancements (global) — applies to ALL product
   pages so galleries WITHOUT 360° also use the clean 3-column,
   uniform-thumbnail layout (not the old 25% float layout).
   Selectors only match the product gallery, so this is inert
   elsewhere. On 360° products, spin360.css + the inline critical
   CSS override the thumbnail display to hide it in 360° mode.
   Brand color: #17539e
   ============================================================ */

/* Thumbnail strip: 3 equal columns filling the width */
.previewCarousel.previewThumbs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding-top:16px;  /* gap between the main image and the thumbnail grid (margin is eaten by float clearance) */
  margin-top:0;
  clear:both;   /* drop below the float:left main image so the grid gets full width */
}
.previewCarousel.previewThumbs .carouselItem{
  width:auto !important;
  margin:0 !important;
  float:none !important;
  border:1px solid #d9d9d9;
  border-radius:4px;
  overflow:hidden;
  background:#fff;
  aspect-ratio:1 / 1;          /* every thumbnail the same square box */
  display:block;
  position:relative;
}
.previewCarousel.previewThumbs .carouselItem img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;   /* uniform W/H incl. youtube/video thumbs */
  display:block;
  background:#fff;
}

/* Main gallery image container (so zoom controls position correctly) */
.productPreview .activePreview{ position:relative; overflow:hidden; }
.productPreview .activePreview #productPreview{ transition:transform .15s ease; }

/* Tap-friendly gallery zoom controls (work on non-360 products too) */
.gallery-zoom-controls{
  position:absolute;bottom:12px;right:12px;
  display:flex;flex-direction:column;gap:8px;z-index:5;
}
.gz-btn{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #17539e;border-radius:50%;
  background:rgba(255,255,255,.95);color:#17539e;cursor:pointer;
  transition:background .2s,color .2s,opacity .2s;
}
.gz-btn svg{ width:20px;height:20px; }
.gz-btn:disabled,.gz-btn.is-disabled{ opacity:.4;cursor:not-allowed;pointer-events:none; }

@media (hover:hover){
  .gz-btn:hover:not(:disabled):not(.is-disabled){ background:#17539e;color:#fff; }
}
@media (pointer:coarse){
  .gz-btn{ width:46px;height:46px; }
}
@media (max-width:480px){
  .previewCarousel.previewThumbs{ gap:8px; }
}

/* Mobile: breathing room above the breadcrumb so it doesn't stick to the
   gallery/thumbnails stacked above it (applies to ALL product pages). */
@media (max-width: 768px){
  .prodlsec nav[aria-label="breadcrumb"]{ margin-top:18px; }
}