/* ==========================================================================
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. */
.pdp__media--foto { background: var(--cinza-50); }
.pdp__media--foto .pdp__main-img { padding: 0; object-fit: cover; 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 — NÃO no painel amarelo.
A troca de formato/thumb usa .dq-anim-img no mesmo ![]()
; a regra abaixo
(.pdp__main-img.dq-anim-img, +específica) vence a entrada quando essa classe está presente. */
@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; }
.pdp__main-img.dq-anim-img { animation: dq-img .34s ease-out both; }
@media (prefers-reduced-motion: reduce) {
.pdp__main-img, .pdp__main-img.dq-anim-img { animation: none; }
}
.pdp__flag {
position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
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);
}
.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; }
.pdp__thumb:hover { border-color: var(--baly-amarelo); }
.pdp__thumb--ativo { border-color: var(--baly-preto); }
/* ---- 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; }
.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) */
.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; }
.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); }
/* 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 (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