/* ===== C7 Woo Gallery – Desktop ===== */
.single-product div.product .woocommerce-product-gallery {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: stretch;
  position: relative;
  float: none !important;
  width: 100% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
  flex: 0 0 80%;
  width: 80% !important;
  min-width: 0;
  max-width: 80%;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .single-product .et_pb_row .et_pb_column {
    margin-bottom: 10px !important;
  }
}

/* === FIX FIREFOX UNIQUEMENT === */
@supports (-moz-appearance: none) {
  .single-product div.product .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: row-reverse !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .single-product div.product .woocommerce-product-gallery .flex-viewport {
    width: 80% !important;
    max-width: 80% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .single-product .woocommerce-product-gallery__wrapper {
    display: block !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
  }

  .single-product
    .woocommerce-product-gallery__wrapper
    .woocommerce-product-gallery__image {
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 1 !important;
  }

  .single-product
    .woocommerce-product-gallery__wrapper
    .woocommerce-product-gallery__image.flex-active-slide {
    opacity: 1 !important;
    z-index: 2 !important;
  }

  .single-product
    .woocommerce-product-gallery__wrapper
    .woocommerce-product-gallery__image
    img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .single-product .woocommerce-product-gallery__wrapper[style*="transform"] {
    transform: none !important;
  }

  .single-product .flex-viewport {
    isolation: isolate;
  }

  .et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
    scrollbar-width: thin !important;
    scrollbar-gutter: stable !important;
    padding-right: 8px !important;
  }
}

/* Badge promo */
.single-product .woocommerce-product-gallery .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  margin: 0 !important;
}

.single-product .flex-control-thumbs .onsale {
  display: none !important;
}

/* Colonne vignettes Desktop */
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
  flex: 0 0 20%;
  width: 20% !important;
  max-width: 20%;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-right: 5px;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
  width: 100%;
  float: none;
  margin-bottom: 10px;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
  border-radius: 4px;
  width: 100%;
  height: auto;
}

.woocommerce div.product div.images .flex-control-thumbs {
  margin-top: 0 !important;
  margin-right: 4px;
}

/* Masquer loupe */
.woocommerce-product-gallery__trigger,
.woocommerce-product-gallery--with-images
  .woocommerce-product-gallery__image--placeholder {
  display: none !important;
}

/* Images et vidéos */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Scrollbar vignettes - Style correspondant aux dots */
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
}

.et_pb_wc_images
  div.images
  ol.flex-control-thumbs.flex-control-nav::-webkit-scrollbar {
  width: 8px;
}

.et_pb_wc_images
  div.images
  ol.flex-control-thumbs.flex-control-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.27);
  border-radius: 4px;
}

.et_pb_wc_images
  div.images
  ol.flex-control-thumbs.flex-control-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.et_pb_wc_images
  div.images
  ol.flex-control-thumbs.flex-control-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Boutons flèches supprimés pour un look plus épuré */
.et_pb_wc_images
  div.images
  ol.flex-control-thumbs.flex-control-nav::-webkit-scrollbar-button {
  display: none;
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  /* Fix Firefox mobile */
  @supports (-moz-appearance: none) {
    .single-product div.product .woocommerce-product-gallery .flex-viewport {
      flex: 1 1 auto !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: auto !important;
    }

    .single-product .woocommerce-product-gallery__wrapper {
      position: relative !important;
    }
  }

  .single-product div.product .woocommerce-product-gallery {
    flex-direction: column;
    position: relative;
  }

  .single-product div.product .woocommerce-product-gallery .flex-viewport {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .single-product .woocommerce-product-gallery .onsale {
    top: 12px;
    left: 12px;
  }

  .et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
    display: none !important;
  }

  /* Une seule image visible */
  .single-product
    .woocommerce-product-gallery__wrapper
    .woocommerce-product-gallery__image {
    display: none;
  }

  .single-product
    .woocommerce-product-gallery__wrapper
    .woocommerce-product-gallery__image.is-active {
    display: block;
  }

  /* ===== DOTS - SOUS LA GALERIE ===== */
  .wcg-progress {
    position: relative;
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.27);
    border-radius: 20px;
    backdrop-filter: blur(4px);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Fix Firefox - forcer les dots sous la galerie */
  @supports (-moz-appearance: none) {
    .wcg-progress {
      display: flex !important;
      position: relative !important;
      width: fit-content !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  .wcg-progress .wcg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    pointer-events: none;
  }

  .wcg-progress .wcg-dot.is-active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  }

  /* Masquer la barre compacte */
  .wcg-compact {
    display: none !important;
  }
}

/* === FIX RESIZE DESKTOP/MOBILE === */
@media (min-width: 768px) {
  /* Mode desktop : empiler les images */
  .single-product .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
  }

  .single-product .woocommerce-product-gallery__image {
    display: block !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
  }

  .single-product .woocommerce-product-gallery__image:not(.flex-active-slide) {
    display: none !important;
  }

  .single-product .woocommerce-product-gallery__image.flex-active-slide {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 767px) {
  /* Mode mobile : permettre le carrousel horizontal */
  .single-product .woocommerce-product-gallery__wrapper {
    /* Laisser FlexSlider gérer le width et transform */
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
  }

  .single-product .woocommerce-product-gallery__image {
    /* Toutes les images sont visibles en ligne */
    display: block !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Annuler le display:none en mobile */
  .single-product .woocommerce-product-gallery__image:not(.flex-active-slide) {
    display: block !important;
  }
}

/* =========================================================
   Galerie Woo, ratio carré 1:1, rognage cover
   ========================================================= */

/* Le conteneur principal de la galerie */
.single-product .woocommerce-product-gallery {
  width: 100%;
}

/* Chaque slide (image ou vidéo) devient un carré */
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__wrapper .c7-video-slide {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

/* Le lien et les wrappers internes prennent tout l’espace */
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a,
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a > * {
  display: block;
  width: 100%;
  height: 100%;
}

/* Images, rognage */
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vidéo, rognage */
.single-product .woocommerce-product-gallery__wrapper .c7-video-slide .c7-product-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optionnel, si ton thème force parfois contain sur des médias */
.single-product .woocommerce-product-gallery__wrapper img,
.single-product .woocommerce-product-gallery__wrapper video {
  max-width: 100%;
}

/* =========================================================
   Vignette vidéo, icône play seulement si vidéo
   ========================================================= */

.single-product.c7-has-video .flex-control-thumbs li:first-child {
  position: relative;
}

.single-product.c7-has-video .flex-control-thumbs li:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.single-product.c7-has-video .flex-control-thumbs li:first-child::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 10px 8px 12px;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255, 255, 255, 0.27);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  color: #fff;
  pointer-events: none;
  z-index: 2;
}

/* Badge promo masqué par défaut sur produits variables */
.single-product.product-type-variable .woocommerce-product-gallery .onsale {
  display: none;
}