/* ---------------------------------------------------------------------------
   ANOVA — o card da vitrine para quem NAO esta logado.

   Par do js/anova-vitrine.js. O JS acrescenta os elementos e marca o card com
   .anova-vt; este arquivo diz como tudo aparece.

   ⚠️ TUDO depende de .anova-vt, posta pelo JS. Sem ela nenhuma regra vale e o
   card continua o de hoje.

   ⚠️ CORRIGINDO O QUE ESTE COMENTARIO DIZIA ANTES (08/09): nao e verdade que o
   card mostrava o preco. O app.css:8373-8376 ja esconde o .produto-preco de quem
   nao esta logado, por decisao do dono em 05/08. A faixa em cifroes portanto
   ACRESCENTA informacao de preco, e nao esconde. Confirmado pela dona depois da
   correcao. O detalhe inteiro esta no cabecalho do js/anova-vitrine.js.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   (16/10) AVISO DE ENTREGA POR PRODUTO. Par do js/anova-aviso-entrega.js, que
   so cria estes elementos enquanto a regra estiver vigente (data no JS).
   Ambar de propósito: nao e erro nem bloqueio, e informacao de prazo.
   --------------------------------------------------------------------------- */

.card .anova-aviso-selo {
  display: inline-block;
  margin: 4px 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7a4b00;
  background: #fff3d6;
  border: 1px solid #f3d99a;
}

.anova-aviso-checkout {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #7a4b00;
  background: #fff3d6;
  border: 1px solid #f3d99a;
}

.anova-pm-texto.anova-aviso-modal {
  padding: 8px 10px;
  border-radius: 10px;
  color: #7a4b00;
  background: #fff3d6;
  border: 1px solid #f3d99a;
}

/* ---------------------------------------------------------------------------
   A categoria e a legenda
   --------------------------------------------------------------------------- */

.anova-vt .anova-vt-categoria {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* O dourado da marca. Aqui ele passa: e rotulo curto e nao texto corrido, e
     fica sobre o branco do card. */
  color: var(--anova-ouro);
}

/* (09/09) O `font-size` e o `line-height` sairam daqui porque nunca aplicaram: o
   app.css tem `.card .produto-nome { font-size: 12.5px !important }` em (0,2,0),
   e este seletor tambem e (0,2,0). Sem `!important`, eram descartados.

   (10/09) A DECISAO DE DEIXAR ASSIM FOI REVERTIDA, a pedido da dona. Eu havia
   registrado que meio pixel (12,5 contra os 13 da referencia) nao valia o risco de
   sobrepor tambem as regras de celular. Ela comparou as duas telas e viu diferenca
   — e ao medir o card inteiro apareceu que o nome era o menor dos problemas: o
   BOTAO saia com 11px contra os 13 da referencia, e o peso do nome com 700 contra
   600. Tres declaracoes minhas descartadas caladas, nao uma.

   O tamanho e o peso agora sao declarados no bloco (0,3,0) mais abaixo, junto do
   `min-height`, com `!important` e com as medias de celular acompanhando. Aqui
   ficam so as propriedades que nunca tiveram disputa. */
.anova-vt .produto-nome {
  margin: 0;
  color: var(--anova-tinta);
}

/* ---------------------------------------------------------------------------
   TUDO A ESQUERDA, E EM CAIXA NORMAL

   ⚠️ CINCO regras do app.css empurram este card para o centro e para a caixa
   alta. Achar uma e parar foi o que me fez errar antes; a lista completa:

     app.css:8666  .card .produto-nome
                   text-align: center + text-transform: uppercase
                   + letter-spacing: 0.13em !important
     app.css:6471  .produto-preco            text-align: center !important
     app.css:8237  .produto-preco-grama-hero justify-content: center
     app.css:8259  .produto-preco-total-sub  text-align: center
     app.css:8646  .card .card-header        align-items: end

   `.card.anova-vt` = 0,3,0, acima dos 0,2,0 e 0,1,0 de la; o `!important`
   acompanha porque duas daquelas regras tambem o usam.

   O `text-transform` importa alem do visual: "24K Gold" e "Bitter Orange" sao
   nomes de cepa, e caixa alta em nome proprio muda como se le.
   --------------------------------------------------------------------------- */

.card.anova-vt .produto-nome {
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

.card.anova-vt .produto-preco,
.card.anova-vt .produto-preco-total-sub {
  text-align: left !important;
}

.card.anova-vt .produto-preco-grama-hero {
  justify-content: flex-start !important;
}

/* O `align-items: end` do app.css:8646 no .card-header ja e desligado pelo bloco
   da cadeia de altura, mais abaixo, que declara o header por inteiro. */

/* O canabinoide sob o nome: "THC", "THC-CBD 2:1", "Hibrida (+sativa)".
   12px e o `.card-sub` da referencia (loja.css:872). */
.anova-vt .anova-vt-legenda {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--anova-tinta-2);
}

/* ---------------------------------------------------------------------------
   A faixa de preco
   --------------------------------------------------------------------------- */

.anova-vt .anova-vt-faixa {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 12px 0 0;
}

.anova-vt .anova-vt-cifrao {
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  /* Os vazios ficam em cinza de GRAFISMO, nao de texto: eles nao sao lidos, sao
     a parte apagada de um medidor. Quem le a informacao e a frase escondida
     logo abaixo, que o leitor de tela anuncia. */
  color: var(--anova-tinta-3);
}

.anova-vt .anova-vt-cifrao.esta-cheio {
  color: var(--anova-verde-700);
}

/* A frase que so o leitor de tela ouve. Nao e `display:none`: isso a tiraria
   tambem do leitor, e ai a faixa nao diria nada a quem nao ve os simbolos. */
.anova-vt .anova-vt-lido {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* O "min. 5g". 10.5px e 1.35 sao o `.preco-apoio` da referencia (loja.css:886). */
.anova-vt .anova-vt-minimo {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--anova-tinta-2);

  /* (09/09) RESERVA UMA LINHA MESMO VAZIA. O js/anova-vitrine.js cria este
     elemento em todo card, com ou sem minimo, e e aqui que o espaco dele
     aparece: sem isto, o card sem minimo (os oleos) subia ~21px em relacao as
     flores da mesma fileira, porque a faixa de cifroes e ancorada no rodape e o
     que a posiciona e o que vem DEPOIS dela.

     `1.35em` e nao um numero em px: e o mesmo 1.35 do `line-height` logo acima,
     aplicado sobre o mesmo `font-size`. Mexeu na fonte, a reserva acompanha
     sozinha — um valor em px viraria um numero solto que envelhece calado.
     (10/09) Quando o line-height passou de 1.3 para 1.35, este numero veio junto:
     e a mesma medida escrita duas vezes, e as duas TEM de andar juntas. */
  min-height: 1.35em;
}

/* O preco real. ESCONDIDO, nunca removido — continua no DOM, e voltar atras e
   apagar a chamada de `trocarPreco` no js/anova-vitrine.js. */
.anova-vt .anova-vt-oculto { display: none; }

/* ---------------------------------------------------------------------------
   O cadeado

   Ele repete em desenho o que o texto "Acesso restrito - login necessario" ja
   dizia. Por isso o texto some da TELA mas continua para o leitor de tela: um
   icone decorativo nao substitui a frase para quem nao enxerga o icone.
   --------------------------------------------------------------------------- */

.anova-vt .imagem-wrap { position: relative; }

.anova-vt .anova-vt-cadeado {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--anova-branco);
  color: var(--anova-tinta-2);
  box-shadow: 0 2px 8px rgba(40, 41, 41, 0.10);
}

.anova-vt .anova-vt-cadeado svg {
  width: 14px;
  height: 14px;
}

.anova-vt .locked-state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   A CADEIA DE ALTURA, INTEIRA E EXPLICITA

   ⚠️ A CAUSA DO DESALINHAMENTO ESTAVA NO .card-header, E NAO NA GRADE.

   O app.css:7376-7384 faz do .card-header um grid de DUAS linhas fixas:
     grid-template-rows: calc(14px * 1.12 * 2) minmax(40px, auto) !important
   dimensionadas para o par nome + preco que ele tinha em mente.

   O js/anova-vitrine.js enfia CINCO filhos ali (categoria, nome, legenda, faixa,
   minimo). Os dois primeiros caem nas linhas fixas — a categoria ocupa a linha
   reservada ao NOME, com altura de duas linhas de 14px — e os outros tres vao
   para linhas implicitas. Dai a altura de conteudo variar de card para card.

   Sobre a grade, para o registro, porque eu errei o diagnostico duas vezes: o
   app.css tem DUAS regras brigando, `align-items: start !important` (6420) e
   `align-items: stretch !important` (7359). A segunda vence por vir depois na
   cascata, com a mesma especificidade. A grade JA ESTICA — nao era ali.

   Em vez de remendar propriedade por propriedade contra uma pilha de
   `!important`, esta secao declara a cadeia inteira para os cards da Anova:
   card -> body -> header -> acoes. Especificidade 0,3,0 com `!important` vence
   os 0,1,0 e 0,2,0 do app.css sem depender da ordem de carregamento.
   --------------------------------------------------------------------------- */

.card.anova-vt {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.card.anova-vt .card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* De grid de linhas fixas para coluna simples: com cinco filhos, quem manda no
   respiro passam a ser as margens deste arquivo, e nao um gabarito feito para
   dois. `grid-template-rows: none` fica junto por higiene — se alguem devolver o
   `display: grid`, o gabarito nao volta escondido. */
.card.anova-vt .card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  grid-template-rows: none !important;
  gap: 0 !important;
  /* Cresce para ocupar o que sobra entre a foto e o botao. E o que da ao preco,
     abaixo, um "fundo" onde se ancorar. */
  flex: 1 1 auto !important;
}

/* ---------------------------------------------------------------------------
   O PRECO ANCORADO NO RODAPE DO CABECALHO
   ---------------------------------------------------------------------------
   (09/09) Numa mesma fileira os precos ficavam em alturas diferentes. Duas
   causas, e nenhuma delas era espacamento:

   1. A legenda do canabinoide so existe quando o produto TEM o campo
      preenchido (js/anova-vitrine.js). "GMO" e "Money Maker" tem; "Purple Kush"
      e "Purple Cookies" nao. Um card com a linha a mais empurra o preco para
      baixo.
   2. O nome de um oleo quebra em duas linhas; o de uma flor, em uma.

   Reservar uma linha vazia para a legenda resolveria a causa 1 e NAO a 2. Ancorar
   o preco resolve as duas de uma vez, e continua valendo para qualquer diferenca
   futura de conteudo — nome mais longo, selo novo, o que for.

   Sao dois seletores porque o bloco de preco comeca em elementos diferentes:
   no card de quem esta logado e a `.produto-preco` (que ja traz o "min" dentro,
   app.js:1650-1653); no card do visitante a `.produto-preco` esta escondida e
   quem abre o bloco e a faixa de cifroes.
   --------------------------------------------------------------------------- */

.card.anova-vt .produto-preco,
.card.anova-vt .anova-vt-faixa {
  margin-top: auto !important;
}

/* ---------------------------------------------------------------------------
   O card e o botao
   --------------------------------------------------------------------------- */

.anova-vt {
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio);
  background: var(--anova-branco);
  box-shadow: none;
  overflow: hidden;
}

.anova-vt .imagem-wrap {
  /* A referencia poe a foto borrada sobre um cinza, e nao sobre o branco que o
     app.css:1736 usa. Sem o fundo, o borrao se dissolve na borda do card. */
  background: var(--anova-neutro);
}

/* (10/09) A FOTO PASSA A SER 3:2, E NAO UMA ALTURA CRAVADA.

   O app.css fixa a ALTURA da foto em px, e sete vezes: 330 no topo, 170 com
   `!important` na vitrine (6434), e mais cinco valores por breakpoint (6583,
   6603, 6931, 7206, 7234). Altura fixa so fecha com UMA largura de coluna — e a
   largura mudou quando a grade virou `auto-fill` (ver anova-home.css). Numa
   coluna de 220px, os 170px dariam 1,29:1 onde a referencia usa 1,5:1: card
   certo, foto errada.

   A referencia resolve com `aspect-ratio: 3 / 2` (loja.css:784-786), e o
   comentario dela diz por que 3:2 e nao quadrado: "recortar para quadrado
   cortaria a flor pelas pontas; a proporcao do arquivo mostra o produto inteiro".

   `height: auto` acompanha o `!important`: sem zerar a altura, ela vence a
   proporcao e esta regra nao faz nada. Uma linha substitui as sete de la, e a
   foto passa a seguir a largura da coluna sozinha — breakpoint novo nao pede
   numero novo. */
.card.anova-vt .imagem-wrap {
  height: auto !important;
  aspect-ratio: 3 / 2;
}

/* ⚠️ O ALINHAMENTO DOS BOTOES, E POR QUE PRECISA DE `!important` E DE `.card`.

   O app.css:1482-1488 poe `margin-top: auto` no .acoes. E isso que empurra o
   botao para o rodape: o .card e flex-column com min-height:100%
   (app.css:1359-1367) e o .card-body tem flex:1 (1437), entao o `auto` come toda
   a sobra e alinha os botoes de todos os cards da linha, tanto faz o nome ocupar
   uma ou duas linhas.

   So que o app.css:7421-7423 tem `.card .acoes { margin-top: 6px !important }`,
   em nivel de topo, sem media query. Ela ja ANULAVA o `auto` para todo card, e
   e a causa do desalinhamento que aparece hoje — inclusive na Zeleno. Nao foi
   introduzida por este arquivo.

   Para vencer 0,2,0 + !important preciso de 0,3,0 + !important. Dai o `.card`
   junto do `.anova-vt`, que estao no mesmo elemento. Especificidade maior ganha
   sem depender da ordem de carregamento das folhas.

   O respiro vem do `padding-top`, que nao disputa com o `auto`. */
.card.anova-vt .acoes {
  margin-top: auto !important;
  padding-top: 16px;
}

/* (09/09) O NOME RESERVA DUAS LINHAS — AGORA DE VERDADE.

   A reserva estava escrita aqui desde o inicio e NUNCA valeu: o app.css tem
   `.card .produto-nome { min-height: 0 !important }` em (0,2,0), e o seletor
   antigo (`.anova-vt .produto-nome`) tambem era (0,2,0), sem `!important`. Perdia
   calado. O sintoma que a dona viu: card com nome de uma linha diagramado
   diferente do card com nome de duas, na mesma fileira.

   Para vencer (0,2,0) + `!important` sao precisos (0,3,0) + `!important`. Dai o
   `.card` junto do `.anova-vt`, que estao no mesmo elemento — o mesmo recurso do
   bloco de altura logo acima.

   `2.8em` E NAO UM VALOR EM px: 2.8 e 2 x 1.4, o `line-height` que de fato se
   aplica. Em `em`, a reserva se mede sobre o `font-size` do proprio elemento —
   entao ela continua valendo duas linhas no celular, onde o app.css baixa a
   fonte para 11,5px. Um valor em px reservaria demais la e ninguem notaria. */
.card.anova-vt .produto-nome {
  min-height: 2.8em !important;

  /* (10/09) O tamanho e o peso vivem AQUI, e nao no bloco de cima, porque so
     daqui eles vencem: (0,3,0) + `!important` contra os (0,2,0) + `!important` do
     app.css. Valores da referencia, `.card-nome` em loja.css:867. O peso e o que
     mais se via: o app.css usa 700, e a referencia 600. */
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* AS MEDIAS DE CELULAR PRECISAM VIR JUNTO.
   A regra acima nao esta dentro de media nenhuma, entao ela venceria tambem as
   regras de celular do app.css (11.5px em 768, 12px em 420) — o telefone ficaria
   com a medida de desktop. Foi exatamente este risco que me fez, em 09/09, deixar
   o tamanho de lado; a saida nao era desistir, era declarar os degraus.

   Os pontos de corte sao os da REFERENCIA (loja.css:1404 e 1412), nao os do
   app.css: assim o celular reproduz o que ela faz, que e AUMENTAR um pouco o nome
   na tela pequena (13,5px) e so encolher abaixo de 380px. */
@media (max-width: 520px) {
  .card.anova-vt .produto-nome {
    font-size: 13.5px !important;
  }
}

@media (max-width: 380px) {
  .card.anova-vt .produto-nome {
    font-size: 12.5px !important;
  }
}

.anova-vt .acoes .btn-primary {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--anova-linha-n);
  background: var(--green-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--anova-verde-800);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--anova-transicao-r), border-color var(--anova-transicao-r);
}

.anova-vt .acoes .btn-primary:hover {
  border-color: var(--anova-verde-700);
  background: var(--anova-verde-800);
  color: var(--anova-branco);
}

.anova-vt .acoes .btn-primary:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
}

/* (06/10) "AGENDE SUA CONSULTA" SAIA VERDE SOBRE VERDE. O card de receita obrigatoria
   (.locked-card) ganha `.anova-vt` (anova-vitrine.js) e herda a letra verde-800 do bloco
   acima, pensada para o fundo claro `--green-soft`. Mas o botao desse card nasce no app.js
   com `style="background:var(--green)"` inline, que vence qualquer folha: fundo verde cheio
   com letra verde, ilegivel ate o hover. Pedido do dono em 06/10: letra branca neste card. O
   hover ja era branco; so o repouso muda. */
.card.locked-card.anova-vt .acoes .btn-primary {
  color: var(--anova-branco);
  border-color: var(--anova-verde-800);
}

/* (09/09) A PILULA PRECISA DE `!important`, E O SELETOR PRECISA DE UMA CLASSE A
   MAIS. O raio ja estava declarado como `--anova-raio-pilula` desde o inicio,
   junto das outras propriedades do botao logo acima — e nunca chegou a valer.

   O app.css tem:

       .card .acoes .btn,
       .card .btn-detail-premium { border-radius: 12px !important }

   `!important` ganha de declaracao normal por mais especifico que seja o
   seletor, entao a regra acima perdia calada e o botao saia com 12px. Nao era
   valor errado: era a regra inteira sendo ignorada naquela propriedade.

   Aqui sao (0,4,0) contra os (0,3,0) de la, os dois com `!important` — entre
   declaracoes `!important` vale a especificidade, e esta vence sem depender da
   ordem de carregamento.

   VALE PARA OS DOIS CARDS, o do visitante e o de quem esta logado: na referencia
   o `.btn` do card e pilula em qualquer estado (loja.css:159). O que distingue
   os dois continua sendo a cor, logo abaixo. */
.card.anova-vt .acoes .btn-primary,
.card.anova-vt .acoes .btn {
  border-radius: var(--anova-raio-pilula) !important;

  /* (10/09) O TAMANHO ENTRA AQUI PELO MESMO MOTIVO DO RAIO, e este era o defeito
     que a dona enxergou de longe. O bloco de cima declara `font-size: 13px` em
     (0,3,0) SEM `!important`, e o app.css tem

         .card .acoes .btn { font-size: 11px !important }

     tambem em (0,3,0). `!important` ganha de declaracao normal, entao o botao
     saia com 11px — dois pixels abaixo dos 13 da referencia (`.btn`, loja.css:158),
     no maior bloco de texto do card. Era o que fazia a vitrine inteira parecer
     menor que a da referencia.

     `letter-spacing` junto porque a referencia declara os dois na mesma regra. */
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}

/* ---------------------------------------------------------------------------
   O CARD DE QUEM ESTA LOGADO E COM O PRODUTO LIBERADO (.anova-vl)

   Tudo acima vale para os dois cards. Aqui ficam so as diferencas: o preco
   aparece (e o card de quem ja pode comprar) e o botao e verde cheio, porque
   nele a acao E comprar — no card do visitante a acao e entrar, que nao merece
   o mesmo peso.
   --------------------------------------------------------------------------- */

/* O selo verde "Liberado" sai, a pedido da dona (08/09), para bater com a
   referencia. ESCONDIDO, nunca removido.

   ⚠️ O que ele fazia: na mesma grade convivem cards liberados e cards com o selo
   VERMELHO "Receita obrigatoria" (app.js:8924). O verde era a marca do primeiro
   grupo. O vermelho continua aparecendo, entao a distincao nao se perde por
   inteiro — o que some e a confirmacao positiva. Voltar e apagar esta regra. */
.anova-vl .card-badge-recommended { display: none; }

/* (09/09) A TIPOGRAFIA DO PRECO E DE `.anova-vt`, NAO DE `.anova-vl`.

   Ela nasceu sob `.anova-vl` porque so o card liberado mostrava preco. Mas o
   card de RECEITA OBRIGATORIA tambem mostra — "R$ 430,00" no oleo — e sem estas
   regras ele ficava com o corpo do app.css ao lado de flores em 19px, na mesma
   fileira. O que distingue os dois e a ACAO, nao o preco: o botao verde cheio
   continua sendo o unico exclusivo de `.anova-vl`, logo abaixo.

   No card do visitante estas regras tambem valem, e sao inofensivas: la a
   `.produto-preco` esta escondida por `.anova-vt-oculto`. */

/* O `margin-top` daqui e substituido pela ancora do bloco acima; os outros tres
   lados continuam valendo. */
.anova-vt .produto-preco {
  margin: 12px 0 0;
}

/* "R$ 93,00" e "R$ 430,00": o valor e o que a pessoa procura no card.

   (10/09) `.card` NO SELETOR E `!important` NAS TRES: sem isso nada aqui valia. O
   app.css tem `.produto-preco { font-size: 22px !important; font-weight: 900
   !important; line-height: 1.05 !important }` em (0,1,0), e este seletor era
   (0,2,0) sem `!important` — perdia calado nas tres, e o preco saia com 22px e
   peso 900 onde a referencia usa 19px e 700 (`.preco-valor`, loja.css:881).

   O peso 700 e o da referencia; o 600 que estava aqui nunca chegou a aparecer. */
.card.anova-vt .produto-preco,
.card.anova-vt .produto-preco-grama-hero {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--anova-verde-800);
}

/* Abaixo de 520px a referencia baixa o valor para 18px (loja.css:1425). */
@media (max-width: 520px) {
  .card.anova-vt .produto-preco,
  .card.anova-vt .produto-preco-grama-hero {
    font-size: 18px !important;
  }
}

/* O "/g" acompanha o valor sem competir com ele. 11px e o `.preco-por` da
   referencia (loja.css:885). */
.anova-vt .produto-preco-grama-unidade {
  font-size: 11px;
  font-weight: 500;
  vertical-align: baseline;
}

.anova-vt .produto-preco-total-sub {
  margin-top: 6px;
}

/* Mesmo papel do `.anova-vt-minimo` acima — texto de apoio sob o preco — e por
   isso a mesma medida do `.preco-apoio` da referencia. Deixar os dois em tamanhos
   diferentes faria a mesma informacao mudar de corpo conforme o card. */
.anova-vt .produto-preco-min {
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--anova-tinta-2);
}

/* Verde cheio: aqui o botao e a compra.

   (10/09) O `font-size: 13.5px` SAIU daqui. Ele era (0,3,0) sem `!important` e
   perdia para o `.card .acoes .btn { font-size: 11px !important }` do app.css —
   nunca chegou a valer. E, mesmo que valesse, estaria errado: na referencia o
   `.btn` do card tem UM tamanho so, e o que distingue o card liberado e a cor.
   O tamanho vem do bloco (0,4,0) la de cima, que vale para os dois cards. */
.anova-vt.anova-vl .acoes .btn-primary {
  border-color: var(--anova-verde-800);
  background: var(--anova-verde-800);
  color: var(--anova-branco);
}

.anova-vt.anova-vl .acoes .btn-primary:hover {
  border-color: var(--anova-verde-700);
  background: var(--anova-verde-700);
  color: var(--anova-branco);
}