/* MG Lightbox v2 — popup plein écran des photos produit (EB PROD) */

/* ---------- Fiche produit ---------- */

/* Mobile : le zoom intégré du thème est masqué (la popup le remplace) */
.mg-lb2-touch .product-cover .zoomImg,
.mg-lb2-active .zoomImg {
  display: none !important;
}

/* Petite loupe sur la grande photo pour indiquer qu'on peut l'agrandir (écrans tactiles) */
@media (hover: none) {
  .product-cover::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 18px no-repeat;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    pointer-events: none;
    z-index: 2;
  }
}

/* ---------- Popup ---------- */

html.mg-lb2-lock,
html.mg-lb2-lock body {
  overflow: hidden !important;
}

.mg-lb2-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2147483000;
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.mg-lb2-overlay.mg-lb2-visible {
  opacity: 1;
}

.mg-lb2-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
}

.mg-lb2-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.mg-lb2-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.mg-lb2-overlay .mg-lb2-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: opacity .2s ease;
  -webkit-user-drag: none;
  user-select: none;
}

/* Chargement */
.mg-lb2-slide.mg-lb2-loading img {
  opacity: 0;
}

.mg-lb2-slide.mg-lb2-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mg-lb2-spin .8s linear infinite;
}

@keyframes mg-lb2-spin {
  to { transform: rotate(360deg); }
}

/* Boutons (remise à zéro des styles du thème) */
.mg-lb2-overlay .mg-lb2-btn {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}

.mg-lb2-overlay .mg-lb2-btn:hover {
  background: rgba(0, 0, 0, .8);
}

.mg-lb2-overlay .mg-lb2-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mg-lb2-overlay .mg-lb2-close {
  top: 12px;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
}

.mg-lb2-overlay .mg-lb2-close::before,
.mg-lb2-overlay .mg-lb2-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.mg-lb2-overlay .mg-lb2-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mg-lb2-overlay .mg-lb2-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mg-lb2-overlay .mg-lb2-nav {
  top: 50%;
  margin-top: -22px;
}

.mg-lb2-overlay .mg-lb2-prev {
  left: 10px;
}

.mg-lb2-overlay .mg-lb2-next {
  right: 10px;
}

.mg-lb2-overlay .mg-lb2-nav::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.mg-lb2-overlay .mg-lb2-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.mg-lb2-overlay .mg-lb2-next::after {
  transform: translate(-70%, -50%) rotate(45deg);
}

.mg-lb2-counter {
  position: absolute;
  z-index: 2;
  top: 12px;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font: 600 14px/44px Arial, Helvetica, sans-serif;
  letter-spacing: .5px;
}

.mg-lb2-counter:empty,
.mg-lb2-single .mg-lb2-nav,
.mg-lb2-zoomed .mg-lb2-nav {
  display: none;
}

/* Grand écran : marge autour de la photo pour les flèches */
@media (min-width: 768px) {
  .mg-lb2-slide {
    padding: 64px 80px;
  }

  .mg-lb2-overlay .mg-lb2-prev {
    left: 20px;
  }

  .mg-lb2-overlay .mg-lb2-next {
    right: 20px;
  }

  .mg-lb2-overlay .mg-lb2-close {
    top: 16px;
    right: 20px;
  }

  .mg-lb2-counter {
    top: 16px;
    left: 20px;
  }
}