/*
Sistema de vidro (glassmorphism) — pedido do Ricardo em 21/07/2026 pra fechar
distância visual com ZAMPAS/QuanQton. Tokens em 00-tokens.css, extraídos de
computed style real das duas referências (não achismo de adjetivo). Carrega
por último na cadeia de dependência (functions.php) de propósito: as regras
aqui têm que vencer o CSS "sólido" de cada componente sem precisar de
!important, só por vir depois na cascata.

Regra de aplicação: vidro só faz sentido visualmente sobre algo com
complexidade por trás (foto, cor viva, outra camada de conteúdo) — nunca foi
aplicado direto sobre o fundo liso --cor-linho da página, porque blur sobre
fundo plano não produz nenhum efeito perceptível.
*/

/* ===== Header ===== (REMOVIDO 20/08/2026: a troca de fundo solido/vidro
   no scroll (classe .header--vidro, JS em main.js continua alternando,
   inofensivo) ficou obsoleta com o redesign do header em barra-pilula
   flutuante sempre-vidro (header-footer.css). A regra antiga voltava a
   pintar um retangulo solido atras da pilula ao rolar a pagina, pedido do
   Ricardo pra remover. Nao remove o toggle de classe no JS, so a regra CSS
   que reagia a ela. */

/* ===== Menu mobile: painel em vidro sobre o conteúdo (não mais bloco sólido) ===== */
.menu-mobile.is-aberto{
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: var(--vidro-blur-lg);
    -webkit-backdrop-filter: var(--vidro-blur-lg);
    box-shadow: var(--sombra-md);
}

/* ===== Mini-carrinho (Side Cart Premium — classes nativas do plugin) =====
   O plugin usa background-color:#fff sólido no painel e um overlay preto a
   0.7 de opacidade sem blur nenhum (xoo-wsc-style.css do próprio plugin,
   carrega antes deste arquivo). As regras abaixo vêm depois na cascata e
   ganham por ordem, sem precisar de !important. */
.xoo-wsc-opac{
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
}
.xoo-wsc-container{
    /* Redesign minimalista/futurista (07/08/2026, 4a passada — Ricardo:
       "isso também tá horrível", o vidro de 86% de opacidade lia como
       painel solido cinza claro, sem nenhuma sensacao de vidro real).
       Opacidade reduzida (mais translucido de verdade) + borda de vidro
       pra desenhar o contorno do painel, mesmo vocabulario do resto do
       redesign. */
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: var(--vidro-blur-lg);
    -webkit-backdrop-filter: var(--vidro-blur-lg);
    border-left: 1px solid var(--vidro-borda-clara);
    box-shadow: var(--sombra-lg);
}
/* Achado real (Swarm Global UX/Design System, 11/08/2026): o plugin injeta um
   <style id="xoo-wsc-style-inline-css"> proprio (config de admin do plugin,
   nunca editada pelo tema) com ".xoo-wsc-header{ color: #8fc751 }" — um verde
   limao fora da paleta travada, confirmado ao vivo (getComputedStyle real) no
   titulo "CARRINHO" e no icone de fechar (X), que herda a mesma cor por nao
   ter "color" proprio. A regra abaixo ja existia so pra background/borda;
   como nenhuma regra deste arquivo tocava "color" pra esse seletor, a cor do
   plugin vencia sem disputa nenhuma de especificidade. Acrescenta so a
   propriedade que faltava, mesma especificidade do seletor do plugin (1
   classe), vence por vir depois na cascata (mesmo mecanismo ja
   documentado no topo do arquivo). */
.xoo-wsc-header{
    background: var(--vidro-bg-claro);
    border-bottom: 1px solid var(--vidro-borda-escura);
    color: var(--cor-mata);
}
.xoo-wsc-header .xoo-wsch-text{
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    letter-spacing: 0.02em;
}

/* Corpo do mini-carrinho: card de vidro por item, mesmo vocabulario do
   resto do redesign (produto-card, form.cart do produto unico). Classes
   confirmadas lendo o HTML real renderizado pelo plugin (Side Cart
   Premium), nao adivinhadas. */
.xoo-wsc-product{
    padding: var(--espaco-sm);
    margin-bottom: var(--espaco-sm);
    background: var(--vidro-bg-claro);
    border: 1px solid var(--vidro-borda-clara);
    border-radius: var(--raio-md);
}
.xoo-wsc-img-col img{
    border-radius: var(--raio-sm);
}
.xoo-wsc-pname a{
    font-family: var(--fonte-display);
    color: var(--cor-cacau);
}
.xoo-wsc-qty-box{
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--cor-mata);
    border-radius: var(--raio-pill);
    overflow: hidden;
}
.xoo-wsc-qty-box .xoo-wsc-minus,
.xoo-wsc-qty-box .xoo-wsc-plus{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--cor-mata);
    font-weight: 700;
}
.xoo-wsc-qty-box .xoo-wsc-qty{
    width: 32px;
    border: none;
    text-align: center;
    font-weight: 700;
    color: var(--cor-cacau);
}

/* Botoes do rodape — mesma linguagem de botao do resto do site (pilula,
   contorno vs solido), o plugin entrega sem nenhum estilo de marca. */
.xoo-wsc-ft-buttons-cont{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-xs);
}
.xoo-wsc-ft-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: var(--espaco-sm) var(--espaco-md);
    border-radius: var(--raio-pill);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Achado real (Swarm Global UX/Design System, 11/08/2026): confirmado ao vivo
   (mini-carrinho aberto de verdade, produto real adicionado) que os 2 botoes
   do rodape saiam verde-oliva solido (#557a3c, fora da paleta) em vez do
   verde/contorno da marca. Causa raiz diferente do achado do header acima:
   aqui NAO e ausencia de regra, e disputa de especificidade real — o mesmo
   <style> injetado pelo plugin declara
   ".xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn{ background-color:#557a3c;
   color:#fff }" (1 classe + 1 elemento + 1 classe = especificidade maior que
   o seletor de 1 classe que este arquivo usava, ".xoo-wsc-ft-btn-continue"),
   entao carregar por ultimo na cascata nao bastava pra vencer. Correcao:
   qualifica os seletores com o mesmo ancestral+elemento que o plugin usa
   (".xoo-wsc-ft-buttons-cont a"), igualando a especificidade — com isso o
   mecanismo padrao deste arquivo (vencer por ordem, sem !important) volta a
   funcionar. Mesma correcao aplicada ao :hover (o hover tambem perdia, pois
   a regra "sempre ligada" do plugin, sem :hover, ja tinha especificidade
   maior que ".xoo-wsc-ft-btn-continue:hover"). */
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue,
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart{
    background: transparent;
    color: var(--cor-mata);
    border: 1.5px solid var(--cor-mata);
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout{
    flex-basis: 100%;
    background: var(--cor-mata);
    color: var(--cor-branco);
    border: 1.5px solid var(--cor-mata);
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout:hover{
    background: var(--cor-musgo);
    border-color: var(--cor-musgo);
    box-shadow: var(--sombra-md);
    transform: translateY(-2px);
}
/* Integracao do diretor (24/07/2026, achado do validador D, severidade
   alta): o vidro do .xoo-wsc-container ficava tecnicamente aplicado mas
   visualmente invisivel, porque o plugin (xoo-wsc-style.css, carrega antes
   deste arquivo) preenche o corpo e o rodape do mini-carrinho com branco
   100% solido, cobrindo quase toda a area do painel. So a faixa fina do
   cabecalho deixava o vidro aparecer. Torna os dois filhos transparentes
   pra deixar o blur/opacidade do container por tras fazer efeito na area
   inteira do painel, sem mudar nenhum estilo de produto/preco/botao que
   fica dentro deles. */
/* Achado real (Swarm Global UX/Design System, 11/08/2026): mesmo padrao do
   achado do header acima — o mesmo <style> injetado pelo plugin declara
   ".xoo-wsc-body{ color:#4c4c4c }" e ".xoo-wsc-footer{ color:#4c4c4c }"
   (cinza neutro fora da paleta), confirmado ao vivo no texto "Seu carrinho
   está vazio" e no texto solto do rodape do painel. So acrescenta "color"
   (a regra ja vencia em "background" pelo mesmo mecanismo, entao a mesma
   tecnica resolve sem precisar de seletor novo nem !important). */
.xoo-wsc-body,
.xoo-wsc-footer{
    background: transparent;
    color: var(--cor-cacau);
}

/* ===== Vidro sobre foto de produto (redesign minimalista/futurista, 07/08/2026) =====
   Primeiro uso de vidro em CONTEUDO (nao so chrome de navegacao) — gap
   identificado na auditoria de 24/07 (EQMS-AUDITORIA-DESIGN-VISUAL.md,
   achado 3): ZAMPAS/QuanQton usam vidro sutil sobre foto em varios pontos de
   conteudo, a EQMS usava 0%. O gatilho de zoom nativo do WooCommerce
   (lupa no canto da galeria) e o primeiro candidato real: fica sempre sobre
   a foto do produto (nunca sobre --cor-linho liso), exatamente a regra do
   "Vidro Só-Sobre-Foto" do DESIGN.md. */
.woocommerce-product-gallery__trigger{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vidro-bg-claro) !important;
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    border-radius: var(--raio-pill) !important;
    box-shadow: var(--sombra-sm);
    transition: background 0.2s ease, transform 0.2s ease;
}
.woocommerce-product-gallery__trigger:hover{
    background: rgba(255, 255, 255, 0.28) !important;
    transform: scale(1.06);
}

/* ===== Redesign 21/08/2026 (v7, versao final): abandonada de vez a ideia
   de logo centralizada com menu dividido em 2 metades (v5/v6) — causava vao
   vazio artificial antes do primeiro item (o lado esquerdo usava
   justify-content:flex-end pra "abraçar" a logo central, empurrando o
   primeiro item pra longe da borda) e overflow real da busca/carrinho pra
   fora da pilula (medido ao vivo: .busca-header direita ultrapassava a
   borda direita do .container em mais de 70px, porque o grupo direito
   inteiro nao respeitava o espaco que sobrava depois do flex:1 simetrico).
   Layout convencional agora: logo na ponta esquerda, 1 lista de menu so
   logo depois (sem split), busca+carrinho+toggle empurrados pra ponta
   direita via margin-left:auto. So desktop (>=1200px). */
@media (min-width: 1200px){
    #site-header{
        background: transparent;
        padding-block: 18px;
    }
    #site-header .container{
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 32px;
        min-height: 68px;
        padding-inline: 28px;
        background: var(--cor-mata);
        border-radius: var(--raio-pill);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(244,239,229,0.14);
        box-shadow: var(--sombra-md);
    }

    #site-header .logo{
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
    }
    #site-header .logo img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.25s ease;
    }
    #site-header .logo:hover img{ transform: scale(1.08); }

    .menu-principal{
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    .menu-principal ul{
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        flex-wrap: nowrap;
    }
    .menu-principal a{
        display: flex;
        align-items: center;
        padding: 10px 14px;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-radius: 999px;
        white-space: nowrap;
    }
    .menu-principal a:hover{
        background: rgba(244,239,229,0.1);
    }

    .header-direita{
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .busca-header{
        display: flex;
        align-items: center;
    }
    .busca-header input{
        background: rgba(244,239,229,0.92);
        color: var(--cor-cacau);
        border: 1px solid rgba(244,239,229,0.4);
        width: clamp(100px, 9vw, 150px);
        min-width: 0;
    }
    .busca-header input::placeholder{
        color: var(--cor-cacau-70);
    }
    .carrinho-trigger{
        display: flex;
        align-items: center;
    }
    .menu-toggle{ display: none; }
}

/* Hero encostando no topo real da pagina, barra flutuando (vidro) por cima
   da foto -- pedido do Ricardo. Compensa a altura real do header sticky
   (medida ao vivo: 104px = 68px min-height do container + 18px+18px de
   padding-block) com margin-top negativo EXATO nessa medida (nao um numero
   arredondado por olho) pra foto encostar exatamente no topo real da
   pagina, sem sobrar pedaco de foto cortado acima do viewport (bug real
   corrigido 21/08: -126px empurrava a foto 22px pra cima demais).
   Altura da hero aumentada de 460px pra 600px: com o header flutuando por
   cima e o padding-top novo abrindo espaco pro titulo nao ficar embaixo da
   barra, os 460px originais nao sobravam nem pro conteudo de texto,
   sobrepondo os botoes "Ver produtos"/"Conheça nossas terapias" com a
   secao seguinte (achado real do Ricardo, 21/08: botoes cortados pela
   faixa de confianca). Carrega depois de hero.css (vidro.css e o ultimo
   arquivo da cadeia), entao vence sem !important. */
@media (min-width: 1200px){
    .hero-split{
        margin-top: -104px;
    }
    .hero-split--foto-cheia{
        height: 600px;
    }
    .hero-split--foto-cheia .hero-split__texto{
        padding-top: 132px;
    }
}