/* =============================================================
   Triple-D Tools — Aperçu multi-photos, Shop Standard Impreza 1840
   Ciblage volontairement limité aux grilles .grid-img.grid-cart.
   ============================================================= */

/* Le fond de la zone image reprend le beige clair Triple-D. */
.w-grid.grid-img.grid-cart .w-grid-item.product .wrap-product-img.usg_vwrapper_2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fbf9f8 !important;
}

.w-grid.grid-img.grid-cart .w-grid-item.product .wrap-product-img .post_image,
.w-grid.grid-img.grid-cart .w-grid-item.product .wrap-product-img .post_image img {
  background: transparent !important;
}

/* Sur les cartes activées : l'original et l'aperçu partagent le même fond. */
.tdph-blend-ready .w-grid.grid-img.grid-cart .w-grid-item.product .wrap-product-img .post_image img,
.tdph-blend-ready .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo img {
  mix-blend-mode: multiply !important;
}

/* Les styles Impreza peuvent appliquer un zoom à l'image principale. */
.w-grid.grid-img.grid-cart .w-grid-item.product.tdph-has-gallery .usg_post_image_1,
.w-grid.grid-img.grid-cart .w-grid-item.product.tdph-has-gallery:hover .usg_post_image_1,
.w-grid.grid-img.grid-cart .w-grid-item.product.tdph-has-gallery:focus-within .usg_post_image_1 {
  transform: none !important;
}

/* Photo alternative : superposée sans modifier la structure de la carte. */
.w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: #fbf9f8;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity var(--tdph-duration, 180ms) ease-out,
    transform var(--tdph-duration, 180ms) cubic-bezier(.2, .7, .2, 1);
}

.w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo.is-visible {
  opacity: 1;
}

/* Variation 1 : fondu seul (défaut). */
.tdph-effect-fade .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo {
  transform: none;
}

/* Variation 2 : léger zoom en entrant, jamais sur la fiche produit. */
.tdph-effect-fade-zoom .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo:not(.is-visible) {
  transform: scale(1.045);
}
.tdph-effect-fade-zoom .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo.is-visible {
  transform: scale(1);
}

/* Variation 3 : glissement latéral dans le sens de navigation. */
.tdph-effect-slide .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo:not(.is-visible) {
  transform: translate3d(5%, 0, 0);
}
.tdph-effect-slide .w-grid.grid-img.grid-cart .w-grid-item.product.tdph-backwards .tdph-photo:not(.is-visible) {
  transform: translate3d(-5%, 0, 0);
}
.tdph-effect-slide .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo.is-visible {
  transform: translate3d(0, 0, 0);
}

/* Variation 4 : passage immédiat, sans animation. */
.tdph-effect-none .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo {
  transition: none !important;
  transform: none !important;
}


.w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: clamp(12px, 5%, 22px);
  margin: 0 !important;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
}

/* Indicateurs discrets de la galerie. */
.w-grid.grid-img.grid-cart .w-grid-item.product .tdph-bars {
  position: absolute;
  z-index: 6;
  bottom: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.w-grid.grid-img.grid-cart .w-grid-item.product .tdph-bars > span {
  height: 2px;
  flex: 1;
  background: rgba(15, 17, 21, .22);
  border-radius: 99px;
  transition: background-color .2s ease;
}

.w-grid.grid-img.grid-cart .w-grid-item.product .tdph-bars > span.is-active {
  background: #0f1115;
}

/* Ordinateur : les indicateurs suivent uniquement le survol de la carte.
   Ils s'effacent au retrait de la souris, même après activation de la galerie. */
@media (hover: hover) and (pointer: fine) {
  .w-grid.grid-img.grid-cart .w-grid-item.product:hover .tdph-bars {
    opacity: 1;
  }
  /* Conserve un repère pour la navigation clavier, sans effet de hover persistant. */
  .w-grid.grid-img.grid-cart .w-grid-item.product:has(.w-grid-item-anchor:focus-visible) .tdph-bars {
    opacity: 1;
  }
}

/* Bouton panier au-dessus des aperçus ; position des pastilles gérée séparément. */
.w-grid.grid-img.grid-cart .w-grid-item.product .bt-cart-grid {
  z-index: 20 !important;
}

/* Sur mobile, le module reste optionnel depuis Outils > Triple-D. */
@media (hover: none), (pointer: coarse) {
  .tdph-mobile-enabled .w-grid.grid-img.grid-cart .w-grid-item.product .wrap-product-img {
    touch-action: pan-y;
  }

  .tdph-mobile-enabled .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo {
    display: block;
  }

  .tdph-mobile-enabled .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-bars {
    display: flex;
    opacity: 1;
  }

  /* Désactivé en BO : comportement mobile d'origine (une image). */
  .tdph-mobile-disabled .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo,
  .tdph-mobile-disabled .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-bars {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-photo,
  .w-grid.grid-img.grid-cart .w-grid-item.product .tdph-bars {
    transition: none !important;
  }
}