/* ============================================================
   andessa-tienda.css  —  Diseño completo tienda ANDESSA
   Versión: 2.0.0
   Filosofía: moderno, dinámico, identidad azul ANDESSA.
   Todo el PHP se preserva; solo cambia la capa visual.
============================================================ */

/* ─── IMPORTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:wght@600;700&display=swap');

/* ══════════════════════════════════════════════════════
   1. TOKENS GLOBALES
══════════════════════════════════════════════════════ */
:root {
  --an-900: #071828;
  --an-800: #0d3b6e;
  --an-700: #1b6ca8;
  --an-600: #2a7fc1;
  --an-400: #4fa8dc;
  --an-200: #b8ddf5;
  --an-100: #dbeafe;
  --an-50:  #eff6ff;

  --neu-900: #0f172a;
  --neu-700: #334155;
  --neu-500: #64748b;
  --neu-300: #cbd5e1;
  --neu-100: #f1f5f9;
  --neu-50:  #f8fafc;
  --white:   #ffffff;

  --success: #22c55e;
  --danger:  #ef4444;
  --warn:    #f59e0b;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 8px rgba(13,59,110,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 6px 24px rgba(13,59,110,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 48px rgba(13,59,110,.14), 0 4px 16px rgba(0,0,0,.06);
  --shadow-xl: 0 28px 64px rgba(13,59,110,.18), 0 8px 24px rgba(0,0,0,.08);

  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl:28px;

  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════
   2. BASE
══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #f0f4f8;
  color: var(--neu-900);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--neu-100); }
::-webkit-scrollbar-thumb { background: var(--an-400); border-radius: 3px; }

/* ══════════════════════════════════════════════════════
   3. TOPBAR
══════════════════════════════════════════════════════ */
.header-topbar2 {
  background: linear-gradient(90deg, var(--an-900) 0%, #0a2240 50%, var(--an-800) 100%) !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(79,168,220,.2);
  position: relative;
  overflow: hidden;
}
.header-topbar2::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(79,168,220,0.06)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.header-topbar2 .header-top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Topbar — textos en blanco */
.header-topbar2 .welcome-text,
.header-topbar2 h3,
.header-topbar2 p,
.header-topbar2 a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  letter-spacing: .05em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
/* span hereda blanco pero no toca los <i> */
.header-topbar2 span {
  color: #ffffff !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
/* Íconos: azul claro con tamaño explícito (gana a span) */
.header-topbar2 i,
.header-topbar2 .fal,
.header-topbar2 .fas,
.header-topbar2 .far,
.header-topbar2 .fab {
  display: inline-block !important;
  font-size: .85rem !important;
  color: var(--an-400) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════
   4. NAVBAR
══════════════════════════════════════════════════════ */
.navbar-sticky2 {
  background: var(--white) !important;
  box-shadow: 0 2px 20px rgba(13,59,110,.09) !important;
  border-bottom: 1px solid var(--an-100) !important;
  padding: 0 !important;
}
/* Cuando el navbar queda sticky, compensa su altura para no tapar contenido */
.navbar-sticky2.sticky-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 999 !important;
  animation: navSlideDown .3s ease !important;
}
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Placeholder que ocupa el espacio del navbar fijo para que el contenido no salte */
body.has-sticky-nav #rtsHeader {
  padding-top: 66px !important;
}
.navbar-part2 {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 10px 0 !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Logo ocupa sólo su tamaño natural, el carrito va al extremo derecho */
.navbar-part2 .navbar-inner {
  flex: 0 0 auto !important;   /* no crece ni se comprime */
  margin-right: auto !important; /* empuja todo lo demás a la derecha */
}

/* El bloque de carrito siempre al extremo derecho */
.navbar-part2 .header-action-items1 {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
.navbar-sticky2 .logo img {
  max-height: 46px;
  width: auto;
}
/* Selector sucursal */
.navbar-sticky2 label {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--neu-500) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.navbar-sticky2 #idSucursalMenu {
  height: 40px !important;
  border: 1.5px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 14px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--neu-700) !important;
  background: var(--an-50) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  min-width: 190px !important;
}
.navbar-sticky2 #idSucursalMenu:focus {
  border-color: var(--an-700) !important;
  box-shadow: 0 0 0 3px rgba(27,108,168,.16) !important;
}
/* Botón carrito total */
.header-action-items1 .account {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--an-800) !important;
  background: var(--an-50) !important;
  border: 1.5px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 16px !important;
  white-space: nowrap !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
}
.header-action-items1 .account:hover {
  background: var(--an-100) !important;
  border-color: var(--an-700) !important;
}
/* Dot contador carrito */
.header-action-items1 .icon-dot {
  background: var(--an-700) !important;
  color: var(--white) !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ══════════════════════════════════════════════════════
   5. CARRITO LATERAL v2
══════════════════════════════════════════════════════ */

/* ── Contenedor principal ── */
.cart-bar {
  width: 400px !important;
  background: var(--white) !important;
  border-left: 1px solid var(--an-100) !important;
  box-shadow: -20px 0 60px rgba(7,24,40,.18), -4px 0 16px rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* ── HEADER ── */
.cart-header {
  background: linear-gradient(135deg, var(--an-900) 0%, #0f3460 100%) !important;
  padding: 20px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.cart-header::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(79,168,220,0.07)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.cart-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  z-index: 1 !important;
}
.cart-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(79,168,220,.15);
  border: 1px solid rgba(79,168,220,.25);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.cart-header-icon i {
  font-size: 1.1rem;
  color: var(--an-400) !important;
}
.cart-header-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  background: #e63946;
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--an-900);
  padding: 0 4px;
}
.cart-header .cart-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--white) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.cart-subheading {
  font-size: .72rem !important;
  color: rgba(255,255,255,.5) !important;
  font-weight: 400 !important;
  display: block !important;
  margin-top: 2px !important;
}
.cart-header .close-cart {
  width: 36px; height: 36px;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.7) !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
}
.cart-header .close-cart:hover {
  background: rgba(255,255,255,.18) !important;
  color: var(--white) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.cart-header .close-cart i { font-size: .85rem !important; }

/* ── BARRA PROGRESO ENVÍO ── */
.cart-shipping-bar {
  background: var(--an-50) !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--an-100) !important;
  flex-shrink: 0 !important;
}
.csb-text {
  font-size: .74rem !important;
  color: var(--neu-500) !important;
  font-weight: 500 !important;
  margin-bottom: 7px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.csb-text i { color: var(--an-700) !important; font-size: .78rem !important; }
.csb-text strong { color: var(--an-800) !important; font-weight: 700 !important; }
.csb-text.csb-free { color: #16a34a !important; font-weight: 700 !important; }
.csb-text.csb-free i { color: #16a34a !important; }
.csb-track {
  height: 4px;
  background: var(--an-200);
  border-radius: 2px;
  overflow: hidden;
}
.csb-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--an-700), var(--an-400));
  border-radius: 2px;
  transition: width .6s ease;
  min-width: 4px;
}

/* ── LISTA DE PRODUCTOS ── */
.cart-product-list {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}
.cart-product-list::-webkit-scrollbar { width: 3px; }
.cart-product-list::-webkit-scrollbar-track { background: transparent; }
.cart-product-list::-webkit-scrollbar-thumb { background: var(--an-200); border-radius: 2px; }

/* Estado vacío */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}
.cart-empty-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--an-50);
  border: 1.5px solid var(--an-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.cart-empty-icon i { font-size: 1.6rem; color: var(--an-300, #7ec7ee); }
.cart-empty-title {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--neu-700) !important;
  margin-bottom: 6px !important;
}
.cart-empty-sub {
  font-size: .78rem !important;
  color: var(--neu-500) !important;
  line-height: 1.5 !important;
}

/* ── ITEM DE CARRITO ── */
.cart-item {
  display: flex !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--neu-100) !important;
  transition: background .18s !important;
  position: relative !important;
}
.cart-item:hover { background: var(--an-50) !important; }
.cart-item--alerta { background: #fff5f5 !important; }
.cart-item--alerta:hover { background: #fee2e2 !important; }

/* Imagen del item */
.cart-item-img {
  width: 72px;
  height: 72px;
  border-radius: var(--r) !important;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--an-50), #cde8f6);
  border: 1px solid var(--an-100);
  position: relative;
}
.cart-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cart-item-sin-stock {
  position: absolute; inset: 0;
  background: rgba(239,68,68,.72);
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}

/* Info del item */
.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
.cart-item-cat {
  font-size: .6rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--an-700) !important;
  background: var(--an-50) !important;
  border: 1px solid var(--an-100) !important;
  padding: 2px 7px !important;
  border-radius: 50px !important;
}
.cart-item-del {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--neu-300);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .16s;
  flex-shrink: 0;
  font-size: .75rem;
  padding: 0;
}
.cart-item-del:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--danger);
}
.cart-item-name {
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: var(--neu-900) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}
.cart-item-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

/* Control de cantidad */
.cart-qty {
  display: flex !important;
  align-items: center !important;
  background: var(--neu-50) !important;
  border: 1px solid var(--neu-200, #e2e8f0) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.cart-qty-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: none !important;
  color: var(--neu-500) !important;
  cursor: pointer !important;
  transition: all .16s !important;
  font-size: .68rem !important;
  padding: 0 !important;
}
.cart-qty-btn:hover {
  background: var(--an-100) !important;
  color: var(--an-800) !important;
}
.cart-qty-input {
  width: 30px !important;
  height: 28px !important;
  border: none !important;
  border-left: 1px solid var(--neu-200, #e2e8f0) !important;
  border-right: 1px solid var(--neu-200, #e2e8f0) !important;
  background: var(--white) !important;
  text-align: center !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  color: var(--neu-900) !important;
  outline: none !important;
  padding: 0 !important;
  cursor: default !important;
}

/* Precios del item */
.cart-item-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1px !important;
}
.cart-item-unit {
  font-size: .65rem !important;
  color: var(--neu-400, #94a3b8) !important;
  font-weight: 400 !important;
}
.cart-item-subtotal {
  font-size: .88rem !important;
  font-weight: 800 !important;
  color: var(--an-800) !important;
  letter-spacing: -.3px !important;
}

/* Alerta de stock */
.cart-item-stock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  font-weight: 500;
  color: var(--neu-400, #94a3b8);
  margin-top: 2px;
}
.cart-item-stock i { font-size: .65rem; }
.cart-item-stock--warn { color: var(--danger) !important; font-weight: 700 !important; }
.cart-item-stock--warn i { color: var(--warn) !important; }

/* ── FOOTER DEL CARRITO ── */
.cart-bottom-area {
  background: var(--white) !important;
  border-top: 1px solid var(--neu-100) !important;
  padding: 18px 18px 20px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Resumen de costos */
.cart-summary {
  background: var(--an-50);
  border: 1px solid var(--an-100);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--neu-500);
  font-weight: 500;
}
.cart-summary-total {
  padding-top: 7px;
  border-top: 1px solid var(--an-200);
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--neu-900) !important;
}
.cart-summary-total .carritoText1 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--an-800) !important;
  letter-spacing: -.3px !important;
}

/* Botón pago */
.cart-bottom-area .checkout-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  background: linear-gradient(135deg, var(--an-700) 0%, var(--an-800) 100%) !important;
  color: var(--white) !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  padding: 13px 18px !important;
  border-radius: var(--r) !important;
  letter-spacing: .02em !important;
  transition: opacity var(--transition), transform .15s !important;
  box-shadow: 0 6px 20px rgba(13,59,110,.3) !important;
  text-decoration: none !important;
  gap: 8px !important;
}
.cart-bottom-area .checkout-btn i { font-size: .82rem !important; }
.cart-bottom-area .checkout-btn .checkout-total {
  font-size: .8rem !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,.15) !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
.cart-bottom-area .checkout-btn:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
  color: var(--white) !important;
  text-decoration: none !important;
}

/* Botón continuar comprando */
.cart-bottom-area .view-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  background: var(--white) !important;
  color: var(--neu-600, #475569) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  padding: 10px 0 !important;
  border-radius: var(--r) !important;
  border: 1.5px solid var(--neu-200, #e2e8f0) !important;
  transition: all var(--transition) !important;
  text-decoration: none !important;
}
.cart-bottom-area .view-btn i { font-size: .78rem !important; }
.cart-bottom-area .view-btn:hover {
  border-color: var(--an-400) !important;
  color: var(--an-700) !important;
  background: var(--an-50) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════
   6. BANNER v3 — estilos globales de soporte
   (El diseño principal vive en banner.php <style>)
══════════════════════════════════════════════════════ */

/* Herencia de clase .banner.banner-3 para compatibilidad con Swiper */
.banner.banner-3 {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Ocultar flechas gigantes por defecto de Swiper */
.banner-v3 .swiper-button-prev::after,
.banner-v3 .swiper-button-next::after { display: none !important; }

/* Responsive — soporte al breakpoint del CSS del responsive global */
@media (max-width: 768px) {
  .banner-v3 .bv3-slide { min-height: 220px !important; }
  .banner-v3 .bv3-img-col { width: 100% !important; }
  .banner-v3 .bv3-img-fade { display: none !important; }
  .banner-v3 .bv3-img-overlay { opacity: 1 !important; }
  .banner-v3 .bv3-content { max-width: 100% !important; text-align: center !important; align-items: center !important; }
  .banner-v3 .bv3-cta { display: block !important; }
  .banner-v3 .bv3-dots { display: flex !important; }
  .banner-v3 .bv3-nav  { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   7. SECCIÓN CATEGORÍAS — slider horizontal
══════════════════════════════════════════════════════ */
.rts-new-collection-section {
  background: var(--white) !important;
  padding: 28px 0 20px !important;
  border-bottom: 1px solid var(--an-100) !important;
}
/* Header de sección */
.section-header2 { margin-bottom: 18px !important; }
.section-pretitle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .67rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--an-700) !important;
  margin-bottom: 4px !important;
}
.section-pretitle::before {
  content: '';
  width: 16px; height: 2px;
  background: linear-gradient(90deg, var(--an-700), var(--an-400));
  border-radius: 1px;
}
.section-title-2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.3rem, 2.8vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--neu-900) !important;
  line-height: 1.2 !important;
  display: block !important;
  letter-spacing: -.3px;
}
/* Cards de categoría */
.collection-item {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: 1.5px solid transparent !important;
  background: var(--white) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition), border-color var(--transition) !important;
  cursor: pointer !important;
  position: relative !important;
}
.collection-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(13,59,110,.55) 100%);
  z-index: 1; pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}
.collection-item:hover { box-shadow: var(--shadow-md) !important; border-color: var(--an-200) !important; }
.collection-item:hover::before { opacity: 1; }
.collection-item a { display: block; overflow: hidden; }
.collection-item a img {
  width: 100%; height: 160px; object-fit: cover;
  transition: transform .4s ease !important;
}
.collection-item:hover a img { transform: scale(1.08) !important; }
.collection-item .item-quantity {
  position: relative; z-index: 2;
  font-size: .7rem !important; font-weight: 700 !important;
  color: var(--neu-500) !important;
  text-align: center;
  padding: 7px 8px !important;
  background: var(--neu-50) !important;
  border-top: 1px solid var(--an-100) !important;
  margin: 0 !important;
}
.collection-item .item-quantity span { color: var(--an-700) !important; font-weight: 800 !important; }

/* ══════════════════════════════════════════════════════
   8. BARRA DE FILTRO + BÚSQUEDA
══════════════════════════════════════════════════════ */
.rts-recent_products-section { background: #f0f4f8 !important; padding-top: 32px !important; }

.shop-product-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  background: var(--white) !important;
  border: 1px solid var(--an-100) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 18px !important;
}
.shop-product-topbar .items-onlist {
  font-size: .75rem !important; font-weight: 700 !important;
  color: var(--neu-700) !important; letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.shop-product-topbar .filter-area select {
  height: 38px !important;
  border: 1.5px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important;
  padding: 0 14px !important;
  font-size: .82rem !important; font-weight: 600 !important;
  color: var(--neu-700) !important;
  background: var(--an-50) !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  width: 260px !important;
  appearance: auto;
}
.shop-product-topbar .filter-area select:focus {
  border-color: var(--an-700) !important;
  box-shadow: 0 0 0 3px rgba(27,108,168,.14) !important;
}
/* Barra de búsqueda — alineada a la derecha y correctamente cuadrada */
.navbar-search-area {
  margin-bottom: 20px !important;
  width: 100% !important;
  display: block !important;
}
.navbar-search-area .search-input-inner {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}
.navbar-search-area .input-div {
  position: relative !important;
  width: 100% !important;
  max-width: 300px !important;
  /* Garantiza que el input y el icono se alineen correctamente */
  display: flex !important;
  align-items: center !important;
}
.navbar-search-area .search-input {
  width: 100% !important;
  height: 42px !important;
  border: 1.5px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important;
  /* Padding derecho amplio para que el texto no quede bajo el ícono */
  padding: 0 70px 0 14px !important;
  font-size: .85rem !important;
  color: var(--neu-900) !important;
  background: var(--white) !important;
  outline: none !important;
  line-height: 42px !important;
  /* Evitar que Bootstrap o el template lo sobreescriba */
  box-sizing: border-box !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.navbar-search-area .search-input:focus {
  border-color: var(--an-700) !important;
  box-shadow: 0 0 0 3px rgba(27,108,168,.14) !important;
}
/* Ícono/label “Buscar” dentro del input — alineado verticalmente */
.navbar-search-area .search-input-icon,
.navbar-search-area .icon2 {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--an-700) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

/* ══════════════════════════════════════════════════════
   9. GRILLA + CARDS DE PRODUCTOS (v2)
══════════════════════════════════════════════════════ */

/* ── Grilla ── */
#myTable {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
}
#myTable > .producto-item {
  padding: 0 !important;
  width: 100% !important; max-width: 100% !important;
  float: none !important;
  container-type: inline-size;
}

/* ─────────────────────────────────────────────
   CARD DE PRODUCTO — diseño v2
   Estructura:
     [.product-image]   imagen + badges + overlay
     [.card-body]       nombre + categoria + precio/boton
───────────────────────────────────────────── */
.product-item {
  background: var(--white) !important;
  border: 1px solid var(--an-100) !important;
  border-radius: var(--r-xl) !important;      /* más redondeado */
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .28s ease, border-color .28s ease !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  overflow: visible !important;
}
.product-item:hover {
  box-shadow: 0 12px 32px rgba(13,59,110,.14), 0 2px 8px rgba(0,0,0,.06) !important;
  border-color: var(--an-300, #7ec7ee) !important;
}

/* ── Bloque de imagen ── */
.product-image {
  display: block !important;
  overflow: hidden !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  background: linear-gradient(160deg, #eaf5fc 0%, #cde8f6 100%) !important;
  position: relative !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1;          /* cuadrado — proporciones consistentes */
}
.product-image .image-vari {
  height: 100% !important;
  width: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important;
}
.product-image .image-vari img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}
.product-item:hover .product-image .image-vari img { transform: scale(1.08) !important; }

/* Neutralizar el hover del template (parpadeo) */
.product-item .image-hover-variations .image-vari1,
.product-item .image-hover-variations:hover .image-vari1 {
  opacity: 1 !important; max-width: 100% !important;
  position: relative !important; transform: none !important; -webkit-transform: none !important;
}
.product-item .image-hover-variations .image-vari2,
.product-item .image-hover-variations:hover .image-vari2 {
  display: none !important; opacity: 0 !important; pointer-events: none !important;
}
.image-vari2 { display: none !important; }

/* Gradiente hover sobre imagen */
.product-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent 40%,
    rgba(7,24,40,.52) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.product-item:hover .product-image::after { opacity: 1; }

/* Badge SIN STOCK */
.sin-stock-overlay {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  background: var(--danger); color: var(--white);
  font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 50px;
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
}

/* Botón vista rápida — aparece al hover */
.product-actions {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transition: opacity .22s;
  pointer-events: none;
}
.product-item:hover .product-actions { opacity: 1; pointer-events: auto; }
.product-action {
  width: 34px; height: 34px;
  border-radius: 50%;           /* circular */
  background: rgba(255,255,255,.95) !important;
  border: none !important;
  display: flex; align-items: center; justify-content: center;
  color: var(--an-800); font-size: .82rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  transition: background .18s, color .18s, transform .18s;
}
.product-action:hover {
  background: var(--an-700) !important;
  color: var(--white) !important;
  transform: scale(1.1);
}

/* ── Cuerpo del card (antes .bottom-content) ── */
.product-item .bottom-content {
  padding: 14px 16px 16px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Badge de categoría visible dentro del card */
.product-item .product-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--an-700); background: var(--an-50); border: 1px solid var(--an-100);
  padding: 2px 8px; border-radius: 50px;
  width: fit-content;
  margin-bottom: 2px;
}

/* Nombre del producto */
.product-item .product-name {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--neu-900) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex-shrink: 0;
  letter-spacing: -.01em;
}

/* Separador interno */
.product-item .card-divider {
  height: 1px;
  background: var(--an-100);
  margin: 4px 0;
  flex-shrink: 0;
}

/* ── Fila precio + botón ──
   overflow:hidden en .bottom-content estaba cortando el botón.
   Solución: la fila tiene padding propio y nunca hace transform en hover.
── */
.action-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  padding-top: 6px !important;
  /* Garantiza que nunca se recorte */
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Precio — sin transform en ningún estado */
.product-item .product-price {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--an-800) !important;
  letter-spacing: -.3px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  /* Bloquear cualquier transform heredado del template */
  transform: none !important;
  -webkit-transform: none !important;
  transition: color .18s !important;
}
.product-item:hover .product-price {
  /* Sin movimiento — solo el color cambia levemente */
  transform: none !important;
  -webkit-transform: none !important;
}

/* ★ BOTÓN COMPRAR — NUNCA hace translateY */
.product-item .addto-cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: linear-gradient(135deg, var(--an-700) 0%, var(--an-800) 100%) !important;
  color: var(--white) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 8px 13px !important;
  border-radius: 50px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border: none !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  /* Sin transform en ningún estado = sin parpadeo, sin corte */
  transform: none !important;
  -webkit-transform: none !important;
  transition: box-shadow .2s ease, opacity .2s ease !important;
  box-shadow: 0 3px 10px rgba(27,108,168,.35) !important;
  /* Asegurar visibilidad */
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}
.product-item .addto-cart:hover,
.product-item .addto-cart:focus {
  box-shadow: 0 5px 16px rgba(27,108,168,.5) !important;
  opacity: .92 !important;
  color: var(--white) !important;
  text-decoration: none !important;
  outline: none !important;
  /* Explicitamente sin transform */
  transform: none !important;
  -webkit-transform: none !important;
}
.product-item .addto-cart i { font-size: .72rem !important; pointer-events: none; }
.product-item .addto-cart .cart-label { pointer-events: none; }

/* En cards muy angostas: solo ícono */
@container (max-width: 175px) {
  .product-item .addto-cart .cart-label { display: none !important; }
  .product-item .addto-cart { padding: 8px 10px !important; }
  .product-item .product-price { font-size: .9rem !important; }
}

/* Mensaje sin resultados */
#sinResultados {
  text-align: center; padding: 60px 0;
  color: var(--neu-500);
}
#sinResultados i { font-size: 2.8rem; margin-bottom: 16px; display: block; color: var(--neu-300); }
#sinResultados p { font-size: .9rem; font-weight: 600; }

/* ══════════════════════════════════════════════════════
   10. MODAL DETALLE DE PRODUCTO
══════════════════════════════════════════════════════ */
.product-details-popup-wrapper {
  z-index: 1100 !important;
}
/* Fondo overlay */
.product-details-popup-wrapper.popup ~ .anywere,
.anywere.bgshow {
  background: rgba(7,24,40,.72) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rts-product-details-section2 .product-details-popup {
  background: var(--white) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  width: min(920px, 94vw) !important;
  max-width: none !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  position: relative !important;
  border: 1px solid var(--an-100) !important;
}

/* Botón cerrar */
.product-details-close-btn {
  position: absolute !important;
  top: 14px !important; right: 14px !important; z-index: 20 !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: var(--neu-100) !important;
  color: var(--neu-700) !important;
  border: 1px solid var(--neu-300) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .95rem !important; cursor: pointer !important;
  transition: all var(--transition) !important;
}
.product-details-close-btn:hover { background: #fee2e2 !important; color: var(--danger) !important; border-color: #fca5a5 !important; }

/* Layout 2 columnas */
.product-details-popup .details-product-area {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  min-height: 460px;
}

/* Columna imagen */
.product-details-popup .product-thumb-area {
  background: linear-gradient(145deg, var(--an-50) 0%, #c9e8f5 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 380px !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: var(--r-xl) 0 0 var(--r-xl) !important;
}
.product-details-popup .product-thumb-area .product-thumb.zoom {
  width: 100% !important; height: 100% !important;
  background-size: 200% !important; background-repeat: no-repeat !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 380px !important;
}
.product-details-popup .product-thumb-area img#imagenSRC {
  width: 100% !important; height: 360px !important;
  object-fit: contain !important; padding: 28px !important; display: block !important;
}

/* Columna contenido */
.product-details-popup .contents {
  padding: 36px 36px 28px !important;
  display: flex !important; flex-direction: column !important;
  overflow-y: auto; max-height: 90vh;
}
/* Badge categoría */
.product-details-popup .product-catagory {
  display: inline-flex !important;
  align-items: center !important; gap: 6px !important;
  font-size: .66rem !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--an-700) !important;
  background: var(--an-50) !important; border: 1px solid var(--an-200) !important;
  padding: 4px 12px !important; border-radius: 50px !important;
  margin-bottom: 12px !important; width: fit-content !important;
}
/* Estrellas */
.product-details-popup .product-status {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.product-details-popup .rating-star i { color: var(--warn) !important; font-size: .8rem; }
/* Título */
.product-details-popup .product-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important; font-weight: 700 !important;
  color: var(--neu-900) !important; line-height: 1.3 !important;
  margin-bottom: 14px !important;
  display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important;
}
.product-details-popup .product-title .stock {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .62rem !important; font-weight: 700 !important;
  background: #dcfce7 !important; color: #166534 !important;
  padding: 3px 9px !important; border-radius: 4px !important;
  letter-spacing: .05em !important; flex-shrink: 0 !important;
}
.product-details-popup .product-title .stock1 {
  background: #fee2e2 !important; color: var(--danger) !important;
}
/* Precio */
.product-details-popup .product-price {
  font-size: 1.8rem !important; font-weight: 800 !important;
  color: var(--an-800) !important; letter-spacing: -.5px !important;
  display: flex !important; align-items: baseline !important; gap: 4px !important;
  margin-bottom: 16px !important; line-height: 1 !important;
}
/* Descripción */
.product-details-popup #obs {
  font-size: .85rem !important; color: var(--neu-500) !important;
  line-height: 1.75 !important; margin-bottom: 20px !important;
  padding: 12px 16px !important;
  background: var(--neu-50) !important;
  border-left: 3px solid var(--an-400) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  max-height: 140px; overflow-y: auto;
}
/* Acción cantidad + botón */
.product-details-popup .product-bottom-action {
  display: flex !important; align-items: center !important;
  gap: 12px !important; margin-bottom: 20px !important; flex-wrap: wrap !important;
}
/* Cantidad */
.product-details-popup .quantity-edit {
  display: flex !important; align-items: center !important;
  border: 1.5px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important; overflow: hidden !important;
  width: 118px !important; flex-shrink: 0 !important;
}
.product-details-popup .quantity-edit .button {
  width: 36px !important; height: 46px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--an-50) !important; color: var(--neu-700) !important;
  cursor: pointer !important; border: none !important;
  transition: background var(--transition) !important; font-size: .9rem !important;
}
.product-details-popup .quantity-edit .button:hover { background: var(--an-100) !important; color: var(--an-700) !important; }
.product-details-popup .quantity-edit .input {
  width: 46px !important; height: 46px !important;
  text-align: center !important; font-weight: 700 !important; font-size: .95rem !important;
  border: none !important; border-left: 1px solid var(--an-200) !important; border-right: 1px solid var(--an-200) !important;
  outline: none !important; color: var(--neu-900) !important;
  border-top: none !important; border-bottom: none !important;
}
/* Botón añadir al carrito */
.addto-cart-btn {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  background: linear-gradient(135deg, var(--an-700) 0%, var(--an-800) 100%) !important;
  color: var(--white) !important;
  font-weight: 700 !important; font-size: .88rem !important;
  padding: 13px 26px !important; border-radius: var(--r-sm) !important;
  letter-spacing: .03em !important;
  box-shadow: 0 4px 16px rgba(27,108,168,.38) !important;
  transition: opacity var(--transition) !important;
  flex: 1 !important; min-width: 0 !important; white-space: nowrap !important;
  cursor: pointer !important; text-decoration: none !important;
}
.addto-cart-btn:hover { opacity: .88 !important; color: var(--white) !important; }
/* Metadatos */
.product-details-popup .product-uniques {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.product-uniques .product-unipue {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem !important; color: var(--neu-500) !important; font-weight: 400 !important;
  background: var(--neu-50); border: 1px solid var(--neu-300);
  border-radius: var(--r-xs); padding: 4px 10px;
}
.product-uniques .product-unipue span { font-weight: 700 !important; color: var(--neu-700) !important; }

/* ══════════════════════════════════════════════════════
   11. TOAST CONFIRMACIÓN
══════════════════════════════════════════════════════ */
.toast {
  background: var(--white) !important;
  border: 1px solid var(--an-100) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border-left: 4px solid var(--success) !important;
  min-width: 280px !important;
}
.toast .toast-body {
  font-size: .85rem !important; font-weight: 600 !important;
  color: var(--neu-900) !important; padding: 14px 16px !important;
}
.toast .toast-body::before { content: '✓ '; color: var(--success); font-weight: 800; }

/* ══════════════════════════════════════════════════════
   12. CHECKOUT
══════════════════════════════════════════════════════ */
.rts-checkout-section { padding: 40px 0 60px !important; background: #f0f4f8 !important; }
/* Breadcrumb */
.page-path {
  background: linear-gradient(135deg, var(--an-800) 0%, var(--an-900) 100%) !important;
  padding: 28px 0 !important;
}
.page-path .path-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.6rem !important; color: var(--white) !important;
  font-weight: 700 !important; margin-bottom: 8px !important;
}
.page-path ul li a { font-size: .8rem !important; color: rgba(255,255,255,.6) !important; }
.page-path ul li a.current-page { color: var(--an-400) !important; }
/* Formulario */
/*.checkout-form .input-div { margin-bottom: 18px; }*/
.checkout-form label {
  font-size: .73rem; font-weight: 700; color: var(--neu-500);
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; display: block;
}
.checkout-form .form-control {
  border: 1.5px solid var(--an-200) !important; border-radius: var(--r-sm) !important;
  padding: 11px 14px !important; font-size: .9rem !important;
  color: var(--neu-900) !important; background: var(--white) !important;
  outline: none !important; height: auto !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.checkout-form .form-control:focus { border-color: var(--an-700) !important; box-shadow: 0 0 0 3px rgba(27,108,168,.14) !important; }
.checkout-form textarea {
  border: 1.5px solid var(--an-200) !important; border-radius: var(--r-sm) !important;
  padding: 11px 14px !important; font-size: .9rem !important; width: 100% !important;
  resize: vertical !important; min-height: 100px !important; outline: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.checkout-form textarea:focus { border-color: var(--an-700) !important; box-shadow: 0 0 0 3px rgba(27,108,168,.14) !important; }
.checkout-form .action-item {
  background: var(--white) !important; border: 1px solid var(--an-100) !important;
  border-radius: var(--r-lg) !important; padding: 20px !important;
  box-shadow: var(--shadow-sm) !important; margin-bottom: 16px !important;
}
.checkout-form .action-item .action-title { font-size: .78rem !important; font-weight: 800 !important; color: var(--an-800) !important; letter-spacing: .06em; }
.checkout-form .category-item { padding: 10px 0 !important; border-bottom: 1px solid var(--neu-100) !important; }
.checkout-form .category-item:last-child { border-bottom: none !important; }
.checkout-form .category-title { font-size: .82rem !important; color: var(--neu-700) !important; font-weight: 500 !important; }
/* Botón realizar pedido */
.place-order-btn {
  display: block !important; width: 100% !important; text-align: center !important;
  background: linear-gradient(135deg, var(--an-700) 0%, var(--an-800) 100%) !important;
  color: var(--white) !important; font-weight: 800 !important; font-size: .9rem !important;
  padding: 14px 0 !important; border-radius: var(--r-sm) !important;
  letter-spacing: .04em !important; margin-top: 16px !important;
  box-shadow: 0 6px 20px rgba(27,108,168,.35) !important;
  transition: opacity var(--transition) !important;
}
.place-order-btn:hover { opacity: .88 !important; color: var(--white) !important; }
/* Pago opciones */
.payment-options .form-group {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--neu-100);
}
.payment-options .form-group:last-child { border-bottom: none; }
.payment-options .check-title { font-size: .83rem; color: var(--neu-700) !important; font-weight: 500; margin: 0; }
.coupon-ask .coupon-click {
  font-weight: 700 !important; color: var(--an-800) !important; font-size: .9rem !important;
  background: var(--an-50) !important; border: 1px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important; padding: 8px 16px !important; letter-spacing: .04em;
}
.coupon-ask small { font-size: .78rem !important; color: var(--neu-500) !important; display: block; margin-top: 8px; }

/* ══════════════════════════════════════════════════════
   13. PÁGINA COMPLETADO / GRACIAS
══════════════════════════════════════════════════════ */
.thanks-area { padding: 60px 0 !important; background: #f0f4f8 !important; }
.thanks-area .section-inner {
  max-width: 580px; margin: 0 auto; text-align: center;
  background: var(--white); border: 1px solid var(--an-100);
  border-radius: var(--r-xl); padding: 52px 44px;
  box-shadow: var(--shadow-lg);
}
.thanks-area .section-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: #dcfce7; border: 2px solid #bbf7d0;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; font-size: 1.8rem; color: #16a34a !important;
}
.thanks-area .section-title h2.sub-title { font-size: 1.25rem !important; color: var(--neu-900) !important; margin-bottom: 14px; }
.thanks-area .section-title h3 { font-size: 1rem !important; color: var(--an-800) !important; margin-bottom: 8px; }
.thanks-area .btn-1 {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--an-700) !important; color: var(--white) !important;
  font-weight: 700 !important; font-size: .85rem !important;
  padding: 11px 24px !important; border-radius: var(--r-sm) !important;
  transition: opacity var(--transition) !important;
  box-shadow: 0 4px 14px rgba(27,108,168,.3) !important;
}
.thanks-area .btn-1:hover { opacity: .88 !important; color: var(--white) !important; }
.thanks-area .section-button { margin-top: 20px; }

/* ══════════════════════════════════════════════════════
   14. FOOTER
══════════════════════════════════════════════════════ */
.footer.footer-2 {
  background: var(--an-900) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
/* Feature bar */
.footer.footer-2 .footer-features {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  padding: 28px 0 !important;
}
.footer.footer-2 .feature-item {
  display: flex !important; align-items: center !important; gap: 14px !important;
}
.footer.footer-2 .feature-item .icon img {
  width: 38px; height: 38px;
  filter: brightness(0) invert(1); opacity: .7;
}
.footer.footer-2 .feature-item .title {
  font-size: .84rem !important; font-weight: 700 !important;
  color: var(--white) !important; margin-bottom: 2px !important; display: block !important;
}
.footer.footer-2 .feature-item p { font-size: .73rem !important; color: rgba(255,255,255,.45) !important; }
/* Footer inner */
.footer.footer-2 .footer-inner { padding: 44px 0 32px !important; }
/* Footer bottom */
.footer-bottom-area {
  background: rgba(0,0,0,.3) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: 16px 0 !important;
}
.footer-bottom-area .footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom-area .copyright { font-size: .73rem !important; color: rgba(255,255,255,.3) !important; }

/* ══════════════════════════════════════════════════════
   15. UTILIDADES
══════════════════════════════════════════════════════ */
/* Preloader */
#weiboo-load { background: var(--an-800) !important; }
#weiboo-load .preloader-new { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#weiboo-load .preloader-new .cart_preloader { color: var(--an-400); }
#weiboo-load .preloader-new img { max-width: 250px; filter: brightness(0) invert(1); }
/* Scroll top */
.scroll-top-btn {
  background: var(--an-700) !important; color: var(--white) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 4px 14px rgba(27,108,168,.4) !important;
}
/* Modal sucursal */
#mdModalSOCIO .modal-content { border-radius: var(--r-xl) !important; border: none !important; box-shadow: var(--shadow-xl) !important; overflow: hidden; }
#mdModalSOCIO .modal-header { background: var(--an-800) !important; padding: 18px 24px !important; border-bottom: none !important; }
#mdModalSOCIO .modal-header .modal-title { color: var(--white) !important; font-size: .9rem !important; font-weight: 700 !important; letter-spacing: .08em; }
#mdModalSOCIO .modal-body { padding: 24px !important; }
#mdModalSOCIO .modal-footer { padding: 14px 24px !important; border-top: 1px solid var(--neu-100) !important; background: var(--neu-50) !important; }
#mdModalSOCIO .btn-info { background: var(--an-700) !important; border: none !important; border-radius: var(--r-sm) !important; font-weight: 700 !important; padding: 9px 22px !important; }
/* Alertas */
.alert-danger { border-radius: var(--r-sm) !important; font-size: .82rem !important; }
.alert-info   { border-radius: var(--r-sm) !important; font-size: .82rem !important; border-color: var(--an-200) !important; color: var(--an-800) !important; background: var(--an-50) !important; }

/* ══════════════════════════════════════════════════════
   15a. SECCIÓN INFORMACIÓN DE EMPRESA
══════════════════════════════════════════════════════ */

/* ── Layout principal: 2 columnas ── */
.empresa-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  background: linear-gradient(160deg, #f0f7ff 0%, #e8f3fd 60%, #dbeafe 100%);
  padding: 64px 5%;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--an-200);
  border-bottom: 1px solid var(--an-100);
}
/* Fondo decorativo — manchas de color sutiles */
.empresa-info-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 5%  70%, rgba(27,108,168,.07) 0%, transparent 65%),
    radial-gradient(ellipse 500px 350px at 95%  5%, rgba(79,168,220,.09) 0%, transparent 60%);
  pointer-events: none;
}
.empresa-info-section::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='1' fill='rgba(13,59,110,0.04)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Columna izquierda ── */
.ei-left {
  position: relative;
  z-index: 1;
}

.ei-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--an-700);
  margin-bottom: 20px;
}
.ei-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--an-700);
  animation: eiPulse 2s ease infinite;
}
@keyframes eiPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(27,108,168,.4); }
  50%      { box-shadow: 0 0 0 7px rgba(27,108,168,0); }
}

.ei-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--an-900);
  line-height: 1.2;
  letter-spacing: -.4px;
  margin-bottom: 18px;
}
.ei-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--an-800) 0%, var(--an-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ei-desc {
  font-size: .92rem;
  color: var(--neu-500);
  line-height: 1.78;
  margin-bottom: 32px;
  max-width: 460px;
}

/* Stats — cuadrícula 2×2 */
.ei-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.ei-stat {
  background: var(--white);
  border: 1.5px solid var(--an-100);
  border-radius: var(--r-lg);
  padding: 18px 16px;
  box-shadow: 0 2px 10px rgba(13,59,110,.06);
  transition: box-shadow .22s, border-color .22s, transform .22s;
}
.ei-stat:hover {
  box-shadow: 0 6px 20px rgba(13,59,110,.12);
  border-color: var(--an-400);
  transform: translateY(-2px);
}
.ei-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--an-800);
  line-height: 1;
  letter-spacing: -.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.ei-stat-suf {
  font-size: 1.1rem;
  color: var(--an-600);
}
.ei-counter-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--an-700);
  line-height: 1;
  letter-spacing: -.3px;
}
.ei-stat-lbl {
  font-size: .7rem;
  font-weight: 600;
  color: var(--neu-500);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Badges de certificaciones */
.ei-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ei-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--an-800);
  background: var(--white);
  border: 1.5px solid var(--an-200);
  padding: 6px 12px;
  border-radius: 50px;
  box-shadow: 0 1px 4px rgba(13,59,110,.08);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.ei-cert i {
  font-size: .72rem;
  color: var(--an-600);
}
.ei-cert:hover {
  background: var(--an-50);
  border-color: var(--an-700);
  box-shadow: 0 3px 10px rgba(13,59,110,.14);
}

/* ── Columna derecha ── */
.ei-right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Cuadrícula 2×2 de cards */
.ei-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Card de pilar */
.ei-card {
  background: var(--white);
  border: 1.5px solid var(--an-100);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(13,59,110,.06);
  /* entrada animada */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .22s, border-color .22s;
}
.ei-card.ei-card--visible {
  opacity: 1;
  transform: translateY(0);
}
.ei-card:hover {
  box-shadow: 0 8px 24px rgba(13,59,110,.13);
  border-color: var(--an-400);
}
/* Número decorativo de fondo */
.ei-card-num {
  position: absolute;
  top: 10px; right: 14px;
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(13,59,110,.06);
  line-height: 1;
  letter-spacing: -2px;
  pointer-events: none;
  user-select: none;
}
.ei-card-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--an-50);
  border: 1.5px solid var(--an-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ei-card-icon i {
  font-size: 1rem;
  color: var(--an-700);
}
.ei-card-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--an-900);
  margin-bottom: 6px;
  line-height: 1.3;
}
.ei-card-desc {
  font-size: .74rem;
  color: var(--neu-500);
  line-height: 1.65;
  margin: 0;
}

/* Panel de valores interactivo */
.ei-valores {
  background: var(--white);
  border: 1.5px solid var(--an-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(13,59,110,.06);
}
.ei-valores-title {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neu-500);
  padding: 12px 18px 8px;
}
.ei-valores-list {
  display: flex;
  border-bottom: 1px solid var(--an-100);
}
.ei-valor {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--neu-500);
  cursor: pointer;
  border-right: 1px solid var(--an-100);
  transition: background .18s, color .18s;
}
.ei-valor:last-child { border-right: none; }
.ei-valor i { font-size: .72rem; }
.ei-valor:hover { background: var(--an-50); color: var(--an-700); }
.ei-valor.is-active {
  background: var(--an-50);
  color: var(--an-800);
  font-weight: 700;
  border-bottom: 2px solid var(--an-700);
}
.ei-valor-content { padding: 16px 18px; min-height: 72px; }
.ei-valor-txt {
  font-size: .82rem;
  color: var(--neu-500);
  line-height: 1.72;
  margin: 0;
  animation: fadeSlide .3s ease;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .empresa-info-section {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 5%;
  }
  .ei-desc { max-width: none; }
}
@media (max-width: 600px) {
  .empresa-info-section {
    padding: 36px 4%;
    gap: 28px;
  }
  .ei-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ei-stat-num { font-size: 1.6rem; }
  .ei-cards { grid-template-columns: 1fr; gap: 10px; }
  .ei-valor { font-size: .62rem; padding: 9px 4px; }
  .ei-valor i { display: none; }
  .ei-title { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════════════
   15b. SECCIÓN OFERTAS CON CONTADOR
══════════════════════════════════════════════════════ */

/* ── Sección contenedora ── */
.oferta-section {
  background: linear-gradient(180deg, #f0f4f8 0%, #fff 100%);
  padding: 48px 0 52px;
  position: relative;
  overflow: hidden;
}
.oferta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--an-800), var(--an-400), var(--an-800));
}

/* ── Encabezado de la sección ── */
.oferta-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 36px;
}
.oferta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e63946;
  background: rgba(230,57,70,.08);
  border: 1px solid rgba(230,57,70,.2);
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
  width: fit-content;
}
/* Punto pulsante rojo */
.oferta-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e63946;
  animation: ofertaPulse 1.4s ease infinite;
  flex-shrink: 0;
}
@keyframes ofertaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(230,57,70,.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(230,57,70,0); transform: scale(1.15); }
}
.oferta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--neu-900);
  line-height: 1.2;
  letter-spacing: -.3px;
  margin: 0;
}
.oferta-desc {
  font-size: .9rem;
  color: var(--neu-500);
  line-height: 1.75;
  margin: 0;
}

/* ── Grilla de cards de oferta ── */
.oferta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

/* ── Card individual ── */
.oferta-card {
  background: var(--white);
  border: 1.5px solid var(--an-100);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}
.oferta-card:hover {
  box-shadow: 0 14px 40px rgba(13,59,110,.14), 0 2px 8px rgba(0,0,0,.06);
  border-color: var(--an-400);
}

/* Estado: urgente (< 1 hora) — borde rojo pulsante */
.oferta-card.is-urgente {
  border-color: rgba(230,57,70,.4);
  animation: urgenteBorder 2s ease infinite;
}
@keyframes urgenteBorder {
  0%,100% { border-color: rgba(230,57,70,.4); }
  50%      { border-color: rgba(230,57,70,.9); }
}

/* Estado: agotado — opaco */
.oferta-card.is-agotado {
  opacity: .7;
  cursor: not-allowed;
}
.oferta-card.is-agotado:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--an-100);
}

/* Estado: expirado — muy opaco */
.oferta-card.is-expirado {
  opacity: .5;
  pointer-events: none;
}

/* ── Ribbon (cinta) de descuento ── */
.oferta-ribbon {
  position: absolute;
  top: 16px; left: -2px;
  z-index: 5;
  background: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 5px 14px 5px 12px;
  border-radius: 0 50px 50px 0;
  box-shadow: 2px 2px 8px rgba(230,57,70,.35);
  line-height: 1;
}
.oferta-ribbon span { pointer-events: none; }

/* ── Overlay de agotado ── */
.oferta-agotado-overlay {
  position: absolute;
  inset: 0; z-index: 6;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-xl);
}
.oferta-agotado-overlay span {
  background: rgba(15,23,42,.85);
  color: #fff;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 22px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.25);
}

/* ── Imagen ── */
.oferta-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(160deg, #eaf5fc 0%, #cde8f6 100%);
  flex-shrink: 0;
  position: relative;
}
.oferta-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.oferta-card:hover .oferta-img-wrap img { transform: scale(1.06); }

/* ── Cuerpo del card ── */
.oferta-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Badge de categoría */
.oferta-cat {
  display: inline-flex;
  align-items: center;
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--an-700); background: var(--an-50); border: 1px solid var(--an-100);
  padding: 2px 8px; border-radius: 50px;
  width: fit-content;
}

/* Nombre del producto */
.oferta-nombre {
  font-size: .9rem;
  font-weight: 700;
  color: var(--neu-900);
  line-height: 1.4;
  letter-spacing: -.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Precios ── */
.oferta-precios {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.oferta-precio-old {
  font-size: .8rem;
  font-weight: 500;
  color: var(--neu-500);
  text-decoration: line-through;
  text-decoration-color: #e63946;
}
.oferta-precio-new {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--an-800);
  letter-spacing: -.4px;
  line-height: 1;
}

/* ── Contador de tiempo ── */
.oferta-countdown {
  background: var(--neu-900);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ocd-label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ocd-label i { color: var(--an-400); font-size: .7rem; }
/* Cuando la oferta expira, el label se vuelve rojo */
.oferta-card.is-expirado .ocd-label {
  color: rgba(230,57,70,.7);
}
.oferta-card.is-expirado .ocd-label i { color: #e63946; }

.ocd-timer {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ocd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
}
.ocd-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  /* Ancho fijo para que los dígitos no salten */
  min-width: 2ch;
  text-align: center;
  display: block;
}
/* Urgente: números en rojo */
.oferta-card.is-urgente .ocd-num {
  color: #ff8fa3;
  animation: numBlink .9s ease infinite;
}
@keyframes numBlink {
  0%,100% { opacity: 1; }
  50%      { opacity: .6; }
}
.ocd-sub {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  text-align: center;
  display: block;
}
.ocd-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  align-self: flex-start;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Barra de stock ── */
.oferta-stock {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oferta-stock-bar {
  height: 5px;
  background: var(--an-100);
  border-radius: 3px;
  overflow: hidden;
}
.oferta-stock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--an-700), var(--an-400));
  border-radius: 3px;
  transition: width .6s ease;
}
/* Barra en rojo si hay poco stock (< 30%) */
.oferta-stock-fill[style*="width:1"],
.oferta-stock-fill[style*="width:2"],
.oferta-stock-fill[style*="width:3"] {
  background: linear-gradient(90deg, #e63946, #ff6b6b);
}
.oferta-stock-txt {
  font-size: .7rem;
  color: var(--neu-500);
  font-weight: 500;
}
.oferta-stock-txt strong {
  color: #e63946;
  font-weight: 800;
}

/* ── Botón CTA ── */
.oferta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
  color: #fff !important;
  font-size: .8rem;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: 50px;
  text-decoration: none !important;
  letter-spacing: .02em;
  margin-top: auto;
  box-shadow: 0 4px 14px rgba(230,57,70,.35);
  transition: opacity .2s ease, box-shadow .2s ease;
  cursor: pointer;
  border: none;
}
.oferta-btn:hover {
  opacity: .9;
  box-shadow: 0 6px 20px rgba(230,57,70,.5);
  color: #fff !important;
  text-decoration: none !important;
}
.oferta-btn.disabled {
  background: var(--neu-300);
  color: var(--neu-500) !important;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .7;
}
.oferta-btn i { font-size: .78rem; pointer-events: none; }

/* ── Responsive para la sección de ofertas ── */
@media (max-width: 768px) {
  .oferta-header {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
  }
  .oferta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .oferta-section {
    padding: 32px 0 36px;
  }
}
@media (max-width: 600px) {
  .oferta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .oferta-body {
    padding: 12px 12px 14px;
    gap: 8px;
  }
  .oferta-nombre {
    font-size: .8rem;
  }
  .oferta-precio-new {
    font-size: 1.1rem;
  }
  .ocd-num {
    font-size: 1.15rem;
  }
  .oferta-btn {
    font-size: .74rem;
    padding: 9px 12px;
  }
  .oferta-title {
    font-size: 1.3rem;
  }
  .oferta-section {
    padding: 24px 0 28px;
  }
}
@media (max-width: 400px) {
  .oferta-grid {
    grid-template-columns: 1fr; /* 1 columna en pantallas muy pequeñas */
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════════════
   16. RESPONSIVE COMPLETO
   Breakpoints:
     1024px  — tablet landscape
      768px  — tablet portrait / móvil grande
      600px  — móvil mediano (el más crítico)
      400px  — móvil pequeño (320–400px)
══════════════════════════════════════════════════════ */

/* ────────────────────────────────────
   ≤ 1024px — Tablet landscape
──────────────────────────────────── */
@media (max-width: 1024px) {

  /* Grilla de productos */
  #myTable {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
    gap: 16px !important;
  }

  /* Banner: imagen ocupa menos ancho */
  .banner-img-col { width: 36% !important; }
  .banner-text-col { max-width: 64% !important; }

  /* Modal producto: apilar imagen arriba, contenido abajo */
  .product-details-popup .details-product-area {
    grid-template-columns: 1fr !important;
  }
  .product-details-popup .product-thumb-area {
    min-height: 260px !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  }
  .product-details-popup .product-thumb-area img#imagenSRC {
    height: 220px !important;
  }
  .product-details-popup .product-thumb-area .product-thumb.zoom {
    min-height: 260px !important;
  }
  .product-details-popup .contents {
    padding: 20px !important;
    max-height: none !important;
  }
}

/* ────────────────────────────────────
   ≤ 768px — Tablet portrait / móvil grande
──────────────────────────────────── */
@media (max-width: 768px) {

  /* — TOPBAR — */
  /* En tablet/móvil ocultar el segundo span (teléfono + dirección) */
  .header-topbar2 .header-top-inner {
    justify-content: center !important;
  }
  .header-topbar2 .header-top-inner > span:last-child {
    display: none !important;
  }

  /* — NAVBAR — */
  .navbar-part2 {
    padding: 8px 0 !important;
    gap: 0 !important;
  }
  /* Logo más pequeño */
  .navbar-sticky2 .logo img {
    max-height: 36px !important;
  }
  /* Tamaño del botón de carrito */
  .header-action-items1 .account {
    font-size: .78rem !important;
    padding: 7px 12px !important;
  }

  /* — BANNER v3 (reglas en banner.php <style> + sección 6) — */
  .banner-v3 .bv3-slide { min-height: 220px !important; }

  /* — CATEGORIAS — */
  .rts-new-collection-section {
    padding: 20px 0 14px !important;
  }
  .collection-item a img {
    height: 130px !important;
  }
  .collection-item .item-quantity {
    font-size: .65rem !important;
    padding: 5px 6px !important;
  }

  /* — FILTROS Y BÚSQLÁCIDOS — */
  .shop-product-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .shop-product-topbar .filter-area,
  .shop-product-topbar .filter-area select {
    width: 100% !important;
  }
  /* Búsqueda ocupa todo el ancho */
  .navbar-search-area .search-input-inner {
    justify-content: stretch !important;
  }
  .navbar-search-area .input-div {
    max-width: 100% !important;
    width: 100% !important;
  }
  .navbar-search-area .search-input {
    width: 100% !important;
  }

  /* — GRILLA PRODUCTOS — */
  #myTable {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* — MODAL — */
  .rts-product-details-section2 .product-details-popup {
    width: 96vw !important;
    max-height: 88vh !important;
  }
  .product-details-popup .product-title { font-size: 1.05rem !important; }
  .product-details-popup .product-price { font-size: 1.3rem !important; }
  .product-details-popup .product-bottom-action {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .product-details-popup .quantity-edit {
    width: 100% !important;
  }
  .addto-cart-btn {
    width: 100% !important;
    padding: 13px 0 !important;
  }

  /* — CARRITO LATERAL — */
  .cart-bar {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .cart-item-img {
    width: 60px !important;
    height: 60px !important;
  }
  .cart-item-name {
    font-size: .78rem !important;
  }

  /* — FOOTER — */
  .footer.footer-2 .footer-features .row > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .footer.footer-2 .footer-inner .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .footer-bottom-area .footer-bottom-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 4px !important;
  }

  /* — COMPLETADO — */
  .thanks-area .section-inner {
    padding: 28px 18px !important;
    margin: 0 12px !important;
  }
}

/* ────────────────────────────────────
   ≤ 600px — Móvil mediano (el más crítico)
   Aqui vive la mayoría de usuarios móviles
──────────────────────────────────── */
@media (max-width: 600px) {

  /* — TOPBAR: una sola línea, font más pequeño — */
  .header-topbar2 {
    padding: 6px 0 !important;
  }
  .header-topbar2 .header-top-inner > span:first-child {
    font-size: .68rem !important;
  }

  /* — NAVBAR: logo + carrito bien alineados — */
  .navbar-part2 {
    padding: 8px 0 !important;
  }
  .navbar-sticky2 .logo img {
    max-height: 32px !important;
  }
  .header-action-items1 .account {
    font-size: .74rem !important;
    padding: 6px 10px !important;
    gap: 4px !important;
  }
  /* Icono carrito más compacto */
  .cart-icon.icon {
    width: 32px !important;
    height: 32px !important;
  }
  .cart-icon.icon i {
    font-size: 1.1rem !important;
  }

  /* — BANNER v3 móvil (600px) — */
  .banner-v3 .bv3-slide { min-height: 180px !important; }

  /* — SECCIÓN de categorías — */
  .section-title-2 {
    font-size: 1.3rem !important;
  }
  .section-pretitle {
    font-size: .62rem !important;
  }

  /* — BARRA DE FILTRO — */
  .shop-product-topbar {
    padding: 10px 12px !important;
    border-radius: var(--r-sm) !important;
  }
  .shop-product-topbar .items-onlist {
    font-size: .7rem !important;
  }
  .shop-product-topbar .filter-area select {
    font-size: .78rem !important;
    height: 36px !important;
  }

  /* — BÚSQLÁCIDA — */
  .navbar-search-area .search-input {
    height: 38px !important;
    font-size: .82rem !important;
  }
  .navbar-search-area .icon2 {
    font-size: .7rem !important;
  }

  /* — GRILLA 2 columnas ajustada — */
  #myTable {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* — CARD DE PRODUCTO — */
  .product-item {
    border-radius: var(--r-lg) !important;
  }
  /* Imagen cuadrada, altura auto via aspect-ratio */
  .product-image {
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }
  .product-item .bottom-content {
    padding: 10px 10px 12px !important;
    gap: 4px !important;
  }
  .product-item .product-cat-badge {
    font-size: .55rem !important;
    padding: 2px 6px !important;
  }
  .product-item .product-name {
    font-size: .78rem !important;
    -webkit-line-clamp: 2 !important;
  }
  .product-item .card-divider {
    margin: 2px 0 !important;
  }
  /* Precio + botón en móvil */
  .action-wrap {
    gap: 6px !important;
    padding-top: 4px !important;
  }
  .product-item .product-price {
    font-size: .9rem !important;
  }
  /* Ocultar texto del botón, solo icono */
  .product-item .addto-cart .cart-label {
    display: none !important;
  }
  .product-item .addto-cart {
    padding: 8px 10px !important;
    border-radius: 50% !important;   /* circular en móvil */
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
  .product-item .addto-cart i {
    font-size: .8rem !important;
  }

  /* — HEADER PRODUCTOS — */
  .recent-products-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #contadorProductos {
    font-size: .7rem !important;
  }

  /* — MODAL móvil: pantalla completa — */
  .rts-product-details-section2 .product-details-popup {
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }
  .product-details-popup .product-thumb-area {
    min-height: 200px !important;
    border-radius: 0 !important;
  }
  .product-details-popup .product-thumb-area img#imagenSRC {
    height: 180px !important;
    padding: 16px !important;
  }
  .product-details-popup .product-thumb-area .product-thumb.zoom {
    min-height: 200px !important;
  }
  .product-details-popup .contents {
    padding: 16px !important;
  }
  .product-details-popup .product-title {
    font-size: .95rem !important;
  }
  .product-details-popup .product-price {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
  }
  .product-details-popup #obs {
    font-size: .8rem !important;
    max-height: 80px !important;
  }
  .product-details-popup .product-bottom-action {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .product-details-popup .quantity-edit .button {
    height: 40px !important;
    width: 36px !important;
  }
  .product-details-popup .quantity-edit .input {
    height: 40px !important;
  }

  /* — FOOTER móvil — */
  .footer.footer-2 .footer-features .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .footer.footer-2 .feature-item {
    padding: 6px 0 !important;
  }
  .footer.footer-2 .footer-inner {
    padding: 28px 0 20px !important;
  }
  .footer-bottom-area {
    padding: 12px 0 !important;
  }
  .footer-bottom-area .copyright {
    font-size: .68rem !important;
  }

  /* — CHECKOUT móvil — */
  .rts-checkout-section {
    padding: 20px 0 40px !important;
  }
  .page-path {
    padding: 18px 0 !important;
  }
  .page-path .path-title {
    font-size: 1.2rem !important;
  }

  /* — COMPLETADO móvil — */
  .thanks-area {
    padding: 24px 0 !important;
  }
  .thanks-area .section-inner {
    padding: 24px 14px !important;
    margin: 0 8px !important;
    border-radius: var(--r-lg) !important;
  }
  .thanks-area .section-icon {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.4rem !important;
    margin-bottom: 16px !important;
  }
}

/* ────────────────────────────────────
   ≤ 400px — Móvil muy pequeño (320–400px)
   iPhone SE, Galaxy A series pequeños
──────────────────────────────────── */
@media (max-width: 400px) {

  /* Grilla: seguir con 2 columnas pero gap mínimo */
  #myTable {
    gap: 8px !important;
  }

  /* Producto nombre aún más compacto */
  .product-item .product-name {
    font-size: .72rem !important;
  }
  .product-item .product-price {
    font-size: .82rem !important;
  }
  .product-item .bottom-content {
    padding: 8px 8px 10px !important;
  }

  /* Botón carrito compacto */
  .product-item .addto-cart {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
  }

  /* Navbar ultra-compacto */
  .navbar-sticky2 .logo img {
    max-height: 28px !important;
  }
  .header-action-items1 .account {
    font-size: .7rem !important;
    padding: 5px 8px !important;
  }

  /* Banner mínimo */
  .banner.banner-3 .banner-single {
    min-height: 160px !important;
  }
  .banner-heading {
    font-size: 1.1rem !important;
  }
  .review-text {
    display: none !important; /* ocultar descripción en pantallas muy pequeñas */
  }

  /* Modal: scroll natural */
  .product-details-popup .product-title {
    font-size: .88rem !important;
  }
  .product-details-popup .product-price {
    font-size: 1.05rem !important;
  }

  /* Footer features: ocultar en pantallas muy pequeñas para ahorrar espacio */
  .footer.footer-2 .footer-features {
    display: none !important;
  }
}

/* ══ ALTURA UNIFORME EN GRILLA ══
   align-items:stretch hace que todos los divCont sean igual de altos,
   y height:100% hace que el card llene ese espacio.
   flex-direction:column + margin-top:auto en .card-btns empuja
   los botones al fondo → todos al mismo nivel visual.
═══════════════════════════════════════════════ */
#myTable {
  align-items: stretch !important;
}
#myTable > .producto-item {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.product-item {
  height: 100% !important;
}
/* bottom-content crece para llenar el espacio sobrante */
.product-item .bottom-content {
  flex: 1 !important;
}
/* Los botones siempre al fondo */
.card-btns {
  margin-top: auto !important;
}

/* ══ BENEFICIO CORTO ══ */
.product-benefit {
  font-size: .74rem !important;
  color: var(--neu-500) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex-shrink: 0;
}

/* ══ BOTONES DETALLE + COMPRAR EN CARD ══ */
.card-btns {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: auto !important;
}
.card-btn-detalle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex: 1 !important;
  background: transparent !important;
  color: var(--an-700) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  padding: 8px 6px !important;
  border-radius: 50px !important;
  border: 1.5px solid var(--an-200) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .18s, border-color .18s, color .18s !important;
  transform: none !important;
  position: relative !important;
  z-index: 3 !important;
}
.card-btn-detalle:hover {
  background: var(--an-50) !important;
  border-color: var(--an-700) !important;
  color: var(--an-800) !important;
  text-decoration: none !important;
}
.card-btn-detalle i { font-size: .72rem !important; pointer-events: none; }
.card-btn-detalle span { pointer-events: none; }

/* Forzar flex:1 en addto-cart dentro de card-btns */
.card-btns .addto-cart,
.card-btns .product-item .addto-cart {
  /*flex: 1 !important;*/
  padding: 8px 6px !important;
}

/* Forzar color blanco en boton comprar — maxima especificidad */
body .product-item .addto-cart,
body .product-item a.addto-cart,
body .product-item .addto-cart:link,
body .product-item .addto-cart:visited,
body .product-item .addto-cart:hover,
body .product-item .addto-cart:focus,
body .product-item .addto-cart span,
body .product-item .addto-cart .cart-label,
body .product-item .addto-cart i { color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════
   MODAL COMPRAR — REDISEÑO MÓVIL COMPLETO
═══════════════════════════════════════════════════════ */

/* --- Desktop base: grid 2 columnas --- */
.rts-product-details-section2 .product-details-popup {
  display: flex !important;
  flex-direction: column !important;
  background: var(--white) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1px solid var(--an-100) !important;
}

.product-details-popup .details-product-area {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  min-height: 440px !important;
  flex: 1;
  overflow: hidden;
}

/* Botón cerrar */
.product-details-close-btn {
  position: absolute !important;
  top: 12px !important; right: 12px !important; z-index: 30 !important;
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--an-100) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .85rem !important; cursor: pointer !important;
  color: var(--neu-700) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
  transition: all .18s !important;
}
.product-details-close-btn:hover {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}

/* Columna imagen */
.product-details-popup .product-thumb-area {
  background: linear-gradient(145deg, var(--an-50) 0%, #c9e8f5 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 320px !important;
  overflow: hidden !important;
  position: relative !important;
}
.product-details-popup .product-thumb-area img#imagenSRC {
  width: 100% !important; height: 280px !important;
  object-fit: contain !important; padding: 24px !important; display: block !important;
}

/* Columna contenido */
.product-details-popup .contents {
  padding: 28px 28px 24px !important;
  display: flex !important; flex-direction: column !important;
  overflow-y: auto !important; max-height: 90vh !important;
  gap: 10px !important;
}
.product-details-popup .product-catagory {
  display: inline-flex !important; align-items: center !important;
  font-size: .66rem !important; font-weight: 800 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--an-700) !important;
  background: var(--an-50) !important; border: 1px solid var(--an-200) !important;
  padding: 3px 10px !important; border-radius: 50px !important; width: fit-content !important;
}
.product-details-popup .product-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.25rem !important; font-weight: 700 !important;
  color: var(--neu-900) !important; line-height: 1.3 !important;
  margin: 0 !important;
}
.product-details-popup .product-price {
  font-size: 1.6rem !important; font-weight: 800 !important;
  color: var(--an-800) !important; letter-spacing: -.4px !important;
  line-height: 1 !important;
}
.product-details-popup #obs {
  font-size: .84rem !important; color: var(--neu-500) !important;
  line-height: 1.7 !important;
  max-height: 90px !important; overflow-y: auto !important;
  padding: 10px 14px !important;
  background: var(--neu-50) !important;
  border-left: 3px solid var(--an-400) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
}
.product-details-popup .product-bottom-action {
  display: flex !important; align-items: center !important;
  gap: 10px !important; flex-wrap: nowrap !important;
}
.product-details-popup .quantity-edit {
  display: flex !important; align-items: center !important;
  border: 1.5px solid var(--an-200) !important;
  border-radius: var(--r-sm) !important; overflow: hidden !important;
  flex-shrink: 0 !important;
}
.product-details-popup .quantity-edit .button {
  width: 38px !important; height: 46px !important;
  background: var(--an-50) !important; color: var(--neu-700) !important;
  border: none !important; font-size: .9rem !important; cursor: pointer !important;
}
.product-details-popup .quantity-edit .button:hover { background: var(--an-100) !important; }
.product-details-popup .quantity-edit .input {
  width: 46px !important; height: 46px !important;
  text-align: center !important; font-weight: 700 !important;
  border: none !important;
  border-left: 1px solid var(--an-200) !important;
  border-right: 1px solid var(--an-200) !important;
  outline: none !important; background: var(--white) !important;
}
.addto-cart-btn {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  background: linear-gradient(135deg, var(--an-700) 0%, var(--an-800) 100%) !important;
  color: var(--white) !important;
  font-weight: 700 !important; font-size: .88rem !important;
  padding: 12px 20px !important; border-radius: var(--r-sm) !important;
  border: none !important; cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(27,108,168,.38) !important;
  transition: opacity .2s !important; flex: 1 !important;
  white-space: nowrap !important; text-decoration: none !important;
}
.addto-cart-btn:hover { opacity: .88 !important; color: var(--white) !important; }

/* ── TABLET ≤ 900px: columnas más compactas ── */
@media (max-width: 900px) {
  .product-details-popup .details-product-area {
    grid-template-columns: 260px 1fr !important;
  }
  .product-details-popup .product-thumb-area img#imagenSRC {
    height: 220px !important;
  }
  .product-details-popup .contents {
    padding: 20px 20px 18px !important;
  }
}

/* ── MÓVIL ≤ 640px: layout VERTICAL ── */
@media (max-width: 640px) {

  .rts-product-details-section2 .product-details-popup {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh !important;
    border-radius: var(--r-xl) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    transition: none !important;
    margin: auto !important;
  }

  /* Handle visual */
  .rts-product-details-section2 .product-details-popup::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--neu-200, #e2e8f0);
    border-radius: 2px;
    margin: 10px auto 2px;
  }

  /* Layout vertical: imagen arriba, contenido abajo */
  .product-details-popup .details-product-area {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Imagen compacta */
  .product-details-popup .product-thumb-area {
    width: 100% !important;
    min-height: 0 !important;
    height: 210px !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
  }
  .product-details-popup .product-thumb-area img#imagenSRC {
    height: 180px !important;
    padding: 14px !important;
    width: 100% !important;
  }
  .product-details-popup .product-thumb-area .product-thumb.zoom {
    min-height: 210px !important;
    height: 210px !important;
  }

  /* Botón cerrar */
  .product-details-close-btn {
    top: 10px !important; right: 10px !important;
    width: 30px !important; height: 30px !important;
  }

  /* Contenido */
  .product-details-popup .contents {
    padding: 14px 14px 20px !important;
    max-height: none !important;
    overflow-y: visible !important;
    gap: 8px !important;
  }

  .product-details-popup .product-title {
    font-size: .98rem !important;
    line-height: 1.35 !important;
  }
  .product-details-popup .product-price {
    font-size: 1.4rem !important;
  }
  .product-details-popup #obs {
    font-size: .78rem !important;
    max-height: 65px !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
  }

  /* Fila cantidad + botón */
  .product-details-popup .product-bottom-action {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .product-details-popup .quantity-edit .button {
    width: 34px !important; height: 42px !important;
  }
  .product-details-popup .quantity-edit .input {
    width: 42px !important; height: 42px !important;
  }
  .addto-cart-btn {
    flex: 1 !important;
    font-size: .83rem !important;
    padding: 11px 12px !important;
  }

  /* Metadatos */
  .product-details-popup .product-uniques {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .product-details-popup .product-unipue {
    font-size: .66rem !important;
    padding: 3px 7px !important;
  }
}

/* ── MÓVIL PEQUEÑO ≤ 400px ── */
@media (max-width: 400px) {
  .product-details-popup .product-thumb-area {
    height: 180px !important;
  }
  .product-details-popup .product-thumb-area img#imagenSRC {
    height: 160px !important;
  }
  .product-details-popup .product-title {
    font-size: .92rem !important;
  }
  .product-details-popup .product-price {
    font-size: 1.25rem !important;
  }
  .addto-cart-btn {
    font-size: .8rem !important;
    padding: 11px 10px !important;
  }
}

/* ══════════════════════════════════════════════
   SCROLL-TO-TOP — reposicionar para no tapar
   el botón flotante de WhatsApp
   WA está en: right 22px / bottom 24px
   Scroll-top se mueve encima del WA
══════════════════════════════════════════════ */
.scroll-top-btn,
.scroll-top-btn1,
.scroll-top-btn2,
.scroll-top-btn.scroll-top-btn1.scroll-top-btn2 {
  /* Centrado sobre el botón de WhatsApp */
  right:  22px !important;  /* alineado con el WA (58px de ancho) */
  bottom: 94px !important;  /* 24px WA + 58px WA + 12px gap */
}

/* En hover, subir en lugar de bajar para no tapar el WA */
.scroll-top-btn:hover {
  bottom: 100px !important;
}

/* Móvil: ajuste proporcional al tamaño reducido del WA */
@media (max-width: 768px) {
  .scroll-top-btn,
  .scroll-top-btn1,
  .scroll-top-btn2,
  .scroll-top-btn.scroll-top-btn1.scroll-top-btn2 {
    right:  16px !important;   /* igual que WA en móvil */
    bottom: 82px !important;   /* 18px WA + 52px WA + 12px gap */
  }
  .scroll-top-btn:hover {
    bottom: 88px !important;
  }
}