/* detail.css — Mise en page VERTICALE pour la page détail uniquement */
.mlz-apple.mlz-detail{ --card-radius:24px; --fade-size:22px; }
/* padding-top : dégage la barre du haut (.topbar, fixed, ~56-72px selon les
   marges internes). Avant, la carte devait cette marge à un effet de bord :
   .mlz-scroll centrait verticalement dans un min-height calculé à partir de
   var(--mlz-vh)/var(--mlz-dock-real), et pour une fiche assez courte le
   centrage poussait la carte assez bas pour dégager la barre — accidentel,
   donc absent dès que la fiche était plus longue que ce min-height, ou que
   la mesure de viewport était fausse (Telegram Desktop). Ce centrage a été
   retiré (voir plus bas, .mlz-scroll) : il faut donc une marge explicite ici,
   qui ne dépend d'aucune mesure de viewport, pour que le haut arrondi de la
   carte ne soit plus caché sous la barre. */
.mlz-apple.mlz-detail .mlz-products{ width:min(92vw, 780px); margin:0 auto; padding:calc(var(--topbar-h, 56px) + 20px) 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;

  /* Le geste vertical appartient à la CARTE, pas au média.
     `overflow:hidden` ci-dessus fait de cette zone un conteneur de défilement
     sans course possible : le navigateur y dirigeait le geste, constatait
     qu'il n'y avait rien à faire défiler, et s'arrêtait là au lieu de
     transmettre à .product-card. Comme le média occupe près de 60 % de la
     carte visible sur un petit écran, le doigt tombait presque toujours
     dessus — d'où l'impression que la fiche ne défilait pas du tout, et un
     bouton « Ajouter au panier » inatteignable.
     pan-y rend le défilement vertical à l'ancêtre ; le pincement pour zoomer
     reste possible. Le pendant souris (molette) est traité en JS dans
     detail_product.php, touch-action ne couvrant pas ce cas. */
  touch-action: pan-y pinch-zoom;
}
.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:14px 18px; margin-top:10px; border-radius:16px; border:none;
  font-weight:700; font-size:15px; letter-spacing:.01em;
  color:#1a1305;
  background:linear-gradient(180deg, #ffce54 0%, #f5a524 100%);
  box-shadow: 0 8px 20px rgba(245,165,36,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.mlz-apple.mlz-detail .mlz-btn-add:active{ transform:translateY(1px); box-shadow: 0 4px 12px rgba(245,165,36,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.mlz-apple.mlz-detail .mlz-btn-add:disabled{
  opacity:.5; pointer-events:none; filter:grayscale(.4);
  box-shadow:none;
}

/* ---------------------------------------------------- barre d'achat ------
   Le bouton d'ajout vivait tout en bas du contenu défilant de la carte : il
   fallait avoir parcouru toute la fiche pour le voir. Sur un petit écran, où
   le média occupe près de 60 % de la hauteur visible, la moindre gêne au
   défilement le rendait inatteignable — et rien n'indiquait qu'il existait.

   Épinglé au bas de la carte (position:sticky), il est visible dès qu'on
   atteint le bas du contenu utile, sans jamais recouvrir les tarifs juste
   au-dessus — la réserve de padding ci-dessous s'en charge. Volontairement
   PAS en position:fixed hors de la carte : ça avait déjà été tenté, et sans
   pouvoir mesurer fiablement la hauteur du dock dans tous les contextes
   (notamment Telegram Desktop), le bouton flottait au mauvais endroit et
   recouvrait les prix au lieu de rester en dessous. */
.mlz-apple.mlz-detail .mlz-achat{
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 10px -12px -14px;     /* annule le padding de .product-content */
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  /* Fond opaque en bas, dégradé vers le haut : le contenu qui défile passe
     dessous sans que le bouton semble flotter sans lien avec la carte. */
  background: linear-gradient(180deg, rgba(28,28,30,0) 0%, rgba(28,28,30,.92) 38%, rgba(28,28,30,.98) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mlz-apple.mlz-detail .mlz-achat .mlz-btn-add{
  flex: 1 1 auto;               /* pleine largeur : cible facile au pouce */
  margin-top: 0;
}

/* La barre épinglée recouvre le bas du contenu : sans cette réserve, la
   dernière rangée de tarifs restait dissimulée dessous, impossible à lire
   comme à toucher, quel que soit le défilement. */
.mlz-apple.mlz-detail .product-content{
  padding-bottom: 78px !important;
}
.mlz-apple.mlz-detail .mlz-achat{
  margin-bottom: -78px;         /* la barre reste collée au bas de la carte */
}

@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));
}


/* L'espaceur de dock est un FRERE de .mlz-wrap dans .mlz-scroll, pas un enfant
   de la carte : le viser depuis .product-card ne l'atteignait pas, d'ou les
   114px de vide qui subsistaient entre la carte et le dock.
   Sur la fiche produit la carte est deja bornee au-dessus du dock : cette
   reservation ne sert plus a rien. Elle reste active ailleurs (listes qui
   defilent librement), d'ou le cadrage sur .mlz-detail. */

/* Carte courte sur grand ecran : sans reglage, elle se colle en haut et laisse
   tout le vide restant entre elle et le dock. On centre la zone dans l'espace
   reellement disponible pour repartir ce vide de part et d'autre.
   `safe` protege le cas inverse : quand le contenu deborde, le centrage ne doit
   pas pousser le haut de la carte hors d'atteinte du defilement. */
.mlz-apple.mlz-detail .mlz-scroll{
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

.mlz-apple.mlz-detail .mlz-dock-spacer{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

.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;
}


/* ============================================================================
   Carte produit — hauteur

   Historiquement, la page défilait librement et devait réserver la hauteur du
   dock DANS son contenu : d'où un padding-bottom de ~138px, un pseudo-élément
   ::after de ~114px et une marge basse sur la dernière carte. Additionnés, ils
   laissaient près de 250px de vide sous le bouton « Ajouter au panier ».

   La carte est désormais bornée au-dessus du dock : ces réservations n'ont plus
   d'objet et ne produisent que ce vide. On les annule, et la carte s'arrête
   12px après son dernier élément.
   ========================================================================== */
.mlz-apple.mlz-detail :is(.mlz-products,.mlz-wrap,.mlz-scroll,.tiles,.content,.page,.container){
  padding-bottom: 0 !important;
}
.mlz-apple.mlz-detail :is(.mlz-products,.mlz-wrap,.mlz-scroll,.tiles,.content,.page,.container)::after{
  content: none !important;
  display: none !important;
  height: 0 !important;
}
.mlz-apple.mlz-detail .col-12:last-child .product-card,
.mlz-apple.mlz-detail .product-card:last-child{
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------------
   Ancienne approche (abandonnée) : la carte était bornée à
   `calc(var(--mlz-vh) - var(--mlz-dock-real) - 28px)` avec overflow-y:auto,
   pour défiler DANS la carte plutôt que dans la page. Ça exigeait que
   --mlz-vh et --mlz-dock-real soient mesurés correctement par JS avant le
   premier rendu utile — or Telegram Desktop (fenêtre popup, pas un vrai
   mobile) donne des valeurs de viewport qui ne correspondent pas à la zone
   réellement visible. Quand la mesure était fausse, la carte se retrouvait
   plafonnée plus bas que le bouton, SANS le moindre défilement possible pour
   l'atteindre (contrairement à une page trop longue, où on peut toujours
   continuer à défiler) : le bouton devenait invisible et inatteignable, de
   façon indétectable en test (où la mesure tombait juste).
   La carte s'étend maintenant simplement à la hauteur de son contenu ; c'est
   le défilement natif de la page (toujours fiable, quel que soit le calcul
   de hauteur du dock) qui amène le bouton à l'écran. */
.mlz-apple.mlz-detail .product-card{
  box-sizing: border-box !important;
  height: auto !important;
  padding-bottom: 12px !important;
}