/* ═══════════════ Category + Subcategory ═══════════════ */
.cat-section{margin:20px 0 0}

/* ── Category grid (symmetrical) ── */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:6px
}
.cat-chip{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  transition:all .15s var(--ease);
  user-select:none;
  font-size:11.5px;font-weight:500;
  color:var(--text-soft);
  line-height:1.2
}
.cat-chip::before{
  content:'';
  width:3px;height:3px;
  border-radius:50%;
  background:var(--text-light);
  flex-shrink:0;
  transition:all .15s var(--ease)
}
.cat-chip:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
  box-shadow:0 1px 4px rgba(184,70,43,.06)
}
.cat-chip:hover::before{
  background:var(--accent);
  transform:scale(1.6)
}
.cat-chip.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 2px 8px rgba(184,70,43,.12)
}
.cat-chip.active::before{
  background:#fff;
  transform:scale(1.6)
}

/* ── Subcategory pills ── */
.sub-strip-wrap{
  margin-top:10px;
  animation:fadeSlide .2s var(--ease);
  background:var(--card);
  border:1px solid var(--border-light);
  border-radius:10px;
  padding:10px 12px
}
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.sub-strip{
  display:flex;flex-wrap:wrap;gap:5px
}
.sub-pill{
  padding:5px 12px;
  border-radius:6px;
  border:1px solid #e8ddd0;
  background:#faf5ee;
  font-size:11px;font-weight:500;
  color:#6b5d4a;
  cursor:pointer;white-space:nowrap;
  transition:all .12s var(--ease);
  user-select:none;
  line-height:1.3
}
.sub-pill:hover{
  background:#d4a017;
  color:#fff;
  border-color:#d4a017;
  box-shadow:0 1px 4px rgba(212,160,23,.15)
}
.sub-pill.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 1px 4px rgba(184,70,43,.1)
}