:root{--brand-1:#ff2aa1;--brand-2:#7a3cff;--text:#1b1b1f;}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);} .brand-gradient{background:linear-gradient(135deg,var(--brand-1),var(--brand-2));}.navbar-brand{font-weight:800;letter-spacing:.5px}.card-title{font-weight:700}.btn-whatsapp{background:#25D366;color:#fff;border:none}.btn-whatsapp:hover{filter:brightness(.95)}.badge-cat{background:rgba(122,60,255,.1);color:var(--brand-2)}.hero{color:#fff;border-radius:20px;padding:28px}.search-input{border-radius:12px}footer{font-size:.9rem;color:#555}
/* Contenedor cuadrado para imágenes del catálogo */
.product-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;       /* Mantiene el cuadro cuadrado */
  background: #fff;          /* Fondo blanco (puedes usar #f7f7f7 si prefieres) */
  border-radius: 8px 8px 0 0; /* Redondeo concordante con la card */
  overflow: hidden;          /* Oculta cualquier desbordamiento */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La imagen se encaja completa y centrada */
.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* Contener = mostrar toda la imagen sin recortar */
  object-position: center;   /* Centrada */
  display: block;
  background: #fff;          /* Fondo por si la imagen tiene transparencia */
}

/* Placeholder cuando no hay imagen */
.product-image-placeholder {
  color: #ccc;
  font-size: 48px;
}

/* Miniaturas en el panel admin */
.admin-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* También 'contain' en admin */
  object-position: center;
}