@import url('./base.css');
@import url('./layout.css');
@import url('./components.css');
.masonry{ column-count:2; column-gap:12px; }
@media (min-width:901px){  .masonry{ column-count:3; } }
@media (min-width:1201px){ .masonry{ column-count:4; } }

.m-card{
  display:inline-block; width:100%; margin:0 0 12px;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); color:var(--text); break-inside:avoid;
}
.m-media{ background:#0f1013; display:block; border-bottom:1px solid var(--border); }
.m-img{ width:100%; height:auto; display:block; object-fit:contain; }
.m-body{ padding:12px; }
.m-title{ margin:0 0 6px; font-weight:800; font-size:15px; line-height:1.25; }
.m-meta{ color:var(--muted); font-size:.9rem; margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.m-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-price{ font-weight:900; font-size:1rem; color:#fff; }
.btn-mini{
  background:#1b1c20; border:1px solid var(--border);
  color:#d7d7db; border-radius:10px; padding:6px 10px;
  font-weight:700; cursor:pointer;
}
.btn-mini:hover{ border-color:#3a3b41; color:#fff; }