/* ============================================================
   CLIRO.COM — PRODUTOS PAGE CSS
============================================================ */
.products-layout { padding:40px 0 80px; }
.products-layout > .container {
  display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start;
}
/* Sidebar */
.sidebar {
  background:#fff; border-radius:var(--radius);
  border:1.5px solid var(--border); padding:28px;
  position:sticky; top:88px;
}
.sidebar h3 {
  font-family:var(--font-h); font-size:1rem; font-weight:700;
  margin-bottom:16px; color:var(--dark);
}
.cat-filter-list { margin-bottom:32px; }
.cat-filter-btn {
  width:100%; text-align:left; background:none; border:none;
  padding:10px 14px; border-radius:var(--radius-sm);
  font-family:var(--font-b); font-size:0.88rem; font-weight:500;
  color:var(--gray); cursor:pointer; display:block; margin-bottom:2px;
  transition:background var(--t), color var(--t), padding-left var(--t);
  position:relative; overflow:hidden;
}
.cat-filter-btn::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--red);
  transform:scaleY(0); transition:transform var(--t);
  border-radius:0 3px 3px 0;
}
.cat-filter-btn:hover { background:var(--red-pale); color:var(--red); padding-left:20px; }
.cat-filter-btn.active { background:var(--red); color:#fff; }
.cat-filter-btn.active::before { transform:scaleY(1); background:#fff; }
.sort-select {
  width:100%; padding:10px 14px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-family:var(--font-b); font-size:0.88rem;
  color:var(--dark); background:#fff; cursor:pointer; outline:none;
  transition:border-color var(--t);
}
.sort-select:focus { border-color:var(--red); }
/* Main */
.products-main { min-width:0; }
.results-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.results-count { font-size:0.88rem; color:var(--gray); font-weight:500; }
.products-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px;
}
/* Filter transitions */
.pcard.fade-out { opacity:0; transform:scale(0.94); transition:opacity 0.25s, transform 0.25s; }
.pcard.fade-in  { animation:cardIn 0.4s var(--ease) forwards; }
@keyframes cardIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
/* No results */
.no-results {
  text-align:center; padding:80px 32px; display:none;
}
.no-results .nr-icon { font-size:4.5rem; margin-bottom:20px; animation:bounce 2s ease-in-out infinite; }
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-14px); }
}
.no-results h3 { font-family:var(--font-h); font-size:1.5rem; font-weight:800; margin-bottom:8px; }
.no-results p { color:var(--gray); }

@media(max-width:900px){
  .products-layout > .container { grid-template-columns:1fr; }
  .sidebar { position:static; }
}