/* Pagina do produto dos temas premium (_premium_produto.php e _premium_produto_abas.php).
 * Layout pelas classes do tema.json ("produto"): pp-galeria-lateral|abaixo|grade, pp-variacao-caixa|pilula|linha|cartao,
 * pp-abas-linha|pilulas|lado|sanfona. Cada tema premium muda as variaveis --pp-* e os detalhes no proprio tema.css. */
.pp, .ppa {
	--pp-acento: var(--loja, #124f6b);
	--pp-titulo: var(--titulos, #0f1720);
	--pp-texto: var(--texto, #1d2733);
	--pp-sub: var(--sub, #687585);
	--pp-borda: var(--borda, #e3e7ec);
	--pp-card: #ffffff;
	--pp-suave: color-mix(in srgb, var(--pp-acento) 8%, #ffffff);
	--pp-raio: var(--raio, 12px);
	--pp-raio-botao: var(--raio-botao, 999px);
	--pp-proporcao: 1 / 1;
	--pp-titulo-tam: 32px;
	--pp-preco-tam: 34px;
	--pp-botao-alt: 58px;
	--pp-op-alt: 46px;
	--pp-fonte-titulo: var(--fonte-titulos), var(--fonte), sans-serif;
}
.pp { padding: 18px 0 40px; color: var(--pp-texto); }
.pp svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp .fakehidden { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; border: 0 !important; padding: 0 !important; }

/* trilha */
.pp-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 13px; color: var(--pp-sub); }
.pp-trilha a { color: var(--pp-sub); text-decoration: none; transition: color .15s; }
.pp-trilha a:hover { color: var(--pp-acento); }
.pp-trilha i { font-style: normal; opacity: .45; }
.pp-trilha span { color: var(--pp-texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50ch; }

/* grade principal */
.pp-grade { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: start; }

/* ---------- fotos ---------- */
.pp-galeria { position: sticky; top: 24px; display: grid; gap: 14px; }
.pp-galeria-lateral .pp-galeria { grid-template-columns: 84px minmax(0, 1fr); }
.pp-galeria-lateral .pp-galeria.pp-galeria-unica { grid-template-columns: minmax(0, 1fr); } /* uma foto so: sem a coluna das miniaturas */
.pp-galeria-lateral .pp-miniaturas { order: -1; flex-direction: column; max-height: 640px; overflow-y: auto; scrollbar-width: none; }
.pp-palco { position: relative; border-radius: var(--pp-raio); overflow: hidden; background: var(--pp-card); isolation: isolate; }
.pp-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pp-trilho::-webkit-scrollbar, .pp-miniaturas::-webkit-scrollbar { display: none; }
.pp-foto { flex: 0 0 100%; aspect-ratio: var(--pp-proporcao); scroll-snap-align: start; overflow: hidden; cursor: zoom-in; display: block; background: var(--pp-suave); }
.pp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pp-foto.pp-zoom img { transform: scale(1.9); transition: transform .12s ease; }
.pp-selos { position: absolute; top: 16px; left: 16px; display: grid; gap: 6px; z-index: 2; pointer-events: none; }
.pp-selo { display: inline-block; padding: 7px 12px; border-radius: var(--pp-raio-botao); background: var(--pp-acento); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.pp-selo-cinza { background: #4b5563; }
/* botoes so com icone: o forms.css da um padding torto (16/23/12/26 px) a todo <button>, que tirava o icone do centro */
.pp-fav, .pp-seta, .pp .pp-qtd button, .pp-compartilhar > button { padding: 0; box-sizing: border-box; }
.pp-fav svg, .pp-seta svg, .pp-compartilhar > button svg { display: block; }
.pp .pp-agora { padding: 0 20px; }
.pp-fav-form { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; }
.pp-fav { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--pp-titulo); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: transform .15s, color .15s; }
.pp-fav:hover { transform: scale(1.08); color: #e11d48; }
.pp-fav.salvo { color: #e11d48; }
.pp-fav.salvo svg { fill: currentColor; }
.pp-seta { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--pp-titulo); cursor: pointer; opacity: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: opacity .2s, transform .2s; }
.pp-seta-ant { left: 14px; transform: translateX(-6px); }
.pp-seta-prox { right: 14px; transform: translateX(6px); }
.pp-palco:hover .pp-seta { opacity: 1; transform: none; }
.pp-pontos { position: absolute; left: 0; right: 0; bottom: 14px; display: none; justify-content: center; gap: 6px; z-index: 2; }
.pp-pontos i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); transition: width .2s; }
.pp-pontos i.ativo { width: 22px; background: #fff; }
.pp-lupa { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: var(--pp-titulo); font-size: 11.5px; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pp-palco:hover .pp-lupa { opacity: 1; }
.pp-miniaturas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.pp-mini { flex: 0 0 auto; width: 84px; aspect-ratio: var(--pp-proporcao); padding: 0; border: 2px solid transparent; border-radius: calc(var(--pp-raio) * .6); overflow: hidden; background: var(--pp-suave); cursor: pointer; opacity: .65; transition: opacity .15s, border-color .15s; }
.pp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-mini:hover { opacity: 1; }
.pp-mini.ativa { opacity: 1; border-color: var(--pp-acento); }
/* grade de fotos no computador */
@media (min-width: 992px) {
	.pp-galeria-grade .pp-trilho { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
	.pp-galeria-grade .pp-foto:first-child { grid-column: 1 / -1; }
	.pp-galeria-grade .pp-foto { border-radius: var(--pp-raio); }
	.pp-galeria-grade .pp-palco { overflow: visible; background: transparent; }
	.pp-galeria-grade .pp-seta, .pp-galeria-grade .pp-miniaturas { display: none; }
	.pp-galeria-grade .pp-galeria { position: static; }
	.pp-galeria-grade .pp-info { position: sticky; top: 24px; }
}

/* ---------- informacoes ---------- */
.pp-info { display: grid; gap: 22px; align-content: start; min-width: 0; }
.pp-cab { display: grid; gap: 10px; }
.pp-marca { justify-self: start; color: var(--pp-acento); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.pp-nome { margin: 0; font-family: var(--pp-fonte-titulo); font-size: var(--pp-titulo-tam); line-height: 1.15; font-weight: 700; color: var(--pp-titulo); letter-spacing: -.01em; }
.pp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--pp-sub); }
.pp-nota { display: inline-flex; align-items: center; gap: 6px; color: var(--pp-texto); text-decoration: none; }
.pp-nota b { font-weight: 700; }
.pp-nota span { color: var(--pp-sub); text-decoration: underline; text-underline-offset: 3px; }
.pp-ref { letter-spacing: .04em; }

/* preco */
.pp-preco { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--pp-raio); background: var(--pp-suave); }
.pp-preco-de { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pp-sub); }
.pp-preco-off { padding: 3px 9px; border-radius: 99px; background: var(--pp-acento); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.pp-preco-por { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-preco-valor { font-family: var(--pp-fonte-titulo); font-size: var(--pp-preco-tam); line-height: 1; font-weight: 800; color: var(--pp-titulo); letter-spacing: -.02em; }
.pp-preco-nota { font-size: 12.5px; color: var(--pp-sub); }
.pp-parcelas { font-size: 14.5px; color: var(--pp-texto); }
.pp-parcelas b { color: var(--pp-titulo); }
.pp-economia { font-size: 13px; color: #15803d; font-weight: 600; }
.pp-economia b { font-weight: 800; }
.pp-extras:empty { display: none; }
.pp-extras { display: grid; gap: 10px; }

/* ---------- variacoes ---------- */
.pp-compra { margin: 0; }
.pp-compra .comprar { display: grid; gap: 22px; padding: 0; border: 0; background: none; }
.pp .line-variacao { margin: 0; padding: 0; border: 0; }
.pp-var-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.pp-var-nome { font-weight: 700; color: var(--pp-titulo); }
.pp-var-escolha { font-weight: 500; color: var(--pp-texto); }
.pp-var-regra { margin-left: auto; font-size: 12px; color: var(--pp-sub); }
body.vitrine .pp .pp-opcoes { display: flex !important; flex-wrap: wrap; gap: 10px; }
/* opcao: tudo por variaveis (o CSS do Vitrine usa !important nas opcoes; os temas mudam so as variaveis) */
.pp .opcao.pp-op { --pp-op-borda: var(--pp-borda); --pp-op-bw: 1.5px; --pp-op-fundo: var(--pp-card); --pp-op-cor: var(--pp-texto); --pp-op-raio: calc(var(--pp-raio) * .55); --pp-op-sombra: none; --pp-op-pad: 0 16px; --pp-op-minw: 52px; --pp-op-minh: var(--pp-op-alt); --pp-op-fs: 14px; --pp-op-peso: 600; --pp-op-esp: 0; }
body.vitrine .pp .opcao.pp-op, body.vitrine.modo-loja .pp .line-variacao .opcao.pp-op { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; float: none !important; width: auto !important; height: auto !important; min-width: var(--pp-op-minw) !important; min-height: var(--pp-op-minh) !important; margin: 0 !important; padding: var(--pp-op-pad) !important; border: var(--pp-op-bw) solid var(--pp-op-borda) !important; border-radius: var(--pp-op-raio) !important; background: var(--pp-op-fundo) !important; color: var(--pp-op-cor) !important; box-shadow: var(--pp-op-sombra) !important; font-size: var(--pp-op-fs); font-weight: var(--pp-op-peso); letter-spacing: var(--pp-op-esp); cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .1s; }
.pp .opcao.pp-op:hover { --pp-op-borda: var(--pp-titulo); }
.pp .opcao.pp-op:active { transform: scale(.97); }
.pp .opcao.pp-op:focus-visible { outline: 2px solid var(--pp-acento); outline-offset: 2px; }
.pp .opcao.pp-op.active { --pp-op-borda: var(--pp-acento); --pp-op-sombra: inset 0 0 0 1px var(--pp-acento); --pp-op-fundo: var(--pp-suave); --pp-op-cor: var(--pp-titulo); }
.pp-op-txt { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pp-op-mais { font-size: 11.5px; font-weight: 600; color: var(--pp-acento); }
.pp-op-desc { font-size: 11.5px; font-weight: 400; color: var(--pp-sub); }
body.vitrine .pp .opcao.opcao-esgotada { opacity: .42; cursor: not-allowed; pointer-events: none; --pp-op-fundo: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .05) 6px 7px), var(--pp-card); }
.pp .opcao.opcao-esgotada .pp-op-nome { text-decoration: line-through; }
body.vitrine .pp .opcao .opcao-sem { position: absolute; top: -8px; right: -6px; margin: 0; padding: 1px 6px; border-radius: 99px; background: #4b5563; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
/* cores: bolinhas */
.pp-var-cores .pp-opcoes { gap: 12px; }
.pp .pp-var-cores .opcao.pp-op { --pp-op-minw: 0; --pp-op-minh: 0; --pp-op-pad: 3px; --pp-op-raio: 50%; --pp-op-borda: transparent; --pp-op-fundo: transparent; }
.pp .pp-var-cores .opcao.pp-op:hover { --pp-op-borda: var(--pp-borda); }
.pp .pp-var-cores .opcao.pp-op.active { --pp-op-borda: var(--pp-acento); --pp-op-sombra: none; --pp-op-fundo: transparent; }
.pp-var-cores .pp-op-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.vitrine .pp .pp-cor { display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border: 0; border-radius: 50%; background: var(--pp-cor); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); font-size: 10.5px; font-weight: 700; line-height: 1; color: var(--pp-sub); text-transform: uppercase; }
/* modo pilula */
.pp-variacao-pilula .pp-var:not(.pp-var-cores) .opcao.pp-op { --pp-op-raio: 999px; --pp-op-pad: 0 20px; }
.pp-variacao-pilula .pp-var:not(.pp-var-cores) .opcao.pp-op.active { --pp-op-fundo: var(--pp-acento); --pp-op-borda: var(--pp-acento); --pp-op-cor: #fff; --pp-op-sombra: 0 6px 16px color-mix(in srgb, var(--pp-acento) 35%, transparent); }
.pp-variacao-pilula .pp-var:not(.pp-var-cores) .opcao.pp-op.active .pp-op-mais { color: #fff; opacity: .85; }
/* modo linha (tipografico): sem caixa, so o sublinhado na escolhida */
body.vitrine .pp.pp-variacao-linha .pp-var:not(.pp-var-cores) .pp-opcoes { gap: 4px 18px; }
.pp-variacao-linha .pp-var:not(.pp-var-cores) .opcao.pp-op { --pp-op-minw: 0; --pp-op-minh: 36px; --pp-op-pad: 0 6px; --pp-op-bw: 0; --pp-op-raio: 0; --pp-op-fundo: transparent; --pp-op-cor: var(--pp-sub); --pp-op-fs: 15px; --pp-op-esp: .08em; --pp-op-peso: 500; }
.pp-variacao-linha .pp-var:not(.pp-var-cores) .opcao.pp-op:hover { --pp-op-cor: var(--pp-titulo); }
.pp-variacao-linha .pp-var:not(.pp-var-cores) .opcao.pp-op.active { --pp-op-sombra: inset 0 -2px 0 var(--pp-titulo); --pp-op-fundo: transparent; --pp-op-cor: var(--pp-titulo); }
/* modo cartao (blocos com bolinha de escolha) */
.pp-variacao-cartao .pp-var:not(.pp-var-cores) .pp-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
body.vitrine .pp.pp-variacao-cartao .pp-var:not(.pp-var-cores) .opcao.pp-op { justify-content: flex-start !important; text-align: left; }
.pp-variacao-cartao .pp-var:not(.pp-var-cores) .opcao.pp-op { --pp-op-minh: 64px; --pp-op-pad: 10px 14px 10px 40px; }
.pp-variacao-cartao .pp-var:not(.pp-var-cores) .pp-op-txt { align-items: flex-start; }
.pp-variacao-cartao .pp-var:not(.pp-var-cores) .opcao.pp-op::before { content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid var(--pp-borda); border-radius: 50%; background: var(--pp-card); transition: all .15s; }
.pp-variacao-cartao .pp-var:not(.pp-var-cores) .opcao.pp-op.active::before { border: 5px solid var(--pp-acento); }

.pp .error-holder label.error { display: block; margin: 8px 0 0; color: #dc2626; font-size: 12.5px; font-weight: 600; }
.pp-estoque { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: #b45309; }
.pp-estoque i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); animation: pp-pisca 1.6s infinite; }
@keyframes pp-pisca { 50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); } }

/* ---------- comprar ---------- */
.pp-acao { display: flex; gap: 12px; align-items: stretch; }
.pp .pp-qtd { display: flex; align-items: center; flex: 0 0 auto; height: var(--pp-botao-alt); padding: 0 4px; border: 1.5px solid var(--pp-borda); border-radius: var(--pp-raio-botao); background: var(--pp-card); float: none; margin: 0; }
.pp .pp-qtd button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--pp-titulo); cursor: pointer; }
.pp .pp-qtd button:hover { background: var(--pp-suave); }
.pp .pp-qtd input { width: 42px; height: 100%; border: 0; background: none; text-align: center; font-size: 16px; font-weight: 700; color: var(--pp-titulo); -moz-appearance: textfield; padding: 0; box-shadow: none; }
.pp .pp-qtd input::-webkit-outer-spin-button, .pp .pp-qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp .pp-botao { --pp-b-raio: var(--pp-raio-botao); --pp-b-sombra: 0 10px 24px color-mix(in srgb, var(--pp-acento) 30%, transparent); --pp-b-peso: 800; }
body.vitrine .pp .pp-botao, body.vitrine .pp .pp-agora { border-radius: var(--pp-b-raio) !important; font-weight: var(--pp-b-peso) !important; box-shadow: var(--pp-b-sombra) !important; }
.pp .pp-agora { --pp-b-raio: var(--pp-raio-botao); --pp-b-sombra: none; --pp-b-peso: 800; }
.pp .pp-botao { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--pp-botao-alt); padding: 0 24px; border: 0; border-radius: var(--pp-raio-botao); background: var(--pp-acento); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; float: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--pp-acento) 30%, transparent); transition: transform .15s, box-shadow .15s, filter .15s; }
.pp .pp-botao:hover { transform: translateY(-2px); filter: brightness(1.06); --pp-b-sombra: 0 14px 30px color-mix(in srgb, var(--pp-acento) 38%, transparent); color: #fff; }
.pp .pp-botao.vt-adicionando { opacity: .7; pointer-events: none; }
.pp .pp-botao.vt-adicionado { background: #15803d; }
.pp .pp-botao-esgotado { background: #9ca3af; --pp-b-sombra: none; cursor: default; }
.pp .pp-botao-esgotado:hover { transform: none; filter: none; --pp-b-sombra: none; }
.pp .pp-agora { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: -10px; border: 1.5px solid var(--pp-titulo); border-radius: var(--pp-raio-botao); background: transparent; color: var(--pp-titulo); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; float: none; transition: background .15s, color .15s; }
.pp .pp-agora:hover { background: var(--pp-titulo); color: var(--pp-card); }
.pp-total { font-size: 14px; color: var(--pp-sub); text-align: right; margin-top: -10px; }
.pp-total strong { font-weight: 600; }
.pp-total:empty { display: none; }
.pp-fechada { display: grid; gap: 12px; padding: 18px; border-radius: var(--pp-raio); background: var(--pp-suave); }
.pp-fechada p { margin: 0; }
.pp .aviso-estoque, .pp .hdl-aviso-estoque { margin-top: 4px; }

/* frete */
.pp-frete { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--pp-borda); border-radius: var(--pp-raio); background: var(--pp-card); }
.pp-frete label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--pp-titulo); }
.pp-frete-campo { display: flex; gap: 8px; }
.pp-frete-campo input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1.5px solid var(--pp-borda); border-radius: calc(var(--pp-raio) * .55); background: var(--pp-card); color: var(--pp-texto); font-size: 15px; letter-spacing: .06em; }
.pp-frete-campo input:focus { outline: none; border-color: var(--pp-acento); }
.pp .pp-frete-campo button { flex: 0 0 auto; width: auto; height: 46px; padding: 0 20px; border: 0; border-radius: calc(var(--pp-raio) * .55); background: var(--pp-titulo); color: var(--pp-card); font-weight: 700; cursor: pointer; }
.pp-frete-busca { justify-self: start; font-size: 12px; color: var(--pp-sub); }
.pp-frete-res ul { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.pp-frete-res li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--pp-borda); font-size: 13.5px; }
.pp-frete-res li small { display: block; color: var(--pp-sub); font-size: 12px; }
.pp-frete-res li b { white-space: nowrap; color: var(--pp-titulo); }
.pp-frete-erro { margin: 0; color: #dc2626; font-size: 13px; }
.pp-frete-carrega { margin: 0; color: var(--pp-sub); font-size: 13px; }

/* garantias */
.pp-garantias { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; padding: 0; list-style: none; }
.pp-garantias li { display: flex; align-items: center; gap: 12px; font-size: 12.5px; line-height: 1.35; color: var(--pp-sub); }
.pp-garantias svg { flex: 0 0 auto; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--pp-suave); color: var(--pp-acento); }
.pp-garantias b { display: block; color: var(--pp-titulo); font-size: 13px; }

/* compartilhar */
.pp-compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--pp-borda); font-size: 13px; color: var(--pp-sub); }
.pp-compartilhar > a, .pp-compartilhar > button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--pp-borda); border-radius: 50%; background: var(--pp-card); color: var(--pp-titulo); cursor: pointer; transition: all .15s; }
.pp-compartilhar > a:hover, .pp-compartilhar > button:hover { border-color: var(--pp-acento); color: var(--pp-acento); }
.pp-compartilhar > button.ok { background: #15803d; border-color: #15803d; color: #fff; }
.pp-compartilhar .hdl-comparar { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pp-compartilhar .hdl-comparar button { height: 36px; padding: 0 14px; border: 1px solid var(--pp-borda); border-radius: 99px; background: var(--pp-card); color: var(--pp-titulo); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pp-compartilhar .hdl-comparar button.ativo { border-color: var(--pp-acento); color: var(--pp-acento); }
.pp-aviso { margin: 0; font-size: 13px; }

/* barra fixa */
.pp-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 10px 0; background: color-mix(in srgb, var(--pp-card) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--pp-borda); box-shadow: 0 -10px 30px rgba(0, 0, 0, .08); transform: translateY(110%); transition: transform .3s ease; }
.pp-fixa.ativa { transform: none; }
.pp-fixa-in { display: flex; align-items: center; gap: 14px; }
.pp-fixa img { width: 48px; height: 48px; object-fit: cover; border-radius: calc(var(--pp-raio) * .5); }
.pp-fixa-txt { flex: 1; min-width: 0; display: grid; }
.pp-fixa-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pp-titulo); font-size: 14px; }
.pp-fixa-txt span { font-weight: 800; color: var(--pp-titulo); }
.pp .pp-fixa .pp-botao { flex: 0 0 auto; min-height: 46px; padding: 0 28px; font-size: 13px; --pp-b-sombra: none; }

/* ---------- abas ---------- */
.ppa { margin-top: 10px; margin-bottom: 40px; color: var(--pp-texto); }
.ppa svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ppa .ppa-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--pp-borda); }
/* o CSS antigo pinta de branco o span de todo botao e o Vitrine forca as abas com !important: tudo por variaveis aqui */
.pp button span, .ppa button span { color: inherit; }
.ppa .ppa-abas button { --ppa-b-pad: 16px 2px; --ppa-b-mar: 0 0 -1px; --ppa-b-borda: 0; --ppa-b-bb: 2px solid transparent; --ppa-b-bl: 0; --ppa-b-raio: 0; --ppa-b-fundo: none; --ppa-b-cor: var(--pp-sub); }
.ppa .ppa-abas button:hover { --ppa-b-cor: var(--pp-titulo); }
.ppa .ppa-abas button.ativa { --ppa-b-cor: var(--pp-titulo); --ppa-b-bb: 2px solid var(--pp-acento); }
body.vitrine .ppa .ppa-abas button { padding: var(--ppa-b-pad) !important; margin: var(--ppa-b-mar) !important; width: auto !important; border: var(--ppa-b-borda) !important; border-bottom: var(--ppa-b-bb) !important; border-left: var(--ppa-b-bl) !important; border-radius: var(--ppa-b-raio) !important; background: var(--ppa-b-fundo) !important; color: var(--ppa-b-cor) !important; }
.ppa .ppa-abas button { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -1px; padding: 16px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--pp-sub); font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: color .15s, border-color .15s; }
.ppa .ppa-abas svg { opacity: .7; }
.ppa .ppa-painel { display: none; }
.ppa .ppa-painel.ativo { display: block; }
.ppa .ppa-titulo { display: none; }
.ppa .ppa-corpo { max-width: 920px; margin: 0 auto; }
.ppa-texto { font-size: 15.5px; line-height: 1.75; }
.ppa-texto h3 { margin: 26px 0 10px; font-family: var(--pp-fonte-titulo); font-size: 20px; color: var(--pp-titulo); }
.ppa-texto p { margin: 0 0 14px; }
.ppa .ppa-destaques { padding-left: 0 !important; }
.ppa-destaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 18px 0 22px; padding: 0; list-style: none; }
.ppa-destaques li { position: relative; padding: 14px 16px 14px 46px; border-radius: var(--pp-raio); background: var(--pp-suave); font-size: 14px; line-height: 1.45; }
.ppa-destaques li::before { content: ''; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: var(--pp-acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ppa-spec { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--pp-borda); border-radius: var(--pp-raio); overflow: hidden; font-size: 14.5px; }
.ppa-spec th, .ppa-spec td { padding: 14px 20px; border-bottom: 1px solid var(--pp-borda); text-align: left; vertical-align: top; }
.ppa-spec tr:last-child th, .ppa-spec tr:last-child td { border-bottom: 0; }
.ppa-spec th { width: 34%; background: var(--pp-suave); color: var(--pp-titulo); font-weight: 700; }
.ppa-pag { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; }
.ppa-pags { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ppa-pags li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--pp-borda); border-radius: var(--pp-raio); }
.ppa-pags li b { color: var(--pp-titulo); }
.ppa-pags li span { font-size: 13px; color: var(--pp-sub); }
.ppa-parcelas { width: 100%; border-collapse: collapse; font-size: 14px; }
.ppa-parcelas caption { padding: 0 0 10px; text-align: left; font-weight: 700; color: var(--pp-titulo); caption-side: top; }
.ppa-parcelas th, .ppa-parcelas td { padding: 9px 12px; border-bottom: 1px solid var(--pp-borda); }
.ppa-parcelas th { width: 60px; color: var(--pp-titulo); }
.ppa-parcelas td:last-child { text-align: right; color: #15803d; font-size: 12.5px; font-weight: 600; }
.ppa-nota { margin: 20px 0 0; font-size: 13px; color: var(--pp-sub); }
.ppa .avaliacoes, .ppa .perguntas { width: auto; max-width: none; padding: 0; margin: 0; }
/* pilulas */
.ppa.pp-abas-pilulas .ppa-abas { gap: 8px; border-bottom: 0; }
.ppa.pp-abas-pilulas .ppa-abas button { --ppa-b-pad: 11px 20px; --ppa-b-mar: 0; --ppa-b-borda: 1.5px solid var(--pp-borda); --ppa-b-bb: 1.5px solid var(--pp-borda); --ppa-b-bl: 1.5px solid var(--pp-borda); --ppa-b-raio: 999px; }
.ppa.pp-abas-pilulas .ppa-abas button.ativa { --ppa-b-fundo: var(--pp-titulo); --ppa-b-borda: 1.5px solid var(--pp-titulo); --ppa-b-bb: 1.5px solid var(--pp-titulo); --ppa-b-bl: 1.5px solid var(--pp-titulo); --ppa-b-cor: var(--pp-card); }
/* abas na lateral (computador) */
@media (min-width: 992px) {
	.ppa.pp-abas-lado { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
	/* o .container do Bootstrap tem ::before/::after (display: table) que viravam celulas da grade e empurravam as abas */
	.ppa.pp-abas-lado::before, .ppa.pp-abas-lado::after { content: none; display: none; }
	.ppa.pp-abas-lado .ppa-abas { grid-column: 1; grid-row: 1; }
	.ppa.pp-abas-lado .ppa-paineis { grid-column: 2; grid-row: 1; min-width: 0; }
	.ppa.pp-abas-lado .ppa-abas { flex-direction: column; align-self: start; position: sticky; top: 24px; gap: 4px; margin: 0; border: 0; border-left: 1px solid var(--pp-borda); }
	.ppa.pp-abas-lado .ppa-abas button { justify-content: flex-start; --ppa-b-mar: 0 0 0 -1px; --ppa-b-pad: 13px 18px; --ppa-b-bb: 0; --ppa-b-bl: 2px solid transparent; }
	.ppa.pp-abas-lado .ppa-abas button.ativa { --ppa-b-bl: 2px solid var(--pp-acento); --ppa-b-bb: 0; --ppa-b-fundo: var(--pp-suave); }
	.ppa.pp-abas-lado .ppa-corpo { max-width: none; margin: 0; }
}
/* sanfona (e todas no celular) */
.ppa.pp-abas-sanfona .ppa-abas { display: none; }
.ppa.pp-abas-sanfona .ppa-painel { display: block; border-bottom: 1px solid var(--pp-borda); }
.ppa.pp-abas-sanfona .ppa-painel:first-child { border-top: 1px solid var(--pp-borda); }
.ppa.pp-abas-sanfona .ppa-titulo { display: flex; }
.ppa.pp-abas-sanfona .ppa-painel:not(.ativo) .ppa-corpo { display: none; }
.ppa.pp-abas-sanfona .ppa-corpo { max-width: none; padding: 0 0 26px; }
.ppa .ppa-titulo { align-items: center; gap: 12px; width: 100%; padding: 22px 2px; border: 0; background: none; color: var(--pp-titulo); font-family: var(--pp-fonte-titulo); font-size: 18px; font-weight: 700; text-align: left; cursor: pointer; }
.ppa .ppa-titulo span { flex: 1; }
.ppa .ppa-titulo i { position: relative; flex: 0 0 auto; width: 14px; height: 14px; color: var(--pp-titulo); }
.ppa .ppa-titulo i::before, .ppa .ppa-titulo i::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s; }
.ppa .ppa-titulo i::after { transform: rotate(90deg); }
.ppa .ppa-painel.ativo .ppa-titulo i::after { transform: rotate(0); }

/* ---------- celular e tablet ---------- */
@media (max-width: 991px) {
	.pp-grade { grid-template-columns: 1fr; gap: 26px; }
	.pp-galeria { position: static; }
	.pp-galeria-lateral .pp-galeria { grid-template-columns: 1fr; }
	.pp-galeria-lateral .pp-miniaturas { order: 0; flex-direction: row; }
}
@media (max-width: 767px) {
	.pp { --pp-titulo-tam: 25px; --pp-preco-tam: 30px; --pp-botao-alt: 54px; padding-top: 6px; }
	.pp .container { padding-left: 16px; padding-right: 16px; }
	.pp-trilha { margin-bottom: 14px; font-size: 12px; }
	.pp-trilha span { max-width: 22ch; }
	.pp-palco { margin: 0 -16px; border-radius: 0; }
	.pp-miniaturas, .pp-seta, .pp-lupa { display: none; }
	.pp-pontos { display: flex; }
	.pp-preco { padding: 16px 18px; }
	.pp-garantias { grid-template-columns: 1fr; gap: 12px; }
	.pp .pp-botao { padding: 0 16px; letter-spacing: .02em; }
	.pp-compartilhar .hdl-comparar { margin-left: 0; width: 100%; }
	.ppa .ppa-abas { display: none; }
	.ppa .ppa-painel { display: block; border-bottom: 1px solid var(--pp-borda); }
	.ppa .ppa-painel:first-child { border-top: 1px solid var(--pp-borda); }
	.ppa .ppa-titulo { display: flex; font-size: 16.5px; padding: 18px 2px; }
	.ppa .ppa-painel:not(.ativo) .ppa-corpo { display: none; }
	.ppa .ppa-corpo { padding: 0 0 22px; }
	.ppa-spec th, .ppa-spec td { padding: 12px 14px; }
	.pp-fixa { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
	.pp-fixa { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--pp-borda); transform: translateY(-110%); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
}
@media (prefers-reduced-motion: reduce) {
	.pp *, .ppa * { transition: none !important; animation: none !important; }
}

/* ---------- cartao de produto premium (_premium_card.php) ---------- */
.ppc .ppc-img { position: relative; overflow: hidden; }
.ppc .ppc-img2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease, transform .6s ease; }
@media (hover: hover) {
	.ppc.ppc-duas:hover .ppc-img2 { opacity: 1; }
	.ppc .ppc-ver { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: block; padding: 11px 10px; border-radius: var(--raio-botao, 999px); background: rgba(255, 255, 255, .95); color: var(--titulos, #111); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
	.ppc:hover .ppc-ver { opacity: 1; transform: none; }
}
@media (hover: none) { .ppc .ppc-ver { display: none; } }
.ppc .ppc-marca { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sub, #6b7785); }
.ppc .ppc-parc { display: block; font-size: 12px; color: var(--sub, #6b7785); }

/* topo: icone do menu e voltar no celular na cor do texto do topo (some nos topos escuros) */
body.vitrine .vt-topo .vt-icone { color: var(--topo-texto, #0b1c26) !important; }