/* Grid responsivo similar al de Flutter (1 / 2 / 3 col) */
.cards{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  border:1px solid #eee; border-radius:16px;
  overflow:hidden; background:#fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.card-img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
}
.card-body{ padding:14px; }
.badge{
  display:inline-block; font-weight:700; color:#fff;
  background:#0D1B2A; border-radius:999px;
  padding:.35rem .65rem; margin-bottom:6px;
}
.card-title{ margin:6px 0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-specs{ margin:6px 0; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.price{ margin-top:8px; font-weight:800; color:#0D1B2A; }
.actions{ margin-top:10px; display:flex; gap:8px; }
.btn{ display:inline-flex; align-items:center; gap:6px; padding:.55rem .9rem; border-radius:10px; border:1px solid #ddd; text-decoration:none; }
.btn.primary{ background:#0D1B2A; color:#fff; border-color:#0D1B2A; }
.btn.disabled{ opacity:.4; pointer-events:none }

/* Skeletons */
.skeleton-img{
  width:100%; aspect-ratio:16/9; background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size:200% 100%; animation:shimmer 1.2s infinite;
}
.skeleton-line{
  height:14px; border-radius:6px; background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size:200% 100%; animation:shimmer 1.2s infinite; margin:10px 0 0;
}
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }