/* Categorias — 17/10/2026: menu uniforme, Kits em destaque, barra "Todos" e faixa com fotos */
/* 1) menu do topo: todos os ícones de traço, mesma cor; ativo em vermelho */
nav.cats .catitem{--accent:#D11F26 !important;--accent-bg:rgba(209,31,38,.14) !important}
nav.cats .catitem .ci{color:#9aa4ae}
nav.cats .catitem .ci svg{width:34px;height:34px;stroke-width:1.6}
nav.cats .catitem .ci img{display:none}
nav.cats .catitem:hover .ci{color:#FF8C3D}
nav.cats .catitem.active .ci{color:#D11F26}
/* 2) Kits em destaque */
nav.cats .catitem.cat-destaque .ci,nav.cats .catitem.cat-destaque .clabel{color:#FFC83D}
nav.cats .catitem.cat-destaque.active::after{background:#FFC83D;box-shadow:0 0 14px -2px #FFC83D}
/* 3) barra "Todos" */
.megatodos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 22px}
.megatodos-col{display:flex;flex-direction:column;gap:2px}
.megatodos-topo{font:800 13.5px 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.3px;color:var(--ink);cursor:pointer;
  padding:6px 8px;border-radius:8px;border-bottom:2px solid var(--line);margin-bottom:4px;display:flex;justify-content:space-between;gap:8px}
.megatodos-topo:hover{color:var(--red)}
.megatodos-topo.destaque{color:#B8860B;border-bottom-color:#FFC83D}
.megatodos-sub{font-size:13.5px;color:var(--ink);cursor:pointer;padding:5px 8px;border-radius:7px;display:flex;justify-content:space-between;gap:8px}
.megatodos-sub:hover,.megatodos-sub.active{background:var(--concrete);color:var(--red)}
.megatodos-topo span,.megatodos-sub span{font:500 11.5px 'IBM Plex Sans',sans-serif;color:var(--ink-soft)}
/* 4) faixa "Compre por categoria" */
.cpc{max-width:1180px;margin:18px auto 4px;padding:0 20px}
.cpc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cpc-head h2{font:800 17px 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.3px;margin:0;color:var(--ink)}
.cpc-head h2::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:middle}
.cpc-setas{display:flex;gap:6px}
.cpc-setas button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:18px;cursor:pointer;line-height:1}
.cpc-setas button:hover{border-color:var(--ink);background:#fff}
.cpc-trilho{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:none}
.cpc-trilho::-webkit-scrollbar{display:none}
.cpc-item{flex:0 0 120px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0;color:var(--ink)}
.cpc-item:hover{background:none}
.cpc-circ{width:110px;height:110px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:.18s;box-shadow:0 4px 14px -8px rgba(0,0,0,.25)}
.cpc-circ img{width:76%;height:76%;object-fit:contain}
.cpc-item:hover .cpc-circ{border-color:var(--red);transform:translateY(-3px)}
.cpc-nome{font:700 12.5px 'IBM Plex Sans',sans-serif;text-align:center;line-height:1.25;max-width:118px}
.cpc-qtd{font-size:11px;color:var(--ink-soft);margin-top:-3px}
@media(max-width:640px){
  .cpc{padding:0 12px;margin-top:14px}
  .cpc-setas{display:none}
  .cpc-item{flex-basis:88px}
  .cpc-circ{width:80px;height:80px}
  .cpc-nome{font-size:11.5px;max-width:88px}
}

/* foto da própria categoria: preenche o círculo */
.cpc-circ.cheia img{width:100%;height:100%;object-fit:cover}

/* 17/10/2026 (print do Carlos): círculo → cartão retangular de cantos arredondados.
   A foto cabe inteira (sem cortar nas bordas) e o nome fica dentro do cartão. */
.cpc-trilho{gap:12px;scroll-padding-left:2px}
.cpc-item{flex:0 0 150px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 10px 12px;gap:4px;
  box-shadow:0 4px 14px -10px rgba(0,0,0,.3);transition:.18s}
.cpc-item:hover{background:#fff;border-color:var(--red);transform:translateY(-3px);box-shadow:0 10px 22px -12px rgba(0,0,0,.35)}
.cpc-circ{width:100%;height:110px;border-radius:10px;border:none;box-shadow:none;background:#fff;transform:none !important}
.cpc-item:hover .cpc-circ{transform:none}
.cpc-circ img{width:100%;height:100%;object-fit:contain}
.cpc-circ.cheia{background:#f6f5f1}
.cpc-circ.cheia img{object-fit:contain}
.cpc-nome{max-width:100%;margin-top:4px}
@media(max-width:640px){
  .cpc-item{flex-basis:112px;padding:8px 8px 10px}
  .cpc-circ{width:100%;height:80px}
  .cpc-nome{max-width:100%}
}

/* 17/10/2026 (2º print): foto inteira no cartão. Com a caixa em "grid", a altura 100% da
   imagem não valia e ela era esticada na largura e cortada em cima/embaixo (fotos altas,
   como o creme Rezymom 142×371). Agora a caixa é flex e a foto é limitada pela largura E
   pela altura, com margem — nunca corta. */
.cpc-circ{display:flex !important;align-items:center;justify-content:center;padding:6px;box-sizing:border-box}
.cpc-circ img,.cpc-circ.cheia img{width:auto !important;height:auto !important;max-width:100%;max-height:100%;object-fit:contain}

/* painel de subcategorias (EPI ▾): só o nome, sem ícone — 17/10/2026 */
.megacat-item{padding:9px 12px;font-size:14px}

/* Modo "fotos das categorias" no menu do topo (chave no painel) */
body.menu-fotos nav.cats .catitem .ci img{display:block}
body.menu-fotos nav.cats .catitem .ci svg{width:24px;height:24px}