/* ============================================================
   CATALOGO — Catálogo: card de produto e grade da vitrine
   Parte do app.css original. A ORDEM dos <link> no index.html
   reproduz a ordem deste arquivo: não reordene, a cascata depende disso.
   ============================================================ */

/* card produto */
.produto-card{
  background:#fff; border:1px solid #eef1f5; border-radius:.9rem; overflow:hidden;
  cursor:pointer; transition:box-shadow .2s, transform .2s;
  display:flex; flex-direction:column; height:100%;
}
.produto-card:hover{ box-shadow:0 10px 30px rgba(30,42,58,.10); transform:translateY(-3px); }
.produto-card img{
  width:100%; aspect-ratio:1; object-fit:cover; background:#f1f5f9; display:block;
  contain:paint;              /* isola o desenho: o navegador não recalcula o resto */
  backface-visibility:hidden; /* evita tremidas na rolagem */
}
.produto-card .card-body{ padding:.6rem .7rem .8rem; display:flex; flex-direction:column; flex:1; }
.produto-card .card-nome{ font-size:.85rem; line-height:1.25; color:#1e293b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.1rem; }
.produto-card .card-preco{ margin-top:auto; padding-top:.4rem; }


/* ===== grade da vitrine (4 colunas no desktop) =====
   CSS próprio: não depende do compilador do Tailwind. */
.grade-produtos{ display:grid; gap:.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px){  .grade-produtos{ gap:.75rem; grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1024px){ .grade-produtos{ gap:1rem;   grid-template-columns:repeat(4,minmax(0,1fr)); } }