/*
Card de produto — reconstruído do zero (não herda a caixa branca com sombra
+ pílula grande do tema antigo). Referências reais: Lula Avocado Oil,
Deadstock Coffee, Flora Cafe — produto com respiro grande em fundo neutro,
sem chrome pesado, altura de card consistente via aspect-ratio fixo.
*/

.grade-produtos{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--espaco-lg);
}
@media (max-width: 600px){
    .grade-produtos{
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
Redesign minimalista/futurista (07/08/2026, 3a passada): Ricardo pediu o
mesmo padrao do produto unico aplicado "aos outros produtos" (Loja +
"Mais produtos" do cross-sell, ambos reaproveitam este mesmo card/grid).
Como sao 12-16+ cards por tela, um glow por card ficaria poluido — a
mesma sensacao de vidro/luz ambiente aqui vem de um glow UNICO, sutil,
atras do topo da grade inteira (nao atras de cada card), mais a elevacao
de vidro no proprio card no hover (ja existia sombra, agora ganha o
vidro real por cima). */
.grade-produtos{
    position: relative;
}
.grade-produtos::before{
    content: "";
    position: absolute;
    top: -8%;
    left: 10%;
    width: 55%;
    height: 40%;
    background: radial-gradient(circle, rgba(156, 178, 154, 0.35), transparent 65%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.produto-card{
    position: relative;
    z-index: 1;
}

.produto-card{
    display: flex;
    flex-direction: column;
}

.produto-card__figura{
    /* Redesenho de 24/07/2026 (pedido do Ricardo: "muito feia com borda,
       deixe a imagem completa"). Versao anterior criava moldura dupla:
       caixa bege grande (--cor-linho-2) com padding generoso (--espaco-xl)
       segurando a foto branca do produto no meio — duas superficies
       sobrepostas competindo. Correcao: fundo branco (mesmo tom do fundo
       real das fotos de produto), padding bem menor, sem a sombra "de chao"
       sintetica (ela existia so pra disfarcar a caixa, sem a caixa nao faz
       falta). O unico contorno que sobra e o raio + sombra do proprio card,
       a foto passa a ser a superficie, nao um objeto boiando dentro dela.

       Corrigido 31/07/2026 (achado real do Ricardo: "os produtos ainda
       estao com bordas"): a moldura VOLTOU numa forma diferente, nao mais
       CSS, e sim geometria. Confirmado amostrando pixel real de varias
       fotos do catalogo (116+ imagens, fornecedores diferentes): TODAS sao
       quadradas (1:1, ex. 300x300), mas o card usava aspect-ratio 4/5
       (retrato). Com object-fit:contain numa foto quadrada dentro de uma
       caixa retrato, sobra espaco vertical mostrando o fundo do CARD
       (--cor-branco, #fff puro); como o fundo real das fotos quase nunca e
       #fff puro (amostrado rgb(247,247,247) na Vegan Tasty, por exemplo,
       variando por fornecedor), esse gap aparece como um retangulo visivel
       — lido pelo olho como "moldura", mesmo sem nenhuma caixa no CSS.
       Trocar pra aspect-ratio 1/1 (bate com a foto real) elimina o gap por
       completo, pra qualquer tom de fundo que a foto tiver: nao tem mais
       sobra nenhuma pra revelar. */
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--cor-branco);
    border-radius: var(--raio-lg);
    border: 1px solid transparent;
    box-shadow: var(--sombra-sm);
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    padding: var(--espaco-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espaco-md);
}
/* Redesign minimalista/futurista (07/08/2026, 3a passada): borda de vidro
   aparece no hover, reforcando a elevacao que ja existia (sombra-md +
   translateY), mesmo vocabulario visual do resto do redesign. */
.produto-card:hover .produto-card__figura{
    border-color: var(--vidro-borda-clara);
}

.produto-card__figura img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.produto-card:hover .produto-card__figura img{
    transform: scale(1.05);
}
.produto-card:hover .produto-card__figura{
    box-shadow: var(--sombra-md);
    transform: translateY(-4px);
}

/* Badge de promoção — terracota só como acento gráfico (borda), nunca fundo
   com texto claro nem cor de texto pequeno (testado: reprova contraste 4.5:1).
   Vidro claro (achado do pedido de 21/07/2026): mesma regra de contraste, só
   troca o preenchimento sólido linho-2 por vidro translúcido com blur —
   funciona aqui porque o badge fica sobre a FOTO do produto (superfície com
   complexidade por trás), não sobre o fundo liso da página. */
.produto-card__figura .onsale{
    position: absolute;
    top: var(--espaco-sm);
    left: var(--espaco-sm);
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    color: var(--cor-cacau);
    border: 1.5px solid var(--cor-terracota);
    border-radius: var(--raio-pill);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--espaco-2xs) var(--espaco-sm);
    z-index: 2;
}

/* Badge de novidade — categoria real "Lançamentos" do catálogo (ver
   comentário em content-product.php sobre o slug real). Fica no canto
   oposto ao .onsale pra não colidir quando um lançamento também está em
   promoção. */
.produto-card__figura .produto-card__badge{
    position: absolute;
    top: var(--espaco-sm);
    border-radius: var(--raio-pill);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--espaco-2xs) var(--espaco-sm);
    z-index: 2;
}

/* Vidro colorido (achado do pedido de 21/07/2026): mesmo padrão de badge
   translúcido+blur+borda clara medido em quanqton.com.br (tag
   "bg-black/50 backdrop-blur-sm border-brand-sky/40"), adaptado pra manter a
   cor da marca reconhecível (mata), não um cinza/preto genérico. */
.produto-card__badge--novo{
    right: var(--espaco-sm);
    background: rgba(47, 74, 51, 0.55);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--cor-branco);
}

.produto-card__titulo{
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    color: var(--cor-cacau);
    margin-bottom: var(--espaco-xs);
}
.produto-card__titulo a:hover{
    color: var(--cor-terracota);
}

/* Avaliação por estrelas — mesma marcação nativa do WooCommerce
   (.star-rating), só troca a paleta padrão (amarelo) pelas cores da marca.
   Preenchido em terracota, vazio em linho-2. Some sozinha quando o produto
   não tem review nenhum (0 casos é o normal no catálogo hoje). */
.produto-card .star-rating{
    float: none;
    display: block;
    width: 5.4em;
    margin: 0 0 var(--espaco-xs);
    font-size: var(--texto-sm);
}
.produto-card .star-rating::before{
    color: var(--cor-linho-2);
}
.produto-card .star-rating span::before{
    color: var(--cor-terracota);
}

/* Achado real (auditoria de acessibilidade/performance, 01/08/2026): a
   correcao de cor de preco feita antes (product-single.css) so cobria
   ".produto-unico__resumo .price" — aqui no card (Loja, cross-sell) o
   mesmo vazamento do WooCommerce core (".woocommerce-Price-amount",
   dourado/oliva rgb(149,142,9)) continuava vencendo por especificidade,
   e falhava contraste WCAG (2,98:1 contra o minimo de 3:1 pra texto
   grande). Seletor mais especifico looking pro .woocommerce-Price-amount
   por dentro, mesma tecnica ja usada em product-single.css. */
.produto-card__preco,
.produto-card__preco .woocommerce-Price-amount,
.produto-card__preco bdi{
    color: var(--cor-mata) !important;
}
.produto-card__preco{
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-base);
    margin-bottom: var(--espaco-sm);
}
.produto-card__preco del{
    font-weight: 400;
    opacity: 0.6;
    margin-right: var(--espaco-xs);
}
.produto-card__preco ins{
    text-decoration: none;
}

.produto-card .btn{
    align-self: flex-start;
}
/* Precisa vencer a regra genérica .woocommerce a.button (buttons.css) por
   especificidade — no card o botão é discreto/contorno, não pílula sólida. */
.woocommerce .produto-card a.button{
    background: transparent !important;
    color: var(--cor-mata) !important;
    border: 1.5px solid var(--cor-mata) !important;
}
.woocommerce .produto-card a.button:hover{
    background: var(--cor-mata) !important;
    color: var(--cor-branco) !important;
    box-shadow: var(--sombra-sm);
    transform: translateY(-2px);
}