/* ============================================
   PAGE PRODUIT - OVERRIDE FOND GRIS IMAGES
   Supprime le fond gris sur toutes les images
   + Thumbnails horizontales avec navigation
   + Navigation par drag (sans flèches)
   ============================================ */

/* === SUPPRESSION FOND GRIS COMPLET === */

/* Tous les conteneurs de la galerie */
.moxie-product .product__gallery,
.moxie-product .product__images,
.moxie-product .js-images-container {
  background: #ffffff !important;
}

/* Carousel principal */
.moxie-product .product__carousel,
.moxie-product .js-product-carousel {
  background: #ffffff !important;
}

/* Carousel items */
.moxie-product .carousel-inner,
.moxie-product .carousel-item {
  background: #ffffff !important;
}

/* Thumbnails - tous les conteneurs */
.moxie-product .product__thumbnails,
.moxie-product .product__thumbnails-list {
  background: #ffffff !important;
}

.moxie-product .product__thumbnail,
.moxie-product .js-thumb-container {
  background: #ffffff !important;
}

/* Images - pas de blend mode */
.moxie-product .carousel-item img,
.moxie-product .product__thumbnail-image,
.moxie-product .js-thumb-container picture,
.moxie-product .js-thumb-container img {
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* === NAVIGATION CAROUSEL === */

/* Masquer les flèches de navigation */
.moxie-product .carousel-control-prev,
.moxie-product .carousel-control-next {
  display: none !important;
}

/* Masquer le bouton zoom */
.moxie-product .product__zoom {
  display: none !important;
}

/* Curseur drag sur le carousel pour indiquer qu'on peut glisser */
.moxie-product .carousel-inner {
  cursor: grab !important;
}

.moxie-product .carousel-inner:active {
  cursor: grabbing !important;
}

/* Style des indicators (dots de navigation) */
.moxie-product .carousel-indicators {
  margin-bottom: 12px !important;
  gap: 6px !important;
}

.moxie-product .carousel-indicators [data-bs-target] {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #d0d0d0 !important;
  border: none !important;
  opacity: 1 !important;
  transition: all .2s !important;
}

.moxie-product .carousel-indicators [data-bs-target].active {
  background-color: #0a0a0a !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* === THUMBNAILS HORIZONTALES AVEC NAVIGATION === */

/* Conteneur principal : flex row au lieu de column */
.moxie-product .js-images-container,
.moxie-product .product__images {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: auto !important;
}

/* Carousel en premier, pleine largeur */
.moxie-product .product__carousel,
.moxie-product .js-product-carousel {
  order: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 auto !important;
  position: relative !important;
}

/* Thumbnails en bas, horizontales */
.moxie-product .product__thumbnails {
  order: 2 !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.moxie-product .product__thumbnails-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #999 #f0f0f0 !important;
  padding-bottom: 4px !important;
}

/* Scrollbar personnalisée pour les thumbnails */
.moxie-product .product__thumbnails-list::-webkit-scrollbar {
  height: 6px !important;
}

.moxie-product .product__thumbnails-list::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
  border-radius: 3px !important;
}

.moxie-product .product__thumbnails-list::-webkit-scrollbar-thumb {
  background: #999 !important;
  border-radius: 3px !important;
}

.moxie-product .product__thumbnails-list::-webkit-scrollbar-thumb:hover {
  background: #666 !important;
}

/* Chaque thumbnail : taille fixe */
.moxie-product .product__thumbnail,
.moxie-product .js-thumb-container {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e5e5 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: border-color .2s, transform .2s !important;
}

.moxie-product .product__thumbnail:hover,
.moxie-product .js-thumb-container:hover {
  border-color: #999 !important;
  transform: translateY(-2px) !important;
}

.moxie-product .product__thumbnail.active,
.moxie-product .js-thumb-container.active {
  border-color: #0a0a0a !important;
  border-width: 2px !important;
  transform: translateY(-2px) !important;
}

/* Images dans les thumbnails */
.moxie-product .product__thumbnail-image,
.moxie-product .js-thumb-container picture,
.moxie-product .js-thumb-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 8px !important;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  .moxie-product .product__thumbnail,
  .moxie-product .js-thumb-container {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }
}