/* ---------------------------------------------------------------------------
   ANOVA — barra de cima.

   Par do js/anova-header.js. O JS só troca o texto do placeholder e põe a classe
   .anova-h; ordem, tamanho, cor e o que some são todos daqui.

   ⚠️ TUDO depende de .anova-h, posta só depois de achar marca, busca e ações.
   Sem ela nenhuma regra vale e a barra continua a de hoje, inteira. Esconder
   sem essa condição daria, no dia em que uma classe mudasse, um header sem
   carrinho e sem entrar.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   A barra

   Vira grid de três colunas para a busca ficar MESMO no centro da tela. Com o
   flex de hoje (space-between) ela só ocupa a sobra entre o logo e os botões, e
   o centro dela cai onde calhar — some para a direita quando o logo é estreito.
   As duas colunas 1fr têm sempre a mesma largura, então a do meio fica no eixo.
   --------------------------------------------------------------------------- */

/* `auto 1fr auto`, como a referencia (`.topbar`), e NAO `1fr auto 1fr`.

   ⚠️ O QUE ESTAVA ERRADO, e vale guardar: com a coluna do meio em `auto`, ela e
   dimensionada pelo CONTEUDO. A busca tinha `width: min(620px, 100%)`, e aquele
   `100%` se resolve contra a coluna — que depende da busca. A conta e circular,
   o navegador resolve pelo minimo, e a caixa colapsava para ~200px: o
   placeholder saia cortado em "Buscar por nome, categ".

   Com o meio em `1fr` a coluna tem largura propria, vinda da sobra, e o
   `max-width` da busca passa a ser o que manda. */
/* Sem o fio embaixo. Na referencia a barra e uma ILHA que flutua sobre a
   pagina (`.topbar` com borda, raio de pilula e sombra propria); o
   `border-bottom` do app.css:408 desenhava, logo abaixo dela, a linha de uma
   faixa colada no topo — duas gramaticas ao mesmo tempo. */
header.anova-h-topo {
  border-bottom: 0;
}

.header-inner.anova-h {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  /* 18px em cima e embaixo hoje; com os controles caindo de 52 para 44 a barra
     afina sem espremer nada.

     (10/09) A BARRA INTEIRA CRESCEU ~12%, a pedido da dona: logo, busca,
     circulos, icones e o botao Entrar subiram JUNTOS, para nenhuma peca ficar
     desproporcional ao lado da outra. As medidas de origem eram as da
     referencia; estas sao aquelas escaladas. */
  padding-top: 14px;
  padding-bottom: 14px;
}

.header-inner.anova-h .brand { grid-column: 1; justify-self: start; }
.header-inner.anova-h .header-search { grid-column: 2; justify-self: center; }
.header-inner.anova-h .header-actions { grid-column: 3; justify-self: end; }

/* 26px, o valor da referencia (`.topbar-logo img`). Vale porque agora o arquivo
   TAMBEM e o da referencia: mesma arte, mesma medida, mesmo resultado. */
.header-inner.anova-h .brand-logo-img {
  height: 30px;
  width: auto;
}

/* ---------------------------------------------------------------------------
   A busca
   --------------------------------------------------------------------------- */

/* `width: 100%` com `max-width`, como a referencia (`.busca-campo`): dentro da
   coluna `1fr` o 100% tem contra o que se resolver, e o max-width limita.

   460px e o valor da referencia. Com ele o placeholder inteiro cabe. */
.header-inner.anova-h .header-search {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 520px;
}

.header-inner.anova-h .header-search input {
  min-height: 48px;
  padding: 12px 20px 12px 48px;
  /* O verde #00543d estava escrito na mão no app.css — é o verde da Zeleno. */
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-neutro);
  font-size: 15px;
  box-shadow: none;
}

.header-inner.anova-h .header-search input:focus {
  border-color: var(--anova-verde-700);
  background: var(--anova-branco);
}

.header-inner.anova-h .header-search .filtro-icone {
  left: 18px;
  color: var(--anova-tinta-2);
}

/* ---------------------------------------------------------------------------
   A ordem à direita

   `order` em vez de mover nó: os botões têm listener preso e o dropdown do
   hambúrguer e o mini-carrinho são posicionados em relação ao próprio bloco.
   Mover no DOM traria de brinde um painel abrindo no lugar errado.
   --------------------------------------------------------------------------- */

.header-inner.anova-h .header-actions { gap: 8px; }

.header-inner.anova-h .header-actions .lang-switch { order: 1; }
.header-inner.anova-h .header-actions .filter-menu { order: 2; }
.header-inner.anova-h .header-actions #openLoginButton { order: 3; }
.header-inner.anova-h .header-actions #openClientButton { order: 3; }
.header-inner.anova-h .header-actions .cart-wrap { order: 4; }

/* O caminhão é o atalho do rastreio e o "0" é o contador do carrinho. Os dois
   saem porque não estão na referência. ESCONDIDOS, nunca removidos: o caminhão
   tem onclick inline (abrirRastreioLuana) e o contador é escrito pelo app.js a
   cada mudança do carrinho. Voltar é apagar estas duas regras. */
.header-inner.anova-h .header-actions #openTrackingButton { display: none; }
.header-inner.anova-h .header-actions #cartCount { display: none; }

/* ---------------------------------------------------------------------------
   Os controles viram círculos

   Hoje são quadrados de canto redondo (border-radius 16px), 52px, com sombra. A
   referência tem círculos de 44px, borda fina e sem sombra.
   --------------------------------------------------------------------------- */

.header-inner.anova-h .filters-dropdown-trigger,
.header-inner.anova-h #openClientButton,
.header-inner.anova-h .cart-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(40, 41, 41, 0.10);
  border-radius: 50%;
  /* Transparente, e nao branco: e o valor da referencia, e sobre a ilha branca
     da barra os dois se veem igual — mas transparente continua certo se a barra
     mudar de fundo. */
  background: transparent;
  /* #5f6560 e o `--texto-suave` da referencia. Nao e o --anova-tinta-2 (#6b6c6c)
     do tema: os dois sao cinza de texto secundario e a olho nu se equivalem,
     mas a dona pediu identico ao arquivo dela, e este e o numero de la.

     O verde some daqui de proposito: na referencia o UNICO elemento verde da
     barra e o botao da conta. Com todos em verde, nenhum se destacava. */
  color: #5f6560;
  box-shadow: none;
  /* ⚠️ ESTES DOIS SAO OBRIGATORIOS, e a falta deles foi um bug real: o
     .client-button do app.css:789-791 e `inline-flex` com `align-items:center` e
     `gap:10px`, mas SEM `justify-content`. Com o padding zerado e a largura
     fixa em 44px, o icone encostava na borda esquerda do circulo em vez de
     ficar no meio. O `gap` tambem some: dentro do circulo ha um icone so. */
  justify-content: center;
  gap: 0;
  /* Ancora o rotulo que fica so para o leitor de tela, la embaixo. Sem isto ele
     se posiciona pela pagina e pode esticar a rolagem horizontal. */
  position: relative;
  transition: border-color var(--anova-transicao-r), background var(--anova-transicao-r);
}

/* ⚠️ `display` SO nestes dois, e o #openClientButton fica de fora de proposito.
   Quem liga e desliga aquele botao e o par app.css:805-811, por
   body.usuario-logado, e os dois usam `!important`. Uma regra de display minha
   perderia para eles hoje — mas no dia em que alguem tirasse o `!important` de
   la, a conta apareceria para quem NAO esta logado. Ele nao precisa disto: o
   .client-button ja e inline-flex com align-items:center (app.css:789-790). */
.header-inner.anova-h .filters-dropdown-trigger,
.header-inner.anova-h .cart-button {
  display: inline-flex;
  align-items: center;
}

/* Hover da referencia: o icone fica verde, a borda clareia e o fundo recebe o
   verde suave. */
.header-inner.anova-h .filters-dropdown-trigger:hover,
.header-inner.anova-h .cart-button:hover {
  border-color: #499375;
  background: #eaf3ee;
  color: #2c7557;
}

/* 17px e traco 1.9, como na referencia (`.acao-btn svg`). O app.css entrega os
   svg em 22px, que num circulo de 38px enchia demais. */
.header-inner.anova-h .filters-dropdown-trigger svg,
.header-inner.anova-h #openClientButton svg,
.header-inner.anova-h .cart-button svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

/* O botão da conta é o único cheio: na referência ele é um círculo verde com o
   boneco branco. É o que marca "você está logada".

   verde-700, e não verde-800, para seguir o tema-anova.css:978-982, que já pinta
   este botão assim e explica no comentário ao lado por que ele é o único com
   destaque: é o único da barra que muda de significado com a sessão. Aqui só
   entram a forma redonda e o tamanho.

   ⚠️ `display` NÃO é tocado. Quem decide se este botão aparece é o par
   app.css:805-811 (`display:none !important`, virando `inline-flex !important`
   com body.usuario-logado). Encostar nisso esconderia a conta de quem logou. */
.header-inner.anova-h #openClientButton {
  /* #2c7557 e o `--solido` da referencia — o mesmo verde do rodape. */
  border-color: #2c7557;
  background: #2c7557;
  color: #ffffff;
}

.header-inner.anova-h #openClientButton:hover {
  border-color: #1f5a42;
  background: #1f5a42;
  color: #ffffff;
}

/* O rótulo "Área do cliente" fica só para o leitor de tela: no círculo cabe o
   ícone, e a referência não tem texto aqui. Não é `display:none`, senão some
   também do leitor. */
.header-inner.anova-h #openClientButton span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Aberto, o hamburguer so escurece o fundo. O app.css levantava o botao 1px e
   trocava a sombra; num circulo de borda fina isso vira tremida. */
.header-inner.anova-h .filters-dropdown.open .filters-dropdown-trigger {
  background: var(--green-soft);
  transform: none;
  box-shadow: none;
}

/* O app.css:604-609 desenha os tracos com 3px de altura no verde cheio, o que na
   barra afinada fica pesado ao lado do resto. Aqui eles ficam finos e cinzas,
   como o BR ao lado — os dois sao controles secundarios e nao devem competir com
   o botao da conta, que e o unico verde da barra. */
/* 17px de largura, 4px de vao, traco de 2px — os valores da referencia
   (`.ico-hamburguer`). O `currentColor` faz os tracos seguirem a cor do botao,
   entao eles ficam cinzas em repouso e verdes no hover sem regra separada. */
.header-inner.anova-h .hamburger-icon { width: 19px; gap: 5px; }

.header-inner.anova-h .hamburger-icon span {
  height: 2px;
  background: currentColor;
}

/* (09/09) O "x" saia TORTO. E aritmetica, nao alinhamento.

   O app.css monta o "x" contando com a geometria DELE (app.css:598-611): traco
   de 3px e vao de 5px, o que da 8px entre o centro de um traco e o do seguinte.
   Por isso ele usa `translateY(8px)` e `translateY(-8px)` — e exatamente o que
   falta para o traco de cima e o de baixo encontrarem o do meio.

   A regra logo acima trocou a geometria pela da referencia: traco de 2px e vao
   de 4px. O centro a centro passou a ser 6px e o translate continuou 8px, entao
   cada traco atravessava o centro por 2px e o cruzamento caia fora do meio.

   ⚠️ ESTES DOIS VALORES SAO DERIVADOS, e nao escolhidos: e sempre
   (altura do traco + vao). Mexeu num dos dois la em cima, mexe aqui junto —
   senao o "x" entorta de novo e o defeito parece de alinhamento. */
.header-inner.anova-h .filters-dropdown.open .hamburger-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header-inner.anova-h .filters-dropdown.open .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   "Entrar" e o "BR"
   --------------------------------------------------------------------------- */

.header-inner.anova-h #openLoginButton {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--anova-verde-800);
  border-radius: var(--anova-raio-pilula);
  background: var(--anova-verde-800);
  color: var(--anova-branco);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}

.header-inner.anova-h #openLoginButton:hover {
  border-color: var(--anova-verde-700);
  background: var(--anova-verde-700);
}

/* ⚠️ O `!important`: este botão carrega estilo no ATRIBUTO style do index.html
   (`background:#ffffff;color:var(--green);border:1px solid rgba(0,84,61,0.12)`),
   e aquele rgba é o verde da Zeleno escrito na mão. Estilo em atributo não cede
   à folha de estilo. É a mesma razão, e o mesmo remédio, do tema-anova.css:1006. */
.header-inner.anova-h #languageToggleButton {
  /* Valores da referencia (`.idioma-btn`): 38px de altura, 12px de corpo, peso
     600, 0.04em entre letras, no mesmo cinza dos icones. O .client-button do
     app.css:788 vem com peso 800, que no verde cheio deixava o "BR" gritando
     mais alto que o botao da conta. */
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(40, 41, 41, 0.10) !important;
  border-radius: var(--anova-raio-pilula) !important;
  background: transparent !important;
  color: #5f6560 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: none !important;
}

.header-inner.anova-h #languageToggleButton:hover {
  border-color: #499375 !important;
  color: #2c7557 !important;
}

/* ---------------------------------------------------------------------------
   O menu do hambúrguer

   A referência é uma lista simples: um item por linha, filete entre eles, seta
   só nos que saem do site, e o botão verde no rodapé.
   --------------------------------------------------------------------------- */

.header-inner.anova-h .filters-dropdown-panel {
  width: 340px;
  max-width: min(340px, calc(100vw - 28px));
  padding: 12px 26px 26px;
  border: 1px solid var(--anova-linha-n);
  border-radius: var(--anova-raio-g);
  box-shadow: 0 24px 54px rgba(40, 41, 41, 0.10);
}

/* O bloco institucional era o rodapé de um painel de filtros; agora é o menu
   inteiro, então perde o filete e o respiro que o separavam do que vinha acima.
   (O painel de filtros do topo já nasce com `display:none` no index.html:423.) */
.header-inner.anova-h .filters-dropdown-institutional {
  gap: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* A referência não tem a palavra "Menu" em cima da lista. */
.header-inner.anova-h .filters-dropdown-institutional-title { display: none; }

.header-inner.anova-h .filters-dropdown-institutional-links {
  display: flex;
  flex-direction: column;
}

.header-inner.anova-h .filters-dropdown-institutional-links > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* 19px acima e abaixo: a referencia respira bem mais que os 15px que eu tinha
     posto, e num menu de sete itens o aperto aparece somado. */
  padding: 19px 2px;
  /* ⚠️ ZERAR A BORDA INTEIRA ANTES DE POR A DE BAIXO, e este foi um bug real: o
     app.css:4494-4504 desenha estes links como CAIXAS — `border` nos quatro
     lados, `background: #f8fcfa` e `border-radius: 12px`. Declarar so
     `border-bottom` sobrescrevia um lado e deixava os outros tres em pe, com o
     fundo e o canto redondo junto. A referencia quer so o filete de baixo. */
  border: 0;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--anova-linha-n);
  font-size: 15px;
  /* Peso 300 e um respiro entre letras: o app.css deixa esses links no peso
     normal e coladinhos, e era isso que dava a impressao de outra fonte. A
     familia e a mesma (Montserrat, do `*` em tema-anova.css:153). */
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--anova-tinta);
  text-decoration: none;
  transition: color var(--anova-transicao-r);
}

.header-inner.anova-h .filters-dropdown-institutional-links > a:last-of-type {
  border-bottom: 0;
}

/* `background: none` tambem aqui: o app.css:4506-4508 pinta o fundo de verde no
   hover, o que traria a caixa de volta so ao passar o mouse. Numa lista de
   filetes, quem responde ao mouse e o texto. */
.header-inner.anova-h .filters-dropdown-institutional-links > a:hover {
  background: none;
  color: var(--anova-verde-800);
}

.header-inner.anova-h .filters-dropdown-institutional-links > a:focus-visible {
  outline: 2px solid var(--anova-verde-700);
  outline-offset: 2px;
}

/* A setinha marca o que LEVA PARA FORA da loja, e por isso nasce do próprio
   `target="_blank"`: quem acrescentar um link externo amanhã ganha a seta sem
   precisar lembrar de nada, e quem acrescentar um interno não ganha por engano.
   `content` com aspas vazias e `background` em máscara para a seta herdar a cor
   do texto no hover. */
.header-inner.anova-h .filters-dropdown-institutional-links > a[target="_blank"]::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* O botão verde do rodapé. O texto vira "Quero me associar" pelo JS. */
.header-inner.anova-h .filters-dropdown-agendar {
  width: 100% !important;
  margin-top: 20px !important;
  padding: 15px 20px !important;
  border: 1px solid var(--anova-verde-700) !important;
  border-radius: var(--anova-raio-pilula) !important;
  background: var(--anova-verde-700) !important;
  color: var(--anova-branco) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.header-inner.anova-h .filters-dropdown-agendar:hover {
  border-color: var(--anova-verde-800) !important;
  background: var(--anova-verde-800) !important;
}

/* ---------------------------------------------------------------------------
   Telas estreitas

   O grid de três colunas só faz sentido com espaço para as três. Abaixo disso a
   busca não cabe no meio, e a barra volta ao empilhamento do app.css — que já
   trata esse caso hoje.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .header-inner.anova-h {
    display: flex;
    flex-wrap: wrap;
  }

  .header-inner.anova-h .header-search {
    width: 100%;
    max-width: none;
    order: 3;
  }
}