/* ===== Banda de título de página (Loja, categorias, carrinho, checkout, etc.) =====
   Antes: verde translúcido lavado sem força. Agora: banda sólida na cor mata
   com título grande na fonte de display, mesmo padrão de confiança do hero. */
.pagina-header{
    background: var(--cor-mata);
    padding-block: var(--espaco-xl);
    text-align: center;
}
.pagina-header h1{
    color: var(--cor-branco);
    font-size: var(--texto-2xl);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Banner com foto no canto (Sobre/Terapias/Videos) REMOVIDO em 24/07/2026
   (pedido direto do Ricardo, olhando ao vivo: "horrivel com 2 imagens do
   Dr. Luiz, uma la encima e uma abaixo, nada a ver"). O retrato pequeno no
   canto do banner + o retrato grande mais abaixo na mesma pagina
   (.sobre-intro__foto / .dedicacao-total__foto) nao funcionavam juntos
   composicionalmente, mesmo sendo enquadramentos diferentes da mesma foto.
   Essas 3 paginas voltam a usar a regra solida padrao acima (mesma do
   Loja/Depoimentos/Blog/Fale Conosco), ficando so com UMA foto do Dr. Luiz
   por pagina, a de baixo, que ja funcionava bem sozinha. */

/* ===== Layout da Loja: sidebar + grid, CSS Grid de verdade ===== */
.loja-layout{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--espaco-xl);
    align-items: start;
}
@media (max-width: 900px){
    .loja-layout{
        grid-template-columns: 1fr;
    }
}

/* ===== Item 2 (mapeamento Fase 2, Loja): espaço reservado pra ordenação e
   contagem de resultados no topo do grid =====
   As chamadas nativas do WooCommerce (woocommerce_result_count /
   woocommerce_catalog_ordering) continuam desligadas em functions.php
   (linhas 178-180, bloco herdado, fora do território deste agente, ver
   handoff da Fase 2 pra reativação exata). O wrapper ".loja-produtos__topo"
   (archive-product.php) hoje renderiza vazio: o seletor ":empty" abaixo o
   esconde por completo, então este bloco não muda nada visualmente até os
   hooks serem reativados. Quando forem, a contagem cai à esquerda e o
   dropdown de ordenação à direita, com quebra de linha automática em telas
   estreitas. */
.loja-produtos__topo:empty{
    display: none;
}
.loja-produtos__topo{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-sm) var(--espaco-lg);
    margin-bottom: var(--espaco-lg);
}
.loja-produtos__topo .woocommerce-result-count{
    margin: 0;
    color: var(--cor-cacau);
    font-size: var(--texto-sm);
}
.loja-produtos__topo .woocommerce-ordering{
    margin: 0 0 0 auto;
}
.loja-produtos__topo .woocommerce-ordering select{
    font-family: var(--fonte-corpo);
    color: var(--cor-cacau);
    background: var(--cor-branco);
    border: 1px solid rgba(51, 41, 31, 0.2);
    border-radius: var(--raio-md);
    padding: var(--espaco-xs) var(--espaco-sm);
}

/* ===== Sidebar de categorias: antes bloco verde escuro dominando 1/3 da tela,
   agora fundo claro com texto escuro, presença sem pesar no visual. ===== */
.loja-sidebar{
    /* Redesign minimalista/futurista (07/08/2026, 5a passada): fundo solido
       --cor-linho-2 vira vidro real com o mesmo glow ambiente do resto do
       redesign (::before), consistente com a grade de produtos ao lado.
       "position:sticky" (nao "relative") ja e suficiente como containing
       block do pseudo-elemento absoluto abaixo, sticky tambem conta como
       "positioned" pelo spec. */
    position: sticky;
    top: calc(var(--espaco-lg) + 70px);
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-md);
    -webkit-backdrop-filter: var(--vidro-blur-md);
    border: 1px solid var(--vidro-borda-clara);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    padding: var(--espaco-lg);
    overflow: hidden;
}
.loja-sidebar::before{
    content: "";
    position: absolute;
    top: -20%;
    left: -20%;
    width: 80%;
    height: 50%;
    background: radial-gradient(circle, rgba(208, 138, 102, 0.25), transparent 65%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.loja-sidebar > *{
    position: relative;
    z-index: 1;
}
.loja-sidebar .widget__titulo{
    font-family: var(--fonte-display);
    color: var(--cor-mata);
    font-size: var(--texto-lg);
    margin-bottom: var(--espaco-md);
}
.loja-sidebar ul{
    list-style: none;
}
.loja-sidebar li{
    border-bottom: 1px solid rgba(51, 41, 31, 0.12);
    padding: var(--espaco-xs) 0;
}
.loja-sidebar li:last-child{ border-bottom: none; }
.loja-sidebar a{
    color: var(--cor-cacau);
    font-size: var(--texto-sm);
}
.loja-sidebar a:hover{
    color: var(--cor-terracota);
}
.loja-sidebar .current-cat > a{
    color: var(--cor-mata);
    font-weight: 700;
}

/* ===== Lista de categorias da sidebar da Loja (Retalhador P7) =====
   Antes: emoji cru do sistema operacional no nome da categoria (renderiza
   diferente por aparelho/fonte, destoa da tipografia serifada do site).
   Agora: ícone SVG próprio (eqms_icon(), ver functions.php) + nome + contagem,
   mesma tipografia/tokens do resto da Loja. Categorias com 0 produtos já não
   chegam nem a este HTML (removidas no PHP antes do echo). */
.loja-sidebar .product-categories li{
    display: flex;
    align-items: center;
}
.loja-sidebar .product-categories a{
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-xs);
    flex: 1;
    font-family: var(--fonte-corpo);
}
.loja-sidebar .product-categories .icone--categoria-loja{
    /* Cor/tamanho alinhados ao mesmo ícone (folha/escudo) usado nos cards
       da página Terapias (.terapias-card__icone, institutional.css), achado
       do validador de costura: aqui estava em --cor-cacau a 1.1em (15,4px
       medido), lá em --cor-mata a 1.5rem (24px), mesmo par de ícones com
       aparência de dois sistemas diferentes. Usa rem (não em) pra bater o
       tamanho exato independente do font-size do link ao redor. */
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: var(--cor-mata);
}
.loja-sidebar .product-categories .count{
    color: var(--cor-cacau);
    opacity: 0.6;
    font-size: var(--texto-sm);
    margin-left: var(--espaco-xs);
}

/* ===== Item 3 (mapeamento Fase 2, Loja), BUG de zona morta de toque =====
   Confirmado ao vivo (medição real do DOM em 390px): a linha inteira do
   <li> mede 41px de altura x 270px de largura (com divisória, parece
   clicável inteira), mas o <a> real dentro dela mede só 24px de altura e
   termina ANTES do contador entre parênteses (a.right=285,6px, li
   right=310px): o WordPress/WooCommerce imprime o contador como um <span
   class="count"> irmão do <a>, fora dele. Teste de clique real no ponto do
   contador confirmou: não navegava. Correção via padrão "link esticado"
   (Bootstrap stretched-link): o <li> vira a referência de posicionamento e
   um ::after do <a> cobre a caixa inteira do <li>, como o pseudo-elemento
   não tem cor/borda/texto, o visual atual não muda em nada, só a área de
   toque passa a cobrir a linha inteira, contador incluso.

   Achado extra confirmado ao vivo (1ª tentativa sem o z-index abaixo
   falhava o teste de clique real no contador): o <li> é "display: flex"
   (regra logo acima), o que torna <a> e .count FLEX ITEMS irmãos: flex
   items pintam por z-index (empate quebrado por ordem no HTML), não pela
   regra padrão "não-posicionado antes de posicionado". Como .count vem
   DEPOIS do <a> no HTML, ele pintava por cima do <a> inteiro (::after
   incluso) mesmo com position:absolute. "z-index: 1" no <a> (funciona em
   flex item mesmo sem position própria, position fica no <li>, então o
   ::after continua cobrindo o <li> inteiro) resolve: <a> passa a pintar
   acima do .count. Validado com clique real (mouse.click) navegando pra
   URL da categoria a partir do ponto exato do contador. */
.loja-sidebar .product-categories li{
    position: relative;
}
.loja-sidebar .product-categories a{
    z-index: 1;
}
.loja-sidebar .product-categories a::after{
    content: "";
    position: absolute;
    inset: 0;
}

/* ===== Item 4 (mapeamento Fase 2, Loja): acordeão "Filtrar" em mobile =====
   17 categorias ocupavam a tela inteira antes do primeiro produto aparecer
   em mobile (confirmado ao vivo: mais de 1000px de rolagem só pra sair da
   lista, em viewport de 844px de altura). Padrão "checkbox hack" (marcação
   em archive-product.php: input[type=checkbox] oculto + <label for> +
   seletor de irmão ~), 100% CSS/HTML, sem JS novo.

   Por que não <details>/<summary>: essa foi a 1ª tentativa, mas testado ao
   vivo o <details> fechado no Chromium esconde o conteúdo por um mecanismo
   interno do motor de renderização (não é um simples "display: none"
   sobrescrevível): nenhuma regra CSS de autor, nem com !important, força o
   conteúdo visível de volta em desktop. O checkbox hack não tem esse
   problema: "display" via :checked é CSS de autor comum, então dá pra
   revertê-lo em qualquer media query sem exceção. Validado ao vivo: mobile
   começa fechado (sem o atributo "checked" no HTML) e abre com toque real
   no rótulo; desktop mostra o conteúdo sempre, sem precisar tocar em nada. */
.loja-sidebar__acordeon-input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.loja-sidebar__acordeon-resumo{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fonte-display);
    color: var(--cor-mata);
    font-size: var(--texto-lg);
    padding: var(--espaco-2xs) 0;
}
.loja-sidebar__acordeon-resumo::after{
    content: "+";
    font-size: var(--texto-xl);
    line-height: 1;
    color: var(--cor-mata);
}
.loja-sidebar__acordeon-input:checked ~ .loja-sidebar__acordeon-resumo::after{
    content: "\2212"; /* sinal de menos, mesma largura do "+" pra não pular layout */
}
.loja-sidebar__acordeon-conteudo{
    display: none;
    margin-top: var(--espaco-md);
}
.loja-sidebar__acordeon-input:checked ~ .loja-sidebar__acordeon-conteudo{
    display: block;
}
@media (min-width: 901px){
    .loja-sidebar__acordeon-resumo{
        display: none;
    }
    .loja-sidebar__acordeon-conteudo{
        display: block !important;
        margin-top: 0;
    }
}
/* Reserva o mesmo respiro do botão de WhatsApp (cta-whatsapp.css) pra
   contagem de categoria nunca ficar parcialmente coberta em telas <=900px
   (achado do validador visual, categoria "Saúde e Bem-estar" em 390px). */
@media (max-width: 900px){
    .loja-sidebar{
        padding-right: calc(var(--espaco-lg) + 40px);
        /* BUG item 1 (mapeamento Fase 2, Loja): "position: sticky" sem reset
           pra mobile fazia a sidebar grudar na tela ao rolar e cobrir
           nome/preço/botão "Comprar" dos produtos abaixo dela. Confirmado ao
           vivo com rolagem real + elementFromPoint no ambiente de teste: em
           390px, a própria ASIDE.loja-sidebar (e itens da lista de
           categorias dentro dela) apareciam como o elemento do topo da
           pilha exatamente sobre o botão "Comprar" e o título do produto.
           "static" tira a sidebar do comportamento de posicionamento fixo
           abaixo do breakpoint de desktop (900px), voltando ao fluxo normal
           da página, o "top" da regra base acima deixa de ter efeito, sem
           precisar zerá-lo à parte. */
        position: static;
    }
}

/* ===== Paginação padrão do WooCommerce =====
   O WooCommerce gera <nav class="woocommerce-pagination"><ul class="page-numbers">
   <li><a class="page-numbers">1</a></li>...</ul></nav>: tanto o <ul> quanto
   os <a>/<span> internos carregam a classe "page-numbers", por isso o seletor
   tem que diferenciar a lista (reset) dos itens de fato (círculo). */
.woocommerce-pagination{
    margin-top: var(--espaco-2xl);
}
.woocommerce-pagination ul.page-numbers{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--espaco-xs);
    list-style: none;
    padding: 0;
}
.woocommerce-pagination li{
    display: flex;
}
.woocommerce-pagination li .page-numbers{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cor-mata);
    border-radius: 50%;
    color: var(--cor-mata);
    font-size: var(--texto-sm);
}
/* Achado real (Swarm Global UX/Design System, 11/08/2026): confirmado ao vivo
   (getComputedStyle + inspecao das CSSStyleRule que casam com o elemento)
   que o circulo da pagina atual saia roxo/mauve (rgb(129,111,152) sobre
   rgb(233,230,237)), a mesma cor padrao do WooCommerce ja documentada em
   buttons.css. Causa: o proprio woocommerce.css declara
   ".woocommerce nav.woocommerce-pagination ul li a:focus, ...
   ul li span.current" — 3 classes + 4 elementos (nav/ul/li/span), mais
   especifico que o seletor de 3 classes + 1 elemento (li) que este arquivo
   usava, entao carregar depois na cascata nao bastava. Correcao: replica a
   mesma cadeia nav>ul>li do WooCommerce e acrescenta ".woocommerce" no
   inicio (4 classes + 4 elementos), igual tecnica ja usada no achado do
   mini-carrinho em vidro.css. */
.woocommerce .woocommerce-pagination li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li .page-numbers:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
}
/* "Anterior"/"Próxima" (achado do validador visual, Fase 2, 23/07/2026):
   texto mais longo que um número solto, não cabe no círculo de 40px e
   vazava pra fora do contorno. Vira pílula com largura automática em vez
   de círculo fixo, mantendo a mesma altura dos números. */
.woocommerce-pagination li .page-numbers.next,
.woocommerce-pagination li .page-numbers.prev{
    width: auto;
    padding-inline: var(--espaco-sm);
    border-radius: var(--raio-lg);
}

/* =====================================================================
   ITEM BLOQUEADO (Onda 2 do swarm, Auditoria de Design Visual, item
   "Grid de produtos funciona bem, mas fica visualmente monotono",
   EQMS-AUDITORIA-DESIGN-VISUAL.md, 24/07/2026):

   A proposta do relatorio e inserir, a cada N produtos (ex: depois da 2a
   fileira), um bloco de largura total com texto editorial curto dentro do
   ".grade-produtos", reaproveitando o visual do ".cta-terapias" ja
   existente (fundo --cor-mata, raio grande, ver home.css).

   Isso NAO e possivel so com CSS. ".grade-produtos" e um grid uniforme
   preenchido pelo loop de produtos do WooCommerce (woocommerce/loop/ +
   woocommerce/content-product.php): o HTML de cada item do grid e um
   <li class="produto-card">, um por produto, sem nenhum elemento de texto
   editorial no meio do markup pra estilizar. Um seletor como ":nth-child"
   no maximo estiliza um CARD DE PRODUTO JA EXISTENTE de forma diferente
   (ex: mudar cor de fundo do 5o produto), nunca insere um bloco novo de
   largura total com texto que nao existe no HTML - CSS não cria elementos
   com conteudo textual arbitrario, so pode adicionar pseudo-elementos
   decorativos pontuais (::before/::after), insuficiente pra um bloco
   editorial com titulo/texto real.

   A implementacao de verdade exige editar o loop de produtos em PHP
   (woocommerce/content-product.php ou woocommerce/archive-product.php),
   inserindo o bloco editorial na posicao certa dentro do loop - fora do
   território deste agente (só CSS). Documentado aqui e reportado como
   bloqueado no resumo final da Onda 2, sem nenhuma tentativa de solução
   parcial só em CSS que não resolveria o pedido de verdade.
   ===================================================================== */