/* ===== Produto único ===== */

/* CORRIGIDO 24/08/2026 (auditoria de bugs 360, achado latente): o tema
   inteiro nunca definiu a regra padrao de .screen-reader-text em nenhum
   arquivo (confirmado por busca exaustiva). O WooCommerce core embrulha
   textos so-pra-leitor-de-tela nessa classe (ex: "Price range: X through Y"
   no preco em faixa de produto variavel, e o alerta nativo de reset de
   variacao), esperando que o TEMA forneca o CSS que os esconde
   visualmente. Sem essa regra, esse texto aparece cru na tela pra qualquer
   produto com variacao (ex: Prata Coloidal, hoje em rascunho, mas pronto
   pra publicar). Padrao oficial do WordPress core (mesma regra usada em
   qualquer tema padrao), nao inventado aqui. */
.screen-reader-text{
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.breadcrumb-produto{
    font-size: var(--texto-sm);
    color: var(--cor-cacau-70);
    margin-bottom: var(--espaco-lg);
}
.breadcrumb-produto a{ color: var(--cor-mata); }
.breadcrumb-produto span[aria-hidden]{ margin: 0 var(--espaco-2xs); }

.produto-unico__grade{
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--espaco-2xl);
    margin-bottom: var(--espaco-2xl);
}
@media (max-width: 767px){
    .produto-unico__grade{
        grid-template-columns: 1fr;
        gap: var(--espaco-lg);
    }
}

/*
Redesign minimalista/futurista (07/08/2026, 2a passada — a 1a rodada de
micro-interacoes foi julgada sutil demais pelo Ricardo, "nem percebi
mudanca"). Glow ambiente: forma borrada e colorida atras da galeria/resumo,
usando as cores de marca (salvia + barro queimado claro, nunca saturada
demais), que da ao vidro algo real de complexidade pra revelar por tras —
sem isso, "vidro sobre foto" nao tem contraste nenhum pra aparecer. Mesmo
motivo visual que sites de referencia (Aceternity, Linear, Vercel) usam
"aurora"/"spotlight" atras de elementos com blur: sem cor de fundo, glass
morphism fica invisivel.
*/
.produto-unico__grade::before{
    content: "";
    position: absolute;
    top: -15%;
    left: -8%;
    width: 75%;
    height: 85%;
    background:
        radial-gradient(circle at 30% 30%, rgba(156, 178, 154, 0.75), transparent 62%),
        radial-gradient(circle at 75% 65%, rgba(208, 138, 102, 0.55), transparent 58%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}
.produto-unico__galeria,
.produto-unico__resumo{
    position: relative;
    z-index: 1;
}
/*
Achado real de causa raiz (07/08/2026, 3a passada — Ricardo reportou titulo
quebrando "uma palavra por linha" mesmo em tela larga de 1920px). NAO era
bug do redesign: o CSS legado do proprio WooCommerce core forca
".summary{ width:48%; float:right }" (par da regra ".images{width:48%;
float:left}" ja documentada e corrigida abaixo, mesma origem,
woocommerce-layout.css). ".produto-unico__resumo" carrega a classe nativa
"summary" (confirmado no markup: "produto-unico__resumo summary
entry-summary"), entao sempre herdou esse 48% por cima da propria coluna do
grid (48% de ~522px = ~250px) — ja estava errado antes deste redesign,
so nao ficava obvio com o titulo menor (--texto-2xl). Mesma tecnica ja
usada pra corrigir ".images" abaixo, aplicada aqui pro lado que faltava.
*/
.produto-unico__grade .produto-unico__resumo{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/*
Galeria, markup nativo do WooCommerce (woocommerce-product-gallery), só re-estilizado.

Achado do Retalhador (auditoria UX/UI, medido): a galeria ocupava só 263.8px de 1440px
de tela (menos de 18%), com 367px de vazio bege entre a foto e o texto. Causa raiz: o
próprio CSS legado do WooCommerce (woocommerce-layout.css) aplica
".woocommerce div.product div.images{ float:left; width:48%; }", regra herdada do
layout antigo em duas colunas com float, de antes da existência de ".produto-unico__grade"
(grid). Como ".woocommerce-product-gallery" carrega a classe "images", o WooCommerce
colapsava a galeria pra 48% da largura da própria coluna do grid (que já é ~50% da
página), sobrando ~287px de fundo bege vazio dentro da coluna. Correção: forçar a
galeria a ocupar 100% da coluna do grid, ignorando o float/largura legados.
*/
.produto-unico__grade .produto-unico__galeria .woocommerce-product-gallery.images{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
/* Raio subiu de --raio-md pra --raio-lg (Auditoria de Design Visual, item
   "FAQ e wrapper da galeria", EQMS-AUDITORIA-DESIGN-VISUAL.md, 24/07/2026):
   alinha com o hero e o card de produto, que ja usam o raio maior. Só troca
   de token, sem mais nenhuma mudança no wrapper. */
.woocommerce-product-gallery__wrapper{
    background: var(--cor-linho-2);
    border-radius: var(--raio-lg);
    overflow: hidden;
}
/*
Redesign minimalista/futurista (07/08/2026, 2a passada) — achado real: o
backdrop-filter direto em ".woocommerce-product-gallery__wrapper" quebrava a
medicao de largura que o JS do FlexSlider (nativo do WooCommerce) faz nesse
mesmo elemento, fazendo a galeria inteira "explodir" pra milhares de pixels
de largura (bug confirmado ao vivo, capturado via getBoundingClientRect antes
de reverter). O vidro precisa morar num elemento que o FlexSlider NUNCA mede
nem toca — aqui, ".produto-unico__galeria" (o container do grid, um nivel
acima), como uma moldura ao redor da galeria em vez de dentro dela.
*/
.produto-unico__galeria{
    /* min-width:0 e a correcao de verdade (achado 07/08/2026, 3a passada):
       o item de grid, por padrao, nunca encolhe abaixo do min-content do
       proprio conteudo (min-width:auto do spec de CSS Grid) — e o
       FlexSlider nativo do WooCommerce cria uma trilha internamente MUITO
       mais larga que a tela (~4400px, pensada pra ficar escondida atras de
       overflow:hidden mais fundo), que sem isso arrasta a coluna inteira
       junto, espremendo ".produto-unico__resumo" pra uma fracao do espaco
       real (medido ao vivo: 251px em vez de ~520px esperados, causa raiz
       do titulo quebrando 1 palavra por linha reportado pelo Ricardo). */
    min-width: 0;
    padding: var(--espaco-sm);
    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-md);
}
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image{
    aspect-ratio: 1 / 1;
}
.woocommerce-product-gallery__image{
    display: flex;
    align-items: center;
    justify-content: center;
}
.woocommerce-product-gallery__image img{
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
.woocommerce-product-gallery__image img.wp-post-image{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.flex-control-thumbs{
    display: flex;
    gap: var(--espaco-xs);
    margin-top: var(--espaco-sm);
    list-style: none;
}
.flex-control-thumbs li{
    width: 64px;
}
.flex-control-thumbs img{
    border-radius: var(--raio-sm);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover{
    opacity: 1;
    transform: translateY(-2px);
}

/* Resumo (título, preço, short description, variações, add-to-cart) */
.produto-unico__resumo .product_title{
    /* Redesign minimalista/futurista (07/08/2026, 2a passada): titulo subiu
       de --texto-2xl. Primeira tentativa usou --texto-3xl (56px no
       desktop), mas quebrou nome de produto real em 5 linhas de 1 palavra
       cada ("Creme Dental Herbal Adulto - 80g", coluna de ~560px) — tamanho
       intermediario customizado (max 44px, entre 2xl e 3xl) da presenca
       maior sem quebrar nome de produto comprido, que e maioria do catalogo
       (ver EQMS-CATALOGO-PESO-RECADASTRO.md pra outros nomes longos reais). */
    font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
    line-height: 1.1;
    margin-bottom: var(--espaco-md);
}
.produto-unico__resumo .price{
    font-size: var(--texto-2xl);
    font-weight: 700;
    display: block;
    margin-bottom: var(--espaco-md);
}
/* Redesign iOS-minimalista (31/07/2026, pedido do Ricardo: "mais harmonico e
   minimalista, como uma page do iOS"). Corrigido de passagem um bug real: o
   preco saia num dourado/oliva (rgb(149,142,9)) em vez de --cor-mata, heranca
   do CSS padrao do WooCommerce core (".woocommerce-Price-amount"), que carrega
   depois do tema e vencia por especificidade. Achado 01/08/2026 (auditoria
   de acessibilidade): a correcao por especificidade nao cobria faixa de
   preco de produto variavel ("R$106,00 - R$238,00"), o markup interno do
   Woo pra range as vezes ganha uma combinacao de classes mais especifica
   que a nossa. !important garante que funciona em qualquer variacao de
   markup do proprio plugin (simples, variavel, com/sem promocao). */
.produto-unico__resumo .price,
.produto-unico__resumo .price .woocommerce-Price-amount,
.produto-unico__resumo .price bdi{
    color: var(--cor-mata) !important;
}

/*
Achado real (Swarm PDP, 12/08/2026, auditoria ao vivo com getComputedStyle):
".stock.out-of-stock" saia em rgb(170,0,0) (var(--wc-red), vermelho padrao
do proprio core do WooCommerce, woocommerce.css), cor que nao existe em
lugar nenhum da paleta da marca (DESIGN.md nao tem vermelho). Mesmo padrao
de bug ja corrigido 2x pelo Swarm Global UX em outros componentes (mini-
carrinho, paginacao): selecionador nunca declarado no tema, entao o CSS do
proprio plugin/core vencia sem disputa. Confirmado ao vivo em produto real
sem estoque (Intimaloe - Sabonete Intimo, ID 189): antes vermelho puro,
sem nenhuma relacao com a marca. Terracota e o unico acento "de alerta"
que a paleta permite (DESIGN.md: "A Regra do Acento Raro"), uso pontual
aqui e coerente com esse papel. Quando o produto ESTA em estoque, o texto
de disponibilidade normalmente fica vazio por padrao do WooCommerce
(produto nao gerencia quantidade, ver PRODUCT.md) - comportamento nativo
confirmado e mantido, condizente com o minimalismo do design system
("confianca e textural, nao anunciada"), nao e bug.

!important necessario (mesmo motivo ja documentado acima pro preco e pros
chips de variacao selecionados): a regra do proprio core do WooCommerce
(".woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product
.out-of-stock", woocommerce.css) tem especificidade maior que o seletor
daqui (o elemento "div" extra dentro do :where() ainda soma peso, so o
:where() em si e neutro), confirmado ao vivo com getComputedStyle antes e
depois do fix (produto real sem estoque, Intimaloe - Sabonete Intimo, ID
189): sem !important o vermelho padrao do plugin continuava vencendo.
*/
.produto-unico__resumo .stock{
    display: inline-block;
    margin-bottom: var(--espaco-md);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    color: var(--cor-cacau-70);
}
.produto-unico__resumo .stock.out-of-stock{
    color: var(--cor-terracota) !important;
}

/*
Selecionador de variacao (plugin Variation Swatches for WooCommerce, classes
"wvs-style-squared"/"button-variable-item"): o plugin nao tem nenhum CSS
proprio no tema (100% estilo default dele, caixa quadrada cinza), por isso a
sobrescrita abaixo parte do zero. Vira um chip tipo "segmented control" do
iOS: pilula com borda fina, preenchimento solido na selecao, sem sombra.
*/
.produto-unico__resumo table.variations{
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--espaco-md);
}
.produto-unico__resumo table.variations tr + tr th,
.produto-unico__resumo table.variations tr + tr td{
    padding-top: var(--espaco-sm);
}
.produto-unico__resumo table.variations th.label{
    display: block;
    text-align: left;
    padding: 0 0 var(--espaco-xs);
    font-size: var(--texto-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cor-cacau-70);
}
.produto-unico__resumo table.variations td.value{
    padding: 0;
}
.produto-unico__resumo .button-variable-items-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}
.produto-unico__resumo .button-variable-item{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 40px;
    padding: 0 var(--espaco-md);
    border: 1.5px solid var(--cor-linho-2);
    border-radius: var(--raio-pill);
    background: var(--cor-branco);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Redesign minimalista/futurista (07/08/2026): leve elevacao no hover (nao
   selecionado), mesmo vocabulario de sombra quente do resto do site
   (--sombra-sm), em vez de so trocar a cor da borda. */
.produto-unico__resumo .button-variable-item:hover:not(.selected):not([aria-checked="true"]){
    box-shadow: var(--sombra-sm);
    transform: translateY(-1px);
}
.produto-unico__resumo .button-variable-item .variable-item-span{
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    color: var(--cor-cacau);
    transition: color 0.2s ease;
}
.produto-unico__resumo .button-variable-item:hover{
    border-color: var(--cor-mata);
}
/*
!important necessario aqui: o CSS do proprio plugin (frontend.min.css) tem
uma regra mais especifica pro estado ".selected" que ganha por especificidade
mesmo carregando antes (".variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock)",
7 classes/pseudo-classes contra as 3 daqui), mesmo padrao ja usado neste
arquivo pra vencer CSS legado/de plugin (ver ".woocommerce-product-gallery.images"
acima).
*/
.produto-unico__resumo .button-variable-item[aria-checked="true"],
.produto-unico__resumo .button-variable-item.selected{
    background: var(--cor-mata) !important;
    border-color: var(--cor-mata) !important;
    box-shadow: none !important;
}
.produto-unico__resumo .button-variable-item[aria-checked="true"] .variable-item-span,
.produto-unico__resumo .button-variable-item.selected .variable-item-span{
    color: var(--cor-branco) !important;
}
.produto-unico__resumo .reset_variations{
    display: inline-block;
    margin-top: var(--espaco-xs);
    font-size: var(--texto-xs);
    color: var(--cor-cacau-70);
}
.produto-unico__resumo .woocommerce-product-details__short-description{
    margin-bottom: var(--espaco-lg);
    color: var(--cor-cacau-70);
}
.produto-mais-detalhes{
    display: inline-block;
    margin-top: var(--espaco-sm);
}

/*
Área de frete/entrega (Swarm PDP, 12/08/2026). Bloco estático e honesto,
ver justificativa completa no comentário datado em
woocommerce/content-single-product.php (hook "woocommerce_after_add_to_cart_form",
prioridade 5). Reaproveita o mesmo ícone/copy já aprovados da faixa de
confiança da Home (front-page.php), cartão simples sobre --cor-linho-2
(nunca vidro/blur aqui — "A Regra do Vidro Só-Sobre-Foto", DESIGN.md, este
bloco fica sobre fundo liso, não sobre foto).
*/
.produto-frete-info{
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-sm);
    margin-bottom: var(--espaco-lg);
    padding: var(--espaco-sm) var(--espaco-md);
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
}
.produto-frete-info .icone{
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 2px;
    color: var(--cor-mata);
    flex-shrink: 0;
}
.produto-frete-info strong{
    display: block;
    font-family: var(--fonte-corpo);
    font-size: var(--texto-sm);
    color: var(--cor-cacau);
}
.produto-frete-info span{
    display: block;
    font-size: var(--texto-xs);
    color: var(--cor-cacau-70);
}
/* Redesign minimalista/futurista (07/08/2026, 2a passada): form.cart (o
   proprio wrapper nativo do WooCommerce em volta do stepper de quantidade
   + botao Adicionar/Comprar, ja existe no DOM, nao precisa de div nova)
   virou um cartao de vidro real, flutuando sobre o glow ambiente definido
   em .produto-unico__grade::before — esta e a peca que precisa ser
   inequivocamente "diferente de antes" ja no primeiro olhar. */
.produto-unico__resumo form.cart{
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-md);
    padding: var(--espaco-md) var(--espaco-lg);
    margin-bottom: var(--espaco-lg);
    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-md);
}
.produto-unico__resumo form.cart .quantity{
    margin-right: 0;
}

/*
Stepper de quantidade "- N +" (achado do Retalhador, Fase 1, Média-Alta):
o <input type="number"> nativo do WooCommerce não tinha nenhum botão de
incrementar/decrementar visível. Reaproveita o mesmo padrão visual do
stepper do mini-carrinho (plugin Side Cart Premium, .xoo-wsc-qty-box: caixa
única "- valor +"), com HTML/CSS próprios do tema (os botões .produto-qtd-btn
são injetados via JS mínimo em content-single-product.php, que só cuida do
+1/-1 e despacha "change" no input nativo, sem plugin/dependência nova).
float:none + display:inline-flex sobrescreve o ".quantity{ float:left }" do
CSS legado do próprio WooCommerce (mesmo problema de layout já documentado
na galeria, acima).
*/
.produto-unico__resumo .quantity{
    display: inline-flex;
    align-items: stretch;
    float: none;
    border: 1.5px solid var(--cor-mata);
    border-radius: var(--raio-pill);
    overflow: hidden;
    margin: 0 var(--espaco-sm) 0 0;
}
.produto-unico__resumo .quantity input.qty{
    width: 46px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    text-align: center;
    background: var(--cor-branco);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    color: var(--cor-cacau);
    -moz-appearance: textfield;
}
.produto-unico__resumo .quantity input.qty::-webkit-outer-spin-button,
.produto-unico__resumo .quantity input.qty::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
.produto-qtd-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 44px;
    border: none;
    background: var(--cor-linho-2);
    color: var(--cor-mata);
    font-size: var(--texto-md);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.produto-qtd-btn:hover,
.produto-qtd-btn:focus-visible{
    background: var(--cor-mata);
    color: var(--cor-branco);
}

/*
Estado desabilitado do botão "Adicionar" em produto variável sem variação
escolhida (achado do Retalhador, Fase 1, Média). Confirmado ao vivo na Fase 2
(Prata Coloidal, campos Litros+PPM) que o clique NÃO fica mudo: o WooCommerce
core já dispara um window.alert() nativo com
"Selecione uma das opções do produto antes de adicioná-lo ao carrinho"
(wc_add_to_cart_variation_params.i18n_make_a_selection_text, intacto, não
suprimido por nenhum CSS/JS do tema). O relato da Fase 1 de "nenhum feedback"
foi um falso negativo do método de teste (Playwright descarta dialogs
nativos silenciosamente quando não há um listener "dialog" registrado) e não
um bug real de funcionalidade. O que faltava de fato era só a AFORDÂNCIA
visual pré-clique: reforçamos aqui o estado ".disabled" pra ficar
inequivocamente "não clicável ainda", como pedido no item.
*/
.produto-unico__resumo .single_add_to_cart_button.disabled{
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    filter: grayscale(35%);
}
.produto-unico__resumo .single_add_to_cart_button.disabled.wc-variation-selection-needed{
    color: transparent !important;
    position: relative;
    /* O botão original mede a própria largura pelo texto "ADICIONAR" (que
       continua no DOM, só com color:transparent, pseudo-elemento não
       influencia o box do pai). "Escolha as opções" é mais longo, por isso
       o min-width abaixo evita o texto de troca vazar pra fora da pílula. */
    min-width: 200px;
}
.produto-unico__resumo .single_add_to_cart_button.disabled.wc-variation-selection-needed::after{
    content: "Escolha as opções";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-branco);
    font-family: var(--fonte-corpo);
    font-weight: 700;
    font-size: var(--texto-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Compartilhar redes sociais (ver woocommerce/content-single-product.php,
   hook woocommerce_after_add_to_cart_form) */
.redes-sociais-produto{
    display: flex;
    align-items: center;
    gap: var(--espaco-sm);
    margin-top: var(--espaco-lg);
    list-style: none;
    padding: 0;
}
/* Reaproveitado dentro de .conteudo-pagina no post de blog (single.php, item
   "compartilhar" da Fase 2); a regra genérica ".conteudo-pagina ul" (mais
   específica que a de cima, institutional.css carrega depois deste arquivo)
   forçava marcador de lista e recuo à esquerda. Seletor mais específico aqui
   pra garantir que vence independente da ordem de carregamento do CSS. */
.conteudo-pagina .redes-sociais-produto{
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
}
.redes-sociais-produto__label{
    font-size: var(--texto-sm);
    font-weight: 700;
    color: var(--cor-cacau-70);
}
.redes-sociais-produto a{
    /* Ricardo (07/08/2026, 3a passada): "o botao das redes sociais... tem
       que crescer esse tamanho" — subiu de 32px pra 44px (bate com o
       minimo de toque ja usado em outros lugares do tema) e ganhou o
       mesmo vidro sutil do resto do redesign em vez do preenchimento
       solido --cor-linho-2 anterior. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vidro-bg-claro);
    backdrop-filter: var(--vidro-blur-sm);
    -webkit-backdrop-filter: var(--vidro-blur-sm);
    border: 1px solid var(--vidro-borda-clara);
    color: var(--cor-mata);
    font-size: 18px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.redes-sociais-produto a:hover{
    background: var(--cor-mata);
    color: var(--cor-branco);
    transform: translateY(-2px);
}

/* ===== Abas do produto ===== */
/*
Redesign minimalista/futurista (07/08/2026, 3a passada): Ricardo aprovou o
topo (galeria/preco/CTA) mas apontou que a aba "Detalhes do produto" ficou
pra tras — "meio quadrada", "nao bem espacada", sem nenhum do vidro/glow do
resto da pagina. Mesma receita aplicada aqui: glow ambiente proprio (mais
sutil que o do topo, nao pode competir com ele) + card de vidro real
envolvendo abas+conteudo, em vez de texto solto direto no fundo da pagina.
*/
.woocommerce-tabs{
    position: relative;
    margin-bottom: var(--espaco-2xl);
    padding: var(--espaco-xl) var(--espaco-xl) var(--espaco-2xl);
    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);
    overflow: hidden;
}
@media (max-width: 600px){
    .woocommerce-tabs{
        padding: var(--espaco-lg) var(--espaco-md) var(--espaco-xl);
    }
}
.woocommerce-tabs::before{
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 45%;
    height: 90%;
    background: radial-gradient(circle, rgba(156, 178, 154, 0.4), transparent 65%);
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}
.woocommerce-tabs > *{
    position: relative;
    z-index: 1;
}
.woocommerce-tabs ul.tabs{
    display: flex;
    gap: var(--espaco-xs);
    border-bottom: none;
    margin-bottom: var(--espaco-lg);
    flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li a{
    display: inline-block;
    padding: var(--espaco-xs) var(--espaco-lg) var(--espaco-sm);
    font-weight: 700;
    color: var(--cor-cacau-70);
    border-radius: var(--raio-pill);
    border-bottom: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-tabs ul.tabs li.active a{
    color: var(--cor-branco);
    background: var(--cor-mata);
}
/*
Área de toque das abas em mobile (achado do Retalhador, Fase 1, Baixa):
medida ao vivo em 390px, a altura real do <a> ficava em ~40px (li ~42px),
abaixo do mínimo recomendado de 44px. Reforça só no breakpoint mobile pra
não alterar a densidade visual do desktop, que já estava adequada.
*/
@media (max-width: 767px){
    /* Achado real (07/08/2026, 3a passada): esta regra de mobile e de ANTES
       do redesign (quando a aba era so texto sublinhado, sem fundo, entao
       0 de padding horizontal nao importava). Com a aba virando pilula com
       fundo solido, herdar "padding: X 0 Y" cortava o texto na propria
       curva da pilula ("Detalhes do produt[o]" cortado, achado pelo
       Ricardo). Mantem a altura minima de toque, mas preserva o padding
       horizontal do estado normal em vez de zerar. */
    .woocommerce-tabs ul.tabs li a{
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/*
Redesign iOS-minimalista (31/07/2026): a tira de navegacao de abas foi
pensada pra varias abas (Descricao/Avaliacoes/Info adicional); com "Sem
produtos relacionados"/reviews desligados, sobra sempre 1 unica aba
("Detalhes do produto"), e uma tira de navegacao pra escolher entre 1 opcao
so e ruido puro. Some a tira quando so existe 1 <li>, direto em CSS (sem
tocar no template nativo do WooCommerce nem no PHP), o painel continua
visivel normalmente, o link "Ver mais detalhes" (#tab-description) continua
funcionando porque aponta pro painel, nao pra aba.
*/
.woocommerce-tabs ul.tabs:has(li:only-child){
    display: none;
}
.woocommerce-tabs:has(> ul.tabs li:only-child) .woocommerce-Tabs-panel{
    padding-top: 0;
}

/*
Conteudo da aba (campo de descricao do produto, texto do cliente no editor
nativo do WordPress): usa "<p><strong><u>texto</u></strong></p>" pra simular
um subtitulo, unico lugar do site inteiro com texto sublinhado. Aqui so
re-estiliza o padrao ja existente (nao mexe no conteudo/banco de dados):
vira um rotulo de secao discreto, maiusculo, na cor da marca, sem sublinhado.
*/
.woocommerce-Tabs-panel{
    max-width: 68ch;
    /* Achado real (auditoria de responsividade, 01/08/2026): overflow
       horizontal de 97px em 480px causado por texto de conteudo real do
       produto sem espaco depois da virgula ("Acne,frieiras,gengivites...")
       — sem ponto de quebra de linha, o navegador forcava a caixa a
       estourar o container inteiro. overflow-wrap garante que qualquer
       trecho futuro sem espaco (erro de digitacao do cliente no editor)
       quebre a linha em vez de furar o layout, sem alterar o texto em si. */
    overflow-wrap: break-word;
}
.woocommerce-Tabs-panel p{
    color: var(--cor-cacau-70);
    line-height: 1.7;
    margin-bottom: var(--espaco-md);
}
/*
Achado real (Swarm PDP, 12/08/2026): "Principais benefícios:" (e qualquer
outra lista <ul>/<ol> real de conteúdo de produto, cadastrada por vários
fornecedores no catálogo, ex. Óleo Essencial de Laranja ID 1646, Creme
Dental Herbal Adulto ID 1615) renderizava SEM marcador nenhum e SEM recuo
— texto empilhado indistinguível de parágrafo solto, confirmado ao vivo
via screenshot. Causa raiz: "01-reset.css" zera "list-style" globalmente
(reset padrão), e nenhuma regra do tema re-adicionava marcador dentro de
".woocommerce-Tabs-panel" (a página Sobre/institucional já tem o próprio
reforço em ".conteudo-pagina ul", institutional.css, fora do território
deste arquivo — replicado aqui com o mesmo valor de list-style/margem,
mesma receita, escopado só à aba de produto).
*/
.woocommerce-Tabs-panel ul,
.woocommerce-Tabs-panel ol{
    margin: 0 0 var(--espaco-md) var(--espaco-lg);
    color: var(--cor-cacau-70);
}
.woocommerce-Tabs-panel ul{ list-style: disc; }
.woocommerce-Tabs-panel ol{ list-style: decimal; }
.woocommerce-Tabs-panel li{
    line-height: 1.7;
    margin-bottom: var(--espaco-2xs);
}
.woocommerce-Tabs-panel li::marker{
    color: var(--cor-mata);
}
.woocommerce-Tabs-panel p:has(> strong > u){
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--texto-sm);
    color: var(--cor-mata);
    margin-top: var(--espaco-lg);
    margin-bottom: var(--espaco-2xs);
}
.woocommerce-Tabs-panel p:has(> strong > u):first-child{
    margin-top: 0;
}
.woocommerce-Tabs-panel p:has(> strong > u) strong,
.woocommerce-Tabs-panel p:has(> strong > u) u,
.woocommerce-Tabs-panel p:has(> strong > u) em{
    text-decoration: none;
    font-style: normal;
    color: inherit;
}

/* ===== FAQ por produto ===== */
.questions_product{
    background: var(--cor-linho-2);
    border-radius: var(--raio-md);
    padding: var(--espaco-xl);
}
.questions_product h2{
    margin-bottom: var(--espaco-md);
}

/*
===== Cross-sell (upsells + relacionados) =====
Achado do Retalhador: vão vazio de 300px+ antes do rodapé na página de produto, sem
nenhum cross-sell (ex: óleo essencial 10ml sem nada relacionado sugerido). Ver
content-single-product.php (.produto-unico__cross-sell), que chama
woocommerce_upsell_display() e woocommerce_output_related_products() direto, fora da
grade, em seção própria de largura total. As duas reaproveitam a grade/card padrão do
WooCommerce (.grade-produtos / .produto-card, ver product-card.css), então aqui só
cuidamos do respiro e do título da seção; título já herda --fonte-display do h2 global
(ver 02-base.css).

Achado da Fase 2 sobre "Mais produtos" parecer aleatório (Baixa-Média, NÃO
implementado aqui, é dado de catálogo): investigado ao vivo em
Óleo Essencial de Laranja - 10ml. Não é falta de categoria (o produto ESTÁ
em "Óleos Essenciais", confirmado abrindo a categoria) nem bug de template,
wc_get_related_products() do WooCommerce core funciona corretamente por
categoria/tag. A causa real é que a categoria "Lançamentos" (usada só pra
exibir o selo "NOVO") também é uma product_cat de verdade com 29+ produtos de
tipos totalmente diferentes (óleo, sabonete, creme dental, vitamina...), e
esse produto está nela junto com "Óleos Essenciais". Como o algoritmo de
relacionados soma TODAS as categorias em comum sem dar peso a nenhuma, o
"Lançamentos" (categoria grande e heterogênea) domina o resultado e
mascara "Óleos Essenciais" (categoria pequena e coerente). Correção real é
decisão de catálogo/taxonomia (ex: trocar "Lançamentos" de categoria pra
tag, ou excluir esse termo do cálculo de relacionados via
"woocommerce_get_related_product_cat_terms"), fora do território deste
arquivo, documentado pro Ricardo, sem código especulativo aqui.
*/
.produto-unico__cross-sell{
    margin-top: var(--espaco-secao);
}
.produto-unico__cross-sell .upsells.products,
.produto-unico__cross-sell .related.products{
    margin-bottom: var(--espaco-2xl);
}
.produto-unico__cross-sell .upsells.products:last-child,
.produto-unico__cross-sell .related.products:last-child{
    margin-bottom: 0;
}
.produto-unico__cross-sell h2{
    margin-bottom: var(--espaco-lg);
}

/* =====================================================================
   Reestruturação mobile inspirada na Nuture (27/08/2026)
   =====================================================================
   Pedido do Ricardo: replicar ESTRUTURA/espaçamento/hierarquia da página
   de produto da Nuture (nuture.com.br/products/nuture-daily-boost) — nunca
   a cor/tipografia deles (fundo preto, verde limão neon, fonte condensada
   bold). Estudado ao vivo em 390x844 (27/08/2026): foto grande no topo com
   miniatura(s) sobreposta(s) no canto inferior esquerdo, um cartão branco
   logo abaixo cobrindo a base da foto (achado real medido lá: margin-top:
   -24px, border-radius:24px 24px 0 0, background:#fff, SEM box-shadow — a
   leitura de "sobreposição" vem só da cor sólida por cima da foto, não de
   sombra), avaliação+selos+nome dentro do cartão, e barra fixa no rodapé.

   Tudo abaixo é escopado só a mobile/tablet estreito (<=767px pro cartão
   sobreposto, mesmo breakpoint que já colapsa a grade pra 1 coluna acima
   neste arquivo; <=900px pra barra fixa e o ajuste do WhatsApp, pra casar
   exatamente com o breakpoint que cta-whatsapp.css já usa pro botão
   pequeno — os dois precisam se mover juntos). Desktop não muda em nada.

   Sem avaliação com estrelas nem badge de contagem de ingrediente/sabor: a
   Nuture mostra os dois, mas woocommerce_enable_reviews está desligado no
   site inteiro (confirmado via "wp option get woocommerce_enable_reviews"
   = "no") e não existe nenhum campo real de ingrediente/sabor por produto
   no catálogo — fabricar qualquer um dos dois seria inventar dado que o
   EQMS não tem, proibido. Achado registrado no relatório de entrega.
   ===================================================================== */

/* ---- Selos de confiança em pílula (logo abaixo do nome do produto) ----
   Reaproveita os MESMOS 2 selos já aprovados na faixa de confiança da Home
   (front-page.php, $eqms_confianca_itens: ícones "folha"/"escudo"), gerados
   em content-single-product.php (hook woocommerce_single_product_summary,
   prioridade 6). Nenhum selo novo. Escondido em desktop de propósito: só
   faz sentido nesta posição compacta em mobile, o resumo de desktop já tem
   respiro vertical de sobra sem precisar deles aqui. */
.produto-selos-confianca{
    display: none;
    list-style: none;
    margin: 0 0 var(--espaco-md);
    padding: 0;
}
@media (max-width: 767px){
    .produto-selos-confianca{
        display: flex;
        flex-wrap: wrap;
        gap: var(--espaco-xs);
    }
    .produto-selos-confianca li{
        display: inline-flex;
        align-items: center;
        gap: var(--espaco-2xs);
        padding: var(--espaco-2xs) var(--espaco-sm);
        background: var(--cor-linho-2);
        border-radius: var(--raio-pill);
        font-family: var(--fonte-corpo);
        font-size: var(--texto-xs);
        font-weight: 700;
        color: var(--cor-cacau);
    }
    .produto-selos-confianca .icone{
        width: 14px;
        height: 14px;
        color: var(--cor-mata);
        flex-shrink: 0;
    }
    .produto-selos-confianca .icone svg{
        width: 100%;
        height: 100%;
    }
}

/* ---- Cartão sobreposto (foto + resumo em camadas, só mobile) ----
   Acima de 767px a grade continua 2 colunas lado a lado, sem NENHUMA
   mudança (glow/vidro do redesign de 07/08 intactos); só abaixo desse
   breakpoint (mesmo já usado pra colapsar a grade em 1 coluna, ver regra
   ".produto-unico__grade" no topo do arquivo) o resumo sobe por cima da
   base da foto. */
@media (max-width: 767px){
    .produto-unico__grade{
        gap: 0;
    }

    /* Foto edge-to-edge: sem a moldura de vidro (padding/borda/blur) que o
       desktop usa — em mobile a Nuture usa a foto ocupando a largura
       cheia, sem respiro ao redor, pro cartão conseguir "morder" a base
       dela. Cantos de baixo quadrados de propósito: ficam por baixo do
       cartão que sobrepõe, arredondá-los seria trabalho que ninguém vê. */
    .produto-unico__galeria{
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .woocommerce-product-gallery__wrapper{
        border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    }

    /* Miniatura(s) sobrepostas no canto inferior esquerdo da foto (achado
       real da Nuture, item 1 do estudo). Não existe aqui um único botão de
       "trocar mídia" como o deles — é a lista nativa do FlexSlider
       (.flex-control-thumbs, só existe no DOM quando o produto tem mais de
       1 imagem, dado real do catálogo, sem fabricar nada quando o produto
       só tem 1 foto) — mesma ideia estrutural, sobreposta em vez de listada
       abaixo da foto. O "bottom" soma folga de propósito pra nunca ficar
       embaixo do cartão sobreposto (que cobre até calc(-1 * --espaco-lg) =
       até 32px da base da foto, no fim do clamp): "--espaco-lg + --espaco-sm"
       garante margem de sobra acima dessa linha em qualquer largura. */
    .produto-unico__galeria .woocommerce-product-gallery{
        position: relative;
    }
    .produto-unico__galeria .flex-control-thumbs{
        position: absolute;
        left: var(--espaco-sm);
        bottom: calc(var(--espaco-lg) + var(--espaco-sm));
        z-index: 2;
        display: flex;
        gap: var(--espaco-2xs);
        max-width: 60%;
        overflow-x: auto;
        margin: 0;
        padding: 0;
    }
    .produto-unico__galeria .flex-control-thumbs li{
        width: 44px;
        flex-shrink: 0;
    }
    .produto-unico__galeria .flex-control-thumbs img{
        border-radius: var(--raio-sm);
        border: 2px solid var(--cor-branco);
        box-shadow: var(--sombra-sm);
        opacity: 1;
    }
    .produto-unico__galeria .flex-control-thumbs img.flex-active{
        border-color: var(--cor-mata);
    }

    /* O cartão em si: sobe por cima da base da foto (achado real medido na
       Nuture: margin-top:-24px, border-radius:24px 24px 0 0, background
       sólido, SEM sombra — a leitura de "camada por cima" vem só da cor
       opaca cobrindo a foto, não de sombra/blur). --raio-lg do EQMS já é
       24px, o mesmo valor exato medido lá, então reaproveita o token em
       vez de cravar um número novo nosso. */
    .produto-unico__resumo{
        position: relative;
        margin-top: calc(-1 * var(--espaco-lg));
        background: var(--cor-branco);
        border-radius: var(--raio-lg) var(--raio-lg) 0 0;
        padding: var(--espaco-lg) var(--espaco-md) var(--espaco-xl);
    }

    /* form.cart (qty + botão nativo) deixa de ser um segundo cartão de
       vidro dentro do cartão branco — vidro sobre superfície sólida branca
       não tem fundo colorido pra "revelar" atrás (mesmo princípio já
       documentado em 00-tokens.css sobre o vidro precisar de cor atrás pra
       aparecer), e cartão dentro de cartão é ruído visual, não hierarquia.
       Vira uma faixa simples com linha fina em cima/embaixo, mesmo
       espírito "hairline" do redesign iOS-minimalista de 31/07/2026. */
    .produto-unico__resumo form.cart{
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-top: 1px solid var(--cor-linho-2);
        border-bottom: 1px solid var(--cor-linho-2);
        border-radius: 0;
        box-shadow: none;
        padding: var(--espaco-md) 0;
        margin: var(--espaco-md) 0;
        width: 100%;
        flex-wrap: wrap;
    }

    /* Mesmo motivo do form.cart acima: ícones de compartilhar em vidro
       sobre cartão branco sólido ficam quase invisíveis (sem cor atrás pra
       o blur revelar). Fundo sólido claro em vez de vidro, só aqui. */
    .redes-sociais-produto a{
        background: var(--cor-linho-2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
    }
}

/* ---- Barra fixa de compra (mobile/tablet estreito) ----
   Miniatura + nome + preço + botão "Adicionar", sempre visível durante o
   scroll da página de produto (pedido explícito do Ricardo — a Nuture só
   mostra a dela depois que o CTA do cartão sai da tela; aqui fica sempre
   visível, mais simples e previsível de testar). O clique só repassa pro
   botão nativo (.single_add_to_cart_button), ver <script> no fim de
   content-single-product.php — nenhuma validação de variação/estoque nem
   AJAX do Side Cart Premium duplicados aqui.

   Breakpoint 900px de propósito igual ao de cta-whatsapp.css (o botão de
   WhatsApp só vira 48px/reposiciona nesse mesmo ponto) — os dois precisam
   se mover juntos, senão sobra uma faixa de largura de tela onde um dos
   dois já mudou e o outro ainda não. */
.barra-compra-fixa{
    display: none;
}
@media (max-width: 900px){
    .barra-compra-fixa{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--espaco-sm);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        padding: var(--espaco-sm) var(--espaco-md);
        padding-bottom: calc(var(--espaco-sm) + env(safe-area-inset-bottom, 0px));
        background: var(--cor-branco);
        border-top: 1px solid var(--cor-linho-2);
        box-shadow: var(--sombra-lg);
    }
    .barra-compra-fixa__produto{
        display: flex;
        align-items: center;
        gap: var(--espaco-sm);
        min-width: 0;
    }
    .barra-compra-fixa__foto{
        width: 40px;
        height: 40px;
        border-radius: var(--raio-sm);
        object-fit: cover;
        flex-shrink: 0;
    }
    .barra-compra-fixa__texto{
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .barra-compra-fixa__nome{
        font-family: var(--fonte-corpo);
        font-size: var(--texto-xs);
        font-weight: 700;
        color: var(--cor-cacau);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
    }
    /* Mesmo achado/correção já documentado acima pro preço do resumo: o
       CSS padrão do WooCommerce core pinta ".woocommerce-Price-amount" num
       dourado/oliva que não existe na paleta da marca, e vence por
       especificidade sem !important. */
    .barra-compra-fixa__preco,
    .barra-compra-fixa__preco .woocommerce-Price-amount,
    .barra-compra-fixa__preco bdi{
        font-size: var(--texto-sm);
        font-weight: 700;
        color: var(--cor-mata) !important;
    }
    .barra-compra-fixa__btn{
        display: inline-flex;
        align-items: center;
        gap: var(--espaco-2xs);
        flex-shrink: 0;
        min-height: 44px;
        padding: 0 var(--espaco-lg);
        border: none;
        border-radius: var(--raio-pill);
        background: var(--cor-mata);
        color: var(--cor-branco);
        font-family: var(--fonte-corpo);
        font-weight: 700;
        font-size: var(--texto-sm);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .barra-compra-fixa__btn:hover,
    .barra-compra-fixa__btn:focus-visible{
        background: var(--cor-musgo);
    }
    .barra-compra-fixa__btn .icone{
        width: 16px;
        height: 16px;
    }
    .barra-compra-fixa__btn .icone svg{
        width: 100%;
        height: 100%;
    }

    /* Reserva extra no fim da página de produto: o "padding-bottom:100px"
       que cta-whatsapp.css já aplica em body (max-width:900px) foi pensado
       só pro botão de WhatsApp (48px). Com a barra de compra por cima
       disso, o conteúdo real (abas, cross-sell, rodapé) precisa de mais
       espaço reservado pra nunca ficar embaixo da barra — reforça aqui,
       escopado só à página de produto (body.single-product é classe
       nativa que o WooCommerce já aplica), com mais especificidade que o
       seletor "body" solto de cta-whatsapp.css, então vence na cascata sem
       precisar de !important e sem editar aquele arquivo. */
    body.single-product{
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    /* Sobe o botão de WhatsApp pra ele nunca ficar embaixo da barra de
       compra (que ocupa a faixa inferior inteira da tela). Só na página de
       produto, só do lado do MEU componente novo (cta-whatsapp.css não foi
       editado) — mesma altura reservada acima (100px) mais a margem
       própria que o botão já usa (var(--espaco-sm)). */
    body.single-product .whatsapp-flutuante{
        bottom: calc(100px + var(--espaco-sm) + env(safe-area-inset-bottom, 0px));
    }
}