/* =============================================================
   YURLED — PDP v2 — product-gallery.css
   ─────────────────────────────────────────────────────────────
   Galerie = un slider fixe (une image à la fois) + dots toujours
   visibles en dessous. La colonne elle-même est "sticky" : elle
   reste figée pendant que la colonne d'achat défile à côté, puis
   reprend le scroll normal de la page une fois que la colonne
   d'achat a fini de défiler (comportement natif de
   position: sticky quand les deux colonnes partagent le même
   conteneur de grille — pas de scroll interne à la galerie, donc
   pas de max-height/overflow ici : c'est justement ce qui cassait
   l'effet demandé).

   La 1ère image du produit n'apparaît plus ici : elle est utilisée
   par le hero banner (#yrlp-hero-banner, product-layout.css). Le
   slider commence donc à la 2e image.

   Navigation : dots (#yrlp-gallery-dots), swipe tactile, clavier
   (flèches gauche/droite) — tout est géré par product-gallery.js.
   ───────────────────────────────────────────────────────────── */

.yrlp-gallery {
  position: static;
  align-self: start;
}

@media (min-width: 1025px) {
  .yrlp-gallery {
    position: sticky;
    top: var(--yrl-spacing-md);
  }
}

.yrlp-gallery__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--yrlp-radius-lg, 20px);
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #1a1a1a 0%, #0e0e0e 60%);
  isolation: isolate;
}

/* Fond adaptatif (à activer via data-bg sur #yrlp-gallery, branché
   plus tard sur un champ produit) */
.yrlp-gallery[data-bg="light"] .yrlp-gallery__viewport {
  background: radial-gradient(120% 120% at 50% 0%, #f4f4f4 0%, #e6e6e6 60%);
}

.yrlp-gallery[data-bg="blue"] .yrlp-gallery__viewport {
  background: radial-gradient(120% 120% at 50% 0%, #10203a 0%, #060d1a 60%);
}

/* ── Chaque slide occupe tout le viewport, empilées en absolu,
   une seule visible (.is-active) à la fois, fondu entre les deux ── */
.yrlp-gallery__item {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /*! padding: clamp(1.5rem, 4vw, 3rem); */
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}

.yrlp-gallery__item.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* ── Image : jamais recadrée violemment, s'adapte au ratio ── */
.yrlp-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

/* Image très verticale : on plafonne la largeur pour ne pas
   l'écraser visuellement au milieu d'un espace trop large */
.yrlp-gallery__img[data-orientation="portrait"] {
  width: auto;
  max-width: 70%;
  margin: 0 auto;
}

/* ── Dots — toujours visibles, desktop et mobile ── */
.yrlp-gallery__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  margin-top: 1.1rem;
}

.yrlp-gallery__dots:empty { display: none; }

.yrlp-gallery__dots .yrlp-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.yrlp-gallery__dots .yrlp-dot.is-active {
  background: #fff;
  width: 34px;
  border-radius: 10px;
}

/* ── Lightbox ── */
.custom-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding-top: 50px;
  background-color: rgba(8, 8, 8, 0.97);
  cursor: zoom-out;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 0 80px rgba(255, 255, 255, 0.06);
}

.close-lightbox {
  position: absolute;
  top: 24px;
  right: 32px;
  color: #f1f1f1;
  font-size: 36px;
  font-weight: 300;
  cursor: pointer;
}

/* ── Badge remise sur l'image active ── */
.yrlp-gallery .image-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  background: var(--yrl-color-accent);
  color: #fff;
  padding: 6px 14px;
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(95, 16, 205, 0.35);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .yrlp-gallery__viewport { aspect-ratio: 4 / 3.4; }
}