/* Shared UI styles used across templates (Tailwind CDN + a few custom utilities). */

.sg { font-family: 'Space Grotesk', sans-serif; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Category pills */
.cat-tab {
  cursor: pointer;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  transition: all 0.18s;
  white-space: nowrap;
}
.cat-tab:hover { border-color: #2563eb; color: #2563eb; }
.cat-tab.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Product cards */
.product-card { transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(37, 99, 235, 0.12); }

.badge-new { background: #2563eb; color: #fff; }
.badge-feat { background: #0f172a; color: #fff; }
.badge-promo { background: #dc2626; color: #fff; }

.thumb-active { border-color: #2563eb !important; }

@media (prefers-reduced-motion: reduce) {
  .product-card { transition: none; }
  .product-card:hover { transform: none; }
}