/* alz-gallery.css — un cadre de ratio CONSTANT pour la galerie de la fiche. */
/* ⚠ LE THÈME PART D'UNE GALERIE INVISIBLE : `opacity: 0` sur la piste ET sur la barre de vignettes, que
   son swiper devait révéler. Le repli du kit ne rallume que la piste (`.swiper-container:not(...)`) —
   une fois le swiper détruit, la barre de vignettes restait à 0 : présente, cliquable, et INVISIBLE.
   Un défaut qu'aucun contrôle de DOM ne voit (les vignettes sont là, à la bonne taille, chargées). */
.m-media-gallery .m-media-gallery__wrapper .swiper-container,
.m-media-gallery .m-media-gallery__wrapper .nav-swiper-container { opacity: 1; }
/* ⚠ UNE DIAPO = LA LARGEUR DU CADRE. C'est Swiper qui mesurait et posait la largeur des diapos ; une fois
   détruit, plus personne ne le fait : `width: 100%` se résout alors contre une piste en `max-content`
   (donc contre le contenu lui-même), et les diapos prennent la taille NATURELLE des images — 1782 px de
   haut en 390 px de large. On fixe donc la largeur ici. `!important` parce que le repli du kit
   (`[class*="m-product-media--"] .swiper-container:not(.swiper-initialized) .swiper-wrapper`) est plus
   spécifique que n'importe quel sélecteur de classes raisonnable. */
/* ⚠ `align-items: flex-start` : sans lui, les diapos d'une piste en flex s'ÉTIRENT toutes à la hauteur de
   la plus haute (747 px ici). Une image de 396 px se retrouverait alors avec 351 px de blanc en dessous —
   le défaut qu'on veut supprimer, simplement déplacé du haut vers le bas. Chaque diapo garde SA hauteur,
   et alz-gallery.js règle la hauteur de la fenêtre sur la diapo affichée (l'`autoHeight` de Swiper). */
.m-media-gallery .m-media-gallery__list.swiper-wrapper {
  display: flex !important; width: 100% !important; align-items: flex-start !important;
}
/* ⚠ `height: auto` — le thème pose `height: 100%` sur la diapo. Combiné à la hauteur que le JS fixe sur
   la fenêtre, ça boucle : la fenêtre vaut 510 px, la piste en hérite, la diapo aussi, et une image de
   680 px se retrouve BRIDÉE à 510 et rognée. La diapo doit garder la hauteur de SON image ; c'est la
   fenêtre qui s'y adapte, jamais l'inverse. */
/* ⚠ `padding: 0` — la diapo porte la classe `m:column`, qui lui met `padding: 0 calc(var(--column-gap)/2)`
   = 25 px de chaque côté. Sur le store, Swiper est ACTIF et neutralise ce padding ; nous l'avons retiré,
   donc la gouttière réapparaît : l'image ne fait plus que 510 px dans un cadre de 560, avec deux bandes
   de blanc sur les côtés. Mesuré : la source est à `padding: 0`. */
.m-media-gallery .m-media-gallery__list > .m-product-media--item {
  flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
  height: auto !important; align-self: flex-start !important; padding: 0 !important;
}
.m-media-gallery .m-media-gallery__list > .m-product-media--item .m-product-media { height: auto !important; }
.m-media-gallery .m-product-media--item .m-product-media { background: #fff; }
.m-media-gallery .m-product-media--item responsive-image.m-image {
  display: block; width: 100%; aspect-ratio: var(--aspect-ratio, 1); background: #fff;
}
.m-media-gallery .m-product-media--item responsive-image.m-image img {
  width: 100%; height: 100%; object-fit: cover;
}
/* La fenêtre suit la diapo affichée : hauteur posée par le JS, adoucie ici. `overflow-y: hidden` parce
   que la piste, elle, reste à la hauteur de la PLUS HAUTE image — sans ça, une barre de défilement
   verticale apparaîtrait dès qu'on regarde une image plus courte que la plus grande. */
.m-media-gallery .m-media-gallery__inner { transition: height .2s ease; overflow-y: hidden; }
/* LES VIGNETTES : 70 px de large — la taille que le thème leur donne lui-même (`min-width: 70px` sur leur
   piste, et une `--slide-height` calculée sur 70). Là encore, c'est le swiper qui les mesurait : sans lui,
   elles n'ont plus aucune largeur et prennent tout le cadre (560 px chacune). Leur écart vient du
   `padding: 5px` que le thème pose déjà sur `.m-product-media` : rien à inventer. */
.m-media-gallery .nav-swiper-container { overflow-x: auto; }
.m-media-gallery .nav-swiper-container .swiper-wrapper { display: flex; width: max-content; }
.m-media-gallery .nav-swiper-container .swiper-slide { flex: 0 0 70px; width: 70px; }
/* les vignettes : même cadre (elles portent déjà le ratio du premier visuel), et elles se cliquent */
.m-media-gallery .nav-swiper-container responsive-image.m-image {
  display: block; width: 100%; aspect-ratio: var(--aspect-ratio, 1); background: #fff;
}
.m-media-gallery .nav-swiper-container responsive-image.m-image img {
  width: 100%; height: 100%; object-fit: cover;   /* rognées au cadre commun, comme sur le store fini */
}
.m-media-gallery .nav-swiper-container .swiper-slide { cursor: pointer; }
/* repli quand la piste n'est pas défilable : une diapo à la fois (cf. alz-gallery.js, mode « stack ») */
.m-media-gallery.alz-gallery--stack .m-media-gallery__list > .m-product-media--item { display: none; }
.m-media-gallery.alz-gallery--stack .m-media-gallery__list > .m-product-media--item.alz-active { display: block; }
/* les flèches : le thème les dessine, mais rien ne signalait le bout de la galerie */
.m-media-gallery .swiper-button-control.swiper-button-disabled { opacity: .35; pointer-events: none; }