/* QivoN - catalogo com filtro lateral
   GERADO por catalogo-sync/gen_catalogo_layout.py - NAO editar a mao.

   Linkada SO na catalogo.html, depois do css/tema.css.
   ------------------------------------------------------------------- */

/* ------------------------------------------------------------
   0. A SECAO ESCONDIDA TEM DE ESCONDER SEM JAVASCRIPT.

   `.cat-off` e `display:none!important` desde sempre -- mas a
   regra era declarada DENTRO do catalogo-engine.js, injetada num
   <style> em tempo de execucao. Sem JavaScript ela nao existe, e
   `class="cat-off"` no HTML nao esconde coisa nenhuma.

   Medido em 17/10/2026 na masculinas.html, com JS desligado: as
   15 secoes visiveis, 14 delas VAZIAS, e o primeiro produto a
   1.906px de rolagem. O rastreador -- e quem estourou o orcamento
   de renderizacao do Google -- via uma loja de catorze categorias
   vazias, cada uma com um titulo e uma contagem de pecas que nao
   estavam la.

   Duplicar a regra aqui nao briga com o motor: ele continua
   injetando a dele e continua pondo e tirando a classe. A unica
   diferenca e que agora ela vale antes de o JS chegar.
   ------------------------------------------------------------ */
.enc-cat-sec.cat-off { display: none !important; }

/* ------------------------------------------------------------
   1. A COLUNA LATERAL.

   `.enc-layout` ja declarava `196px 1fr` na folha da pagina e um
   estilo INLINE a anulava para `1fr`. O inline sai no markup (so
   `!important` o venceria daqui, e `!important` para desfazer
   decisao de outro arquivo e remendo sobre remendo).

   248px e medido, nao escolhido: "Alianças e Aparadores" e o
   rotulo mais longo das 24 categorias e cabe em uma linha a
   partir de 236px. Abaixo disso ele quebra em duas e a lista
   inteira fica irregular.
   ------------------------------------------------------------ */
.enc-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 2.2rem; }

.cat-side { align-self: start; }
/* Fixa ao rolar: a lista tem 24 categorias e a grade tem 24 cards
   por pagina, entao sem isto o cliente rola ate o fim e nao tem
   mais como trocar de filtro sem voltar ao topo.
   `max-height` + `overflow:auto` porque a coluna e mais alta que
   a tela em telas baixas -- sem os dois, o fim da lista fica
   inalcancavel, que e pior que nao grudar. */
.cat-side-in {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding-right: .4rem;
}
.cat-side-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: .7rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border, #E4E1DB);
}
.cat-side-hd span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--black, #141414);
}
.cat-side-clr {
  background: none;
  border: none;
  cursor: pointer;
  /* 14px de area util antes; o padding leva a 34px sem mover o texto,
     porque o cabecalho alinha por baseline e nao por caixa. */
  padding: .55rem 0 .55rem .6rem;
  margin: -.55rem 0;
  font-size: .72rem;
  color: #5F5C58;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cat-side-clr:hover { color: var(--black, #141414); }

.cat-side-grp { margin-bottom: 1.6rem; }
.cat-side-t {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--black, #141414);
  margin: 0 0 .6rem;
}

/* As categorias continuam sendo `.cat-tab` -- o motor ja liga o
   clique e ja marca a ativa. Aqui elas so deixam de ser uma faixa
   horizontal e viram lista.

   ATENCAO, E ISSO JA QUEBROU A TELA UMA VEZ:
   esta regra disse por um dia que "as regras da faixa antiga sao de
   `.cat-tabs-bar .cat-tab`, entao nao alcancam estas". ERA SUPOSICAO,
   e era FALSA. O <style> embutido do catalogo.html declara `.cat-tab`
   NU (linha ~328): border-radius 999px, background var(--g100), e
   `.cat-tab.active{background:var(--teal);color:#fff}`.

   O estrago nao foi a regra antiga vencer -- ela PERDE em
   especificidade (0,1,0 contra 0,2,0). Foi pior: ela venceu so no que
   esta regra NAO declarava. Sobrou o raio e o fundo da pilha antiga
   com a cor de texto desta, e o item ativo virou #141414 sobre
   #63615F -- dois escuros, ilegivel, e com as pontas arredondadas dos
   vizinhos colidindo numa borda ondulada.

   Dai os resets explicitos abaixo. Sobrescrever propriedade por
   propriedade e a unica forma de nao herdar meia aparencia de um
   seletor que voce nao controla. E a verificacao disso NAO e ler esta
   folha: e perguntar ao navegador o que ele computou -- veja
   `conferir_lateral_catalogo.js`. */
.cat-side-cats { display: flex; flex-direction: column; }
.cat-side-cats .cat-tab {
  display: block;
  /* resets -- cada um anula uma declaracao do `.cat-tab` nu */
  background: none;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 400;
  /* o desenho desta lista */
  padding: .44rem 0 .44rem .7rem;
  font-size: .82rem;
  color: #5F5C58;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.cat-side-cats .cat-tab:hover {
  color: var(--black, #141414);
  background: none;
  border-left-color: var(--border, #E4E1DB);
}
/* O ativo se marca por PESO e por um fio a esquerda, nao por fundo.
   Fundo escuro aqui exigiria texto claro, e foi justamente o par que
   se desencontrou. Texto escuro sobre a pagina branca da 12,6:1. */
.cat-side-cats .cat-tab.active {
  color: var(--black, #141414);
  background: none;
  box-shadow: none;
  font-weight: 600;
  border-left-color: var(--teal, #63615F);
}

/* ALVO DE TOQUE.
   Medido em 17/10/2026 a 390px, por elementFromPoint (e nao pelo
   retangulo -- este site amplia varios alvos com `::after{inset:-N}`,
   que nao muda o tamanho do elemento; aqui nao havia ampliador
   nenhum, a area util batia com a caixa):

       input radio          13px
       .cat-side-clr        14px
       .cat-side-op      30-31px

   O piso usavel e 32px. O radio continua desenhado pequeno -- quem
   recebe o toque e o <label> inteiro, que e o que a mao acerta. */
.cat-side-op {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 0;
  min-height: 34px;
  cursor: pointer;
  font-size: .82rem;
  color: #5F5C58;
}
.cat-side-op input { width: 15px; height: 15px; flex-shrink: 0; }
.cat-side-op:hover { color: var(--black, #141414); }
.cat-side-op input { accent-color: var(--black, #141414); margin: 0; }
.cat-side-op input:checked + span { color: var(--black, #141414); font-weight: 600; }

/* ------------------------------------------------------------
   2. A GRADE: TRES COLUNAS.

   Escolha do dono em 17/10/2026, seguindo o esboco -- eram 4. Com
   a lateral ocupando 248px, 3 colunas dao card maior e foto
   maior, que e a direcao premium decidida em 15/10.

   A pagina ja cai para 3 abaixo de 1100 e para 2 abaixo de 768;
   so o desktop muda. Nenhuma faixa precisa esconder card: 24 por
   pagina fecha linha exata em 3, em 2 e em 4.
   ------------------------------------------------------------ */
@media (min-width: 1101px) {
  .enc-layout .enc-pgrid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   3. NO CELULAR A LATERAL VIRA UM BLOCO NO TOPO.

   Nao vira gaveta: gaveta exige um botao, um overlay e uma trava
   de scroll, e cada um deles e um lugar a mais para quebrar numa
   pagina que ja tem motor proprio. Como bloco, ela usa o mesmo
   markup e o mesmo motor -- so deixa de grudar e as categorias
   passam a rolar na horizontal, que e exatamente o que a faixa de
   abas fazia antes.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .enc-layout { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .cat-side-in {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .cat-side-grp { margin-bottom: 1.1rem; }
  .cat-side-cats {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .2rem;
    scrollbar-width: none;
  }
  .cat-side-cats::-webkit-scrollbar { display: none; }
  .cat-side-cats .cat-tab {
    white-space: nowrap;
    padding: .34rem .7rem;
    border: 1px solid var(--border, #E4E1DB);
  }
  .cat-side-cats .cat-tab:hover { padding-left: .7rem; }
  .cat-side-cats .cat-tab.active {
    background: var(--black, #141414);
    color: #fff;
    border-color: var(--black, #141414);
  }
  /* Os grupos de radio lado a lado para nao empilhar tres listas
     antes do primeiro produto. */
  .cat-side-op { display: inline-flex; margin-right: 1rem; }
}