/* ---------------------------------------------------------------------------
   TEMA ANOVA CARE CENTER — camada de identidade visual.
   (21/08, pedido da dona) Traduz o key visual do site institucional da ANOVA
   para a loja: verde floresta profundo, dourado, fundo creme e titulos em
   serifa de alto contraste.

   SEGUNDA PASSADA — o que mudou em relacao a primeira:
   - o PRECO GRANDE do cartao (.produto-preco-grama-hero) tinha ficado de fora
     e seguia em Poppins 900 com tracking -0.05em, brigando com a serifa ao lado;
   - .section-title carrega letter-spacing -0.08em no app.css, que numa serifa
     de alto contraste fica espremido e feio — corrigido;
   - a area da imagem do produto (.imagem-wrap) era branca sobre branco; virou
     um painel creme com brilho radial, que e o que faz a foto recortada do
     produto destacar;
   - sombras em duas camadas no lugar de uma chapada, e foco visivel acessivel.

   POR QUE ARQUIVO SEPARADO: o css/app.css tem 216 KB e esta CONGELADO para
   crescer (ver CLAUDE.md). Este arquivo entra por ULTIMO na cascata do
   index.html e so SOBRESCREVE — nenhuma linha do app.css foi tocada.
   Reverter = remover a linha do <link> no index.html.

   ESCOPO: cor, tipografia e forma. Nao mexe em layout, grid, comportamento
   nem em nada que o JS leia. Nenhum seletor novo foi inventado.
   --------------------------------------------------------------------------- */

:root {
  /* ---------------------------------------------------------------------
     PALETA OFICIAL — Manual de Marca ANOVA, agosto/2025, pagina 10.
     Os quatro valores abaixo sao os do manual, ao pe da letra. A primeira
     versao deste tema usava cores tiradas a olho do site (#1e5c42, #b8934a,
     #16211c); estao corrigidas.
     --------------------------------------------------------------------- */
  --anova-verde-700: #2c7557;   /* OFICIAL — "Verde (principal)" */
  --anova-oliva: #9a9c50;       /* OFICIAL — "Verde (secundario)" */
  --anova-ouro: #b98f41;        /* OFICIAL — o manual chama de "Marrom" */
  --anova-tinta: #282929;       /* OFICIAL — "Preto" */

  /* DERIVADOS do verde oficial. O manual nao traz escala de tons, e ela e
     necessaria para gradiente, hover e fundo escuro. Sao variacoes de
     luminosidade do #2c7557 — nao sao cores novas. */
  --anova-verde-900: #163d2d;
  --anova-verde-800: #21563f;
  --anova-verde-600: #38916b;
  --anova-verde-300: #9ac4ae;
  --anova-ouro-claro: #e2d0a6;  /* derivado do #b98f41, p/ filete e realce */
  --anova-tinta-2: #6b6c6c;     /* derivado do preto oficial, p/ texto secundario */

  /* ⚠️ NAO ESTAO NO MANUAL. A paleta oficial tem QUATRO cores e nenhuma de
     fundo. Estes creme/filete vieram do site institucional, por observacao.
     Ficam porque a loja precisa de uma tela de fundo e de uma borda, mas
     PRECISAM ser confirmados com quem fez a identidade — o proprio manual
     diz "nao use cores que nao estejam incluidas na paleta oficial". */
  --anova-creme: #fbf7ef;
  --anova-creme-2: #f6efe2;
  --anova-linha: #e8dfcd;

  /* Reescreve os tokens que o app.css ja usa em todo lugar. E aqui que a
     troca de identidade acontece de uma vez, sem cacar hex por hex. */
  --green: var(--anova-verde-700);
  --green-2: var(--anova-verde-600);
  --green-soft: #f0f4ec;
  --bg: var(--anova-creme);
  --text: var(--anova-tinta);
  --text-soft: var(--anova-tinta-2);
  --border: var(--anova-linha);

  /* Sombra em DUAS camadas: uma curta que cola o objeto na superficie e uma
     longa e difusa que da altura. Uma sombra so sempre parece adesivo. */
  --shadow: 0 2px 4px rgba(15, 50, 38, 0.05), 0 22px 48px rgba(15, 50, 38, 0.11);
  --shadow-soft: 0 1px 2px rgba(15, 50, 38, 0.04), 0 12px 28px rgba(15, 50, 38, 0.06);
}

/* ---------------------------------------------------------------------------
   1. TIPOGRAFIA — Manual de Marca ANOVA, paginas 11 e 12.
        Fonte principal:  The Seasons  (titulos)
        Fonte secundaria: Montserrat   (texto, interface)

   ⚠️ A "The Seasons" e uma fonte COMERCIAL: nao esta no Google Fonts e nao ha
   arquivo dela neste projeto. Ela vem PRIMEIRO na pilha para que, no dia em que
   os arquivos web (.woff2) e a licenca de webfont chegarem, baste acrescentar
   um @font-face — sem tocar em mais nada. Ate la, quem desenha e o substituto
   logo atras, escolhido por ser a serifa livre mais proxima em contraste e
   elegancia. NAO e a fonte da marca; e um lugar reservado, e esta anotado no
   CHANGELOG como pendencia.

   ⚠️ O app.css declara `* { font-family: Inter }`, mas o Inter NUNCA e carregado
   — na pratica a loja renderiza em Arial. Como aquele seletor e universal, o
   unico jeito de corrigir e repetir o universal aqui, depois dele na cascata.
   --------------------------------------------------------------------------- */
* {
  font-family: 'Montserrat', system-ui, Arial, sans-serif;
}

h1, h2, h3,
.section-title,
.produto-nome,
.produto-preco,
.produto-preco-grama-hero,
.footer-title,
#productModal .modal-title {
  font-family: 'The Seasons', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  font-optical-sizing: auto;
}

/* O app.css usa -0.08em aqui. Numa grotesca isso aperta de leve; numa serifa
   de alto contraste as hastes finas encostam e o titulo vira mancha. */
.section-title {
  font-weight: 600;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--anova-verde-800);
}

.section-caption {
  color: var(--anova-tinta-2);
  line-height: 1.6;
}

/* Nome do produto: a serifa pede peso e espacamento normais. O app.css usa
   900 + -0.05em, heranca da grotesca. */
.produto-nome {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--anova-verde-800);
}

/* ⚠️ ESTE e o numero mais visivel do catalogo ("R$ 70,00/g"). Na primeira
   passada ficou de fora e seguia em Poppins 900 -0.05em, colado embaixo do
   nome em serifa — duas vozes tipograficas brigando no mesmo cartao. */
.produto-preco,
.produto-preco-grama-hero {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--anova-verde-700);
}

.produto-preco-grama-hero {
  font-size: 30px;
  line-height: 1.05;
}

/* A unidade ("/g") em corpo menor e mais clara: hierarquia dentro do proprio
   preco, em vez de tudo no mesmo peso. */
.produto-preco-grama-unidade {
  font-size: 0.52em;
  color: var(--anova-tinta-2);
  letter-spacing: 0;
  margin-left: 1px;
}

.produto-preco-min {
  color: var(--anova-tinta-2);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   2. TELA
   --------------------------------------------------------------------------- */
body {
  background: var(--anova-creme);
  color: var(--anova-tinta);
}

::selection {
  background: var(--anova-ouro-claro);
  color: var(--anova-verde-900);
}

/* Foco visivel em TODA a loja. O tema escureceu o fundo em varios pontos e o
   contorno padrao do browser some sobre creme — acessibilidade nao pode
   depender de sorte de contraste. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--anova-ouro);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   3. CABECALHO
   Creme translucido com desfoque — a barra flutuante do site institucional
   adaptada ao cabecalho da loja.
   --------------------------------------------------------------------------- */
header {
  background: rgba(251, 247, 239, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--anova-linha);
}

.header-search input {
  border-radius: 999px;
  background: #fff;
  border-color: var(--anova-linha);
}

.header-search input:focus {
  border-color: var(--anova-verde-600);
  box-shadow: 0 0 0 4px rgba(30, 92, 66, 0.10);
}

/* ---------------------------------------------------------------------------
   4. BOTOES
   Pilula completa, como os CTAs do key visual ("FACA PARTE DA ANOVA").
   --------------------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding: 15px 18px;
}

.btn-primary {
  background: linear-gradient(160deg, var(--anova-verde-600) 0%, var(--anova-verde-800) 100%);
  box-shadow: 0 1px 2px rgba(15, 50, 38, 0.10), 0 12px 24px rgba(15, 50, 38, 0.18);
}

.btn-primary:hover {
  box-shadow: 0 2px 4px rgba(15, 50, 38, 0.12), 0 18px 34px rgba(15, 50, 38, 0.24);
}

.btn-secondary {
  background: #fff;
  color: var(--anova-verde-700);
  border: 1px solid var(--anova-linha);
  box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
  border-color: var(--anova-ouro);
}

/* ---------------------------------------------------------------------------
   5. CARTAO DE PRODUTO
   --------------------------------------------------------------------------- */
.card {
  border-radius: 26px;
  border-color: var(--anova-linha);
  background: #fffdf9;   /* branco levemente quente: sobre creme, o branco puro parece azulado */
}

/* Filete dourado que aparece no topo do cartao no hover. E o unico lugar onde
   o dourado vira gesto, e nao so detalhe — por isso fica no estado ativo. */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--anova-ouro), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 3;
}

.card:hover::after {
  opacity: 1;
}

.card:hover {
  border-color: rgba(184, 147, 74, 0.45);
  box-shadow: var(--shadow);
}

/* ⚠️ A area da imagem era branca sobre cartao branco: as fotos de produto sao
   recortadas em fundo claro, entao a peca "flutuava no nada". Um painel creme
   com brilho radial no topo cria o palco — e e o mesmo recurso do site
   institucional, onde os produtos aparecem sobre superficie quente. */
.imagem-wrap {
  background: radial-gradient(115% 90% at 50% 0%, #fffdf8 0%, var(--anova-creme-2) 100%);
  border-bottom: 1px solid var(--anova-linha);
}

/* ATENCAO (02/09): OS CARTOES TRAVADOS FICAVAM BRANCOS AO LADO DOS LIBERADOS EM CREME.
   Na vitrine da Anova, "GMO" e "91 Octane" apareciam sobre creme e, na linha de baixo,
   os oleos de receita obrigatoria sobre branco puro e frio — dois cartoes que parecem
   de lojas diferentes na mesma tela.
   A causa e ESPECIFICIDADE, nao ordem de arquivo: o app.css pinta esses dois casos com
   seletores de duas classes, `(0,2,0)`, enquanto as regras do tema logo acima usam uma
   classe so, `(0,1,0)`. Carregar por ultimo na cascata nao vence isso — por isso a
   correcao precisa repetir a mesma dupla de classes, e nao usar !important.
     app.css:1588  .locked-card .imagem-wrap        { background: #ffffff }
     app.css:1735  .guest-locked-card .imagem-wrap  { background: #ffffff }
     app.css:1725  .locked-card .card-body          { gradiente branco -> #fbfdfc }
   Mesmo painel radial das outras fotos: a foto do frasco tambem e recortada em fundo
   claro e some no branco. */
.locked-card .imagem-wrap,
.guest-locked-card .imagem-wrap {
  background: radial-gradient(115% 90% at 50% 0%, #fffdf8 0%, var(--anova-creme-2) 100%);
}

/* O corpo do cartao travado tinha um gradiente para #fbfdfc, que puxa para o AZUL. Ao
   lado do creme, e ele que denuncia. Troca pelo mesmo par quente do resto da vitrine. */
.locked-card .card-body {
  background: linear-gradient(180deg, #fffdf9 0%, var(--anova-creme) 100%);
}

/* O veu esverdeado do app.css sobre o painel creme sujava o tom. Neutro. */
.card-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(15, 50, 38, 0.03) 100%);
}

/* Selos: 900 em 11px vira mancha. Peso menor + caixa alta espacada le melhor
   no tamanho pequeno e combina com os rotulos do key visual.
   ⚠️ COMPLIANCE: as CORES sao semanticas — verde libera, vermelho barra. Sao
   elas que dizem ao paciente o que ele pode comprar. Aqui so mudou a FORMA;
   nao alterar as cores sem falar com compliance. */
.card-badge,
.card-badge-ultimas,
.card-badge-rebuy,
.card-badge-recommended,
.card-badge-esgotado,
.card-badge-locked {
  border-radius: 999px;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  box-shadow: 0 1px 2px rgba(15, 50, 38, 0.10);
}

/* ---------------------------------------------------------------------------
   6. CARROSSEL
   --------------------------------------------------------------------------- */
.hero-carousel-premium {
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-carousel-dot.active {
  background: var(--anova-ouro);
}

.hero-carousel-arrow {
  background: rgba(251, 247, 239, 0.94);
  color: var(--anova-verde-800);
  border: 1px solid var(--anova-linha);
  box-shadow: var(--shadow-soft);
}

.hero-carousel-arrow:hover {
  background: #fff;
  border-color: var(--anova-ouro);
}

/* ---------------------------------------------------------------------------
   7. RODAPE
   Verde profundo com texto creme e titulos dourados — fecha a pagina no tom
   do hero institucional. As cores de texto sao declaradas uma a uma (e nao
   num `*`) para nao apagar icone nem selo colorido de dentro.
   --------------------------------------------------------------------------- */
.main-footer {
  background: linear-gradient(180deg, var(--anova-verde-800) 0%, var(--anova-verde-900) 100%);
  border-top: 1px solid rgba(184, 147, 74, 0.35);
  color: #efe7d8;
}

.main-footer p,
.main-footer li,
.main-footer small,
.main-footer span {
  color: rgba(239, 231, 216, 0.76);
}

.footer-title {
  color: var(--anova-ouro);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.footer-links a {
  color: rgba(239, 231, 216, 0.80);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #ffffff;
}

.social-links a svg {
  fill: rgba(239, 231, 216, 0.80);
  transition: fill 0.2s ease;
}

.social-links a:hover svg {
  fill: var(--anova-ouro);
}

/* O logo e verde e dourado; sobre o verde profundo ele sumiria. */
.footer-logo {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* ---------------------------------------------------------------------------
   8. PONTOS COM VERDE FIXO NO app.css
   Estes seletores trazem #00543d escrito na mao (nao usam o token), entao
   precisam de sobrescrita nominal. Lista levantada varrendo o app.css.
   --------------------------------------------------------------------------- */
.client-doc-icon,
.client-doc-upload-btn,
.checkout-step-pill.active,
.image-cart-add-btn,
.btn-primary.btn-added,
.client-card-tile {
  background: var(--anova-verde-700);
}

.checkout-coupon-chip,
.header-search-suggest-tag,
#productModal .modal-kicker,
#productModal .modal-accordion-kicker {
  color: var(--anova-verde-700);
}

.featured-showcase-underline {
  background: linear-gradient(90deg, var(--anova-ouro), var(--anova-ouro-claro));
}

/* ---------------------------------------------------------------------------
   10. ACESSIBILIDADE
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .card::after,
  .footer-links a,
  .social-links a svg,
  .hero-carousel-arrow {
    transition: none;
  }
}