/* =====================================================================
   4-produtos.css  |  FILTROS E CARTÕES DOS PRODUTOS
   ===================================================================== */

/* linha de filtros (Todos, Novidades) */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}

/* cada botãozinho de filtro; ".on" é o que está selecionado */
.chip{padding:9px 18px;border-radius:999px;background:var(--card);border:1px solid var(--linha);color:var(--muted);cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;transition:.2s}
.chip.on,.chip:hover{color:var(--ink);border-color:var(--accent);background:rgba(255,94,168,.14)}

/* grade de produtos (mínimo de 240px por cartão) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}

/* cartão do produto; começa invisível e aparece com a classe ".show" */
.card{background:var(--card);border:1px solid var(--linha);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s;opacity:0;transform:translateY(20px)}
.card.show{opacity:1;transform:none}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}

/* área da imagem do produto (quadrada). A imagem preenche tudo */
.thumb{aspect-ratio:1/1;position:relative;background:var(--campo);overflow:hidden}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}

/* selo no canto da foto (Novo, Top...) */
.badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;z-index:1}

/* parte de baixo do cartão (nome, descrição, preço, botão) */
.info{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.info h3{font-size:17px}
.info p{font-size:14px;color:var(--muted);flex:1}

/* preço, e o preço antigo riscado (<s>) */
.price{font-size:20px;font-weight:800;margin:6px 0 10px}
.price s{font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}

/* aviso pequeno embaixo do preço (ex: "+ taxa de entrega por conta do cliente") */
.obs{font-size:12px;color:var(--muted);margin:-6px 0 10px}

/* botão "Comprar" ocupa a largura toda do cartão */
.info .btn{width:100%;padding:11px}