/* ==========================================================================
   NEXT · vitrine pública — folha de estilo compartilhada pelas quatro telas
   Direção: "atacado premium em preto e branco".
   O preto é a paleta da fábrica; o laranja é acento e aparece em quatro
   lugares apenas: filtro ativo, botão que libera o preço, preço liberado e
   o fio de 2px do cabeçalho.
   ========================================================================== */

:root{
  /* pretos — a paleta da fábrica */
  --preto:#08080A; --grafite:#141416; --carvao:#1E1E21; --fumaca:#2A2A2E;
  /* neutros claros — os do sistema atual, mantidos */
  --n0:#FFFFFF; --n50:#F7F8F6; --n100:#EFF1ED; --n200:#E3E6E1;
  --n300:#C7CBC4; --n400:#9AA096; --n500:#5F655B; --n700:#454A42; --n900:#252525;
  /* laranja — acento, pouco */
  --laranja:#E06618;        /* SÓ sobre escuro */
  --laranja-forte:#B35213;  /* única versão sobre claro */
  --laranja-fraco:#FEF4ED;  /* fundo de realce, sem texto pequeno colorido */
  /* erro — matiz próprio, para não se confundir com a chave que libera o preço */
  --erro:#E5484D; --erro-fundo:#2A1114; --erro-texto:#FFC7C9; --erro-borda:#5A2226;
  /* tipografia */
  --ui:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --topo:env(safe-area-inset-top,0px); --base:env(safe-area-inset-bottom,0px);

  /* medidas de layout — a densidade da seção 6 do brief depende delas */
  --vao:10px;          /* respiro lateral da página no celular */
  --folga:8px;         /* espaço entre cartões da grade */
  --alvo:44px;         /* alvo de toque nunca menor que isto */
  --rodape-h:56px;     /* a única barra fixa de baixo da tela */
  --grude-h:102px;     /* busca + trilha de filtros grudadas no topo */

  /* grão: dá profundidade ao preto sem virar textura decorativa
     (é data URI inline — nenhum domínio de terceiro além do Google Fonts) */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ui);
  font-size:14px; line-height:1.45;
  color:var(--n900);
  background:var(--n100);
  overflow-x:hidden;              /* garante scrollWidth == innerWidth */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;margin:0}
a{color:inherit;text-decoration:none}
input{font:inherit}
[hidden]{display:none !important}

/* Números de dinheiro e de quantidade sempre alinham entre cartões. */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* Microrrótulo de catálogo de fábrica — a assinatura tipográfica da tela. */
.rotulo{
  font-family:var(--mono); font-weight:500; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
}

/* Foco sempre visível — nunca só hover. */
:focus-visible{outline:2px solid var(--laranja);outline-offset:2px;border-radius:2px}
.corpo-claro :focus-visible,.fundo-vitrine :focus-visible{outline-color:var(--n900)}

/* Fora da tela, mas com alvo cheio quando recebe foco (pular / avisos). */
.pular{
  position:fixed; left:8px; top:-90px; z-index:99;
  min-height:var(--alvo); min-width:var(--alvo);
  display:inline-flex; align-items:center; padding:0 14px;
  background:var(--n0); color:var(--preto);
  font-size:13px; font-weight:600; border-radius:2px;
  margin:0; transition:top .15s ease;
}
.pular:focus{top:8px}

/* ==========================================================================
   1 · Superfícies escuras
   ========================================================================== */
.escuro{background-color:var(--preto);background-image:var(--grao);color:var(--n0)}

/* Cabeçalho — logo, busca (no desktop) e o botão do código. */
.cabecalho{
  background-color:var(--preto); background-image:var(--grao);
  color:var(--n0); padding-top:var(--topo);
  position:relative; z-index:40;
}
.cabecalho__linha{
  display:flex; align-items:center; gap:10px;
  height:52px; padding:0 var(--vao);
}
/* `wrap` porque no celular a frase cai numa segunda linha do MESMO cabeçalho.
   Ela saiu da faixa preta alta com o título "N produtos publicados", que o dono
   mandou apagar: contagem em destaque não é o que ele quer vender, e a faixa
   custava ~80px antes da primeira foto. */
.cabecalho__linha{flex-wrap:wrap}
.cabecalho__marca{display:flex;align-items:center;min-height:var(--alvo);min-width:var(--alvo);padding:4px 2px}
.cabecalho__marca img{height:21px;width:auto}
.cabecalho__busca-desktop{display:none;flex:1;min-width:0}
.cabecalho__vao{flex:1}
/* A frase discreta: no celular ocupa a linha inteira, logo abaixo do logo e do
   botão; no desktop ela entra na mesma linha, entre a busca e o botão. */
.cabecalho__frase{
  flex:1 0 100%; margin:0 0 8px;
  font-size:11px; line-height:1.35; color:var(--n400);
}
/* O canto direito do cabeçalho: o botão do código antes, a loja e o "Sair"
   depois. É aqui que a identificação vive — o rodapé é do carrinho. */
.cabecalho__acao{display:flex;align-items:center;gap:4px;flex:0 0 auto;min-width:0}
.cabecalho__loja{
  display:inline-flex; align-items:center; gap:6px; min-width:0;
  font-size:12.5px; font-weight:600; color:var(--n0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cabecalho__loja svg{width:13px;height:13px;flex:0 0 auto}

/* ==========================================================================
   2 · Busca + trilha de filtros — o bloco que gruda no topo ao rolar
   ========================================================================== */
/* A busca gruda no topo e a fila de categorias NÃO. A vaga grudada é curta de
   propósito: a busca sozinha mede 53px; com a fila de círculos junto seriam
   172,5px permanentes, um quinto da tela de 844px comido antes do primeiro
   produto aparecer. A fila é o primeiro elemento navegável da página, não um
   controle permanente. */
/* Sem borda própria: no desktop da vitrine pública este bloco fica sem nenhum
   filho visível (a busca sobe para o cabeçalho, a tarja e o filtro de remessa
   só nascem quando existem), e uma borda deixaria um fio preto de 1px grudado
   sobre a parede branca sem nada dentro. Quem separa é a fila de categorias. */
.grude{
  position:sticky; top:0; z-index:38;
  background-color:var(--preto); background-image:var(--grao);
}
/* O fio de marca é um dos quatro lugares do laranja. Vai onde o bloco escuro
   de fato acaba: na base da fila de categorias nas telas de catálogo, na base
   do próprio cabeçalho na ficha do produto. */
.fio-marca{border-bottom:2px solid var(--laranja)}
.busca{padding:4px var(--vao)}
.busca__caixa{position:relative;display:flex;align-items:center}
.busca__lupa{
  position:absolute; left:11px; width:15px; height:15px;
  color:var(--n400); pointer-events:none;
}
.busca__campo{
  width:100%; height:var(--alvo);
  padding:0 38px 0 34px;
  background:var(--carvao); color:var(--n0);
  border:1px solid var(--fumaca); border-radius:3px;
  font-size:14.5px;
}
.busca__campo::-webkit-search-cancel-button,
.busca__campo::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.busca__campo::placeholder{color:var(--n400);opacity:1}
.busca__campo:focus{border-color:var(--laranja);background:var(--grafite)}
.busca__limpar{
  position:absolute; right:0; width:var(--alvo); height:var(--alvo);
  display:flex; align-items:center; justify-content:center;
  color:var(--n300); cursor:pointer;
}
.busca__limpar:hover{color:var(--n0)}

/* Trilha rolável de filtros. overflow-x fica preso aqui dentro. */
.trilha{
  display:flex; align-items:stretch; gap:2px;
  padding:0 var(--vao) 2px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* a borda direita desmancha: avisa que a trilha continua */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
.trilha::-webkit-scrollbar{display:none}
.trilha--categorias{border-top:1px solid var(--carvao)}
.trilha__separador{flex:0 0 1px;background:var(--carvao);margin:10px 8px;align-self:stretch}

.filtro{
  flex:0 0 auto; min-height:var(--alvo); min-width:var(--alvo);
  display:inline-flex; align-items:center; gap:6px;
  padding:0 10px; cursor:pointer; white-space:nowrap;
  color:var(--n300); font-size:12.5px; font-weight:500;
  border-bottom:2px solid transparent;
  transition:color .12s ease,border-color .12s ease;
}
.filtro:not(.filtro--ativo):hover{color:var(--n0)}
.filtro__conta{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:10px; font-weight:500; color:var(--n400);
}
.filtro--ativo{color:var(--laranja);border-bottom-color:var(--laranja)}
.filtro--ativo .filtro__conta{color:var(--laranja)}
/* "Tudo" ativo não é um filtro: fica branco, para o laranja significar sempre
   que alguma coisa está filtrando. */
/* O fio do neutro ativo era --n500 sobre preto (3,0:1) e sumia no sol: sem
   nenhum filtro aplicado ele e o unico indicador de qual opcao esta valendo. */
.filtro--ativo.filtro--tudo{color:var(--n0);border-bottom-color:var(--n300)}
.filtro--ativo.filtro--tudo .filtro__conta{color:var(--n400)}
.filtro__marca{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px;
  background:var(--n0); color:var(--preto);
  font-family:var(--mono); font-size:10px; font-weight:700; border-radius:2px;
}

/* Painel de filtros secundários (fábrica e remessa) no celular. */
.painel{
  padding:2px var(--vao) 8px; border-top:1px solid var(--carvao);
  display:flex; flex-wrap:wrap; gap:2px 10px; align-items:center;
}
.painel__titulo{flex:0 0 100%;color:var(--n400);padding:6px 0 2px}
/* Mesma chave, agora também na trilha do desktop, onde dois grupos dividiam
   uma linha sem nome e "Tudo" não tinha a que se referir. */
.trilha__chave{
  flex:0 0 auto; display:flex; align-items:center; padding:0 8px 0 0;
  color:var(--n400); white-space:nowrap;
}

/* ==========================================================================
   2b · A FILA DE CATEGORIAS EM FOTO
   Porte do que o sistema do dono já faz na tela de Lista (`tema.css:510-550`,
   `Lista.tsx:794-831`). Rola no dedo, na horizontal, e NÃO quebra em várias
   linhas: com quatro categorias hoje e treze amanhã, quebrar comeria meia tela
   antes do primeiro produto aparecer.

   ELA FICA NO CLARO, e não dentro do cabeçalho preto: é o primeiro elemento do
   corpo da página, como na referência do concorrente. O bloco preto acaba no
   fio laranja, logo acima. Isso troca todas as cores dos textos daqui — nome e
   contagem eram claros sobre preto e passam a ser escuros sobre claro — e troca
   também a versão do laranja: sobre claro a única autorizada nesta folha é
   `--laranja-forte` (#B35213), a mesma do "Ver preço" do cartão.

   A rolagem fica presa aqui dentro — a página nunca ganha rolagem lateral por
   causa desta fila.
   ========================================================================== */
.faixa-categorias{
  --fila-vao:10px;                 /* o vão entre círculos, e a conta do rabicho */
  display:flex; align-items:flex-start; gap:var(--fila-vao);
  /* `padding-right` fica em zero e o vão da direita vem do rabicho `::after`:
     navegador nenhum discorda de um item de flex, e mais de um já discordou do
     padding-right de um container que rola. */
  padding:12px 0 4px var(--vao);
  background:var(--n100);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* `proximity` e não `mandatory`: ajuda a parar num círculo inteiro sem
     brigar com o dedo de quem só quis empurrar a fila. */
  scroll-snap-type:x proximity; scroll-padding-left:var(--vao);
}
.faixa-categorias::-webkit-scrollbar{display:none}
/* Devolve à direita o mesmo respiro da margem esquerda. Sem isto o último
   círculo encosta na borda no fim da rolagem e parece cortado ao meio — que é
   exatamente o defeito que a fila do concorrente tem. O `gap` antes do rabicho
   já conta, então o que falta é o resto. */
.faixa-categorias::after{content:'';flex:0 0 calc(var(--vao) - var(--fila-vao));min-height:1px}

/* ── OS CÍRCULOS ──
   Foto de uma peça real da categoria dentro de um anel, contagem no canto,
   nome embaixo. O anel só ganha cor quando a categoria está escolhida: fila
   inteira colorida não diz qual filtro está ligado, que é a única coisa que
   este controle precisa responder. É o erro do concorrente, onde o anel é
   laranja em todos e a barra inteira fica listrada. */
.circulo-categoria{
  flex:0 0 auto; width:76px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0; cursor:pointer;
}
/* O anel é BORDA, não fundo com recheio (no sistema é `background` com o miolo
   por cima). Assim o laranja do estado ativo pinta só o traço — 496px², que é o
   que o olho de fato recebe — em vez de um disco cheio de 62 × 62px, que na
   conta de área da tela valeria sete vezes mais. */
.circulo-categoria__anel{
  position:relative; width:62px; height:62px; border-radius:50%;
  padding:3px; border:2px solid var(--n300);
  transition:border-color .16s ease;
}
/* A foto vai sobre BRANCO, como no resto da maquete: as fotos são de catálogo
   de fábrica, com embalagem clara e fundo claro — recorte sobre preto suja o
   contorno da peça. */
.circulo-categoria__miolo{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--n0); color:var(--n500);
  display:flex; align-items:center; justify-content:center;
}
/* `cover` e não `contain`: a peça está no meio da foto e o fundo é branco —
   recortando as bordas ela ocupa o círculo inteiro, em vez de virar uma
   miniatura perdida no meio de um disco vazio. */
.circulo-categoria__miolo img{width:100%;height:100%;object-fit:cover}
.circulo-categoria__miolo svg{width:24px;height:24px}
/* A contagem responde "vale a pena entrar aqui?" antes do toque, e no canto do
   círculo ela nunca é cortada junto com o nome. */
.circulo-categoria__conta{
  position:absolute; right:-3px; bottom:-3px;
  min-width:20px; height:20px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  background:var(--n0); border:1px solid var(--n200); color:var(--n500);
  border-radius:999px; font-size:10px; font-weight:700; line-height:1;
}
/* DUAS LINHAS, e não uma com reticências: "Type-C x Type-C" e "USB x Lightning"
   cortariam justamente no que os distingue um do outro — virariam "Type-C x T…"
   e "USB x Light…" numa fila em que a diferença entre as categorias está no fim
   do nome, não no começo. */
.circulo-categoria__nome{
  max-width:76px; font-size:11px; line-height:1.25; font-weight:500;
  color:var(--n700); text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
/* `:not(--ativo)` como no resto da folha (`.filtro`, `.escada__aba`, `.opcao`):
   sem isto o hover — 3 classes de peso — vencia o estado ativo e apagava o anel
   laranja justamente do círculo que o mouse está em cima no desktop. */
.circulo-categoria:not(.circulo-categoria--ativo):hover .circulo-categoria__anel{border-color:var(--n400)}
.circulo-categoria:focus-visible{outline:2px solid var(--n900);outline-offset:3px;border-radius:12px}
/* O ativo: anel laranja. Sobre claro a versão é #B35213 — 4,47:1 contra o fundo
   da página, acima dos 3:1 que a WCAG pede de indicador de estado, e a mesma
   cor que o "Ver preço" do cartão já usa a dois centímetros dali. */
.circulo-categoria--ativo .circulo-categoria__anel{border-color:var(--laranja-forte)}
.circulo-categoria--ativo .circulo-categoria__conta{background:var(--laranja-forte);border-color:var(--laranja-forte);color:var(--n0)}
.circulo-categoria--ativo .circulo-categoria__nome{color:var(--n900);font-weight:700}
/* "Tudo" ativo não é um filtro: fica no neutro forte, exatamente como a aba de
   texto já fazia, para o laranja significar sempre que alguma coisa está
   filtrando. É também o que mantém a tela em repouso com ZERO laranja aqui. */
.circulo-categoria--tudo.circulo-categoria--ativo .circulo-categoria__anel{border-color:var(--n900)}
.circulo-categoria--tudo.circulo-categoria--ativo .circulo-categoria__conta{background:var(--n0);border-color:var(--n900);color:var(--n900)}

/* ==========================================================================
   3 · Corpo claro — a parede branca de fotos
   ========================================================================== */
.corpo-claro{
  background:var(--n100);
  padding:var(--folga) var(--vao) calc(var(--rodape-h) + var(--base) + 20px);
  min-height:60vh;
}
/* Só aparece quando há filtro: sem filtro, essa altura vira mais uma fila de fotos. */
.resumo{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 1px 7px; color:var(--n500);
}
.resumo__conta{color:var(--n700)}
.resumo__conta .num{color:var(--n900);font-weight:700}
.limpar-filtros{
  min-height:var(--alvo); display:inline-flex; align-items:center; padding:0 8px;
  color:var(--n900); font-size:12px; font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* A grade. Duas colunas a 390px — a meta de densidade da seção 6. */
.grade{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--folga);
}

/* --- cartão de descoberta: foto, categoria, nome, estado de preço --- */
.cartao{
  display:flex; flex-direction:column;
  background:var(--n0); border:1px solid var(--n200); border-radius:3px;
  overflow:hidden; position:relative;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.cartao:hover{border-color:var(--n400);box-shadow:0 2px 10px rgba(8,8,10,.09)}
.cartao:focus-within{border-color:var(--preto)}

/* A foto de fábrica fica sempre sobre branco: recorte sobre preto suja o contorno.
   A imagem é absoluta para que a proporção da moldura mande na altura do cartão —
   é dela que sai a densidade da grade. */
.cartao__moldura{
  display:block; position:relative; background:var(--n0);
  aspect-ratio:5/3; border-bottom:1px solid var(--n100);
  flex:0 0 auto; min-height:0; overflow:hidden;
}
.cartao__foto{
  position:absolute; inset:2px;
  width:calc(100% - 4px); height:calc(100% - 4px);
  object-fit:contain;
}
/* Item sem foto não ganha desenho inventado no lugar: ganha a informação de
   que não tem foto. Na Etapa 1 do plano o painel avisa antes de publicar. */
.cartao__sem-foto{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--n50); color:var(--n500); font-size:9px;
}
.cartao__selo{
  position:absolute; top:4px; left:4px;
  background:rgba(8,8,10,.86); color:var(--n0);
  padding:3px 5px; border-radius:2px; font-size:9px; letter-spacing:.1em;
}
.cartao__corpo{display:flex;flex-direction:column;flex:1;padding:5px 8px 6px}
/* O texto inteiro é um alvo só: assim o link tem sempre mais de 44px de lado. */
.cartao__texto{display:block;min-height:var(--alvo)}
.cartao__texto:hover .cartao__nome{text-decoration:underline;text-underline-offset:2px}
.cartao__categoria{display:block;color:var(--n500);font-size:9.5px;margin-bottom:3px}
.cartao__nome{
  font-size:12px; line-height:1.25; font-weight:500; color:var(--n900);
  margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:30px;
}
/* O código sobe para junto da categoria: e onde o lojista confere o SKU, e
   assim a linha alinha entre cartoes vizinhos em vez de boiar sob nomes curtos. */
.cartao__codigo{display:block;color:var(--n700);font-size:10px;line-height:1.3;margin-bottom:4px}
.cartao__portao{margin-top:auto;padding-top:4px}
/* E o estado honesto que substitui o preco — a ideia inteira do projeto.
   Nao pode ser o menor texto do cartao. */
.cartao__rotulo{
  display:block; color:var(--n700); font-size:10px; line-height:1.2;
  margin-bottom:4px; letter-spacing:.1em;
}

/* A chave que abre o preço, repetida em cada um dos ~150 cartões. Ela fica em
   contorno de propósito: em contagem alta, preencher vira parede listrada.
   #B35213 sobre branco da 5,08:1 — a única versão do laranja sobre claro. */
.botao-preco{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:var(--alvo);
  background:var(--n0); color:var(--laranja-forte);
  border:1px solid var(--laranja-forte);
  font-size:13px; font-weight:600; letter-spacing:-.005em;
  border-radius:2px; cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease,transform .08s ease;
}
/* O laranja cheio so no toque: a chave mostra a cor saturada quando e usada. */
.botao-preco:hover{background:var(--preto);color:var(--laranja);border-color:var(--preto)}
.botao-preco:active{transform:translateY(1px)}
.botao-preco svg{width:14px;height:14px;flex:0 0 auto}

/* Carregar mais — nunca rolagem infinita: no 4G a conta de dados é do lojista. */
.carregar{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 0 4px}
.botao-carregar{
  min-height:48px; min-width:220px; padding:0 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--n0); color:var(--n900);
  border:1px solid var(--n900); border-radius:2px;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.botao-carregar:hover{background:var(--preto);color:var(--n0)}
.carregar__conta{color:var(--n500);font-size:11.5px}

/* Estado vazio da busca. */
.vazio{
  grid-column:1/-1; text-align:center; padding:44px 16px;
  background:var(--n0); border:1px dashed var(--n300); border-radius:3px;
}
.vazio__titulo{font-size:16px;font-weight:600;margin:0 0 6px}
.vazio__texto{color:var(--n500);font-size:13px;margin:0 auto;max-width:34ch}
.vazio__acao{margin-top:14px}
/* Quando o catálogo não chega, a tela diz como resolver em vez de inventar
   produto: esta maquete não tem cópia de reserva de dado nenhum. */
.vazio--falha{border-style:solid;border-color:var(--n900);background:var(--n0)}
.vazio__dica{
  color:var(--n700); font-size:13px; line-height:1.6;
  margin:10px auto 0; max-width:46ch;
}
.vazio__dica code,.vazio__texto code{
  background:var(--preto); color:var(--n0);
  padding:2px 6px; border-radius:2px; font-size:12.5px;
}

/* Esqueleto de carregamento — o que aparece enquanto o catálogo não chegou. */
.esqueleto{background:var(--n0);border:1px solid var(--n200);border-radius:3px;overflow:hidden}
.esqueleto__foto{aspect-ratio:5/3;background:var(--n100)}
.esqueleto__linha{height:9px;margin:8px;background:var(--n100);border-radius:2px}
.esqueleto__linha--curta{width:45%}
.esqueleto__botao{height:var(--alvo);margin:8px;background:var(--n100);border-radius:2px}
.pulsando{animation:pulsar 1.1s ease-in-out infinite}
@keyframes pulsar{0%,100%{opacity:1}50%{opacity:.55}}

/* ==========================================================================
   3b · Modo catálogo pequeno — entra sozinho abaixo de 20 itens
   A grade densa foi desenhada e medida para um catálogo que vai crescer. Com
   os 8 itens que o dono publicou hoje ela deixa três quartos da tela vazios,
   e o site parece quebrado justamente no dia da estreia. Não é um segundo
   desenho: é a mesma folha e o mesmo cartão com um limiar — foto maior,
   cartão maior, menos colunas, mais respiro. Passando de 20 itens, tudo volta
   à densidade que já foi medida, sem redesenho e sem decisão nova.
   ========================================================================== */
.catalogo-pequeno{--folga:14px}
.catalogo-pequeno .cartao__moldura{aspect-ratio:4/3}
.catalogo-pequeno .esqueleto__foto{aspect-ratio:4/3}
.catalogo-pequeno .cartao__corpo{padding:9px 12px 11px}
.catalogo-pequeno .cartao__categoria{font-size:10px;margin-bottom:4px}
.catalogo-pequeno .cartao__codigo{font-size:11px;margin-bottom:6px}
.catalogo-pequeno .cartao__nome{font-size:13.5px;min-height:34px}
.catalogo-pequeno .cartao__rotulo{font-size:10px;margin-bottom:6px}
.catalogo-pequeno .cartao__portao{padding-top:6px}
.catalogo-pequeno .carregar{padding-top:30px}
/* No celular continuam duas colunas de propósito: uma coluna só devolveria o
   "um produto por tela" que a densidade existe para resolver. O que cresce a
   390px é a foto e o respiro, não a rolagem. */
@media (min-width:520px){
  .catalogo-pequeno .grade,.catalogo-pequeno .fundo-vitrine .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:720px){
  .catalogo-pequeno .grade,.catalogo-pequeno .fundo-vitrine .grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
  .catalogo-pequeno .grade,.catalogo-pequeno .fundo-vitrine .grade{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1500px){
  .catalogo-pequeno .grade,.catalogo-pequeno .fundo-vitrine .grade{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ==========================================================================
   4 · A única barra fixa da tela — nunca empilhar outra
   ========================================================================== */
.rodape-fixo{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background-color:var(--preto); background-image:var(--grao);
  border-top:1px solid var(--carvao);
  padding-bottom:var(--base);
}
.rodape-fixo__linha{
  display:flex; align-items:center; gap:10px;
  height:var(--rodape-h); padding:0 var(--vao);
}
.rodape-fixo__texto{flex:1;min-width:0}
.rodape-fixo__titulo{font-size:12.5px;font-weight:600;color:var(--n0);line-height:1.2}
.rodape-fixo__apoio{font-size:10.5px;color:var(--n400);line-height:1.3;margin-top:2px}

/* Botões */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--alvo); min-width:var(--alvo); padding:0 16px;
  border-radius:2px; font-size:13.5px; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:background .12s ease,color .12s ease,border-color .12s ease;
}
/* Hierarquia em dois niveis, e ela existe por causa do celular, onde :hover nao
   acontece: o botao repetido nos ~150 cartoes da grade (.botao-preco) fica em
   contorno, senao a parede branca de fotos vira parede listrada de laranja; ja
   o botao unico por tela — o funil — e preenchido em repouso. Sao um por tela,
   nao cento e cinquenta, entao nenhuma superficie grande laranja aparece.
   Todos os .botao--laranja vivem sobre preto: #E06618 com texto #08080A da
   5,80:1, o par que o brief mediu e autorizou. */
.botao--laranja{background:var(--laranja);color:var(--preto);border:2px solid var(--laranja)}
/* No toque ele inverte para a outra ponta da mesma tabela — #E06618 sobre
   #08080A, tambem 5,80:1. O repouso ja e cheio, entao nada depende de :hover. */
.botao--laranja:hover,.botao--laranja:active{background:var(--preto);color:var(--laranja);border-color:var(--laranja)}
.botao--claro{background:var(--n0);color:var(--preto)}
.botao--claro:hover{background:var(--n200)}
.botao--fantasma{border:1px solid var(--fumaca);color:var(--n0)}
.botao--fantasma:hover{border-color:var(--n400);background:var(--carvao)}
.botao--contorno{border:1px solid var(--n900);color:var(--n900);background:var(--n0)}
.botao--contorno:hover{background:var(--preto);color:var(--n0)}
/* display:flex (e nao inline-flex) para que margin auto realmente centre. */
.botao--grande{display:flex;min-height:56px;font-size:15.5px;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
.botao svg{width:15px;height:15px;flex:0 0 auto}
/* Estado travado precisa se ver, nao so se ler: sem isto o botao continuava
   laranja pleno com cursor de mao — um convite para um clique que nao faz nada. */
.botao[disabled],.botao-carregar[disabled]{
  background:var(--carvao); color:var(--n400);
  border:1px solid var(--fumaca); cursor:not-allowed; box-shadow:none;
}
.botao[disabled]:hover,.botao-carregar[disabled]:hover{background:var(--carvao);color:var(--n400)}

/* ==========================================================================
   5 · Ficha do produto (produto.html)
   ========================================================================== */
.migalha{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:2px 0 8px; color:var(--n500);
}
.migalha__volta{
  min-height:var(--alvo); display:inline-flex; align-items:center; gap:6px;
  padding:0 8px 0 0; color:var(--n700); font-size:12.5px; font-weight:600;
}
.migalha__volta:hover{color:var(--preto)}
.migalha__volta svg{width:14px;height:14px}
.migalha__aqui{font-size:11px;color:var(--n500)}

.ficha{display:grid;gap:14px}
.ficha__visual{background:var(--n0);border:1px solid var(--n200);border-radius:3px;padding:10px}
/* So existe uma foto por produto, ja no tamanho nativo. Miniatura unica e um
   "Ampliar" que nao amplia prometiam o que nao havia; no lugar deles, a
   procedencia da foto, que e informacao de verdade. */
.ficha__palco{background:var(--n0);aspect-ratio:5/3;display:flex;align-items:center;justify-content:center}
.ficha__palco img{max-height:100%;object-fit:contain}
.ficha__legenda{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:9px; padding-top:9px; border-top:1px solid var(--n100);
  color:var(--n500);
}

.ficha__texto{display:flex;flex-direction:column;gap:10px}
.ficha__codigo{color:var(--n700);font-size:11px}
.ficha__nome{font-size:23px;line-height:1.15;font-weight:600;letter-spacing:-.02em;margin:0}
.ficha__spec{color:var(--n700);font-size:14px;margin:0;line-height:1.5}
/* Flex elastico em vez de grade fixa: com tres atributos, qualquer numero de
   colunas fechado deixava uma celula cinza vazia ao lado do portao. */
.atributos{display:flex;flex-wrap:wrap;gap:1px;background:var(--n200);border:1px solid var(--n200);border-radius:3px;overflow:hidden}
.atributo{flex:1 1 132px;min-width:0;background:var(--n0);padding:9px 10px}
.atributo__chave{color:var(--n500);font-size:9.5px;margin-bottom:4px}
.atributo__valor{font-size:13px;font-weight:600;color:var(--n900)}

/* Etiquetas de disponibilidade */
.etiqueta{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 7px; border-radius:2px; font-size:9px; letter-spacing:.1em;
}
.etiqueta--pronta{background:var(--n100);color:var(--n700)}
.etiqueta--remessa{background:var(--laranja-fraco);color:var(--laranja-forte)}
.etiqueta--ilustrativa{background:var(--n100);color:var(--n500)}
.etiqueta--escura{background:var(--carvao);color:var(--n300)}
.ponto{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* O portão dentro da ficha: bloco preto no lugar do preço. */
.portao{
  background-color:var(--preto); background-image:var(--grao); color:var(--n0);
  border-radius:3px; padding:16px;
}
.portao__rotulo{color:var(--n400);margin-bottom:10px;font-size:9.5px}
.portao__titulo{
  font-size:clamp(28px,6.6vw,32px); font-weight:300;
  letter-spacing:-.025em; margin:0 0 8px; line-height:1.12;
}
.portao__linha{color:var(--n300);font-size:13px;margin:0 0 14px;line-height:1.5}
.portao__saida{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; max-width:340px; margin:10px auto 0; min-height:48px;
  border:1px solid var(--fumaca); border-radius:2px;
  color:var(--n300); font-size:13.5px; font-weight:600;
  transition:color .12s ease,border-color .12s ease;
}
.portao__saida:hover{color:var(--n0);border-color:var(--n500)}
.portao__saida svg{width:15px;height:15px;flex:0 0 auto}

.secao{margin-top:26px}
.secao__cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--n200);margin-bottom:11px}
.secao__titulo{font-size:13px;font-weight:600;letter-spacing:-.01em;margin:0}
.secao__conta{color:var(--n500);font-size:11px}

/* ==========================================================================
   6 · Tela do código (codigo.html)
   ========================================================================== */
.laboratorio{
  background-color:var(--preto); background-image:var(--grao); color:var(--n0);
  border-bottom:1px solid var(--carvao); position:sticky; top:0; z-index:60;
  padding-top:var(--topo);
}
.laboratorio__linha{
  display:flex; align-items:center; gap:6px; padding:5px var(--vao);
  overflow-x:auto; scrollbar-width:none;
}
.laboratorio__linha::-webkit-scrollbar{display:none}
.laboratorio__linha>*{flex:0 0 auto}
.laboratorio__chave{color:var(--n400);font-size:9.5px;margin-right:2px}
.opcao{
  min-height:var(--alvo); min-width:var(--alvo); padding:0 10px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--fumaca); border-radius:2px;
  font-size:12.5px; font-weight:600; color:var(--n300); cursor:pointer;
  transition:all .12s ease;
}
.opcao:not(.opcao--ativa):hover{color:var(--n0);border-color:var(--n500)}
.opcao--ativa{background:var(--n0);color:var(--preto);border-color:var(--n0)}

.palco-codigo{position:relative;min-height:calc(100vh - 120px)}

/* Fundo: a vitrine continua atrás, e é ela que mostra o quanto a barra
   interrompe — que é pouco, e esse é o argumento inteiro da variante. */
.fundo-vitrine{padding:var(--folga) var(--vao) 190px;background:var(--n100)}
.fundo-vitrine .grade{grid-template-columns:repeat(2,minmax(0,1fr))}

/* A barra fixa — a única variante do portão que sobrou.
   As variantes A (folha que sobe) e B (tela cheia) saíram em 18/08/2026: o dono
   decidiu que colocar o código não transfere de página, e as duas transferiam
   a atenção para fora do catálogo. O CSS delas saiu junto, senão a folha ficaria
   documentando telas que não existem mais. */
.barra-codigo{
  position:fixed; left:0; right:0; bottom:0; z-index:75;
  background-color:var(--preto); background-image:var(--grao); color:var(--n0);
  border-top:1px solid var(--fumaca); padding:6px var(--vao) calc(6px + var(--base));
}
.barra-codigo__miolo{display:flex;flex-direction:column;gap:4px}
.barra-codigo__linha{display:flex;align-items:center;gap:8px}
/* Aqui o campo e 56px de proposito: e o toque mais importante do site. */
.barra-codigo .campo-codigo{flex:1;min-width:0;max-width:320px;font-size:20px;letter-spacing:.08em;padding:0 12px}
.barra-codigo .botao{min-height:56px}
.barra-codigo__pe{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--alvo)}
.barra-codigo__frase{min-width:0;font-size:11.5px;color:var(--n400);line-height:1.35}
/* Depois do aceite a barra carrega duas coisas: a saída do balcão compartilhado
   e o caminho para o contador. Ficam juntas à direita, com pesos diferentes —
   botão e link sublinhado — para não competirem pelo mesmo toque. */
.barra-codigo__acoes{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.barra-codigo__saida{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:var(--alvo); min-width:var(--alvo); padding:0 8px;
  color:var(--n300); font-size:12px; font-weight:600; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px;
}
.barra-codigo__saida:hover{color:var(--n0)}
.barra-codigo__saida svg{width:14px;height:14px}
/* Sem tamanho explicito o icone de "certo" do estado aceito estourava para
   316px — 43% da tela — e cobria justamente a grade que ele revela. E ele leva
   o verde da familia .recado--aceito para se ler como confirmacao num relance. */
.barra-codigo__frase svg{width:14px;height:14px;flex:0 0 auto;vertical-align:-2px;color:#A9E7C4}
/* A barra de confirmacao guarda a altura da barra que ela substitui: sem isto
   ela encolhia de 69px para 57px no instante do aceite e a vitrine inteira
   pulava 12px para baixo — justo no quadro em que o lojista procura o preco
   que acabou de nascer nos cartoes. */
.barra-codigo--aceita .barra-codigo__pe{min-height:56px}
.barra-codigo .recado{margin:0 0 5px;padding:6px 9px;font-size:11.5px;line-height:1.35}
.barra-codigo .recado svg{width:14px;height:14px}

/* Campo do código — é o toque mais importante do site: 56px. */
.campo-codigo{
  width:100%; height:56px; padding:0 14px;
  background:var(--carvao); color:var(--n0);
  border:1px solid var(--fumaca); border-radius:3px;
  font-family:var(--mono); font-weight:700; font-size:24px; letter-spacing:.12em;
  text-transform:uppercase;
}
.campo-codigo::placeholder{color:var(--n400);letter-spacing:.12em;opacity:1}
.campo-codigo:focus{border-color:var(--laranja);background:var(--grafite)}
.campo-codigo--erro{border-color:var(--erro);background:var(--erro-fundo);box-shadow:0 0 0 1px var(--erro)}
.campo-codigo[disabled]{
  background:var(--preto); color:var(--n500);
  border-style:dashed; border-color:var(--fumaca); cursor:not-allowed;
}
.campo-codigo[disabled]::placeholder{color:var(--n500)}

/* Recados de estado */
.recado{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 11px; border-radius:3px; margin-top:12px;
  font-size:12.5px; line-height:1.45;
}
.recado svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.recado--erro{background:var(--erro-fundo);color:var(--erro-texto);border:1px solid var(--erro-borda)}
.recado--travado{background:var(--carvao);color:var(--n300);border:1px solid var(--fumaca)}
.recado--aceito{background:#10241A;color:#A9E7C4;border:1px solid #1E4430}

.sair{
  min-height:var(--alvo); min-width:var(--alvo);
  display:inline-flex; align-items:center; justify-content:center; padding:0 12px;
  color:var(--n400); font-size:12px; font-weight:500; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px;
}
.sair:hover{color:var(--n0)}

/* ==========================================================================
   7 · Vitrine liberada (liberada.html)
   ========================================================================== */
/* A `.tarja-loja` que ficava no bloco grudado saiu em 18/08/2026: a
   identificação passou para o canto direito do cabeçalho (`.cabecalho__loja`),
   e dizer "estou identificado" em dois lugares na mesma tela gastava altura
   para repetir a mesma informação. */

/* --- cartão completo: escada de quantidade, contador, conta --- */
.cartao--completo .cartao__nome{-webkit-line-clamp:2}
.preco{display:flex;align-items:baseline;gap:6px;margin-top:6px;flex-wrap:wrap;min-height:28px}
.preco__valor{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:20px; font-weight:700; color:var(--laranja-forte); letter-spacing:-.03em;
}
.preco__antes{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--n500); text-decoration:line-through;
}
.preco__unidade{flex:0 0 100%;font-size:9.5px;color:var(--n500);margin-top:1px}

/* Escada de quantidade em 2x2: garante 44px de lado mesmo no cartão de 390px. */
.escada{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--n200); border:1px solid var(--n200);
  border-radius:2px; overflow:hidden; margin-top:7px;
}
.escada__aba{
  min-width:0; min-height:var(--alvo);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:3px 1px; background:var(--n50); cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.escada__aba:not(.escada__aba--ativa):hover{background:var(--n100)}
.escada__faixa{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--n500);letter-spacing:-.02em}
.escada__preco{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--n900);letter-spacing:-.03em}
.escada__aba--ativa{background:var(--preto)}
.escada__aba--ativa .escada__faixa{color:var(--n400)}
.escada__aba--ativa .escada__preco{color:var(--laranja)}

.contador{display:flex;align-items:stretch;margin-top:7px;border:1px solid var(--n200);border-radius:2px;overflow:hidden}
.contador__botao{
  width:48px; min-height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--n50); color:var(--n900); cursor:pointer; flex:0 0 auto;
  transition:background .12s ease;
}
.contador__botao:hover{background:var(--n200)}
/* --n400 sobre --n50 dava 2,51:1 — o "menos" desabilitado sumia. --n500 continua
   claramente apagado ao lado do --n900 do estado ativo, mas se ve. */
.contador__botao:disabled{color:var(--n500);cursor:not-allowed;background:var(--n50)}
.contador__botao svg{width:14px;height:14px}
.contador__valor{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:700; background:var(--n0);
  border-left:1px solid var(--n200); border-right:1px solid var(--n200);
}
.cartao--no-pedido{border-color:var(--preto)}
.cartao__conta{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px;
  margin-top:6px; padding-top:6px; border-top:1px dashed var(--n200);
}
.cartao__conta-chave{font-size:9px;color:var(--n500);letter-spacing:.1em}
.cartao__conta-valor{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}

/* Rodapé do pedido */
.pedido{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background-color:var(--preto); background-image:var(--grao); color:var(--n0);
  border-top:1px solid var(--carvao); padding-bottom:var(--base);
}
.pedido__regua{padding:9px var(--vao) 0}
.pedido__regua-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.pedido__meta{font-size:11.5px;color:var(--n300)}
.pedido__meta strong{color:var(--n0);font-weight:600}
.pedido__ganho{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--n0)}
.barra-progresso{position:relative;height:6px;background:var(--carvao);border-radius:3px;overflow:visible}
/* Era uma vareta laranja de 749px atravessando a tela. Branca, ela continua
   legivel sobre o preto e devolve o laranja aos quatro lugares combinados. */
.barra-progresso__cheio{position:absolute;inset:0 auto 0 0;background:var(--n0);border-radius:3px;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.barra-progresso__corte{position:absolute;top:-3px;width:1px;height:12px;background:var(--n500)}
/* Rotulo no prumo do proprio traco: antes eram 88px de desencontro a 1180px. */
.pedido__cortes{position:relative;height:15px;margin-top:6px}
/* 10,5px e não 9px: a 9px o "5" de "R$ 200 · 5%" vira "9" na tela do balcão. */
.pedido__corte{
  position:absolute; top:0; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; color:var(--n400); letter-spacing:-.01em;
}
.pedido__corte--inicio{left:0;transform:none}
.pedido__corte--fim{left:auto;right:0;transform:none}
.pedido__corte--batido{color:var(--n0);font-weight:700}
/* A linha que substitui a régua quando o desconto vale para qualquer pedido. */
.pedido__nota{margin:0;padding:9px var(--vao) 0;font-size:11.5px;color:var(--n300)}
.pedido__nota strong{color:var(--n0);font-weight:600}
.pedido__linha{display:flex;align-items:center;gap:8px;padding:8px var(--vao);min-height:var(--rodape-h)}
.pedido__resumo{flex:1;min-width:0}
.pedido__pecas{font-size:10.5px;color:var(--n400);letter-spacing:.08em}
.pedido__total{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;color:var(--n0);letter-spacing:-.03em;line-height:1.15}
.pedido__acoes{display:flex;gap:6px;flex:0 0 auto}

.salvo{
  position:fixed; left:50%; transform:translateX(-50%); z-index:80;
  bottom:calc(var(--rodape-h) + 68px + var(--base));
  display:inline-flex; align-items:center; gap:6px;
  background:var(--carvao); color:var(--n0); border:1px solid var(--fumaca);
  border-radius:2px; padding:7px 11px; font-size:11px; font-weight:500;
  pointer-events:none; opacity:0; transition:opacity .25s ease,transform .25s ease;
}
.salvo svg{width:12px;height:12px;color:var(--n0)}
.salvo--visivel{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ==========================================================================
   8 · Entrada em cascata — um momento de movimento, não vinte
   ========================================================================== */
.entra{animation:entrar .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes entrar{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   9 · Larguras maiores — a grade sobe até seis colunas
   ========================================================================== */
@media (min-width:520px){
  .grade,.fundo-vitrine .grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:720px){
  :root{--vao:16px}
  /* A barra C cabe numa linha so quando ha largura: frase a esquerda, campo e
     botao a direita — que e o que "barra que nao interrompe" quer dizer. */
  .barra-codigo__miolo{flex-direction:row;align-items:center;gap:16px;max-width:1120px;margin:0 auto}
  .barra-codigo__pe{flex:1;justify-content:flex-start;gap:16px}
  .barra-codigo__linha{flex:0 0 auto}
  .grade,.fundo-vitrine .grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ficha{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
}
@media (min-width:900px){
  :root{--vao:24px;--folga:10px}
  .grade,.fundo-vitrine .grade{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* No desktop os círculos crescem junto com o resto — a fila continua sendo o
     primeiro elemento navegável, e ali sobra largura. */
  .faixa-categorias{--fila-vao:12px;padding:12px 0 14px var(--vao)}
  .circulo-categoria{width:88px}
  .circulo-categoria__anel{width:72px;height:72px}
  .circulo-categoria__miolo svg{width:28px;height:28px}
  .circulo-categoria__nome{max-width:88px;font-size:11.5px}
  /* No desktop o cabeçalho inteiro fica fixo e a busca sobe para dentro dele. */
  .cabecalho{position:sticky;top:0}
  .cabecalho__linha{height:64px;gap:18px}
  .cabecalho__marca img{height:26px}
  .cabecalho__busca-desktop{display:block;max-width:520px}
  .cabecalho__busca-desktop .busca{padding:0}
  .busca--celular{display:none}
  .grude{top:64px}
  /* O fio laranja marca o FIM do bloco preto, e o bloco preto acaba em lugares
     diferentes conforme a largura: no celular a busca mora no bloco grudado, e
     é ele quem termina; no desktop a busca sobe para o cabeçalho e o bloco
     grudado fica sem nenhum filho visível — com o fio nele sobraria um traço
     laranja de 2px flutuando sobre a parede branca, sem nada em cima. */
  .grude.fio-marca{border-bottom:0}
  .cabecalho{border-bottom:2px solid var(--laranja)}
  .cabecalho__frase{flex:0 1 auto;margin:0;order:0}
  .cabecalho__acao{order:1}
  .painel--celular{display:none}
  .filtros-desktop{display:flex}
  .corpo-claro{padding-top:12px}
  .esconde-desktop{display:none}
}
@media (min-width:1100px){
  .grade,.fundo-vitrine .grade{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ficha__nome{font-size:28px}
}
@media (min-width:1500px){
  .grade,.fundo-vitrine .grade{grid-template-columns:repeat(7,minmax(0,1fr))}
  .corpo-claro,.cabecalho__linha,.grude>*,.faixa-categorias,.rodape-fixo__linha,.pedido__linha,.pedido__regua{max-width:1680px;margin-left:auto;margin-right:auto}
}
@media (max-width:899px){
  .esconde-celular{display:none}
}
.so-largo{display:none}
@media (min-width:420px){.so-largo{display:inline}}