/*
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);
        /* Reestruturação mobile (27/08/2026, referência Nuture collections/all):
           mais respiro entre os cards no celular. --espaco-lg (a mesma variável
           usada no desktop auto-fill acima) já dava ~20px aqui; sobe um degrau
           na escala existente (--espaco-xl, ~32px em 390px) só neste breakpoint,
           sem inventar valor novo nem mexer no gap do grid desktop. */
        gap: var(--espaco-xl);
    }
}

/*
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 e 31/07/2026: 2 correcoes anteriores ja
       tentaram tirar a "moldura" (fundo solido + padding, depois
       aspect-ratio 4/5 revelando o fundo do card atras de foto quadrada).

       Corrigido de novo 21/08/2026 (achado real do Ricardo com print: as
       fotos still-life novas da Fase 5 v2, que ja preenchem o proprio
       quadrado inteiro com cena real, ainda apareciam com borda branca).
       Causa raiz desta vez: mesmo com aspect-ratio 1/1 batendo com a foto,
       o `padding: var(--espaco-sm)` + fundo branco do proprio container
       reservava uma faixa visivel ao redor da imagem (object-fit:contain
       nunca cobre o padding). Correcao definitiva: sem padding nenhum,
       imagem posicionada absoluta cobrindo o card inteiro (object-fit:
       cover), o raio + overflow:hidden do proprio container arredondam a
       foto direto, sem nenhuma superficie de fundo visivel ao redor dela. */
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--cor-linho-2);
    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;
    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: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

.produto-card:hover .produto-card__figura img{
    transform: scale(1.02);
}
.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);
    /* Reestruturação mobile (27/08/2026, referência Nuture collections/all):
       nome do produto ganha mais força/hierarquia subindo um degrau na escala
       fluida existente (--texto-md -> --texto-lg). Peso continua 600 (herdado
       de h1-h6 em 02-base.css): fonts.css só carrega Spectral em 400/600, não
       existe arquivo de peso 700 — forçar font-weight:700 aqui não engrossaria
       de verdade (o navegador cairia no 600 mesmo ou faria negrito sintético),
       então o reforço de hierarquia vem do tamanho, não de um peso inexistente. */
    font-size: var(--texto-lg);
    color: var(--cor-cacau);
    margin-bottom: var(--espaco-xs);
    /* Achado real (medição ao vivo em /loja/ e na categoria Saúde Cardiovascular,
       390px): nomes de produto têm de 1 a 4 linhas conforme o título real
       (ex.: "Total Nutri 600gr" = 1 linha x "Turi-Ita Premium 200G – Suplemento
       Alimentar Artesanal" = 4 linhas), e sem altura reservada o preço/botão
       "Comprar" da fileira inteira desalinha entre os dois cards vizinhos
       (chegou a 59px de diferença medido no DOM). Trava em 2 linhas (clamp)
       com altura mínima de 2 linhas reservada mesmo pra título curto: todo
       card da mesma fileira passa a ter preço/botão na mesma altura. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}
.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);
}