/* ==========================================================================
   MINI BIKE KLUB — Shop & Product Card Styles
   ========================================================================== */

.shop-toolbar{
  padding:34px 0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.filter-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:12px;
  letter-spacing:1px;
  padding:10px 20px;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter-btn:hover{ border-color:var(--text); color:var(--text); }
.filter-btn.active{ background:var(--text); color:var(--bg); border-color:var(--text); }

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  margin:1px 0 0;
}
.product-card{
  background:var(--bg);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:opacity .3s var(--ease);
}
.product-card.hidden{ display:none; }
.product-image{
  aspect-ratio:1/1;
  background:var(--border);
  overflow:hidden;
  position:relative;
}
.product-image img{ width:100%; height:100%; object-fit:cover; }
.product-name{ font-size:17px; font-weight:400; margin-top:6px; }
.product-desc{ font-size:13px; line-height:1.5; }
.product-meta{
  display:flex;
  gap:16px;
  font-size:12px;
  color:var(--text-secondary);
  letter-spacing:0.3px;
}
.product-price{ font-size:16px; margin-top:4px; }
.product-actions{
  display:flex;
  gap:10px;
  margin-top:auto;
  padding-top:6px;
}
.product-actions .btn{ flex:1; padding:12px 14px; font-size:12px; }

@media (max-width:1024px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .product-grid{ grid-template-columns:1fr; }
  .product-card{ padding:22px; }
}