/* ==========================================================================
   Baly Energy Drink — Mockups D2C
   produto.css  ·  PDP (página de produto)
   Reusa o shell (style.css) e os componentes de seção (home.css):
   .secao-head · .grid-produtos · .card-produto · .fmt · .qty · .card-produto__add
   Espelha o layout do "Produto em destaque" da Home: painel AMARELO da lata
   (galeria) + conteúdo clean à direita (título · sociais · sabor · formato ·
   preço Pix · comprar · trust · CEP). Mobile-first → 2 colunas no desktop.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs); color: var(--cor-texto-suave);
}
.breadcrumb a { transition: color var(--t-rapida); }
.breadcrumb a:hover { color: var(--marca-secundaria); }
.breadcrumb__sep { opacity: .4; }
/* item atual SEM negrito: quem o diferencia é a cor. Em bold ele lia como um
   segundo título logo acima do <h1>, que já diz a mesma coisa em corpo ~38px. */
.breadcrumb [aria-current] { color: var(--marca-secundaria); font-weight: var(--peso-regular); }

/* ---- PDP: a trilha cabe SEMPRE em uma linha ----
   Nome de produto longo ("Suporte de Lanterna para Arma Fenix - ALG-00") quebrava
   o breadcrumb em duas linhas no celular. Aqui a trilha (Início / Categoria) fica
   inteira e quem cede é só o nome, cortado com reticências.
   ⚠️ `nowrap` vale só na PDP, que tem 3 itens no máximo. Na PLP a trilha é funda
   (categoria de 4 níveis) e ali quebrar linha é melhor que espremer tudo.
   ⚠️ `min-width: 0` não é opcional: sem ele o item flex trava no min-content,
   ignora o overflow e estoura a linha — a mesma armadilha do rótulo de filtro. */
.pdp > .breadcrumb { flex-wrap: nowrap; }
.pdp > .breadcrumb > * { flex: none; white-space: nowrap; }
.pdp > .breadcrumb [aria-current] {
  /* fator de shrink alto: o nome encolhe ANTES de a categoria perder um pixel */
  flex: 0 100 auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* rede de segurança: categoria absurdamente longa também corta em vez de
   empurrar a página para a rolagem horizontal. Na prática só o nome encolhe. */
.pdp > .breadcrumb a:not(:first-child) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   1. BUY BOX — galeria (esq) + painel de compra (dir)
   ========================================================================== */
.pdp__top { padding-block: var(--sp-5) var(--sp-7); }
/* minmax(0,1fr) (não 1fr=minmax(auto,1fr)): impede que o painel 1:1 estoure a largura no mobile */
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

/* ---- Galeria ---- */
.pdp__galeria { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

/* painel amarelo — "palco" 1:1 do produto (mesma linguagem do .destaque__media) */
.pdp__media {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; max-width: 100%; min-width: 0;   /* nunca ultrapassa a coluna */
  aspect-ratio: 1;                       /* moldura 1:1 — produto centrado, sem achatar */
  border-radius: 24px;
  background:                            /* profundidade tom-sobre-tom: luz no topo + base assentada */
    radial-gradient(120% 82% at 50% 16%, rgba(255, 255, 255, .60), rgba(255, 255, 255, 0) 56%),
    radial-gradient(125% 120% at 50% 124%, rgba(0, 0, 0, .12), transparent 52%),
    var(--marca-primaria);
}
/* Variante FOTO — produto com fundo próprio (não-energético / sem render transparente):
   sem palco amarelo nem sombra.
   ⚠️ CONTAIN, não cover. O `cover` da base assumia foto quadrada; aqui 29% do catálogo
   vem em 4:3 (960x720) e a moldura é 1:1 — o cover ampliava até cobrir e decepava as
   pontas, comendo justamente o produto alongado (canivete, rifle, lanterna). Mesma
   correção que os cards da PLP/home já receberam. */
/* Fundo BRANCO (não --cinza-50): as fotos da Tray já vêm com fundo branco, e sobre
   #fafafa a borda do arquivo aparecia como um retângulo dentro da moldura. */
.pdp__media--foto { background: #fff; border: 1px solid var(--cor-borda); }
.pdp__media--foto .pdp__main-img { padding: 4%; object-fit: contain; filter: none; }
/* produto absoluto preenchendo o quadrado + object-fit:contain → cabe inteiro (lata OU garrafa), nunca corta.
   O respiro vem do padding (object-fit ajusta dentro do content-box). Mesmo padrão dos cards da Home. */
.pdp__main-img {
  position: absolute; inset: 0; z-index: 1;
  box-sizing: border-box;
  width: 100%; height: 100%;
  padding: 9%;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .16));   /* sombra de contato suave (assenta o produto) */
}
/* Entrada suave SÓ na imagem (fade + sobe) ao CARREGAR a página — NÃO no painel amarelo.
   A TROCA de formato/thumb não anima mais: a imagem nova é pré-carregada e substituída
   pronta (ver produto.js). Qualquer fade ali reintroduzia a queda de opacidade que lia
   como piscada — por isso a antiga regra .pdp__main-img.dq-anim-img saiu. */
@keyframes pdp-img-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.pdp__main-img { animation: pdp-img-in var(--dur-encena-fade) var(--ease-assenta) both; }
/* Na TROCA de formato, o assentamento de home.css tem que vencer a entrada acima.
   produto.css carrega DEPOIS de home.css, e as duas regras têm a mesma especificidade
   (uma classe) — então a de cá ganharia por ordem de origem. Daí o seletor duplo
   (.pdp__main-img.loja-troca-anim = 0,2,0), que desempata a favor da troca. */
.pdp__main-img.loja-troca-anim { animation: loja-troca var(--dur-media) var(--ease-assenta) both; }
@media (prefers-reduced-motion: reduce) {
  .pdp__main-img, .pdp__main-img.loja-troca-anim { animation: none; }
}

/* ---- Zoom-magnify no hover (desktop) ----
   Clone da imagem por cima do produto: escala 2× e pana pelo cursor (transform-origin
   segue o mouse). Clone SEPARADO do .pdp__main-img porque a animação `both` deste trava
   o transform. Escutamos o mouse no .pdp__media (o clone é pointer-events:none). */
.pdp__zoom-img {
  position: absolute; inset: 0; z-index: 2;
  box-sizing: border-box;
  width: 100%; height: 100%;
  padding: 9%;
  object-fit: contain;
  transform: scale(2);
  transform-origin: 50% 50%;
  visibility: hidden;         /* alterna instantâneo — sem fade p/ não piscar a lata dupla */
  pointer-events: none;
}
.pdp__media.is-zooming .pdp__zoom-img { visibility: visible; }
/* ESCONDE a imagem original durante o zoom: senão ela aparece atrás pelas áreas
   transparentes do clone (lata é PNG transparente) e vira "lata duplicada".
   visibility (não opacity) porque a animação `both` da .pdp__main-img trava opacity. */
.pdp__media.is-zooming .pdp__main-img { visibility: hidden; }
.pdp__media--foto .pdp__zoom-img { padding: 4%; object-fit: contain; }   /* acompanha a foto (contain) */
@media (hover: hover) and (pointer: fine) { .pdp__media { cursor: zoom-in; } }
@media (hover: none)  { .pdp__zoom-img { display: none; } }               /* touch: nunca */

.pdp__flag {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 3;
  background: var(--marca-secundaria); color: var(--marca-clara);
  font-size: 0.625rem; font-weight: var(--peso-heavy);   /* 10px no mobile (desktop volta a 12px) */
  text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 9px; border-radius: var(--raio-pill);
}

.pdp__thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pdp__thumb {
  width: 72px; height: 72px; flex: none;
  padding: 6px; border-radius: var(--raio); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 16%, #fff, var(--cinza-50));
  border: 2px solid var(--cor-borda);
  transition: border-color var(--t-rapida);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Hover em cinza-300, um degrau abaixo do --ativo (cinza-400): a hierarquia fica
   inativo → hover → ativo sem que nenhum deles seja preto (ver nota do --ativo abaixo). */
.pdp__thumb:hover { border-color: var(--cinza-300); }

/* ---- Trilho da galeria (produto SEM variação) ----
   Variação são 3-5 formatos e o wrap acomoda bem; galeria de verdade chega a 22 fotos
   (a Tray mistura infográficos do fabricante com as fotos), e em wrap isso vira 4 linhas
   que empurram a página inteira. Vira trilho horizontal com snap — mesmo padrão da
   esteira de categorias da home, sem JS de carrossel. */
.pdp__thumbs--galeria {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;         /* trackpad não "vaza" o scroll pro body */
  /* Barra ESCONDIDA (quem navega são as setas no desktop e o dedo no mobile). A rolagem
     continua funcionando — só a barra some, que aparecia cortando a lateral da thumb. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdp__thumbs--galeria::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pdp__thumbs--galeria .pdp__thumb { scroll-snap-align: start; }

/* ---- Setas do trilho (desktop) ---- */
.pdp__trilho { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pdp__trilho-seta {
  display: none;                          /* o JS liga quando há excesso; mobile nunca */
  align-items: center; justify-content: center;
  width: 72px; height: 28px; flex: none;
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  background: #fff; color: var(--marca-secundaria); cursor: pointer;
  transition: border-color var(--t-rapida), color var(--t-rapida);
}
.pdp__trilho-seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Cinza médio + fundo, NÃO a primária: ela é verde-quase-preto e uma borda preta de 1px
   serrilha na tela. Mesmo motivo já registrado no .pdp__thumb--ativo logo acima. */
.pdp__trilho-seta:hover { border-color: var(--cinza-400); background: var(--cinza-50); }
.pdp__trilho-seta[disabled] { opacity: .35; cursor: default; }
.pdp__trilho-seta[disabled]:hover { border-color: var(--cor-borda); background: #fff; }

/* ---- Desktop: miniaturas VERTICAIS à esquerda (padrão da Tray, que o cliente já usa) ----
   Duas coisas resolvidas de uma vez:
   1. o trilho sai de baixo da foto → a galeria encurta a altura de uma linha inteira;
   2. a moldura 1:1 deixa de ser "largura da coluna" e passa a ter TETO PELA VIEWPORT —
      em coluna de ~576px a foto virava um quadrado de 576px e, com header + breadcrumb,
      não cabia em notebook (768px de altura) sem rolar.
   O trilho rola sozinho (a lanterna PD35 tem 22 fotos) e acompanha a altura da foto. */
@media (min-width: 1024px) {
  .pdp__galeria--trilho {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: stretch;            /* a coluna do trilho ganha a altura da foto */
  }
  .pdp__galeria--trilho .pdp__media  { grid-area: 1 / 2; }

  /* Quem manda na altura da linha é a FOTO, não o trilho. Com 22 thumbs empilhadas
     (~1750px) o trilho esticaria a linha e a página inteira junto: `height: 0` zera a
     contribuição dele para o cálculo da linha e `min-height: 100%` o estica de volta
     até a altura que a foto definiu. */
  .pdp__galeria--trilho .pdp__trilho {
    grid-area: 1 / 1;
    height: 0;
    min-height: 100%;
  }

  /* Só aqui as setas existem — no mobile a navegação é o dedo. */
  .pdp__galeria--trilho .pdp__trilho-seta { display: flex; }

  .pdp__galeria--trilho .pdp__thumbs--galeria {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;                         /* ocupa o vão entre as duas setas */
    min-height: 0;                   /* sem isto o filho de flex não encolhe e não rola */
    scroll-snap-type: y proximity;
    scroll-padding-top: 2px;
    overscroll-behavior-y: contain;
  }

  .pdp__galeria--trilho .pdp__media {
    justify-self: start;             /* encosta no trilho em vez de flutuar no meio */
  }
}

/* Teto da foto pela ALTURA da janela — vale p/ QUALQUER produto, com galeria ou sem.
   A moldura é 1:1 e ocupava a largura inteira da coluna, então a página abria com a foto
   cortada pela dobra e obrigava a rolar só pra ver o produto. Limitando a largura, a
   altura cai junto (é 1:1) e a buy box inteira entra na tela.
   15rem = header + faixa de categorias + breadcrumb + respiro; medido, não chutado. */
@media (min-width: 1024px) {
  .pdp__galeria .pdp__media { max-width: min(100%, calc(100vh - 15rem)); }
}
/* Cinza médio, não preto: o preto competia com a lata e "pesava" a tira de miniaturas.
   Contra a borda inativa (--cinza-200 #e8e8e8) o #9a9a9a ainda lê como selecionado. */
.pdp__thumb--ativo { border-color: var(--cinza-400); }

/* Countdown na PDP: LAYOUT igual ao da vitrine de Promoções — barra na largura toda,
   conteúdo centralizado, números no mesmo tamanho (só sem a margem negativa da home).
   O que muda é a PALETA: aqui ele é claro.
   Na barra verde-escura herdada da home, o countdown virava o bloco mais pesado da buy
   box e roubava a atenção do "Adicionar" — dois retângulos escuros do mesmo tamanho, e o
   de cima ainda com números grandes. Prazo é INFORMAÇÃO, botão é AÇÃO: só a ação carrega
   peso visual. Claro, o único bloco escuro da coluna volta a ser o CTA. */
.countdown--pdp {
  margin: 0;
  background: var(--cinza-50);
  border: 1px solid var(--cor-borda);
  color: var(--marca-primaria);
}
.countdown--pdp .countdown__lab { color: var(--cor-texto-suave); }
.countdown--pdp .countdown__cel small { color: var(--cor-texto-suave); }
.countdown--pdp i { color: var(--cinza-400); }

/* ---- Produto controlado: botão de WhatsApp no lugar do add-to-cart ----
   Só o botão, como na loja atual. Uma 1ª versão trazia caixa com título e parágrafo
   explicando CR/CAC — reprovada: o público (CAC) já conhece a regra, e o bloco pesava
   mais que o próprio preço. Mesma altura/estilo do "Adicionar ao carrinho", pra coluna
   não mudar de forma entre um produto e outro. */
.pdp__controlado-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; height: 52px;
  border-radius: var(--raio-sm);
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  transition: background var(--t-rapida);
}
.pdp__controlado-btn:hover { background: var(--marca-primaria-escura); color: var(--marca-sobre-primaria); }
.pdp__controlado-btn svg { width: 20px; height: 20px; flex: none; }

/* ---- Avisos do WooCommerce na PDP ---- */
/* Mesmo par de cores do checkout (checkout-bridge.css), onde esse vocabulário
   nasceu — só que aquelas regras eram escopadas em `.woocommerce-checkout`, e a
   PDP nem imprimia notice nenhuma. Sem isto o aviso sai como <ul> cru, com
   marcador de lista. */
.pdp__buy-col .woocommerce-error,
.pdp__buy-col .woocommerce-message,
.pdp__buy-col .woocommerce-info {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm); line-height: 1.55;
}
.pdp__buy-col .woocommerce-error li,
.pdp__buy-col .woocommerce-message li,
.pdp__buy-col .woocommerce-info li { margin: 0; padding: 2px 0; }
.pdp__buy-col .woocommerce-error { background: #fdecec; border: 1px solid #f3c0c0; color: #a31616; }
.pdp__buy-col .woocommerce-message { background: #e9f7ee; border: 1px solid #b6e2c6; color: #1f7a44; }
.pdp__buy-col .woocommerce-info { background: #eef3ff; border: 1px solid #cdd6f0; color: #2a3a72; }
/* O "Ver carrinho" do Woo vira link no texto: sem JS ele é o único caminho pro
   carrinho depois de adicionar, então não some (o checkout esconde porque lá o
   carrinho já está na tela). */
.pdp__buy-col .woocommerce-message .button {
  display: inline; margin-left: .4rem;
  background: none; padding: 0; color: inherit;
  font-weight: var(--peso-heavy); text-decoration: underline;
}

/* ---- Produto esgotado ---- */
/* Ocupa o lugar da quantidade + "Adicionar ao carrinho" (a coluna não muda de
   forma entre um produto e outro, mesma regra do bloco de controlado). Caixa
   com borda e fundo neutro em vez de vermelho de erro: falta de estoque é um
   estado do catálogo, não uma falha da pessoa — vermelho ali soaria a algo que
   ela fez de errado. O CTA reusa .pdp__controlado-btn de propósito: é o mesmo
   canal (WhatsApp da loja) e vira o mesmo botão. */
.pdp__esgotado {
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo-alt);
}
.pdp__esgotado-tit {
  display: flex; align-items: center; gap: .5rem;
  margin: 0;
  font-weight: var(--peso-heavy); font-size: var(--fs-md);
  color: var(--cor-texto);
}
/* Só o ÍCONE em vermelho: o alerta fica visível de relance sem pintar o título
   nem a caixa. É o mesmo vermelho das notices do Woo aqui e no checkout — não
   há token de erro no tokens.css, e inventar um segundo tom faria a PDP e o
   checkout falharem em cores diferentes. */
.pdp__esgotado-tit svg { width: 20px; height: 20px; flex: none; color: #a31616; }
.pdp__esgotado-txt {
  margin: .35rem 0 0;
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--cor-texto-suave);
}
.pdp__esgotado .pdp__controlado-btn { margin-top: var(--sp-3); }

/* Variação esgotada num produto que ainda tem outras: quem marca é o
   wc-add-to-cart-variation.js, com a classe abaixo no wrapper. Sem isto o botão
   fica com cara de ativo mesmo desabilitado — o mesmo clique-pra-nada, só que
   dentro de um produto disponível. */
.woocommerce-variation-add-to-cart-disabled .pdp__add,
.pdp__add:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Painel de compra ---- */
/* Ritmo da buy box: o `gap` é a distância entre GRUPOS (identificação · avaliação ·
   preço · ação), e quem pertence ao mesmo grupo compensa esse gap com margem negativa.
   Antes era `--sp-4` uniforme e os espaços saíam 12/12/16/16/16/24 — variação pequena
   demais pra ler como intenção e sem agrupamento nenhum: a ficha ficava quase tão longe
   do título quanto o preço ficava das estrelas. */
.pdp__buy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); min-width: 0; }
/* ⚠️ Os valores abaixo são calibrados pelo espaço VISUAL (distância entre os textos
   renderizados), não pelo box. A diferença é grande: o título tem `line-height: 1.05` e a
   ficha 1.7, então as caixas se SOBREPÕEM — com a margem "certa" no papel (-20px) o texto
   saía a -5px, colado. Alvo: ~8px dentro do grupo de identificação e ~14px antes do preço.
   Conferir com Range.getClientRects(), nunca com getBoundingClientRect() do elemento. */

/* título → ficha: -7px de box dá ~8px de texto */
.pdp__nome + .pdp__dados { margin-top: -7px; }

/* As avaliações entram no MESMO grupo: são metadado, como a ficha. Sozinhas numa faixa de
   24px de cada lado viravam bloco isolado — a linha é curta e leve, e o vão lia como
   buraco. Assim o topo da buy box é um bloco só (o que o produto É). */
.pdp__dados + .pdp__social,
.pdp__nome + .pdp__social { margin-top: calc(var(--sp-2) - var(--sp-5)); }

/* estrelas → preço: separa grupos, mas 18px de texto lia como vão grande demais porque o
   preço é a maior fonte da coluna e "puxa" o olho. -4px no box → ~14px de texto. */
.pdp__social + .pdp__preco { margin-top: -4px; }
/* (.pdp__eyebrow removido em 17/08: a categoria já aparece no breadcrumb logo acima,
   e repeti-la em caps sobre o título dava peso a metadado — mesma correção da ficha) */
.pdp__nome { font-size: clamp(1.75rem, 4.5vw, 2.375rem); line-height: 1.05; color: var(--marca-secundaria); }

.pdp__social { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--cor-texto-suave); }
.pdp__estrelas { color: var(--marca-primaria); font-size: var(--fs-md); letter-spacing: 1px; }
.pdp__aval { font-weight: var(--peso-semibold); color: var(--cor-texto); }
.pdp__social .pdp__sep { opacity: .4; }

/* ---- Ficha de identificação (marca · modelo · referência) ----
   LEGENDA do título, não conteúdo. Duas versões foram reprovadas antes desta:
   (1) rótulos em CAPS/heavy competindo com os valores; (2) mesmo em peso menor,
   POSICIONADA entre as estrelas e o preço — no caminho do olho até a decisão de
   compra, então continuava se destacando. A correção que faltava era de ORDEM,
   não só de estilo: subiu pra debaixo do título e desceu de tom.
   Regra aqui: nada nesta linha compete com o título acima nem com o preço abaixo.
   Tudo no mesmo tom apagado — o valor se distingue do rótulo só pela cor, sem peso. */
.pdp__dados {
  margin: 0;   /* o "colar no título" vem da regra de ritmo da .pdp__buy */
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--cinza-400);
}
.pdp__dado { white-space: nowrap; }      /* rótulo e valor nunca se separam na quebra */
/* ⚠️ Piso de LEGIBILIDADE: em 12px o mínimo é 4.5:1 sobre branco. `--cinza-300` (#d4d4d4)
   dava 1.48:1 — apagado a ponto de sumir. `--cinza-500` dá 5.33:1 e continua discreto,
   porque o que segura o tom baixo aqui é o tamanho (fs-xs) e a ausência de peso, não a
   falta de contraste. O separador é `aria-hidden` (decorativo), então pode ser mais claro. */
.pdp__dado-rot { color: var(--cinza-500); }
.pdp__dado-val { color: var(--cor-texto); }
.pdp__dados-sep { margin: 0 .45rem; color: var(--cinza-400); }
.pdp__dado-val a { color: inherit; text-decoration: none; }
.pdp__dado-val a:hover { color: var(--marca-primaria); }

.pdp__desc { font-size: var(--fs-base); line-height: 1.6; color: var(--cor-texto-suave); max-width: 52ch; }

/* opções (formato) */
.pdp__opt { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.pdp__opt-tit { font-size: var(--fs-sm); font-weight: var(--peso-bold); }
.pdp__opt-tit strong { font-weight: var(--peso-heavy); }

/* formato reusa .fmt (home.css) via .pdp__formats */
.pdp__formats { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* preço — Pix em destaque (mesma lógica da Home) */
.pdp__preco { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.pdp__preco-pack { font-size: var(--fs-sm); color: var(--cor-texto-suave); }   /* info do pack ACIMA do preço (abaixo do Formato) */
.pdp__preco-topo { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pdp__preco-agora { font-size: clamp(1.5rem, 3.2vw, 1.875rem); font-weight: var(--peso-black); line-height: 1; }
/* Sob consulta (inc/sob-consulta.php): frase, não número — no tamanho do título, não do preço. */
.pdp__preco-agora--consulta { font-size: var(--fs-lg); font-weight: var(--peso-bold); letter-spacing: -.01em; }
.pdp__pix {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .04em; color: #32BCAD;
}
.pdp__pix svg { width: 15px; height: 15px; }
.pdp__preco-cartao { font-size: var(--fs-sm); color: var(--cor-texto-suave); }

/* Aviso de compra (DIFAL, quantidade mínima, frete aéreo) — vem do cadastro da Tray.
   Discreto por decisão do cliente, que rejeita bloco de cor e peso alto: o tom baixo sai
   do TAMANHO e da cor, não de uma caixa de alerta.
   ⚠️ Mas legível: `--cinza-500` aqui daria contraste abaixo do piso em texto de 12px — é a
   mesma armadilha da ficha de identificação, onde `--cinza-300` deu 1,48:1. Fica no texto
   suave, que já é o par usado nas parcelas logo acima.
   `align-items: start` porque o aviso quebra em 2-3 linhas nos cadastros longos e o ícone
   tem de ficar na PRIMEIRA, não centralizado no bloco. */
.pdp__aviso-compra {
  display: flex; align-items: flex-start; gap: .375rem;
  margin-top: 6px;
  font-size: var(--fs-xs); line-height: 1.45;
  color: var(--cor-texto-suave);
}
.pdp__aviso-icone { flex: none; margin-top: .12em; opacity: .75; }

/* comprar: quantidade + adicionar na MESMA linha (decisão do cliente em 18/08, depois de
   ver as três versões). Sozinho numa faixa própria o stepper ficava órfão entre o preço e
   o botão, e esticado na largura toda ficou pior ainda — uma caixa enorme para um número.
   Ao lado do botão ele volta ao que é: um ajuste do que já está sendo comprado.
   O que não cabia em tela estreita era o RÓTULO, não o stepper: abaixo de 480px o botão
   mostra só "Adicionar" (o aria-label segue completo) e o stepper encolhe. */
.pdp__compra { width: 100%; display: flex; flex-direction: row; align-items: stretch; gap: var(--sp-3); }
/* 56px (era 52): o CTA é o elemento mais importante da página e precisa ser o mais alto
   da coluna — o stepper acompanha só para não desalinhar. */
.pdp__qty { height: 56px; flex: none; }
.pdp__qty button { width: 44px; height: 100%; font-size: var(--fs-lg); }
.pdp__qty span { min-width: 34px; font-size: var(--fs-base); }
/* o stepper usa <input name="quantity"> (precisa submeter ao Woo) — estilizar como o display do mock */
.pdp__qty .qty-input {
  width: 40px; height: 100%; border: 0; background: transparent; text-align: center;
  font-weight: var(--peso-bold); font-size: var(--fs-base); color: var(--marca-secundaria);
  -moz-appearance: textfield; appearance: textfield;
}
.pdp__qty .qty-input::-webkit-outer-spin-button,
.pdp__qty .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp__add { flex: 1; min-width: 0; width: auto; height: 56px; }

@media (max-width: 479px) {
  .pdp__compra { gap: var(--sp-2); }
  .pdp__qty { height: 48px; }
  .pdp__qty button { width: 34px; }
  .pdp__qty .qty-input { width: 28px; }
  .pdp__add { height: 48px; padding-inline: var(--sp-3); }
  .pdp__add-extra { display: none; }   /* fica só "Adicionar" */
}

/* preço/disponibilidade que o Woo injeta em .single_variation — escondido (temos nosso bloco de preço).
   !important porque o JS do Woo seta style="display:block" INLINE ao achar a variação (vence o stylesheet). */
.pdp__buy .single_variation { display: none !important; }

/* O Woo envolve o add-to-cart num .single_variation_wrap (que o mock não tinha). Como o .pdp__buy é
   flex-column com align-items:flex-start, esse wrapper encolhe à largura do conteúdo → o botão flex:1
   não cresce. Forçar largura total restaura o comportamento do mock (botão preenche a coluna). */
.pdp__buy .single_variation_wrap { width: 100%; }

/* (o lado-a-lado agora vale em toda largura — ver .pdp__compra lá em cima) */

/* coluna de compra = form da buy box + CEP (CEP fora do <form>, forms não aninham) */
.pdp__buy-col { min-width: 0; }

/* CEP / calcular frete — divisória sutil em vez de caixa cinza pesada */
.pdp__cep { width: 100%; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--cor-borda); }
.pdp__cep-label { display: block; font-size: var(--fs-sm); font-weight: var(--peso-bold); margin-bottom: var(--sp-2); }
.pdp__cep-row { display: flex; gap: var(--sp-2); }
.pdp__cep-row input {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--sp-4);
  background: #fff; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm);
}
.pdp__cep-row input:focus { outline: none; border-color: var(--marca-secundaria); }
.pdp__cep-row .btn { height: 48px; border-radius: var(--raio-sm); }   /* raio padronizado com .card-produto__add (Adicionar ao carrinho) */

/* Simulador de frete (plugin shipping-simulator) — markup nosso via template override.
   Hierarquia: label (heading) > opções (conteúdo) > caption do endereço e aviso de prazo (fine print). */
#wc-shipping-sim { width: 100%; }
#wc-shipping-sim-results { margin-top: var(--sp-4); }
#wc-shipping-sim-results:empty { margin-top: 0; }
.pdp__cep-row .button.submit.loading { opacity: .65; pointer-events: none; }

/* link "Não sei meu cep" da integração BR — removido (fallback ao remove_action no loja-core) */
#wc-shipping-sim-br-cep-finder { display: none; }

/* caption "Opções de frete para <endereço>" — metadado pequeno e discreto (12px) */
#wc-shipping-sim-results-title { font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-bottom: var(--sp-3); }
#wc-shipping-sim-results-title strong { color: var(--cor-texto); font-weight: var(--peso-bold); }

/* lista de opções — conteúdo principal (14px); nome regular + valor em negrito */
.pdp__frete-lista { list-style: none; display: flex; flex-direction: column; }
.pdp__frete-op {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--cor-borda);
}
.pdp__frete-op:first-child { padding-top: 0; }
.pdp__frete-op:last-child { border-bottom: 0; }
.pdp__frete-nome { font-size: var(--fs-sm); color: var(--cor-texto); }
.pdp__frete-valor { font-size: var(--fs-sm); font-weight: var(--peso-bold); color: var(--cor-texto); white-space: nowrap; }

/* aviso de prazo de entrega — fine print discreto (12px) */
#wc-shipping-sim-results-after { font-size: var(--fs-xs); color: var(--cor-texto-suave); line-height: 1.4; margin-top: var(--sp-3); }

.pdp__frete-vazio { font-size: var(--fs-sm); color: var(--cor-texto-suave); }

/* Entrada das opções de frete: como o plugin injeta o HTML, os elementos novos animam
   sozinhos ao serem inseridos. Cascata: caption → opções escalonadas → aviso. */
@keyframes frete-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#wc-shipping-sim-results-title,
.pdp__frete-op,
.pdp__frete-vazio,
#wc-shipping-sim-results-after { animation: frete-in var(--dur-media) var(--ease-assenta) both; }
.pdp__frete-op:nth-child(1) { animation-delay: .05s; }
.pdp__frete-op:nth-child(2) { animation-delay: .11s; }
.pdp__frete-op:nth-child(3) { animation-delay: .17s; }
.pdp__frete-op:nth-child(4) { animation-delay: .23s; }
.pdp__frete-op:nth-child(5) { animation-delay: .29s; }
#wc-shipping-sim-results-after { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  #wc-shipping-sim-results-title,
  .pdp__frete-op,
  .pdp__frete-vazio,
  #wc-shipping-sim-results-after { animation: none; }
}

@media (min-width: 880px) {
  /* A coluna da galeria mede o que a galeria REALMENTE ocupa, não uma fração fixa.
     Com `1.15fr` a coluna vinha da LARGURA enquanto a foto é limitada pela ALTURA
     (`100vh - 15rem`): quando o teto de altura mordia — tela baixa, e sobretudo com ZOOM,
     que encolhe a viewport CSS — a foto encolhia e a coluna não, deixando uma faixa branca
     entre a foto e o texto (111px em 1366×768, pior a cada passo de zoom).
     Agora as duas encolhem juntas e o vão é só o gap. --gal-extra = trilho + seu gap. */
  .pdp__grid {
    --gal-extra: 0px;
    grid-template-columns: min(56%, calc(100vh - 15rem + var(--gal-extra))) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .pdp__grid--trilho { --gal-extra: 84px; }   /* 72 da thumb + 12 do gap */
  /* galeria fixa enquanto rola a leitura (header sticky tem altura --altura-header) */
  .pdp__galeria { position: sticky; top: calc(var(--altura-header) + var(--sp-4)); }
  .pdp__flag { top: var(--sp-4); left: var(--sp-4); font-size: var(--fs-xs); letter-spacing: .06em; padding: 6px 12px; }
}

/* ==========================================================================
   2. INFO — descrição do produto
   ========================================================================== */
/* títulos de seção DENTRO da PDP = secundários ao H1 do produto (~38px):
   menores e com line-height de 2 linhas (o componente da Home é 40px caixa-alta e dominava o nome) */
.pdp .secao-head h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.1; }

.pdp__info-head { margin-bottom: var(--sp-5); }     /* cabeçalho full-width separado das 2 colunas */
.pdp__info-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); min-width: 0; }

/* ---- Contenção do HTML que veio da Tray ----
   As descrições importadas trazem tabela de especificação com largura CRAVADA
   (`<table style="width: 700px">`, em 1.418 produtos) e imagens sem limite. Num
   celular de 390px isso estourava a viewport e a página inteira rolava de lado —
   lido como "a página encosta na borda". A tabela passa a rolar DENTRO de si mesma;
   o resto é limitado à coluna. */
.pdp__sobre { min-width: 0; }

/* ---- Tabela de especificação vinda da Tray ----
   O cadastro antigo zebrava as linhas com `background-color` SÓLIDO (o verde da Tray, que
   o conversor remapeia pra primária) e texto branco por cima, tudo inline, mais
   `width: 700px` e `border="1"` de atributo. Resultado: faixas pesadas de cor, largura que
   ignora a coluna e borda dupla. Aqui a tabela é reconstruída como ficha limpa —
   `!important` porque o estilo problemático está INLINE no HTML importado, e isso também
   cobre o que for colado no editor no futuro. */
/* ⚠️ Os seletores cobrem `.pdp__sobre` E `.pdp__ficha`: a tabela de rótulo/valor é
   PROMOVIDA da descrição para a coluna da direita (ver inc/ficha.php), então o mesmo
   HTML importado aparece nos dois lugares — o que fica no texto é a tabela comparativa,
   que não vira ficha. */
:is(.pdp__sobre, .pdp__ficha) table {
  /* `table-layout: fixed` + `width: 100%` resolve as DUAS coisas de uma vez: distribui as
     colunas (com `display: block` as células não esticavam e sobrava vazio à direita) e
     contém no mobile sem precisar de rolagem — o texto quebra dentro da célula em vez de
     estourar a viewport, que era o motivo do `display: block` original. */
  display: table;
  table-layout: fixed;
  width: 100% !important;          /* mata o width:700px cravado */
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  -webkit-overflow-scrolling: touch;
}
/* neutraliza cor de fundo e de texto inline das células (a zebra verde e o branco) */
:is(.pdp__sobre, .pdp__ficha) :is(table, tr, td, th, tbody, thead),
:is(.pdp__sobre, .pdp__ficha) table :is(p, span, strong, div) {
  background-color: transparent !important;
  color: inherit !important;
}
:is(.pdp__sobre, .pdp__ficha) table :is(td, th) {
  border: 0 !important;
  border-bottom: 1px solid var(--cor-borda) !important;
  padding: 10px var(--sp-3) !important;
  vertical-align: top;
  text-align: left !important;
  overflow-wrap: anywhere;         /* com table-layout fixo, o texto quebra em vez de vazar */
}
:is(.pdp__sobre, .pdp__ficha) table tr:last-child :is(td, th) { border-bottom: 0 !important; }
/* zebra discreta, no cinza do tema — informação, não bloco de cor */
:is(.pdp__sobre, .pdp__ficha) table tr:nth-child(even) :is(td, th) { background-color: var(--cinza-50) !important; }
/* Tratamento de "rótulo" (apagado + coluna estreita) SÓ na ficha — linha com exatamente
   2 células (`:has` = "o 2º filho é o último"). O catálogo também traz tabelas de 3 e 5
   colunas, que são grades de acessórios/comparativos: ali a 1ª coluna é um item como
   qualquer outro, e o 38% espremia as demais em 127px enquanto o cinza a apagava sem
   razão. Com esta condição, cada tipo de tabela se comporta como deve. */
:is(.pdp__sobre, .pdp__ficha) table tr:has(> :nth-child(2):last-child) > :first-child {
  width: 38%;
  color: var(--cor-texto-suave) !important;
}
:is(.pdp__sobre, .pdp__ficha) table p { margin: 0 !important; }

/* ---- Ficha de especificações (coluna da direita no desktop) ---- */
.pdp__ficha { min-width: 0; }
.pdp__ficha-tit {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--peso-heavy);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cor-texto-suave);
}
/* a tabela encosta no título: a margem de topo vale no meio do texto, não aqui */
.pdp__ficha table { margin-top: 0 !important; }
/* Numa coluna estreita o rótulo precisa de mais espaço que os 38% do corpo do texto —
   senão "Comprimento da Lâmina" quebra em três linhas ao lado de um "11 cm". */
.pdp__ficha table tr:has(> :nth-child(2):last-child) > :first-child { width: 52%; }
/* No MOBILE a ficha vem depois do texto e ganha respiro; o `order` não é preciso porque
   o grid já é de uma coluna e o HTML está na ordem certa (texto, depois ficha). */
@media (max-width: 879px) {
  .pdp__ficha { margin-top: var(--sp-6); }
}
.pdp__sobre :is(img, iframe, video, pre, embed, object) { max-width: 100%; height: auto; }
.pdp__sobre :is(p, li, h1, h2, h3, h4, td, th, div, span) { overflow-wrap: anywhere; }
/* o HTML da Tray vem com width/height cravados em px nos wrappers do texto */
.pdp__sobre :is(div, span, section)[style*="width"] { max-width: 100% !important; }
.pdp__sobre p { color: var(--cor-texto-suave); line-height: 1.7; margin-bottom: var(--sp-4); max-width: 60ch; }
/* parágrafo de abertura: mais peso/cor p/ ancorar a leitura (a frase-assinatura em <strong>) */
.pdp__lead { font-size: var(--fs-md); color: var(--cor-texto); }
.pdp__lead strong { color: var(--marca-secundaria); font-weight: var(--peso-heavy); }

/* card de INFORMAÇÕES — specs do produto com badges de ícone circulares (espelha o box da etiqueta).
   Bloco contido que "orna" com a etiqueta da direita. */
.pdp__destaques {
  margin-top: var(--sp-5);
  background: var(--cinza-50);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--sp-5);
}
.pdp__destaques-tit {
  display: block; font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .12em; color: var(--cor-texto-suave);
  margin-bottom: var(--sp-4);
}
.pdp__destaques ul { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.pdp__destaques li { display: flex; align-items: center; gap: .7rem; }
.pdp__dest-ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--marca-primaria); border: none;
  color: var(--marca-sobre-primaria);
}
.pdp__dest-ico svg { width: 20px; height: 20px; }
.pdp__dest-txt { font-size: var(--fs-sm); font-weight: var(--peso-semibold); color: var(--cor-texto); line-height: 1.25; }
.pdp__dest-txt b { font-weight: var(--peso-heavy); }
.pdp__dest-ref { color: var(--cor-texto-suave); font-weight: var(--peso-regular); }
@media (min-width: 600px) {
  .pdp__destaques ul { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
}

@media (min-width: 880px) {
  /* Texto + ficha. A coluna da ficha é medida em CH (o conteúdo é rótulo/valor curto),
     não em fração: com `1fr` ela esticava junto com a tela e a tabela de 2 colunas ficava
     com um vão enorme no meio. O texto fica com o resto, limitado pela medida de leitura. */
  .pdp__info-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, 34ch); gap: var(--sp-8); align-items: start; }
  /* sem ficha → coluna única com medida de leitura (não estica até a borda do container) */
  .pdp__info-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  /* ⚠️ Sem `position: sticky` de propósito. Acompanhar a leitura seria simpático, mas a
     ficha mais longa do catálogo tem 31 linhas (~1.270px, mais alta que a viewport):
     grudada no topo, o fim dela nunca apareceria — e a saída (max-height + overflow)
     traria de volta a barra de rolagem interna que já foi reprovada na galeria.
     Com mediana de 10 linhas, o ganho não paga o caso patológico. */
}

/* ==========================================================================
   3. CROSS-SELL — reusa .grid-produtos + .card-produto (4 colunas no desktop)
   ========================================================================== */
.grid-produtos.grid-cross { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 880px) {
  .grid-produtos.grid-cross { grid-template-columns: repeat(4, 1fr); }
}
/* cards do cross-sell são estreitos (4 col): mantém preço em cima + botão full-width embaixo.
   O lado-a-lado da Home (≥992) não cabe aqui e quebrava "R$ 44,98" em duas linhas. */
@media (min-width: 992px) {
  .grid-cross .card-produto__rodape { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .grid-cross .card-produto__add { width: 100%; padding: 0; }
}

/* ==========================================================================
   4. AVALIAÇÕES — resumo sticky (esq) + toolbar + lista 2-col (dir)
   ========================================================================== */
.pdp__reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }

/* ---- Resumo ---- */
.pdp__rating {
  background: var(--cinza-50); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg); padding: var(--sp-5);
}
.pdp__rating-top { display: flex; align-items: center; gap: var(--sp-4); }
.pdp__rating-num { font-size: 3.25rem; font-weight: var(--peso-black); line-height: .85; }
.pdp__rating-top .pdp__estrelas { display: block; color: var(--marca-primaria); font-size: var(--fs-lg); letter-spacing: 1px; }
.pdp__rating-count { display: block; font-size: var(--fs-sm); color: var(--cor-texto-suave); margin-top: 3px; }
.pdp__rating-rec { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--cor-texto); }
.pdp__rating-rec strong { font-weight: var(--peso-black); }
.pdp__bars { margin-top: var(--sp-4); display: grid; gap: 8px; }
.pdp__bar { display: grid; grid-template-columns: 26px 1fr 34px; align-items: center; gap: .55rem; font-size: var(--fs-xs); color: var(--cor-texto-suave); }
.pdp__bar-k { font-weight: var(--peso-semibold); }
.pdp__bar-track { height: 7px; border-radius: var(--raio-pill); background: var(--cinza-200); overflow: hidden; }
.pdp__bar-fill { display: block; height: 100%; background: var(--marca-primaria); border-radius: inherit; }
.pdp__bar-pct { text-align: right; }
.pdp__rating-cta { width: 100%; height: 48px; margin-top: var(--sp-5); }

/* ---- Toolbar (total + ordenar) ---- */
.pdp__reviews-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pdp__reviews-total { font-size: var(--fs-sm); font-weight: var(--peso-bold); }
.pdp__reviews-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--cor-texto-suave); }
.pdp__reviews-sort select {
  font: inherit; font-size: var(--fs-sm); font-weight: var(--peso-semibold); color: var(--cor-texto);
  padding: 7px 34px 7px 12px;   /* espaço à direita p/ a seta custom não colar na borda */
  border: 1px solid var(--cinza-300); border-radius: var(--raio-sm);
  background-color: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ---- Lista + cards ---- */
.pdp__reviews-list { display: grid; gap: var(--sp-4); }
.review { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--sp-4) var(--sp-5); }
.review__head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: var(--sp-3); }
.review__avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--marca-primaria); color: var(--marca-sobre-primaria);
  display: grid; place-items: center; font-weight: var(--peso-heavy);
}
.review__quem { min-width: 0; }
.review__nome { font-weight: var(--peso-heavy); font-size: var(--fs-sm); line-height: 1.2; }
.review__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-top: 2px; }
.review__verif { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--peso-semibold); color: var(--verde-ok); }
.review__verif svg { width: 12px; height: 12px; }
.review__sep { opacity: .5; }
.review__estrelas { margin-left: auto; color: var(--marca-primaria); font-size: var(--fs-sm); letter-spacing: 1px; }
.review__titulo { font-size: var(--fs-base); font-weight: var(--peso-heavy); line-height: 1.25; margin-bottom: 4px; }
.review__txt { font-size: var(--fs-sm); line-height: 1.6; color: var(--cinza-800); }
.review__foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); }
.review__tag-util {
  font-size: 10px; font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .04em;
  color: var(--marca-sobre-primaria); background: var(--marca-primaria);
  padding: 3px 9px; border-radius: var(--raio-pill);
}
.review__util {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--peso-semibold); color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-pill); padding: 6px 12px;
  background: #fff; cursor: pointer; transition: border-color var(--t-rapida), color var(--t-rapida);
}
.review__util svg { width: 14px; height: 14px; }
.review__util:hover { border-color: var(--marca-secundaria); color: var(--marca-secundaria); }

/* ---- Ver todas ---- */
.pdp__reviews-mais {
  width: 100%; margin-top: var(--sp-5); height: 48px;
  font: inherit; font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--marca-secundaria); background: #fff;
  border: 1.5px solid var(--marca-secundaria); border-radius: var(--raio-sm);
  cursor: pointer; transition: background var(--t-rapida), color var(--t-rapida);
}
.pdp__reviews-mais:hover { background: var(--marca-secundaria); color: var(--marca-clara); }

@media (min-width: 880px) {
  .pdp__reviews-grid { grid-template-columns: 300px 1fr; gap: var(--sp-7); align-items: start; }
  /* resumo acompanha a rolagem da lista */
  .pdp__rating { position: sticky; top: calc(var(--altura-header) + var(--sp-4)); }
}
@media (min-width: 992px) {
  /* lista em 2 colunas no desktop largo → linha mais curta e seção equilibrada */
  .pdp__reviews-list { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Formulário de avaliação (markup nativo do WooCommerce, estilizado p/ o tema)
   ========================================================================== */
.pdp__review-form {
  grid-column: 1 / -1;            /* ocupa a largura toda abaixo da grade de reviews */
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--cor-borda);
  scroll-margin-top: calc(var(--altura-header, 80px) + var(--sp-4));
}
.pdp__review-form-tit { display: block; font-size: var(--fs-md); font-weight: var(--peso-heavy); margin-bottom: var(--sp-4); }
#review_form .comment-form-rating,
#review_form .comment-form-author,
#review_form .comment-form-email,
#review_form .comment-form-comment { margin-bottom: var(--sp-3); }
#review_form label { display: block; font-size: var(--fs-sm); font-weight: var(--peso-bold); margin-bottom: var(--sp-1); }
#review_form input[type="text"],
#review_form input[type="email"],
#review_form select,
#review_form textarea {
  width: 100%; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-sm);
  background: #fff; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); color: var(--cor-texto);
}
#review_form textarea { min-height: 120px; resize: vertical; }
#review_form input:focus,
#review_form select:focus,
#review_form textarea:focus { outline: none; border-color: var(--marca-secundaria); }
#review_form .required { color: #d33; }
.pdp__review-enviar { margin-top: var(--sp-2); }
.pdp__reviews-vazio { color: var(--cor-texto-suave); font-size: var(--fs-sm); }

/* Widget de nota (.stars): o single-product.js do WC converte o <select id=rating> em
   estrelas clicáveis. Como o CSS do WC está dequeado, replicamos com ★ (cinza→amarelo)
   seguindo os MESMOS seletores .selected/.active que o JS do WC alterna. */
#review_form p.stars { display: inline-flex; gap: 4px; clear: both; margin: 0 0 var(--sp-2); }
#review_form p.stars a { position: relative; width: 1.5em; height: 1.5em; font-size: 1.4em; text-indent: -999em; display: inline-block; text-decoration: none; }
#review_form p.stars a::before { content: '★'; position: absolute; top: 0; left: 0; width: 1em; height: 1em; line-height: 1; text-indent: 0; color: var(--cinza-300); transition: color var(--t-rapida); }
#review_form p.stars:hover a::before { color: var(--marca-primaria); }
#review_form p.stars a:hover ~ a::before { color: var(--cinza-300); }
#review_form p.stars.selected a.active::before { color: var(--marca-primaria); }
#review_form p.stars.selected a.active ~ a::before { color: var(--cinza-300); }
#review_form p.stars.selected a:not(.active)::before { color: var(--marca-primaria); }

/* ==========================================================================
   Paginação ("Ver todas") + Modal de avaliação (form não fica aberto o tempo todo)
   ========================================================================== */
.review--oculta { display: none; }

.pdp__avmodal[hidden] { display: none; }   /* vence o display:flex do .pdp__avmodal */
.pdp__avmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}
.pdp__avmodal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: avmodal-fade var(--dur-rapida) var(--ease-assenta); }
.pdp__avmodal__box {
  position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: var(--raio-lg, 16px); padding: var(--sp-6) var(--sp-6) var(--sp-7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); animation: avmodal-in var(--dur-media) var(--ease-assenta);
}
.pdp__avmodal__x {
  position: absolute; top: var(--sp-3); right: var(--sp-3); width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%; color: var(--cor-texto-suave);
}
.pdp__avmodal__x:hover { background: var(--cinza-100); color: var(--marca-secundaria); }
.pdp__avmodal__x svg { width: 20px; height: 20px; }
/* Variante SÓ AVISO (não pode avaliar / já avaliou / é da equipe): sem formulário,
   o box é baixo e as regras pensadas p/ o form desequilibravam.
   (1) padding simétrico — o --sp-7 embaixo (p/ o form respirar) jogava o texto pro topo;
   (2) folga à direita — o X é absolute, então o texto corria POR BAIXO dele e o fundo
       do hover cobria as últimas palavras. Reserva a faixa do botão (12px + 36px). */
.pdp__avmodal__box:has(> .pdp__reviews-vazio) { padding: var(--sp-6); }
.pdp__avmodal .pdp__reviews-vazio { margin: 0; padding-right: var(--sp-6); }
/* no modal o form não precisa do divisor de topo */
.pdp__avmodal .pdp__review-form { margin-top: 0; padding-top: 0; border-top: 0; }
body.avmodal-aberto { overflow: hidden; }
@keyframes avmodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes avmodal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pdp__avmodal__overlay, .pdp__avmodal__box { animation: none; } }

/* ------------------------------------------------------ PHPoints na PDP
   Quanto a compra rende. Markup em loja-core/includes/phpoints.php, chamado pelo
   content-single-product.php logo abaixo do parcelamento.

   ⚠️ SEM BLOCO DE COR. A versão da Tray era uma faixa escura cheia com o número
   em amarelo, encaixada entre o preço e o botão — competia com os dois e empurrava
   o "Comprar" para baixo da dobra. Aqui é uma linha: o ganho é informação de apoio
   à decisão, não uma promoção concorrendo com o preço. */
/* ⚠️ SEM margin-top. O .pdp__preco é flex-column com `gap: 3px`, então o
   espaçamento entre as linhas já é dele. A margem que estava aqui SOMAVA ao gap
   e deixava esta linha 15px afastada, contra 3px entre as outras — parecia solta
   do bloco de preço em vez de pertencer a ele. */
.pdp__pontos {
  display: flex; align-items: center; gap: .5rem;
  margin: 0;
  font-size: var(--fs-sm); line-height: 1.4;
  color: var(--cor-texto-suave);
}
.pdp__pontos .phpoints-icone { flex: none; color: var(--marca-acento); }
/* só o número ganha peso — o resto da frase fica de apoio */
.pdp__pontos b { color: var(--cor-texto); font-weight: var(--peso-heavy); font-variant-numeric: tabular-nums; }

/* Frete ESTIMADO do produto controlado (no lugar do simulador). Reusa a lista do
   resultado do simulador; só o prazo e a nota ganham regra: o prazo é metadado da
   linha (suave), e a nota é o mesmo fine print do aviso de prazo do simulador. */
.pdp__frete-prazo { color: var(--cor-texto-suave); }
.pdp__frete-nota { font-size: var(--fs-xs); color: var(--cor-texto-suave); line-height: 1.4; margin: var(--sp-3) 0 0; }
/* Estático: a entrada animada do simulador existe porque o resultado CHEGA depois
   do clique. Aqui ele já nasce na página — animar seria movimento sem motivo. */
.pdp__frete-estimado .pdp__frete-op { animation: none; }