/* ==========================================================================
   AnonShield — páginas de categoria (/product-category/<slug>/)
   1) cabeçalho com <h1>
   2) barra lateral no desenho do filtro de e-commerce, mas FUNCIONANDO
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CABEÇALHO DA PÁGINA
   A página base não tinha <h1> nenhum: abria direto na grade. Sem <h1> a
   página não declara sobre o que é (SEO) e o visitante não sabe onde está.
   Só <section>/<nav>/<h1>/<p>/<span> — nenhum <div>, para o balanceamento
   continuar servindo de prova no gerador.
   -------------------------------------------------------------------------- */

.as-cat-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 24px 6px;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.as-cat-head .as-cat-trilha {
  font-size: 13px;
  color: #8a97a3;
  margin-bottom: 12px;
}

.as-cat-head .as-cat-trilha a {
  color: #647682;
  text-decoration: none;
}

.as-cat-head .as-cat-trilha a:hover {
  color: #014C6D;
  text-decoration: underline;
}

.as-cat-head .as-cat-trilha span[aria-current] {
  color: #15232b;
  font-weight: 500;
}

.as-cat-head h1 {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #15232b;
  margin: 0 0 8px;
}

.as-cat-head .as-cat-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #647682;
  margin: 0;
  max-width: 720px;
}

.as-cat-head .as-cat-qtd {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: 30px;
  background: #F4F5F7;
  border: 1px solid #E2E7EA;
  font-size: 13px;
  font-weight: 500;
  color: #42525c;
}

@media (max-width: 900px) {
  .as-cat-head { padding: 24px 20px 4px; }
  .as-cat-head h1 { font-size: 26px; }
  .as-cat-head .as-cat-sub { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   2) BARRA LATERAL — desenho do filtro, comportamento de navegação
   --------------------------------------------------------------------------
   POR QUE ASSIM

   No lugar havia o filtro WPC: 21 caixas de seleção que dependiam de
   admin-ajax.php (inexistente num site estático) e apontavam para URLs
   /shop/category-*-or-* da loja antiga, todas 404. Ainda anunciava
   "2095 products found" (catálogo tem 37) e faixa de preço em dólar.

   O dono gostou do DESENHO e pediu para mantê-lo. Mantido — mas os itens
   passaram a ser LINKS de verdade. Renomear rótulo em cima de controle morto
   seria pior que o inglês: o cliente clicaria e nada aconteceria.

   A caixinha deixou de ser <input> e virou indicador de ESTADO (a área em que
   você está), que é o que ela de fato comunica aqui. Sem <input> não há
   promessa de formulário que o site não pode cumprir.

   VALORES EXTRAÍDOS DO CSS DO PRÓPRIO PLUGIN (não estimados):
     .wpc-filters-section      padding-bottom:14px; margin-bottom:14px;
                               border-bottom:1px solid #e8e8e8; :last-child sem borda
     h4.fl-widget-title        font-weight:600; color:#014C6D; margin:0 0 12px
     li.wpc-term-item          margin-bottom:12px; padding:2px 0
     .wpc-term-item-content-wrapper  display:flex; align-items:center
     input[type=checkbox]      accent-color:#014C6D; margin-right:8px
     .wpc-checkbox-item label  color:#333
     .wpc-term-selected label  color:#014C6D; font-weight:600
     .wpc-posts-found p        color:#555; margin:0 0 14px
     .wpc-posts-found-number   color:#014C6D; font-weight:600
     .wpc-checkbox-item ul.children   padding-left:22px; margin-top:2px
     item desabilitado         caixa #d8d8d8

   ÚNICO VALOR ESTIMADO: o corpo do título "Filtros". No plugin ele herdava o
   tamanho do <h4> do tema, então não havia número no CSS para copiar; 24px é
   o que mais se aproxima do que aparece na tela.
   -------------------------------------------------------------------------- */

.as-filtro {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.as-filtro .as-filtro__tit {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #014C6D;
  margin: 0 0 12px;
  padding: 0;
  border: none;
}

/* --- seções --- */
.as-filtro .as-filtro__sec {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e8e8e8;
}

.as-filtro .as-filtro__sec:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.as-filtro .as-filtro__sectit {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #014C6D;
  margin: 0 0 12px;
}

/* --- contagem de itens (era "2095 products found") --- */
.as-filtro .as-filtro__achados {
  color: #555;
  font-size: 14px;
  margin: 0 0 14px;
}

.as-filtro .as-filtro__num {
  color: #014C6D;
  font-weight: 600;
}

/* --- lista de áreas --- */
.as-filtro .as-filtro__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.as-filtro .as-filtro__lista li {
  margin: 0 0 12px;
  padding: 2px 0;
}

.as-filtro .as-filtro__lista li:last-child {
  margin-bottom: 0;
}

.as-filtro .as-filtro__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.3;
}

/* a caixinha: indica em que área você está */
.as-filtro .as-filtro__caixa {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccd0dc;
  border-radius: 3px;
  background: #fff;
  display: grid;
  place-items: center;
}

.as-filtro .as-filtro__caixa svg {
  width: 11px;
  height: 11px;
  color: #fff;
  opacity: 0;
}

.as-filtro .as-filtro__item:hover {
  color: #014C6D;
}

.as-filtro .as-filtro__item:hover .as-filtro__caixa {
  border-color: #014C6D;
}

.as-filtro .as-filtro__item:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* área atual: caixa preenchida no navy do tema + rótulo destacado */
.as-filtro .as-filtro__item[aria-current] {
  color: #014C6D;
  font-weight: 600;
}

.as-filtro .as-filtro__item[aria-current] .as-filtro__caixa {
  background: #014C6D;
  border-color: #014C6D;
}

.as-filtro .as-filtro__item[aria-current] .as-filtro__caixa svg {
  opacity: 1;
}

.as-filtro .as-filtro__qtd {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: #8a97a3;
}

.as-filtro .as-filtro__item[aria-current] .as-filtro__qtd {
  color: #014C6D;
}

/* --- item ainda não preenchido ---------------------------------------------
   Usa o cinza que o próprio plugin dava a termo desabilitado (#d8d8d8), e é
   inerte de fato: <span>, não <a>, com aria-disabled. Nada de link que não
   leva a lugar nenhum.
   -------------------------------------------------------------------------- */
.as-filtro .as-filtro__vazio {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a8b2ba;
  font-size: 15px;
  font-style: italic;
  cursor: default;
}

.as-filtro .as-filtro__vazio .as-filtro__caixa {
  background: #d8d8d8;
  border-color: #d0d0d0;
}

/* --- nota de rodapé da barra --- */
.as-filtro .as-filtro__nota {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8a97a3;
}

/* ==========================================================================
   3) AJUSTES PARA A BARRA ESTÁTICA QUE REUSA AS CLASSES DO PLUGIN
   --------------------------------------------------------------------------
   Decisão do dono: manter o componente original em vez da minha reprodução
   simplificada — e ele estava certo. A minha versão perdia os chips do topo, a
   hierarquia, os campos de preço e a densidade.

   Como o HTML volta a usar as classes `wpc-*`, o CSS do próprio plugin (que já
   está nas 87 páginas) faz o trabalho visual. Fidelidade sem imitação.
   Consequência boa: aquele CSS deixa de ser órfão — sai da fila de limpeza.

   O que muda em relação ao original é só o COMPORTAMENTO:
     - cada item continua sendo o <a class="wpc-filter-link"> que já existia,
       agora apontando para /product-category/<slug>/ (páginas que existem);
     - o <input type=checkbox> fica `disabled`: ele exibe estado (marcado = área
       atual) e não finge ser um controle. Quem navega é o link do rótulo.
       As 2 regras abaixo devolvem a aparência normal ao checkbox desabilitado,
       porque o plugin o pintaria de cinza (#d8d8d8) e ele deixaria de comunicar
       a seleção.
   -------------------------------------------------------------------------- */

/* checkbox desabilitado NAO deve parecer apagado: ele indica a área atual */
.wpc-filters-main-wrap li.wpc-term-item input[type="checkbox"][disabled],
.wpc-filters-main-wrap li.wpc-term-item input[type="checkbox"][disabled]:after {
  accent-color: #014C6D;
  background-color: transparent;
  opacity: 1;
  cursor: default;
}

/* o rótulo segue clicável (é o <a> que navega) */
.wpc-filters-main-wrap li.wpc-term-item label,
.wpc-filters-main-wrap li.wpc-term-item label a.wpc-filter-link {
  cursor: pointer;
}

/* item "a preencher": inerte de verdade (<span>, não <a>) */
.wpc-filters-main-wrap li.wpc-term-item.as-vaga label span {
  color: #a8b2ba;
  font-style: italic;
  cursor: default;
}

/* nota informativa (preço, total do catálogo) no lugar de controle que não
   funcionaria: campo de faixa e slider precisam de backend ou motor de filtro */
.wpc-filters-main-wrap .as-filtro-nota {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #555;
}

.wpc-filters-main-wrap .as-filtro-nota strong {
  color: #014C6D;
  font-weight: 600;
}

/* ==========================================================================
   4) CAMPOS DE PREÇO E SLIDER — versão estática
   --------------------------------------------------------------------------
   No original esses dois campos e o trilho eram gerados pelo jQuery UI e
   enviavam min_price/max_price para o backend. Sem backend não há o que enviar,
   mas o COMPONENTE é parte do que dá corpo à barra — foi ele que mais fez falta
   quando eu o troquei por uma linha de texto.

   Então ele fica, com os números REAIS do catálogo e `disabled`: mostra a faixa
   de preço praticada, não finge filtrar. O trilho é desenhado aqui em CSS porque
   o jQuery UI (que o gerava) foi embora com o resto do JS morto.

   Valores tirados do CSS do plugin: caixa `border:1px solid #ccd0dc;
   border-radius:6px; padding:8px 16px`; navy `#014C6D`.
   -------------------------------------------------------------------------- */

.wpc-filters-main-wrap .wpc-filters-range-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.wpc-filters-main-wrap .wpc-filters-range-column {
  flex: 1 1 0;
  min-width: 0;
}

.wpc-filters-main-wrap .wpc-filters-range-column input {
  width: 100%;
  border: 1px solid #ccd0dc;
  border-radius: 6px;
  background: #f7f8f9;
  box-shadow: none;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  color: #42525c;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}

/* trilho estático: mesma leitura do original (faixa cheia, dois pontos) */
.wpc-filters-main-wrap .wpc-filters-range-slider-wrapper {
  padding: 0 9px 6px;
}

.wpc-filters-main-wrap .as-slider {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: #dfe4e8;
}

.wpc-filters-main-wrap .as-slider .as-slider__faixa {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #014C6D;
}

.wpc-filters-main-wrap .as-slider .as-slider__ponta {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  border: 2px solid #014C6D;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.wpc-filters-main-wrap .as-slider .as-slider__ponta--min { left: 0; }
.wpc-filters-main-wrap .as-slider .as-slider__ponta--max { left: 100%; }

/* nota curta abaixo da faixa — ocultada para evitar impressão de catálogo inacabado */
.wpc-filters-main-wrap .as-preco-nota {
  display: none !important;
}

/* Selo sobre a imagem do card de bundle */
.as-bundle-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(14, 116, 144, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 12px !important;
  padding: 3.5px 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  z-index: 10 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Pill destacando a composição de softwares logo abaixo do título */
.as-bundle-apps-pill {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  margin: 4px 0 6px 0 !important;
  width: fit-content !important;
  letter-spacing: 0.2px !important;
}
html[data-tema="escuro"] .as-bundle-apps-pill {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

/* ==========================================================================
   5) O QUADRADINHO — desenhado por nós, para o estado ser garantido
   --------------------------------------------------------------------------
   BUG QUE ISTO CORRIGE: na seção 3 eu escrevi `background-color: transparent`
   no checkbox `disabled` para ele não ficar cinza. Só que isso apagava também o
   PREENCHIMENTO do estado marcado — a área atual deixava de aparecer preenchida,
   que era exatamente o que a caixinha existe para comunicar.

   `accent-color` também não resolve: navegador pinta checkbox desabilitado de
   cinza por conta própria, e cada um de um jeito. Com `appearance:none` o
   desenho é nosso e o resultado é o mesmo em todos.

   Cores medidas no CSS do plugin: borda `#ccd0dc`, navy `#014C6D`.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   A LINHA INTEIRA É CLICÁVEL
   No original o <input> ficava FORA do link, então clicar na caixinha não
   navegava — só o nome respondia. Agora a caixa é um <span> DENTRO do <a>:
   a linha toda (caixa + nome) é uma única área clicável, e deixa de existir
   controle de formulário que este site não processa.
   -------------------------------------------------------------------------- */

.wpc-filters-main-wrap li.wpc-term-item .as-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  color: #333;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

.wpc-filters-main-wrap li.wpc-term-item a.as-linha:hover {
  color: #014C6D;
}

.wpc-filters-main-wrap li.wpc-term-item a.as-linha:hover .as-caixa {
  border-color: #014C6D;
}

.wpc-filters-main-wrap li.wpc-term-item a.as-linha:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   A CAIXINHA
   Sem tique: o tique desenhado com bordas rotacionadas saía torto em tamanho
   pequeno (16px), porque a espessura não cai em pixel inteiro. Trocado por
   "crop" — uma borda branca interna que deixa o miolo navy aparecendo. Lê como
   selecionado, e não tem geometria para sair torta.
   -------------------------------------------------------------------------- */

.wpc-filters-main-wrap li.wpc-term-item .as-caixa {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccd0dc;
  border-radius: 3px;
  background: #fff;
  box-sizing: border-box;
}

/* selecionado: miolo navy com a bordinha branca em volta */
.wpc-filters-main-wrap li.wpc-term-selected .as-caixa {
  background: #014C6D;
  border-color: #014C6D;
  box-shadow: inset 0 0 0 2px #fff;
}

.wpc-filters-main-wrap li.wpc-term-selected .as-linha {
  color: #014C6D;
  font-weight: 600;
}

/* vaga "a preencher": inerte, caixa apagada */
.wpc-filters-main-wrap li.wpc-term-item.as-vaga .as-linha {
  color: #a8b2ba;
  font-style: italic;
  cursor: default;
}

.wpc-filters-main-wrap li.wpc-term-item.as-vaga .as-caixa {
  background: #ededed;
  border-color: #dcdcdc;
}

/* ==========================================================================
   6) SLIDER DE PREÇO FUNCIONAL
   --------------------------------------------------------------------------
   Filtra de verdade: o JS (filtro-preco.js) lê o preço de cada card da grade e
   esconde os que ficam fora da faixa. Não há backend envolvido — é o mesmo
   princípio "estático" do resto da barra.

   Produto SEM preço definido não é escondido: não há como julgá-lo por preço.
   Hoje isso vale para 36 dos 37 — por isso a nota abaixo da faixa.
   -------------------------------------------------------------------------- */

.wpc-filters-main-wrap .as-slider {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: #dfe4e8;
  margin: 2px 0 4px;
  touch-action: none;
}

.wpc-filters-main-wrap .as-slider__faixa {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: #014C6D;
}

.wpc-filters-main-wrap .as-slider__ponta {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  border: 2px solid #014C6D;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}

.wpc-filters-main-wrap .as-slider__ponta:active {
  cursor: grabbing;
}

.wpc-filters-main-wrap .as-slider__ponta:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 2px;
}

/* enquanto o JS não assumiu (ou se ele não rodar), o trilho não convida ao
   arrasto — o cursor de "pegar" só aparece quando há de fato o que arrastar */
.wpc-filters-main-wrap .as-slider:not([data-as-pronto]) .as-slider__ponta {
  cursor: default;
}

/* os dois campos passam a refletir a faixa escolhida */
.wpc-filters-main-wrap .wpc-filters-range-column input[readonly] {
  cursor: default;
}

/* card escondido pelo filtro */
.uc_post_grid_style_one_item[data-as-fora] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .wpc-filters-main-wrap .as-slider__ponta {
    transition: none;
  }
}

/* ==========================================================================
   7) O "+" QUE ABRE A LISTA DE SOFTWARES DA ÁREA
   --------------------------------------------------------------------------
   No original o "+" abria as subcategorias (Office 2016, Office 2021…) e era
   movido pelo JS do plugin, que morreu com o resto. Aqui ele abre algo melhor:
   os PRODUTOS daquela área, cada um com link para a própria página.

   Ganho que não é visual: os 37 links de produto ficam no HTML mesmo recolhidos
   (display:none é indexado), então cada página de categoria passa a distribuir
   link interno para todos os produtos das três áreas.

   PROGRESSIVE ENHANCEMENT: o botão nasce com [hidden] e só aparece quando o
   filtro-expandir.js assume. Sem JS não sobra controle parado na tela — a lista
   fica recolhida e o nome da área continua sendo um link normal.

   O "+" é desenhado com duas barras em CSS, não com glifo nem borda rotacionada:
   foi exatamente a rotação que deixou o tique torto em 16px (v0.9.10).

   Indentação dos filhos: 22px — valor do próprio plugin
   (`.wpc-checkbox-item ul.children{padding-left:22px;margin-top:2px}`).
   -------------------------------------------------------------------------- */

.wpc-filters-main-wrap li.wpc-term-item .wpc-term-item-content-wrapper {
  display: flex;
  align-items: center;
}

.wpc-filters-main-wrap li.wpc-term-item .as-linha {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- o botão + / − --- */
.wpc-filters-main-wrap .as-mais {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.wpc-filters-main-wrap .as-mais[hidden] {
  display: none;
}

.wpc-filters-main-wrap .as-mais::before,
.wpc-filters-main-wrap .as-mais::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #8a97a3;
  border-radius: 1px;
}

/* barra horizontal (fica sozinha quando aberto = sinal de menos) */
.wpc-filters-main-wrap .as-mais::before {
  width: 11px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

/* barra vertical (desaparece ao abrir) */
.wpc-filters-main-wrap .as-mais::after {
  width: 1.5px;
  height: 11px;
  transform: translate(-50%, -50%);
  transition: opacity .15s ease;
}

.wpc-filters-main-wrap .as-mais[aria-expanded="true"]::after {
  opacity: 0;
}

/* Sem cor nenhuma em cima do "+": nada de fundo no hover, nada de destaque no
   clique, nada de realce de toque no celular. Só o cursor indica que é clicável
   — pedido do dono.

   A ÚNICA marca que fica é o contorno de foco por TECLADO (:focus-visible), que
   não aparece em clique de mouse nem em toque. Sem ele, quem navega por Tab não
   tem como saber onde está — é requisito de acessibilidade, não decoração. */
.wpc-filters-main-wrap .as-mais {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.wpc-filters-main-wrap .as-mais:hover,
.wpc-filters-main-wrap .as-mais:active,
.wpc-filters-main-wrap .as-mais:focus {
  background: transparent;
}

/* as barrinhas mantêm o mesmo cinza em qualquer estado */
.wpc-filters-main-wrap .as-mais:hover::before,
.wpc-filters-main-wrap .as-mais:hover::after,
.wpc-filters-main-wrap .as-mais:active::before,
.wpc-filters-main-wrap .as-mais:active::after {
  background: #8a97a3;
}

.wpc-filters-main-wrap .as-mais:focus-visible {
  outline: 2px solid #8a97a3;
  outline-offset: 1px;
}

/* --- a lista de softwares da área: desliza para abrir e para fechar ----------
   `display:none` -> `block` abre de estalo. Para deslizar é preciso animar
   ALTURA, e `height:auto` não é animável — então o filtro-expandir.js mede a
   altura real e escreve o valor em px; aqui só fica a transição.

   `visibility` acompanha com atraso igual ao da transição: enquanto recolhido, a
   lista sai da ordem de tabulação (senão o teclado entraria numa lista invisível).
   Os links seguem no HTML — continua valendo para indexação.
   -------------------------------------------------------------------------- */
.wpc-filters-main-wrap li.wpc-term-item > ul.children {
  /* display:block é OBRIGATÓRIO aqui, não é enfeite.
     O CSS do plugin traz `li.wpc-term-item ul.children { display: none }`.
     Enquanto eu abria/fechava com display, minha regra o sobrepunha. Ao trocar
     para animação de altura eu tirei o display das minhas regras — e aquele
     display:none ficou sem oposição, deixando a lista invisível SEMPRE, em todas
     as áreas: o "+" não tinha efeito nenhum. Altura e visibility não vencem
     display:none, porque são outras propriedades. */
  display: block;
  list-style: none;
  padding-left: 22px;
  margin: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height .26s cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear .26s;
}

.wpc-filters-main-wrap li.wpc-term-item.as-aberto > ul.children {
  visibility: visible;
  transition: height .26s cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear 0s;
}

/* respiro só quando aberto, para não somar altura no estado recolhido */
.wpc-filters-main-wrap li.wpc-term-item > ul.children > li:first-child {
  margin-top: 4px;
}

.wpc-filters-main-wrap li.wpc-term-item > ul.children li {
  margin: 0;
  padding: 0;
}

.wpc-filters-main-wrap li.wpc-term-item > ul.children a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.35;
  color: #647682;
  text-decoration: none;
}

.wpc-filters-main-wrap li.wpc-term-item > ul.children a:hover {
  color: #014C6D;
  text-decoration: underline;
}

.wpc-filters-main-wrap li.wpc-term-item > ul.children a:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 2px;
  border-radius: 3px;
}

/* a página em que o visitante já está, dentro da lista */
.wpc-filters-main-wrap li.wpc-term-item > ul.children a[aria-current] {
  color: #014C6D;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .wpc-filters-main-wrap .as-mais::after,
  .wpc-filters-main-wrap li.wpc-term-item > ul.children,
  .wpc-filters-main-wrap li.wpc-term-item.as-aberto > ul.children {
    transition: none;
  }
}


/* ==========================================================================
   8) TEXTO DE RODAPE DA CATEGORIA (.as-cat-intro)
   --------------------------------------------------------------------------
   POR QUE EXISTE
   Medido em mapa_imagens.py: as caixas de produto chegam ao Google com quase
   so o nome ao lado. A pagina de categoria abria no <h1> + uma frase e ja
   jogava a grade — pouca massa de texto para ranquear "comprar software BIM".
   Este bloco entra DEPOIS da grade: o visitante ve os produtos primeiro
   (conversao) e o texto explicativo fica embaixo (SEO). Injetado por
   intro_categorias.py.

   Sem <div>: so <section>/<h2>/<p>/<a>, para o balanceamento continuar sendo
   prova no injetor. Mesma paleta do cabecalho (navy #014C6D, texto #15232b).

   CARD (pedido do dono): antes o texto ficava colado a esquerda com um vazio
   grande a direita e sem moldura, parecendo solto. Agora e' um painel
   centralizado (margin auto) com fundo, borda e cantos arredondados, para o
   texto ter um continente. Largura fluida `min(860px, 100% - margem)`: no
   desktop trava em 860px, no mobile vira largura total menos a margem lateral,
   sem media query para a largura. Titulo centralizado; paragrafos a esquerda,
   que e' o que se le melhor.
   -------------------------------------------------------------------------- */

.as-cat-intro {
  width: min(860px, calc(100% - 48px));
  margin: 36px auto 44px;
  padding: 36px 40px;
  background: #f6f8fa;
  border: 1px solid #e6ebf0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 40, 64, .04);
  box-sizing: border-box;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

.as-cat-intro h2 {
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.25;
  color: #15232b !important;
  margin: 0 0 16px;
  text-align: center;
}

.as-cat-intro p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #4a5a64;
  margin: 0 0 14px;
}

.as-cat-intro p:last-child {
  margin-bottom: 0;
}

.as-cat-intro a {
  color: #014C6D;
  text-decoration: none;
  font-weight: 500;
}

.as-cat-intro a:hover {
  text-decoration: underline;
}

.as-cat-intro a:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Modo escuro para o bloco de SEO da categoria */
html[data-tema="escuro"] .as-cat-intro {
  background: #15222b !important;
  border-color: #26363f !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25) !important;
}

html[data-tema="escuro"] .as-cat-intro h2 {
  color: #f2f7fa !important;
}

html[data-tema="escuro"] .as-cat-intro p {
  color: #b9c8d2 !important;
}

html[data-tema="escuro"] .as-cat-intro a {
  color: #4db3dc !important;
}

html[data-tema="escuro"] .as-cat-intro a:hover {
  color: #7dd3fc !important;
}

@media (max-width: 768px) {
  .as-cat-intro {
    width: calc(100% - 32px);
    margin: 28px auto 32px;
    padding: 24px 22px;
    border-radius: 14px;
  }
  .as-cat-intro h2 { font-size: 20px; }
  .as-cat-intro p { font-size: 15px; }
}


/* ==========================================================================
   9) LINHA DE DESCRICAO NO CARD (.as-card-desc)  [PREVIA — so no card do Revit]
   --------------------------------------------------------------------------
   Uma frase curta sob o nome do produto: o visitante entende o que e' sem abrir
   a pagina, e as listagens ganham texto (hoje o card so tem o nome). O
   min-height reserva ~2 linhas para que cards da mesma fileira fiquem alinhados
   mesmo quando um texto e' maior que o outro.
   -------------------------------------------------------------------------- */
.as-card-desc {
  margin: 5px 0 0;
  font-size: 13px !important;
  line-height: 1.4;
  color: #647682 !important;
  min-height: 2.6em;
  font-weight: 400 !important;
}

@media (max-width: 768px) {
  .as-card-desc { font-size: 12.5px; min-height: 0; }
}

/* ==========================================================================
   10) ROTULO DE CATEGORIA NO CARD (.ue_category_label)
   -------------------------------------------------------------------------- */
.ue_category_wrapper {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
}

.ue_category_label {
  display: inline-block !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #014C6D !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}

.ue_category_label:hover {
  color: #0d6efd !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   11) GRADE DE PRODUTOS NAS CATEGORIAS & SHOP (3 COLUNAS NO DESKTOP)
   --------------------------------------------------------------------------
   Com a barra lateral de filtros (240-260px), 4 colunas espremiam os cards em
   míseros ~205px. Ao mudar para 3 colunas, a largura de cada card passa para
   ~285px — EXATAMENTE a mesma largura harmônica e imponente dos cards da Home!
   ========================================================================== */
@media (min-width: 992px) {
  .ue-woo-grid,
  .uc_post_grid_style_one_wrap.ue-woo-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .ue-woo-grid,
  .uc_post_grid_style_one_wrap.ue-woo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}