/* ===== Produto único ===== */
.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__image img{
width: 100%;
height: auto;
object-fit: contain;
}
.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 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 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