/* ALUMINAÇO — ajustes do catálogo v2:
   - a grade de botões de família/categoria saiu (virou o mega-menu do topo)
   - o layout vira coluna única e cheia -> muito melhor no celular
   - trilha do filtro ativo (.cat-crumb) no lugar dos botões
   ------------------------------------------------------------------ */

/* mata a antiga grade de botões, se sobrar algum resquício no HTML */
.cat-fams,.cat-subs{display:none !important}

/* layout agora é coluna única */
.cat-layout{display:block}

/* ---------- trilha / cabeçalho do resultado ---------- */
.cat-crumb{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:18px;
  border:1px solid var(--line);border-radius:var(--rad);background:var(--card)
}
.cc-h{font:800 17px/1.1 var(--fhead);color:var(--ink)}
.cc-s{font:500 13px/1.45 var(--fbody);color:var(--muted);flex:1 1 320px;min-width:0}
.cc-s b{color:var(--alu)}
.cc-path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13.5px/1.3 var(--fhead);color:var(--ink);min-width:0}
.cc-path a{color:var(--muted)}
.cc-path a:hover{color:var(--red)}
.cc-sep{color:var(--steel);margin:0 2px}
.cc-all,.cc-clear{
  flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:100px;padding:9px 16px;font:600 12.5px/1 var(--fhead);cursor:pointer;transition:.2s;
  min-height:40px
}
.cc-all:hover,.cc-clear:hover{border-color:var(--red);color:var(--red)}
.cc-all:focus-visible,.cc-clear:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- grade de produtos ---------- */
.cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px
}
.cat-grid .pcard{width:auto;flex:initial}
.pcard.noimg .thumb img{display:none}

/* =========================================================================
   "SEM FOTO" — 6.764 de 10.032 itens (67%) hoje.
   -------------------------------------------------------------------------
   Isto era um gradiente vermelho vazio, desenhado pra ser exceção rara. Virou
   a MAIORIA do catálogo no dia em que o filtro de foto caiu. Um vazio vermelho
   repetido 6.764 vezes parece erro de carregamento — e faria a escolha certa do
   Lauro ("sem foto" > foto errada) ter cara de site quebrado.

   Agora tem ícone e diz o que é. Discreto de propósito: não compete com o card
   que TEM foto ao lado, e não grita "faltando" — só informa. A foto chega depois,
   sozinha, quando ele cadastrar no ERP.
   ========================================================================= */
.nofoto{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--red) 7%,var(--card)),var(--card));
  color:var(--steel)
}
.nofoto svg{width:30px;height:30px;opacity:.55;stroke-linecap:round;stroke-linejoin:round}
.nofoto i{
  font:600 9.5px/1 var(--fhead);letter-spacing:.14em;text-transform:uppercase;
  font-style:normal;opacity:.7
}
/* dentro do modal a peça é grande: o ícone acompanha */
.mimg.noimg{position:relative;min-height:230px}
.mimg.noimg .nofoto svg{width:46px;height:46px}
.mimg.noimg .nofoto i{font-size:11px}
@media(max-width:820px){
  .nofoto svg{width:24px;height:24px}
  .nofoto i{font-size:8.5px;letter-spacing:.1em}
}
.cat-count{color:var(--muted);font:600 12.5px/1 var(--fhead);letter-spacing:.04em;margin-bottom:14px}

/* =========================================================================
   RESERVA DA GRADE DA LOJA (Corte Fino) — .lj-sk
   -------------------------------------------------------------------------
   MEDIDO: CLS 0,4350 no PC. A grade chegava aos 343ms e o rodapé pulava 526px.
   Mesma doença da locação, mesmo remédio: 85 esqueletos no HTML, reserva por
   ITEM (não min-height no container — a grade é 4 colunas a 1440 e 2 no 390;
   valor fixo acerta uma largura e erra as outras).

   O loja.html/loja.js eram de outra sessão e não estavam na minha árvore.
   Assumidos em 17/07 com ritual: baixei o que estava no ar (não presumi
   conteúdo), backup, hash-lock, als.js preservado, e MUDANÇA CIRÚRGICA — só o
   CLS. Nada de "melhorar de passagem": se alguém voltar nesse arquivo, um
   ajuste pontual se reconcilia; um refactor, não.
   O CSS mora aqui porque a loja.html já carrega o catalog-extra.css — não
   precisou de arquivo novo nem de tocar no loja.js.
   Card medido: 468px no PC, 353px no 390. 85 produtos.
   ========================================================================= */
.lj-sk{display:block;min-height:468px;border-radius:12px;background:var(--card);
       border:1px solid var(--line);opacity:.4}
@media(max-width:820px){.lj-sk{min-height:353px}}
@media(prefers-reduced-motion:no-preference){
  .lj-sk{animation:ljsk 1.4s ease-in-out infinite alternate}
  @keyframes ljsk{from{opacity:.26}to{opacity:.5}}
}

/* =========================================================================
   CARD DE MODELO (agrupamento por variante)
   311 calçados soltos -> 41 cards. O card mostra a FAIXA de numeração porque
   é o que o cliente precisa saber pra clicar: "o meu 42 está aí dentro?".
   (Isto NÃO contradiz o "tira os números" do Lauro: aquilo era sobre o MENU,
   que é navegação. Aqui é o produto.)
   ========================================================================= */
.gvar{
  display:block;margin-top:5px;
  font:500 11.5px/1.35 var(--fbody);color:var(--steel)
}
.gvar b{color:var(--red);font-weight:700}

/* o seletor de numeração dentro do modal */
.gnums{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.gnum{
  min-width:46px;min-height:44px;                 /* alvo de toque no celular */
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);text-decoration:none;
  font:700 14px/1 var(--fhead);transition:.14s
}
.gnum:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 16%,var(--card))}
.gnum:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gcod{font:500 11.5px/1.4 var(--fbody);color:var(--steel);margin:0}
@media(max-width:820px){
  .gnum{min-width:52px}      /* dedo, não mouse */
  .gvar{font-size:12px}
}

/* ---------- MOBILE primeiro ---------- */
@media (max-width:820px){
  .cat-crumb{padding:12px 14px;gap:10px}
  .cc-h{font-size:16px;flex:1 1 100%}
  .cc-s{flex:1 1 100%;font-size:12.5px}
  .cc-all,.cc-clear{width:100%;justify-content:center}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard .thumb{height:132px}
  .pcard .pname{font-size:12.5px}
}
@media (max-width:380px){
  .cat-grid{gap:10px}
  .pcard .thumb{height:118px}
}

/* =========================================================================
   RESERVA DE ESPAÇO — mata o layout shift (CLS) da vitrine
   -------------------------------------------------------------------------
   O .cat-grid nascia vazio ("Carregando produtos…") e aos ~620ms os 24 cards
   entravam de uma vez, empurrando o rodapé pra baixo: CLS 0.46 no desktop —
   4,6x o limite do Google (0.1), sozinho. Isso é ruim pro Core Web Vitals e é
   ruim pro cliente, que clica onde a coisa estava e ela pulou.
   A classe .pre reserva a altura que os cards VÃO ocupar; o catalog.js tira ela
   depois de renderizar. Como o espaço já estava lá, nada empurra nada.
   ========================================================================= */
/* A reserva é PADRÃO do CSS, não classe que o JS adiciona.
   1ª tentativa: o JS punha .pre no load -> antes dele rodar o espaço não
   existia, e ADICIONAR a reserva já empurrava o rodapé (0.375 de CLS só nisso).
   A reserva tem que valer no PRIMEIRO PAINT. O JS só a REMOVE, depois que os
   cards já ocuparam o lugar — remover não empurra ninguém. */
.cat-grid{min-height:1160px}
.cat-grid.pronto{min-height:0}
@media(max-width:820px){.cat-grid{min-height:1900px}}
@media(max-width:380px){.cat-grid{min-height:1700px}}