.filter-bar { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem; }
.filter-btn {
  padding:.45rem 1.1rem; border-radius:50px;
  border:1.5px solid var(--border); background:transparent;
  font-family:'DM Sans',sans-serif; font-size:.84rem; font-weight:500;
  color:var(--muted); cursor:pointer; transition:var(--tr);
}
.filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:1.25rem; }

.p-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:var(--tr); animation:fadeUp .4s ease forwards;
  display:flex; flex-direction:column;
}
.p-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent2); }
.p-img-wrap { overflow:hidden; }
.p-img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .4s; }
.p-card:hover .p-img { transform:scale(1.05); }
.p-body { padding:1.1rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.p-tag {
  font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent2); background:var(--accent-lt);
  padding:.17rem .5rem; border-radius:50px; display:inline-block;
  margin-bottom:.5rem; align-self:flex-start;
}
.p-name { font-family:'DM Serif Display',serif; font-size:1.05rem; margin-bottom:.35rem; }
.p-desc { font-size:.85rem; color:var(--muted); line-height:1.55; flex:1; }
.p-specs-mini { display:flex; flex-wrap:wrap; gap:.3rem; margin:.8rem 0; }
.spec-chip {
  font-size:.72rem; font-weight:500;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--muted); padding:.18rem .55rem; border-radius:50px;
}
.p-detail-btn {
  font-size:.8rem; color:var(--accent); font-weight:600;
  display:inline-flex; align-items:center; gap:.3rem; margin-top:auto;
}
.p-detail-btn::after { content:'→'; transition:transform var(--tr); }
.p-card:hover .p-detail-btn::after { transform:translateX(4px); }

/* MODAL */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:2000; display:grid; place-items:center;
  padding:clamp(1rem,3vw,1.5rem);
  opacity:0; pointer-events:none; transition:opacity var(--tr);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--surface); border-radius:var(--radius-lg);
  max-width:640px; width:100%; max-height:90vh; overflow-y:auto;
  position:relative; transform:translateY(22px);
  transition:transform var(--tr); box-shadow:0 24px 80px rgba(0,0,0,.25);
}
.modal-overlay.open .modal { transform:translateY(0); }
.modal-close {
  position:absolute; top:.9rem; right:.9rem;
  background:var(--surface2); border:1px solid var(--border);
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  font-size:.85rem; color:var(--muted); display:grid; place-items:center;
  transition:var(--tr); z-index:1;
}
.modal-close:hover { background:var(--border); }
.m-img { width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:block; }
.m-content { padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,4vw,2rem) 2rem; }
.m-tag { margin-bottom:.65rem; }
.m-title { font-size:clamp(1.3rem,3vw,1.6rem); margin-bottom:.7rem; }
.m-desc { color:var(--muted); line-height:1.75; margin-bottom:1.3rem; font-size:.9rem; }
.m-specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:1.3rem; }
.m-spec {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius); padding:.55rem .8rem; font-size:.82rem;
}
.m-spec strong { display:block; font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.1rem; }
.m-usages { margin-bottom:1.3rem; }
.m-usages h4 { font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.55rem; }
.m-usage-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.m-usage-tag {
  font-size:.79rem; background:var(--accent-lt);
  color:var(--accent2); border:1px solid var(--border);
  padding:.22rem .65rem; border-radius:50px;
}
.m-actions { display:flex; gap:.75rem; flex-wrap:wrap; }

@media (max-width:500px) {
  .m-specs-grid { grid-template-columns:1fr; }
  .filter-bar { gap:.4rem; }
  .filter-btn { font-size:.78rem; padding:.4rem .9rem; }
}