/**
 * Vidéo de miniature — superposée à l'image, jamais à la place.
 *
 * L'image du produit reste dans le flux et garde la main sur les dimensions de
 * la vignette : la vidéo se contente de la recouvrir, il n'y a donc aucun saut
 * de mise en page (CLS) quand elle apparaît, et l'image reste visible tant que
 * la vidéo n'est pas prête — ou si elle ne l'est jamais.
 */
.product-miniature__image {
  position: relative;
}

.kwkproductvideo-miniature {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* `cover` : la vidéo remplit toute la vignette, quitte à être rognée. En
     `contain`, une vidéo au format différent de la photo laissait apparaître
     l'image en dessous sur les bords. */
  object-fit: cover;
  /* Reprend l'arrondi de la vignette du thème ; surchargeable par projet. */
  border-radius: var(--kwk-product-video-radius, 0.4375rem 0.4375rem 0 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  /* Le clic doit continuer d'atteindre le lien produit qui est dessous. */
  pointer-events: none;
  background: transparent;
}

.kwkproductvideo-miniature.is-playing {
  opacity: 1;
}

/* -------------------------------------------------------------------------
 * Galerie fiche produit
 *
 * Vignette : image du produit + overlay play / « Vidéo » (maquette Figma).
 * Slide principal et modal : même superposition que les listings, l'image
 * garde les dimensions jusqu'à ce que la vidéo soit prête.
 * ------------------------------------------------------------------------- */
.product-gallery__thumb-slide--video .product-gallery__thumb-btn {
  position: relative;
  overflow: hidden;
  aspect-ratio: 105 / 121;
  border-width: 2px;
  border-radius: var(--border-radius, 15px);
}

[data-kwk-component="ProductGallery"] .product-gallery__thumb-slide--video .product-gallery__thumb-btn picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-kwk-component="ProductGallery"] .product-gallery__thumb-slide--video .product-gallery__thumb-btn picture {
  display: block;
  width: 100%;
  height: 100%;
}

.product-gallery__thumb-slide--video.product-gallery__thumb-slide--active .product-gallery__thumb-btn,
[data-kwk-component="ProductGallery"] .product-gallery__thumb-slide--video.product-gallery__thumb-slide--active .product-gallery__thumb-btn {
  border-color: var(--bs-primary);
}

.kwkproductvideo-gallery-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.kwkproductvideo-gallery-thumb__icon,
[data-kwk-component="ProductGallery"] .product-gallery__thumb-slide--video .product-gallery__thumb-btn .kwkproductvideo-gallery-thumb__icon {
  display: block;
  width: 11px;
  height: 20px;
  max-width: 11px;
  max-height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.kwkproductvideo-gallery-thumb__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.product-gallery__main-slide--video .product-gallery__main-image-trigger,
.product-gallery__main-single--video .product-gallery__main-image-trigger,
.kwkproductvideo-modal-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius, 15px);
}

.kwkproductvideo-gallery {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius, 15px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  background: transparent;
}

.kwkproductvideo-gallery.is-playing {
  opacity: 1;
}

.product-gallery__main-slide--video .kwkproductvideo-gallery-thumb,
.product-gallery__main-single--video .kwkproductvideo-gallery-thumb,
.kwkproductvideo-modal-item .kwkproductvideo-gallery-thumb {
  z-index: 2;
}

.product-gallery__main-slide--video:has(.kwkproductvideo-gallery.is-playing) .kwkproductvideo-gallery-thumb,
.product-gallery__main-single--video:has(.kwkproductvideo-gallery.is-playing) .kwkproductvideo-gallery-thumb,
.kwkproductvideo-modal-item:has(.kwkproductvideo-gallery.is-playing) .kwkproductvideo-gallery-thumb {
  opacity: 0;
}

.kwkproductvideo-modal-item .kwkproductvideo-gallery {
  /* Dans la modal l'image définit toujours la hauteur : la vidéo la recouvre. */
  z-index: 1;
}

/* Les flèches restent au-dessus de la vidéo (hors de .carousel-inner, z-index). */
#product-modal .carousel-control-prev,
#product-modal .carousel-control-next {
  z-index: 5;
  pointer-events: auto;
}

#product-modal .carousel-control-prev-icon,
#product-modal .carousel-control-next-icon {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}

/* Accessibilité : pas d'animation imposée à qui n'en veut pas. Le JS ne charge
   alors aucune vidéo, cette règle n'est qu'une ceinture de sécurité. */
@media (prefers-reduced-motion: reduce) {
  .kwkproductvideo-miniature,
  .kwkproductvideo-gallery {
    display: none;
  }
}