/* ==========================================================
   product-slider.css
   Slider produit Swiper : flèches rondes blanches + points blancs
   ========================================================== */

/* Conteneur */
.product-swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-swiper .swiper-slide {
  height: auto;
}

.product-swiper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Flèches : cercle blanc + chevron noir */
.product-swiper .swiper-button-prev,
.product-swiper .swiper-button-next {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  color: #000;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.product-swiper .swiper-button-prev:hover,
.product-swiper .swiper-button-next:hover {
  transform: scale(1.08);
}

/* Chevron (dessiné par Swiper avec ::after) */
.product-swiper .swiper-button-prev::after,
.product-swiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

/* Position des flèches */
.product-swiper .swiper-button-prev { left: 10px; }
.product-swiper .swiper-button-next { right: 10px; }

/* Flèche désactivée (première / dernière image) */
.product-swiper .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Petits points blancs en bas */
.product-swiper .swiper-pagination {
  bottom: 10px;
}

.product-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.6;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.product-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}

/* ----------------------------------------------------------
   OPTIONNEL : décommentez ce qui vous convient
   ---------------------------------------------------------- */

/* Supprimer les overlays / effets de survol du thème sur le slider */
.product-swiper .swiper-slide::before,
.product-swiper .swiper-slide::after,
.product-swiper .swiper-slide a::before,
.product-swiper .swiper-slide a::after,
.product-swiper .swiper-slide div::before,
.product-swiper .swiper-slide div::after {
  display: none !important;
}

.product-swiper img,
.product-swiper:hover img,
.product-swiper .swiper-slide:hover img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}