/* detail.css — Mise en page VERTICALE pour la page détail uniquement */
.mlz-apple.mlz-detail{ --card-radius:24px; --fade-size:22px; }
.mlz-apple.mlz-detail .mlz-products{ width:min(92vw, 780px); margin:0 auto; padding:18px 0 120px; box-sizing:border-box; }
.mlz-apple.mlz-detail .mlz-wrap{ width:min(92vw, 740px); margin:0 auto; }
.mlz-apple.mlz-detail .row{ margin-left:0; margin-right:0; }
.mlz-apple.mlz-detail .col-12{ padding-left:0; padding-right:0; }
.mlz-apple.mlz-detail .col-12 + .col-12{ margin-top:18px; }

/* Carte verticale */
.mlz-apple.mlz-detail .product-card{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
  background:rgba(28,28,30,0.88) !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  border-radius:var(--card-radius) !important;
  backdrop-filter:saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.25) !important;
}

/* Image/Vidéo plein cadre en haut */
.mlz-apple.mlz-detail .product-image{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  border-radius:var(--card-radius) !important;
  overflow:hidden !important;
  background:transparent !important;
  aspect-ratio: 16/9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height: 260px !important;
  max-height: 65vh !important;
  margin-bottom: 8px !important;
}
.mlz-apple.mlz-detail .product-image img,
.mlz-apple.mlz-detail .product-image video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;   /* rempli tout le cadre */
  display:block !important;
  border-radius:16px !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.25)) !important;
  margin:0 auto !important;
}
.mlz-apple.mlz-detail .badge-seller{
  position:absolute; left:12px; bottom:10px;
  background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.28);
  padding:4px 10px; border-radius:999px; color:#fff; font-size:12px; backdrop-filter:blur(8px);
}

/* Contenu */
.mlz-apple.mlz-detail .product-content{ padding:8px 12px 14px 12px !important; display:flex; flex-direction:column; gap:8px; }
.mlz-apple.mlz-detail .product-title{ font-size:20px; color:#fff; font-weight:700; margin:0; }
.mlz-apple.mlz-detail .product-meta{ font-size:13px; color:#D1D1D6; line-height:1.35; margin:0; }

/* Badges prix (compact) */
.mlz-apple.mlz-detail .prices-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.mlz-apple.mlz-detail .badge-price{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 10px; font-size:11px; font-weight:600; line-height:1;
  border-radius:999px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
}
.mlz-apple.mlz-detail .badge-price.is-selected{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.38);
  box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Bouton panier */
.mlz-apple.mlz-detail .mlz-btn-add{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 18px; margin-top:10px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12); color:#fff; font-weight:600;
}
.mlz-apple.mlz-detail .mlz-btn-add:disabled{ opacity:.55; pointer-events:none; }

@media (max-width: 380px){
  .mlz-apple.mlz-detail .product-title{ font-size:18px; }
  .mlz-apple.mlz-detail .badge-price{ height:28px; padding:0 8px; font-size:10.5px; }
}
/* s'il reste un badge-seller dans l'image, on le masque sur la page détail */
.mlz-apple.mlz-detail .product-image .badge-seller{ display:none !important; }

/* === Badges price : animation sexy (pulse + halo) === */
.mlz-apple.mlz-detail{
  --acc: #34c759;                 /* vert accent */
  --accA: rgba(52,199,89,.55);
  --halo1: rgba(52,199,89,.42);   /* halo serré */
  --halo2: rgba(52,199,89,.18);   /* halo large */
}

.mlz-apple.mlz-detail .badge-price{
  position: relative;
  overflow: visible; /* pour laisser sortir la lueur */
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  will-change: transform, box-shadow;
}

.mlz-apple.mlz-detail .badge-price:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

/* halo animé via un pseudo-élément */
.mlz-apple.mlz-detail .badge-price::after{
  content:""; position:absolute; inset:-2px; border-radius:999px; pointer-events:none;
  box-shadow: 0 0 0 0 var(--halo1);
  opacity:0; transform: scale(.9);
}

.mlz-apple.mlz-detail .badge-price.is-selected{
  --acc:   #f5a524;                 /* couleur d'accent principale */
  --accA:  rgba(245,165,36,.66);    /* bord/liseré */
  --halo1: rgba(245,165,36,.50);    /* halo serré */
  --halo2: rgba(245,165,36,.22);    /* halo large */
  background: linear-gradient(180deg, rgba(245,165,36,.28), rgba(245,165,36,.14)) !important;
  border-color: var(--accA) !important;
  color:#fff; 
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 0 0 1px var(--accA) inset,
    0 0 20px 2px var(--halo2);
  animation: mlz-pulse 320ms ease-out;
}

.mlz-apple.mlz-detail .badge-price.is-selected::after{
  animation: mlz-ripple 700ms ease-out;
}

@keyframes mlz-pulse{
  0%   { transform: translateY(-1px) scale(.96); box-shadow: 0 0 0 rgba(0,0,0,0); }
  60%  { transform: translateY(-1px) scale(1.06); box-shadow: 0 16px 32px rgba(0,0,0,.34); }
  100% { transform: translateY(-1px) scale(1.03); }
}
@keyframes mlz-ripple{
  0%   { opacity:0;  transform: scale(.85); box-shadow: 0 0 0 0 var(--halo1), 0 0 0 0 var(--halo2); }
  30%  { opacity:1; }
  100% { opacity:0;  transform: scale(1.25); box-shadow: 0 0 0 8px transparent, 0 0 0 22px transparent; }
}

/* --- badges alignés (catégorie à gauche, farm à droite) --- */
.mlz-apple.mlz-detail .badges-row{
  display:flex; align-items:center; gap:8px;
}
.mlz-apple.mlz-detail .badge-farm{
  margin-left:auto;                      /* pousse à droite */
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; color:#e8f6ff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   FINAL OVERRIDES (stable)
   - Media centering (no stretch)
   - Robust bottom spacer above dock
   ========================= */

:root{
  --mlz-dock-h: 100px;   /* set to your real dock height */
  --mlz-dock-gap: 14px;  /* visual gap */
}

.mlz-apple.mlz-detail :is(.mlz-products,.mlz-wrap,.mlz-scroll,.tiles,.content,.page,.container){
  padding-bottom: calc(var(--mlz-dock-h) + var(--mlz-dock-gap) + 24px) !important;
}
.mlz-apple.mlz-detail :is(.mlz-products,.mlz-wrap,.mlz-scroll,.tiles,.content,.page,.container)::after{
  content:""; display:block;
  height: calc(var(--mlz-dock-h) + var(--mlz-dock-gap));
}

.mlz-apple.mlz-detail .col-12:last-child .product-card,
.mlz-apple.mlz-detail .product-card:last-child{
  margin-bottom: calc(var(--mlz-dock-h) + var(--mlz-dock-gap)) !important;
}

@supports(padding: max(0px)){
  .mlz-apple.mlz-detail :is(.mlz-products,.mlz-wrap,.mlz-scroll,.tiles,.content,.page,.container){
    padding-bottom: calc(var(--mlz-dock-h) + var(--mlz-dock-gap) + env(safe-area-inset-bottom, 0px) + 24px) !important;
  }
  .mlz-apple.mlz-detail :is(.mlz-products,.mlz-wrap,.mlz-scroll,.tiles,.content,.page,.container)::after{
    height: calc(var(--mlz-dock-h) + var(--mlz-dock-gap) + env(safe-area-inset-bottom, 0px));
  }
  .mlz-apple.mlz-detail .col-12:last-child .product-card,
  .mlz-apple.mlz-detail .product-card:last-child{
    margin-bottom: calc(var(--mlz-dock-h) + var(--mlz-dock-gap) + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.mlz-dock-spacer{
  height: calc(
    var(--mlz-dock-h) + var(--mlz-dock-gap) + env(safe-area-inset-bottom, 0px)
  );
  flex: 0 0 auto;
}

.mlz-apple.mlz-detail .mlz-scroll,
.mlz-apple.mlz-detail .mlz-products,
.mlz-apple.mlz-detail .mlz-wrap{
  padding-bottom: calc(
    var(--mlz-dock-h) + var(--mlz-dock-gap) + env(safe-area-inset-bottom, 0px)
  ) !important;
}
/* Lightbox Zoom */
.mlz-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mlz-lightbox.show {
  opacity: 1;
  pointer-events: auto;
}
.mlz-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform .25s ease;
  cursor: zoom-out;
}