/**
 * Refonte fiche produit (maquettes Figma) — §1 Galerie.
 * Scope strict : #product uniquement.
 *
 * Desktop (>= 1000px) : zone image 600x406 (photo 380x406 centrée, flèches
 * rondes 30x30 aux bords), vignettes 65x65 en UNE rangée horizontale sous
 * l'image, défilement horizontal natif si elles débordent (plus de slider).
 * Mobile : la rangée de vignettes reste masquée (product.css), seule
 * l'image principale et ses flèches sont affichées, comme avant.
 *
 * Variante -> images : seules les vignettes de la combinaison sélectionnée
 * (.js-hidden-image) sont affichées ; celles des autres combinaisons
 * (.disabled, posé par product.js / image-block.tpl) sont masquées.
 *
 * Lot 1 du test A/B fiche-produit (docs/ab-testing.md) : chargée seulement
 * pour la variante « avec ». product.css garde les règles du carrousel
 * vertical slick de la variante « sans » ; celles qui touchent la rangée sans
 * slick sont neutralisées ici (sélecteurs #product plus spécifiques).
 */

#product #thumbs_list .thumb-item.disabled {
  display: none;
}

@media (min-width: 1000px) {
  /* Image principale */
  #product #image-block {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 406px;
    padding: 0;
  }

  #product #image-block #view_full_size {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #product #image-block #bigpic {
    width: 380px;
    max-width: 100%;
    height: 406px;
    object-fit: contain;
  }

  /* Flèches : cercles 30x30 #f2f2f2, chevron 7x14, aux bords gauche/droit */
  #product #image-block .slick-arrow.slick-prev,
  #product #image-block .slick-arrow.slick-next {
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
  }

  #product #image-block .slick-arrow.slick-prev {
    left: 0;
  }

  #product #image-block .slick-arrow.slick-next {
    right: 0;
  }

  #product #image-block .slick-arrow svg {
    width: 14px;
    height: 7px;
  }

  /* Rangée de vignettes sous l'image */
  #product #views_block {
    margin-top: 12px;
  }

  #product #thumbs_list {
    max-height: none;
    margin: 0;
    overflow: visible;
  }

  #product #thumbs_list_frame {
    position: relative; /* référentiel offsetLeft pour scrollThumbIntoView (product.js) */
    display: flex;
    gap: 12px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* masquée jusqu'à l'init slick dans product.css : pas de slick ici */
    opacity: 1;
    visibility: visible;
  }

  #product #thumbs_list .thumb-item {
    flex: 0 0 65px;
    float: none;
    margin-bottom: 0;
  }

  #product #thumbs_list .thumb-item img {
    width: 65px;
    height: 65px;
    object-fit: contain;
  }
}