/*
Carrinho lateral (mini-cart), plugin Side Cart Premium (Xoo WSC). Camada
100% aditiva por cima do CSS do proprio plugin (xoo-wsc-style.css): nunca
sobrescrevemos posicionamento/animacao/JS do plugin (isso quebraria o
abrir/fechar), so aparencia (cor, tipografia, espacamento, tamanho de
elementos).

Transplante estrutural do carrinho lateral do Ourigen (React/Next.js,
CartDrawer.tsx), pedido do Ricardo em 21/08/2026: mesma arquitetura visual
(header/lista-com-scroll/rodape fixo, card de item, pill de quantidade,
CTA cheio + link fantasma), paleta e tipografia proprias do EQMS.

Causa raiz real do bug relatado (scroll horizontal, imagem "vazando" sobre
o nome do produto), confirmada lendo o CSS do proprio plugin
(xoo-wsc-style.css): ".xoo-wsc-img-col img{width:100%;height:auto}" sem
NENHUM limite de largura no ".xoo-wsc-img-col" pai (sem width/flex-basis/
flex-shrink) — o tamanho da miniatura ficava dependente do espaco sobrando
na linha flex, instavel conforme o nome do produto. A coluna de texto
(".xoo-wsc-sm-left") ja tinha min-width:0 (o plugin acertou essa parte),
o problema real era a coluna de imagem sem trava nenhuma.
*/

/* ===== Overflow horizontal do SITE INTEIRO (achado real, 21/08/2026,
   reproduzido ao vivo via Playwright em 360px: document.documentElement.
   scrollWidth = 663 contra clientWidth = 345, 318px de overflow real,
   causando barra de rolagem horizontal fantasma em QUALQUER página, não só
   checkout). Causa raiz: o painel FECHADO do carrinho lateral (Xoo Side
   Cart) fica posicionado via "right:-350px" (largura configurada no admin
   do plugin, ver achado abaixo sobre nunca sobrescrever essa largura) —
   um position:fixed com right negativo empurra a caixa pra FORA da tela,
   mas o Chrome ainda conta essa caixa (calculada contra o initial
   containing block) na área de rolagem do documento, mesmo ela nunca
   aparecendo visualmente. overflow-x:hidden no html/body não afeta layout
   nenhum (nada aqui depende de rolagem horizontal de propósito), só corta
   fora essa barra fantasma — mesmo padrão recomendado pra esse bug
   conhecido de off-canvas panels com position:fixed. Vive neste arquivo
   (não em 02-base.css, fora do território) porque a causa é o painel deste
   componente; carrega em toda página (enqueue incondicional). */
html,
body{
    overflow-x: hidden;
}

/* ===== Painel (Container) =====
   Mantém position:fixed/display:flex/transition/width do plugin intactos
   (não redeclarados aqui) — só aparência real (cor/sombra/borda).

   ACHADO REAL (21/08/2026, Ricardo testou ao vivo: carrinho ficava
   travado, aberto, vazando em toda página): a largura de fechado do
   plugin é hardcoded em templates/global/inline-style.php como
   "right: -{largura configurada no admin}px" (350px aqui), calculado a
   partir da MESMA largura configurada, não recalculado dinamicamente. Uma
   tentativa anterior desta camada sobrescreveu ".xoo-wsc-container" pra
   max-width:420px — 70px a mais do que o "right:-350px" cobre — deixando
   uma tira do painel sempre visível na tela, em qualquer página, mesmo
   fechado. NUNCA sobrescrever a largura do painel aqui: usar exatamente a
   largura que o admin do plugin já tem configurada (350px, suficiente,
   próximo dos 400px da referência Ourigen; mudar isso exigiria mudar a
   configuração do plugin, não CSS). */
.xoo-wsc-container{
    background-color: var(--cor-linho);
    box-shadow: -12px 0 48px rgba(51, 41, 31, 0.28);
    border-left: 1px solid var(--vidro-borda-escura);
}
.xoo-wsc-container *{
    box-sizing: border-box;
}
/* Rede de segurança extra contra overflow horizontal (achado real acima):
   nenhum filho pode gerar barra de rolagem lateral no painel inteiro. */
.xoo-wsc-container,
.xoo-wsc-body{
    overflow-x: hidden;
}

/* ===== Cabeçalho ===== */
.xoo-wsc-header{
    padding: var(--espaco-lg) var(--espaco-lg) var(--espaco-md);
    border-bottom: 1px solid var(--vidro-borda-escura);
    background: var(--cor-linho-2);
}
.xoo-wsch-top{
    justify-content: space-between;
    width: 100%;
}
.xoo-wsch-text{
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cor-cacau);
}
.xoo-wsch-close{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raio-pill);
    background: var(--cor-branco);
    color: var(--cor-cacau-70);
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}
.xoo-wsch-close:hover{
    background: var(--cor-terracota);
    color: var(--cor-branco);
}

/* ===== Corpo / lista de produtos ===== */
.xoo-wsc-body{
    padding: var(--espaco-md) var(--espaco-lg);
    background: var(--cor-linho);
}
.xoo-wsc-products{
    display: flex;
    flex-direction: column;
    gap: var(--espaco-sm);
}

/* Card de cada item — mesma lógica do CartDrawer de referência (card com
   fundo/borda sutil), adaptado pra paleta clara do EQMS. */
.xoo-wsc-product{
    border: 1px solid var(--vidro-borda-escura);
    border-bottom: 1px solid var(--vidro-borda-escura);
    border-radius: var(--raio-sm);
    background: var(--cor-branco);
    padding: var(--espaco-sm);
    align-items: flex-start;
    gap: var(--espaco-sm);
}

/* Miniatura — fix real do bug: tamanho fixo, nunca encolhe, imagem sempre
   recortada dentro da caixa (nunca estica o layout). */
.xoo-wsc-img-col{
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: var(--raio-sm);
    overflow: hidden;
    background: var(--cor-linho-2);
    align-self: flex-start;
}
.xoo-wsc-img-col a{
    display: block;
    width: 100%;
    height: 100%;
}
.xoo-wsc-img-col img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xoo-wsc-sum-col{
    padding-left: 0;
    gap: var(--espaco-2xs);
    min-width: 0;
}
.xoo-wsc-sm-info{
    gap: var(--espaco-sm);
}

span.xoo-wsc-pname,
span.xoo-wsc-pname a{
    font-family: var(--fonte-corpo);
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--cor-cacau);
    line-height: 1.3;
    /* Nome quebra livremente (nunca corta com reticências, mesma decisão
       da referência) — a defesa contra overflow é a miniatura fixa acima
       e o min-width:0 que o próprio plugin já garante em .xoo-wsc-sm-left. */
    overflow-wrap: break-word;
}

.xoo-wsc-pprice{
    font-size: var(--texto-xs);
    color: var(--cor-cacau-70);
}
.xoo-wsc-pprice .woocommerce-Price-amount{
    color: var(--cor-terracota);
    font-weight: 700;
}

/* Pill de quantidade */
.xoo-wsc-qty-box{
    margin-top: var(--espaco-2xs);
    max-width: 96px;
    border: 1px solid var(--vidro-borda-escura);
    border-radius: var(--raio-sm);
    background: var(--cor-linho-2);
    overflow: hidden;
}
span.xoo-wsc-chng{
    color: var(--cor-cacau-70);
    transition: background-color 0.2s ease, color 0.2s ease;
}
span.xoo-wsc-chng:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
}
input[type="number"].xoo-wsc-qty{
    color: var(--cor-cacau);
    font-weight: 700;
}

.xoo-wsc-sm-right{
    max-width: none;
    align-items: flex-end;
    gap: var(--espaco-xs);
}
span.xoo-wsc-smr-del{
    color: var(--cor-cacau-45);
    font-size: var(--texto-sm);
    transition: color 0.2s ease;
}
span.xoo-wsc-smr-del:hover{
    color: var(--cor-terracota);
}
span.xoo-wsc-smr-ptotal{
    font-family: var(--fonte-display);
    font-weight: 700;
    color: var(--cor-cacau);
    white-space: nowrap;
}

/* Estado vazio (o plugin injeta texto próprio; só tipografia/cor) */
.xoo-wsc-body p{
    color: var(--cor-cacau-70);
    text-align: center;
    padding: var(--espaco-2xl) 0;
}

/* ===== Rodapé fixo ===== */
.xoo-wsc-footer{
    background: var(--cor-linho-2);
    border-top: 1px solid var(--vidro-borda-escura);
    box-shadow: 0 -8px 32px rgba(51, 41, 31, 0.12);
    padding: var(--espaco-md) var(--espaco-lg) var(--espaco-lg);
}
.xoo-wsc-ft-totals{
    margin-bottom: var(--espaco-md);
}
.xoo-wsc-ft-amt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--espaco-2xs);
}
.xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-label,
.xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-value{
    font-size: var(--texto-sm);
    color: var(--cor-cacau-70);
}
.xoo-wsc-ft-amt-total{
    padding-top: var(--espaco-sm);
    margin-top: var(--espaco-2xs);
    border-top: 1px solid var(--vidro-borda-escura);
}
.xoo-wsc-ft-amt-total .xoo-wsc-ft-amt-label{
    font-size: var(--texto-base);
    color: var(--cor-cacau-70);
    font-weight: 600;
}
.xoo-wsc-ft-amt-total .xoo-wsc-ft-amt-value{
    font-family: var(--fonte-display);
    font-size: var(--texto-lg);
    font-weight: 700;
    color: var(--cor-cacau);
}

/* Botões do rodapé — 3 no HTML do plugin (Comprar mais / Ver carrinho /
   Finalizar). Hierarquia igual à referência: 1 CTA cheio em destaque
   (Finalizar) + os outros 2 como ações secundárias discretas empilhadas
   acima dele, não lado a lado (o texto "COMPRAR MAIS"/"VER CARRINHO" ao
   lado do CTA principal ficava espremido — empilhar resolve sem precisar
   de mais HTML). */
.xoo-wsc-ft-buttons-cont{
    display: flex;
    flex-direction: column-reverse;
    gap: var(--espaco-sm);
}
.xoo-wsc-ft-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--espaco-sm) var(--espaco-md);
    border-radius: var(--raio-pill);
    font-weight: 700;
    font-size: var(--texto-sm);
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.xoo-wsc-ft-btn-checkout{
    background: var(--cor-mata);
    color: var(--cor-branco);
    padding-block: var(--espaco-sm);
    order: 3;
}
.xoo-wsc-ft-btn-checkout:hover{
    background: var(--cor-cacau);
}
.xoo-wsc-ft-btn-cart{
    background: transparent;
    border: 1px solid var(--vidro-borda-escura);
    color: var(--cor-cacau-70);
    order: 2;
}
.xoo-wsc-ft-btn-cart:hover{
    border-color: var(--cor-mata);
    color: var(--cor-mata);
}
.xoo-wsc-ft-btn-continue{
    background: transparent;
    border: none;
    color: var(--cor-cacau-70);
    font-weight: 600;
    order: 1;
}
.xoo-wsc-ft-btn-continue:hover{
    color: var(--cor-mata);
    text-decoration: underline;
}

/* Sem media query de largura aqui: o próprio plugin já resolve responsivo
   (width:90% com teto em max-width:{largura do admin}px, ver achado acima)
   — qualquer override de largura, mesmo só em mobile, reabre o mesmo bug
   do carrinho travado, porque o "right:-Npx" de fechado nunca acompanha. */