/* ==========================================================================
   ANOVA — a COMPOSICAO da pagina da loja.
   --------------------------------------------------------------------------
   (09/09) Arquivo NOVO, so da ANOVA. Nasceu separado porque os dois candidatos
   ja estao muito acima do limite de 400 do CONVENCOES.md: o css/tema-anova.css
   tem 1073 linhas e o css/anova-onboarding.css, 860.

   (10/09) O ESCOPO ABRIU. Nasceu com uma regra so — o carrossel por estado de
   login — e o titulo dizia "o que a home mostra". Agora ele guarda tambem o
   alinhamento das duas colunas da loja e o aviso antes do rodape: o que os tres
   tem em comum e serem decisoes de COMPOSICAO da pagina, e nao de componente.

   Regra de layout NAO CABE no css/anova-vitrine.css: la o roteiro de validacao
   exige que toda regra passe por `.anova-vt` ou `.anova-vl`, classes que o JS
   poe nos CARDS. Layout de pagina nao tem card nenhum para carregar guarda.

   NAO DEPENDE de token nenhum: sao medidas e composicao, nao cor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O CARROSSEL DO TOPO SO PARA QUEM ESTA LOGADO
   --------------------------------------------------------------------------
   Pedido da dona (09/09). Quem chega sem conta deixa de ver o carrossel de
   produtos do topo da home.

   NAO E PADRAO NOVO. O proprio app.css:8373 ja esconde o preco de quem nao esta
   logado exatamente assim, lendo a classe que o js/app.js poe no <body>:

     body:not(.usuario-logado) .produto-preco { display: none }

   Aqui a leitura e a mesma. Nao inventamos estado: o `usuario-logado` e mantido
   pelo js/app.js:1408 desde muito antes desta regra existir.

   ⚠️ O PULO DE LAYOUT E CONHECIDO, E A ESCOLHA E DELIBERADA.

   O js/app.js e script BLOQUEANTE de ~700 KB no fim do body, e a classe so entra
   quando ele roda. Ate la o <body> nao tem `usuario-logado`, entao este seletor
   casa e o carrossel comeca escondido para TODO MUNDO. Quem esta logado ve a
   pagina sem o banner por um instante e ele aparece depois, empurrando o
   conteudo para baixo.

   O caminho contrario — nascer visivel e sumir para quem nao logou — trocaria
   esse pulo por um vazamento: o visitante veria o anuncio de produto por um
   instante antes de ele sumir, que e precisamente o que esta regra existe para
   impedir. Entre incomodar o associado e mostrar ao visitante o que ele nao
   deveria ver, o certo aqui e incomodar o associado.

   SE UM DIA O PULO INCOMODAR: a solucao nao e inverter a regra, e sim decidir o
   estado do login ANTES da primeira pintura — hoje isso exigiria ler a sessao
   num script de <head>, que nao existe nesta loja e nao vale a pena so por isso.

   A Zeleno nao carrega este arquivo: o bloco MARCA:tema-css e vazio nela.
   -------------------------------------------------------------------------- */

body:not(.usuario-logado) .hero {
  display: none;
}

/* --------------------------------------------------------------------------
   AS DUAS COLUNAS DA LOJA COMECAM NA MESMA LINHA
   --------------------------------------------------------------------------
   (10/09) O `.store-main-layout` e um grid de duas colunas com
   `align-items: start`, entao a caixa de filtro e a coluna de produtos JA
   comecavam no mesmo y. O que nao batia era o conteudo delas.

   A caixa de filtro tem `padding: 22px 20px` (anova-filtros.css): o rotulo
   "FILTROS" nasce 22px abaixo da borda. A coluna da direita nao tem caixa, entao
   o "X medicamentos disponiveis" nascia colado na borda — 22px acima do rotulo
   ao lado, e a leitura das duas colunas comecava em alturas diferentes.

   Os 22px daqui sao os MESMOS 22px de la. Nao e um numero escolhido: e o padding
   da caixa vizinha. Se aquele mudar, este muda junto.

   SO ACIMA DE 1180px. Abaixo disso o app.css:5101 poe o layout em UMA coluna, a
   caixa de filtro deixa de ficar ao lado, e o recuo viraria um buraco no topo da
   pagina sem nada para alinhar. -------------------------------------------- */

@media (min-width: 1181px) {
  .store-main-layout > .container > .topbar {
    padding-top: 22px;
  }
}

/* --------------------------------------------------------------------------
   O RESPIRO ATE A GRADE
   --------------------------------------------------------------------------
   Eram 58px entre a linha do "X medicamentos / Ordenar por" e o primeiro card:
   34px de `margin-bottom` da `.topbar` (app.css:1105) mais 24px de uma
   `.section-head` VAZIA (app.css:1329) que sobrou na marcacao entre as duas.

   A div vazia nao pode ser removida daqui: ela esta no index.html, que serve as
   duas lojas. Fica, com a margem zerada.

   `:empty` NAO a alcanca — ela tem quebra de linha e espacos entre as tags, e
   `:empty` exige nenhum no filho, texto em branco incluido. Por isso a margem e
   zerada direto, sem condicao. -------------------------------------------- */

.store-main-layout > .container > .topbar {
  margin-bottom: 20px;
}

.store-main-layout > .container > .section-head {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   A GRADE DE PRODUTOS: A MEDIDA E A DA REFERENCIA
   --------------------------------------------------------------------------
   (10/09) O card saia FINO. O app.css:6423 crava CINCO colunas com `gap: 12px`,
   e a referencia usa `auto-fill` a partir de 206px com `gap: 18px`
   (loja.css:769-772). Na largura util da coluna de produtos — 1280 do container,
   menos 44 de respiro, menos 280 da caixa de filtro, menos 24 do vao = 932px:

     cinco fixas:  (932 - 4x12) / 5 = ~177px por card
     auto-fill:    cabem QUATRO (4x206 + 3x18 = 878), com ~220px cada

   Sao os 43px de diferenca que a dona viu.

   `auto-fill` E DE PROPOSITO, e nao um numero de colunas. Onde a tela for mais
   larga ele devolve cinco, onde for menor devolve tres — o que ele garante e o
   PISO de 206px por card. Fixar quatro colunas repetiria o defeito do app.css
   com outro numero.

   O SELETOR USA ID. As regras de la sao `.grid { ... !important }`, (0,1,0), e
   se repetem em cinco media queries. `#produtos` e (1,0,0) e vence todas de uma
   vez, inclusive dentro de @media — media query nao soma especificidade. Sem o
   id, eu teria de reescrever breakpoint por breakpoint.

   O corte em 520px e o mesmo da referencia: abaixo disso `auto-fill` daria UMA
   coluna e a lista viraria uma pilha. -------------------------------------- */

#produtos.grid {
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 520px) {
  #produtos.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   O CONTADOR DO FIM DA LISTA
   --------------------------------------------------------------------------
   (10/09) "8 de 8 produto(s) exibido(s)" lia como TITULO no meio do vazio:
   centralizado, negrito 700 e 14px (app.css:1889-1896), com 42px de respiro
   acima. E nota de rodape da lista — ainda mais com o topo da pagina ja dizendo
   o mesmo numero em tipo mais leve.

   As medidas sao as da referencia (loja.css:997-1004), nao invencao:

     .paginacao      coluna, gap 14px, margin-top 36px
     .paginacao-info 12,5px, cor apagada, text-align LEFT, order 2
     #verMais        order 1, centralizado

   A ORDEM E O QUE MAIS IMPORTA: la o botao de carregar mais vem PRIMEIRO,
   centralizado, e o contador vem ABAIXO dele, encostado a esquerda. Aqui os dois
   dividiam a mesma linha centralizada, e o texto ganhava o peso de um botao.

   O seletor usa id porque o app.css usa classe simples e sem `!important` —
   `#pagination` (1,0,0) vence sem disputa e sem precisar de `!important`.
   -------------------------------------------------------------------------- */

#pagination.pagination {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 36px;
}

#pagination .page-info {
  order: 2;
  width: auto;
  margin-top: 0;
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  color: var(--anova-tinta-2);
}

/* O botao so existe quando ha mais produtos para carregar. Centralizado e acima
   do contador, como na referencia. */
#pagination .page-btn {
  order: 1;
  align-self: center;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   O AVISO DE CARATER EDUCATIVO, ANTES DO RODAPE
   --------------------------------------------------------------------------
   Mesma largura e mesmo respiro lateral do `.store-main-layout`, para nascer
   alinhado com a coluna de conteudo da loja em vez de flutuar solto.

   Texto pequeno e apagado DE PROPOSITO: e aviso de contexto, nao chamada. Mas
   nao abaixo de 12px nem abaixo do `--anova-tinta-2`, que e o cinza que ainda
   passa em contraste sobre o branco — aviso legal ilegivel nao cumpre o papel
   de aviso. ---------------------------------------------------------------- */

.anova-aviso-legal {
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 0 22px 34px;
}

/* (10/09) CENTRALIZADO, a pedido da dona — e sao DUAS coisas, nao uma:

     `margin: 0 auto`   centra o BLOCO. Sem ele, os 88ch ficavam encostados na
                        esquerda da pagina, com um vazio enorme a direita.
     `text-align`       centra as LINHAS dentro do bloco.

   Uma sem a outra deixa o aviso pela metade: bloco centrado com texto alinhado
   a esquerda, ou linhas centradas num bloco encostado na borda. */
.anova-aviso-legal p {
  max-width: 88ch;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  color: var(--anova-tinta-2);
}

@media (max-width: 768px) {
  .anova-aviso-legal {
    padding: 0 14px 28px;
  }
}