/* ==========================================================================
   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(--baly-preto); }
.breadcrumb__sep { opacity: .4; }
.breadcrumb [aria-current] { color: var(--baly-preto); font-weight: var(--peso-bold); }

/* ==========================================================================
   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(--baly-amarelo);
}
/* Variante FOTO — produto com fundo próprio (não-energético / sem render transparente):
   sem palco amarelo, a foto preenche o quadrado (cover) sem padding/sombra. */
/* Foto (linhas não-energéticas). ⚠️ `contain`, NÃO `cover`: a moldura é 1:1 e o
   acervo nem sempre é quadrado — `cover` amplia até cobrir e DECEPA as pontas,
   sumindo justamente com o produto alongado. Fundo BRANCO (não --cinza-50): sobre
   cinza, a borda branca do próprio arquivo aparece como 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; }

/* Variante GALERIA — vale enquanto o usuário está vendo uma FOTO da variação (as do ERP),
   não a capa. O palco amarelo existe para a lata recortada (PNG transparente); a foto tem
   fundo próprio, então o amarelo viraria uma moldura em volta de um quadrado branco.
   Sem padding: as fotos do ERP são 1:1, então `contain` preenche a moldura inteira. */
.pdp__media--galeria { background: #fff; }
.pdp__media--galeria .pdp__main-img { padding: 0; object-fit: contain; filter: none; }
/* Variante PACK — o packshot NOSSO (6 unidades montadas a partir da capa, PNG transparente,
   anexo com _baly_packshot) fica no palco amarelo como a capa, mas SEM a sombra da capa:
   cada unidade já vem com a sua no próprio PNG (sombra em cima de sombra escurecia o pack). */
.pdp__media--pack .pdp__main-img { 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 .7s cubic-bezier(.22, .7, .2, 1) 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.baly-troca-anim = 0,2,0), que desempata a favor da troca. */
.pdp__main-img.baly-troca-anim { animation: baly-troca .3s cubic-bezier(.22, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .pdp__main-img, .pdp__main-img.baly-troca-anim { animation: none; }
}

/* ---- Lupa redonda 2,4× no hover (desktop) ----
   A mesma do "Escolha o sabor" do hotsite Baly Kids: círculo que segue o mouse com o
   recorte ampliado da imagem como background (posição e recorte vêm do produto.js por
   variáveis). A foto original fica no lugar; a lupa só passa por cima. O fundo da lente
   acompanha o palco (amarelo na capa/pack, branco nas fotos) para a lata transparente
   não ganhar um disco de outra cor. Escutamos o mouse no .pdp__media (lupa sem ponteiro). */
.pdp__lupa { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pdp__media { cursor: zoom-in; }
  .pdp__lupa {
    display: block; position: absolute; left: 0; top: 0; z-index: 4;   /* acima do selo .pdp__flag */
    width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
    background-color: var(--baly-amarelo); background-image: var(--img); background-repeat: no-repeat;
    background-size: var(--bs); background-position: var(--bp);
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--baly-preto), 0 16px 32px rgba(0, 0, 0, .28);
    transform: translate(var(--lx, 0), var(--ly, 0)) translate(-50%, -50%) scale(.2);
    opacity: 0;
    transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), opacity .18s ease;
  }
  .pdp__media--foto .pdp__lupa, .pdp__media--galeria .pdp__lupa { background-color: #fff; }
  .pdp__media.is-zooming .pdp__lupa { opacity: 1; transform: translate(var(--lx, 0), var(--ly, 0)) translate(-50%, -50%) scale(1); }
  .pdp__media.is-arrastando .pdp__lupa,
  .pdp__media.is-lupa-fora .pdp__lupa { opacity: 0; transform: translate(var(--lx, 0), var(--ly, 0)) translate(-50%, -50%) scale(.2); }
}
@media (prefers-reduced-motion: reduce) { .pdp__lupa { transition: opacity .18s ease; } }

.pdp__flag {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 3;
  background: var(--baly-preto); color: var(--baly-branco);
  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);
}

/* Miniaturas: SEMPRE uma linha só, com rolagem horizontal (06/10/2026 — antes quebrava
   em 2 linhas no celular). A próxima "espia" na borda, o que já diz que dá para rolar. */
.pdp__thumbs {
  display: flex; gap: var(--sp-2); flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  padding-block: 2px;                     /* a borda da ativa não é cortada pelo overflow */
  scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent;
}
.pdp__thumbs .pdp__thumb { scroll-snap-align: start; }
@media (hover: none) { .pdp__thumbs { scrollbar-width: none; } .pdp__thumbs::-webkit-scrollbar { display: none; } }
.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; }
/* Amarelo de hover SÓ com mouse: no toque o :hover "gruda" na miniatura tocada e ela seguia amarela
   depois do swipe mudar a foto (a ativa já era outra). (hover: hover) não basta — há Android que se
   anuncia com hover; o produto.js marca .is-toque na tira a cada toque. */
@media (hover: hover) {
  .pdp__thumbs:not(.is-toque) .pdp__thumb:hover { border-color: var(--baly-amarelo); }
}
/* 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); }

/* ---- Painel de compra ---- */
.pdp__buy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.pdp__eyebrow {
  font-size: var(--fs-xs); font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .14em; color: var(--baly-amarelo-escuro);
}
.pdp__nome { font-size: clamp(1.75rem, 4.5vw, 2.375rem); line-height: 1.05; color: var(--baly-preto); }
.pdp__eyebrow + .pdp__nome { margin-top: calc(-1 * var(--sp-1)); }   /* eyebrow vira kicker do título (respiro equilibrado c/ as avaliações abaixo) */

.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(--baly-amarelo); font-size: var(--fs-md); letter-spacing: 1px; }
/* sem avaliação: vazadas (5 cheias com "Novo" liam como nota 5) */
.pdp__estrelas--vazias { color: var(--cinza-300); }
.pdp__aval { font-weight: var(--peso-semibold); color: var(--cor-texto); }
.pdp__social .pdp__sep { opacity: .4; }

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

/* opções (formato, quantidade) */
.pdp__opt { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.pdp__opt[hidden] { display: none; }   /* o display:flex acima venceria o [hidden] do navegador */
.pdp__opt-tit { font-size: var(--fs-sm); font-weight: var(--peso-bold); }
.pdp__opt-tit strong { font-weight: var(--peso-heavy); }

/* Formato em GRADE LEVE (07/10/2026, estudo pdp-coluna.html?fmt=leve): 3 blocos na largura
   da coluna, 44 px, borda 1px, só a litragem (preço no formato foi rejeitado: "muito preço na
   tela"). Selecionado = contorno preto. A grade de 56 px e borda 1.5px foi achada "grosseira";
   o segmentado, "puxado para app". Com 1 formato só, o seletor nem aparece (template). */
.pdp__formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); width: 100%; }
/* 4+ formatos (19/10/2026: 250 ml · 473 ml · 1 L · 2 L) ficam numa linha só: uma coluna por
   formato e menos respiro lateral, senão o 4º caía sozinho na 2ª linha. Até 3, a grade de sempre. */
.pdp__formats:has(> .fmt:nth-child(4)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pdp__formats:has(> .fmt:nth-child(4)) .fmt { padding: 0 .375rem; white-space: nowrap; }
.pdp__formats .fmt {
  height: 44px; padding: 0 .75rem;
  background: #fff; color: var(--baly-preto);
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  font-size: var(--fs-sm); font-weight: var(--peso-semibold);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
@media (hover: hover) { .pdp__formats .fmt:hover { background: #fff; border-color: var(--cinza-300); } }
.pdp__formats .fmt--ativo, .pdp__formats .fmt--ativo:hover {
  background: #fff; color: var(--baly-preto); font-weight: var(--peso-bold);
  border-color: var(--baly-preto); box-shadow: inset 0 0 0 .5px var(--baly-preto);
}
.pdp__formats .fmt:focus-visible { outline: 2px solid var(--baly-preto); outline-offset: 2px; }
/* formato ESGOTADO (08/10/2026, = quick add): aparece riscado; escolhido, contorno cinza (nunca o preto de
   "escolhido para comprar"). O aviso e o botão desligado vêm do produto.js (.is-esgotado no form). */
.pdp__formats .fmt--esgotado { color: var(--cinza-400); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pdp__formats .fmt--esgotado.fmt--ativo, .pdp__formats .fmt--esgotado.fmt--ativo:hover { color: var(--cinza-500); background: var(--cinza-50); border-color: var(--cinza-400); box-shadow: none; }
.pdp__esgotado {
  width: 100%; margin-bottom: var(--sp-3); padding: 10px 14px; border-radius: var(--raio);
  background: var(--cinza-50); border: 1px solid var(--cor-borda);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--cor-texto);
}
.pdp__esgotado[hidden] { display: none; }
.pdp__esgotado b { font-weight: var(--peso-bold); }
.pdp__buy.is-esgotado .pdp__qty { display: none; }   /* sem estoque não há quantidade a escolher */
.pdp__buy.is-esgotado .pdp__add { flex: 1 1 auto; width: 100%; cursor: not-allowed; }
.pdp__buy.is-esgotado .pdp__add:hover { background: var(--cinza-100, #f4f4f5); }
.pdp__buy.is-esgotado .pdp__add svg { display: none; }   /* o [hidden] do <svg> perde para o display do botão */

/* ---- QUANTIDADE EM CARTÕES (estudo pdp-coluna.html; ref. Noway) ----
   = as linhas-radio do frete no checkout (.co-opt): borda 1.5px, raio, selecionado = fundo
   cinza + bolinha verde. Montados pelo produto.js; com eles o − 1 + some (.tem-qtd). */
.pdp__qtd-lista { display: grid; gap: var(--sp-2); width: 100%; }
.pdp__qop {
  --qop-curva: cubic-bezier(.22, .8, .26, 1);   /* a curva do site (palco, swipe) */
  position: relative; display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--cor-borda); border-radius: var(--raio);
  background: #fff; transition: border-color .25s var(--qop-curva), background-color .25s var(--qop-curva);
}
.pdp__qop input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdp__qop-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--cinza-300); display: grid; place-items: center; transition: border-color var(--t-rapida); }
.pdp__qop-radio { transition: border-color .25s var(--qop-curva); }
.pdp__qop-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--verde-ok); transform: scale(0); transition: transform .32s cubic-bezier(.34, 1.45, .64, 1); }   /* bolinha cresce com leve sobra */
@media (hover: hover) { .pdp__qop:not(.is-off):hover { border-color: var(--baly-amarelo); } }
.pdp__qop:has(input:checked) { border-color: var(--cinza-300); background: var(--cinza-50); }
.pdp__qop:has(input:checked) .pdp__qop-radio { border-color: var(--verde-ok); }
.pdp__qop:has(input:checked) .pdp__qop-radio::after { transform: scale(1); }
.pdp__qop input:focus-visible + .pdp__qop-radio { outline: 2px solid var(--baly-preto); outline-offset: 2px; }
.pdp__qop.is-off { cursor: default; opacity: .5; }
.pdp__qop-info { flex: 1; min-width: 0; }
.pdp__qop-nome { display: flex; flex-wrap: wrap; align-items: center; row-gap: .35rem; font-weight: var(--peso-heavy); font-size: var(--fs-sm); }
.pdp__qop-det { display: block; font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-top: 2px; }
.pdp__qop-det b { color: var(--cor-texto); font-weight: var(--peso-bold); }
.pdp__qop-preco { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdp__qop-total { font-weight: var(--peso-heavy); font-size: var(--fs-md); }
.pdp__qop-antes { display: block; font-size: var(--fs-xs); color: var(--cor-texto-suave); text-decoration: line-through; }
/* selo verde-claro sem borda (= .co-opt__badge do checkout / pílula do Pix) */
/* o selo está SEMPRE no DOM e entra crescendo (largura, margem e escala) — brotar do nada empurrava o texto */
.pdp__qop-frete {
  display: inline-block; overflow: hidden; vertical-align: middle;
  font-size: 10px; font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: #13803F; background: #E9F6EE; padding: 3px 0; border-radius: var(--raio-pill);
  max-width: 0; margin-left: 0; opacity: 0; transform: scale(.85);
  transition: max-width .32s var(--qop-curva), padding .32s var(--qop-curva), margin .32s var(--qop-curva), opacity .22s ease, transform .32s var(--qop-curva);
}
.pdp__qop-frete.is-vis { max-width: 120px; padding-inline: 8px; margin-left: .5rem; opacity: 1; transform: none; }
/* Ao FECHAR o "Outra quantidade" o título volta a ser "Outra quantidade" (bem mais largo que "5 packs")
   no mesmo quadro: com o selo ainda encolhendo, os dois não cabiam na linha, o selo quebrava e o cartão
   crescia ~27 px por 0,32 s, empurrando o botão de comprar. Fechando, o selo sai seco (entra animado). */
.pdp__qop--outra:not(.is-aberto) .pdp__qop-frete { transition: none; }
.pdp__qop-antes[hidden], .pdp__qop-off[hidden] { display: none; }
/* números que mudam (preços, contagem) com largura fixa: o tween não faz o texto tremer */
.pdp__qop-total, .pdp__qop-r-total, .pdp__qop-passo output { font-variant-numeric: tabular-nums; }
/* tarja do desconto por volume, presa na borda (só com % no painel) */
.pdp__qop-off {
  position: absolute; top: -10px; right: 14px;
  font-size: 11px; font-weight: var(--peso-heavy); letter-spacing: .02em;
  background: var(--verde-ok); color: #fff; padding: 3px 9px; border-radius: 6px;
}
.pdp__qop.tem-off { padding-top: calc(var(--sp-3) + 8px); margin-top: 12px; }   /* a tarja não encosta no cartão de cima */
/* "Outra quantidade": − n + dentro do cartão. Sempre no DOM (reserva o espaço, nada pula):
   fechado fica invisível e um pouco à direita; aberto desliza para o lugar. */
.pdp__qop-passo {
  display: inline-flex; align-items: center; flex: none; height: 34px;
  background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateX(10px) scale(.96);
  transition: opacity .22s ease, transform .3s var(--qop-curva), visibility 0s linear .3s;
}
.pdp__qop--outra.is-aberto .pdp__qop-passo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* "Escolha quantos packs" ↔ resumo: os dois no mesmo lugar, um sai subindo e o outro entra */
.pdp__qop--outra .pdp__qop-det { display: grid; }
.pdp__qop--outra .pdp__qop-det > span { grid-area: 1 / 1; transition: opacity .22s ease, transform .3s var(--qop-curva); }
.pdp__qop-det-b { opacity: 0; transform: translateY(5px); }
.pdp__qop--outra.is-aberto .pdp__qop-det-a { opacity: 0; transform: translateY(-5px); }
.pdp__qop--outra.is-aberto .pdp__qop-det-b { opacity: 1; transform: none; }
.pdp__qop-r-pre b { color: var(--cor-texto); font-weight: var(--peso-bold); }
/* cada pedaço do resumo inteiro numa linha: se quebrar, quebra entre eles, nunca no meio de "R$ 237,00" */
.pdp__qop-r-pre b, .pdp__qop-r-total, .pdp__qop-r-off { white-space: nowrap; }
/* o número do − n + rola: o novo entra de baixo (+) ou de cima (−) */
.pdp__qop-passo output { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.pdp__qop-passo output span { display: block; }
.pdp__qop-passo output .sobe  { animation: qop-sobe .26s var(--qop-curva) both; }
.pdp__qop-passo output .desce { animation: qop-desce .26s var(--qop-curva) both; }
@keyframes qop-sobe  { from { transform: translateY(70%);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qop-desce { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pdp__qop, .pdp__qop-radio, .pdp__qop-radio::after, .pdp__qop-frete, .pdp__qop-passo, .pdp__qop--outra .pdp__qop-det > span { transition: none; }
  .pdp__qop-passo output .sobe, .pdp__qop-passo output .desce { animation: none; }
}
.pdp__qop-passo button { width: 32px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 17px; font-weight: var(--peso-bold); color: var(--baly-preto); line-height: 1; }
@media (hover: hover) { .pdp__qop-passo button:hover:not(:disabled) { background: var(--cinza-50); } }
.pdp__qop-passo button:disabled { opacity: .3; cursor: default; }
.pdp__qop-passo button:focus-visible { outline: 2px solid var(--baly-preto); outline-offset: -2px; }
.pdp__qop-passo output { min-width: 22px; text-align: center; font-weight: var(--peso-heavy); font-size: var(--fs-sm); }
/* com os cartões, o − 1 + some e o Adicionar ocupa a linha (flex 1 1 AUTO: no celular a
   área empilha em coluna e flex-basis 0 zeraria a altura do botão) */
.pdp__buy.tem-qtd .pdp__qty { display: none; }
.pdp__buy.tem-qtd .pdp__add { flex: 1 1 auto; width: 100%; }

/* preço — Pix em destaque (mesma lógica da Home) */
/* ==== PREÇO (out/2026 — estudos/pdp-preco.html?variant=d) ====
   Logo abaixo das avaliações. Preço do CARTÃO em destaque (o mesmo número do
   card e do quick add), a pílula verde do Pix AO LADO, na mesma linha, e em
   cinza "cada lata · ou 3x" (sem "sem juros"). Na troca de formato os textos
   trocam no lugar, SEM animação (regra: troca de variação não anima opacidade). */
.pdp__spec {   /* o kicker amarelo virou a spec do formato — amarelo sobre branco não tinha contraste */
  color: var(--cor-texto-suave); font-size: 11px; letter-spacing: .07em;
  font-variant-numeric: tabular-nums;
}
.pdp__preco { width: 100%; margin-top: var(--sp-1); }
.pdp__preco-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.pdp__preco-agora {
  font-size: clamp(1.75rem, 3.4vw, 2.125rem); font-weight: var(--peso-heavy);
  letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.pdp__pix {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--raio-pill);
  background: #E9F6EE; color: #13803F;   /* verde escurecido: o --verde-ok não dá contraste em texto de 13px */
  font-size: 13px; font-weight: var(--peso-bold); line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pdp__pix svg { width: 14px; height: 14px; flex: none; }
.pdp__preco-det { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.pdp__preco-det b { color: var(--cor-texto); font-weight: var(--peso-bold); }

/* comprar: quantidade + adicionar (reusa .qty e .card-produto__add).
   Mobile estreito: empilhado — stepper (largura do conteúdo) em cima + botão FULL-WIDTH embaixo
   (a label "ADICIONAR AO CARRINHO" não cabe ao lado do stepper em telas pequenas). */
.pdp__compra { width: 100%; display: flex; flex-direction: column; gap: var(--sp-3); }
.pdp__qty { height: 52px; flex: none; align-self: flex-start; }
.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(--baly-preto);
  -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 { width: 100%; height: 52px; }

/* 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%; }

/* ~480px+: há largura p/ stepper + botão lado a lado */
@media (min-width: 480px) {
  .pdp__compra { flex-direction: row; align-items: stretch; }
  .pdp__qty { align-self: auto; }
  .pdp__add { flex: 1; width: auto; }
}

/* 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(--baly-preto); }
.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 baly-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 .32s ease-out 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) {
  .pdp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  /* 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 — sobre o produto + informação nutricional
   ========================================================================== */
/* 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); }
.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(--baly-preto); 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(--baly-amarelo); border: none;
  color: var(--baly-preto);
}
.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); }
}

/* etiqueta nutricional = imagem real (INFORMAÇÕES + ingredientes + tabela), self-contained em fundo escuro */
.pdp__nutri-img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}

@media (min-width: 880px) {
  .pdp__info-grid { grid-template-columns: 1.15fr .85fr; gap: var(--sp-8); align-items: start; }
  /* sem etiqueta nutricional → "Sobre" ocupa a largura (sem coluna vazia) */
  .pdp__info-grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  /* etiqueta = quadrada → contida e CENTRADA (vert.+horiz.) ao lado do texto (que fica no topo) */
  .pdp__nutri { align-self: center; }
  .pdp__nutri-img { max-width: 380px; margin-inline: auto; }
}

/* ==========================================================================
   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(--baly-amarelo); 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(--baly-amarelo); 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(--baly-amarelo); color: var(--baly-preto);
  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(--baly-amarelo); 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(--baly-preto); background: var(--baly-amarelo);
  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(--baly-preto); color: var(--baly-preto); }

/* ---- 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(--baly-preto); background: #fff;
  border: 1.5px solid var(--baly-preto); border-radius: var(--raio-sm);
  cursor: pointer; transition: background var(--t-rapida), color var(--t-rapida);
}
.pdp__reviews-mais:hover { background: var(--baly-preto); color: var(--baly-branco); }

@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(--baly-preto); }
#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(--baly-amarelo); }
#review_form p.stars a:hover ~ a::before { color: var(--cinza-300); }
#review_form p.stars.selected a.active::before { color: var(--baly-amarelo); }
#review_form p.stars.selected a.active ~ a::before { color: var(--cinza-300); }
#review_form p.stars.selected a:not(.active)::before { color: var(--baly-amarelo); }

/* ==========================================================================
   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 .2s ease-out; }
.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 .24s cubic-bezier(.22, .7, .2, 1);
}
.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(--baly-preto); }
.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; } }

/* ==========================================================================
   TOPO COM A ILHA (✅ estudo mockup/estudos/topo-produto.html, versão "só amarelo", 06/10/2026)
   · DESKTOP: faixa amarela RASA (104px, base arredondada + brilho) só atrás da ilha; SEM o
     breadcrumb (perdeu no comparativo); galeria e compra começam no branco. A ilha sobre a página
     branca foi rejeitada ("muito estranho": pílula branca sobre branco).
   · CELULAR: a galeria (palco amarelo 1:1 dos energéticos) SOBE até o topo, sangrada, com a base
     arredondada, e a ilha flutua por cima — o gesto da Home sobre o banner. Produto de FOTO
     (.pdp--foto, fundo branco) não sangra: só ganha o espaço da ilha.
   ========================================================================== */
.pagina-interna .pdp > .breadcrumb { display: none; }
@media (min-width: 768px) {
  .pagina-interna .pdp::before {
    content: ""; display: block; height: 104px;
    border-radius: 0 0 28px 28px;
    background: radial-gradient(70% 160% at 18% 0%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 60%), var(--baly-amarelo);
  }
  .pagina-interna .pdp__top { padding-top: var(--sp-6); }
}
@media (max-width: 767px) {
  .pagina-interna .pdp__top { padding-top: 0; }
  .pagina-interna .pdp:not(.pdp--foto) .pdp__galeria { margin-inline: calc(-1 * var(--gutter)); }
  .pagina-interna .pdp:not(.pdp--foto) .pdp__media { border-radius: 0 0 24px 24px; aspect-ratio: 1 / 1.12; clip-path: inset(0 round 0 0 24px 24px); }
  .pagina-interna .pdp:not(.pdp--foto) .pdp__main-img { padding: 104px 18% 7%; }   /* respiro entre a ilha e a lata (pedido) */
  /* o pack é LARGO (a lata é estreita): mesmo respiro em cima, laterais curtas.
     :not(.pdp__slide-novo) — o clone do swipe TAMBÉM é .pdp__main-img: sem isso, ao voltar do pack
     para a capa, o clone da capa herdava o respiro do pack (lata maior) e encolhia ao assentar. */
  .pagina-interna .pdp:not(.pdp--foto) .pdp__media--pack .pdp__main-img:not(.pdp__slide-novo),
  .pagina-interna .pdp:not(.pdp--foto) .pdp__slide-novo.is-pack { padding: 96px 5% 5%; }
  .pagina-interna .pdp:not(.pdp--foto) .pdp__flag { top: 80px; left: var(--gutter); }
  .pagina-interna .pdp:not(.pdp--foto) .pdp__thumbs { padding-inline: var(--gutter); }
  .pagina-interna .pdp--foto { padding-top: 76px; }
}

/* ==== Troca de FORMATO desliza (06/10/2026 — o cliente achou "muito melhor" que a
   troca no lugar). A foto nova, já pré-carregada, entra por um lado enquanto a atual
   sai pelo outro; o sentido acompanha a ordem dos formatos (maior → entra pela
   direita). Miniatura (foto do mesmo formato) segue com o assentamento por escala.
   ⚠️ Opacidade nunca muda (regra da troca de variação). */
.pdp__media { overflow: hidden; clip-path: inset(0 round 24px); }
/* ⚠️ clip-path ALÉM do overflow (16/10/2026): durante o deslize as fotos viram camada própria (transição de
   translate) e o celular deixa de recortar pelo border-radius: os cantos de baixo ficavam RETOS por alguns ms
   (o clone leva o próprio palco amarelo). O clip-path recorta a camada inteira, inclusive durante a animação.
   O raio aqui tem de acompanhar o border-radius de cada variação (ver o @media do celular). */
/* ⚠️ desliza por `translate`, NÃO por `transform`: o .pdp__main-img tem a animação de
   entrada (pdp-img-in, fill both) em transform, que anularia o deslocamento — foi o que
   aconteceu no 1º teste (as duas fotos sobrepostas no centro). */
.pdp__slide-novo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; animation: none !important; }
.pdp__media.is-deslizando .pdp__main-img,
.pdp__media.is-deslizando .pdp__slide-novo { transition: translate .45s cubic-bezier(.22, .8, .26, 1); }
@media (prefers-reduced-motion: reduce) {
  .pdp__media.is-deslizando .pdp__main-img, .pdp__media.is-deslizando .pdp__slide-novo { transition: none; }
}

/* ==== SWIPE na foto (06/10/2026) — produto.js/setupSwipe. O navegador fica com o gesto
   vertical (rolar a página); o horizontal é nosso. Capa e foto levam o PRÓPRIO fundo no
   clone (palco amarelo × branco) para o fundo não pular de cor no meio do arrasto. */
.pdp__media { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pdp__media img { -webkit-user-drag: none; }
.pdp__slide-novo.is-foto { padding: 0; filter: none; background: #fff; }
.pdp__slide-novo.is-capa {
  padding: 9%; filter: none;
  background:
    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(--baly-amarelo);
}
.pdp--foto .pdp__slide-novo.is-capa { padding: 4%; background: #fff; }
.pdp__media.is-arrastando .pdp__main-img, .pdp__media.is-arrastando .pdp__slide-novo { transition: none; }