/* Custom look on top of Bootstrap */
:root{
  --brand-start:#6a11cb;
  --brand-end:#2575fc;
  --brand:#5c7cfa;
  --ink:#0f172a;
  --muted:#6b7280;
  --surface:#ffffff;
  --bg:#f6f7fb;
}

*{font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

body.bg-body{ background: var(--bg); color: var(--ink); }

.hero{
  background: linear-gradient(120deg, var(--brand-start), var(--brand-end));
  color:#fff;
}

.brand{
  font-weight:700;
  font-size:1.25rem;
  color:#fff;
}

.filter-card{
  border-radius:1rem;
  background:#fff;
  border:1px solid #eef1f6;
}

.facet-card{
  top: 92px;
  border:1px solid #eef1f6;
  border-radius:1rem;
}

.product-card{
  border:1px solid #eef1f6;
  border-radius:1.25rem;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(31, 38, 135, 0.12);
}

.product-img{ height: 190px; }

.product-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: 3em;
}

.brand-badge, .size-badge{
  background: #f1f5ff;
  border: 1px solid #e3eaff;
  color: #3b5bfd;
}

.price-tag{
  font-weight:700;
  font-size:1.1rem;
  color:#0ea5e9;
}

.btn-cta{
  background: linear-gradient(120deg, var(--brand-start), var(--brand-end));
  color:#fff;
  border:none;
  border-radius: 999px;
  padding:.6rem 1rem;
}
.btn-cta:hover{ opacity:.95; color:#fff; }

.filter-list a.badge{
  border-radius: 999px;
  padding:.5rem .75rem;
  border:1px solid #e8ecf5;
  background:#fff;
  color:#39424e;
  transition: all .15s ease;
  width: fit-content;
}
.filter-list a.badge:hover{ transform: translateY(-1px); }
.filter-list a.badge.active{
  background: linear-gradient(120deg, var(--brand-start), var(--brand-end));
  color:#fff;
  border-color: transparent;
}