/** Shopify CDN: Minification failed

Line 1987:3 Unexpected "18"

**/
/*
  Escala tipografica da loja — os tokens vivem AQUI, e nao no brisa-front.css,
  porque o brisa-front so e carregado pelas secoes da home. Na pagina de
  carrinho ele nem aparece na lista de stylesheets, e o `var()` resolvia vazio:
  a declaracao virava invalida e o titulo HERDAVA o tamanho do pai (o h1 do
  carrinho caiu para 15px, pior que os 18 de antes). O brisa.css carrega em
  toda pagina.
*/
:root {
  /*
    Escala tipografica da loja. Fluida com `clamp()`, entao o tamanho acompanha
    a largura da tela em vez de pular no breakpoint — e um valor so serve
    celular e desktop.

    Em PX de proposito: a raiz deste tema e 16px, mas ha CSS aqui escrito
    supondo raiz de 10px, e `rem` sai 1,6x maior (gotcha ja documentado no
    rodape, no menu e na PDP). Com px nao ha como errar.

    Medido antes de existir: h1 aparecia em 11, 18, 24, 32 e 52px conforme a
    pagina, `p` tinha 7 tamanhos diferentes no desktop, e havia texto de 8px.

    O TETO de cada token e exatamente o valor que ja vinha das configuracoes do
    tema (h1 40, h2 22, h3 18, h4 16, h5 14, h6 12), entao o DESKTOP nao muda
    nada. O que muda e o celular: o tema encolhia titulo por multiplicador —
    `.h2` virava `calc(var(--g-h2-font-size) * 0.6)` e `.h3` idem — sem piso
    nenhum. Era dai que saia o "h1" de 11px: 18 x 0,6 = 10,8. E o `.h1` abaixo
    de 749px estava cravado em 46px, MAIOR que os 40px do desktop.

                       390px   768px   1440px
      --fs-display      32      44      52     capa de colecao
      --fs-h1           26      34      40     titulo de pagina
      --fs-h2           18      20      22     secao
      --fs-h3           16      16      18     subsecao
      --fs-h4           16      16      16     rotulo forte
      --fs-h5           14      14      14     apoio
      --fs-body         16      16      16     p, li
      --fs-micro        12      12      12     legenda — PISO, nada abaixo
  */
  --fs-display: clamp(32px, 4.6vw, 52px);
  --fs-h1: clamp(26px, 4.4vw, 40px);
  --fs-h2: clamp(18px, 2vw, 22px);
  --fs-h3: clamp(16px, 1.4vw, 18px);
  --fs-h4: 16px;
  --fs-h5: 14px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-botao: 14px;
  --fs-micro: 12px;
}

/*
  Brisa: o que a COB acrescentou ao tema.

  Só duas coisas moram aqui, porque o resto o tema já resolvia:
  1. interruptor "esconder esgotados" no filtro de coleção
  2. numeração disponível no card da listagem

  A grade de numeração do FILTRO não está aqui de propósito: o tema já tem
  `.size-grid` pronta em component-facets.css. O que faltava era só o gatilho,
  que ignorava nome de opção em pt-BR (corrigido em snippets/azua-facet-filter.liquid).

  Tokens: este tema define a paleta em snippets/header-css.liquid. Os que existem e
  que usamos são `--color-foreground` (tripla RGB solta) e `--color-body` (cor
  pronta). NÃO existem aqui `--color-background` nem `--inputs-radius`, que são do
  Dawn: usar esses nomes faz a declaração cair fora calada e o elemento fica sem cor.
*/

/* ---------------------------------------------------------------------------
   Interruptor "esconder esgotados"

   Troca a lista de duas opções do filtro de disponibilidade. Decisão que o cliente
   toma sempre não pode custar dois cliques dentro de um acordeão, ainda mais numa
   loja com 553 produtos publicados sem estoque no ERP.
   --------------------------------------------------------------------------- */

.brisa-stock {
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   UNIDADE: px, nao rem. Este bloco inteiro estava escrito na convencao px/10
   (tema com raiz 62.5%), mas a raiz DESTE tema e 16px. Tudo saia 1,6x maior:
   a trilha do interruptor media 57x32px em vez de 36x20px e o botao 25px em
   vez de 16px, o que fazia "Esconder esgotados" destoar do resto do painel.
   Mesma armadilha ja documentada em brisa-rodape.css e brisa-front.css.
   --------------------------------------------------------------------------- */
.brisa-stock--vertical {
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}

.brisa-stock__label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  margin: 0;
  padding: 6px 0;
  /* 14px. Estava "1.4rem", que e a convencao px/10 de tema com raiz 62.5%.
     A raiz DESTE tema e 16px, entao aquilo saia 22,4px -- o rotulo ficava
     maior que o titulo da faceta ao lado. Mesma armadilha ja documentada em
     brisa-rodape.css. */
  font-size: var(--fs-small);
  line-height: 1.3;
}

.brisa-stock__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.brisa-stock__track {
  flex: 0 0 auto;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(var(--color-foreground), 0.18);
  transition: background-color 0.15s ease;
}

.brisa-stock__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-body);
  transition: transform 0.15s ease;
}

.brisa-stock__input:checked + .brisa-stock__track {
  background-color: rgb(var(--color-foreground));
}

.brisa-stock__input:checked + .brisa-stock__track .brisa-stock__knob {
  transform: translateX(16px);
}

.brisa-stock__input:focus-visible + .brisa-stock__track {
  outline: 2px solid rgba(var(--color-foreground), 0.6);
  outline-offset: 2px;
}

.brisa-stock__count {
  margin-left: 0.4rem;
  color: rgba(var(--color-foreground), 0.75);
}

/* ---------------------------------------------------------------------------
   Numeração disponível no card

   Discreto de propósito: é informação de apoio e não pode competir com preço e
   nome. Número sem estoque fica apagado em vez de sumir, para o cliente enxergar
   a grade inteira que a loja trabalha.
   --------------------------------------------------------------------------- */

.brisa-card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.brisa-card-sizes__item {
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  min-width: 2.6rem;
  text-align: center;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
  color: rgba(var(--color-foreground), 0.85);
}

/* Esgotado precisa "sumir" visualmente perto do disponível, nao so ficar um
   pouco mais claro: 0.75 vs 0.85 de opacidade (valor anterior) e uma
   diferenca pequena demais pro olho separar rápido numa grade com muitos
   números. A diagonal cobre a caixa inteira em vez de riscar so o texto
   (era text-decoration:line-through): risca-se em visão periférica sem
   precisar ler o número, o que importa quando o produto tem uma grade
   cheia de tamanhos esgotados. Borda solida trocada por pontilhada NAO
   ("pontilhado" e a linguagem visual de "em breve/pre-venda" na maioria
   das lojas, sinal errado pra esgotado). */
.brisa-card-sizes__item--off {
  position: relative;
  border-color: rgba(var(--color-foreground), 0.08);
  color: rgba(var(--color-foreground), 0.38);
  text-decoration: none;
}

.brisa-card-sizes__item--off::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.6px),
    rgba(var(--color-foreground), 0.35) calc(50% - 0.6px),
    rgba(var(--color-foreground), 0.35) calc(50% + 0.6px),
    transparent calc(50% + 0.6px)
  );
}

/* no celular a grade não pode empurrar o preço para fora da dobra */
@media screen and (max-width: 749px) {
  .brisa-card-sizes {
    gap: 0.3rem;
    margin-top: 0.6rem;
  }

  .brisa-card-sizes__item {
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    min-width: 2.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brisa-stock__track,
  .brisa-stock__knob {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Direção visual: estrutura do Maranello, marca da Brisa

   O que veio do tema de referência é ESTRUTURA, não código nem cor: página larga
   (1560), calha apertada de 16px que cola os cards e faz a grade parecer sortimento
   grande, uma família tipográfica só, cantos retos (o tema já forçava) e produto
   flutuando sobre bloco cinza claríssimo, sem borda.

   A cor é da Brisa: vermelho #d30239 e amarelo #fcc602, amostrados de peça real
   dela, aplicados nas settings do tema. Aqui embaixo não entra cor cravada: o
   cinza do card sai do próprio texto com alfa, então acompanha qualquer paleta que
   a loja escolher depois.
   --------------------------------------------------------------------------- */

.product-card__image {
  background-color: rgba(var(--color-foreground), 0.035);
}

/* card sem borda: quem separa um produto do outro é o respiro, não o traço */
.product-card,
.product-card__image {
  border: 0;
}

/*
  Deixei de fora o mix-blend-mode: multiply na foto, que e o truque que faz o
  produto casar com o bloco cinza. Funciona em foto com fundo branco e destroi
  foto com fundo escuro ou com transparencia. So entra depois de ver a foto real
  do Adderi, que ainda nao temos.
*/

/* ---------------------------------------------------------------------------
   Religando o sistema paralelo herdado do Azua

   O assets/asthros-home.css traz tokens proprios cravados (--ah-bg #0a0a0a,
   --ah-text #f0ece3, --ah-gold #c8a84b). Isso e o visual do Azua, e como e cor
   fixa dentro do CSS, nenhuma configuracao da loja alcanca: a paleta da Brisa
   entrava certinho nas settings e a tela continuava preta e dourada.

   Em vez de sair editando os 8 arquivos que carregam o dourado, os tokens sao
   reapontados aqui para a paleta da loja. Fica reversivel, e quando a Asthros
   limpar o template a linha some sem deixar rastro.

   Este arquivo carrega depois do asthros-home.css, entao o :root abaixo vence.
   --------------------------------------------------------------------------- */

/*
  html:root em vez de :root: as secoes AH recarregam o asthros-home.css depois do
  head (aparece 3 vezes na home), entao vencer por ordem nao e garantido. Uma
  classe a mais de especificidade resolve independente da ordem.
*/
html:root {
  --ah-bg: var(--color-body);
  --ah-bg2: rgba(var(--color-foreground), 0.03);
  --ah-bg3: rgba(var(--color-foreground), 0.06);
  --ah-line: rgba(var(--color-foreground), 0.12);
  --ah-line2: rgba(var(--color-foreground), 0.07);
  --ah-text: var(--color-body-headings);
  --ah-muted: rgba(var(--color-foreground), 0.65);
  --ah-muted2: rgba(var(--color-foreground), 0.45);
  --ah-gold: var(--color-accent);
}

/*
  O .ah-hero e a .ah-galeria redefinem os tokens NO PROPRIO elemento
  (assets/asthros-home.css linha 5), e token local vence :root em todo o subarvore.
  Era por isso que a paleta certa aparecia no resto da pagina e o hero continuava
  preto e dourado. Mesma especificidade, e este arquivo carrega depois, entao ganha.

  Tambem tiravam a fonte do tema cravando Barlow, o que quebrava a familia unica.
*/
html .ah-hero,
html .ah-galeria {
  --ah-bg: var(--color-body);
  --ah-bg2: rgba(var(--color-foreground), 0.04);
  --ah-bg3: rgba(var(--color-foreground), 0.07);
  --ah-line: rgba(var(--color-foreground), 0.12);
  --ah-text: var(--color-body-headings);
  --ah-muted: rgba(var(--color-foreground), 0.75);
  --ah-gold: var(--color-accent);
  font-family: var(--g-font-1, sans-serif);
}

/*
  O placeholder do hero (mostrado enquanto nao ha imagem) tem gradiente escuro
  cravado, que token nenhum alcanca. Enquanto a foto de campanha nao chega, ele
  vira um cinza claro da propria paleta em vez de um retangulo preto.
*/
html .ah-hero-placeholder {
  background: linear-gradient(
    135deg,
    rgba(var(--color-foreground), 0.05) 0%,
    rgba(var(--color-foreground), 0.09) 50%,
    rgba(var(--color-foreground), 0.05) 100%
  );
}

/*
  O .ah-hero-gradient e um veu escuro cravado, criado para dar leitura a texto
  branco sobre foto. Com a paleta clara ele passou a brigar com o texto escuro e
  engolia a headline. Vira um veu CLARO, que cumpre a mesma funcao na polaridade
  certa: garante contraste do texto sobre a foto sem escurecer a peca.
*/
html .ah-hero-gradient {
  background: linear-gradient(
    to right,
    rgba(var(--color-body-headings-rgb), 0.06) 0%,
    rgba(var(--color-body-headings-rgb), 0.02) 45%,
    transparent 70%
  );
}

/* ---------------------------------------------------------------------------
   Coleção e card: mesmo religamento, outra camada

   O template-collection.css e o component-card.css repetem o padrão do
   asthros-home.css: cada um declara o próprio conjunto de tokens cravado, com o
   preto e o dourado do Azua, no proprio elemento (body.template-collection e
   .card-wrapper). Token local vence :root, entao a paleta da loja nao chegava
   ali: a home ficou clara e a colecao continuou escura.

   Especificidade elevada com html na frente, porque as folhas do tema recarregam
   depois e empate de classe seria decidido por ordem.
   --------------------------------------------------------------------------- */

html body.template-collection {
  --azua-collection-bg: var(--color-body);
  --azua-collection-panel: rgba(var(--color-foreground), 0.03);
  --azua-collection-panel-2: rgba(var(--color-foreground), 0.06);
  --azua-collection-line: rgba(var(--color-foreground), 0.12);
  --azua-collection-text: var(--color-body-headings);
  /* 0,6 vinha de quando esta tela era escura, onde o bege a 60% sobre o preto
     passava. No fundo claro o mesmo 60% da 3,36:1 e reprova o AA: era o
     breadcrumb da colecao, medido na loja. 0,75 da 4,95:1. */
  --azua-collection-muted: rgba(var(--color-foreground), 0.75);
  --azua-collection-gold: var(--color-accent);
}

/*
  Dois seletores porque o tema tem duas gerações de card: .card-wrapper e a ponte
  do Dawn, e .product-card, que e o que a colecao usa de verdade. Religar so o
  primeiro deixava o dourado do Azua vivo no card.
*/
html .card-wrapper,
html .product-card {
  --azua-card-bg: var(--color-body);
  --azua-card-panel: rgba(var(--color-foreground), 0.03);
  --azua-card-line: rgba(var(--color-foreground), 0.12);
  --azua-card-text: var(--color-body-headings);
  --azua-card-muted: rgba(var(--color-foreground), 0.75);
  --azua-card-muted-2: rgba(var(--color-foreground), 0.62);
  --azua-card-gold: var(--color-accent);
}

/*
  O fundo do corpo na colecao e pintado direto, sem passar por token. Sem isso a
  pagina inteira continua preta mesmo com os tokens certos.
*/
html body.template-collection,
html body.template-search {
  background-color: var(--color-body);
  color: var(--color-body-text);
}

/* ---------------------------------------------------------------------------
   Sistema de botão de compra herdado do Azua

   O theme.css define um conjunto proprio de tokens para o botao de compra
   (--azua-buy-btn-*) e o asthros-pdp.css usa --azua-gold com !important em
   dezenas de regras. Contra !important, subir especificidade nao resolve: o
   caminho e religar o TOKEN, que e o que essas regras leem.

   Efeito: as regras do tema continuam valendo, so que apontando para a cor da
   Brisa. Quando a Asthros limpar o template, estas linhas somem sem rastro.
   --------------------------------------------------------------------------- */

html:root {
  --azua-gold: var(--color-accent);
  --azua-buy-btn-bg: var(--color-accent);
  --azua-buy-btn-text: #111111;
  --azua-buy-btn-hover-bg: var(--color-body-headings);
  --azua-buy-btn-hover-text: #ffffff;
  --azua-buy-btn-font: var(--g-font-1, sans-serif);
}

/* ==========================================================================
   Cabecalho de colecao
   O tema pinta a faixa com um gradiente escuro cravado (heranca do Azua) e
   deixa o titulo na cor de texto normal. Resultado: faixa preta com texto
   preto, ou seja, titulo invisivel. Aqui a faixa vira neutra clara e o titulo
   volta a aparecer.
   ========================================================================== */
html .collection-hero.image-content__image-wrapper {
  background-image: none;
  background-color: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html .collection-hero .collection-hero__title,
html .collection-hero .azp-page-title {
  color: var(--color-body-headings, #111);
}

/* ==========================================================================
   Card sem foto
   Produto sem imagem existe enquanto a carga do Adderi nao fecha. Melhor um
   espaco neutro com a marca do que icone de imagem quebrada.
   ========================================================================== */
.brisa-sem-foto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  overflow: hidden;
}

/* Logo em marca d'agua: 40% da largura do card e 50% de opacidade, pra ler
   como "sem foto ainda" sem competir com o nome/preco do produto logo
   abaixo. Sem max-width o logo (720px de origem) estouraria em cards
   grandes.
   `.product-card__image img{ width:100%;height:100%;object-fit:cover }` e
   `.image-content__image-wrapper img{ width:100%;position:absolute }` (as
   duas em theme.css, pensadas pra FOTO real) tambem batem nesse <img> por
   estar no mesmo container - por isso o seletor com dois níveis
   (.brisa-sem-foto como pai) e o !important, senao o logo esticava e
   cortava preenchendo a caixa toda. */
.brisa-sem-foto .brisa-sem-foto__logo {
  position: static !important;
  width: 40% !important;
  max-width: 160px !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.5;
}

/* ==========================================================================
   Parcelamento no card
   A linha principal herdava a cor de texto do tema escuro do Azua
   (creme #f0ece3), que em fundo branco fica invisivel. Quem compra tenis de
   R$ 999 decide pela parcela, entao essa linha precisa ser legivel.
   ========================================================================== */
html .product-card__installments,
html .product-card__installments * {
  color: rgba(0, 0, 0, 0.6);
}

html .product-card__installments-alt {
  color: rgba(0, 0, 0, 0.62);
}

/* Assinatura do rodape em texto, no lugar do logo hospedado fora */
html .azp-developed-by .azp-developed-logo {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
}

/* ==========================================================================
   Marca
   ========================================================================== */
html .azua-header__logo .azua-header__logo-img {
  display: block;
  width: auto;
  height: 26px;
}

html .azua-footer__logo .azua-footer__logo-img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  html .azua-header__logo .azua-header__logo-img {
    height: 22px;
  }
}

/* ==========================================================================
   Topo claro em toda a loja
   O --azua-bg global e #0a0a0a, entao o topo saia preto em umas paginas e
   claro em outras, e o logo (que tem "brisa esportes" em preto) desaparecia no
   preto. Em vez de manter duas versoes de marca e adivinhar o estado da barra,
   o topo passa a ser claro sempre, que e a linguagem da referencia aprovada.
   Token redefinido NO ELEMENTO vence o do :root sem precisar de !important.
   ========================================================================== */
html .azua-header {
  --azua-bg: #ffffff;
  --azua-text: #111111;
  background: #ffffff;
  color: #111111;
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.08);
}

html .azua-header a,
html .azua-header button,
html .azua-header svg {
  color: #111111;
}

html .azua-header .azua-header__hamburger span {
  background: #111111;
}

/* ==========================================================================
   Grade de numeracao no filtro
   O tema tem a `.size-grid` pronta, mas o template de colecao do Azua declara
   `body.template-collection .facets__item { display: flex }`, que e mais
   especifico que `.size-grid .facets__item` e derrubava a grade: cada numero
   virava uma linha inteira e a coluna do filtro virava rolagem de 12 numeros.
   Em calcado a primeira pergunta e "tem no meu numero?", entao essa grade e o
   filtro que mais importa na loja.
   ========================================================================== */
html body.template-collection .size-grid .facets__item {
  display: inline-flex;
}

/*
  `:not(.no-js)` nao e detalhe: o tema imprime DUAS listas, a de JS e a de
  fallback sem JS, e conta com `display:none` na segunda. Uma regra de display
  em `ul` solto e mais especifica que esse none e faz as duas aparecerem, ou
  seja a grade sai duplicada, a segunda com a contagem no rotulo.
*/
html body.template-collection .size-grid ul:not(.no-js) {
  display: flex;
  flex-wrap: wrap;
}

/* ==========================================================================
   Tipografia da referencia (Maranello / preset Sneakers)
   Medido no demo: duas familias, e e esse contraste que faltava. O tema herdado
   usava Archivo nos dois papeis, o que achata titulo e texto no mesmo tom.
   Titulo = Instrument Sans. Texto = Archivo, que o tema ja carrega.
   Token redefinido em html:root vence o :root do header-css sem !important.
   ========================================================================== */
html:root {
  --g-font-1: 'Instrument Sans', 'Archivo', sans-serif;
}

/* ==========================================================================
   Menu aberto no topo (referencia Maranello/Sneakers)
   Loja multimarca vende por categoria e por marca; hamburguer esconde as duas.
   Abaixo de 990px a barra some e a gaveta assume, que e onde ela funciona.
   ========================================================================== */
/*
  A grade vale a partir de 990px, que e exatamente onde o `.brisa-nav` deixa de
  ser `display: none` (ver o min-width mais abaixo). Solta, ela tambem pegava o
  celular e quebrava o topo: sem o nav sobram DOIS itens para TRES colunas,
  entao os icones caiam na coluna do meio (`1fr`) e, pelo `margin-left: auto`
  deles, paravam encostados a direita DESSA coluna — 64px antes da borda. Ai o
  logo, que e absoluto e centrado na barra inteira, invadia os icones em 16px.
*/
@media screen and (min-width: 990px) {
  html .azua-header .azua-header__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    /*
      Rotulo em portugues e mais longo que em ingles: "TODOS OS PRODUTOS" ocupa
      o triplo de "SALE". Sem essa calha o primeiro item encosta no logo e o
      ultimo nos icones, e a barra le como se estivesse quebrada.
    */
    gap: 4rem;
  }
}

.brisa-nav {
  display: none;
}

.brisa-nav__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brisa-nav__item {
  position: relative;
}

html .azua-header .brisa-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 18px 0;
  font-family: var(--g-font-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  white-space: nowrap;
}

html .azua-header .brisa-nav__link:hover,
html .azua-header .brisa-nav__item:focus-within .brisa-nav__link {
  color: var(--color-accent-texto, #b06325);
}

.brisa-nav__seta {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
}

.brisa-nav__item:hover .brisa-nav__seta,
.brisa-nav__item:focus-within .brisa-nav__seta {
  transform: rotate(180deg);
}

.brisa-nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 20rem;
  margin: 0;
  padding: 1.2rem 0;
  list-style: none;
  background: #ffffff;
  border: 0.1rem solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 30;
}

.brisa-nav__item:hover .brisa-nav__sub,
.brisa-nav__item:focus-within .brisa-nav__sub {
  opacity: 1;
  visibility: visible;
}

html .azua-header .brisa-nav__sublink {
  display: block;
  padding: 0.9rem 2rem;
  font-family: var(--g-font-2);
  font-size: 1.4rem;
  color: #404040;
  text-decoration: none;
  white-space: nowrap;
}

html .azua-header .brisa-nav__sublink:hover {
  color: var(--color-accent-texto, #b06325);
  background: rgba(0, 0, 0, 0.03);
}

@media screen and (min-width: 990px) {
  .brisa-nav {
    display: block;
  }

  html .azua-header .azua-header__hamburger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Topo em tres colunas: marca, menu, acoes.
   O logo do tema era `position: absolute` centralizado, o que funcionava
   enquanto o topo tinha so hamburguer e icones. Com o menu aberto os dois
   ocupam a mesma faixa e o texto passa por cima da marca. Aqui o logo volta
   para o fluxo e a grade resolve o lugar de cada um.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  html body .azua-header .azua-header__logo {
    position: static;
    transform: none;
    justify-self: start;
  }

  /*
    `!important` aqui nao e preguica: o tema declara
    `.azua-header__hamburger { display: flex !important }` e contra !important
    subir especificidade nao resolve. Como display nao passa por token, nao ha
    o caminho de religar variavel que resolveu o botao de compra.
  */
  html body .azua-header .azua-header__hamburger {
    display: none !important;
  }

  html body .azua-header .azua-header__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto;
    min-height: 6rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  /* o menu ocupa 60px de barra: 12px de texto mais respiro em cima e embaixo */
  html .azua-header .brisa-nav__link {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

@media screen and (max-width: 989px) {
  html body .azua-header .azua-header__bar {
    grid-template-columns: auto 1fr auto;
  }
}

/* ==========================================================================
   Card fiel ao demo: caixa clara, texto centralizado
   Medido no demo do Maranello: `.card-product` e um bloco #fafafa com 15px de
   respiro e 2px de canto, miolo de texto com 20px em cima e 30px embaixo, nome
   em 13px/600 e preco em 15px peso normal, tudo centralizado.
   Vale para a colecao, que usa o card do tema; o card das secoes proprias esta
   em brisa-front.css.
   ========================================================================== */
html body .product-card {
  background: #fafafa;
  padding: 15px;
  border-radius: 2px;
}

/*
  `.text-left` e `.text-uppercase` sao utilitarias no estilo Bootstrap, com
  !important embutido, e o markup do card as imprime direto. Contra !important
  nao ha especificidade que resolva, e alinhamento nao passa por token. A caixa
  alta some pela configuracao (t_product), que e o lugar certo; o alinhamento
  precisa desta regra.
*/
html body .product-card .product-card__info {
  text-align: center !important;
}

html body .product-card .product-card__image {
  background-color: transparent;
}

html body .product-card__info {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

html body .product-card__info .product-card__name {
  /* 12px (fs-micro) e pequeno demais pra nome de produto -- referencia de
     mercado (Nike, Dawn) usa 14-16px, sempre menor ou igual ao preco. */
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 600;
}

/* marca e parcelamento tambem centralizados, senao o card fica meio a meio */
html body .product-card__info .product-card__vendor,
html body .product-card__info .product-card__installments {
  text-align: center;
}

/*
  Preco sem laranja e sem negrito, como no demo. Foi decisao do cliente seguir a
  referencia; para voltar atras basta cor e peso nesta regra.
*/
html body .product-card__price .price-item,
html body .product-card__price {
  font-size: var(--fs-body);
  font-weight: 400;
  color: rgba(var(--color-foreground), 1);
}

html body .brisa-card-sizes {
  justify-content: center;
}

html body .product-card .product-tag--absolute {
  left: 0;
  top: 0;
}

/* ==========================================================================
   Card da colecao no desenho do demo
   O theme.css carrega um bloco inteiro do Azua para o card, com `!important` em
   quase toda linha: nome em Barlow 24px peso 900 CAIXA ALTA com altura fixa de
   88px, preco no dourado (hoje laranja) em 19px peso 900, swatch a esquerda.
   Era isso que sobrava de "cara de Azua" mesmo depois de trocar cor e fonte.

   Contra !important nao existe caminho por especificidade nem por token, entao
   aqui a regra tambem e !important. Os numeros sao os do demo: nome 13px/1.2
   peso 600, preco 15px peso normal na cor do corpo, tudo centralizado.
   ========================================================================== */
html body .product-card {
  background: #fafafa !important;
}

html body .product-card__name {
  /* nome do produto e TITULO, mesma familia do <h1> da PDP (Instrument Sans) —
     o card herdava Barlow/g-font-2 do bloco Azua, fora do padrao da marca. */
  font-family: var(--g-font-1) !important;
  /* 12px (fs-micro) e pequeno pra nome de produto no card -- referencia de
     mercado (Nike 14px, Dawn 14-16px) pede 14-16px, sempre <= preco. */
  font-size: var(--fs-small) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  /* altura fixa de 88px cabia um titulo em caixa alta de 24px; em 13px sobra
     um buraco no meio do card */
  height: auto !important;
  max-width: 100% !important;
  text-transform: none !important;
  /* 8px abria um vao entre o nome e o preco maior que o vao entre o preco e o
     parcelamento, e o olho lia os dois como blocos separados. 4px mantem nome
     e preco como uma unidade so. */
  margin: 0 0 4px !important;
  text-align: left !important;
}

html body .product-card__price,
html body .product-card__price-pix {
  color: rgba(var(--color-foreground), 1) !important;
  /* era 15px cravado; o tamanho passa a vir do token. Peso e cor seguem como
     estao: sao a decisao do cliente descrita na regra logo acima. */
  font-size: var(--fs-body) !important;
  font-weight: 400 !important;
}

/* Preco em destaque de verdade (pedido do cliente): mesmo papel visual do
   .brisa-compra__valor da PDP, so que do tamanho de card. */
html body .product-card__valor {
  display: block;
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important;
  color: var(--color-body-headings) !important;
  margin-bottom: 2px;
}

/*
  Alinhamento e fonte do corpo do card: tudo vinha centralizado (herdado do
  Azua) e com Barlow no lugar de Archivo (fonte de corpo da marca). O
  card--style9 ja pedia `.text-left` no HTML, mas uma regra concorrente com
  !important vencia. Aqui empata em especificidade e alinha a esquerda de
  verdade, com a fonte certa.
*/
html body .product-card__info,
html body .product-card__price,
html body .product-card__price-row,
html body .product-card__installments,
html body .product-card__swatch,
html body .brisa-card-sizes {
  /* Archivo e o corpo que o tema ja carrega (settings > Tipografia); o card
     sobrescrevia com Barlow (herdado do Azua) em vez de herdar do body. */
  font-family: Archivo, sans-serif !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/*
  `.product-card__info` e flex column e o bloco Azua da um `order` explicito
  pra tipo(1)/nome(2)/preco(3)/swatch(4) -- mas nunca previu a numeracao da
  Brisa, que ficava sem `order` nenhum. Item de flex sem `order` vale 0, entao
  a grade de numeracao pulava pra FRENTE de nome e preco, mesmo vindo depois
  deles no HTML. Ordem pedida: nome, preco, cor, numeracao.
*/
html body .brisa-card-sizes {
  order: 5;
}

/* Parcelamento sem caixa alta e sem gritar tanto quanto o preco: mesmo
   padrao da PDP (`ou **10x de R$ X sem juros**`, so o valor em destaque).
   O bloco Azua botava `display:flex; flex-direction:column` nisso, que e
   pensado pra duas LINHAS (preco a vista + parcela). Como agora e uma frase
   so ("ou" + valor em negrito), o flex column quebrava "ou" numa linha e o
   valor sozinho na de baixo. Bloco simples resolve: e uma frase, nao duas. */
/*
  Especificidade, nao teimosia: `body.template-index .product-card__installments`
  (asthros-home.css) e `body.template-collection ...` (template-collection.css)
  valem (0,2,1) e trazem `display:flex; flex-direction:column`, que empilha o
  "ou" acima do valor. Um seletor (0,1,2) como `html body .product-card__...`
  PERDE para eles — duas classes contra uma — e o !important nao desempata,
  porque os dois lados tem.

  Acrescentar `.product-card` leva a (0,2,2) e ganha em todas as paginas de uma
  vez, sem precisar repetir o seletor por template.
*/
html body .product-card .product-card__installments {
  display: block !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/*
  O `nowrap` cobre so o valor ("R$ 112,90"), para ele nao rachar entre o simbolo
  e o numero. O "ou 10x" fica junto por espaco duro, no snippet. Tudo o que
  estiver alem disso na mesma trava volta a cortar texto em cartao estreito —
  ver o comentario em snippets/product-card.liquid.
*/
html body .product-card .product-card__parcela-valor {
  white-space: nowrap;
}

html body .product-card__installments strong {
  font-weight: 700 !important;
  color: var(--color-body-headings);
}

/* Olho-de-boi de categoria (ex.: "Infantil") some do card: duplicava
   classificacao sem ajudar a decisao de compra, que agora e nome > preco >
   parcelamento > cor > numeracao. */
html body .product-card__type {
  display: none !important;
}

html body .product-card__installments {
  /* o cinza do tema era claro demais no branco e sumia; parcela e informacao de
     compra, precisa ser legivel. O demo nao tem essa linha, mas no Brasil ela
     nao e opcional. */
  color: rgba(var(--color-foreground), 0.8) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   Pagina de busca
   O component-search.css declara um bloco de TOKENS em `body.template-search`
   (--azua-search-bg, -panel, -text, -gold) e todo o resto da pagina le esses
   tokens com !important. Perseguir seletor por seletor nao resolve: sao dez
   containers diferentes lendo a mesma variavel.

   Religar o token e o caminho, igual foi feito no botao de compra. `html
   body.template-search` (0,1,2) vence `body.template-search` (0,1,1) sem
   precisar de !important em lugar nenhum.
   ========================================================================== */
html body.template-search {
  --azua-search-bg: #ffffff;
  --azua-search-panel: #fafafa;
  --azua-search-panel-2: #f5f5f5;
  --azua-search-line: rgba(0, 0, 0, 0.12);
  --azua-search-text: #1b1b1b;
  --azua-search-muted: rgba(0, 0, 0, 0.58);
  --azua-search-gold: var(--color-accent);
}

/* a pilula de categoria nao passa por token, entao continua na mao */
html body.template-search .category-bullet {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--color-body-headings) !important;
}

/* ==========================================================================
   Faixa de desconto no card
   Formato medido na Netshoes: largura inteira do rodape da foto, nao pilula no
   canto. Some com a duvida de "isso e oferta?" num golpe de olho.
   ========================================================================== */
.brisa-faixa-desconto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 6px 10px;
  background: var(--color-accent);
  color: #111111;
  font-family: var(--g-font-1);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ==========================================================================
   Calculador de frete com a cara da Brisa

   O componente veio da Azua, que e loja de tema ESCURO. Cada regra dele pinta
   com `var(--azua-pdp-X, var(--azp-X, #valor-escuro))`. Na Brisa essas duas
   variaveis nao existem, entao TODA regra caia no terceiro nivel — o valor
   cravado — e o calculador aparecia como uma caixa preta com dourado no meio
   de uma loja branca e laranja.

   Em vez de reescrever as dezenas de regras herdadas (que voltariam a divergir
   na proxima atualizacao do tema-base), definimos aqui as variaveis que ele ja
   procura. O componente continua intacto; muda so a paleta que ele encontra.
   ========================================================================== */
.td-frete-dinamico {
  --azua-pdp-bg-2: var(--brisa-superficie, rgba(0, 0, 0, 0.035));
  --azua-pdp-bg: var(--color-body, #ffffff);
  --azua-pdp-text: var(--brisa-ink, #1b1b1b);
  --azua-pdp-muted: rgba(var(--color-foreground), 0.7);
  --azua-pdp-line: var(--brisa-linha, rgba(0, 0, 0, 0.12));
  --azua-pdp-gold: var(--brisa-acao, #f58934);

  /* mesmos nomes no prefixo curto, que e o segundo nivel do fallback */
  --azp-bg-2: var(--azua-pdp-bg-2);
  --azp-bg: var(--azua-pdp-bg);
  --azp-text: var(--azua-pdp-text);
  --azp-muted: var(--azua-pdp-muted);
  --azp-line: var(--azua-pdp-line);
  --azp-gold: var(--azua-pdp-gold);
}

/*
  O botao pinta o texto com a cor de FUNDO da Azua (#0a0a0a) sobre o dourado.
  Com o laranja da Brisa por baixo, o texto precisa do preto da marca — e o
  laranja sobre branco so passa contraste como FUNDO, nunca como letra.
*/
.td-frete-dinamico .td-frete-dinamico-btn {
  color: #111111;
}

/* ==========================================================================
   Menu mobile claro

   A gaveta veio da Azua desenhada como menu ESCURO: fundo `#000` cravado e a
   letra saindo de `--color-body-headings`, que la era claro. A Brisa passou a
   loja inteira para o claro (ver "Topo claro em toda a loja" acima) e o token
   virou #1b1b1b — mas o fundo preto continuou cravado no CSS.

   Resultado medido na loja no ar: fundo rgb(0,0,0) com os 103 links em
   rgb(27,27,27). Contraste 1,04:1 — o menu existia e nao dava para ler.
   Mesmo defeito de familia do rodape (ver o bloco de cor no brisa-rodape.css):
   valor cravado de um lado, token do outro, e ninguem percebe quando o tema
   troca de claro para escuro.

   `#NavDrawer` na frente porque as regras originais usam id + classe, e sem
   isso o override perde por especificidade.
   ========================================================================== */
#NavDrawer.azua-nav-drawer,
#NavDrawer .azua-nav-drawer__grid,
#NavDrawer .azua-nav-drawer__panel {
  background: var(--color-body, #ffffff);
}

/* O submenu aberto precisa se distinguir do nivel de cima sem virar outro
   tema: um degrau de superficie, nao um bloco de cor. */
#NavDrawer .azua-nav-drawer__children {
  background: var(--brisa-superficie, rgba(0, 0, 0, 0.035)) !important;
}

/* ==========================================================================
   Filtros acima da grade da colecao (marca + interruptor de estoque)

   Chamava-se `.brisa-atalhos` e colidia com a faixa de bolinhas da HOME, que
   usa a mesma palavra para outra coisa (`sections/brisa-atalhos.liquid`, com
   `assets/brisa-front.css`). Mesma classe, mesma especificidade: quem vencia
   era a ordem dos arquivos. O `flex-wrap: wrap` e o `padding: 16px 20px` daqui
   vazavam para a home e quebravam o trilho em 5 linhas no celular.

   Nao renomear de volta. "Atalho" na home = categoria em bolinha; aqui e
   filtro de listagem. Nomes diferentes porque sao coisas diferentes.
   ========================================================================== */
.brisa-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 32px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: #fafafa;
  border-radius: 2px;
}

.brisa-filtros__bloco {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

.brisa-filtros__bloco--exibir {
  margin-left: auto;
}

.brisa-filtros__rotulo {
  margin: 0;
  font-family: var(--g-font-1);
  /* era 13px cravado */
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-body-headings);
  white-space: nowrap;
}

.brisa-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brisa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: #ffffff;
  font-size: var(--fs-micro);
  color: var(--color-body-headings);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.brisa-chip:hover {
  border-color: var(--color-accent);
}

.brisa-chip--ativo {
  border-color: var(--color-accent);
  background: var(--color-accent);
  /* preto sobre o laranja, mesma regra do botao de compra */
  color: #111111;
  font-weight: 600;
}

.brisa-chip__n {
  font-size: var(--fs-micro);
  color: rgba(0, 0, 0, 0.62);
}

.brisa-chip--ativo .brisa-chip__n {
  color: rgba(0, 0, 0, 0.6);
}

.brisa-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* era 13px cravado */
  font-size: var(--fs-small);
  color: var(--color-body-headings);
  text-decoration: none;
}

.brisa-toggle__trilho {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.18s ease;
  flex: 0 0 auto;
}

.brisa-toggle__bolha {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.18s ease;
}

.brisa-toggle--ligado .brisa-toggle__trilho {
  background: var(--color-accent);
}

.brisa-toggle--ligado .brisa-toggle__bolha {
  transform: translateX(16px);
}

.brisa-toggle__n {
  color: rgba(0, 0, 0, 0.62);
}

@media screen and (max-width: 749px) {
  .brisa-filtros__bloco--exibir {
    margin-left: 0;
  }
}

/* ==========================================================================
   Busca dentro do filtro
   ========================================================================== */
.brisa-busca-faceta {
  display: block;
  margin: 0 0 12px;
}

.brisa-busca-faceta input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 2px;
  background: #ffffff;
  font-family: var(--g-font-2);
  font-size: var(--fs-micro);
  color: var(--color-body-headings);
}

.brisa-busca-faceta input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.brisa-busca-faceta__vazio {
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(var(--color-foreground), 0.75);
}

/* ---------------------------------------------------------------
   Retirada na loja (PDP)
   O widget nativo chega com o CSS do Dawn/Azua: caption cinza,
   link sublinhado fino, icone verde generico. Aqui ele vira um
   bloco com peso de prova, porque "retira hoje na tua rua" e o
   argumento que o marketplace nao tem.
   --------------------------------------------------------------- */
.brisa-retirada {
  display: block;
  margin: 18px 0 0;
}

.brisa-retirada .pickup-availability-preview {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 3px solid var(--color-accent);
  border-radius: 2px;
  background: #fafafa;
}

.brisa-retirada .pickup-availability-info > * {
  margin: 0;
}

.brisa-retirada .pickup-availability-info p.caption-large {
  font-family: var(--g-font-2);
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-body-headings);
}

.brisa-retirada .pickup-availability-info p.caption-large + p,
.brisa-retirada .pickup-availability-info .caption {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(var(--color-foreground), 0.75);
  text-transform: none;
  letter-spacing: 0;
}

.brisa-retirada .pickup-availability-button {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--g-font-2);
  /* era 13px cravado: o unico rotulo de botao da PDP fora do token */
  font-size: var(--fs-botao);
  font-weight: 600;
  color: var(--color-body-headings);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.brisa-retirada .pickup-availability-button:hover {
  color: var(--color-accent-texto, #b06325);
}

.brisa-retirada svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* Com o bloco de retirada no meio, o respiro do rodape de apoio
   ficava grande demais e abria um buraco entre os dois. */
.brisa-retirada ~ .brisa-apoio {
  margin-top: 26px;
  padding-top: 22px;
}

/* ---------------------------------------------------------------
   Mega menu (topo)
   64 subcategorias nao cabem no painel estreito de antes. O painel
   agora ancora na BARRA, nao no item, e as folhas fluem em colunas
   de 9 linhas: e o que deixa "Roupas" com 17 itens legivel sem
   virar uma coluna de rolagem.
   --------------------------------------------------------------- */
.brisa-nav {
  position: relative;
}

/* o painel ancora na barra; item com filho nao pode criar contexto proprio */
.brisa-nav__item--tem-filho {
  position: static;
}

.brisa-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 24px 28px 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 30;
}

.brisa-nav__item:hover .brisa-mega,
.brisa-nav__item:focus-within .brisa-mega {
  opacity: 1;
  visibility: visible;
}

.brisa-mega__grade {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.brisa-mega__coluna {
  min-width: 0;
}

html .azua-header .brisa-mega__titulo {
  display: block;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--g-font-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
}

html .azua-header .brisa-mega__titulo:hover {
  color: var(--color-accent-texto, #b06325);
}

.brisa-mega__lista {
  display: grid;
  grid-template-rows: repeat(9, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 32px;
  row-gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html .azua-header .brisa-mega__link {
  display: block;
  padding: 5px 0;
  font-family: var(--g-font-2);
  font-size: var(--fs-micro);
  line-height: 1.3;
  color: #404040;
  text-decoration: none;
  white-space: nowrap;
}

html .azua-header .brisa-mega__link:hover {
  color: var(--color-accent-texto, #b06325);
}

html .azua-header .brisa-mega__todos {
  /* block (nao inline-block) pra ocupar a largura toda da caixa e o
     text-align abaixo poder jogar o texto pra direita sem herdar pros
     links da grade acima (essa regra e so no proprio elemento, nao no
     .brisa-mega pai). Right, nao colado: o padding lateral de 28px do
     .brisa-mega ja da o respiro em relacao a borda. */
  display: block;
  text-align: right;
  margin-top: 20px;
  font-family: var(--g-font-2);
  font-size: 12px;
  font-weight: 600;
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html .azua-header .brisa-mega__todos:hover {
  color: var(--color-accent-texto, #b06325);
}

/* Cabecalho de grupo na gaveta: sem ele, 17 folhas viram uma lista
   sem comeco nem fim no celular. */
html .azua-nav-drawer .brisa-gaveta__grupo,
html .brisa-gaveta__grupo {
  display: block;
  margin: 16px 0 4px;
  /*
    Era o UNICO texto da gaveta sem recuo: nascia em x=0, colado na borda,
    enquanto o item de topo comeca em 24px e o link do submenu em 48px. Colado
    na beirada, a primeira letra parece cortada e o rotulo le como se estivesse
    espremido para fora da caixa.

    32px fica entre os dois niveis de propriedade: mais adentro que o item que
    o contem, menos que os links que ele encabeca — a hierarquia aparece na
    margem esquerda, sem inventar um quarto alinhamento.
  */
  padding-left: 32px;
  font-family: var(--g-font-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
}

/* Barra com 7 departamentos: em tela media o rotulo em portugues estoura
   antes do menu virar gaveta. Aperta letra e folga em vez de cortar item. */
@media screen and (max-width: 1400px) {
  html .azua-header .brisa-nav__link {
    font-size: var(--fs-micro);
    letter-spacing: 0;
  }
  .brisa-nav__lista {
    gap: 12px;
  }
}

/* ---------------------------------------------------------------
   Icones de traco (snippet brisa-icone)
   O tema tem um `svg { fill: currentColor }` global, e CSS vence o
   atributo `fill="none"` do proprio SVG. Sem esta regra o icone de
   loja e o de cartao viram um bloco preto solido. Mesma familia do
   `svg { width: 16px }` que ja tinha mordido no rodape.
   Mora aqui, e nao em cada secao, porque o icone e usado no rodape,
   na home e no que vier depois.
   --------------------------------------------------------------- */
.brisa-icone,
.brisa-icone * {
  fill: none;
  stroke: currentColor;
}

/* ---------------------------------------------------------------
   Card da listagem (herdado do Azua)
   Tres defeitos medidos na pagina, nao suposicoes.
   --------------------------------------------------------------- */

/*
  1. "Ver Produto" so aparecia no :hover (opacity 0 + absolute). No celular o
  hover nao existe, entao o botao NUNCA aparecia, e no desktop ele cobria a foto
  com uma barra escura. A foto e o nome do produto JA sao link (medido: a
  imagem e um <a> de 379x493), entao o botao nao acrescenta caminho nenhum:
  some. Card inteiro clicavel resolve nos dois aparelhos.
*/
html .product-card .product-card-cart {
  display: none;
}

/*
  2. O parcelamento saia em rgba(240, 236, 227, 0.95): quase branco sobre fundo
  branco. Era texto invisivel, nao texto discreto.
*/
html .product-card .product-card__installments,
html .product-card .product-card__installments * {
  color: rgba(var(--color-foreground), 0.75);
}

/*
  3. Os selos eram laranja da marca sobre um cinza de 8% de opacidade, por cima
  de foto de produto em fundo branco: fica em torno de 2,5:1 e some. Agora sao
  chip solido, com o laranja reservado para o selo que informa (NOVIDADE) e
  neutro para a categoria, que e so contexto.
*/
/*
  A regra do Azua e `.product-card .product-tag { color: var(--azua-card-gold)
  !important; background-color: rgba(10,10,10,0.08) !important }`. O fundo esta
  CRAVADO, nao ha token para religar, entao aqui e um dos poucos lugares em que
  !important e a resposta certa. Documentado para nao virar habito.

  Selo de categoria vira chip neutro, porque e so contexto. Selo que informa
  (NOVIDADE) fica no laranja da marca com texto preto.
*/
html .product-card .product-tag,
html .product-card .product-tag--absolute {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: #ffffff !important;
  color: rgba(0, 0, 0, 0.62) !important;
  letter-spacing: 0.04em;
}

html .product-card .product-tag:not(.product-tag--manual):not(.product-tag-sale) {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  /* preto sobre o laranja: branco sobre #F58934 da 2,2:1 */
  color: #111111 !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Contraste sobre o laranja da marca

   Medido em 26/08/2026 com a formula da WCAG, laranja #F58934:
     - texto BRANCO sobre o laranja ... 2,47:1  reprova o AA (minimo 4,5:1)
     - texto PRETO  sobre o laranja ... 8,51:1  passa com folga
   O CSS da Brisa ja nasceu com preto sobre laranja. O tema herdado nao: seis
   regras cravam letra branca em cima do fundo laranja, e uma delas e o hover do
   botao primario, que aparece em carrinho, formulario e checkout.

   Aqui so entram as regras de fundo SOLIDO. `.btn-gradient` ficou de fora de
   proposito: o fundo dele vai de preto ao laranja, entao a cor certa depende de
   onde a letra cai, e isso se resolve olhando o botao, nao no escuro.

   Para letra em laranja sobre fundo claro existe --color-accent-texto
   (o mesmo matiz escurecido ate 4,9:1), publicado em header-css.liquid.
   --------------------------------------------------------------------------- */

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  color: #000 !important;
}

.pagination .current {
  color: #000;
}

.collection-card__title {
  color: #000;
}

.product-card--style7 .product-card__overlay .product-card__overlay-btn:hover {
  color: #000 !important;
}

.modal-dialog--upsell .btn-decline:hover {
  color: #000;
}

/* ---------------------------------------------------------------------------
   Avisos do carrinho

   Substituem as metas herdadas do Azua (frete gratis a partir de R$ 600 no RS,
   15% ao levar 2 pecas), que anunciavam regra que a Brisa nao tem: a barra
   prometia e o checkout cobrava cheio. Aqui so entra o que a loja cumpre.

   Cor pelos tokens do tema, nunca cravada: as 3 lojas da rede usam este arquivo.
   --------------------------------------------------------------------------- */

.brisa-cart-avisos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  text-align: left;
}

.brisa-cart-aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-body-headings, #1b1b1b);
  background: rgba(var(--color-body-text-rgb, 64, 64, 64), 0.05);
  border-left: 3px solid rgba(var(--color-body-text-rgb, 64, 64, 64), 0.25);
}

/* A retirada e a vantagem da loja de rua, entao ela ganha o laranja da marca.
   Faixa lateral, nao fundo: letra escura sobre laranja seria o unico jeito de
   passar o contraste, e num aviso pequeno isso pesa demais na tela. */
.brisa-cart-aviso--retirada {
  border-left-color: var(--color-accent, #f58934);
}

.brisa-cart-aviso__icone {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--color-accent-texto, #b06325);
}

/* ---------------------------------------------------------------------------
   Botao de finalizar na gaveta

   O markup pede `w-100`, mas essa classe do Bootstrap NAO existe em nenhum CSS
   deste tema: o botao mais importante do funil estava saindo com largura de
   conteudo, encolhido num canto da gaveta. Aqui ele volta a ocupar a linha.
   --------------------------------------------------------------------------- */

.azua-header .mini-cart-btns,
.mini-cart-btns {
  display: flex;
  gap: 10px;
}

.azua-header .mini-cart-btns .btn,
.mini-cart-btns .btn {
  flex: 1 1 auto;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Calculadora de frete (motor nativo da Shopify)

   Substitui a caixa que apontava para o proxy da Frenet, fora do ar desde pelo
   menos 27/08/2026 (404, erro 1042 da Cloudflare). Ver snippets/brisa-frete.
   --------------------------------------------------------------------------- */

.brisa-frete {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.brisa-frete__rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-body-headings, #1b1b1b);
}

.brisa-frete__linha {
  display: flex;
  gap: 8px;
}

.brisa-frete__cep {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--color-body-headings, #1b1b1b);
  background: var(--color-body, #fff);
  border: 1px solid rgba(var(--color-body-text-rgb, 64, 64, 64), 0.28);
  border-radius: 0;
}

.brisa-frete__cep:focus {
  outline: 2px solid var(--color-accent, #f58934);
  outline-offset: -2px;
}

/* Letra preta sobre o laranja: branco reprova o AA (2,47:1), preto da 8,51:1 */
.brisa-frete__btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
  background: var(--color-accent, #f58934);
  border: 0;
  cursor: pointer;
}

.brisa-frete__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brisa-frete__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--color-body-text-rgb, 64, 64, 64), 0.1);
  font-size: var(--fs-micro);
}

.brisa-frete__item:last-child {
  border-bottom: 0;
}

.brisa-frete__nome {
  color: var(--color-body-headings, #1b1b1b);
}

.brisa-frete__nome small {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--color-body-text, #404040);
}

.brisa-frete__valor {
  font-weight: 800;
  white-space: nowrap;
  color: var(--color-body-headings, #1b1b1b);
}

.brisa-frete__aviso,
.brisa-frete__nota {
  margin: 0;
  font-size: 12px;
  color: var(--color-body-text, #404040);
}

.brisa-frete__nota a {
  color: var(--color-accent-texto, #b06325);
}

/* ---------------------------------------------------------------------------
   Link de acento sobre fundo claro

   Duas folhas pintam link com o laranja cheio:
     template-collection.css  .button-show-more    -> var(--azua-collection-gold)
     component-facets.css     .underlined-link     -> rgba(var(--g-main))

   Sobre branco isso da 2,47:1 e reprova o AA. Medido na categoria, no
   "+ Mostre mais" do filtro. O tom escurecido da 4,9:1 e mantem o matiz.

   Escopado em fundo claro de proposito: no rodape, que e #111, o laranja cheio
   passa com 7,65:1 e continua valendo.
   --------------------------------------------------------------------------- */

body.template-collection .button-show-more,
body.template-collection .button-show-more .label-show-more,
body.template-search .button-show-more,
.underlined-link,
.customer a,
.link-accent-color {
  color: var(--color-accent-texto, #b06325);
}

.brisa-rodape .underlined-link,
.brisa-rodape a.link-accent-color {
  color: rgba(255, 255, 255, 0.72);
}

/* O caminho de migalhas: o tema pinta `.g-breadcrumb a` com o laranja cheio,
   2,47:1 sobre branco. Medido na PDP. */
.g-breadcrumb a,
.breadcrumb a,
nav[aria-label*="readcrumb"] a {
  color: var(--color-accent-texto, #b06325);
}

/* O widget nativo de retirada em loja escreve a variante em cinza a 60%
   (3,36:1). E a linha que diz QUAL numeracao esta disponivel em cada unidade,
   ou seja, a informacao que a pessoa foi ali buscar. */
.pickup-availability-variant,
.pickup-availability-info small,
pickup-availability-drawer .pickup-availability-variant {
  color: var(--color-body-text, #404040);
  opacity: 1;
}

/* O "Remover" do carrinho ficava em 4,35:1, logo abaixo dos 4,5 exigidos para
   texto pequeno. E o link que o cliente procura quando errou a numeracao: se
   ele nao acha, desiste do carrinho inteiro em vez de trocar o item. */
.cart-item .small,
.cart__remove,
#cart .small,
.template-cart .small {
  color: rgba(var(--color-body-text-rgb, 64, 64, 64), 0.85);
}

/* ---------------------------------------------------------------------------
   Dois restos achados na busca

   1. A pagina atual da paginacao vinha com fundo #fcc602, o amarelo que ficou
      orfao em `color_secondary` desde o Azua, e letra BRANCA: 1,59:1. O numero
      da pagina em que voce esta era o texto menos legivel da loja.
   2. O preco no Pix do card saia no laranja cheio, 2,47:1. E o preco que a loja
      ancora na comunicacao inteira.
   --------------------------------------------------------------------------- */

/* !important porque o tema pinta o numero de branco com !important, e contra
   !important so vale !important: subir especificidade nao resolve. */
.pagination__item--current,
.pagination .current,
.pagination__item.current,
.pagination li .pagination__item--current {
  background-color: var(--color-accent, #f58934) !important;
  border-color: var(--color-accent, #f58934) !important;
  color: #000 !important;
}

.product-card__price-pix,
.product-card__price-label {
  color: var(--color-accent-texto, #b06325);
}

/* ---------------------------------------------------------------------------
   Coluna de filtros da categoria

   O layout do tema e Bootstrap: `col-md-3` para os filtros e `col-md-9` para os
   produtos. Numa tela de 1792px isso da **448px so de filtro**, um quarto da
   pagina para uma lista de caixinhas, enquanto o produto, que e o que a pessoa
   veio ver, ficava espremido em cards de 501px de largura.

   252px e a medida do mercado (Netshoes ~240, Nike ~250) e cabe o nome de cor
   mais longo do catalogo sem quebrar linha.

   A lista de COR crescia sem limite (53 cores na colecao Tenis, quase todas com
   um produto so), mas a causa nao era falta de rolagem: era o "mostre mais"
   morto, consertado no bloco abaixo.
   --------------------------------------------------------------------------- */

@media (min-width: 992px) {
  body.template-collection .facets-vertical > .col-md-3.v-col,
  body.template-search .facets-vertical > .col-md-3.v-col {
    flex: 0 0 252px;
    max-width: 252px;
    width: 252px;
    /* template-collection.css da 28px de respiro do lado da grade
       (padding-right), mas nao mexe no padding-left: ele fica no gutter
       padrao do Bootstrap (~8px), entao o conteudo do filtro nasce colado
       na borda esquerda enquanto sobra respiro do outro lado. */
    padding-left: 28px !important;
  }

  body.template-collection .facets-vertical > .col-md-9,
  body.template-search .facets-vertical > .col-md-9 {
    flex: 1 1 0%;
    max-width: none;
    padding-left: 28px !important;
  }

  /* A barra de colunas/ordenar/contagem alinha com a GRADE, nao com a pagina:
     por isso ela tem um recuo do tamanho da coluna de filtros. O
     component-facets.css usa `calc(25% + 2.5rem)`, que era a medida de quando
     a coluna ocupava 25% da tela. A regra acima trocou a coluna por 252px
     fixos e esse recuo ficou para tras: numa tela de 1792px pedia 488px de
     recuo para uma coluna de 252px, e o seletor de colunas aparecia solto no
     meio, longe da margem.

     O tema recuava a barra para o seletor de colunas comecar em cima da
     PRIMEIRA COLUNA DE PRODUTOS. Na pratica isso joga o seletor para o meio da
     tela e deixa um vao enorme a esquerda, porque a barra ocupa a largura
     inteira e o grupo da direita vai para a outra ponta.

     Sem recuo: o seletor encosta na margem do conteudo, em cima da coluna de
     filtros, e a barra fica com um grupo em cada ponta. Se um dia se quiser o
     alinhamento com a grade de volta, o numero e 280px (252px da coluna de
     filtros + 28px de gutter, ambos declarados no bloco acima). */
  html body .facets-vertical-form {
    padding-left: 0;
  }

  /* sem filtro nao ha coluna, entao nao ha recuo (o tema ja fazia isso com
     .facets-disable; aqui so garantimos a mesma especificidade) */
  html body .facets-vertical-form.facets-disable {
    padding-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   O "mostre mais" e a busca dentro do filtro estavam MORTOS

   `body.template-collection .facets__item { display: flex !important }`
   (template-collection.css, do Azua) vence tanto `.hidden { display: none
   !important }` quanto o atributo `hidden`: mesmo !important, mais
   especificidade. Medido na loja: a faceta COR abria com as 53 cores, 1.600px
   de altura, em vez de 12 mais o botao; e digitar "azul" no campo de busca nao
   escondia um item sequer.

   Foi isso que fez a coluna crescer. Tapar com `max-height` na caixa inteira
   cortava junto a grade de numeracao, a marca, o campo de busca e o proprio
   botao "mostre mais", e ainda expunha a barra de rolagem preta global.
   Conserto na origem: devolver o none para quem esta escondido.
   --------------------------------------------------------------------------- */

html body.template-collection .facets__item.hidden,
html body.template-collection .facets__item[hidden],
html body.template-search .facets__item.hidden,
html body.template-search .facets__item[hidden] {
  display: none !important;
}

/* A grade de numeracao mostra TODOS os numeros: em calcado, esconder o 13o
   atras de "mostre mais" e esconder justamente o que a pessoa veio procurar.
   A grade e compacta (tres por linha), entao cabe inteira. O botao sai junto.
   `[hidden]` fica de fora de proposito: ali quem manda e o campo de busca. */
html body.template-collection .size-grid .facets__item.hidden:not([hidden]),
html body.template-search .size-grid .facets__item.hidden:not([hidden]) {
  display: inline-flex !important;
}

html .facets__display-vertical:has(.size-grid) show-more-button {
  display: none;
}

/* So a LISTA rola, e so depois de expandida: 12 itens de 30px cabem nos 360px,
   entao a barra so aparece quando a pessoa pede para ver tudo. O campo de busca
   e o botao ficam fora da area rolavel, que era o outro estrago do max-height
   na caixa. `ul:not(.no-js)` porque o tema imprime duas listas (JS e fallback).
   Barra fina e discreta: a global deste tema e de 8px e escura. */
body.template-collection .facets__display-vertical ul:not(.no-js),
body.template-search .facets__display-vertical ul:not(.no-js) {
  max-height: 360px;
  overflow-y: auto;
  /* a rolagem para na lista em vez de continuar na pagina */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

body.template-collection .facets__display-vertical ul:not(.no-js)::-webkit-scrollbar,
body.template-search .facets__display-vertical ul:not(.no-js)::-webkit-scrollbar {
  width: 6px;
}

body.template-collection .facets__display-vertical ul:not(.no-js)::-webkit-scrollbar-track,
body.template-search .facets__display-vertical ul:not(.no-js)::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
}

body.template-collection .facets__display-vertical ul:not(.no-js)::-webkit-scrollbar-thumb,
body.template-search .facets__display-vertical ul:not(.no-js)::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 3px;
}

/* ==========================================================================
   Escala tipografica — aplicacao

   O tema JA tem uma escala, vinda das configuracoes: h1 40, h2 22, h3 18,
   h4 16, h5 14, h6 12. O problema nunca foi o desktop — era como ele encolhia
   no celular. O theme.css faz isso por MULTIPLICADOR e sem piso:

     @media (max-width: 749px) .h2 { font-size: calc(var(--g-h2-font-size) * .6) }
     @media (max-width: 575px) .h3 { font-size: calc(var(--g-h3-font-size) * .6) }
     @media (max-width: 749px) .h1 { font-size: 46px }   /* MAIOR que o desktop */

   18 x 0,6 = 10,8px. Era esse o "h1 de 11px" da pagina de carrinho, que usa
   `h1.h3`. Aqui os multiplicadores saem de cena e entra `clamp()`: o teto e o
   mesmo valor de antes — desktop intocado — e o piso impede o colapso.

   Prefixo `html` para empatar em especificidade com as regras dentro de
   `@media` do theme.css e vencer pela ordem de carregamento.
   ========================================================================== */
html .h1,
html h1 {
  font-size: var(--fs-h1);
}

html .h2,
html h2 {
  font-size: var(--fs-h2);
}

html .h3,
html h3 {
  font-size: var(--fs-h3);
}

html .h4,
html h4 {
  font-size: var(--fs-h4);
}

html .h5,
html h5 {
  font-size: var(--fs-h5);
}

/*
  Piso de legibilidade. Cada um destes foi medido na loja no ar, abaixo de 12px:

    8px   contador do carrinho no topo
   10px   contador da gaveta e a trilha de navegacao
   11px   chips de categoria na busca, marca no cartao, ordenacao

  O `!important` aparece so onde a regra original tambem usa — caso do
  `.category-bullet`, que e `11px !important` no azua-layout.css.
*/
.azua-header__cart-count,
.site-header__cart-indicator,
.mini-cart-header-count,
.brisa-card__marca,
.breadcrumb,
.breadcrumb a,
.breadcrumb span,
.facet-filters__sort,
.select__select {
  font-size: var(--fs-micro);
}

.category-bullet {
  font-size: var(--fs-micro) !important;
}

/*
  Contadores do carrinho: os dois unicos textos que sobraram abaixo do piso de
  12px depois da escala. As regras originais no cart-draw.css tem tres classes
  de especificidade e amarram FONTE e CAIXA juntas —

    .azua-header .azua-header__mini-cart > .azua-header__cart-trigger > .js-cart-count
      min-width 14px; height 14px; font-size 8px
    .azua-header .mini-cart-header .mini-cart-header-count
      min-width 20px; height 20px; font-size 10px

  Subir so a fonte estouraria o badge, entao a caixa cresce junto. O de 20px ja
  comporta 12px sem mudar de tamanho; o de 14px vai para 18px.
*/
html .azua-header .azua-header__mini-cart > .azua-header__cart-trigger > .js-cart-count {
  min-width: 18px;
  height: 18px;
  font-size: var(--fs-micro);
  line-height: 18px;
  /* Reposicionado junto com o aumento do icone logo abaixo: precisa continuar
     na quina, agora de um icone maior, sem cobrir o desenho da sacola. */
  top: -7px;
  right: -9px;
}

html .azua-header .mini-cart-header .mini-cart-header-count {
  font-size: var(--fs-micro);
}

/*
  O aumento do badge acima (14px -> 18px, pra caber o piso de 12px de fonte)
  deixou o NUMERO do carrinho maior que a propria sacola (17px): os dois
  ficavam do mesmo tamanho, competindo, e o badge parecia "na frente" do
  icone em vez de um selo no canto dele. Sobe o icone pra 22px — continua
  menor que a barra de utilidade ao lado, mas agora claramente maior que o
  badge, que volta a se ler como selo, nao como elemento igual.
*/
html .azua-header .azua-header__mini-cart,
html .azua-header .azua-header__mini-cart .azua-header__cart-trigger,
html .azua-header .azua-header__mini-cart .svg-cart {
  width: 22px;
  height: 22px;
}

/*
  Gaveta do carrinho inteira usa `font-family: var(--azua-font)` (varias
  declaracoes em cart-draw.css), e --azua-font e "Barlow, ..." — a fonte do
  tema-base Azua, nao a Archivo que a Brisa configurou em Tipografia
  (settings.font_family = archivo_n4). Em vez de editar cada declaracao em
  cart-draw.css, redefine a MESMA variavel só dentro da gaveta: como e uma
  custom property, toda regra descendente que le --azua-font passa a
  resolver para a fonte real da loja sem tocar no arquivo legado. Afeta so a
  gaveta — header, rodape e PDP tambem usam --azua-font e continuam de fora
  deste ajuste.
*/
.mini-cart-content {
  --azua-font: var(--g-font-1, sans-serif);
}

/* ==========================================================================
   Botoes — um tamanho so

   Medido na PDP: SEIS tamanhos de rotulo na mesma pagina — 9, 12, 13, 14, 16 e
   18px. Os dois botoes principais ficavam lado a lado com "Adicionar a sacola"
   em 16px e "Comprar agora" em 9px.

   Os 9px vem do theme.css, de uma lista enorme de seletores que inclui
   `body button[name="checkout"]`, com
     font-size: var(--fs-micro) !important; font-weight: 800; letter-spacing: .28em
   Era o estilo "micro caps" da Azua, e pega TODO botao de compra da loja —
   nao so a PDP. Por isso o override precisa de `!important` e de mais
   especificidade, e nao de um ajuste local.

   Fica de fora so o seletor de quantidade (o "+"/"−"): ali o rotulo e um
   simbolo, nao uma palavra, e 14px num alvo de toque de 40px ficaria miudo
   demais para acertar com o polegar.
   ========================================================================== */
html body .brisa-acao .brisa-acao__btn,
html body .brisa-acao .brisa-acao__btn--comprar,
html body .brisa-acao .brisa-acao__btn--carrinho {
  font-size: var(--fs-botao) !important;
  letter-spacing: 0.04em !important;
}

html .brisa-btn,
html .brisa-compra__ajuda,
html .td-frete-dinamico .td-frete-dinamico-btn,
html .pickup-availability-button,
html .btn,
html .btn-theme,
html .btn-outline {
  font-size: var(--fs-botao);
}

/* ==========================================================================
   Cartao de produto — uma escala so, nas tres familias

   A loja tem tres cartoes diferentes, herdados de camadas diferentes:
     .brisa-card__*      vitrines da home
     .product-card__*    colecao e busca
     .brisa-recomenda__* recomendados da PDP

   Cada um com seus tamanhos, e o da home sem hierarquia NENHUMA no celular:
   marca, nome e preco saiam os tres em 16px, entao nada se destacava. No
   desktop o mesmo cartao tinha 12/13/15. O cliente via dois produtos diferentes
   dependendo do aparelho.

   A hierarquia e sempre a mesma: a marca e a menor (contexto), o nome e o texto
   (leitura) e o preco e o maior em peso (decisao).
   ========================================================================== */
/*
  `!important` aqui NAO e preguica. O brisa-front.css carrega DEPOIS do
  brisa.css, e as regras do cartao da home tem a mesma especificidade das
  minhas (uma classe) — com empate, quem carrega por ultimo vence, e eu
  perderia sempre. Alem disso o preco na colecao disputa com NOVE regras
  espalhadas por quatro arquivos, varias ja com !important. Padronizar aqui so
  funciona se a regra for indiscutivel.
*/
html body .brisa-card__marca,
html body .product-card__vendor,
html body .brisa-recomenda__marca {
  font-size: var(--fs-micro) !important;
}

html body .brisa-card__nome,
html body .product-card__title,
html body .product-label,
html body .brisa-recomenda__nome {
  font-size: var(--fs-small) !important;
}

html body .brisa-card__preco,
html body .product-card__price,
html body .product-card__price-pix,
html body .brisa-recomenda__preco {
  /*
    So TAMANHO. Peso e cor do preco ficam com cada pagina de proposito: na
    colecao existe decisao registrada do cliente de manter o preco sem negrito
    e sem laranja, seguindo a referencia. Padronizar o tamanho nao e desculpa
    para desfazer isso por tabela.
  */
  font-size: var(--fs-body) !important;
}

/* ==========================================================================
   Varredura final — o resto do site

   Levantado percorrendo 7 paginas nas duas larguras e listando TODO tamanho
   fora da escala. O grosso estava concentrado em poucos lugares:

     15px  x529 mobile / x646 desktop  conteineres de cartao e chips de numeracao
     13px  x 93 / x107                 rotulos de atalho, chips, .d-block
      8px  x 72                        selo do cartao (product-tag)
     10px  x 38 / x128                 selo e .mb-1
     11px  x  9 / x 11                 contador de chip, ordenacao, moeda

   Os conteineres (.brisa-card, .product-card) entram como corpo: o que eles
   fazem e dar o tamanho HERDADO para quem nao declara o proprio. Com os filhos
   ja tokenizados nos blocos acima, isso deixa de espalhar 15px por tabela.
   ========================================================================== */

/* conteineres: definem a heranca do cartao */
html body .brisa-card,
html body .product-card,
html body .product-card__image-wr {
  font-size: var(--fs-body);
}

/* chips de numeracao e rotulos de apoio */
html body .brisa-card-sizes,
html body .brisa-card-sizes__item,
html body .brisa-chip,
html body .brisa-atalho__rotulo,
html body .brisa-atalho__texto {
  font-size: var(--fs-small);
}

/*
  Selo do cartao ("esgotado", "novo", percentual). Estava em 8px no celular e
  10px no desktop — abaixo do piso, e e justamente o elemento que precisa ser
  lido de relance numa vitrine rolando.
*/
html body .product-tag,
html body .product-label .product-tag,
html body .brisa-chip__n,
html body .field-currency,
html body .mb-1 {
  font-size: var(--fs-micro);
}

/*
  Selo do card empilhando sem gap e do tamanho de pilula de demo (Azua): o
  bloco herdado do theme.css usa padding 11px/16px e letter-spacing .32em —
  numa listagem com produto novo + sem estoque ao mesmo tempo, o empilhado
  cobria metade da foto. `.product-label` vira flex column com gap de verdade
  (nao so no mobile, como o theme.css fazia) e cada selo encolhe pra pilula
  pequena, do tamanho que se espera numa vitrine, sem esconder a foto.
*/
html body .product-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* mais perto do canto da foto (era 32px, herdado do Azua) em vez de
     flutuar solto no meio da imagem. */
  top: 10px !important;
  left: 10px !important;
}

html body .product-card .product-tag,
html body .product-card .product-tag--absolute {
  padding: 3px 7px !important;
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
  line-height: 1.3;
  margin-right: 0;
  margin-bottom: 0;
}

/*
  Botao "Ver Produto" sem leitura nenhuma: fundo quase preto
  (rgba(10,10,10,.88), do bloco Azua) e texto em --azua-card-text, que o
  brisa.css remapeia pra --color-body-headings (escuro, pensado pra texto
  sobre fundo CLARO). Texto escuro sobre fundo escuro = invisivel. Fundo
  escuro pede texto claro, direto, sem depender da variavel remapeada.
*/
html body .product-card--style9 .product-card-cart .btn-theme {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/*
  Titulos que sao DISPLAY, nao corpo: a capa de colecao e o nome do produto na
  PDP. Estavam cravados (52/32px e 24px) fora de qualquer token; agora escalam
  junto com o resto.
*/
html body .brisa-capa__titulo {
  font-size: var(--fs-display);
}

html body .brisa-compra__nome {
  font-size: var(--fs-h1);
}

/*
  Ultimos teimosos da varredura. Todos sao valor cravado numa camada antiga; o
  \`!important\` existe porque varios estao em arquivos que carregam depois do
  brisa.css e empatam em especificidade.
*/
html body .d-block,
html body .brisa__link,
html body .brisa-loja__acao,
html body .brisa-rodape__coluna,
html body .brisa-rodape__wrap,
html body .brisa-nav__item {
  font-size: var(--fs-small);
}

html body .product-tag,
html body .select__select,
html body .facet-filters__sort,
html body .field-currency {
  font-size: var(--fs-micro) !important;
}

html body .brisa-capa__titulo {
  font-size: var(--fs-display) !important;
}

html body .ah-empty-card__title {
  font-size: var(--fs-h3);
}

/*
  Ultima rodada. Estes perdiam ate com `!important` porque a regra concorrente
  tambem usa `!important` E tem mais especificidade — caso do
  `.product-card .product-tag { 8px !important }` no theme.css, que e duas
  classes contra a minha classe unica. A saida e empatar o nivel, nao gritar
  mais alto.
*/
html body .product-card .product-tag,
html body .product-card .product-tag--absolute,
html body .product-card .mb-1,
html body .product-card__installments {
  font-size: var(--fs-micro) !important;
}

html body .ah-empty-card .ah-empty-card__title {
  font-size: var(--fs-h3) !important;
}

html body select.select__select,
html body select.facet-filters__sort {
  font-size: var(--fs-micro) !important;
}

/* Resto da gaveta do carrinho e utilitarios do tema, que nao sao nossos. */
html body .azua-header .mini-cart-header .mini-cart-title-text,
html body .azua-header .mini-cart-empty .txtcart-empty,
html body .d-block {
  font-size: var(--fs-small) !important;
}

/*
  Ultimos avulsos da varredura: o `.d-block` e utilitario do Bootstrap herdado e
  aparece em varios contextos, e os dois selects nativos ficaram fora por serem
  elemento de formulario (o navegador tem estilo proprio, entao precisa do
  seletor de ELEMENTO junto).
*/
html body .d-block,
html body .d-block span {
  font-size: var(--fs-small) !important;
}

html body select,
html body select.select__select,
html body select.facet-filters__sort {
  font-size: var(--fs-small) !important;
}

/*
  Fecho da varredura: os ultimos tres elementos fora da escala em todo o site.
  Todos vem de arquivos do tema, nao nossos, e por isso sao override e nao
  correcao na fonte.

  - o <select> de ordenacao precisa do seletor de ELEMENTO junto do container:
    campo de formulario tem estilo do proprio navegador e as regras do tema
    empilham `!important` em cima;
  - `address` idem, e um elemento com estilo padrao;
  - o <span> dentro do titulo "Voce viu por ultimo" herdava um tamanho proprio
    em vez do titulo que o contem.
*/
html body div.select select.select__select,
html body div.select select.facet-filters__sort {
  font-size: var(--fs-small) !important;
}

html body address.pickup-availability-address,
html body .pickup-availability-list__item address {
  font-size: var(--fs-small) !important;
}

/*
  O <span> dentro do titulo de secao herdava tamanho proprio em vez do titulo
  que o contem. `inherit` nao resolveu porque a regra concorrente tambem e
  !important — valor explicito resolve.
*/
html body h3.section-title-1 span,
html body .section-title-1 > span {
  font-size: var(--fs-h3) !important;
}

/*
  "Ver Produto" no cartao saia em 9px: e o mesmo bloco "micro caps" do
  theme.css que pegava o botao de compra, agora batendo no <span> DENTRO de
  `a.btn`. Rotulo de botao segue o token de botao, esteja onde estiver.
*/
html body a.btn span,
html body .btn > span,
html body .product-card__view-product,
html body .product-card__view-product span {
  font-size: var(--fs-botao) !important;
}

/* Titulo da pagina 404: estava em 30px cravado, fora de qualquer token. */
html body .page-404--title {
  font-size: var(--fs-h2);
}

/* ==========================================================================
   FILTROS (facetas) — uma tipografia so, nas duas telas

   O que havia: a mesma UI estilizada por DOIS arquivos diferentes —
   template-collection.css so para `body.template-collection` e
   component-search.css so para `body.template-search` — e um terceiro,
   component-facets.css, com tamanho solto em seis escalas: 80%, 90%, 10px,
   12px, 1.4rem e 22px. Porcentagem e a pior delas: compoe com o tamanho
   herdado, entao o mesmo rotulo mudava de tamanho conforme o container.

   Aqui nao se mexe em COR. Cor e decisao por template (a colecao usa
   --azua-collection-*, a busca usa --azua-search-*) e continua de la. O que
   esta regra faz e familia e escala.

   Especificidade: os arquivos por template usam `body.template-x .facets__y`
   (0,2,1) com !important. `.facets-container` como ancestral leva a (0,2,2) e
   ganha nas duas telas sem precisar repetir o seletor por template.
   ========================================================================== */

html body .facets-container,
html body .facets-container .facets__heading,
html body .facets-container .facets__summary,
html body .facets-container .facets__summary span,
html body .facets-container .facets__item,
html body .facets-container .facets__label,
html body .facets-container .facet-checkbox,
html body .facets-container .facet-filters__label,
html body .facets-container .facet-filters__label label,
html body .facets-container .facets__reset,
html body .facets-container .active-facets__button-remove,
html body .facets-container .facets__collection__list li a {
  font-family: var(--g-font-1) !important;
}

/* titulo do painel ("Filtrar por") e cabecalho de cada faceta */
html body .facets-container .facets__heading,
html body .facets-container .facets__heading--vertical,
html body .facets-container .facets__summary,
html body .facets-container .facets__summary span,
html body .facets-container .facet-filters__label,
html body .facets-container .facet-filters__label label,
html body .facets-container .facet-filters__summary,
html body .facets-container .brisa-stock__label,
html body .facets-container .brisa-stock__text,
html body .mobile-facets .facets__heading--vertical,
html body .mobile-facets .mobile-facets__close-button {
  font-size: var(--fs-small) !important;
  line-height: 1.3 !important;
}

/* as opcoes dentro da faceta: mesma escala do rotulo, sem herdar % */
html body .facets-container .facets__item,
html body .facets-container .facets__label,
html body .facets-container .facet-checkbox,
html body .facets-container .facets__collection__list li a,
html body .facets-container .facets__price .field__label,
html body .facets-container .facets__price .field-currency {
  font-size: var(--fs-small) !important;
  line-height: 1.3 !important;
}

/* contador ao lado da opcao, o "Limpar" e o X do filtro aplicado: um degrau
   abaixo, que e o papel deles */
html body .facets-container .facets__item-count,
html body .facets-container .brisa-stock__count,
html body .facets-container .facets__reset,
html body .facets-container .active-facets__button-remove {
  font-size: var(--fs-micro) !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   BARRA ACIMA DA GRADE — colunas, ordenar e contagem

   Os tres grupos vinham de lugares diferentes e nao combinavam:

   - o contador carrega a classe `.font-family-2`, que e
     `font-family: var(--g-font-2) !important` no theme.css (Barlow, do Azua),
     enquanto o rotulo de ordenar usa `text-body` (Archivo). Duas familias na
     mesma barra.
   - os tamanhos vinham de `.caption`/`.caption-large` do tema-base, fora da
     escala de tokens da Brisa.

   Esta barra NAO esta dentro de `.facets-container` — ela e irma do painel de
   filtros —, por isso a normalizacao das facetas nao a alcancava.

   `.facets-vertical-form` como ancestral da (0,2,2), que vence o
   `body.template-collection .product-count__text` (0,2,1) com !important do
   template-collection.css.
   ========================================================================== */

html body .facets-vertical-form .facet-filters__label,
html body .facets-vertical-form .facet-filters__label label,
html body .facets-vertical-form .facet-filters__sort,
html body .facets-vertical-form .product-count__text,
html body .facets-vertical-form .product-count-vertical {
  font-family: var(--g-font-1) !important;
  font-size: var(--fs-small) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Os tres grupos na mesma linha de base. O seletor de colunas trazia `h-100`
   no HTML e esticava so ele, o que desalinhava a barra inteira. */
html body .facets-vertical-form {
  display: flex;
  align-items: center;
  /* sem `gap`: o tema usa `justify-content: space-between` para jogar o
     seletor de colunas para a esquerda e o par ordenar+contagem para a
     direita. Um gap aqui so competiria com isso. */
}

/* ordenar e contagem andam juntos, colados um no outro */
html body .facets-vertical-form > .d-flex:last-child {
  gap: 16px;
}

html body .facets-vertical-form > .d-flex {
  height: auto !important;
  align-items: center;
}

/* o rotulo "Ordenar por" e o contador nao precisam de margem propria: o gap
   da barra ja separa os grupos */
html body .facets-vertical-form .facet-filters__label,
html body .facets-vertical-form .product-count__text {
  margin: 0 !important;
}

/* ==========================================================================
   ALVO DE TOQUE no celular

   Medido num Chrome de verdade a 390px (iPhone 14/15), nao lido do CSS: os
   controles do header tinham 17px (icones de busca e sacola) e 30px (menu
   hamburguer), contra os 44px que a Apple recomenda e os 48px do Google. Sao
   os botoes mais usados da loja no celular e os menores da pagina.

   A area CLICAVEL cresce, o desenho nao: o icone continua do mesmo tamanho,
   quem cresce e a caixa ao redor. Por isso min-width/min-height com flex
   centralizado, e nao width/height — mudar a largura real empurraria a barra
   do header.

   Fora do header, a mesma medicao apontou as setas da galeria da PDP com 36px
   e o botao de retirada com 21px.
   ========================================================================== */

@media (max-width: 989px) {
  html body .azua-header__hamburger,
  html body .azua-header__icon,
  html body .brisa-galeria__seta,
  html body .brisa-compra__ajuda,
  html body .pickup-availability-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* o logo e link e tambem e alvo: cresce so em altura, porque a largura dele
     e a marca e nao pode esticar */
  html body .azua-header__logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}