/* ==========================================================================
   cpp-product-gallery.css — Costume Privé Paris
   Page produit : enhancement galerie zoom + thumbs (session 04 — 2026-04-28)
   ========================================================================== */

/* Indicateur visuel zoom-in cursor sur image principale (desktop hover) */
@media (hover: hover) and (pointer: fine) {
  #product-images-large .swiper-slide {
    cursor: zoom-in;
  }
}

/* Image zoom overlay : transition GSAP gérée en JS, mais fallback CSS si JS désactivé */
.cpp-zoom-img {
  transition: opacity 0.35s ease, transform 0.25s ease;
}

/* Thumbnails : effet hover sobre */
.thumbnails .thumb-container {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.thumbnails .thumb-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 26, 46, 0.12);
}

.thumbnails .thumb {
  transition: opacity 0.25s ease, filter 0.25s ease;
  opacity: 0.7;
  filter: saturate(0.85);
}

.thumbnails .thumb:hover,
.thumbnails .swiper-slide-active .thumb,
.thumbnails .js-thumb-selected .thumb {
  opacity: 1;
  filter: saturate(1);
}

/* Active state thumbnail (border bottom gold) */
.thumbnails .swiper-slide-active .thumb-container,
.thumbnails .js-thumb-selected .thumb-container {
  box-shadow: inset 0 -3px 0 #c9a96e;
}

/* Bouton expand modal : positionnement + style luxe discret */
#product-images-large .expander {
  background: rgba(26, 26, 46, 0.7);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  transition: background 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}

#product-images-large .expander:hover {
  background: #1a1a2e;
  transform: scale(1.1);
}

/* prefers-reduced-motion : neutralise toutes transitions */
@media (prefers-reduced-motion: reduce) {
  .cpp-zoom-img,
  .thumbnails .thumb-container,
  .thumbnails .thumb,
  #product-images-large .expander {
    transition: none !important;
  }
  #product-images-large .swiper-slide {
    cursor: default;
  }
}

/* Mobile : pas de cursor zoom (touch), le tap ouvre la modal native */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  #product-images-large .swiper-slide {
    cursor: pointer;
  }
}