/*
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: vira vidro fixo ao rolar (classe alternada por main.js) =====
   Estado padrão (topo da página): header sólido normal, sem mudança.
   Estado .header--vidro (JS adiciona depois de ~40px de rolagem): fixa no
   topo, vidro claro sobre o conteúdo que passa por baixo. */
#site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
/* Header já é verde-mata sólido por padrão (header-footer.css). No scroll,
   vira uma versão translúcida do MESMO verde (não branco) — só ganha vidro,
   não muda de cor. */
#site-header.header--vidro{
    background: rgba(47, 74, 51, 0.85);
    backdrop-filter: var(--vidro-blur-lg) saturate(1.3);
    -webkit-backdrop-filter: var(--vidro-blur-lg) saturate(1.3);
    box-shadow: var(--sombra-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===== Menu mobile: painel em vidro sobre o conteúdo (não mais bloco sólido) ===== */
.menu-mobile.is-aberto{
    background: rgba(244, 239, 229, 0.96);
    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);
}