/* A pagina de categoria.
   Mesma paleta e tipografia da pagina de produto e das paginas de serie. */

.mcg{
  --azul:#0067FF; --azul-forte:#0047B3; --azul-claro:#EBF2FF;
  --tinta:#0F172A; --tinta-2:#364151; --cinza:#5B6577;
  --linha:#E4EAF1; --linha-2:#EFF3F8; --fundo:#F6F8FB; --azul-noite:#0F1D33;
  --verde:#00A350;
  --disp:Poppins,-apple-system,"Segoe UI",sans-serif;
  --texto:"DM Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:56px; --max:1500px;
  font-family:var(--texto); color:var(--tinta-2); line-height:1.6}
.mcg *{box-sizing:border-box;min-width:0}
.mcg img{max-width:100%;height:auto}
.mcg h1{font-family:var(--disp);color:var(--tinta);margin:0;text-wrap:balance}
.mcg p{margin:0}
.mcg a,.mcg a:hover,.mcg a:focus{text-decoration:none}
.mcg__int{max-width:var(--max);margin:0 auto}

/* ── topo ── */
.mcg__topo{padding:28px var(--pad) 34px;border-bottom:1px solid var(--linha)}
.mcg__trilha{font-size:13.5px;color:var(--cinza);margin-bottom:20px}
.mcg__trilha a{color:var(--cinza);border-bottom:1px solid transparent}
.mcg__trilha a:hover{color:var(--azul);border-bottom-color:var(--azul)}
.mcg__topo h1{font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.15;letter-spacing:-.015em}
.mcg__desc-cat{margin-top:14px;max-width:78ch;font-size:16px;line-height:1.7;color:var(--tinta-2)}
.mcg__conta{margin-top:12px;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--cinza)}
.mcg__conta b{color:var(--tinta);font-weight:500}

/* subcategorias: numa categoria de topo elas sao o caminho, nao decoracao */
.mcg__filhas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mcg a.mcg__filhas>a,.mcg__filhas a{display:inline-flex;align-items:baseline;gap:8px;
  padding:7px 13px;border:1px solid var(--linha);border-radius:99px;background:#fff;
  font-size:13.5px;color:var(--tinta)}
.mcg__filhas a:hover{border-color:var(--azul);color:var(--azul)}
.mcg__filhas a b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--cinza)}
.mcg__filhas a:hover b{color:var(--azul)}

/* ── corpo ── */
.mcg__sec{padding:32px var(--pad) 64px}
.mcg__grade{display:grid;grid-template-columns:236px minmax(0,1fr);gap:40px;align-items:start}

.mcg__abre{display:none}
/* A coluna precisa esticar para o sticky ter curso: com "align-items:start"
   ela tem so a altura do conteudo, e o painel sai de vista na primeira rolagem.
   Foi o mesmo tropeco da foto na pagina de serie. */
.mcg__lado{align-self:stretch}
/* O cabecalho do site e fixo e mede 154px: com "top:24px" a barra lateral
   deslizava para debaixo dele, e o slider de preco - que fica no topo dela -
   ficava coberto e sem receber o clique. O respiro considera o cabecalho. */
.mcg__filtros{position:sticky;top:172px;max-height:calc(100vh - 196px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linha) transparent;padding-right:4px}
.mcg__filtros::-webkit-scrollbar{width:6px}
.mcg__filtros::-webkit-scrollbar-thumb{background:var(--linha);border-radius:99px}
.mcg__filtro{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--linha)}
.mcg__filtro:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.mcg__filtro-tit{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cinza);margin:0 0 14px}

/* ── a lista de series ─────────────────────────────────────────
   Sao ate 41 itens numa coluna de 236px. Como texto corrido viravam uma
   parede; como linhas com a contagem alinhada a direita viram uma tabela que
   se le de relance - e o numero passa a ajudar a escolher. */
.mcg__filtro ul{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--linha) transparent}
.mcg__filtro ul::-webkit-scrollbar{width:6px}
.mcg__filtro ul::-webkit-scrollbar-thumb{background:var(--linha);border-radius:99px}
/* O contador e IRMAO do link, nao filho: e um <span class="count"> depois do
   </a>. Por isso o flex vai no <li>, senao a contagem cai para a linha de baixo
   - era o que estava acontecendo. */
.mcg .mcg__filtro li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 -8px;padding:6px 8px;border-radius:5px;transition:background-color .12s}
.mcg .mcg__filtro li:hover{background:var(--linha-2)}
.mcg .mcg__filtro li a{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcg .mcg__filtro li:hover a{color:var(--azul)}
.mcg .mcg__filtro li.chosen{background:var(--azul-claro)}
.mcg .mcg__filtro li.chosen a{color:var(--azul);font-weight:600}
.mcg__filtro .count{font-family:var(--mono);font-size:11px;color:var(--cinza);
  margin:0;flex:none;font-variant-numeric:tabular-nums}
.mcg .mcg__filtro li:hover .count,.mcg .mcg__filtro li.chosen .count{color:var(--azul)}

.mcg .mcg__filtro select{width:100%;font-family:var(--texto);font-size:14px;color:var(--tinta);
  background:#fff;border:1px solid var(--linha);border-radius:6px;padding:10px 12px;
  height:auto;min-height:0}

/* ── select2 ──────────────────────────────────────────────────
   A potencia tem 352 valores, entao o campo de busca do select2 e util. O que
   nao servia era a aparencia padrao: azul de sistema, cantos retos e um campo
   de busca sem moldura. O menu dele e filho do body, entao essas regras ficam
   fora do escopo .mcg de proposito. */
.mcg .select2-container{width:100%!important}
.mcg .select2-container--default .select2-selection--single{height:auto;
  border:1px solid var(--linha);border-radius:6px;background:#fff}
.mcg .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:10px 12px;font-family:var(--texto);font-size:14px;color:var(--tinta);line-height:1.3}
.mcg .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:8px}
.mcg .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,103,255,.14)}
.select2-container--default .select2-dropdown{border:1px solid #E4EAF1;border-radius:6px;
  box-shadow:0 14px 34px -20px rgba(15,29,51,.5);overflow:hidden}
.select2-container--default .select2-search--dropdown{padding:8px}
.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid #E4EAF1;border-radius:5px;padding:8px 10px;
  font-family:"DM Sans",sans-serif;font-size:13.5px;outline:0}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{border-color:#0067FF}
.select2-container--default .select2-results__option{padding:8px 12px;
  font-family:"DM Sans",sans-serif;font-size:13.5px;color:#364151}
.select2-container--default .select2-results__option--highlighted{
  background:#EBF2FF!important;color:#0067FF!important}
.select2-container--default .select2-results__option[aria-selected=true]{
  background:#F6F8FB;color:#0F172A;font-weight:600}
.select2-container--default .select2-results>.select2-results__options{max-height:280px}

/* ── o slider de preco ─────────────────────────────────────
   A folha do slider do WooCommerce nao chega nesta pagina - medido: nenhuma
   folha de woocommerce entre as carregadas. Sem ela as alcas ficam
   "position:static; display:inline", com 4x25px e as duas coladas no inicio:
   o jQuery UI escreve "left:0%" e "left:100%" nelas, e num elemento estatico
   isso nao faz nada. Nao havia o que arrastar. O layout vem daqui. */
.mcg__filtro .price_slider_wrapper{padding-top:4px}
.mcg .mcg__filtro .price_slider{position:relative;height:5px;margin:14px 9px 20px;
  background:var(--linha);border:0;border-radius:99px}
.mcg .mcg__filtro .price_slider .ui-slider-range{position:absolute;top:0;height:100%;
  display:block;background:var(--azul);border:0;border-radius:99px;z-index:1}
.mcg .mcg__filtro .price_slider .ui-slider-handle{position:absolute;top:50%;z-index:2;
  display:block;width:18px;height:18px;margin-left:-9px;transform:translateY(-50%);
  background:#fff;border:2px solid var(--azul);border-radius:50%;
  box-shadow:0 1px 5px rgba(15,29,51,.28);cursor:grab;outline:0;text-indent:0}
.mcg .mcg__filtro .price_slider .ui-slider-handle:hover{border-color:var(--azul-forte)}
.mcg .mcg__filtro .price_slider .ui-slider-handle:active{cursor:grabbing;
  transform:translateY(-50%) scale(1.12)}
.mcg .mcg__filtro .price_slider .ui-slider-handle:focus-visible{
  box-shadow:0 0 0 4px rgba(0,103,255,.22)}

.mcg__filtro .price_slider_amount{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px}
.mcg__filtro .price_slider_amount .price_label{order:1;flex:1 1 100%;font-size:13px;color:var(--cinza)}
.mcg__filtro .price_slider_amount .price_label span{color:var(--tinta);font-weight:600}
.mcg__filtro .price_slider_amount input[type="text"]{display:none}
.mcg .mcg__filtro .price_slider_amount .button{order:2;background:var(--azul);border:0;color:#fff;
  font-family:var(--texto);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:9px 18px;border-radius:6px;height:auto;min-height:0;box-shadow:none}
.mcg .mcg__filtro .price_slider_amount .button:hover{background:var(--azul-forte)}

/* ── barra ── */
.mcg__barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--linha)}
.mcg__resumo{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--cinza)}
.mcg .mcg__ordem select{font-family:var(--texto);font-size:14px;color:var(--tinta);
  background:#fff;border:1px solid var(--linha);border-radius:6px;padding:9px 30px 9px 12px;
  height:auto;min-height:0;max-width:none;width:auto}
.mcg__ordem form{margin:0}

/* ── cartoes ── */
.mcg__cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mcg__card{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linha);border-radius:3px;overflow:hidden;
  transition:border-color .16s,transform .16s,box-shadow .16s}
.mcg__card:hover{border-color:#C3D4EA;transform:translateY(-2px);
  box-shadow:0 10px 24px -18px rgba(15,29,51,.5)}
.mcg .mcg__link{display:flex;flex-direction:column;gap:12px;padding:18px 18px 12px;flex:1}
.mcg__foto{display:flex;align-items:center;justify-content:center;height:150px;background:#fff}
.mcg__foto img{max-height:150px;width:auto;object-fit:contain}
.mcg__corpo{display:flex;flex-direction:column;gap:5px;min-width:0}
.mcg__sku{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--tinta);
  letter-spacing:.01em;line-height:1.3}
.mcg__specs{font-size:12.5px;color:var(--azul);font-weight:600}
.mcg__desc{font-size:12.5px;color:var(--cinza);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.mcg__pe{padding:0 18px 16px;margin-top:auto}
.mcg__preco{display:block;font-family:var(--disp);font-size:19px;font-weight:700;
  color:var(--tinta);margin-bottom:12px}
.mcg__preco em{font-style:normal;font-family:var(--texto);font-size:14px;
  font-weight:400;color:var(--cinza)}
.mcg__acoes{display:flex;flex-wrap:wrap;gap:8px}
/* o tema estiliza botao com ".woocommerce-js a.button", que e (0,2,1) - por
   isso estes seletores incluem a celula e o proprio <a>, chegando a (0,3,1) */
.mcg .mcg__acoes a.mcg__bt,
.mcg .mcg__acoes a.afrfqbt,
.mcg .mcg__acoes a.added_to_cart,
.mcg .mcg__acoes a.added_to_quote{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 12px;border-radius:6px;border:1px solid transparent;
  font-family:var(--texto);font-size:11.5px;font-weight:700;letter-spacing:.03em;
  /* A altura de linha centraliza o texto tambem quando o display nao e flex.
     O "Ver Cotação" chega com display:block de alguma regra do tema, e ai
     align-items nao vale nada - o texto encostava no topo dos 38px. Com
     line-height igual a altura util, centraliza nos dois casos. */
  line-height:36px;text-transform:uppercase;text-align:center;box-shadow:none;
  min-height:0;color:#fff;white-space:nowrap}
.mcg .mcg__acoes a.mcg__bt--car{background:var(--verde);border-color:var(--verde)}
.mcg .mcg__acoes a.mcg__bt--car:hover{background:#008C45;border-color:#008C45}
.mcg .mcg__acoes a.afrfqbt{background:var(--azul);border-color:var(--azul)}
.mcg .mcg__acoes a.afrfqbt:hover{background:var(--azul-forte);border-color:var(--azul-forte);color:#fff}
/* Depois do clique o cartao ficava com TRES botoes empilhados, e o do meio
   ("Incluir na cotacao") desbotado pelo proprio plugin - parecia quebrado.
   O certo e trocar, nao acumular: o pedido ja foi feito, entao a confirmacao
   toma o lugar da acao. Com :has() a troca e so de CSS; onde ele nao existir,
   os dois aparecem, que era o comportamento anterior. */
/* Os seletores citam as duas classes porque o mceig-comercio.js remove
   "added_to_cart" no clique - e sem isso o botao perdia o estilo bem no
   momento em que o cliente acabava de usa-lo. */
.mcg .mcg__acoes a.added_to_cart,
.mcg .mcg__acoes a.added_to_quote{flex:1 1 100%;background:#fff;
  border-color:var(--azul-noite);color:var(--azul-noite)}
.mcg .mcg__acoes a.added_to_cart:hover,
.mcg .mcg__acoes a.added_to_quote:hover{background:var(--azul-noite);color:#fff}
.mcg .mcg__acoes a.added_to_cart::before,
.mcg .mcg__acoes a.added_to_quote::before{content:"✓";margin-right:7px;
  font-weight:700;line-height:1}
.mcg .mcg__acoes:has(a.added_to_cart) a.afrfqbt,
.mcg .mcg__acoes:has(a.added_to_quote) a.afrfqbt{display:none}

/* ── paginacao ── */
.mcg__paginas{margin-top:36px}
.mcg .mcg__paginas ul.page-numbers{display:flex;flex-wrap:wrap;gap:6px;list-style:none;
  margin:0;padding:0;border:0}
.mcg .mcg__paginas li{border:0;margin:0}
/* sem moldura: quatro caixas iguais competiam entre si e nenhuma dizia onde
   voce esta. So a pagina atual ganha fundo; as outras sao numeros clicaveis. */
.mcg .mcg__paginas .page-numbers{display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;border:0;border-radius:6px;background:transparent;
  font-family:var(--mono);font-size:13.5px;color:var(--tinta-2);
  transition:background-color .14s,color .14s}
.mcg .mcg__paginas .page-numbers:hover{background:var(--linha-2);color:var(--azul)}
.mcg .mcg__paginas .page-numbers.current{background:var(--azul-noite);color:#fff;font-weight:600}
.mcg .mcg__paginas .page-numbers.dots{color:var(--cinza);pointer-events:none}
.mcg__vazio{padding:48px 0;font-size:15.5px;color:var(--cinza)}

@media (max-width:1200px){
  .mcg__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .mcg__grade{grid-template-columns:1fr;gap:22px}
  .mcg__filtros{position:static;display:none;padding-top:20px;border-top:1px solid var(--linha)}
  .mcg__filtros.aberto{display:block}
  .mcg__abre{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;
    border:1px solid var(--linha);border-radius:6px;background:#fff;cursor:pointer;
    font-family:var(--texto);font-size:13.5px;font-weight:700;color:var(--tinta);
    text-transform:uppercase;letter-spacing:.03em}
  .mcg__abre[aria-expanded="true"]{border-color:var(--azul);color:var(--azul)}
  .mcg__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mcg{--pad:20px}
  .mcg__topo{padding:22px var(--pad) 28px}
  .mcg__sec{padding:24px var(--pad) 48px}
  .mcg__cards{gap:12px}
  .mcg__foto{height:118px}
  .mcg__foto img{max-height:118px}
  .mcg .mcg__link{padding:14px 14px 10px}
  .mcg__pe{padding:0 14px 14px}
  .mcg__acoes a.mcg__bt,.mcg__acoes a.afrfqbt{flex:1 1 100%}
}
@media (max-width:400px){
  .mcg__cards{grid-template-columns:1fr}
}