/* Sdelkisimoti product gallery overrides for Splide 4.x.
 * Load AFTER splide.min.css in the <head>; do not also load splide-core.min.css.
 * Scoped to the product page; leaves the vendor CSS untouched.
 */

/* Splide hides its root until mount. Show the first slide before JS initializes
   so the product's LCP image is visible even if JS is delayed. */
#sdi-product__gallery:not(.is-initialized):not(.is-rendered) {
  visibility: visible;
}
#sdi-product__gallery:not(.is-initialized):not(.is-rendered) .splide__slide {
  width: 100%;
  flex: 0 0 100%;
}
#sdi-product__gallery .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Reserve layout space for the small navigation images to avoid CLS. */
#sdi-product__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
#sdi-product__thumbnails > .sdi-product__thumbnail {
  box-sizing: border-box;
  width: clamp(42px, 12vw, 80px);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: hidden;
  cursor: pointer;
}
#sdi-product__thumbnails > .sdi-product__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}