.btn-flotante {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    border-radius: 5px;
    letter-spacing: 2px;
    background-color: #ff3b66;
    padding: 18px 30px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    transition: all 300ms ease 0ms;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
    text-decoration: none;
}

.btn-flotante:hover {
    background-color: #222222;
    transform: translateY(-7px);
}

/* Variante izquierda y estilo WhatsApp */
.btn-flotante-left { left: 40px; right: auto; }
.whatsapp { background-color: #25D366; color: #ffffff; }
.whatsapp:hover { background-color: #1ebe57; }

.absolute { background-color: white; }

@media only screen and (max-width: 600px) {
    .btn-flotante { font-size: 14px; padding: 12px 20px; bottom: 20px; right: 20px; }
    .btn-flotante-left { left: 20px; right: auto; }
}


/* Botón flotante circular */
.btn-flotante-circle {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px; /* tamaño del ícono */
}

@media only screen and (max-width: 600px) {
    .btn-flotante-circle { width: 48px; height: 48px; font-size: 22px; }
}


/* Overrides específicos para Carrito */
.btn-flotante { background-color: #000000; }
#btnCarrito .badge,
#btnCarrito .badge.bg-success,
#carrito {
    background-color: #FFD600 !important; /* amarillo */
    color: #000000 !important;           /* texto negro */
}


/* Barra de instalación PWA (inferior) */
.install-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100;
}
.install-banner .install-text { flex: 1; color: #333; font-size: 14px; }
.install-banner .install-actions { display: inline-flex; gap: 8px; }
.install-banner .btn-install, .install-banner .btn-cancel {
    border: none;
    border-radius: 4px;
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
}
.install-banner .btn-install { background: #000000; color: #ffffff; }
.install-banner .btn-install:hover { background: #222222; }
.install-banner .btn-cancel { background: #607D8B; color: #ffffff; }
.install-banner .btn-cancel:hover { background: #546E7A; }

@media only screen and (max-width: 600px) {
    .install-banner { flex-wrap: wrap; padding: 10px 12px; }
    .install-banner .install-text { width: 100%; margin-bottom: 6px; }
}


/* Overrides de color específicos */
#btnCarrito { background-color: rgba(128, 128, 128, 0.75); }
#btnCarrito:hover { background-color: rgba(128, 128, 128, 0.85); }
#btnWhatsAppFloat { background-color: #25D366; color: #ffffff; }
#btnWhatsAppFloat:hover { background-color: #1ebe57; }

/* Sección de datos de envío (Carrito) */
.shipping-section { background: #f8f9fa; border: 1px solid #e8e9ea; border-radius: 6px; padding: 10px; }
.shipping-section h5 { color: #001f3f; font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.shipping-section .form-label { color: #001f3f; font-weight: 600; }
#shipping_error { margin-top: 4px; }
.shipping-section .mb-2 { margin-bottom: 4px; }


/* Promos Express styles */
.promo-card { position: relative; padding: 8px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.promo-card { transition: transform 180ms ease, box-shadow 180ms ease; will-change: transform; }
.promo-card:hover { transform: scale(1.02); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }

.promo-media { display:flex; justify-content:center; align-items:center; margin-bottom:8px; }
.promo-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; }
.promo-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.promo-price { font-size: 1rem; color:#dc3545; font-weight: 700; }
.promo-countdown { font-size: .9rem; color:#6c757d; }
.promo-actions .btn { min-width: 100px; }

/* Promos Express: neutralizar overlays heredados de .container-slick */
.promo-card { position: relative; }
.promo-media { position: relative; }
 /* Anular reglas globales de .container-slick para botones dentro de promo-card */
 .container-slick.promo-card button, .container-slick.promo-card a.btn {
   top: auto; left: auto;
 }
/* Posiciones en escritorio */
.promo-btn-add { position: absolute; left: 60px; bottom: 12px; z-index: 2; }
 .promo-btn-view { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
 /* Forzar esquina inferior izquierda dentro del carrusel */
 .container-slick.promo-card .promo-btn-view { position: absolute; left: 12px !important; bottom: 12px !important; right: auto !important; }

@media (max-width: 576px){
  .promo-btn-add, .promo-btn-view { bottom: 8px; }
  .promo-btn-add, .promo-btn-view { top: auto !important; }
  .promo-btn-view { left: auto !important; }
  /* Forzar esquina inferior izquierda en móvil */
  .container-slick.promo-card .promo-btn-view { left: 8px !important; right: auto !important; bottom: 8px !important; }
}
.promo-card .promo-actions .btn,
.promo-card .promo-actions button {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
}

/* Hover suave en tarjetas de producto */
.productos .card { transition: transform 180ms ease, box-shadow 180ms ease; box-shadow: 0 2px 8px rgba(0,0,0,0.08); will-change: transform; }
.productos .card:hover { transform: scale(1.02); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }

/* Ribbon */
.promo-ribbon { position:absolute; top:8px; left:-8px; background:#dc3545; color:#fff; padding:4px 10px; font-size:.85rem; font-weight:700; transform: rotate(-6deg); border-radius: 0 4px 4px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Responsive tweaks */
@media (max-width: 576px){
  .promo-actions { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
  .promo-actions .btn { width: auto; flex: 1 1 0; padding: 6px 10px; }
}

/* Skeleton (placeholder mientras carga carrusel) */
.promo-carousel.skeleton .container-slick { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; min-height: 280px; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }


/* Overlay: precio y contador dentro de la imagen */
.promo-info-overlay {
  position: absolute;
  right: 12px;
  top: 12px;
  background: rgba(128,128,128,0.50); /* gris 50% */
  backdrop-filter: blur(2px);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 3;
}
.promo-info-overlay .promo-price { color:#dc3545; font-weight:700; margin: 0; }
.promo-info-overlay .promo-countdown { color:#ffffff; font-weight:600; margin: 0; }

/* Overlay: botón Comprar centrado */
.promo-btn-buy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 3;
}

/* Botón Agregar en esquina inferior derecha (sin overlay contenedor) */
.promo-btn-cart { position: absolute; right: 12px; bottom: 12px; z-index: 2; }

/* Asegurar que la cinta quede al frente */
.promo-ribbon { z-index: 4; }

@media (max-width: 576px){
  .promo-info-overlay { right: 8px; top: 8px; padding: 4px 8px; gap: 6px; }
  /* Botones compactos en móvil dentro de la imagen */
  .promo-btn-add, .promo-btn-view { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
  .promo-btn-add { left: 8px; bottom: 8px; }
  .promo-btn-view { right: 8px; bottom: 8px; }
}

.store-photo { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; width: 100%; }
@media (min-width: 992px){
  .store-photo--banner { width: 100%; max-height: 260px; display: block; margin: 8px auto; }
}

.animate-in { opacity: 0; transform: translateY(12px); }
.animate-in.is-visible { opacity: 1; transform: none; transition: opacity 200ms ease-out, transform 200ms ease-out; }
@media (prefers-reduced-motion: reduce){
  .animate-in { opacity: 1; transform: none; }
  .animate-in.is-visible { transition: none; }
}
+  .promo-btn-add, .promo-btn-cart, .promo-btn-view {
+    width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 0; z-index: 3;
+  }
+  .promo-btn-add i, .promo-btn-cart i, .promo-btn-view i { font-size: 18px; line-height: 1; }
+  /* Esquinas para que no se encimen */
+  .promo-btn-add { left: 8px; bottom: 8px; }
+  .promo-btn-cart { right: 8px; bottom: 8px; }
+  /* Ojo centrado abajo */
+  .promo-btn-view { left: 50%; right: auto; transform: translateX(-50%); bottom: 8px; }
   .promo-btn-buy { bottom: 8px; font-size: .85rem; padding: 6px 10px; border-radius: 999px; max-width: calc(100% - 112px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   /* Contenedor de acciones bajo la imagen */
   .promo-actions { gap: 6px; }
   .promo-actions .btn { min-width: 0; padding: 6px 10px; flex: 1 1 auto; }
}

/* Visibilidad alta para el botón Leer más (icon-only) */
.promo-btn-view {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.promo-btn-view:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.40); transform: translateY(-1px); }
.promo-btn-view i { font-size: 16px; line-height: 1; }
@media (max-width: 576px){ .promo-btn-view { width: 36px; height: 36px; } }
.promo-card .promo-actions .btn,
.promo-card .promo-actions button {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
}

/* Colores de info de promociones (revertido a estado previo) */
.promo-info .promo-price, .promo-price { color: #FFC107; }
.promo-info .promo-countdown, .promo-countdown { color: #e6e6e6; }

/* Móvil: barra inferior solo con precio; fecha debajo y botón ojo sin texto */
@media (max-width: 576px){
  .promo-card { position: relative; }
  .promo-card .promo-media { position: relative; margin-bottom: 24px; }
  .promo-card .promo-info {
    position: absolute;
    left: 8px; right: 8px; transform: none; bottom: 8px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(2px);
    border-radius: 6px;
    padding: 8px 12px; /* aumentado ~25% */
    display: flex; justify-content: center; align-items: center; gap: 10px; /* centrar precio */
    z-index: 3; margin-bottom: 0; overflow: visible;
  }
  .promo-card .promo-info .promo-price { color: #dc3545 !important; font-weight: 700; text-align: center; width: 100%; }
  .promo-card .promo-info .promo-countdown { display: none !important; }
  .promo-card .promo-actions .btn.btn-outline-info { width: 36px; height: 36px; padding: 0; font-size: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background-color: rgba(14,165,233,0.95); color: #ffffff; border-color: rgba(14,165,233,1); }
  .promo-card .promo-actions .btn.btn-outline-info i { font-size: 18px; }
  .promo-card .promo-actions .promo-countdown-inline { display: inline-flex; align-items: center; color:#000; font-weight:600; background: rgba(255,255,255,0.95); padding:4px 8px; border-radius:6px; white-space: nowrap; }
}

/* Global mobile hardening */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

@media (max-width: 576px){
  /* Evitar desplazamiento horizontal por ribbon rotado/salido */
  .promo-ribbon { left: 8px; transform: none; }
  /* Ajuste de alto de imagen de promo para pantallas pequeñas */
  .promo-img { max-height: 200px; }
  /* Dots más pequeños para no tapar contenido */
  .wrapper .slick-dots li button:before { font-size: 14px; }
}
}
.skeleton { position: relative; background: #f4f4f4; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%); animation: skeleton-loading 1.2s infinite; }
@keyframes skeleton-loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.promo-img { width: 100%; height: auto; aspect-ratio: 16/9; display: block; }
.card-img-top { width: 100%; height: auto; aspect-ratio: 4/3; display: block; }