/* ═══════════════════════════════════════════════════════════════
   pdp-d.css — Página de produto no padrão da direção D (v2)
   Usa as variáveis que já existem nas páginas de produto
   (--dark, --accent, --border, --muted, --ink, --body, --page-bg).
   Objetivo do D: foto primeiro, informação limpa, preço e botão
   ACIMA da dobra, ícones todos na mesma caixa e no mesmo traço.
   ═══════════════════════════════════════════════════════════════ */

/* ── Cabeçalho da coluna de informação ────────────────────────── */
.pdp-lab{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted,#8A96AD);font-weight:700;margin-bottom:9px;
}
.pdp-tags{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 18px}
.pdp-tags .tag{
  font-size:.74rem;font-weight:600;padding:5px 11px;border-radius:6px;
  background:var(--page-bg,#FAFBFD);color:var(--body,#46536E);
  border:1px solid var(--border,#E6EAF2);
}
.pdp-tags .tag.ok{background:#E8F7F0;color:#0E7C57;border-color:#CCEBDD}
.pdp-tags .tag.gold{background:#FEF7DC;color:#8A6A05;border-color:#F6E4A8}

/* ── Caixa de compra (montada pelo cart-button.js) ────────────── */
.psy-price-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.psy-price{
  font-size:2.35rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--dark,#0A1937);
}
.psy-price-sub{font-size:.85rem;color:var(--muted,#8A96AD);margin-top:6px}
.psy-price-alt{
  font-size:.86rem;color:var(--body,#46536E);margin-top:12px;
  padding-top:12px;border-top:1px solid var(--border,#E6EAF2);
}
.psy-price-alt strong{color:var(--dark,#0A1937)}

.psy-qty-row{display:flex;gap:10px;margin:18px 0 0;align-items:stretch}
.psy-qty-row .psy-qty{flex:1;justify-content:center}
.psy-qty{
  display:flex;align-items:center;border:1px solid var(--border,#E6EAF2);
  border-radius:12px;overflow:hidden;background:#fff;flex:none;
}
.psy-qty button{
  width:44px;min-height:52px;background:#fff;border:0;font-size:1.2rem;
  font-weight:700;color:var(--dark,#0A1937);cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
}
.psy-qty button:hover{background:var(--page-bg,#FAFBFD)}
.psy-qty span{
  width:44px;text-align:center;font-weight:800;font-size:1rem;
  border-left:1px solid var(--border,#E6EAF2);border-right:1px solid var(--border,#E6EAF2);
  line-height:52px;
}
.psy-btn-main{
  /* Só o ícone do carrinho: com o texto dentro, o botão não conseguia
     encolher (flex-basis do conteúdo) e vazava pra fora do card em
     telas estreitas. Sem texto, ele tem largura própria e nunca estoura.
     O rótulo continua existindo em aria-label/title pra leitor de tela. */
  flex:0 0 auto;width:64px;background:var(--dark,#0A1937);color:var(--accent,#F5C518);
  border:none;border-radius:12px;padding:0;font-family:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  min-height:52px;min-width:0;
  transition:transform .16s,box-shadow .16s,opacity .15s;
}
.psy-btn-main svg{flex:0 0 auto}
.psy-btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(10,25,55,.4)}
.psy-btn-main:active{transform:translateY(0) scale(.99)}

/* Frete vira ação secundária: deixa de empurrar o botão de comprar
   pra fora da tela. No D ele é um botão discreto abaixo do CTA. */
.psy-frete{margin-top:14px;border-top:1px solid var(--border,#E6EAF2);padding-top:14px}
.psy-frete>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;background:#fff;color:var(--dark,#0A1937);
  border:1px solid var(--border,#E6EAF2);border-radius:12px;padding:13px 18px;
  font-size:.92rem;font-weight:700;transition:.16s;
}
.psy-frete>summary::-webkit-details-marker{display:none}
.psy-frete>summary:hover{background:var(--page-bg,#FAFBFD);border-color:var(--dark,#0A1937)}
.psy-frete[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.psy-frete svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none}
.psy-frete-body{
  border:1px solid var(--border,#E6EAF2);border-top:0;
  border-radius:0 0 12px 12px;padding:14px;
}
/* O CEP e o botao "Calcular" nao cabiam lado a lado em tela estreita e
   transbordavam 41px da caixa. Agora encolhem e, se faltar espaco, quebram. */
.psy-frete-body>div{flex-wrap:wrap}
.psy-frete-body #psy-cep{min-width:0;flex:1 1 130px}
.psy-frete-body #psy-cep-btn{flex:0 1 auto;min-width:88px!important;padding:0 14px!important}

/* ATENÇÃO: aqui existiam regras .trust-grid / .trust-i copiadas do mockup.
   Elas NÃO eram usadas por nenhuma página real e colidiam com a classe
   .trust-grid que já existia nas 10 páginas de produto (seção "Por que
   confiar no ..."), forçando 4 colunas onde havia 2 e cortando o texto
   dos cards. Removidas. Os selos reais são estilizados em
   `.buy-box .buy-trust-row`, que é escopado e não colide. */

/* ── Miniaturas da galeria (o D tem; o site só tinha bolinhas) ── */
.gal-thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.gal-thumbs .thumb{
  width:72px;aspect-ratio:4/3;border-radius:9px;
  border:1.5px solid var(--border,#E6EAF2);background:#F8F2EF;
  overflow:hidden;padding:0;cursor:pointer;transition:.18s;
}
.gal-thumbs .thumb:hover{border-color:var(--muted,#8A96AD)}
.gal-thumbs .thumb.on{border-color:var(--dark,#0A1937);box-shadow:0 0 0 2px rgba(10,25,55,.12)}
.gal-thumbs .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-hint{
  font-size:.75rem;color:var(--muted,#8A96AD);margin-top:9px;
  display:flex;align-items:center;gap:6px;
}
.gal-hint svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;flex-shrink:0}

@media(max-width:600px){
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .psy-price{font-size:2rem}
  /* No celular a pessoa arrasta a foto — miniatura ali é redundante e custa
     ~57px de altura, que é justamente o que jogava o botão de comprar pra
     fora da primeira tela depois que a foto passou a vir antes. */
  .gal-thumbs{display:none}
  /* O seletor de quantidade comia metade da linha e "Adicionar ao carrinho"
     quebrava em três linhas. Aperta o seletor e deixa o texto numa linha só. */
  .psy-btn-main{width:58px}
}

/* ── Setas da galeria (não existiam: só havia bolinhas) ────────── */
.ph-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.96);border:1px solid var(--border,#E6EAF2);
  display:grid;place-items:center;cursor:pointer;z-index:3;padding:0;
  box-shadow:0 4px 16px rgba(11,27,51,.12);transition:.18s;
}
.ph-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.ph-arrow:active{transform:translateY(-50%) scale(.96)}
.ph-arrow svg{width:17px;height:17px;stroke:var(--dark,#0A1937);stroke-width:1.6;fill:none}
.ph-arrow.prev{left:12px}
.ph-arrow.next{right:12px}
@media(max-width:600px){ .ph-arrow{width:34px;height:34px} .ph-arrow.prev{left:8px} .ph-arrow.next{right:8px} }

/* ═══ Topo da coluna de informação no padrão D ══════════════════
   Antes eram QUATRO linguagens visuais empilhadas: pílula com borda
   (laboratório), pílula verde (vendidos), bloco escuro com texto dourado
   (volume) e mais quatro chips outline. Agora é: sobrancelha discreta,
   título, e UMA fileira de etiquetas iguais. Feito só por CSS — o HTML
   das 10 páginas não muda, então nenhum texto ou dado se perde. */

/* Sobrancelha do laboratório: sem pílula, sem borda */
.buy-box .lab-badge{
  background:none!important;border:none!important;padding:0!important;
  margin-bottom:8px!important;color:var(--muted,#8A96AD)!important;
  font-size:.7rem;letter-spacing:.13em;font-weight:700;
}
.buy-box .lab-badge svg{opacity:.7}

.buy-box .product-subtitle{margin-bottom:12px}

/* As três caixas viram inline: fluem juntas como UMA fileira de etiquetas */
.buy-box .sold-count,
.buy-box .volume-badge,
.buy-box .stat-chips{
  display:inline-flex!important;vertical-align:middle;
  margin:0 6px 7px 0!important;
}
.buy-box .stat-chips{flex-wrap:wrap;gap:6px}

/* Etiqueta base — mesma altura, mesmo raio, mesmo peso pra todas */
.buy-box .sold-count,
.buy-box .volume-badge,
.buy-box .stat-chip{
  align-items:center;gap:6px;
  font-size:.74rem!important;font-weight:600!important;
  padding:6px 11px!important;border-radius:6px!important;
  line-height:1.25!important;letter-spacing:0!important;
  max-width:none!important;
}
.buy-box .sold-count,
.buy-box .stat-chip{
  background:var(--page-bg,#FAFBFD)!important;
  color:var(--body,#46536E)!important;
  border:1px solid var(--border,#E6EAF2)!important;
}
/* Volume é a informação mais forte da fileira: fica em dourado suave.
   O gradiente escuro saiu, então o <strong> dourado inline ficaria
   ilegível — daí o inherit forçado. */
.buy-box .volume-badge{
  background:#FEF7DC!important;color:#8A6A05!important;
  border:1px solid #F6E4A8!important;
}
.buy-box .volume-badge strong,
.buy-box .volume-badge span{color:inherit!important;font-weight:700}
.buy-box .volume-badge svg,
.buy-box .sold-count svg,
.buy-box .stat-chip svg{width:14px!important;height:14px!important;flex-shrink:0}
.buy-box .sold-count strong{font-weight:800}

.buy-box .divider{margin:14px 0 16px!important}

/* Selos de baixo: mesma grade uniforme do D */
.buy-box .buy-trust-row{
  display:grid!important;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border,#E6EAF2);border:1px solid var(--border,#E6EAF2);
  border-radius:12px;overflow:hidden;margin-top:16px!important;padding:0!important;
}
.buy-box .buy-trust-item{
  background:#fff;padding:13px 8px;display:flex;flex-direction:column;
  align-items:center;gap:6px;text-align:center;
  font-size:.7rem!important;color:var(--body,#46536E)!important;line-height:1.3;
}
.buy-box .buy-trust-item svg{
  width:19px!important;height:19px!important;
  stroke:var(--dark,#0A1937);stroke-width:1.6;fill:none;
}
@media(max-width:600px){
  .buy-box .buy-trust-row{grid-template-columns:repeat(3,1fr)}
  .buy-box .buy-trust-item{font-size:.64rem!important;padding:11px 5px}
}

/* A barra fixa de compra do celular NAO e criada aqui: ja existe uma no
   HTML das 10 paginas (#mobileBuyBar / .mbb-*). As regras .psy-sticky-buy
   que existiam neste ponto criavam uma SEGUNDA barra sobreposta. */

/* ── "Por que confiar no ...": cards cortavam texto no celular ─────
   Duas colunas de ~158px com 22px de padding de cada lado deixam ~114px
   de área útil. Palavras como "Internacional" e "Certificações" não cabem
   e vazavam do card (medido: 4 a 31px de corte, nas 10 páginas).
   Problema pré-existente, agravado enquanto a regra do mockup forçou 4
   colunas. Uma coluna resolve e ainda melhora a leitura no celular. */
@media(max-width:600px){
  .trust-grid{grid-template-columns:1fr!important;gap:12px!important}
  .trust-item{padding:16px!important}
  .trust-item h3,.trust-item b,.trust-item strong{
    overflow-wrap:anywhere;word-break:break-word;hyphens:auto;
  }
}
@media(min-width:601px) and (max-width:960px){
  .trust-item{padding:18px!important}
  .trust-item h3,.trust-item b,.trust-item strong{overflow-wrap:anywhere}
}

/* ── Toque sem atraso ────────────────────────────────────────────
   Sem touch-action:manipulation o navegador espera ~300ms depois de
   cada toque pra ver se vem um segundo (duplo-toque = zoom). Isso faz
   o site inteiro parecer lento no celular. "manipulation" mata a espera
   mas MANTEM rolagem e pinça — a galeria continua arrastando normal. */
button, a, input, select, textarea, label, summary,
[role="button"], .btn, .thumb, .ph-dot, .ph-arrow {
  touch-action: manipulation;
}

/* ── Foco visível no teclado ──────────────────────────────────────
   :focus-visible só dispara na navegação por teclado; o clique de
   mouse continua sem anel. */
*:focus-visible{
  outline:2px solid #1D4ED8;
  outline-offset:2px;
  border-radius:4px;
}

/* ═══ Refinamentos do guia de interface (Vercel) ═══════════════════ */

/* Títulos não terminam com uma palavra órfã na última linha. */
h1, h2, h3, .article-title, .product-name{ text-wrap: balance; }
p, li, .article-body p{ text-wrap: pretty; }

/* Toque sem o flash cinza padrão do Android — a resposta visual fica
   por conta do :active de cada componente. */
html{ -webkit-tap-highlight-color: rgba(10,25,55,.08); }

/* Âncora de título não cola no topo (nem embaixo do cabeçalho fixo). */
:target, h1[id], h2[id], h3[id], [id^="secao"], [id^="faq"]{ scroll-margin-top: 90px; }

/* Números em coluna alinham: preço, parcela, quantidade, total. */
.psy-price, .price, .related-price, .mbb-price, .bc-mid-price,
.ct-total, .sum-value, [class*="preco"], [class*="price"]{
  font-variant-numeric: tabular-nums;
}

/* Rolagem dentro de modal/gaveta não "vaza" para a página atrás. */
[class*="modal"], [class*="overlay"], [class*="drawer"], [class*="sheet"],
.bc-popup, .psy-frete-body{ overscroll-behavior: contain; }

/* Elementos fixos respeitam o entalhe e a barra inferior do iPhone. */
.mobile-buy-bar, .psy-sticky-buy, .bc-sticky, .topbar, footer{
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
.mobile-buy-bar, .psy-sticky-buy, .bc-sticky{
  padding-bottom: max(11px, env(safe-area-inset-bottom));
}

/* Quem pediu menos movimento, recebe menos movimento. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Preço de tabela riscado ao lado do preço da condição de leitor. */
.psy-price-de{
  color:var(--muted,#8A96AD);text-decoration:line-through;
  font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;
}

/* ── Nota de evidência ────────────────────────────────────────────────
   Quem chega aqui vem pesquisando. Dizer de onde vem o número, e onde ele
   para de valer, sustenta a conferência que essa pessoa vai fazer. */
.evid-nota{
  margin-top:18px;padding:16px 18px;border-radius:12px;
  background:#F4F7FB;border:1px solid #D8E2EF;border-left:3px solid #0A1937;
  font-size:.9rem;line-height:1.6;color:#3D4A61;
}
.evid-nota strong{color:#0A1937}
.evid-nota a{color:#0A57C2;font-weight:700}

/* ── Sanfona de seção ─────────────────────────────────────────────────
   A página tinha 10 telas no celular e a prova social só aparecia na
   tela 8. Quem vem do artigo já leu o protocolo; quem cai da busca ainda
   abre e lê. O conteúdo continua no HTML. */
.dobra{border:1px solid var(--border,#E3E8F0);border-radius:14px;background:#fff;margin-bottom:8px}
.dobra>summary{
  list-style:none;cursor:pointer;padding:18px 20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.dobra>summary::-webkit-details-marker{display:none}
.dobra-h{font-size:1.15rem;font-weight:800;color:var(--ink,#0A1937);flex:1 1 auto}
.dobra-mais{
  font-size:.8rem;font-weight:700;color:#0A57C2;white-space:nowrap;
  border:1px solid #C7D8F0;border-radius:999px;padding:5px 12px;
}
.dobra[open] .dobra-mais{color:var(--muted,#8A96AD);border-color:var(--border,#E3E8F0)}
.dobra[open] .dobra-mais::after{content:" ▲"}
.dobra:not([open]) .dobra-mais::after{content:" ▼"}
.dobra>*:not(summary){padding:0 20px}
.dobra>*:last-child{padding-bottom:20px}

/* Seis cartões empilhados gastavam 1.373px no celular. Em duas colunas
   o bloco cabe em pouco mais de uma tela. */
@media (max-width:480px){
  .benefits-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .benefit-card{padding:14px!important}
  .benefit-title{font-size:.92rem!important;line-height:1.25}
  .benefit-desc{font-size:.79rem!important;line-height:1.45}
  .benefit-icon{width:32px!important;height:32px!important;margin-bottom:8px}
  .benefit-icon svg{width:16px!important;height:16px!important}
}