/* ═══════════════════════════════════════════════════
   PiesAcabeza — Estilos Personalizados
   ═══════════════════════════════════════════════════ */

/* ── Hero con gradiente oscuro ── */
.hero-bg {
  background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
  position: relative;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 50%, rgba(250,204,21,0.08) 0%, transparent 70%);
}

/* ── Cards de categoría ── */
.cat-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* ── Tarjetas de producto ── */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* ── Botón "Agregar" ── */
.add-to-cart-btn {
  background: #f9fafb;
  color: #111827;
  border: 2px solid #e5e7eb;
}
.add-to-cart-btn:hover {
  background: #fef08a;
  border-color: #facc15;
  color: #111827;
}
.add-to-cart-btn.in-cart {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

/* ── Botones de cantidad en carrito ── */
.qty-btn {
  transition: transform 0.1s ease;
}
.qty-btn:active {
  transform: scale(0.9);
}

/* ── Filtros activos ── */
.active-filter {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}

/* ── Badges de productos ── */
.badge-nuevo, .badge-new {
  background: #dbeafe;
  color: #1d4ed8;
}
.badge-oferta {
  background: #fef9c3;
  color: #854d0e;
}
.badge-bestseller {
  background: #dcfce7;
  color: #166534;
}
.badge-premium {
  background: #f3e8ff;
  color: #7e22ce;
}
.badge-popular {
  background: #ffe4e6;
  color: #be123c;
}

/* ── Panel del carrito ── */
.cart-panel {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Items del carrito con animación ── */
.cart-item {
  animation: slideIn 0.2s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Toast animación ── */
#toast {
  transition: opacity 0.3s ease;
}

/* ── Tamaño de botones de talla ── */
.size-btn:hover {
  background: #fef9c3;
  border-color: #facc15;
}

/* ── Scroll bar personalizada ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Truncate 2 líneas ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Inputs del formulario de pago ── */
#paymentForm input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);
  border-color: #facc15;
}

/* ── Animación de loading spinner ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.fa-spin {
  animation: spin 0.8s linear infinite;
}

/* ── z-index layers ── */
.z-60 { z-index: 60; }
.z-70 { z-index: 70; }
.z-80 { z-index: 80; }

/* ── Modal backdrop ── */
#checkoutModal,
#successModal,
#productModal {
  backdrop-filter: blur(4px);
}

/* ── Responsive: ocultar buscador en móvil ── */
@media (max-width: 768px) {
  .hero-bg h1 {
    font-size: 2.5rem;
  }
}