/* ─────────────────────────────────────────────────────────────────────────
   Agon Imports — sistema visual da loja.

   Paleta: azul-marinho profundo no "cromo" da loja (barra, cabeçalho, nav,
   banners, rodapé) e ÂMBAR reservado à ação de comprar. Verde só para frete
   grátis e disponibilidade; vermelho só para erro.

   Regra que não muda: no máximo dois botões âmbar por tela. Se tudo é
   destaque, nada é.
   ───────────────────────────────────────────────────────────────────────── */

/* Instrument Sans servida daqui, não do Google: ver fontes/LEIA-ME.txt.
   Fonte variável — um arquivo cobre 400 a 700. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Bricolage Grotesque — a voz dos TÍTULOS, e só deles. O corpo continua em
 * Instrument Sans: display em texto corrido cansa, e o que esta loja precisa
 * que se leia bem é preço, medida e endereço.
 *
 * 19,6 KB: instanciada num peso só e subsetada ao português. Como o Google
 * entrega custava 40,7 KB e estourava o teto de peso da home. Sem `latin-ext`
 * — caractere fora do subconjunto cai no Instrument Sans da pilha, que o tem.
 * Para regerar, ver fontes/LEIA-ME.txt.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontes/bricolage.woff2") format("woff2");
}

:root {
  /* Cromo da loja */
  --escuro:      #101a2b;
  --escuro-2:    #16243d;
  --escuro-3:    #1e3050;
  --sobre-escuro:      #e2e8f2;
  --sobre-escuro-suave: #9aa8c0;

  /* Ação */
  --acao:        #f28c1c;
  --acao-forte:  #d97710;
  --acao-texto:  #10233d;

  /* Sinais */
  --verde:       #067a46;
  --verde-bg:    #e7f4ed;
  --erro:        #b3261e;
  --erro-bg:     #fdeceb;
  --azul:        #1b5fd9;
  --azul-escuro: #123f96;

  /* Tinta e papel */
  --fg:          #16191d;
  --fg-2:        #3d4553;
  --muted:       #5b6472;
  --placeholder: #646d7a;   /* 4.63:1 sobre o cinza do bloco de foto, 5.24:1 sobre branco */
  --bg:          #ffffff;
  --bg-2:        #f4f6f9;
  --linha:       #e2e6eb;
  --linha-forte: #d5dae1;

  /* ── Tipografia ──────────────────────────────────────────────────────────
   * Duas vozes: display para título, interface para todo o resto.
   *
   * A escala é fluida por `clamp` em vez de saltar em pontos de quebra. Título
   * que muda de tamanho de repente ao girar o aparelho denuncia o template; e
   * a escala antiga (h1 de 28px fixos, h2 de 21px) era tímida demais para
   * criar hierarquia — tudo tinha quase o mesmo peso, e nada mandava no olho.
   */
  --fonte-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;

  --t-display: clamp(40px, 7.4vw, 78px);   /* manchete da vitrine */
  --t-1:       clamp(27px, 3.4vw, 42px);   /* título de página */
  --t-2:       clamp(20px, 2.1vw, 27px);   /* título de seção */
  --t-3:       16px;                       /* nome de produto no card */

  /* Manchete grande pede entrelinha e espacejamento MENORES, não os mesmos:
     o que funciona a 20px vira buraco a 78px. */
  --entre-display: .94;
  --tracking-display: -.035em;

  /* Espacejamento dos rótulos miúdos em caixa alta. Existia em seis valores
     diferentes — .09, .10, .12, .13, .14 e .16em — um por lugar onde alguém
     escreveu o padrão de novo. Em corpo de 10 a 12 px a diferença não é
     escolha de desenho, é acidente. */
  --tracking-rotulo: .14em;

  /* Onde param os elementos grudados: a altura real do cabeçalho, publicada
     pelo JS, mais uma folga. Existe para galeria e caixa de compra não
     repetirem o mesmo número e discordarem na primeira mudança. */
  --topo-grudado: calc(var(--altura-cabecalho, 112px) + 16px);

  --raio:   8px;
  --raio-g: 12px;
  --largura: 1280px;
  --sombra: 0 2px 10px rgba(16, 26, 43, .07);
  --sombra-alta: 0 10px 30px rgba(16, 26, 43, .14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-2);
  color: var(--fg);
  font-family: var(--fonte-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Primitivas editoriais ───────────────────────────────────────────────────
 *
 * `.olho` é o rótulo miúdo em caixa alta que anuncia um bloco, e é a forma
 * canônica do padrão para usos novos.
 *
 * O padrão já existia espalhado — nome do tile, coluna do rodapé, cabeçalho de
 * tabela, atalho do cabeçalho, barra de departamentos —, cada lugar com um
 * espacejamento próprio. Os TAMANHOS seguem diferentes de propósito (11 px numa
 * tabela, 12 px no rodapé), mas o espacejamento passou a vir de
 * `--tracking-rotulo`: em corpo tão pequeno, seis valores diferentes não eram
 * escolha de desenho, eram seis pessoas reescrevendo o mesmo padrão.
 */
.olho {
  display: block;
  font-family: var(--fonte-ui);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 9px;
}

/* ── Revelação ao rolar ──────────────────────────────────────────────────────
 *
 * O estado escondido só existe sob `html.com-revelacao`, classe que o JS põe no
 * arranque. Sem essa trava, JS que falhe — ou `IntersectionObserver` ausente —
 * deixaria a loja INTEIRA em `opacity: 0`: vitrine em branco, sem erro no
 * console. Quem pede menos movimento recebe tudo visível (ver o fim do arquivo).
 */
html.com-revelacao .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
html.com-revelacao .revelar.visivel { opacity: 1; transform: none; }

/* h4 fica DE FORA: no projeto inteiro ele é só título de coluna do rodapé —
   rótulo miúdo em caixa alta, que a fonte de interface desenha melhor. Manchete
   e rótulo não são a mesma coisa por acaso de serem os dois "títulos". */
h1, h2, h3 {
  margin: 0 0 12px;
  font-family: var(--fonte-display);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.12;
  /* Manchete não deve terminar com uma palavra órfã na última linha. */
  text-wrap: balance;
}
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); }
/* h3 é nome de produto em card e em linha de pedido: some da hierarquia de
   manchete e volta para a fonte de interface, que lê melhor em corpo pequeno. */
h3 { font-size: var(--t-3); font-family: var(--fonte-ui); font-weight: 600; letter-spacing: -.012em; }
h4 { margin: 0 0 12px; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-escuro); text-decoration: underline; }

.num, .price, td, th { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 14px; }
.hide { display: none !important; }

:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 4px; }

.env { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }

/* ── Barra de avisos ───────────────────────────────────────────────────── */

.avisos {
  background: var(--escuro);
  color: var(--sobre-escuro-suave);
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.avisos .env { display: flex; gap: 28px; justify-content: center; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.aviso b { color: var(--sobre-escuro); font-weight: 600; }

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */

header {
  background: var(--escuro-2);
  position: sticky; top: 0; z-index: 40;
  /* Fio quase invisível que separa o cabeçalho do conteúdo quando ele está
     grudado no topo sobre a página clara. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.cabecalho {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding .25s cubic-bezier(.22, .61, .36, 1);
}

/*
 * Encolhe ao rolar.
 *
 * O cabeçalho é grudado e come 120 px de altura entre avisos, busca e
 * departamentos. Numa lista longa de produtos, num celular, isso é um quinto
 * da tela ocupado por cromo permanente.
 *
 * Só o ESPAÇO diminui — nenhum controle some. Esconder a busca ou a barra de
 * departamentos ao rolar economizaria mais e cobraria o preço errado: quem
 * está descendo o catálogo é exatamente quem vai querer trocar de
 * departamento.
 */
header.compacto .cabecalho { padding-top: 8px; padding-bottom: 8px; }
header.compacto .logo { font-size: 21px; }

/*
 * "AGONIMPORTS" espaçado em caixa alta era letreiro de fachada. Na fonte de
 * display, em caixa normal e com espacejamento NEGATIVO, vira marca: as letras
 * se apertam num bloco só em vez de se espalharem.
 */
.logo {
  color: #fff;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.03em;
  text-transform: none;
  text-decoration: none;
  flex: none;
}
.logo:hover { color: #fff; text-decoration: none; }
.logo::after { content: "Imports"; color: var(--acao); }

.busca { flex: 1; min-width: 0; position: relative; display: flex; }
/* Campo reto com fio, não pílula: a pílula branca é a assinatura visual do
   marketplace, e é dela que a loja está tentando se afastar. */
.busca input {
  width: 100%;
  height: 44px;
  /* Borda transparente de propósito: é ela que a regra base `input:focus` da
     loja pinta de âmbar. Sem a borda declarada, o campo saltaria 2px de largura
     ao receber foco. */
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 0 48px 0 16px;
  font-size: 14.5px;
  background: #fff;
  color: var(--fg);
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.busca input::placeholder { color: var(--placeholder); }
/* O botão perdeu o disco escuro: virou só o ícone dentro do campo, que é o que
   ele sempre foi. Menos um elemento com peso próprio disputando o cabeçalho. */
.busca button {
  position: absolute;
  right: 5px; top: 5px;
  width: 34px; height: 34px;
  border: none; border-radius: var(--raio);
  background: transparent;
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: color .16s ease, background .16s ease;
}
.busca button:hover { background: var(--bg-2); color: var(--fg); }

.atalhos { display: flex; align-items: center; gap: 20px; flex: none; }
.atalho {
  display: flex; align-items: center; gap: 8px;
  color: var(--sobre-escuro);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.25;
}
.atalho:hover { color: #fff; text-decoration: none; }
.atalho span { display: flex; flex-direction: column; }
.atalho small {
  color: var(--sobre-escuro-suave);
  font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
}
.atalho b { font-weight: 600; letter-spacing: -.01em; }
.atalho-nome { color: var(--sobre-escuro-suave); font-size: 13px; }

.carrinho { position: relative; }
.carrinho b {
  background: var(--acao);
  color: var(--acao-texto);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 12px;
  align-self: flex-start;
  min-width: 20px;
  text-align: center;
}

#btnSair {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--sobre-escuro);
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 6px;
}
#btnSair:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ── Departamentos ─────────────────────────────────────────────────────── */

.departamentos {
  background: var(--escuro);
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  gap: 26px;
  padding: 0 20px;
  max-width: var(--largura);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.departamentos::-webkit-scrollbar { display: none; }
.departamentos a {
  color: var(--sobre-escuro);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.departamentos a:hover { color: #fff; text-decoration: none; }
.departamentos a.on { color: var(--acao); border-bottom-color: var(--acao); }

/* Envolve a nav escura de ponta a ponta, mesmo com o .env centralizado. */
header .departamentos { position: relative; }
header::after {
  content: "";
  display: block;
  height: 0;
}

/* ── Estrutura ─────────────────────────────────────────────────────────── */

main {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 26px 20px 60px;
  min-height: 62vh;
}

/* ── Controles ─────────────────────────────────────────────────────────── */

button {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border: none;
  border-radius: var(--raio);
  background: var(--escuro-2);
  color: #fff;
  cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
button:hover { background: var(--escuro-3); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Âmbar é só para COMPRAR e FINALIZAR. */
button.comprar { background: var(--acao); color: var(--acao-texto); }
button.comprar:hover { background: var(--acao-forte); }

button.sec { background: transparent; color: var(--fg); border: 1px solid var(--linha-forte); }
button.sec:hover { background: var(--bg-2); border-color: var(--muted); }

input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  padding: 10px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: #fff;
  color: var(--fg);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acao);
  outline-offset: -1px;
  border-color: var(--acao);
}
input[type="checkbox"] { width: auto; accent-color: var(--acao); }

label { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); }
label > span { display: block; margin-bottom: 5px; }

.row { display: flex; gap: 12px; align-items: center; }

/* ── Home: banner principal ────────────────────────────────────────────── */

/* ── Vitrine: a manchete ─────────────────────────────────────────────────────
 *
 * Era uma caixa escura arredondada com gradiente e a manchete presa em 40 px —
 * a terceira caixa escura idêntica da home, junto com a faixa de confiança e a
 * chamada final. Três blocos com o mesmo tratamento não criam hierarquia: criam
 * repetição, e repetição é o que faz uma loja parecer um modelo pronto.
 *
 * Agora a manchete é CLARA e tipográfica, e o escuro fica para os dois blocos
 * que vêm depois. O contraste passa a ser o ritmo da página: cromo escuro em
 * cima, vazio claro aqui, grade densa de produto embaixo.
 */
.banner {
  position: relative;
  padding: clamp(34px, 5.5vw, 76px) 0 clamp(26px, 3.4vw, 46px);
}

.banner-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
/* O índice é informação, não enfeite: diz em qual dos quadros a pessoa está e
   quantos existem — o que os pontinhos sozinhos só sugerem. */
.banner-indice { margin: 0; white-space: nowrap; }

.banner h1 {
  font-size: var(--t-display);
  line-height: var(--entre-display);
  letter-spacing: var(--tracking-display);
  max-width: 15ch;
  margin: 0;
  color: var(--fg);
}
/*
 * Manchete MONOCROMÁTICA, por dois motivos que apontam para o mesmo lado.
 *
 * Medido: o âmbar da marca sobre o cinza da página dá 2,48:1 e o escuro 2,94:1
 * — os dois reprovam em AA, que exige 3:1 mesmo para texto grande.
 *
 * De desenho, e vale mais: uma linha de manchete em laranja a 78 px lê como
 * cartaz de liquidação. Com o âmbar saindo daqui, o BOTÃO de comprar passa a
 * ser o único âmbar sólido da vitrine — que é o que a regra de cor da loja
 * sempre disse que ele deveria ser.
 */
.banner h1 em { font-style: normal; display: block; }

/* Traço de marca. Elemento decorativo, sem texto: não responde por contraste
   de leitura, e é o que devolve o âmbar à vitrine sem custo de legibilidade. */
.banner-marca {
  width: 44px; height: 4px;
  background: var(--acao);
  border-radius: 2px;
  margin: 0 0 clamp(18px, 2.2vw, 28px);
}

/* Fio + coluna estreita: o texto de apoio não acompanha a largura da manchete,
   senão vira parágrafo de 100 caracteres que ninguém lê. */
.banner-corpo {
  margin-top: clamp(20px, 2.6vw, 34px);
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.banner p { color: var(--fg-2); max-width: 44ch; margin: 0; font-size: 16px; }
.banner .row { margin: 0; flex: none; }
.banner .comprar { padding: 13px 26px; font-size: 15px; }

/*
 * Troca de quadro: um respiro, não um corte seco — sem isto a rotação parece
 * defeito de carregamento.
 *
 * A animação vive nos FILHOS, não no `.banner-conteudo`. O pai é o nó estável
 * que o parallax desloca, e os dois disputariam o mesmo `transform`. Nos
 * filhos, que são recriados a cada quadro, a animação também roda sozinha —
 * dispensando o velho truque de remover e recolocar a classe para reiniciá-la.
 */
.banner-topo, .banner-corpo { animation: entrar-quadro .5s cubic-bezier(.22, .61, .36, 1); }
.banner-corpo { animation-delay: .06s; animation-fill-mode: backwards; }
@keyframes entrar-quadro {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.banner-pontos { display: flex; gap: 8px; margin-top: 22px; }
.banner-pontos button {
  width: 26px; height: 3px; padding: 0;
  border-radius: 0;
  background: var(--linha-forte);
  border: none;
  transition: background .25s ease;
}
.banner-pontos button:hover { background: var(--muted); }
.banner-pontos button.on { background: var(--fg); }

@media (max-width: 760px) {
  /* Em coluna única o índice brigaria com a manchete pelo topo da linha. */
  .banner-topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .banner-topo .banner-indice { order: -1; }
  .banner h1 { max-width: none; }
  .banner-corpo { align-items: flex-start; }
  .banner .comprar { width: 100%; }
}

/* ── Home: seções ──────────────────────────────────────────────────────── */

.secao { margin-top: 64px; }
/*
 * A seção logo abaixo da manchete chega mais perto.
 *
 * A manchete tinha um fio embaixo e a seção tem o dela em cima: dois fios
 * paralelos separados por 126 px de vão, que lia como falha de carregamento e
 * não como respiro. O fio da seção basta para os dois.
 */
.banner + .secao { margin-top: clamp(26px, 3.2vw, 44px); }
/* Fio de um pixel acima do título: separa as seções sem caixa, sem fundo e sem
   sombra — o gesto editorial mais barato que existe, e o que dá ritmo à página
   longa sem transformá-la numa pilha de cartões. */
.secao-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
  border-top: 1px solid var(--linha-forte);
  padding-top: 16px;
}
.secao-topo h2 { margin: 0; }
.secao-topo a {
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid var(--linha-forte);
  transition: border-color .18s ease, color .18s ease;
}
.secao-topo a:hover { color: var(--fg); border-bottom-color: var(--fg); text-decoration: none; }

/* ── Home: tiles de departamento ───────────────────────────────────────── */

/* ── Home: tiles de departamento ─────────────────────────────────────────────
 *
 * Eram oito blocos azul-marinho maciços — parte das QUATRO áreas escuras que a
 * home tinha concorrendo entre si (ver `.banner`). Agora o tile é claro, e o
 * escuro entra só no hover: peso visual como resposta a um gesto, não como
 * ruído de fundo.
 */
.departamento-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 12px;
}
.tile { text-decoration: none; color: inherit; display: block; }
.tile:hover { text-decoration: none; }

.tile-foto {
  aspect-ratio: 1;
  border-radius: var(--raio-g);
  background: var(--bg);
  border: 1px solid var(--linha);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
.tile:hover .tile-foto {
  background: var(--escuro-2);
  border-color: var(--escuro-2);
  transform: translateY(-3px);
}
.tile-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.tile:hover .tile-foto img { transform: scale(1.06); }

/* Sem foto de capa, entra o ícone do departamento. Ele acompanha o fundo:
   escuro sobre claro, e claro quando o tile acende. */
.tile-icone { color: var(--escuro-2); opacity: 1; transition: color .22s ease; }
.tile:hover .tile-icone { color: var(--acao); }

/* ── Capa gerada do departamento ─────────────────────────────────────────────
 *
 * Preenche o tile inteiro por baixo, e é o FUNDO do tile que continua mandando
 * na cor: claro em repouso, azul-marinho no hover. A marca e a grade herdam a
 * cor por `currentColor` e só mudam de opacidade — assim o mesmo desenho
 * funciona nos dois estados sem existir duas vezes.
 *
 * A opacidade em repouso é baixa de propósito. A capa é textura, não placa: o
 * que nomeia o departamento é o rótulo embaixo, e uma marca forte demais em
 * oito quadrados lado a lado vira ruído em vez de ritmo. No hover ela acende,
 * porque aí o tile é o único assunto da tela.
 */
.tile-capa {
  width: 100%; height: 100%; display: block;
  color: var(--escuro-2);
  transition: color .22s ease;
}
.tile-capa-grade { opacity: .09; transition: opacity .22s ease; }
.tile-capa-marca { opacity: .19; transition: opacity .22s ease; }

.tile:hover .tile-capa { color: var(--acao); }
.tile:hover .tile-capa-grade { opacity: .14; }
.tile:hover .tile-capa-marca { opacity: .62; }

.tile-inicial {
  color: var(--escuro-2);
  font-size: 40px; font-weight: 700;
  letter-spacing: -.03em;
}
.tile-nome {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  color: var(--muted);
  transition: color .18s ease;
}
.tile:hover .tile-nome { color: var(--fg); }

/* ── Estado vazio ────────────────────────────────────────────────────────────
 *
 * Um componente só para "não há nada aqui", em vez de cada tela improvisar o
 * seu: a busca sem resultado tinha um cartão com estilo escrito à mão no JS, e
 * o carrinho vazio era uma frase solta de 14 px.
 *
 * Todo estado vazio precisa das mesmas três coisas — dizer o que houve, por que
 * não é erro, e para onde ir. A saída é obrigatória: tela vazia sem caminho de
 * volta é o fim da visita.
 */
.vazio {
  text-align: center;
  padding: clamp(44px, 7vw, 84px) 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--bg);
}
.vazio-marca {
  width: 40px; height: 3px;
  background: var(--linha-forte);
  border-radius: 2px;
  margin: 0 auto clamp(16px, 2vw, 24px);
}
.vazio b {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--fg);
}
.vazio p { margin: 10px auto 0; max-width: 42ch; color: var(--muted); font-size: 14.5px; }
.vazio .row { justify-content: center; margin-top: 24px; }

/*
 * A ação da tela vazia tem tamanho de ação.
 *
 * Estava usando `.badge` — a pílula de 12 px que serve para rotular estoque e
 * status. Como saída única de uma tela sem conteúdo, ela é pequena demais para
 * o dedo e discreta demais para o olho: a pessoa chega ao beco e não encontra a
 * porta. Vazado, não âmbar: o âmbar é de comprar, e daqui ainda não se compra.
 */
.vazio-acao {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  padding: 12px 26px;
  border: 1px solid var(--fg);
  border-radius: var(--raio);
  color: var(--fg);
  background: none;
  transition: background .18s ease, color .18s ease;
}
.vazio-acao:hover { background: var(--fg); color: #fff; text-decoration: none; }

/* ── Estados de carregamento ─────────────────────────────────────────────────
 *
 * Era uma linha de texto no canto de uma tela em branco: no 4G brasileiro o
 * "vazio" dura o suficiente para alguém achar que a loja não tem produto.
 *
 * O esqueleto mostra a FORMA do que vem, e o conteúdo real entra sem a página
 * saltar. Só nas telas de listagem: no carrinho um esqueleto prometeria itens
 * que talvez não existam, e prometer errado é pior que não prometer.
 */
.esqueleto {
  background: linear-gradient(90deg, var(--linha) 25%, #eef1f6 37%, var(--linha) 63%);
  background-size: 400% 100%;
  animation: esqueleto-brilho 1.4s ease infinite;
  border-radius: var(--raio);
}
@keyframes esqueleto-brilho {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
.esqueleto-card { display: flex; flex-direction: column; }
.esqueleto-foto { aspect-ratio: 1; border-radius: var(--raio); margin-bottom: 14px; }
.esqueleto-linha { height: 13px; margin-bottom: 8px; }
.esqueleto-linha.curta { width: 55%; }
.esqueleto-linha.preco { height: 20px; width: 42%; margin-top: 4px; }

/* Fora da listagem, uma barra fina em vez de texto solto: não promete forma
   nenhuma, e ainda assim diz que algo está acontecendo. */
.carregando {
  position: relative;
  padding-top: 14px;
  color: var(--muted);
}
.carregando::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--linha);
  overflow: hidden;
}
.carregando::after {
  content: "";
  position: absolute; top: 0; left: 0;
  height: 2px; width: 32%;
  background: var(--acao);
  animation: carregando-corre 1.1s cubic-bezier(.65, .05, .36, 1) infinite;
}
@keyframes carregando-corre {
  from { transform: translateX(-100%); }
  to   { transform: translateX(420%); }
}

/* Cabeçalho de página: o mesmo par rótulo+título das seções da vitrine, mas
   SEM o fio em cima — logo abaixo do cabeçalho escuro, um segundo traço
   horizontal lê como sujeira, não como estrutura. */
.cabecalho-pagina { margin-bottom: 20px; }
.cabecalho-pagina h1 { margin: 0; }

/* Filtros de categoria: eram um `.row` com estilo escrito no JS. */
.filtros-categoria {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px;
}

/* ── Catálogo e cards ──────────────────────────────────────────────────── */

.grid {
  display: grid;
  /*
   * 180px, não 200: a vitrine destaca SEIS produtos, e com 200 cabiam cinco na
   * largura do container — o sexto caía sozinho numa segunda linha. Um card
   * órfão ao lado de um vão vazio lê como página quebrada, não como composição.
   *
   * Em 1280 de container: (1240 − 5×20) ÷ 6 = 190 px por coluna. Sobra folga
   * para o texto do card sem deixar a foto pequena demais.
   */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* Mais respiro entre LINHAS que entre colunas: sem a moldura do cartão, é o
     vazio que separa um produto do de baixo. */
  gap: 34px 20px;
}

.card {
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 16px;
}

/* ── Cartão de produto ───────────────────────────────────────────────────────
 *
 * Sem moldura: seis produtos lado a lado com borda e sombra viram seis caixas
 * iguais, e a foto — que é o que vende — compete com o próprio contorno. O que
 * separa um produto do outro passa a ser o vazio.
 *
 * O botão âmbar continua sólido: a moldura saiu para ele aparecer MAIS. Mexer
 * no que converte para a grade ficar bonita seria trocar venda por composição.
 */
.grid .card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  position: relative;
  /*
   * `min-width: 0` é o que impede o cartão de EMPURRAR a coluna.
   *
   * Item de grade nasce com largura mínima igual ao seu conteúdo mínimo. O
   * `.card-meta` não quebra linha de propósito (categoria longa viraria três
   * linhas), e "MASCULINO · AGON WEAR" sem quebra mede ~173 px: a coluna de
   * 154 px crescia para caber a frase e a grade transbordava a tela.
   *
   * `overflow: hidden` e `text-overflow: ellipsis` NÃO resolvem sozinhos —
   * nenhum dos dois reduz a largura mínima. Sem esta linha, as reticências
   * nunca chegam a aparecer, porque nada nunca precisa ser cortado.
   */
  min-width: 0;
}

/* A moldura da FOTO é que existe — e é ela que recorta o zoom do hover. */
.card-foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background: #eef1f6;
  margin-bottom: 14px;
}

.grid .card > h3 {
  margin: 0 0 3px;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  letter-spacing: -.012em;
  /* Duas linhas reservadas: sem isto o preço de um cartão fica em altura
     diferente do vizinho conforme o nome quebra ou não, e o olho perde a
     linha de comparação — que é justamente para o que a grade serve. */
  min-height: 2.6em;
  transition: color .16s ease;
}
.grid .card:hover > h3 { color: var(--acao-forte); }

/* Categoria e marca viram rótulo miúdo, o mesmo padrão do resto da loja. */
.card-meta {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  color: var(--muted);
  /* Nome de categoria longo não pode empurrar o cartão nem quebrar em três
     linhas: uma linha, com reticências. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  padding: 12px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.grid .card:hover .thumb { transform: scale(1.045); }

.thumb.sem-foto {
  display: grid; place-items: center;
  color: var(--placeholder); font-size: 11px; letter-spacing: .12em;
  padding: 0;
}

/* Só aparece com preço "De" cadastrado — desconto que não existe não vira selo. */
.selo-desconto {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--erro);
  color: #fff;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 4px;
  z-index: 1;
}

.preco-de {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  margin: 0;
}
.price { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.parcelado { font-size: 12.5px; color: var(--fg-2); margin: 3px 0 0; }
.frete-gratis { font-size: 12.5px; font-weight: 600; color: var(--verde); }
.card-frete { margin: 7px 0 0; }

.card-acao { margin-top: auto; padding-top: 14px; }
.card-acao button { width: 100%; font-size: 13.5px; padding: 10px 12px; }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 20px;
  color: var(--fg-2);
  background: var(--bg);
}
a.badge:hover { border-color: var(--escuro-2); color: var(--escuro-2); text-decoration: none; }
a.badge.on { background: var(--escuro-2); border-color: var(--escuro-2); color: #fff; }
.badge.esgotado { border-color: transparent; background: #f2f4f7; color: var(--muted); }
.badge.status-ok { background: var(--verde-bg); border-color: #b9e0cb; color: var(--verde); }
.badge.status-aguardando { background: #fff4e5; border-color: #f5d9ae; color: #8a5300; }
.badge.status-ruim { background: var(--erro-bg); border-color: #f3c4c1; color: var(--erro); }

/* ── Faixa de confiança ────────────────────────────────────────────────── */

/* ── Faixa de confiança ──────────────────────────────────────────────────────
 *
 * Isto é INFORMAÇÃO — como a loja entrega, como cobra, o que garante —, não
 * promoção. Era uma caixa escura empilhada logo acima de outra caixa escura.
 * Em fio e vazio lê melhor, e devolve o escuro ao bloco que chama para a ação.
 */
.confianca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-top: 64px;
  padding: 0;
  background: none;
  color: inherit;
  border-radius: 0;
  border-top: 1px solid var(--linha-forte);
  border-bottom: 1px solid var(--linha-forte);
}
.confianca div {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 26px 22px 26px 0;
}
.confianca div + div { border-left: 1px solid var(--linha); padding-left: 22px; }
/* Ícone no azul do cromo, não em âmbar: o âmbar é de comprar, e aqui não se
   compra nada. */
.confianca svg { color: var(--escuro-2); flex: none; margin-top: 2px; }
.confianca b { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.confianca span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 760px) {
  /* Em coluna única o fio precisa mudar de lado, senão vira um traço vertical
     solto à esquerda de cada item. */
  .confianca div { padding: 20px 0; }
  .confianca div + div { border-left: none; border-top: 1px solid var(--linha); padding-left: 0; }
}

/* ── Chamada final ───────────────────────────────────────────────────────────
 *
 * O ÚNICO bloco escuro da vitrine agora — e é isso que o faz funcionar. Saíram
 * as listras em gradiente: elas imitavam textura sem existir textura nenhuma, e
 * o que dá presença ao bloco é o contraste com todo o claro acima dele, não o
 * desenho dentro dele.
 */
.oferta {
  margin-top: 64px;
  background: var(--escuro);
  color: #fff;
  border-radius: var(--raio-g);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 3.4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.oferta-texto b {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.12;
}
.oferta-texto b em { font-style: normal; color: var(--acao); }
.oferta-texto span { color: var(--sobre-escuro-suave); font-size: 14.5px; }

/* ── Mensagens ─────────────────────────────────────────────────────────── */

/* Fio à esquerda no lugar da caixa preenchida: o mesmo recurso do resto da
   loja, e a cor fica onde carrega significado — na borda — em vez de tingir o
   bloco inteiro. As cores do texto não mudaram; elas já passavam em AA. */
.msg {
  padding: 12px 16px; margin: 14px 0; font-size: 14px;
  border-radius: 0 var(--raio) var(--raio) 0;
  border-left: 3px solid currentColor;
}
.msg.ok { background: var(--verde-bg); color: #04502e; }
.msg.err { background: var(--erro-bg); color: #8c1c16; }

/* ── Tabelas ───────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg); }
/* Mesmo espacejamento do `.olho`: cabeçalho de tabela é o mesmo tipo de rótulo
   miúdo que abre uma seção, e estava com um valor próprio por acidente. */
th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  color: var(--muted);
  padding: 13px 14px;
  border-bottom: 1px solid var(--linha-forte);
}
td { padding: 16px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
.overflow { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--bg); }

/* ── Painel administrativo ─────────────────────────────────────────────── */

/* O painel usa o mesmo cabeçalho da loja; `.atalhos` empurra o bloco à direita. */
.cabecalho .atalhos { margin-left: auto; }

/* A tabela de produtos tem muitas colunas: sem largura mínima, o nome quebra
   letra a letra e a tela vira ilegível. */
.painel-produtos table { min-width: 1040px; }
.painel-produtos td:first-child { min-width: 180px; }

.painel-selo {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 4px;
  letter-spacing: .04em; text-transform: uppercase;
  margin-left: -10px;
}
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 26px; flex-wrap: wrap; }
.tabs button {
  background: transparent; color: var(--muted);
  border-radius: 0; border-bottom: 2px solid transparent;
  padding: 11px 16px; font-size: 14px;
}
.tabs button:hover { background: transparent; color: var(--fg); }
.tabs button.on { color: var(--fg); border-bottom-color: var(--acao); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat { background: var(--bg); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 18px; }
.stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }

/* ── Página de produto ─────────────────────────────────────────────────── */

.trilha { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

.produto { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr) 330px; gap: 28px; align-items: start; }

/*
 * A galeria acompanha a leitura.
 *
 * A ficha técnica de um produto real é longa, e a coluna da foto é curta: sem
 * isto, o cliente rola as especificações e a foto sai da tela, deixando um vão
 * enorme à esquerda. Quem está decidindo a compra quer olhar o produto ENQUANTO
 * lê a especificação — é o comportamento de qualquer loja grande.
 *
 * `top` alinhado com o da caixa de compra, que já era sticky: as duas colunas
 * param na mesma altura em vez de escorregarem uma em relação à outra.
 *
 * A altura vem MEDIDA do cabeçalho (ver `cabecalhoCompacto` em loja.js), não de
 * um 128px cravado. O número antigo já não batia com a altura real, estava
 * repetido em dois lugares que precisavam concordar, e passaria a errar sempre
 * — porque agora o cabeçalho encolhe ao rolar.
 */
.produto-galeria { position: sticky; top: var(--topo-grudado); }

.produto-galeria img,
.produto-sem-foto {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #eef1f6; border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 16px;
}
.produto-sem-foto {
  display: flex; align-items: center; justify-content: center;
  color: var(--placeholder); font-size: 13px; letter-spacing: .05em;
}

/* Maior que antes e na fonte de display, mas abaixo de um título de página: o
   nome do produto manda na coluna, não na tela — quem já clicou aqui sabe o que
   veio ver, e o que decide a compra é a foto, o preço e a ficha. */
.produto-info h1 { font-size: clamp(23px, 2.5vw, 33px); line-height: 1.14; }
.produto-descricao { border-top: 1px solid var(--linha); padding-top: 16px; }
.produto-descricao b { display: block; margin-bottom: 6px; font-size: 15px; }
/* `pre-wrap`: a descrição vem do fornecedor como ficha técnica, uma linha por
   especificação. Sem isto o HTML colapsa as quebras e tudo vira um paredão. */
.produto-descricao p {
  margin: 0; color: var(--fg-2); line-height: 1.6;
  white-space: pre-wrap;
  /* `pre-wrap` quebra em espaço, mas não DENTRO de uma palavra: uma URL ou um
     código longo na descrição do fornecedor empurraria a página na horizontal.
     Em 360px isso é o suficiente para quebrar a tela. */
  overflow-wrap: anywhere;
}

.produto-compra {
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: var(--topo-grudado);
  background: #fff;
  box-shadow: var(--sombra);
}
.produto-compra label { margin: 4px 0 0; }
.produto-preco { display: flex; flex-direction: column; }
.produto-preco .price { font-size: clamp(28px, 3vw, 36px); }

.produto-selos {
  border-top: 1px solid var(--linha);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--fg-2);
}

.miniaturas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.miniaturas figure { margin: 0; position: relative; }
.miniaturas img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--raio); border: 1px solid var(--linha); display: block; }
.miniaturas button { position: absolute; top: 3px; right: 3px; padding: 2px 7px; font-size: 12px; border-radius: 4px; background: rgba(0,0,0,.6); }

/* ── Carrinho ──────────────────────────────────────────────────────────── */

.carrinho-pagina { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.carrinho-pagina .item-nome { font-weight: 600; font-size: 15px; letter-spacing: -.012em; }
.carrinho-pagina td.num { white-space: nowrap; }

/*
 * O resumo é a coluna que decide a compra: é onde o cliente confere o total
 * antes de seguir. Ganhou ar e perdeu a sombra — numa página que agora se
 * organiza por fios, a sombra era o único elemento pedindo profundidade.
 *
 * `top` pelo token: era o TERCEIRO lugar do arquivo com `128px` cravado, os
 * três precisando concordar entre si e com a altura real do cabeçalho.
 */
.carrinho-resumo,
.checkout-resumo {
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-g);
  padding: 24px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 11px;
  position: sticky; top: var(--topo-grudado);
}
.resumo-titulo {
  font-family: var(--fonte-display);
  font-size: 17px; letter-spacing: -.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
.resumo-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--fg-2); }
.resumo-total {
  border-top: 1px solid var(--linha-forte);
  padding-top: 14px; margin-top: 4px;
  font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--fg);
}

/* ── Checkout ──────────────────────────────────────────────────────────── */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.checkout-form { display: flex; flex-direction: column; gap: 16px; }

/*
 * O checkout mudou POUCO de propósito.
 *
 * É a tela onde a pessoa está digitando CPF e endereço com o cartão na mão.
 * Composição assimétrica, manchete grande e revelação ao rolar seriam
 * exatamente as coisas erradas aqui: cada gesto a mais é uma chance a mais de
 * abandonar o carrinho. O que ele herda do redesenho é o ritmo — respiro,
 * fios, e o mesmo tratamento de título do resto da loja.
 */
.bloco { border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 24px; background: var(--bg); }
.bloco-titulo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--linha);
}
.bloco-titulo b { font-family: var(--fonte-display); font-size: 17px; letter-spacing: -.02em; }
.bloco .nota {
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--bg-2); border-radius: var(--raio);
  font-size: 13px; color: var(--fg-2); line-height: 1.55;
}
.aceite {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; font-size: 14px; color: var(--fg-2);
}
.aceite input { width: auto; margin-top: 3px; flex: none; }
.aceite span { margin: 0; }

/* ── Detalhe do pedido ─────────────────────────────────────────────────── */

.pedido { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; margin-top: 18px; }
.pedido .card { display: flex; flex-direction: column; gap: 4px; }
.pedido-item {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
.pedido-item:last-of-type { border-bottom: none; }
.pedido .pagamento { grid-column: 1; display: flex; flex-direction: column; gap: 12px; }
.pedido .pagamento > b { font-size: 16px; }
.pedido .msg { grid-column: 1; margin: 0; }

/* ── Autenticação, conta e texto ───────────────────────────────────────── */

.auth { max-width: 420px; margin: 0 auto; }
/* Sem tamanho próprio: usa a escala da loja como qualquer outro título de
   página. Entrar e criar conta faziam parte do site com uma tipografia que não
   era a do site — é assim que uma loja passa a parecer três sites diferentes. */
.auth h1 { margin-bottom: 18px; }
.auth .bloco { display: block; }
.auth .msg { margin: 0; }

.conta-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }

.texto { max-width: 720px; }
/* Subtítulo DENTRO de documento longo: fluido como o resto da escala, mas um
   degrau abaixo de título de seção — senão a política de privacidade lê como
   uma sequência de manchetes. */
.texto h2 { font-size: clamp(18px, 1.6vw, 21px); margin-top: 32px; }
.texto p { color: var(--fg-2); line-height: 1.7; }

/* ── Diálogo ───────────────────────────────────────────────────────────── */

dialog {
  border: none;
  border-radius: var(--raio-g);
  padding: 26px;
  max-width: 560px;
  width: calc(100% - 40px);
  box-shadow: var(--sombra-alta);
}
dialog::backdrop { background: rgba(16, 26, 43, .55); }

/* ── Rodapé ────────────────────────────────────────────────────────────── */

/*
 * O rodapé é a última coisa que a pessoa vê, e era quatro colunas de links
 * espremidas — o desenho de rodapé que qualquer loja tem.
 *
 * O que muda: a marca ganha o tamanho de uma assinatura em vez de ser mais um
 * item da fileira, e a coluna dela fica visivelmente mais larga que as de
 * links. É assimetria com função: separa "quem é a loja" de "para onde ir".
 */
footer { background: var(--escuro); color: var(--sobre-escuro-suave); margin-top: 80px; font-size: 13.5px; }
.rodape {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(32px, 3.4vw, 48px);
}
.rodape-marca .logo {
  font-size: clamp(28px, 3.4vw, 44px);
  display: inline-block;
  margin-bottom: 18px;
}
.rodape-marca p { margin: 0; max-width: 32ch; line-height: 1.65; }
/* Fio à esquerda de cada coluna de links: dá estrutura sem caixa, e é o mesmo
   recurso da faixa de confiança lá em cima. */
.rodape-col {
  display: flex; flex-direction: column; gap: 11px;
  border-left: 1px solid rgba(255, 255, 255, .09);
  padding-left: 26px;
}
.rodape-col h4 { margin-bottom: 6px; }
.rodape-col h4 {
  color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  margin: 0 0 4px;
}
.rodape-col a { color: var(--sobre-escuro-suave); }
.rodape-col a:hover { color: #fff; text-decoration: underline; }

.bandeiras { display: flex; flex-wrap: wrap; gap: 6px; }
.bandeiras span {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--sobre-escuro);
}
.rodape-nota { margin: 10px 0 0; font-size: 12px; line-height: 1.55; }

.rodape-base {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 20px; padding-bottom: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
}

/* ── Telas pequenas ────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .produto { grid-template-columns: 1fr; }
  /* Em coluna única, `sticky` deixa de ajudar e passa a atrapalhar: a foto
     grudaria no topo e a ficha técnica rolaria por baixo dela. As duas voltam
     a acompanhar o fluxo da página. */
  .produto-galeria,
  .produto-compra { position: static; }
  .rodape { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* O rodapé deixa de ser UMA fileira, e o fio à esquerda passaria a aparecer
     também no primeiro item de cada linha, solto. Empilhado, separar por cima é
     o sentido em que os blocos se seguem. */
  .rodape-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding-top: 22px;
  }
}

@media (max-width: 900px) {
  .checkout, .carrinho-pagina, .pedido { grid-template-columns: 1fr; }
  .checkout-resumo, .carrinho-resumo { position: static; }
}

@media (max-width: 760px) {
  header { position: static; }
  .cabecalho { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  /*
   * O encolher-ao-rolar é DESLIGADO aqui, e isso não é detalhe.
   *
   * Ele existe para devolver tela num cabeçalho GRUDADO. Neste tamanho o
   * cabeçalho é estático e já sai de cena sozinho: encolher a altura dele com a
   * página rolando não devolve nada e faz o documento inteiro subir 8 px de
   * repente — um salto no conteúdo que a pessoa está lendo, provocado por um
   * elemento que ela nem está mais vendo.
   */
  header.compacto .cabecalho { padding-top: 12px; padding-bottom: 12px; }
  .logo, header.compacto .logo { font-size: 21px; }
  .busca { order: 3; flex-basis: 100%; }
  .atalhos { margin-left: auto; gap: 14px; }
  .atalho small { display: none; }
  .atalho span { flex-direction: row; align-items: center; gap: 6px; }
  /*
   * A manchete e a faixa de confiança NÃO recebem mais margem interna aqui.
   *
   * Eram caixas: a margem existia para o texto não encostar na borda delas.
   * Sem caixa, a mesma regra passou a indentar a manchete em 24px em relação a
   * todo o resto da página — e a faixa de confiança, que agora é linha com
   * fios, ganhava um vão em volta que quebrava o alinhamento das colunas.
   *
   * Os dois herdam a margem do `main`, como todo o resto do conteúdo. O
   * tamanho vertical já vem do `clamp` de cada um.
   */
  main { padding-top: 20px; }
  .rodape { grid-template-columns: 1fr; }
}


/* Banner de consentimento. Fica ACIMA do botão do WhatsApp e não cobre o
   conteúdo: barra inferior, não modal — bloquear a loja para pedir permissão de
   medir é cobrar um preço alto por algo que não é necessário para comprar. */
/* Enquanto o banner está aberto, a página ganha o espaço dele no fim. Sem isso
   a barra fixa cobre o rodapé e o último botão da tela, que passam a não
   receber clique — a pessoa vê o elemento e ele não responde. */
body.com-consentimento { padding-bottom: var(--altura-consentimento, 132px); }

.consentimento {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--escuro); color: #fff;
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap;
  box-shadow: 0 -6px 24px rgba(16, 26, 43, .28);
}
.consentimento-texto { max-width: 62ch; font-size: 14.5px; }
.consentimento-texto b { display: block; margin-bottom: 3px; font-size: 15.5px; }
.consentimento-texto p { margin: 0; color: #c9d2e0; line-height: 1.5; }
.consentimento-texto a { color: var(--acao); }
/* Os dois botões têm o MESMO peso visual — mesmo tamanho, mesma cor, mesmo
   contorno. Não é preciosismo: um "aceitar" preenchido ao lado de um "recusar"
   apagado empurra a escolha, e consentimento empurrado não é livre. Aqui nada
   sugere qual das duas respostas a loja prefere. */
.consentimento-botoes { display: flex; gap: 10px; flex-shrink: 0; }
.consentimento-botoes button {
  min-width: 132px;
  padding: 11px 20px;
  border-radius: var(--raio);
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.consentimento-botoes button:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.consentimento-botoes button:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }

@media (max-width: 640px) {
  /* Enquanto o banner está aberto, a página ganha o espaço dele no fim. Sem isso
   a barra fixa cobre o rodapé e o último botão da tela, que passam a não
   receber clique — a pessoa vê o elemento e ele não responde. */
body.com-consentimento { padding-bottom: var(--altura-consentimento, 132px); }

.consentimento { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .consentimento-botoes button { flex: 1; min-width: 0; }
}
/* Com o banner aberto, o botão do WhatsApp sobe para não ficar por baixo. */
.consentimento ~ #zap { bottom: 104px; }

#zap {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 20px rgba(16, 26, 43, .28);
  transition: transform .15s ease;
}
#zap:hover { transform: scale(1.06); text-decoration: none; }
#zap:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; }
/* O botão do WhatsApp encolhe no celular — é a ÚNICA regra que existia dentro
   do bloco duplicado que ocupava daqui até a linha 907. Aquele bloco repetia
   literalmente todo o banner de consentimento e o #zap acima, engolidos por um
   `@media` aberto e nunca fechado: além das ~55 linhas mortas em toda visita,
   ele redefinia o layout DESKTOP do banner dentro de uma consulta de 640px, e
   só não quebrava a tela por sorte da ordem em que as regras caíam. */
@media (max-width: 640px) {
  #zap { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}

.rastreio {
  border: 1px solid var(--linha-forte); border-radius: var(--raio-g);
  background: var(--bg-2); padding: 16px 18px; margin-top: 14px;
}
.rastreio-rotulo { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.rastreio-codigo {
  margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.erro-404 { max-width: 620px; margin: 40px auto 60px; text-align: center; }
.erro-codigo { font-size: 76px; font-weight: 700; color: var(--acao); line-height: 1; margin: 0 0 8px; }
.erro-404 h1 { margin: 0 0 10px; }
.erro-busca { display: flex; gap: 8px; margin: 26px auto 20px; max-width: 420px; }
.erro-busca input {
  flex: 1; min-width: 0; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 11px 14px; font: inherit; background: var(--bg); color: var(--fg);
}
.erro-atalhos { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }

.estoque-baixo { color: #b3261e; font-weight: 600; }

.relacionados { margin-top: 56px; }
/* Mesmo fio e mesmo ritmo das seções da vitrine: produtos relacionados são uma
   seção de vitrine dentro da página de produto, e estavam com título de outro
   tamanho, sem fio e com metade do respiro. */
.relacionados h2 { margin: 0; }
.relacionados .secao-topo { margin-bottom: 20px; }

.produto-miniaturas { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.produto-miniaturas img {
  width: 68px; height: 68px; object-fit: cover; cursor: pointer;
  border: 2px solid var(--linha); border-radius: var(--raio); background: var(--bg-2);
  transition: border-color .15s ease;
}
.produto-miniaturas img:hover { border-color: var(--linha-forte); }
.produto-miniaturas img.on { border-color: var(--acao); }
.produto-miniaturas img:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }

.filtro-preco { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.filtro-preco input {
  width: 88px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 7px 9px; font: inherit; font-size: 14px; background: var(--bg); color: var(--fg);
}
.filtro-preco label { display: flex; align-items: center; gap: 5px; }

.paginacao {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 28px 0 4px; flex-wrap: wrap;
}
.paginacao-onde { font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.paginacao button[disabled] { opacity: .45; cursor: not-allowed; }

.calc-frete { border-top: 1px solid var(--linha); margin-top: 16px; padding-top: 16px; }
.calc-frete label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.calc-frete-linha { display: flex; gap: 8px; }
.calc-frete-linha input {
  flex: 1; min-width: 0; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 10px 12px; font: inherit; font-size: 15px; background: var(--bg); color: var(--fg);
}
.calc-frete-linha button { white-space: nowrap; }
.calc-frete-saida { margin: 10px 0 0; font-size: 14.5px; min-height: 1.2em; }
.err-texto { color: #b3261e; }

.barra-ordem {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 4px 0 16px;
}
.barra-ordem label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.barra-ordem select {
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 8px 10px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px;
}

/* Identificação legal: rodapé e páginas institucionais. */
.rodape-base .identificacao { display: flex; flex-direction: column; gap: 2px; }
.rodape-base .identificacao span { line-height: 1.5; }

.identificacao-bloco {
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--bg-2);
  padding: 16px 18px;
  margin: 12px 0 20px;
}
.identificacao-bloco p { margin: 4px 0; }

.texto ol { margin: 10px 0 16px; padding-left: 22px; line-height: 1.7; }
.texto ol li { margin-bottom: 6px; }

/* ── Celular ──────────────────────────────────────────────────────────────
 *
 * O corte é 640px e as colunas são EXPLÍCITAS, não `auto-fill` com piso.
 * `auto-fill, minmax(160px, 1fr)` parece responsivo e não é: a contagem de
 * colunas passa a depender de a largura disponível vencer um número fixo. Em
 * 360px — a largura de Android mais comum no Brasil — sobravam 320px, e duas
 * colunas de 160 mais 12 de gap pedem 332. Faltando 12 pixels, a grade caía
 * para UMA coluna e o catálogo virava uma vitrine de um produto por tela.
 *
 * Nada disso aparecia na suíte: o projeto "mobile" usa Pixel 7, que tem 412px.
 */
@media (max-width: 640px) {
  /* `minmax(0, 1fr)`, não `1fr`: `1fr` tem mínimo automático igual ao conteúdo,
     e uma coluna com conteúdo largo cresce além da sua fração. É a mesma causa
     do `min-width: 0` no cartão, tratada do lado da grade. */
  /*
   * Gap assimétrico: 12px entre colunas, 26px entre linhas.
   *
   * Os 12px horizontais são necessários — em 360px, duas colunas com mais folga
   * espremeriam a foto. Mas o cartão perdeu a moldura, e é o vazio que separa
   * um produto do de baixo: com 12px nos dois eixos, o nome de um encostava no
   * pé do outro e a grade virava uma parede.
   */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }

  /* A barra tem contagem, ordenação e faixa de preço. Lado a lado em 360px
     vira um amontoado; empilhada, cada controle fica com largura de dedo. */
  .barra-ordem { flex-direction: column; align-items: stretch; gap: 10px; }
  .barra-ordem label { justify-content: space-between; }
  .barra-ordem select { flex: 1; margin-left: 10px; }
  /* Grade em vez de flex: "de" e "até" ficam alinhados um sob o outro, em vez
     de cada rótulo empurrar seu campo para uma posição diferente. */
  .filtro-preco { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
  .filtro-preco > span { grid-column: 1 / -1; font-weight: 600; }
  .filtro-preco label { display: contents; }
  .filtro-preco input { width: auto; min-width: 0; }
  .filtro-preco button { grid-column: 1 / -1; }
  .env { padding: 0 14px; }

  /* Formulários lado a lado não cabem: em 360px cada campo ficaria com ~155px,
     estreito a ponto de o próprio placeholder do CPF cortar. */
  .checkout .row { flex-direction: column; gap: 0; }

  /* A linha do carrinho EMPILHA.
     A tabela vivia num container com rolagem horizontal, então nada sumia — mas
     o arrasto não tem pista visual, e o que ficava escondido era justamente o
     total do item e o botão de remover. */
  .carrinho-pagina .overflow { overflow-x: visible; border: 0; background: none; }
  .carrinho-pagina table, .carrinho-pagina tbody, .carrinho-pagina tr, .carrinho-pagina td {
    display: block;
    width: auto;
  }
  .carrinho-pagina thead { display: none; }
  .carrinho-pagina tr {
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--bg);
    padding: 14px;
    margin-bottom: 12px;
  }
  .carrinho-pagina td {
    border: 0;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  /* O rótulo vem do data-rotulo porque o cabeçalho da tabela sumiu: sem ele,
     "R$ 349,90" duas vezes na mesma linha não diz qual é o preço e qual o total. */
  .carrinho-pagina td[data-rotulo]::before {
    content: attr(data-rotulo);
    color: var(--muted);
    font-size: 13px;
  }
  .carrinho-pagina td:first-child {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--linha);
  }
  .carrinho-pagina td.acao { justify-content: stretch; padding-top: 12px; }
  .carrinho-pagina td.acao button { width: 100%; }
}

@media (max-width: 460px) {
  .departamento-tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Sem transição, `opacity: 0` sem a classe `.visivel` seria conteúdo invisível
     para sempre. Quem pede menos movimento recebe a página inteira de saída. */
  html.com-revelacao .revelar { opacity: 1 !important; transform: none !important; }
  .tile:hover .tile-foto img { transform: none; }
  .grid .card:hover { transform: none; }
}

/* Espelho do preço no painel: mostra o valor exato que será gravado enquanto se
   digita. O campo pedia centavos, e "120" virava R$ 1,20 sem nada acusar. */
.espelho-preco { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.espelho-preco.invalido { color: #b3261e; }