/* Single Product — gallery only (main image card + thumbnail boxes).
   Scoped strictly to .product-gallery so it doesn't touch layout,
   width, or the summary column at all. */

body.single-product .product-gallery .product-images {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 16px;
  overflow: hidden;
}

body.single-product .product-thumbnails.thumbnails {
  margin-top: 12px;
  position: static !important;
}

/* Bypass Flickity's absolute-position slider mechanism — lay the
   thumbnails out as a plain flex row instead, since a handful of
   thumbnails don't need carousel positioning and it was causing
   inconsistent gaps between cells. */
body.single-product .product-thumbnails.thumbnails .flickity-viewport,
body.single-product .product-thumbnails.thumbnails .flickity-slider {
  position: static !important;
  transform: none !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body.single-product .product-thumbnails.thumbnails .col {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  box-sizing: border-box !important;
  background: #fff;
  border: 2px solid #d5d5d5 !important;
  border-radius: 10px;
  overflow: hidden;
  outline: none !important;
  transition: border-color 0.15s ease;
}

body.single-product .product-thumbnails.thumbnails .col a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

body.single-product .product-thumbnails.thumbnails .col img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

body.single-product .product-thumbnails.thumbnails .col:hover {
  border-color: rgba(250, 81, 20, 0.4);
}

body.single-product .product-thumbnails.thumbnails .col.is-nav-selected {
  border-color: #fa5114 !important;
}

@media (max-width: 549px) {
  body.single-product .product-gallery .product-images {
    border-radius: 12px;
    padding: 10px;
  }
}