/*
 * Peças COMPARTILHADAS da loja: selo e o CARD DE PRODUTO. A tela de produto,
 * a listagem e a busca usam as mesmas peças, e duas cópias fariam o mesmo card
 * divergir entre telas.
 *
 * Área 6 (a fatia LISTAGEM manda no card), medido no clone:
 * o card do gabarito é uma CAIXA — borda 1px #E8E8ED (B29: a loja escureceu pra #D2D2D7), raio 10px, fundo branco, miolo 12px,
 * foto com respiro de ~9% (390: img 143 em 175 · 1440: img 222,2 em 270,2).
 */

/* ── selo (badge): "Fora de estoque" na foto e o -X% das faixas do Leve mais (D40: o % só mora lá) ── */
.elf-label {
  display: inline-block; font-size: 0.625rem; font-weight: 700; color: #fff;
  background: var(--elf-rosa-escuro); border-radius: var(--elf-radius-pill); padding: 2px 8px; line-height: 1.5;
}
.elf-label-esgotado { background: var(--elf-dark); font-size: 0.6875rem; text-transform: uppercase; line-height: 1.4; }

/* ── grade de cards: 2 colunas no 390 (gap 12), 4 no desktop (gap 16) ── */
.elf-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* ── CARD DE PRODUTO (componente único: relacionados, listagem e busca) ── */
.elf-card {
  border: 1px solid var(--elf-border-light); border-radius: var(--elf-radius);
  background: var(--elf-bg); overflow: hidden;
  /* B64 (#90): sombra suave em 2 camadas (a receita da lifepod), pedido do dono — não muda o tamanho do card */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .10);
  transition: box-shadow .2s, border-color .2s;
}
/* B62 (#88): a moldura do quadrado #FAFAFA atrás da foto caiu de 9% pra 5% de cada lado (9 px no celular, 13 no
   computador) em todos os grids, escolha do dono ("margem mínima, não é sem margem") */
.elf-card-foto { position: relative; display: block; aspect-ratio: 1; padding: 5%; background: var(--elf-bg-tertiary); overflow: hidden; }
.elf-card-foto img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.elf-card-labels { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* respiro medido no gabarito entre o fim da foto e o topo do título: 22px no 390 */
.elf-card-corpo { padding: 22px 12px 12px; }
/* nome inteiro, sem corte em 2 linhas: no líquido o sabor vem no fim do nome (A34) */
.elf-card-titulo {
  font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--elf-text); margin: 0 0 16px; min-height: 35px;
}
/* o card é link em toda parte — nada de sublinhado do navegador (o gabarito não tem) */
.elf-card a { text-decoration: none; }
.elf-card-preco { display: flex; flex-direction: column; gap: 1px; }
/* grades de VÁRIAS fileiras (listagem, busca, relacionados, indica): o cartão e o corpo são subgrid da
   grade, então nome, preço e botões dividem a linha com os vizinhos da MESMA fileira. A linha do nome tem
   a altura do maior nome da fileira (A34) e a do preço a do maior bloco de preço; o preço fica no alto do
   bloco, como antes do B40: fileira só de líquidos com vão 8 até o botão, fileira mista com o vão maior
   no líquido. As vitrines da home são grade de UMA fileira que rola de lado (home.css) e usam o mesmo subgrid. */
/* coluna minmax(0, 1fr): a auto alargava com o Pix nowrap do 320 e levava o botão e o WhatsApp junto.
   stretch (só a foto é afetada; o corpo subgrid estica sempre): com start o WebKit resolve o height:100% da
   img contra a caixa inteira da foto e a imagem desce 15,75 e fica cortada embaixo */
.elf-grade > .elf-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: stretch; }
.elf-grade .elf-card-corpo { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-items: start; }
.elf-grade .elf-card-acoes { grid-row: 3; }   /* 3 e não auto: o cartão sem preço deixa a linha do preço vazia */
.elf-card-topo { display: flex; align-items: center; gap: 6px; }
.elf-card-riscado, .elf-card-riscado .woocommerce-Price-amount {
  font-size: 0.6875rem; font-weight: 400; color: var(--elf-text-tertiary); text-decoration: line-through;
}
.elf-card-pix, .elf-card-pix .woocommerce-Price-amount {
  font-size: 1.25rem; font-weight: 800; color: var(--elf-rosa-escuro); line-height: 1.2;
}
.elf-card-pix small { display: inline-block; font-size: 0.75rem; font-weight: 700; margin-left: 3px; }   /* bloco: o "no Pix" desce inteiro quando não cabe (B44 V10) */
/* no card o "R$" é menor que o número (gabarito); no resumo o mockup manda tamanho único */
.elf-card-pix .woocommerce-Price-currencySymbol { display: inline-block; font-size: 0.75rem; font-weight: 700; }   /* bloco: com letra 200% o valor desce inteiro abaixo do "R$" em vez de cortar o último dígito (B44 V10) */
/* no gabarito só o VALOR é 600; as palavras em volta são 500 */
.elf-card-cartao { font-size: 0.8125rem; font-weight: 500; color: var(--elf-text-secondary); }
.elf-card-cartao .woocommerce-Price-amount { font-weight: 600; }
.elf-card-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; user-select: none; }   /* clique duplo no "Comprar" não seleciona a palavra (B44 V213) */
.elf-card-btn {
  flex: 1 1 0; min-height: 44px;                             /* CONTROLE: ≥44px (gabarito 38px); base 0 sem min-width 0: o botão não encolhe abaixo da palavra maior, o WhatsApp é que desce (B44 V10) */
  display: inline-flex; align-items: center; justify-content: center; text-align: center; /* no 320 o "Ver opções" quebra em 2 linhas em vez de vazar da pílula (A66) */
  background: var(--elf-roxo); color: #fff !important; border-radius: var(--elf-radius);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.385; transition: background .15s;
}
.elf-card-btn:hover { background: var(--elf-roxo-hover); }
.elf-card-zap {
  width: 44px; height: 44px; flex: 0 0 44px;                 /* CONTROLE: ≥44px (gabarito 38px) */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--elf-whatsapp); border-radius: 50%; color: #fff !important; transition: background .15s;
}
.elf-card-zap:hover { background: var(--elf-whatsapp-hover); }
.elf-card-acoes .screen-reader-text { display: none; }
/* o botão de add-to-cart do Woo veste a mesma pílula (o a.button dele vinha inline-block,
   o que jogava o rótulo pro topo dos 44px). O prefixo .woocommerce é necessário: as regras
   de `a.button` do woocommerce.css têm especificidade maior que a classe do tema sozinha. */
.woocommerce .elf-card-acoes a.elf-card-btn {
  display: inline-flex;
  margin: 0; padding: 0 4px; line-height: 1; font-size: 0.8125rem; font-weight: 600;   /* 4 e não 6: o "Ver opções" (72px) cabe em 1 linha no 360; só o 320 quebra (A66) */
  background: var(--elf-roxo); border-radius: var(--elf-radius);
}
.woocommerce .elf-card-acoes a.elf-card-btn:hover { background: var(--elf-roxo-hover); }   /* A108: a regra de cima vencia o :hover */
/* no 320 o "Leia mais" cabe em 1 linha no botão de 64 só sem o padding de lado (o texto tem 59px no WebKit
   e 62 no Chromium); o "Ver opções" (72) segue em 2 linhas dentro da pílula (A66) */
@media (max-width: 359.98px) { .woocommerce .elf-card-acoes a.elf-card-btn { padding: 0; } }
/* "carregando" do Woo: sem o desbotado de 25% e com a rodinha ao lado do texto, não em cima
   dele (A107; se não couber, desce pra linha de baixo); o 2º toque não põe outra unidade (A106) */
.woocommerce .elf-card-acoes a.elf-card-btn.loading { opacity: 1; pointer-events: none; flex-wrap: wrap; }
.woocommerce .elf-card-acoes a.elf-card-btn.loading::after { position: static; margin-left: .53em; }
/* aviso de falha do "Comprar" (carrinho.js, A84): linha própria dentro das ações, 8 abaixo do botão (o gap) */
.elf-card-aviso { flex: 0 0 100%; margin: 0; font-size: 0.75rem; line-height: 1.35; }

/* zoom de 150% a 200% (tela < 280px): 1 card por fileira, senão o valor do Pix não cabe no card (B44 V10) */
@media (max-width: 17.49em) { .elf-grade { grid-template-columns: 1fr; } }
/* tablet em pé e notebook com zoom: 3 por fileira na listagem (B44 V80/V225); os relacionados (4) ficam 2+2 */
@media (min-width: 768px) and (max-width: 1023.98px) { .products.elf-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .elf-grade { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .elf-card-corpo { padding-top: 24px; }             /* o vão do gabarito no 1440 é 24, no 390 é 22 */
  /* o gabarito amplia a foto ao passar o mouse */
  /* B64: o mouse levanta o card — o mesmo desenho da sombra parada, mais escuro (o token da casa, de 1 camada, ficava
     MAIS FRACO que ela); desce os mesmos 16 px, que é a folga da fileira da home */
  .elf-card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .16); border-color: var(--elf-border); }
  .elf-card:hover .elf-card-foto img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .elf-card-foto img { transition: none; }
  .elf-card:hover .elf-card-foto img { transform: none; }
}