/* ═══════════════════════════════════════════════════════════════════════
 * tienda-instacart-skin.css
 * v84.x — Reskin visual estilo Instacart para tienda.html
 *
 * REGLA DE ORO: este archivo SOLO contiene CSS. No toca JS, no toca DOM.
 * Si Pepe no le gusta, borra el <link> en tienda.html y vuelve atrás.
 *
 * Cómo funciona:
 *   - Carga DESPUÉS del <style> inline de tienda.html
 *   - Sobrescribe selectores existentes (.pc, .pim, .pad, .ppr, etc.)
 *   - No introduce clases nuevas, solo reskin de las que ya hay
 *   - La estructura DOM, IDs, onclick, JS y handlers quedan intactos
 *
 * Tu paleta verde --g:#16A344 ya pega con el estilo Instacart, así que
 * la reuso. Solo bajo el peso de bordes, suavizo radios, ajusto tipografía,
 * y cambio el botón Add de naranja a verde Instacart.
 * ═════════════════════════════════════════════════════════════════════ */

/* ─── Variables propias del skin ───────────────────────────────────── */
/* Estas no chocan con tu :root porque tienen prefix --ic- */
:root {
  --ic-green:        #16A344;   /* tu verde actual — pegado a Instacart */
  --ic-green-dark:   #0F5132;
  --ic-ink:          #1a1a1a;
  --ic-ink-2:        #374151;
  --ic-muted:        #6b7280;
  --ic-muted-2:      #9ca3af;
  --ic-bg-card:      #ffffff;
  --ic-bg-muted:     #f3f4f6;
  --ic-bg-soft:      #fafafa;
  --ic-border:       #e5e7eb;
  --ic-border-soft:  #f3f4f6;
  --ic-yellow:       #f59e0b;
}

/* ─── PRODUCT CARD: layout limpio con borde sutil ─────────────────── */
/* Mantengo overflow:hidden del original para que nada se salga. */
.pc {
  background: var(--ic-bg-card) !important;
  border: 1px solid var(--ic-border-soft) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  overflow: hidden !important;
  transition: border-color .15s, box-shadow .15s !important;
  position: relative;
}
.pc:hover {
  border-color: var(--ic-border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* ─── IMAGE CONTAINER: blanco puro, más espacio, sin bg crema ────── */
/* Importante: NO sobrescribir si .pim trae style inline (caso paquetes
   que usan background:#fef2e8 para el grid 2x2 de thumbs). El inline
   gana naturalmente porque tiene mayor especificidad que cualquier !important. */
.pim {
  background: var(--ic-bg-card) !important;
  border-radius: 8px !important;
  aspect-ratio: 1 !important;
  padding: 14px !important;
}
/* Excepción explícita: el .pim de paquetes tiene background:#fef2e8 inline.
   Ese gana sobre nuestro override y le devolvemos el padding original. */
.pim[style*="#fef2e8"] {
  padding: 0 !important;
}
.pim img {
  object-fit: contain !important;
  /* Quitamos mix-blend-mode: multiply porque rompía las fotos del
     grid 2x2 de paquetes (donde los divs hijos tienen bg blanco). */
}

/* ─── BADGE de promo/nuevo: pill arriba-izquierda ──────────────── */
/* Descuento: pill rojo (negativo, atrae atención sin chocar con el verde
   del botón Add que vive arriba-derecha). NUEVO: pill verde claro. */
.pbg {
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 4 !important;
}
.pbg.bn {
  background: #ef4444 !important;
}

/* ─── BODY del card: padding más generoso, separación clara ──────── */
.pbd {
  padding: 12px 8px 8px !important;
  gap: 4px;
}

/* ─── CATEGORÍA arriba: más sutil, sin uppercase agresivo ────────── */
.pcat {
  font-size: 10px !important;
  color: var(--ic-muted-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  opacity: 1 !important;
}

/* ─── NOMBRE del producto: ajusto peso para verse Instacart ─────── */
.pnm {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--ic-ink) !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
  -webkit-line-clamp: 3 !important;
  min-height: 3.6em !important;
}

/* ─── DESCRIPCIÓN/UNIDAD: gris muted ─────────────────────────────── */
.pds {
  font-size: 12px !important;
  color: var(--ic-muted) !important;
  margin-bottom: 8px !important;
}

/* ─── FOOTER del card: solo precio, el botón Add flota arriba ─────── */
/* ─── FOOTER del card: precio arriba, botón abajo (vertical stack) ── */
/* Cambio clave v84.4: en lugar de pelearse precio y botón por el mismo
   ancho horizontal o flotar (que dejaba el botón "entre cards"), los
   apilo verticalmente. Precio ocupa toda la línea, botón ocupa toda
   la línea. Cero riesgo de encimado, cero position:absolute, cero trucos.
   Patrón Walmart/HEB/Amazon. Más legible cuando los nombres son largos. */
.pft {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: auto !important;
}

/* ─── PRECIO: estilo Instacart con peso 700 ─────────────────────── */
.ppr {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ic-ink) !important;
  letter-spacing: -0.02em !important;
}

/* ─── UNIDAD (/lb, /pza): pegado al precio ──────────────────────── */
.pun {
  font-size: 11px !important;
  color: var(--ic-muted) !important;
  font-weight: 400 !important;
  margin-left: 3px !important;
}

/* ─── BOTÓN ADD: pill verde a ancho completo abajo del precio ────── */
/* Sin position:absolute. Vive en el footer normal del card como hijo
   flex. Toma todo el ancho disponible. Imposible que se encime con el
   precio porque están en líneas distintas del column flex. */
.pad {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: var(--ic-green) !important;
  color: #fff !important;
  border: none !important;
  font-size: 0 !important;  /* oculta el "+" del HTML */
  font-weight: 600 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  cursor: pointer;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  box-shadow: none !important;
  transition: background .15s, transform .1s !important;
  flex-shrink: 0;
}
.pad:hover {
  background: var(--ic-green-dark) !important;
  transform: none !important;
}
.pad:active {
  transform: scale(0.98) !important;
}
.pad::before {
  content: "+ Add";
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Excepción: paquete (botón con bg #dc2626 inline) muestra emoji 🔥 */
.pad[style*="dc2626"] {
  font-size: 18px !important;
}
.pad[style*="dc2626"]::before {
  content: none !important;
}

/* ─── QUANTITY CONTROLS: cuando ya está en carrito ──────────────── */
/* Mismo tratamiento: ancho completo abajo del precio. */
.qc {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  height: 36px !important;
  background: var(--ic-green) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 3px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
}
.qb {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.qb:hover {
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}
.qn {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  flex: 1 !important;
  text-align: center !important;
}

/* ─── GRID: gap más amplio entre cards ──────────────────────────── */
.pg {
  gap: 18px !important;
}

/* ─── TOPBAR (la barra verde de arriba con WhatsApp/teléfono) ──── */
/* Mantenemos la funcionalidad pero en un verde más limpio */
.topbar {
  background: var(--ic-green-dark) !important;
}

/* ─── PAQUETES: borde naranja más sutil, mantenemos diferenciador */
/* No quitamos la marca de paquete porque es parte de tu modelo de negocio */
.pc[style*="border:2px solid #e85d24"],
.pc[style*="border: 2px solid #e85d24"] {
  border: 1px solid #fed7aa !important;
  background: #fffbf7 !important;
}

/* ─── EVITAR DUPLICADO: paquetes ya salen en hot-section, ocultarlos
   del catálogo regular #pgrid para no verlos dos veces. ──────────── */
#pgrid .pc[style*="border:2px solid #e85d24"],
#pgrid .pc[style*="border: 2px solid #e85d24"] {
  display: none !important;
}

/* ─── HOT SECTION: cards al mismo tamaño que el catálogo normal ─── */
/* Antes ocupaban 2x el espacio (grid minmax(320px,1fr) + imagen 200px
   + precio 26px). Ahora se ven igual de compactas que las regulares.
   Mantenemos el diferenciador visual (borde rojo, badge HOT, ribbon de
   ahorro) pero todo proporcional al resto del catálogo. */

#hot-section {
  background: transparent !important;  /* sin fondo crema agresivo */
}

/* Grid: mismo número de columnas que .pg (5 → 4 → 3 → 2) */
.hot-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 1280px) {
  .hot-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 960px) {
  .hot-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  .hot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Card: borde rojo más sutil, sin sombra exagerada, padding compacto */
.hot-card {
  background: #fff !important;
  border: 1.5px solid #fecaca !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.hot-card:hover {
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239,68,68,0.08) !important;
  transform: none !important;
}

/* Imagen: aspect-ratio 1:1 igual que el resto del catálogo.
   Padding 14px solo si el contenido es un <img> directo. Si es un grid 2x2
   (paquete con thumbs), sin padding para que ocupe toda la card. */
.hot-card-img {
  height: auto !important;
  aspect-ratio: 1 !important;
  background: #fff !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
}
/* Caso normal: imagen directa con padding interior */
.hot-card-img > img {
  padding: 14px;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* Caso grid 2x2: el div interior ocupa todo */
.hot-card-img > div[style*="grid"] {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Cinta diagonal "AHORRA $X": más pequeña */
.savings-ribbon {
  font-size: 10px !important;
  padding: 4px 36px !important;
  top: 10px !important;
  left: -34px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Badge HOT: pill compacto arriba-derecha */
.hot-badge {
  background: #ef4444 !important;
  padding: 3px 9px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
  top: 10px !important;
  right: 10px !important;
}

/* Body de la card: padding más sano */
.hot-card-body {
  padding: 12px 8px 8px !important;
  gap: 4px !important;
}

/* Categoría: tamaño normal del catálogo */
.hot-card-cat {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}

/* Nombre: tamaño normal del catálogo */
.hot-card-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ic-ink) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
}

/* Descripción: tamaño normal */
.hot-card-desc {
  font-size: 12px !important;
  color: var(--ic-muted) !important;
  margin-bottom: 8px !important;
}

/* Lista de productos del paquete: más compacta */
.hot-card-items {
  font-size: 10px !important;
  padding: 6px 8px !important;
  max-height: 60px !important;
  border-radius: 6px !important;
  margin: 4px 0 !important;
}
.hot-card-items-h {
  font-size: 9px !important;
  margin-bottom: 2px !important;
}
.hot-card-item {
  padding: 1px 0 !important;
  font-size: 10px !important;
}

/* Footer: precio + CTA apilados verticalmente como las cards normales */
.hot-card-foot {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin-top: auto !important;
}

/* Precios: tamaño normal del catálogo (no 26px gigante) */
.hot-card-prices {
  line-height: 1.1 !important;
}
.hot-card-prices .was {
  font-size: 11px !important;
  color: var(--ic-muted-2) !important;
  margin-bottom: 1px !important;
}
.hot-card-prices .now {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ic-ink) !important;
  letter-spacing: -0.02em !important;
}
.hot-card-prices .pct {
  font-size: 10px !important;
  font-weight: 600 !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  margin-top: 3px !important;
}

/* Botón CTA: pill ancho completo verde como los demás */
.hot-card-cta {
  background: var(--ic-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  height: 36px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hot-card-cta:hover {
  background: var(--ic-green-dark) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* "Vence en" timer: más compacto */
.hot-card-expires {
  font-size: 10px !important;
  padding: 3px 7px !important;
  bottom: 8px !important;
  left: 8px !important;
}

/* ─── CARRITO LATERAL: limpieza visual ──────────────────────────── */
/* Mantengo todos los IDs y la estructura, solo refresco los acentos */
.cbadge {
  background: var(--ic-green) !important;
  color: #fff !important;
}

/* ─── BANNER CAROUSEL: respeto el carrusel de banners pero suavizo */
/* No toco la estructura — solo ajusto los CTA para consistencia    */
.banner-cta-v7 {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ─── EYEBROWS de los banners: pill consistente ─────────────────── */
.banner-textbox-v7 .eyebrow {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

/* ─── NAV LINKS: peso más liviano ────────────────────────────────── */
.nl {
  font-weight: 500 !important;
}
.nl.on {
  font-weight: 600 !important;
}

/* ─── BOTONES NAV (carrito, login, miscompras): radius pill ──────── */
.nbtn {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* ─── RESPONSIVE: en mobile, más respiro ────────────────────────── */
@media (max-width: 640px) {
  .pc {
    padding: 6px !important;
  }
  .pbd {
    padding: 10px 6px 6px !important;
  }
  .ppr {
    font-size: 16px !important;
  }
  /* En mobile el botón sigue siendo de ancho completo, solo más bajo */
  .pad {
    height: 32px !important;
  }
  .qc {
    height: 32px !important;
  }
}

/* ─── ANIMACIÓN suave al agregar al carrito ────────────────────── */
@keyframes ic-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.qc {
  animation: ic-pop 0.18s ease-out;
}