/* File: includes/areas/gallery/gallery.css
   ============================================================
   Custom Product Page – Gallery Styles
   Version: 1.0.0
   ============================================================
*/

/* Wrapper */
.cppg-gallery-area {
  width: 100%;
  padding: 0 70px;
  box-sizing: border-box;
  margin-bottom: 18px;
}
@media (max-width:720px) {
  .cppg-gallery-area {
    padding: 0 10px;
  }
}

/* Container */
.cppg-gallery-container {
  position: relative;
  width: 100%;
  opacity: 1;
  transition: opacity .2s;
}

/* Main wrap */
.cppg-gallery-main-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background-image: url(https://sleevemyseal.com/wp-content/uploads/Assets/Body/SfondoProdotto.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 50% 0;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main images */
.cppg-gallery-main-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .4s;
  border-radius: 8px;
}
.cppg-gallery-main-img.active {
  opacity: 1;
}

/* Thumbnails */
.cppg-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cppg-gallery-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  padding: 5%;
  background-image: url(https://sleevemyseal.com/wp-content/uploads/Assets/Body/SfondoProdotto.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: .7;
  transition: border-color .2s, opacity .2s, transform .2s;
}
.cppg-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cppg-gallery-thumb.active,
.cppg-gallery-thumb:hover {
  border-color: #1c75bc;
  opacity: 1;
  transform: scale(1.05);
}

/* Zoom‐lens */
body.cppg-zoom-active .cppg-gallery-main-wrap {
  cursor: none !important;
}
.cppg-gallery-main-wrap {
  cursor: zoom-in;
}
.cppg-zoom-lens {
  pointer-events: none !important;
  position: absolute;
  display: none;
  width: 300px !important;
  height: 300px !important;
  border: 5px solid #fff;
  border-radius: 15%;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
  background-repeat: no-repeat, no-repeat;
  z-index: 9999;
}

/* Overlay backdrop & content */
#cppg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#cppg-overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #1c75bc;
  cursor: pointer;
  z-index: 10000;
}
#cppg-overlay-content {
  position: relative;
  width: min(90vw,90vh);
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
}
.cppg-overlay-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.cppg-overlay-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ———————————————————————————————— */
/* Mantieni la galleria *sotto* il toggle */
.cppg-gallery-area,
.cppg-gallery-container,
.cppg-gallery-main-wrap,
.cppg-gallery-thumbs,
.cppg-gallery-thumb,
#cppg-overlay,
#cppg-overlay-content {
  z-index: 1 !important;
}