/* MyPlaque NFC — barre d'achat fixe mobile (fiche produit) */

.mp-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

body.mp-atc-visible .mp-sticky-atc {
  opacity: 1;
  pointer-events: auto;
}

.mp-sticky-atc-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.mp-sticky-atc-thumb {
  flex-shrink: 0;
  line-height: 0;
}

.mp-sticky-atc-thumb img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.mp-sticky-atc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mp-sticky-atc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-sticky-atc-price {
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-sticky-atc-btn {
  flex-shrink: 0;
  white-space: nowrap;
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
}

.mp-sticky-atc-btn:hover {
  background: var(--blue-dark);
}

.mp-sticky-atc-btn:active {
  transform: translateY(1px);
}

/* Espace de réserve pour ne jamais recouvrir la fin de la fiche produit
   (avis clients, produits similaires, début du pied de page). Toujours
   réservé sur mobile, que la barre soit visible ou non à cet instant : la
   hauteur réelle est posée par le JS dans --mp-atc-h. */
@media (max-width: 1449px) {
  body.single-product {
    padding-bottom: var(--mp-atc-h, 64px);
  }
}

/* La bulle WhatsApp (footer.php) remonte le temps que la barre est visible,
   avec la même transition, pour ne jamais se superposer au bouton. */
#mp-whatsapp-bubble {
  transition: transform .2s ease;
}

body.mp-atc-visible #mp-whatsapp-bubble {
  transform: translateY(calc(-1 * var(--mp-atc-h, 64px)));
}

/* Jamais affichée au-delà de 768px : desktop garde son bouton d'origine. */
@media (min-width: 1450px) {
  .mp-sticky-atc {
    display: none !important;
  }

  body.single-product {
    padding-bottom: 0 !important;
  }

  #mp-whatsapp-bubble {
    transform: none !important;
  }
}