/* pdp.css — jacquemus. Le strict nécessaire pour que le VRAI gabarit de fiche produit
   (media/pdp/detail.css, 81 Ko, pris tel quel sur le site) tienne debout sans le JS du thème.

   On n'a pas récrit la mise en page : elle vient de detail.css. On rend seulement leurs deux
   carrousels aux endroits où le thème appelait Swiper, et on remet le panneau de tailles du mobile.

   POURQUOI PAS SWIPER. Le thème le chargeait depuis un bundle SFCC qu'on a retiré. Le réimplémenter
   (transforms, drag, vélocité, boucle) pour obtenir un défilement par pas serait beaucoup de code
   pour un comportement que le navigateur sait faire : `scroll-snap-type`. Le doigt, la molette, le
   clavier et la barre de défilement marchent tout seuls ; pdp.js ne fait plus que suivre les puces.

   Les classes restent celles du thème (`swiper`, `swiper-slide`, `swiper-pagination-bullet`) : leur
   CSS — position des puces, couleur active — s'applique donc sans qu'on la récrive. */

/* ── 1. galerie : un carrousel, une photo à la fois ───────────────────────────────────────────
   Le cadre (`overflow:hidden`, `aspect-ratio:3/4`) est celui de detail.css. Empilées dedans, six
   photos sur sept étaient invisibles ; empilées hors cadre, la page faisait 5 400 px. */
/* le cadre a une hauteur (aspect-ratio en desktop, `calc(100vh - 12.8rem)` en mobile) mais
   `__wrapper` n'en hérite pas : sans cette ligne, `height:100%` sur les diapos ne s'appuie sur rien
   et la photo retombe à sa hauteur naturelle, laissant une bande blanche sous elle. */
.productDetail__visuals__wrapper { height: 100%; }

.productDetail__visuals__images {
  display: flex;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.productDetail__visuals__images::-webkit-scrollbar { display: none; }

.productDetail__visuals__slide {
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
}
.productDetail__visuals__content {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mobile : on balaie horizontalement */
.productDetail__visuals__images {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

/* desktop : le Swiper du site est vertical (`swiper-vertical`), et ses puces aussi */
@media (min-width: 64em) {
  .productDetail__visuals__images {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
}

/* les puces ne sont cliquables que si elles reçoivent le pointeur : le listWrapper est en height:0 */
.productDetail__visuals__list { pointer-events: auto; cursor: pointer; }

/* ── 2. « Complete the look » : carrousel en mobile, grille de 4 en desktop ────────────────────
   Le sélecteur est celui de style.css, au caractère près : sans swiper le thème retombe sur une
   grille 2×2, alors que le site fait défiler. On garde sa grille en desktop, où les 4 tiennent. */
@media (max-width: 63.99em) {
  cross-sell[data-template=pdp-complete-the-look] > .swiper:not(.swiper-initialized) > .swiper-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  cross-sell[data-template=pdp-complete-the-look] > .swiper > .swiper-wrapper::-webkit-scrollbar { display: none; }
  cross-sell[data-template=pdp-complete-the-look] .swiper-slide {
    flex: 0 0 calc(50% - 0.3rem);
    scroll-snap-align: start;
  }
}

/* ── 3. panneau de tailles du mobile ──────────────────────────────────────────────────────────
   Il est déjà là (`position:fixed`, révélé par `-active`) ; c'est pdp.js qui l'ouvre depuis la
   barre d'achat collante. On lui donne le fond blanc et la respiration que le thème posait en JS. */
@media (max-width: 63.99em) {
  .productDetail__sizesWrapper {
    background: #fff;
    padding: 2rem 0 1rem;
  }
}