/* ========================================================
   GRADE DE PRODUTOS (grade-produtos.css)
   Usado nas telas: Categoria, Home e Busca
   ======================================================== */

/* ================= Cabeçalho da Categoria ================= */
.categoria-header { padding: 20px 10px; text-align: center; }
.categoria-titulo-pagina { color: var(--cor-primaria); font-size: 1.8rem; }
.categoria-descricao { color: #666; font-size: 0.9rem; margin-top: 5px; }

/* ================= Grade de Produtos (Estilo App) ================= */
.produtos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 10px 40px; align-items: start; }
@media (min-width: 768px) { 
    .produtos-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; padding: 0 20px; max-width: 1200px; margin: 0 auto; } 
}

.produto-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column; text-align: center; }

/* ================= Imagem do Produto Blindada ================= */
.produto-imagem-container { display: block; width: 100%; aspect-ratio: 3/4; background-color: #f1f1f1; overflow: hidden; margin: 0; padding: 0; }
.produto-imagem-container img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; margin: 0; padding: 0; border: none; }
.produto-sem-imagem { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #eee; color: #aaa; font-size: 0.8rem; }

/* ================= Ajuste Fino do Card ================= */
.produto-info { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.produto-titulo { font-size: 0.85rem; color: #555; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

/* Preços */
.preco-normal { font-size: 1.1rem; font-weight: bold; color: #333; }
.preco-pix { font-size: 0.85rem; font-weight: bold; color: var(--cor-primaria); margin-top: 2px; }
.preco-pix-destaque { color: #ff4785; font-weight: normal; }
.preco-parcelado { font-size: 0.7rem; color: #888; margin-bottom: 12px; margin-top: 2px; }

/* Botão Comprar */
.btn-card-comprar { background-color: var(--cor-botao-comprar); color: white; padding: 10px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.85rem; width: 100%; transition: 0.3s; display: block; text-align: center; text-decoration: none; }
.btn-card-comprar:hover { filter: brightness(0.9); }

/* Categoria Vazia */
.categoria-vazia { grid-column: span 2; text-align: center; padding: 40px; color: #888; font-size: 1.1rem; }
@media (min-width: 768px) { .categoria-vazia { grid-column: span 4; } }