/* ZEFFIRO 4.51 | Approved product gallery: photo only, arrows above, thumbnails below.
   Overrides legacy 4.23, 4.47 and 4.48 white backgrounds/insets. */
html body .detail-gallery,
html body .quick-detail-layout .detail-gallery {
  background: transparent !important;
}
html body .detail-gallery .detail-hero-image,
html body .quick-detail-layout .detail-hero-image,
html body .zeffiro-quick-product .detail-hero-image,
html[data-theme="dark"] body .detail-gallery .detail-hero-image,
html[data-theme="light"] body .detail-gallery .detail-hero-image {
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .detail-gallery .detail-hero-image::before,
html body .quick-detail-layout .detail-hero-image::before {
  content: none !important;
  display: none !important;
}
html body .detail-gallery .detail-hero-image > img,
html body .quick-detail-layout .detail-hero-image > img,
html body .zeffiro-quick-product .detail-hero-image > img,
html body #detailMainImage,
html body #quickProductMainImage {
  display: block !important;
  position: static !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: min(72vh, 640px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html body .detail-gallery .detail-photo-arrow,
html body .quick-detail-layout .detail-photo-arrow {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(141, 252, 227, .85) !important;
  background: rgba(5, 26, 27, .72) !important;
  color: #fff !important;
  font-size: 32px !important;
  line-height: 1 !important;
  backdrop-filter: blur(7px);
  cursor: pointer;
}
html body .detail-gallery .detail-photo-arrow.prev { left: 10px !important; }
html body .detail-gallery .detail-photo-arrow.next { right: 10px !important; }
html body .detail-gallery .detail-photo-arrow:hover,
html body .detail-gallery .detail-photo-arrow:focus-visible {
  background: #52cdb8 !important;
  color: #062421 !important;
}
html body .detail-gallery .detail-thumbnails,
html body .quick-detail-layout .detail-thumbnails {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: 0 !important;
  margin-top: 14px !important;
  background: transparent !important;
}
html body .detail-gallery .detail-thumb,
html body .quick-detail-layout .detail-thumb,
html[data-theme="dark"] body .detail-gallery .detail-thumb,
html[data-theme="light"] body .detail-gallery .detail-thumb {
  box-sizing: border-box !important;
  width: 76px !important;
  height: 76px !important;
  padding: 0 !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  cursor: pointer;
}
html body .detail-gallery .detail-thumb.is-active,
html body .quick-detail-layout .detail-thumb.is-active {
  border-color: #52cdb8 !important;
}
html body .detail-gallery .detail-thumb img,
html body .quick-detail-layout .detail-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 600px) {
  html body .detail-gallery .detail-photo-arrow { width: 38px !important; height: 38px !important; font-size: 27px !important; }
  html body .detail-gallery .detail-thumb { width: 62px !important; height: 62px !important; }
  html body .detail-gallery .detail-hero-image > img { max-height: 62vh !important; }
}