/* ============================================================================
   PALETA ÚNICA DO SITE (08/10/2026) — mude as cores só aqui.
   principal  = turquesa dos botões de compra (fundo de botão, destaques)
   principal-escura = o mesmo turquesa mais escuro, para TEXTO ("no Pix", "Grátis",
              links): no fundo claro dá contraste de leitura (AA)
   principal-clara  = destaques suaves (caixa do brinde, opção escolhida, selos)
   escura     = faixa do topo, rodapés e textos
   fundo      = off-white único das seções; caixa = branco das caixas e campos
   desconto   = vermelho só no selo de desconto; estrela = amarelo só nas estrelas
   erro       = vermelho de mensagem de erro (funcional, só em erro de campo)
   ========================================================================== */
:root {
  --cor-principal: #0e8f86;
  --cor-principal-escura: #0a6e67;
  --cor-principal-clara: #e3f4f1;
  --cor-principal-linha: #b9e3dd;
  --cor-escura: #161616;
  --cor-texto-2: #3a3a3a;
  --cor-cinza: #666666;
  --cor-linha: #e3e1dc;
  --cor-linha-forte: #b8b5ae;
  --cor-fundo: #f7f6f2;
  --cor-caixa: #ffffff;
  --cor-sobre-escuro: #ececec;
  --cor-sobre-escuro-2: #9a9a9a;
  --cor-desconto: #dc2626;
  --cor-estrela: #ffb400;
  --cor-erro: #b42318;
  --cor-erro-fundo: #fffbfa;
  --cor-erro-linha: #f3c7c1;
}
/* ============================================================================
   Tema "Casa da Gente" v6 — página de produto no estilo MALVA / Absortti.
   Carregado depois do CSS do Tailwind. Fica fora de @layer, então vence as
   utilities quando mira o mesmo elemento.
   Classes "pp-*": página nova (tema/pagina-produto.js)
   Classes "cdg-*": telas antigas que continuam em uso (checkout, PIX)
   ========================================================================== */

:root {
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --pp-bg: var(--cor-fundo);
  --pp-card: #ffffff;
  --pp-line: var(--cor-linha);
  --pp-line-2: var(--cor-fundo);
  --pp-ink: var(--cor-escura);
  --pp-ink-2: var(--cor-texto-2);
  --pp-muted: var(--cor-cinza);
  --pp-accent: var(--cor-principal);
  --pp-accent-600: var(--cor-principal-escura);
  --pp-accent-soft: var(--cor-principal-clara);
  --pp-accent-line: var(--cor-principal-linha);
  --pp-dark: var(--cor-escura);
  --pp-green: var(--cor-principal-escura);
  --pp-gold: var(--cor-principal);          /* teal claro da marca */
  --pp-star: var(--cor-estrela);          /* amarelo padrão das estrelas das avaliações */
  --pp-green-soft: var(--cor-principal-clara);
  --pp-radius: 18px;

  /* Animações: uma duração e um easing para o site inteiro */
  --pp-header-h: 58px;

  /* Camadas (z-index) do site — sempre usar estas variáveis
     header < barra fixa < botão flutuante < gavetas/overlay < janelas < avisos */
  --z-header: 40;
  --z-sticky: 45;
  --z-flutuante: 46;
  --z-gaveta: 80;
  --z-modal: 90;
  --z-toast: 100;
  --pp-dur: 300ms;
  --pp-dur-rapida: 170ms;
  --pp-ease: cubic-bezier(.22, 1, .36, 1);
  --pp-shadow: 0 1px 2px rgba(22, 22, 22, .04), 0 8px 24px -16px rgba(22, 22, 22, .18);
}

html,
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.pp-lock { overflow: hidden; }
::selection { background: var(--pp-accent-soft); color: var(--pp-ink); }

/* ---------- Base da página ---------- */
.pp-page {
  background: var(--pp-bg);
  color: var(--pp-ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  /* Saída suave ao ir para o checkout (a classe é posta no clique do botão). */
  transition: opacity 120ms linear;
  /* Entrada suave de cada tela (produto e checkout usam .pp-page). "backwards"
     só vale durante a animação, então não trava a opacidade da saída. */
  animation: pp-fade 180ms ease-out backwards;
}
.pp-page.is-saindo { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pp-page { transition: none; }
  .pp-page.is-saindo { opacity: 1; }
}
:where(.pp-page, .pp-header) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:where(.pp-page) img { display: block; max-width: 100%; }
.pp-ico { width: 20px; height: 20px; flex-shrink: 0; }

.pp-main {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 8px;
}
.pp-main > section { scroll-margin-top: 76px; }

.pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

.pp-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pp-muted);
  margin: 0 0 6px;
}
.pp-eyebrow.is-accent { color: var(--pp-accent); }

.pp-h2 {
  font-size: 24px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
.pp-sub { color: var(--pp-muted); font-size: 14px; margin: 8px 0 0; }
.pp-text { color: var(--pp-ink-2); font-size: 15px; line-height: 1.65; margin: 12px 0 0; }

.pp-sec { padding: 36px 16px 0; }
.pp-sec-head { margin-bottom: 16px; }
.pp-sec-head.is-center { text-align: center; }
/* Ícone solto (sem fundo) acima do título da seção */
.pp-sec-ico { display: flex; justify-content: center; color: var(--pp-accent); margin-bottom: 6px; }
.pp-sec-ico .pp-ico { width: 18px; height: 18px; }
/* Barrinha vertical na cor da marca à esquerda do título da seção, só nos títulos
   alinhados à esquerda (acompanha a altura do título quando ele quebra em duas linhas) */
.pp-sec-head:not(.is-center) .pp-h2 { display: flex; align-items: center; gap: 10px; }
.pp-sec-head:not(.is-center) .pp-h2::before {
  content: "";
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pp-gold), var(--pp-accent));
}

.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--pp-green-soft);
  color: var(--pp-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.pp-chip .pp-ico { width: 13px; height: 13px; }

.pp-stars { display: inline-flex; gap: 1px; color: var(--pp-star); }
.pp-stars .is-empty { color: var(--cor-linha-forte); }
.pp-stars-sm .pp-ico { width: 15px; height: 15px; }
.pp-stars-md .pp-ico { width: 20px; height: 20px; }

.pp-off {
  display: inline-block;
  background: var(--cor-desconto); /* vermelho de desconto */
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* ---------- Botão principal ---------- */
.pp-page .pp-cta,
.pp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 14px;
  /* Teal vivo (mais saturado que o da marca) em degradê, com brilho colorido:
     o botão precisa saltar da página, não se misturar a ela. */
  background: linear-gradient(180deg, var(--cor-principal) 0%, var(--cor-principal) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .005em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  box-shadow: 0 14px 28px -12px rgba(14, 143, 134, .75), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .35);
  transition: filter .15s ease, transform .12s ease;
}
.pp-cta:hover { filter: brightness(1.08) saturate(1.1); }
.pp-cta:active { transform: scale(.985); }
.pp-cta:disabled { background: var(--cor-principal-linha); box-shadow: none; text-shadow: none; filter: none; cursor: default; }
.pp-cta .pp-ico { width: 20px; height: 20px; }

/* Brilho que atravessa o botão de tempos em tempos (só nos 4 CTAs principais:
   Adicionar ao carrinho, Adicionar, Finalizar compra e o botão de pagamento).
   Passa em ~0,9s e volta a cada 4s. */
.pp-brilho { position: relative; overflow: hidden; }
.pp-brilho::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-130%);
  /* linear: a faixa atravessa em velocidade constante */
  animation: pp-brilho 4s linear infinite;
}
@keyframes pp-brilho {
  0% { transform: translateX(-130%); }
  22% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) { .pp-brilho::after { animation: none; opacity: 0; } }

.pp-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--pp-ink-2);
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--pp-line);
}

/* ---------- Faixa de avisos (topo) ---------- */
.pp-promo {
  /* Faixa na cor da marca (teal escuro), texto branco. */
  background: var(--pp-accent);
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
}
.pp-promo-track {
  display: flex;
  width: max-content;
  animation: pp-marquee 28s linear infinite;
}
.pp-promo:hover .pp-promo-track { animation-play-state: paused; }
.pp-promo-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Faixa baixa de propósito: ela não pode disputar altura com o header. */
  padding: 6px 20px;
  line-height: 1.3;
  position: relative;
}
.pp-promo-item::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 3px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .3);
}
/* Ícones na mesma cor do texto. */
.pp-promo-item .pp-ico { width: 13px; height: 13px; color: currentColor; }
@keyframes pp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pp-promo-track { animation: none; } }

/* ---------- Header ----------
   No topo: vidro fosco, sem traço, o logo "solto" sobre a página.
   Depois de rolar (classe is-rolado, ver PpHeaderShell): fundo mais sólido,
   fio fino e uma sombra baixa, para separar do conteúdo. */
.pp-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pp-header.is-rolado {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--pp-line);
  box-shadow: 0 8px 22px -16px rgba(22, 22, 22, .55);
}
.pp-header-in {
  max-width: 480px;
  margin: 0 auto;
  height: var(--pp-header-h);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Sem o menu de 3 barras, o logo é o primeiro item: alinhado com o conteúdo
   da página (16px da borda = 10px do header + 6px aqui). */
.pp-header-in .pp-logo { margin-right: auto; margin-left: 6px; }
.pp-icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--pp-ink);
  transition: background-color .15s ease;
}
.pp-icon-btn:hover { background: var(--pp-line-2); }
.pp-icon-btn .pp-ico { width: 23px; height: 23px; }


.pp-logo { display: inline-flex; align-items: center; gap: 9px; text-align: left; }
.pp-logo-img { display: block; height: 36px; width: auto; max-width: 100%; }
.cdg-logo-img { display: block; height: 30px; width: auto; }
.pp-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--pp-ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-logo-mark .pp-ico { width: 19px; height: 19px; }
.pp-logo-txt { display: flex; flex-direction: column; line-height: 1; }
.pp-logo-txt strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-logo-txt small {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

/* ---------- Galeria ---------- */
.pp-gallery { padding: 14px 16px 0; }
.pp-gallery-stage {
  --zx: 50%;
  --zy: 50%;
  position: relative;
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  cursor: zoom-in;
}
/* Todas as fotos empilhadas: a atual aparece com dissolve (como no vídeo de referência). */
.pp-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform-origin: var(--zx) var(--zy);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.pp-gallery-img.is-on { opacity: 1; }
.pp-gallery-stage.is-zoom .pp-gallery-img { transform: scale(1.35); transition: opacity .45s ease, transform .3s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .pp-gallery-img { transition: opacity .2s linear; }
  .pp-gallery-stage.is-zoom .pp-gallery-img { transform: none; }
}

.pp-thumbs {
  position: relative;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 10px;
  padding-bottom: 2px;
}
.pp-thumbs::-webkit-scrollbar { display: none; }
.pp-thumb {
  flex: 0 0 62px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.pp-thumb-img {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  opacity: .78;
  transition: opacity .2s ease, transform .2s ease;
}
.pp-thumb-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pp-thumb-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .2s ease;
  pointer-events: none;
}
.pp-thumb:hover .pp-thumb-img { opacity: 1; transform: translateY(-2px); }
.pp-thumb:hover .pp-thumb-img > img { transform: scale(1.08); }
.pp-thumb.is-on .pp-thumb-img { opacity: 1; }
.pp-thumb.is-on .pp-thumb-img::after { box-shadow: inset 0 0 0 2px var(--pp-accent); }
.pp-thumb-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  min-height: 2.5em;
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  color: var(--pp-muted);
}
/* A cor escolhida só fica mais escura: o negrito ficava pesado demais. */
.pp-thumb.is-on .pp-thumb-name { color: var(--pp-ink); }

/* ---------- Bloco de compra ---------- */
.pp-buy { margin: 16px 16px 0; padding: 20px 18px 18px; }
.pp-buy .pp-chip { margin-bottom: 14px; }
.pp-title {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
/* Estrelas acima do nome do produto (botão: leva às avaliações) */
.pp-page .pp-rating { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0; font-size: 13px; color: var(--pp-muted); cursor: pointer; }
.pp-rating:hover span:last-child { text-decoration: underline; text-underline-offset: 2px; }
.pp-rating strong { color: var(--pp-ink); font-weight: 800; }
.pp-lead { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; margin: 16px 0 10px; }
.pp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-checks li { display: flex; gap: 10px; font-size: 14px; color: var(--pp-ink-2); line-height: 1.45; }
.pp-checks .pp-ico { width: 18px; height: 18px; color: var(--pp-accent); margin-top: 1px; }

.pp-price {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--cor-fundo);
  border: 1px solid var(--pp-line-2);
}
.pp-price-top { display: flex; align-items: center; gap: 8px; color: var(--pp-muted); font-size: 14px; }

/* Oferta relâmpago: faixa colada no topo da caixa de preço (PpOfertaRelampago) */
.pp-relampago {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px 14px 0 0;
  /* amarelo-âmbar do banco e das manoplas da moto; texto escuro para ler bem */
  background: linear-gradient(135deg, var(--cor-principal) 0%, var(--cor-principal-escura) 100%);
  color: var(--cor-escura);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.pp-relampago.is-simples { padding: 11px 14px; }
.pp-relampago.is-simples .pp-relampago-txt { align-items: center; }
.pp-relampago + .pp-price { margin-top: 0; border-top: 0; border-radius: 0 0 14px 14px; }
.pp-relampago-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-relampago-selo { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--cor-principal-clara); }
.pp-relampago-selo .pp-ico { width: 13px; height: 13px; animation: pp-pisca 1.2s ease-in-out infinite; }
.pp-relampago-txt strong { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.pp-relampago-txt strong .pp-ico { width: 20px; height: 20px; flex-shrink: 0; }
.pp-relampago-txt strong { font-size: 15.5px; }
.pp-relampago-tempo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-relampago-rot { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.pp-relampago-caixas { display: flex; gap: 4px; }
.pp-relampago-caixa { min-width: 34px; padding: 4px 3px 3px; border-radius: 8px; background: rgba(255, 255, 255, .85); color: var(--cor-escura); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pp-relampago-caixa b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-relampago-caixa small { margin-top: 2px; font-size: 8.5px; font-weight: 600; text-transform: uppercase; opacity: .85; }
@keyframes pp-pisca { 50% { opacity: .35; } }
.pp-relampago-caixa { min-width: 40px; }

.pp-price-main { font-size: 36px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* "no Pix" ao lado do preço promocional */
.pp-price-pix { margin-left: 8px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--pp-green); }
.pp-price-sub { color: var(--pp-ink-2) !important; font-weight: 600 !important; }
.pp-price-sub { margin: 4px 0 0; font-size: 13px; color: var(--pp-green); font-weight: 700; }

.pp-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cor-fundo);
  font-size: 13px;
  color: var(--pp-ink-2);
  line-height: 1.45;
}
.pp-note .pp-ico { width: 18px; height: 18px; color: var(--pp-muted); }

.pp-step { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 15px; font-weight: 800; }

/* Bolinha de seleção (formas de pagamento no checkout) */
.pp-radio {
  position: absolute;
  top: 15px;
  left: 11px;
  width: 16px;
  height: 16px;
  border-radius: 99px;
  border: 1.5px solid var(--cor-linha-forte);
  background: #fff;
}
.pp-desc { padding: 18px; font-size: 14px; line-height: 1.65; color: var(--pp-ink-2); }
/* Descrição em tópicos (tema/produto.json: descricaoIntro + descricaoTopicos) */
.pp-desc-intro { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--pp-ink); }
.pp-desc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-desc-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.pp-desc-lista .pp-ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--pp-accent); }
/* Blocos extras da descrição (produto.descricaoBlocos) */
.pp-desc-bloco { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--pp-line); }
.pp-desc-bloco-titulo { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--pp-ink); }
.pp-desc-ficha { margin: 0; display: grid; gap: 0; }
.pp-desc-ficha > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--pp-line); font-size: 14px; }
.pp-desc-ficha > div:last-child { border-bottom: 0; }
.pp-desc-ficha dt { color: var(--pp-ink-2); }
.pp-desc-ficha dd { margin: 0; font-weight: 700; color: var(--pp-ink); text-align: right; }

/* Quantidade de jogos */
.pp-qty-step { margin-top: 18px; justify-content: space-between; }
.pp-qty { display: inline-flex; align-items: center; border: 1px solid var(--pp-line); border-radius: 99px; }
.pp-qty button { width: 42px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; }
.pp-qty button:disabled { opacity: .35; cursor: default; }
.pp-qty .pp-ico { width: 14px; height: 14px; }
.pp-qty span { min-width: 30px; text-align: center; font-size: 16px; font-weight: 800; }

/* Escolha de cor */
.pp-step-value { font-weight: 600; color: var(--pp-ink-2); }
.pp-color-row + .pp-color-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--pp-line); }
.pp-color-label { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; }
/* Total logo acima do botão, quando há mais de um jogo */
.pp-total-linha { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 18px 0 -6px; font-size: 14px; color: var(--pp-ink-2); }
.pp-total-linha strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--pp-ink); }
.pp-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 6px; justify-items: center; }
.pp-swatch {
  width: 38px;
  height: 38px;
  border-radius: 99px;
  padding: 3px !important;
  border: 2px solid transparent !important;
  transition: border-color .15s ease, transform .12s ease;
}
.pp-swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.pp-swatch:hover { transform: scale(1.06); }
.pp-swatch.is-on { border-color: var(--pp-accent) !important; }



.pp-under-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--pp-muted);
}
.pp-under-cta .pp-ico { width: 15px; height: 15px; }

/* Uma fileira só, para não empurrar a página para baixo. As colunas não são
   iguais: cada rótulo recebe a largura de que precisa (por isso os números
   abaixo), e assim "Frete grátis" cabe em uma linha e "30 dias para devolver"
   não fica espremido entre os divisores. Mexeu nos textos dos selos? Confira
   aqui também. */
.pp-trust3 {
  display: grid;
  grid-template-columns: 53fr 69fr 74fr 71fr;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-line-2);
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  color: var(--pp-ink-2);
}
.pp-trust3 > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 0 5px; }
.pp-trust3 > div + div { border-left: 1px solid var(--pp-line-2); }
.pp-trust3 .pp-ico { width: 20px; height: 20px; color: var(--pp-accent); }

.pp-pay { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--pp-muted); }
.pp-pay-chip { display: inline-flex; padding: 5px 9px; border: 1px solid var(--pp-line); border-radius: 8px; background: #fff; }
.pp-pay-chip img { height: 14px; width: auto; }

/* ---------- Seções escuras ---------- */
.pp-dark {
  background: var(--pp-dark);
  color: #fff;
  margin-top: 36px;
  padding: 40px 24px;
  text-align: center;
}
.pp-dark .pp-sub { color: var(--cor-sobre-escuro-2); }
.pp-stats .pp-h2 { font-size: 26px; }
.pp-stats-list { display: grid; gap: 22px; margin-top: 28px; }
.pp-stat strong { display: block; font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--pp-gold); font-variant-numeric: tabular-nums; }
.pp-stat span { display: block; margin-top: 6px; font-size: 14px; color: var(--cor-sobre-escuro-2); }

.pp-video-frame {
  margin: 22px auto 0;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.pp-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-video-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--cor-sobre-escuro-2); }
.pp-video-hint .pp-ico { width: 12px; height: 12px; color: var(--pp-gold); }

/* Imagem de seção (infográfico, medidas) */
.pp-sec-img { margin: 0 0 12px; overflow: hidden; }
.pp-sec-img img { display: block; width: 100%; height: auto; }

/* ---------- Benefícios ---------- */
.pp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-benefit {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  padding: 14px 13px 15px;
  box-shadow: var(--pp-shadow);
}
.pp-benefit-ico {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.pp-benefit-ico .pp-ico { width: 18px; height: 18px; }
.pp-benefit strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.pp-benefit p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pp-muted); }
/* Texto de abertura e fotos inteiras, uma abaixo da outra */
.pp-ben-intro { margin: -4px 0 16px; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--pp-ink-2); text-wrap: pretty; }
.pp-ben-fotos { display: grid; gap: 12px; margin-bottom: 12px; }
.pp-ben-fotos figure { margin: 0; overflow: hidden; }
.pp-ben-fotos img { width: 100%; height: auto; }

/* ---------- Na prática ---------- */
.pp-story { padding: 14px 14px 18px; }
.pp-story-img { position: relative; margin: 0 0 18px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.pp-story-img img { width: 100%; height: 100%; object-fit: cover; }
.pp-story-img figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 99px;
}
.pp-story .pp-eyebrow,
.pp-story .pp-h2,
.pp-story .pp-text { padding: 0 4px; }
.pp-mini-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 16px; }
.pp-mini-trust span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--pp-ink-2); background: var(--cor-fundo); border-radius: 12px; padding: 10px; }
.pp-mini-trust .pp-ico { width: 18px; height: 18px; color: var(--pp-accent); }

/* ---------- Peças ---------- */
.pp-pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pp-piece { margin: 0; background: #fff; border: 1px solid var(--pp-line); border-radius: 14px; overflow: hidden; }
.pp-piece img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pp-piece .pp-piece-ico {
  display: flex;
  margin: 0;
  font-size: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 16 / 10;
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
}
.pp-piece-ico .pp-ico { width: 30px; height: 30px; stroke-width: 1.75; }
.pp-piece-ico b { font-size: 13px; font-weight: 800; color: var(--pp-ink); letter-spacing: -.01em; }
.pp-piece figcaption { padding: 7px 8px 9px; line-height: 1.2; }
.pp-piece strong { display: block; font-size: 12px; font-weight: 800; }
.pp-piece span { display: block; font-size: 10.5px; color: var(--pp-muted); margin-top: 2px; }

/* ---------- Comparação ---------- */
.pp-compare { overflow: hidden; }
.pp-compare table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-compare th {
  padding: 13px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-muted);
  border-bottom: 1px solid var(--pp-line);
}
.pp-compare th.is-us { color: var(--pp-accent); }
.pp-compare th:not(:first-child),
.pp-compare td:not(:first-child) { text-align: center; width: 76px; }
.pp-compare td { padding: 12px; border-bottom: 1px solid var(--pp-line-2); color: var(--pp-ink-2); line-height: 1.35; }
.pp-compare tr:last-child td { border-bottom: 0; }
.pp-compare td.is-us { background: var(--cor-principal-clara); }
.pp-yes,
.pp-no { display: inline-flex; width: 22px; height: 22px; border-radius: 99px; align-items: center; justify-content: center; }
.pp-yes { background: var(--pp-green-soft); color: var(--pp-green); }
.pp-no { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.pp-yes .pp-ico,
.pp-no .pp-ico { width: 13px; height: 13px; stroke-width: 3; }

/* ---------- Oferta ---------- */
.pp-offer { padding: 22px 18px 18px; text-align: center; }
.pp-offer-old { margin: 0; font-size: 14px; color: var(--pp-muted); }
.pp-offer-price { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 0; font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-offer-sub { margin: 6px 0 16px; font-size: 13px; color: var(--pp-green); font-weight: 700; }

/* ---------- Cuidados ---------- */
.pp-care { padding: 22px 18px; }
.pp-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.pp-steps li { display: flex; gap: 14px; align-items: flex-start; }
.pp-steps-n {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 99px;
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-steps strong { display: block; font-size: 14.5px; font-weight: 800; }
.pp-steps p { margin: 2px 0 0; font-size: 13.5px; color: var(--pp-muted); line-height: 1.5; }

/* ---------- Avaliações ---------- */
.pp-score { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px; }
.pp-score-big { text-align: center; padding-right: 18px; border-right: 1px solid var(--pp-line-2); }
.pp-score-big strong { display: block; font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pp-score-big .pp-stars { display: inline-flex; margin-top: 6px; }
/* Sem as barras por estrela: só a nota, centralizada */
.pp-score-big:only-child { grid-column: 1 / -1; padding-right: 0; border-right: 0; }
.pp-score-big > span:last-child { display: block; margin-top: 6px; font-size: 11.5px; color: var(--pp-muted); }
.pp-bars { display: grid; gap: 6px; }
.pp-bar { display: grid; grid-template-columns: 22px 1fr 32px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--pp-muted); }
.pp-bar span:last-child { text-align: right; }
.pp-bar-track { height: 7px; border-radius: 99px; background: var(--pp-line-2); overflow: hidden; }
.pp-bar-fill { height: 100%; border-radius: 99px; background: var(--pp-accent); }

.pp-review-media { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; }
.pp-review-media::-webkit-scrollbar { display: none; }
.pp-review-thumb { position: relative; flex: 0 0 112px; height: 112px; border-radius: 14px; overflow: hidden; background: var(--cor-linha) !important; }
.pp-review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-review-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .28);
}
.pp-review-play .pp-ico { width: 34px; height: 34px; padding: 9px; box-sizing: border-box; border-radius: 99px; background: var(--pp-accent); color: #fff; }

.pp-review-list { display: grid; gap: 10px; margin: 14px 0 16px; }
.pp-review { padding: 16px; }
.pp-review header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pp-review header > div { flex: 1; min-width: 0; }
.pp-review header strong { display: block; font-size: 14px; font-weight: 800; }
.pp-review time { font-size: 11.5px; color: var(--pp-muted); align-self: flex-start; }
.pp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--pp-green); }
.pp-verified .pp-ico { width: 13px; height: 13px; }
.pp-review p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--pp-ink-2); }
.pp-review-photos { display: flex; gap: 8px; margin-top: 10px; }
.pp-review-empty { padding: 20px 18px; text-align: center; }
.pp-review-empty p { margin: 8px 0 0; font-size: 14px; color: var(--pp-muted); }
.pp-review-photos { flex-wrap: wrap; }
.pp-review-photos img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.pp-review-photo { display: block; border-radius: 10px; overflow: hidden; }

.pp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pp-lightbox img,
.pp-lightbox video { max-width: 100%; max-height: 86vh; border-radius: 16px; }
.pp-lightbox-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .15) !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Sanfonas (dúvidas frequentes) ---------- */


/* "Ficou com alguma dúvida?" — fecha a seção de perguntas */
.pp-pre { white-space: pre-line; }
.pp-box-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-box-list li { display: flex; align-items: center; gap: 10px; }
.pp-box-list .pp-ico { width: 16px; height: 16px; color: var(--pp-accent); }

/* ---------- Rodapé ---------- */

/* Janela das páginas institucionais */
.pp-info-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(22, 22, 22, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: pp-fade .2s ease;
}
.pp-info {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  color: var(--pp-ink);
  border-radius: 20px 20px 0 0;
  padding: 6px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
@media (min-width: 560px) {
  .pp-info-wrap { align-items: center; padding: 16px; }
  .pp-info { border-radius: 20px; }
}
.pp-info-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 6px; border-bottom: 1px solid var(--pp-line-2); }
.pp-info-head strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pp-loja-foto { margin: 0; }
.pp-loja-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; border-radius: 18px; background: var(--pp-line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.pp-loja-foto figcaption { margin-top: 8px; font-size: 11.5px; color: var(--pp-muted); text-align: center; }
.pp-info-foto { margin: 14px 0 0; }
.pp-info-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; border-radius: 14px; background: var(--pp-line-2); }
.pp-info-foto figcaption { margin-top: 6px; font-size: 11.5px; color: var(--pp-muted); text-align: center; }
.pp-info-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.pp-info-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--pp-ink-2); }
.pp-info-list .pp-ico { width: 16px; height: 16px; margin-top: 3px; color: var(--pp-accent); }
.pp-info-contato { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--pp-line-2); font-size: 12.5px; line-height: 1.6; color: var(--pp-muted); }
.pp-info-contato a { color: var(--pp-ink); font-weight: 700; }

/* Código do pedido (CDG-...) na tela de compra concluída */
.pp-codigo { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--pp-line); text-align: left; }
.pp-codigo-label { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); }
.pp-codigo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.pp-codigo-linha strong { font-size: 19px; font-weight: 800; letter-spacing: .01em; color: var(--pp-ink); }
.pp-codigo-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--pp-line); background: var(--pp-bg); font-size: 12.5px; font-weight: 700; color: var(--pp-ink); cursor: pointer; }
.pp-codigo-btn:hover { background: var(--pp-line-2); }
.pp-codigo-ajuda { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--pp-muted); }
.pp-codigo-ajuda a { color: var(--pp-accent); font-weight: 700; }

/* Janela de erro no cartão/boleto */
.pp-erro-pag .pp-cta { margin-top: 16px; }
.pp-erro-txt { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--pp-ink-2); }
.pp-erro-motivo { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--cor-erro-fundo); border: 1px solid var(--cor-erro-linha); font-size: 12.5px; line-height: 1.5; color: var(--cor-erro); }

/* ---------- Barra fixa ---------- */
.pp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background: #fff;
  border-top: 1px solid var(--pp-line);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .18);
  transform: translateY(110%);
  transition: transform .16s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
.pp-sticky.is-on { transform: translateY(0); }
.pp-sticky-in { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
/* Preço e, com mais de um jogo, a quantidade embaixo. "min-width: 0" continua
   aqui para o botão nunca ser empurrado para fora da tela. */
.pp-sticky-price { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.pp-sticky-price strong { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.pp-sticky-price span { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--pp-muted); }
.pp-sticky .pp-cta { flex: 0 0 auto; width: 46%; min-width: 132px; max-width: 230px; margin-left: auto; min-height: 50px; font-size: 15px; padding: 0 12px; }

/* ---------- Gavetas (carrinho / menu) ---------- */

/* Header da loja: menu | logo centralizada | carrinho */
.pp-head-grid { flex: 1 1 auto; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; }
.pp-header-in .pp-head-grid .pp-logo { margin: 0 auto; }
.pp-menu-btn .pp-ico { width: 24px; height: 24px; }

/* Botão do carrinho no canto direito do header, com a quantidade */
.pp-cart-btn { flex: 0 0 auto; }
.pp-cart-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  border: 2px solid #fff;
  background: var(--pp-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  animation: pp-pulo .35s var(--pp-ease);
}
@keyframes pp-pulo { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Gaveta do carrinho: entra pela direita, com o fundo escurecendo junto */
.pp-gaveta-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-gaveta);
  background: rgba(22, 22, 22, 0);
  visibility: hidden;
  transition: background-color var(--pp-dur) var(--pp-ease), visibility 0s linear var(--pp-dur);
}
.pp-gaveta-wrap.is-on {
  background: rgba(22, 22, 22, .55);
  visibility: visible;
  transition: background-color var(--pp-dur) var(--pp-ease), visibility 0s;
}
.pp-gaveta {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--pp-ink);
  box-shadow: -12px 0 40px rgba(0, 0, 0, .22);
  transform: translateX(100%);
  transition: transform var(--pp-dur) var(--pp-ease);
}
.pp-gaveta-wrap.is-on .pp-gaveta { transform: none; }
/* Menu: a mesma gaveta, entrando pela esquerda */
.pp-gaveta.is-esq { right: auto; left: 0; width: min(340px, 86vw); transform: translateX(-100%); box-shadow: 12px 0 40px rgba(0, 0, 0, .22); }

/* ---------- Menu ---------- */
.pp-menu-logo { display: block; height: 30px; width: auto; }
.pp-menu-corpo { flex: 1 1 auto; overflow-y: auto; padding: 14px 10px 18px; }
.pp-menu-oficial { margin: 0 8px 10px; }
.pp-menu-titulo { margin: 18px 8px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); }
.pp-menu-nav { display: grid; }
.pp-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pp-ink);
  text-align: left;
  text-decoration: none;
}
.pp-menu-item:hover { background: var(--pp-bg); }
.pp-menu-item > .pp-ico:first-child { width: 19px; height: 19px; color: var(--pp-accent); }
.pp-menu-item > span { flex: 1 1 auto; }
.pp-menu-item .pp-menu-seta { width: 16px; height: 16px; color: var(--cor-linha-forte); }
.pp-menu-garantias { list-style: none; display: grid; gap: 10px; margin: 18px 8px 0; padding: 14px; border-radius: 14px; background: var(--pp-bg); }
.pp-menu-garantias li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--pp-ink-2); }
.pp-menu-garantias .pp-ico { width: 17px; height: 17px; color: var(--pp-green); }
.pp-menu-atendimento {
  flex: 0 0 auto;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 4px 18px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pp-line-2);
}
.pp-menu-atendimento .pp-menu-titulo { margin: 12px 0 2px; }
.pp-menu-atendimento a,
.pp-menu-atendimento span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pp-ink-2); text-decoration: none; }
.pp-menu-atendimento .pp-ico { width: 16px; height: 16px; color: var(--pp-muted); }
.pp-menu-atendimento .pp-ico-whats { color: currentColor; }

/* ---------- Sanfona (detalhes e dúvidas frequentes) ---------- */
.pp-acc { overflow: hidden; }
.pp-acc-item + .pp-acc-item { border-top: 1px solid var(--pp-line-2); }
.pp-acc-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.35;
  text-align: left;
  color: var(--pp-ink);
}
.pp-acc-btn > span { flex: 1 1 auto; }
.pp-acc-ico { width: 19px; height: 19px; color: var(--pp-accent); }
.pp-acc-seta { width: 18px; height: 18px; color: var(--pp-muted); transition: transform var(--pp-dur) var(--pp-ease); }
.pp-acc-item.is-on .pp-acc-seta { transform: rotate(180deg); }
.pp-acc-painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--pp-dur) var(--pp-ease); }
.pp-acc-item.is-on .pp-acc-painel { grid-template-rows: 1fr; }
.pp-acc-in { min-height: 0; overflow: hidden; padding: 0 18px; font-size: 14px; line-height: 1.6; color: var(--pp-ink-2); }
.pp-acc-item.is-on .pp-acc-in { padding-bottom: 18px; }
.pp-acc-txt { margin: 0; }
.pp-acc-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--pp-muted); }
.pp-acc.is-faq .pp-acc-btn { font-size: 14px !important; font-weight: 700 !important; }

/* Oferta no meio da página */
.pp-offer .pp-offer-old { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Mesmas cores do bloco de compra do topo: "no Pix" verde, parcelamento em cinza */
.pp-offer-price small { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--pp-green); }
.pp-offer .pp-offer-sub { color: var(--pp-ink-2); font-weight: 600; }
/* Brinde e contador: mesmo alinhamento do bloco de compra (texto à esquerda) */
.pp-offer .pp-brinde { margin-top: 0; text-align: left; }
.pp-offer .pp-brinde + .pp-cta { margin-top: 12px; }
.pp-offer .pp-mini-trust { margin-bottom: 0; text-align: left; }

/* "Ainda ficou com dúvida?" no fim das perguntas */
.pp-duvida { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 16px 18px; }
.pp-duvida > div { flex: 1 1 auto; min-width: 0; }
.pp-duvida strong { display: block; font-size: 14.5px; font-weight: 800; }
.pp-duvida p { margin: 2px 0 0; font-size: 12.5px; color: var(--pp-muted); }
.pp-duvida-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 12px;
  background: currentColor;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
}
.pp-duvida-btn .pp-ico { width: 17px; height: 17px; }
.pp-gaveta-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--pp-header-h);
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--pp-line-2);
}
.pp-gaveta-head strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pp-gaveta-head strong span { color: var(--pp-muted); font-weight: 700; }

.pp-cart-lista { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: 6px 18px; }
.pp-cart-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pp-line-2); }
.pp-cart-item:last-child { border-bottom: 0; }
.pp-cart-foto { width: 72px; height: 72px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; }
.pp-cart-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-cart-nome { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--pp-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-cart-cor { font-size: 12px; color: var(--pp-muted); }
.pp-cart-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pp-qty-sm button { width: 34px; height: 32px; }
.pp-qty-sm span { min-width: 22px; font-size: 14px; }
.pp-cart-preco { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.pp-cart-preco s { font-size: 11.5px; color: var(--pp-muted); }
.pp-cart-preco strong { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.pp-cart-remover { width: 34px; height: 34px; margin: -4px -8px 0 0; color: var(--pp-muted); }
.pp-cart-remover .pp-ico { width: 18px; height: 18px; }
.pp-cart-remover:hover { color: var(--pp-accent-600); }

.pp-cart-rodape {
  flex: 0 0 auto;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pp-line);
  background: #fff;
  box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .25);
}
.pp-cart-aviso { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--pp-accent-soft); font-size: 12px; font-weight: 600; color: var(--pp-accent-600); }
.pp-cart-soma { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; color: var(--pp-ink-2); }
.pp-cart-soma + .pp-cart-soma { margin-top: 6px; }
.pp-cart-soma.is-total { margin-bottom: 14px; padding-top: 8px; border-top: 1px dashed var(--pp-line); font-size: 15px; font-weight: 700; color: var(--pp-ink); }
.pp-cart-soma.is-total strong { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.pp-cart-soma.is-total small { font-size: 12px; font-weight: 600; color: var(--pp-muted); }
.pp-cart-gratis { font-weight: 800; color: var(--pp-green); }
.pp-cart-continuar {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pp-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-cart-vazio { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--pp-muted); }
.pp-cart-vazio > .pp-ico { width: 44px; height: 44px; color: var(--pp-line); stroke-width: 1.6; }
.pp-cart-vazio p { margin: 0; font-size: 15px; font-weight: 700; color: var(--pp-ink-2); }
.pp-cart-vazio .pp-cart-continuar { width: auto; }

/* Resumo do pedido no checkout: cabeçalho com o total e uma linha por jogo */
.pp-resumo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pp-line-2);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--pp-ink-2);
}
.pp-resumo-topo strong { font-size: 13.5px; font-weight: 800; color: var(--pp-ink); }
.pp-resumo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-resumo-lista li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-resumo-foto {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: 9px;
}
.pp-resumo-txt { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
/* Seletor de quantidade no "Seu pedido" do checkout */
.pp-resumo-lista li > .pp-qty { flex: 0 0 auto; margin-left: auto; background: #fff; }
.pp-resumo-qtd { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--pp-ink-2); }
.pp-resumo-txt strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-resumo-txt span { font-size: 12px; color: var(--pp-muted); }
/* Brinde no resumo do checkout */
.pp-resumo-brinde .pp-resumo-foto { display: inline-flex; align-items: center; justify-content: center; background: var(--pp-accent-soft); border-color: var(--pp-accent-line); color: var(--pp-accent); }
.pp-resumo-brinde .pp-resumo-foto .pp-ico { width: 20px; height: 20px; }
.pp-resumo-brinde .pp-resumo-txt span { color: var(--pp-green); font-weight: 700; }

/* Brinde acima do botão de compra */
.pp-brinde {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 11px 12px;
  border: 1px solid var(--pp-accent-line);
  border-radius: 14px;
  background: var(--pp-accent-soft);
}
.pp-brinde-foto {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-accent);
}
.pp-brinde-foto img { width: 100%; height: 100%; object-fit: cover; }
.pp-brinde-foto .pp-ico { width: 24px; height: 24px; }
.pp-brinde-txt { min-width: 0; }
.pp-brinde-txt p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--pp-ink); }
.pp-brinde-txt strong { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--pp-accent); }
.pp-brinde-txt strong .pp-ico { width: 15px; height: 15px; }
.pp-brinde-txt small { display: block; margin-top: 3px; font-size: 12px; color: var(--pp-muted); }
.pp-buy .pp-brinde + .pp-cta { margin-top: 12px; }

/* Contador da oferta abaixo do botão */



/* ---------- Checkout / PIX (telas antigas) ---------- */
.pp-safe-chip { margin-left: auto; }
/* Header do checkout: seta | logo centralizada | cadeado */
.pp-ck-head { flex: 1 1 auto; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; }
.pp-header-in .pp-ck-head .pp-logo { margin: 0 auto; }
.pp-ck-voltar .pp-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.pp-ck-cadeado { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--pp-green); }
.pp-ck-cadeado .pp-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.pp-accent-text { color: var(--pp-accent) !important; }
.pp-field:focus { border-color: var(--pp-accent) !important; box-shadow: 0 0 0 3px rgba(14, 143, 134, .15); outline: none; }
.pp-btn-accent { background: var(--pp-accent) !important; color: #fff !important; }
.pp-btn-accent:hover { background: var(--pp-accent-600) !important; }
.pp-btn-dark { background: var(--pp-ink) !important; color: #fff !important; }
.pp-btn-dark:hover { background: #000 !important; }
.pp-pill-accent { background: var(--pp-accent-soft); color: var(--pp-accent-600); border: 1px solid var(--pp-accent-line); }
.pp-dot-accent { background: var(--pp-accent); }
.pp-soft { background: var(--cor-fundo); border: 1px solid var(--pp-line); color: var(--pp-ink-2); }

.cdg-header {
  background: rgba(255, 255, 255, .96);
  color: var(--pp-ink);
  border-bottom: 1px solid var(--pp-line);
}
.cdg-logo { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--pp-ink); }
.cdg-pill { background: var(--pp-green-soft); color: var(--pp-green); border: 0; }

/* ---------- Formas de pagamento (tema/pagamento.js) ---------- */
.pp-pay-box { background: #fff; border: 1px solid var(--cor-linha); border-radius: 12px; padding: 16px; color: var(--pp-ink); }
.pp-pay-titulo { font-size: 15px; font-weight: 800; margin: 0 0 12px; }
.pp-pay-opcoes { display: grid; gap: 8px; }
.pp-pay-box button.pp-pay-opcao { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border: 1.5px solid var(--pp-line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, background .15s; }
.pp-pay-opcao.is-on { border-color: var(--pp-accent); background: var(--pp-accent-soft); }
.pp-pay-opcao .pp-radio { position: static; margin: 0; flex-shrink: 0; }
.pp-pay-opcao.is-on .pp-radio { border: 5px solid var(--pp-accent); }
.pp-pay-opcao-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-pay-opcao-txt strong { font-size: 14px; font-weight: 700; }
.pp-pay-opcao-txt small { font-size: 12px; color: var(--pp-muted); }
.pp-pay-selo { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pp-green); background: var(--pp-green-soft); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.pp-pay-nota { font-size: 12px; color: var(--pp-muted); margin: 10px 2px 0; }
/* Dentro da lista de opções (abaixo do card do PIX): encosta no card e some a margem dupla */
.pp-pay-nota.is-pix { margin: -2px 2px 2px; line-height: 1.45; }
.pp-card-form { display: grid; gap: 10px; margin-top: 14px; }
.pp-pay-campo { display: grid; gap: 4px; min-width: 0; }
.pp-pay-campo > span { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--pp-ink-2); }
.pp-bandeira { font-size: 11px; color: var(--pp-accent-600); }
.pp-pay-input { width: 100%; min-width: 0; border: 1px solid var(--cor-linha-forte); border-radius: 8px; padding: 10px 12px; font-size: 16px; background: #fff; color: var(--pp-ink); font-family: inherit; }
.pp-pay-input:focus { outline: none; border-color: var(--pp-accent); box-shadow: 0 0 0 1px var(--pp-accent); }
.pp-pay-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-pay-seguro { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: var(--pp-muted); margin: 2px 0 0; }
.pp-pay-seguro .pp-ico { width: 14px; height: 14px; color: var(--pp-green); margin-top: 1px; }

.pp-bandeiras { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 14px; }
.pp-band { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 26px; padding: 0 5px; border: 1px solid var(--pp-line); border-radius: 6px; background: #fff; }
.pp-bandeiras .pp-band img { display: block; max-width: 100%; max-height: 13px; width: auto; height: auto; opacity: 1; }
/* O Pix é o símbolo quadrado: um pouco menor que as bandeiras largas, senão pesa demais */
.pp-bandeiras .pp-band.is-pix img { max-height: 15px; }
/* Checkout: linha única de segurança embaixo do botão de pagar */
/* 09/10/2026: uma linha só, centralizada, cadeado alinhado ao meio do texto, maior e mais escura. */
.pp-checkout-seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 4px 0;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--cor-texto-2);
  text-align: center;
  white-space: nowrap;
}
.pp-checkout-seguro .pp-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--pp-green); stroke-width: 2.2; }
/* 21/10/2026 (modelo do Luan): selo "SSL Seguro" embaixo do botão de pagar, no lugar da frase */
/* 21/10/2026: ordem Site Blindado, SSL, Google (o Google entra pelo script do index.html);
   menores e mais afastados do botão. */
.pp-selos-ck { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 26px; }
.pp-selo-blindado { width: 98px; height: auto; }
.pp-selo-google { width: 140px; height: auto; } /* 21/10/2026: de 92 para 140px, para ler o "Site Seguro" (pedido do Luan; 160 ficou grande) */
/* Os mesmos selos acima do rodapé da loja (loja-vitrine.js). */
.pp-lv-selos { padding: 22px 16px 26px; }
.pp-lv-selos .pp-selos-ck { margin-top: 0; }
.pp-selo-ssl { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 0; padding: 5px 10px 5px 9px; border: 1.5px solid #12473b; border-radius: 9px; background: #fff; }
.pp-selo-ssl-cadeado { flex: 0 0 auto; width: 17px; height: 21px; color: #12473b; }
.pp-selo-ssl-txt { display: grid; line-height: 1.1; text-align: left; }
.pp-selo-ssl-txt strong { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #12473b; }
.pp-selo-ssl-txt b { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #16a34a; }
.pp-selo-ssl-txt small { margin-top: 2px; font-size: 7.5px; color: #4b5563; }
/* Resumo de valores: "Desconto no Pix" em verde, entre o Subtotal e o Frete. */
.pp-linha-desconto { color: var(--pp-green); font-weight: 700; }

.pp-status-main { max-width: 480px; width: 100%; margin: 0 auto; padding: 20px 16px; }
.pp-status { padding: 22px 18px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.pp-status-pill { display: inline-block; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.pp-status-pill.is-erro { background: var(--cor-erro-fundo); color: var(--cor-erro); border: 1px solid var(--cor-erro-linha); }
.pp-status-valor { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.pp-status-sub { font-size: 13px; color: var(--pp-ink-2); margin: 0; }
.pp-status-codigo { width: 100%; display: grid; gap: 8px; text-align: left; }
.pp-status-codigo > span { font-size: 12px; font-weight: 600; color: var(--pp-ink-2); }
.pp-status-codigo code { display: block; word-break: break-all; font-size: 13px; background: var(--pp-bg); border: 1px dashed var(--pp-line); border-radius: 8px; padding: 10px; }
.pp-status-link { font-size: 14px; font-weight: 700; color: var(--pp-accent-600); text-decoration: underline; text-underline-offset: 3px; }
.pp-status-passos { text-align: left; font-size: 13px; color: var(--pp-ink-2); padding-left: 20px; margin: 4px 0 0; display: grid; gap: 4px; list-style: decimal; }


.pp-info-wrap { font-size: 15px; line-height: 1.5; text-align: left; color: var(--pp-ink); }
/* Fotos de clientes (avaliações só com fotos) */
.pp-client-photos { display: grid; gap: 10px; margin-top: 14px; }
.pp-client-photos-title { font-size: 15px; font-weight: 800; margin: 0; }
.pp-client-label { display: block; font-size: 12px; font-weight: 700; color: var(--pp-muted); }
.pp-client-card .pp-review-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-client-card .pp-review-photo { aspect-ratio: 1; width: 100%; }
.pp-client-card .pp-review-photos img { width: 100%; height: 100%; }
/* Avaliação: estrelas ao lado do nome e fotos maiores */
.pp-review-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pp-review header .pp-review-name strong { display: inline; }
.pp-review-name .pp-stars .pp-ico { width: 14px; height: 14px; }
.pp-review-meta { color: var(--pp-muted); font-weight: 600; }
.pp-review .pp-review-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-review .pp-review-photo { aspect-ratio: 1; width: 100%; }
.pp-review .pp-review-photos img { width: 100%; height: 100%; }
/* Forma de pagamento indisponível no momento */
.pp-pay-box button.pp-pay-opcao.is-off { opacity: .6; border-style: dashed; cursor: not-allowed; }
.pp-pay-opcao.is-off .pp-radio { border-color: var(--cor-linha-forte); background: var(--cor-fundo); }
.pp-pay-selo.is-off { color: var(--cor-cinza); background: var(--cor-fundo); }
.pp-pay-aviso { margin: 10px 2px 0; padding: 10px 12px; border-radius: 10px; background: var(--cor-principal-clara); border: 1px solid var(--cor-principal-linha); font-size: 12.5px; line-height: 1.5; color: var(--cor-principal-escura); }
/* "Outras formas de pagamento" (cartão e boleto ficam recolhidos) */
.pp-pay-box button.pp-pay-outras { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 2px; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--pp-muted); cursor: pointer; }
.pp-pay-outras:hover { color: var(--pp-ink); }
.pp-pay-outras .pp-ico { width: 16px; height: 16px; transition: transform .15s; }
.pp-pay-outras.is-open .pp-ico { transform: rotate(180deg); }
.pp-pay-opcoes .pp-pay-opcao + .pp-pay-outras { border-top: 1px solid var(--pp-line-2); margin-top: 2px; }
/* ---------- Prazo de entrega por CEP (tema/prazo-entrega.js) ---------- */
/* Frete + prazo logo abaixo do botão de compra (página do produto) */
.pp-prazo-linha { margin: 16px 0 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--pp-muted); }
/* Segunda linha, logo abaixo do prazo: mesmo texto, com o ícone da caixa */
.pp-prazo-linha.is-rastreio { margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.pp-prazo-linha.is-rastreio .pp-ico { width: 14px; height: 14px; }
/* Sem a linha de total, o botão precisa do respiro que ela dava. */
.pp-buy .pp-cta { margin-top: 20px; }

.pp-prazo-checkout { display: flex; align-items: center; gap: 9px; margin: 10px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--pp-accent-soft); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--pp-ink-2); }
.pp-prazo-checkout .pp-ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--pp-accent-600); }
.pp-prazo-checkout strong { font-weight: 700; color: var(--pp-accent-600); }
.pp-prazo-checkout.is-calculando { color: var(--pp-muted); }
/* 17/10/2026: rodinha girando enquanto "calcula" e o prazo entra suave quando fica pronto */
.pp-prazo-spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 2.5px solid var(--pp-accent-line, rgba(0, 0, 0, .12)); border-top-color: var(--pp-accent-600); border-radius: 50%; animation: pp-prazo-gira .8s linear infinite; }
@keyframes pp-prazo-gira { to { transform: rotate(360deg); } }
.pp-prazo-checkout.is-pronto { animation: pp-prazo-entra .3s ease both; }
@keyframes pp-prazo-entra { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-prazo-spinner { animation-duration: 2s; } .pp-prazo-checkout.is-pronto { animation: none; } }
.pp-prazo-gira { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px; border: 2px solid var(--pp-accent-line); border-top-color: var(--pp-accent-600); border-radius: 50%; animation: pp-prazo-gira .7s linear infinite; }
@keyframes pp-prazo-gira { to { transform: rotate(360deg); } }


/* ---------- Rodapé (branco, compacto) ---------- */
.pp-footer { margin-top: 32px; background: #fff; border-top: 1px solid var(--pp-line); color: var(--pp-ink); }
/* O espaço de baixo deixa o fim do rodapé visível acima da barra fixa de compra. */
.pp-footer-in { max-width: 480px; margin: 0 auto; padding: 22px 20px calc(92px + env(safe-area-inset-bottom)); }

/* Tudo centralizado: logo, ajuda, linhas de links, pagamento e dados da empresa */
.pp-footer-in.is-center { text-align: center; }
.pp-footer-logo { display: block; height: 30px; width: auto; margin: 0 auto; }

/* Precisa de ajuda? (WhatsApp + horário) */
.pp-footer-ajuda { display: grid; justify-items: center; gap: 4px; margin-top: 18px; }
.pp-footer-ajuda-tit { margin: 0 0 2px; font-size: 14px; font-weight: 800; color: var(--pp-ink); }
.pp-footer-ajuda a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pp-ink-2); text-decoration: none; }
.pp-footer-ajuda a:hover { color: var(--pp-accent); }
.pp-footer-ajuda span { font-size: 12px; color: var(--pp-muted); }
.pp-footer-ajuda .pp-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.pp-footer-ajuda .pp-ico-whats { color: currentColor; }

/* Linhas de links separados por "·" */
.pp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin-top: 12px; }
.pp-footer-ajuda + .pp-footer-links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pp-line); }
.pp-footer-links + .pp-footer-links { margin-top: 6px; }
.pp-footer-links a,
.pp-footer-links button { padding: 0; background: none; border: 0; color: var(--pp-ink-2); font: inherit; font-size: 12.5px; line-height: 1.35; text-decoration: none; cursor: pointer; }
.pp-footer-links > * + *::before { content: "·"; margin: 0 8px; color: var(--pp-muted); }
.pp-footer-links a:hover,
.pp-footer-links button:hover { color: var(--pp-accent); }

/* Formas de pagamento + site seguro, na mesma linha (quebra se não couber) */
.pp-footer-pag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pp-line); }
.pp-footer-pag .pp-bandeiras { justify-content: center; margin-top: 0; }
.pp-footer-pag .pp-band { background: #fff; border: 1px solid var(--pp-line); }
.pp-footer-ssl { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 11.5px; color: var(--pp-muted); }
.pp-footer-ssl .pp-ico { width: 13px; height: 13px; flex: 0 0 auto; color: var(--pp-green); }

.pp-footer-legal { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--pp-line); font-size: 11px; line-height: 1.5; color: var(--pp-muted); }
.pp-footer-legal p { margin: 0; }
.pp-footer-legal p + p { margin-top: 3px; }
/* ---------- Rodapé do checkout (branco, enxuto) ---------- */
.cdg-footer { margin-top: 32px; background: #fff; border-top: 1px solid var(--pp-line); color: var(--pp-ink-2); }
.cdg-footer-in { max-width: 560px; margin: 0 auto; padding: 16px 20px 24px; text-align: center; }
/* Mesmo estilo do fim do rodapé da loja (.pp-footer-legal) */
.cdg-footer-empresa { margin: 0; font-size: 11px; line-height: 1.5; color: var(--pp-muted); }
.cdg-footer-empresa + .cdg-footer-empresa { margin-top: 3px; }
html { scrollbar-gutter: stable; }               /* evita o "pulo" ao travar a rolagem */
.pp-icon-btn, .pp-cta, .pp-link, .pp-footer-links a, .pp-footer-links button,
.pp-pay-opcao {
  transition: background-color var(--pp-dur-rapida) var(--pp-ease),
              color var(--pp-dur-rapida) var(--pp-ease),
              border-color var(--pp-dur-rapida) var(--pp-ease),
              opacity var(--pp-dur-rapida) var(--pp-ease),
              transform var(--pp-dur-rapida) var(--pp-ease);
}

/* Gavetas: deslizam e o fundo escurece junto, na abertura e no fechamento */

/* O menu começa abaixo do header (o JS ajusta o "top" pela altura real dele).
   Por isso a altura não pode ser 100dvh: iria além da tela e cortaria o
   bloco "Atendimento" lá embaixo. Com height:auto, o bottom:0 manda. */

/* Entrada da loja: ao abrir o site (ou ao voltar de uma política) a tela
   aparece com um leve fade, em vez de "piscar" pronta de uma vez. */
#root { animation: pp-fade var(--pp-dur-rapida) var(--pp-ease) both; }

/* Janelas (modais) e conteúdo que entra na tela */
.pp-info-wrap { animation: pp-fade var(--pp-dur) var(--pp-ease); }
.pp-info { animation: pp-sobe var(--pp-dur) var(--pp-ease); }
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

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

/* ---------- Avaliações (PpAvaliacoes / PpAvLightbox) ---------- */
/* Cabeçalho: selo, título e "★★★★★ 4,9 de 5 em N avaliações" */
.pp-av-linha { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; font-size: 13.5px; color: var(--pp-muted); }
.pp-av-linha strong { font-weight: 800; color: var(--pp-ink); }

/* Faixa de fotos em loop (a trilha tem as fotos duas vezes: anda metade e recomeça) */
.pp-av-faixa {
  margin: 4px -16px 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.pp-av-trilho { display: flex; gap: 8px; width: max-content; padding: 0 16px; animation: pp-av-loop var(--pp-av-dur, 32s) linear infinite; }
.pp-av-faixa:hover .pp-av-trilho,
.pp-av-faixa:active .pp-av-trilho { animation-play-state: paused; }
@keyframes pp-av-loop { from { transform: translateX(0); } to { transform: translateX(calc(-50% + 12px)); } } /* metade da trilha, descontando o padding (16px) e meio gap (4px) */
.pp-av-faixa-foto { flex: 0 0 auto; width: 136px; height: 136px; padding: 0; border-radius: 14px; overflow: hidden; background: var(--pp-line-2); cursor: zoom-in; }
.pp-av-faixa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .pp-av-faixa { overflow-x: auto; }
  .pp-av-trilho { animation: none; }
}

/* Card de texto: inicial, nome, "Verificado", cidade, estrelas e a opinião */
.pp-av-pessoa { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pp-av-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-accent-soft); color: var(--pp-accent); font-size: 15px; font-weight: 800; }
.pp-av-nome-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.pp-av-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; background: var(--pp-accent-soft); color: var(--pp-accent); font-size: 11px; font-weight: 700; }
.pp-av-chip::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--pp-gold); }
.pp-av-cidade { display: block; margin-top: 1px; font-size: 12px; color: var(--pp-muted); }
.pp-av-resumo { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 18px; }
.pp-av-nota { display: flex; flex-direction: column; align-items: center; text-align: center; padding-right: 18px; border-right: 1px solid var(--pp-line-2); }
.pp-av-resumo > .pp-av-nota:only-child { grid-column: 1 / -1; padding-right: 0; border-right: 0; }
.pp-av-nota strong { font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--pp-ink); }
.pp-av-nota .pp-stars { display: inline-flex; margin-top: 6px; }
.pp-av-nota > span:last-child { margin-top: 6px; font-size: 11.5px; color: var(--pp-muted); white-space: nowrap; }
/* Mosaico com as primeiras fotos de clientes (abre a galeria) */
.pp-av-mosaico { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
.pp-av-mosaico-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.pp-av-mosaico-foto { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--pp-line-2); }
.pp-av-mosaico-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-av-mais { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(22, 22, 22, .55); color: #fff; font-size: 14px; font-weight: 800; }
.pp-av-mosaico-txt { font-size: 12px; font-weight: 700; color: var(--pp-ink-2); text-align: center; text-decoration: underline; text-underline-offset: 3px; }

.pp-av-lista { display: grid; gap: 10px; margin-top: 12px; }
.pp-av-card { padding: 16px; }
.pp-av-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pp-av-nome { min-width: 0; font-size: 14px; font-weight: 800; color: var(--pp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-av-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-accent-soft); color: var(--pp-accent); font-size: 15px; font-weight: 800; }
.pp-av-avatar.is-anon { background: var(--pp-line-2); color: var(--pp-muted); }
.pp-av-avatar .pp-ico { width: 18px; height: 18px; }
.pp-av-quem { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-av-quem strong { font-size: 14px; font-weight: 800; color: var(--pp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-av-verificado { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--pp-green); }
.pp-av-verificado .pp-ico { width: 13px; height: 13px; }
.pp-av-data { flex: 0 0 auto; align-self: flex-start; font-size: 11.5px; color: var(--pp-muted); }
.pp-av-estrelas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11.5px; color: var(--pp-muted); }
.pp-av-estrelas .pp-ico { width: 14px; height: 14px; }
.pp-av-texto { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--pp-ink-2); }
/* Fotos do cliente: 3 por linha; com uma foto só, ela fica maior */
.pp-av-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.pp-av-fotos.is-uma { grid-template-columns: minmax(0, 190px); }
.pp-av-foto { display: block; padding: 0; border: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--pp-line-2); cursor: zoom-in; }
.pp-av-fotos.is-uma .pp-av-foto { aspect-ratio: 4 / 5; }
.pp-av-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pp-av-foto:hover img { transform: scale(1.05); }
.pp-av-vermais { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 13px 16px; border: 1px solid var(--pp-line); border-radius: 14px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--pp-ink); cursor: pointer; }
.pp-av-vermais:hover { background: var(--pp-line-2); }
.pp-av-vermais .pp-ico { width: 16px; height: 16px; transition: transform .2s ease; }
.pp-av-vermais.is-open .pp-ico { transform: rotate(180deg); }

/* Foto ampliada */
.pp-av-lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 68px 12px 56px; background: rgba(10, 10, 10, .92); touch-action: pan-y; }
.pp-av-lb img { max-width: 100%; max-height: 100%; border-radius: 14px; object-fit: contain; user-select: none; }
/* Fechar: botão claro e grande, fora da área da foto (respeita o notch do celular) */
.pp-av-lb-x { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; height: 40px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; background: #fff; color: var(--cor-escura); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.pp-av-lb-seta { position: absolute; z-index: 2; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .9); color: var(--cor-escura); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.pp-av-lb-seta.is-esq { left: 10px; }
.pp-av-lb-seta.is-dir { right: 10px; }
.pp-av-lb-seta.is-dir .pp-ico { transform: rotate(180deg); }
.pp-av-lb-x .pp-ico, .pp-av-lb-seta .pp-ico { width: 20px; height: 20px; }
.pp-av-lb-cont { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12.5px; font-weight: 700; }

/* ---------- Tela do Pix (PpTelaPix em tema/pagamento.js) ---------- */
.pp-pix { max-width: 480px; width: 100%; margin: 0 auto; padding: 14px 16px 8px; display: grid; gap: 12px; }
.pp-pix-card { padding: 18px 16px; text-align: center; }
.pp-pix-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 99px; background: var(--pp-accent-soft); color: var(--pp-accent); font-size: 12px; font-weight: 700; }
.pp-pix-pulso { width: 8px; height: 8px; border-radius: 99px; background: var(--pp-accent); animation: pp-pix-pulso 1.4s ease-in-out infinite; }
@keyframes pp-pix-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.pp-pix-pedido { margin: 10px 0 0; font-size: 13px; color: var(--pp-muted); }
.pp-pix-pedido strong { color: var(--pp-ink); font-weight: 800; letter-spacing: .01em; }
.pp-pix-logo { display: block; height: 22px; width: auto; margin: 12px auto 0; }
.pp-pix-valor { margin: 4px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--pp-ink); }
.pp-pix-expira { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; color: var(--cor-texto-2); }
.pp-pix-expira .pp-ico { width: 14px; height: 14px; }
.pp-pix-expira strong { font-variant-numeric: tabular-nums; }
.pp-pix-expira.is-fim { color: var(--cor-erro); }

/* Copia e Cola: ação principal */
.pp-pix-copia { margin-top: 16px; text-align: left; }
.pp-pix-rotulo { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--pp-ink); }
.pp-page .pp-pix-codigo {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px dashed var(--pp-accent-line);
  border-radius: 12px;
  background: var(--pp-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pp-ink-2);
  text-align: left;
  word-break: break-all;
  resize: none;
  overflow: hidden;
  outline: none;
  cursor: pointer;
}
.pp-pix-falhou { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--cor-principal-clara); border: 1px solid var(--cor-principal-linha); font-size: 13px; line-height: 1.45; color: var(--cor-principal-escura); }
.pp-pix-copiar { margin-top: 10px; }
.pp-pix-copiar.is-ok { background: linear-gradient(180deg, var(--cor-principal) 0%, var(--cor-principal) 100%); box-shadow: 0 14px 28px -12px rgba(14, 143, 134, .6); }
.pp-pix-ok { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pp-green-soft); border: 1px solid var(--cor-principal-linha); font-size: 13px; line-height: 1.45; color: var(--cor-principal-escura); }

/* 3 passos */
.pp-pix-passos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pp-pix-passos li { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.3; color: var(--pp-ink-2); }
.pp-pix-passos b { width: 22px; height: 22px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--pp-accent-soft); color: var(--pp-accent); font-size: 12px; }

/* QR Code menor */
.pp-pix-qr { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pp-line-2); text-align: left; }
.pp-pix-qr img,
.pp-pix-qr-vazio { flex: 0 0 auto; width: 108px; height: 108px; padding: 5px; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; object-fit: contain; }
.pp-pix-qr-vazio { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--pp-muted); text-align: center; }
.pp-pix-qr p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--pp-muted); }
.pp-pix-qr strong { display: block; color: var(--pp-ink); }

/* Já paguei + aviso de confirmação automática */
.pp-page .pp-pix-verificar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 12px; border: 1.5px solid var(--pp-line); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; color: var(--pp-ink); }
.pp-pix-verificar .pp-ico { width: 16px; height: 16px; }
.pp-pix-verificar .is-girando { animation: pp-girar 1s linear infinite; }
@keyframes pp-girar { to { transform: rotate(360deg); } }
.pp-pix-auto { margin: 8px 0 0; font-size: 12px; color: var(--pp-muted); }

.pp-pix-garante { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; }
.pp-pix-garante li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pp-ink-2); }
.pp-pix-garante .pp-ico { width: 17px; height: 17px; color: var(--pp-accent); }
.pp-pix-garante .pp-ico { flex: 0 0 auto; }
.pp-pix-garante li { align-items: flex-start; line-height: 1.45; }

/* Aviso no topo da loja: Pix pendente */
.pp-pix-pend { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--cor-principal-clara); border-bottom: 1px solid var(--cor-principal-linha); font-size: 12.5px; color: var(--cor-principal-escura); }
.pp-pix-pend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pp-pix-pend .pp-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.pp-page .pp-pix-pend button { flex: 0 0 auto; padding: 6px 12px; border-radius: 99px; background: var(--pp-accent); color: #fff; font-size: 12.5px; font-weight: 800; }

/* ============================================================================
   TESTE DE LP (07/10/2026) — hierarquia, cor e legibilidade
   ----------------------------------------------------------------------------
   Tudo do teste está neste bloco (sobrescreve as regras de cima). Para voltar
   ao visual anterior, apague daqui até o fim do arquivo.
   - Verde forte só nos botões de compra, no "no Pix" e no card de oferta escolhido.
   - Ícones, checks e selos em cinza escuro ou verde bem suave.
   - Vermelho só no selo de desconto.
   - Texto de corpo com 15–16px em cinza escuro (contraste AA).
   - Card só no bloco de compra/oferta e no FAQ.
   ========================================================================== */
:root {
  --pp-ink-2: var(--cor-texto-2);   /* corpo: 11:1 sobre o fundo */
  --pp-muted: var(--cor-cinza);   /* secundário: 6,1:1 sobre o fundo */
  --pp-ico: var(--cor-texto-2);     /* ícones e checks */
  --pp-verde-suave: var(--cor-principal-clara);
}

/* Faixa do topo: frase fixa, sem animação, fundo escuro neutro */
.pp-promo.is-fixa { background: var(--pp-ink); display: flex; justify-content: center; }
.pp-promo.is-fixa .pp-promo-item { padding: 7px 16px; font-size: 12.5px; font-weight: 700; }
.pp-promo.is-fixa .pp-promo-item::after { display: none; }

/* Ícones e destaques secundários: sem verde */
.pp-checks .pp-ico,
.pp-trust3 .pp-ico,
.pp-sec-ico,
.pp-acc-ico,
.pp-mini-trust .pp-ico { color: var(--pp-ico); }
.pp-eyebrow.is-accent { color: var(--pp-muted); }
.pp-sec-head:not(.is-center) .pp-h2::before { background: var(--cor-linha-forte); }
.pp-brinde-txt strong { color: var(--pp-ink); }
.pp-thumb.is-on .pp-thumb-img::after { box-shadow: inset 0 0 0 2px var(--pp-ink); }

/* Títulos de seção um pouco mais pesados */
.pp-h2 { font-size: 25px; font-weight: 850; letter-spacing: -.03em; color: var(--pp-ink); }
.pp-sec { padding-top: 44px; }

/* ---------- Bloco de compra ---------- */
.pp-checks li { font-size: 15px; color: var(--pp-ink-2); }
.pp-price-sub { font-size: 14px; }
.pp-page .pp-rating { font-size: 14px; }

/* Cards de quantidade */
.pp-kits { display: grid; gap: 10px; margin-top: 20px; }
.pp-page .pp-kit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 14px;
  border: 1.5px solid var(--pp-line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  font: inherit;
  color: var(--pp-ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pp-page .pp-kit.tem-selo { padding-top: 21px; }
.pp-page .pp-kit.is-on { border-color: var(--pp-accent); background: var(--pp-accent-soft); box-shadow: 0 0 0 1px var(--pp-accent); }
.pp-kit .pp-radio { position: static; flex: 0 0 auto; width: 20px; height: 20px; }
.pp-kit.is-on .pp-radio { border: 6px solid var(--pp-accent); }
.pp-kit-txt { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.pp-kit-txt strong { font-size: 16px; font-weight: 800; }
.pp-kit-txt small { font-size: 13.5px; color: var(--pp-muted); }
.pp-kit-economia { align-self: flex-start; margin-top: 5px; padding: 2px 8px; border-radius: 99px; background: var(--pp-verde-suave); color: var(--cor-principal-escura); font-size: 12.5px; font-weight: 800; }
.pp-kit-preco { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pp-kit-preco s { font-size: 13px; color: var(--pp-muted); }
.pp-kit-preco strong { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.pp-kit-preco small { font-size: 12.5px; font-weight: 700; color: var(--pp-green); }
.pp-kit-selo {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--pp-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pp-page .pp-kit.is-on .pp-kit-selo { background: var(--pp-accent); }
.pp-kits + .pp-brinde, .pp-kits + .pp-colors { margin-top: 14px; }

/* Contador abaixo do botão: mesma fonte e cor do texto que ficava ali no teste */
.pp-timer { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--pp-ink-2); }
.pp-timer .pp-ico { width: 17px; height: 17px; color: var(--pp-ico); }
.pp-timer span { overflow: hidden; text-overflow: ellipsis; }
.pp-timer strong { font-weight: 700; color: var(--pp-ink-2); font-variant-numeric: tabular-nums; }
.pp-trust3 { font-size: 12px; }

/* ---------- Seções sem card: conteúdo direto no fundo ---------- */
.pp-ben-intro { font-size: 16px; line-height: 1.6; color: var(--pp-ink-2); }
.pp-benefits { grid-template-columns: 1fr; gap: 18px; margin-top: 8px; }
.pp-benefit { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pp-benefit-ico { grid-row: span 2; margin: 0; background: var(--pp-verde-suave); color: var(--pp-ico); }
.pp-benefit strong { font-size: 16px; color: var(--pp-ink); }
.pp-benefit p { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--pp-ink-2); }

/* Fotos de seção: sem moldura de card */
.pp-ben-fotos { gap: 12px; margin-bottom: 24px; }
.pp-foto-secao { margin: 0; border-radius: 16px; overflow: hidden; background: var(--pp-line-2); }
.pp-foto-secao img { display: block; width: 100%; height: auto; }
.pp-foto-secao.is-cortada img { height: 100%; object-fit: cover; }
.pp-foto-vaga {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--cor-linha-forte);
  border-radius: 16px;
  background: var(--cor-fundo);
  color: var(--pp-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.pp-foto-vaga .pp-ico { width: 26px; height: 26px; }
.pp-foto-vaga code { font-size: 13px; font-weight: 600; color: var(--pp-ink-2); background: #fff; padding: 2px 8px; border-radius: 6px; }

/* Especificações */
.pp-specs { margin: 0; display: grid; }
.pp-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cor-linha); font-size: 15px; }
.pp-specs > div:first-child { border-top: 1px solid var(--cor-linha); }
.pp-specs dt { color: var(--pp-muted); }
.pp-specs dd { margin: 0; font-weight: 700; color: var(--pp-ink); text-align: right; }

/* Avaliações sem card */
.pp-av-lista { gap: 0; margin-top: 8px; }
.pp-av-card { padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--cor-linha); border-radius: 0; box-shadow: none; }
.pp-av-card:first-child { border-top: 1px solid var(--cor-linha); }
.pp-av-avatar { background: var(--pp-verde-suave); color: var(--pp-ink-2); }
.pp-av-nome { font-size: 15px; }
.pp-av-cidade { font-size: 13.5px; color: var(--pp-muted); }
.pp-av-chip { background: var(--pp-verde-suave); color: var(--cor-principal-escura); }
.pp-av-chip::before { background: var(--cor-principal-escura); }
.pp-av-texto { font-size: 15.5px; line-height: 1.6; color: var(--pp-ink-2); }
.pp-av-card > .pp-av-foto { width: 120px; margin-top: 12px; }
.pp-av-linha { font-size: 14.5px; }

/* FAQ (continua em card) */
.pp-acc.is-faq .pp-acc-btn { font-size: 16px !important; font-weight: 700 !important; color: var(--pp-ink); }
.pp-acc-in { font-size: 15.5px; color: var(--pp-ink-2); }

/* Oferta do meio da página (continua em card) */
.pp-offer .pp-offer-sub { font-size: 14px; }

/* Galeria: vídeo opcional */
.pp-gallery-stage video.pp-gallery-img { object-fit: cover; background: #000; }
.pp-thumb-img.is-video { display: flex; align-items: center; justify-content: center; background: var(--pp-ink); color: #fff; }
.pp-thumb-img.is-video .pp-ico { width: 20px; height: 20px; }

/* ---------- Checkout ---------- */
/* Order bump */
.pp-bump {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 2px dashed var(--cor-linha-forte);
  border-radius: 12px;
  background: var(--cor-principal-clara);
  cursor: pointer;
  color: var(--pp-ink);
}
.pp-bump.is-on { border-style: solid; border-color: var(--pp-accent); background: var(--pp-accent-soft); }
.pp-bump input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pp-bump-caixa { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--cor-linha-forte); border-radius: 6px; background: #fff; color: transparent; }
.pp-bump-caixa .pp-ico { width: 16px; height: 16px; stroke-width: 3; }
.pp-bump.is-on .pp-bump-caixa { border-color: var(--pp-accent); background: var(--pp-accent); color: #fff; }
.pp-bump input:focus-visible + .pp-bump-caixa { outline: 2px solid var(--pp-ink); outline-offset: 2px; }
.pp-bump-foto { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 1px solid var(--pp-line); }
.pp-bump-txt { font-size: 15px; line-height: 1.35; }
.pp-bump-txt strong { font-weight: 800; white-space: nowrap; }

/* Ajuda abaixo do botão de pagar */
.pp-ajuda-ck { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13.5px; color: var(--pp-muted); }
.pp-ajuda-ck a { display: inline-flex; align-items: center; gap: 6px; color: var(--pp-ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cor-linha-forte); }
.pp-ajuda-ck > span { display: inline-flex; align-items: center; gap: 5px; }
.pp-ajuda-ck .pp-ico { width: 16px; height: 16px; }
.pp-ajuda-ck .pp-ico-whats { color: currentColor; }
.pp-ajuda-ck .pp-ajuda-sep { display: none; }
.pp-offer-qtd { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted); }

/* Rodapé escuro, na mesma cor da faixa do topo (loja e checkout) */
.pp-footer, .cdg-footer { background: var(--pp-ink); border-top: 0; color: var(--cor-sobre-escuro); }
.pp-footer-ajuda-tit { color: #fff; }
.pp-footer-ajuda a, .pp-footer-links a, .pp-footer-links button { color: var(--cor-sobre-escuro); }
.pp-footer-ajuda a:hover, .pp-footer-links a:hover, .pp-footer-links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pp-footer-ajuda span, .pp-footer-ssl, .pp-footer-legal, .cdg-footer-empresa, .pp-footer-links > * + *::before { color: var(--cor-sobre-escuro-2); }
.pp-footer-ajuda + .pp-footer-links, .pp-footer-pag, .pp-footer-legal { border-top-color: rgba(255, 255, 255, .12); }
.pp-footer-pag .pp-band { border-color: transparent; }
.pp-footer-ssl .pp-ico { color: var(--cor-principal-linha); }
/* Botão "Rastrear seu pedido" no rodapé */
.pp-footer-rastreio { margin-top: 18px; }
.pp-footer-rastreio-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border-radius: 12px; background: var(--cor-principal); color: var(--cor-escura); font-size: 16px; font-weight: 800; text-decoration: none; transition: filter .15s ease; }
.pp-footer-rastreio-btn:hover { filter: brightness(1.08); }
.pp-footer-rastreio-btn .pp-ico { width: 20px; height: 20px; }
.pp-footer-rastreio p { margin: 8px 0 0; font-size: 13px; color: var(--cor-sobre-escuro-2); }
/* Carrossel de ponta a ponta (sem moldura): faixa com rolagem que encaixa foto a
   foto (só deslizando o dedo) e bolinhas embaixo. */
.pp-gallery { position: relative; padding: 0; }
.pp-gal-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #fff; }
.pp-gal-trilho::-webkit-scrollbar { display: none; }
.pp-gal-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; scroll-snap-stop: always; }
.pp-gal-slide img, .pp-gal-slide video { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pp-gal-slide video { background: #000; }
.pp-gal-pontos { display: flex; justify-content: center; gap: 2px; padding: 8px 0 0; }
.pp-page .pp-gal-ponto { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pp-gal-ponto::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--cor-linha-forte); transition: width .2s ease, background-color .2s ease; }
.pp-gal-ponto.is-on::before { width: 22px; background: var(--pp-ink); }
@media (prefers-reduced-motion: reduce) { .pp-gal-trilho { scroll-behavior: auto; } }
/* Foto de "Por que você vai amar" de ponta a ponta, como o carrossel do topo */
.pp-ben-fotos { margin-left: -16px; margin-right: -16px; }
.pp-ben-fotos .pp-foto-secao, .pp-ben-fotos .pp-foto-vaga { border-radius: 0; }

/* Bloco de preço do topo centralizado, igual ao da oferta do meio da página */
.pp-buy .pp-price { text-align: center; }
.pp-buy .pp-price-top { justify-content: center; }
/* Rodapé mais compacto e discreto: o botão de rastreio e o "Precisa de ajuda?"
   ficam como estão; os links institucionais e os dados legais ficam menores e
   mais apagados, com menos espaço entre as partes. */
.pp-footer-in { padding-top: 18px; }
.pp-footer-ajuda + .pp-footer-links { margin-top: 14px; padding-top: 12px; }
.pp-footer-links + .pp-footer-links { margin-top: 2px; }
.pp-footer-links a, .pp-footer-links button { font-size: 11.5px; color: var(--cor-sobre-escuro-2); }
.pp-footer-links > * + *::before { margin: 0 6px; color: var(--cor-cinza); }
.pp-footer-legal { margin-top: 12px; padding-top: 10px; font-size: 10.5px; color: var(--cor-cinza); }
.pp-footer-legal p + p { margin-top: 1px; }
/* FAQ sem card: perguntas direto no fundo, separadas por linhas finas */
.pp-acc.is-faq { background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--cor-linha); border-bottom: 1px solid var(--cor-linha); }
.pp-acc.is-faq .pp-acc-item + .pp-acc-item { border-top-color: var(--cor-linha); }
.pp-acc.is-faq .pp-acc-btn { padding: 16px 0; }
.pp-acc.is-faq .pp-acc-in { padding-left: 0; padding-right: 0; }
/* Fotos de clientes em loop: formato retrato (3:4), que combina com fotos tiradas no celular */
.pp-av-faixa-foto { width: 132px; height: 176px; border-radius: 12px; }
.pp-av-faixa { margin-bottom: 0; }
/* ============================================================================
   Checkout para público adulto/idoso (07/10/2026), na escala da landing page:
   rótulos 14,5px escuros (var(--cor-texto-2) sobre branco = 11:1), campos de 48px com texto
   de 16px (menos que isso o iPhone dá zoom), erro escrito embaixo de cada campo
   e áreas de toque de 44px no seletor de quantidade.
   ========================================================================== */
.ck-bloco { display: grid; gap: 14px; padding: 16px; }
.ck-titulo, .pp-pay-titulo.ck-titulo { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--pp-ink); }
.ck-titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ck-buscando { font-size: 13px; font-weight: 600; color: var(--pp-accent-600); }
.ck-campo { display: grid; gap: 5px; min-width: 0; align-content: start; }
.ck-rot-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ck-rot { font-size: 14.5px; font-weight: 600; color: var(--cor-texto-2); }
.ck-link { font-size: 13.5px; font-weight: 600; color: var(--pp-accent-600); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.ck-input { width: 100%; min-width: 0; height: 48px; padding: 0 13px; border: 1px solid var(--cor-linha-forte); border-radius: 10px; background: #fff; color: var(--pp-ink); font: inherit; font-size: 16px; }
.ck-input::placeholder { color: var(--cor-linha-forte); }
.ck-input:focus { outline: none; border-color: var(--pp-accent); box-shadow: 0 0 0 2px rgba(14, 143, 134, .2); }
/* 19/10/2026: "+55" fixo dentro do campo de celular (as pessoas digitavam o 55 e o número não cabia). */
.ck-com-prefixo { position: relative; }
.ck-prefixo { position: absolute; left: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 10px 0 13px; border-right: 1px solid var(--cor-linha-forte); border-radius: 9px 0 0 9px; background: #f3f4f6; color: var(--pp-ink); font-size: 16px; font-weight: 600; pointer-events: none; }
.ck-com-prefixo .ck-input { padding-left: 66px; }
.ck-ajuda { margin: 0; font-size: 13px; line-height: 1.4; color: var(--cor-cinza); }
.ck-campo.tem-erro .ck-input { border-color: var(--cor-erro); box-shadow: 0 0 0 1px var(--cor-erro); background: var(--cor-erro-fundo); }
.ck-erro { display: flex; align-items: flex-start; gap: 5px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--cor-erro); }
.ck-erro .pp-ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.ck-endereco { display: grid; gap: 14px; }
.ck-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-linha.is-uf { grid-template-columns: 1fr 88px; }
.ck-linha.is-uf-esq { grid-template-columns: 88px 1fr; }
/* 21/10/2026: subtotal/frete/total dentro do card "Seu pedido" (build-sem-node.ps1, 4h) */
.pp-ck-totais { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cor-linha); }
/* 21/10/2026 (modelo do Luan): "Outras formas de pagamento" solto na página (sem caixa) e o
   botão de pagar com cartão/boleto igual ao do Pix (.pp-cta). */
.pp-pay-box.pp-pay-outras-box { background: none; border: 0; border-radius: 0; padding: 0; }
.pp-cta.pp-ck-outras { margin-top: 14px; }
/* Caixa "Dados do Cartão": abre ao tocar em "Outras formas de pagamento" */
.pp-ck-cartao { margin-top: 8px; padding: 18px 16px 16px; border: 1.5px solid var(--cor-principal-escura); border-radius: 14px; background: linear-gradient(180deg, #effaf4 0%, #fff 100%); }
.pp-ck-cartao-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--cor-escura); }
.pp-ck-cartao-titulo .pp-ico { width: 22px; height: 22px; color: var(--cor-principal-escura); }
.pp-ck-parcele { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: #15803d; }
.pp-ck-parcele .pp-ico { width: 14px; height: 14px; padding: 1px; border-radius: 3px; background: #22c55e; color: #fff; stroke-width: 3; }
.pp-ck-cartao-seguro { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 12px; line-height: 1.4; text-align: center; color: var(--cor-cinza); }
.pp-ck-cartao-seguro .pp-ico { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; color: #d97706; }
/* 21/10/2026: opção de entrega (modelo do Luan), entre o item e o resumo de valores */
.pp-ck-entrega { margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--cor-linha); display: grid; gap: 10px; min-width: 0; }
.pp-ck-entrega legend { float: left; width: 100%; margin-bottom: 2px; padding: 0; font-size: 13.5px; color: var(--cor-texto-2); }
.pp-ck-entrega-op { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--cor-linha); border-radius: 14px; background: #fff; cursor: pointer; }
.pp-ck-entrega-op.is-on { border-color: var(--cor-principal-escura); background: color-mix(in srgb, var(--cor-principal) 8%, #fff); }
.pp-ck-entrega-op input { position: absolute; opacity: 0; pointer-events: none; }
.pp-ck-entrega-op:has(input:focus-visible) { outline: 2px solid var(--cor-principal); outline-offset: 2px; }
.pp-ck-entrega-radio { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid var(--cor-cinza); border-radius: 50%; background: #fff; }
.pp-ck-entrega-op.is-on .pp-ck-entrega-radio { border-color: var(--cor-principal-escura); box-shadow: inset 0 0 0 4px #fff; background: var(--cor-principal-escura); }
.pp-ck-entrega-txt { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; }
.pp-ck-entrega-txt strong { font-size: 14px; font-weight: 600; color: var(--cor-escura); }
.pp-ck-entrega-txt small { font-size: 12px; color: var(--cor-cinza); }
.pp-ck-entrega-preco { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--cor-escura); }
.pp-ck-entrega-preco.is-gratis { color: #16a34a; }

/* Pagamento: mesmo padrão de tamanho */
.pp-pay-box { padding: 16px; }
.pp-pay-box button.pp-pay-opcao { min-height: 56px; }
.pp-pay-opcao-txt strong { font-size: 15px; }
.pp-pay-opcao-txt small { font-size: 13px; color: var(--cor-cinza); }
.pp-pay-box button.pp-pay-outras { min-height: 44px; font-size: 14px; color: var(--cor-texto-2); }
.pp-pay-nota { font-size: 13.5px; }
.pp-card-form { gap: 14px; margin-top: 14px; }
.pp-pay-campo { gap: 5px; }
.pp-pay-campo > span { font-size: 14.5px; font-weight: 600; color: var(--cor-texto-2); }
.pp-pay-input { height: 48px; padding: 0 13px; border: 1px solid var(--cor-linha-forte); border-radius: 10px; font-size: 16px; }
select.pp-pay-input { padding-right: 8px; }
.pp-pay-seguro { font-size: 12.5px; }

/* Seletor de quantidade do resumo: mesmo tamanho do carrinho (.pp-qty-sm) */

.pp-ajuda-ck { font-size: 14px; }

/* Tela do Pix: sem card externo (só o box do código), cronômetro neutro, código
   em 2 linhas, passos numerados, QR Code e resumo recolhíveis e WhatsApp */
.pp-pix-card.is-solto { padding: 4px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.pp-pix-expira, .pp-pix-expira .pp-ico { color: var(--pp-ink-2); }
.pp-pix-expira { font-size: 14px; font-weight: 600; }
.pp-pix-expira .pp-ico { width: 16px; height: 16px; }
.pp-pix-expira.is-fim { color: var(--cor-erro); }
.pp-page .pp-pix-codigo-curto { display: block; width: 100%; padding: 12px 14px; border: 1.5px dashed var(--cor-linha-forte); border-radius: 12px; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--pp-ink-2); text-align: left; word-break: break-all; cursor: pointer; }
.pp-pix-codigo-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-page .pp-pix-codigo { background: #fff; border-color: var(--cor-linha-forte); }
.pp-pix-copiar { min-height: 54px; }
.pp-page .pp-pix-copiar.is-ok { padding: 10px 16px; font-size: 15px; line-height: 1.3; white-space: normal; text-align: center; }
.pp-pix-falhou { font-size: 14px; }
.pp-pix-passos-tit { margin: 20px 0 0; font-size: 15px; font-weight: 800; color: var(--pp-ink); text-align: left; }
.pp-pix-passos { list-style: none; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; padding: 0; text-align: left; }
.pp-pix-passos li { flex-direction: row; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.35; color: var(--cor-texto-2); }
.pp-pix-passos b { flex: 0 0 auto; width: 24px; height: 24px; font-size: 13px; background: var(--pp-ink); color: #fff; }
.pp-pix-qrbox, .pp-pix-resumo { margin-top: 18px; border-top: 1px solid var(--cor-linha); text-align: left; }
.pp-pix-resumo { margin-top: 12px; border-bottom: 1px solid var(--cor-linha); }
.pp-page .pp-pix-abre { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 0; background: none; border: 0; font: inherit; font-size: 14.5px; color: var(--pp-ink-2); text-align: left; cursor: pointer; }
.pp-pix-abre strong { color: var(--pp-ink); }
.pp-pix-abre .pp-ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pp-muted); transition: transform .2s ease; }
.pp-pix-abre.is-open .pp-ico { transform: rotate(180deg); }
.pp-pix-qr2 { display: grid; justify-items: center; gap: 8px; padding: 2px 0 14px; }
.pp-pix-qr2 img, .pp-pix-qr2 .pp-pix-qr-vazio { width: 180px; height: 180px; padding: 6px; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; object-fit: contain; }
.pp-pix-qr2 p { margin: 0; font-size: 13px; color: var(--pp-muted); }
.pp-page .pp-pix-verificar { margin-top: 18px; min-height: 48px; font-size: 15px; }
.pp-pix-auto { font-size: 13px; }
.pp-pix-whats { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--cor-texto-2); text-decoration: underline; text-underline-offset: 3px; }
.pp-pix-whats .pp-ico { width: 18px; height: 18px; color: currentColor; }
.pp-pix-resumo-in { padding: 0 0 14px; }
.pp-pix-resumo-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-pix-resumo-in li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; line-height: 1.35; color: var(--pp-ink-2); }
.pp-pix-resumo-in li small { flex: 0 0 auto; font-size: 13px; color: var(--pp-muted); text-align: right; }
.pp-pix-resumo-total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--cor-linha-forte); font-size: 14.5px; color: var(--pp-ink-2); }
.pp-pix-resumo-total strong { font-size: 17px; font-weight: 800; color: var(--pp-ink); }
.pp-pix-resumo-end { display: grid; gap: 2px; margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--pp-ink-2); }
.pp-pix-resumo-end strong { font-size: 13px; color: var(--pp-ink); }
.pp-pix-garante.is-solto { padding: 16px 2px 4px; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* Tela do Pix: textos pequenos maiores e mais escuros; endereço sempre à vista */
.pp-pix-status { padding: 7px 14px; font-size: 13.5px; color: var(--pp-accent-600); }
.pp-pix-pedido { font-size: 14px; color: var(--pp-ink-2); }
.pp-pix-auto { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--pp-ink-2); }
.pp-pix-garante.is-solto li { font-size: 14.5px; line-height: 1.45; color: var(--pp-ink-2); }
.pp-pix-garante.is-solto .pp-ico { width: 18px; height: 18px; color: var(--pp-ink-2); }
.pp-pix-entrega { margin: 0; padding: 12px 0 2px; font-size: 14.5px; line-height: 1.45; color: var(--pp-ink-2); }
.pp-pix-entrega strong { color: var(--pp-ink); }
.pp-pix-resumo-end strong { font-size: 13.5px; }
/* Foto do brinde um pouco maior (bloco de compra e oferta) */
.pp-brinde-foto { width: 64px; height: 64px; }

/* Fotos do resumo do checkout um pouco maiores (kit e brinde) */
.pp-resumo-foto { width: 60px; height: 60px; border-radius: 10px; }
.pp-resumo-lista { gap: 12px; }

/* Faixa do topo em loop horizontal, no mesmo fundo escuro do rodapé */
.pp-promo.is-loop { background: var(--pp-ink); }
.pp-promo.is-loop .pp-promo-item { padding: 7px 22px; font-size: 12.5px; font-weight: 700; }
.pp-promo.is-loop .pp-promo-item::after { background: rgba(255, 255, 255, .35); }

/* Rodapé do menu (Atendimento) escuro, como o rodapé da loja e do checkout */
.pp-menu-atendimento { background: var(--pp-ink); border-top: 0; }
.pp-menu-atendimento .pp-menu-titulo { color: var(--cor-sobre-escuro-2); }
.pp-menu-atendimento a, .pp-menu-atendimento span { color: var(--cor-sobre-escuro); }
.pp-menu-atendimento .pp-ico { color: var(--cor-sobre-escuro-2); }
.pp-menu-atendimento .pp-ico-whats { color: currentColor; }
/* Faixa do topo: texto mais leve e a chama desenhada (igual em todo aparelho) */
.pp-promo.is-loop .pp-promo-item { gap: 5px; font-weight: 500; letter-spacing: .01em; }
.pp-chama { flex: 0 0 auto; width: 15px; height: 15px; }
/* Título "Pagamento": mesmo espaço até o primeiro item que os outros blocos (14px) */
.pp-pay-titulo.ck-titulo { margin-bottom: 14px; }

/* Linha do cartão ("ou R$ 120,00 em até 12x...") menos chamativa, nos dois blocos de preço */
.pp-price-sub, .pp-offer .pp-offer-sub { font-size: 13px; font-weight: 400 !important; color: var(--pp-muted) !important; }
/* "Essa oferta acaba em" um pouco menos chamativo */
.pp-timer { font-size: 13.5px; font-weight: 500; color: var(--cor-texto-2); }
.pp-timer strong { font-weight: 700; color: var(--cor-texto-2); }
/* Preto fosco neutro (sem o verde-petróleo) na faixa do topo e nos rodapés
   da landing page, do checkout e do menu. Textos claros em cinza neutro. */
:root { --pp-preto: var(--cor-escura); }
.pp-promo.is-loop, .pp-footer, .cdg-footer, .pp-menu-atendimento { background: var(--pp-preto); }
.pp-footer, .cdg-footer { color: var(--cor-sobre-escuro); }
.pp-footer-ajuda a, .pp-footer-links a, .pp-footer-links button { color: var(--cor-sobre-escuro); }
.pp-footer-ajuda span, .pp-footer-ssl, .pp-footer-legal, .cdg-footer-empresa, .pp-footer-links > * + *::before, .pp-footer-rastreio p { color: var(--cor-sobre-escuro-2); }
.pp-footer-links a, .pp-footer-links button { color: var(--cor-sobre-escuro-2); }
.pp-footer-legal { color: var(--cor-sobre-escuro-2); }
.pp-footer-ajuda + .pp-footer-links, .pp-footer-pag, .pp-footer-legal { border-top-color: rgba(255, 255, 255, .1); }
.pp-menu-atendimento .pp-menu-titulo, .pp-menu-atendimento .pp-ico { color: var(--cor-sobre-escuro-2); }
.pp-menu-atendimento a, .pp-menu-atendimento span { color: var(--cor-sobre-escuro); }
/* ============================================================================
   PALETA ÚNICA — aplicação (08/10/2026). Usa só as variáveis --cor-* do topo.
   ========================================================================== */
:root { --pp-line-2: var(--cor-linha); }

/* Um único fundo off-white em todas as seções e telas (loja, carrinho, checkout, Pix) */
html, body, #root, .pp-page { background: var(--cor-fundo); }
.pp-header { background: rgba(247, 246, 242, .85); }
.pp-header.is-rolado { background: rgba(247, 246, 242, .96); }
.pp-gal-trilho, .pp-gaveta, .pp-gaveta-head, .pp-cart-rodape, .pp-sticky, .pp-sticky-in { background: var(--cor-fundo); }
.pp-foto-secao { background: var(--cor-fundo); }

/* Botões de compra: a cor principal, sólida */
.pp-page .pp-cta, .pp-cta { background: var(--cor-principal); text-shadow: none; box-shadow: 0 12px 24px -14px rgba(14, 143, 134, .6); }
.pp-cta:disabled { background: var(--cor-principal-linha); }
.pp-footer-rastreio-btn { background: var(--cor-principal); color: #fff; }

/* "no Pix", "Grátis" e preços em destaque: a principal (tom de texto) */
.pp-price-pix, .pp-offer-price small, .pp-kit-preco small, .pp-cart-gratis, .pp-resumo-brinde .pp-resumo-txt span,
.pp-page .text-emerald-600, .pp-page .text-emerald-700, .pp-page .text-green-600, .pp-page .text-green-700 { color: var(--cor-principal-escura) !important; }

/* Destaques suaves: caixa do brinde, opção escolhida, selos */
.pp-brinde { background: var(--cor-principal-clara); border-color: var(--cor-principal-linha); }
.pp-page .pp-kit.is-on, .pp-pay-opcao.is-on { background: var(--cor-principal-clara); border-color: var(--cor-principal); }
.pp-pay-selo, .pp-pix-status { background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
.pp-av-chip { background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
.pp-av-chip::before { background: var(--cor-principal); }
.pp-av-avatar { background: var(--cor-principal-clara); color: var(--cor-principal-escura); }

/* Faixa do topo: uma frase fixa, no tom escuro */
.pp-promo.is-fixa { background: var(--cor-escura); color: #fff; }
.pp-promo.is-fixa .pp-promo-item { padding: 8px 16px; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }

/* Rodapés e faixa: o mesmo tom escuro */
.pp-footer, .cdg-footer, .pp-menu-atendimento { background: var(--cor-escura); }

/* Classes prontas do checkout/Pix do bundle (Tailwind) na paleta */
.pp-page .text-gray-900 { color: var(--cor-escura) !important; }
.pp-page .text-gray-800, .pp-page .text-gray-700 { color: var(--cor-texto-2) !important; }
.pp-page .text-gray-600, .pp-page .text-gray-500, .pp-page .text-gray-400 { color: var(--cor-cinza) !important; }
.pp-page .border-gray-100, .pp-page .border-gray-200, .pp-page .border-gray-300 { border-color: var(--cor-linha) !important; }
.pp-page .bg-gray-50, .pp-page .bg-gray-100 { background-color: var(--cor-fundo) !important; }/* Fundo do contêiner do bundle original (bg-gray-50) e opção de pagamento escolhida */
.bg-gray-50, .min-h-screen.bg-gray-50 { background-color: var(--cor-fundo) !important; }
.pp-pay-box button.pp-pay-opcao.is-on { border-color: var(--cor-principal); background: var(--cor-principal-clara); }
/* WhatsApp com o verde original da marca (exceção da paleta: é o ícone do app) */
:root { --cor-whatsapp: #25d366; }
.pp-ico-whats, .pp-footer-ajuda .pp-ico-whats, .pp-menu-atendimento .pp-ico-whats { color: var(--cor-whatsapp) !important; }
/* Rodapé: "Fale pelo WhatsApp" em destaque, e-mail e horário abaixo */
.pp-footer-whats { font-size: 15px !important; font-weight: 700; color: #fff !important; }
.pp-footer-whats .pp-ico { width: 20px; height: 20px; }

/* ============================================================================
   RODAPÉ EM DUAS FAIXAS (08/10/2026) — discreto: faixa clara (site seguro, formas
   de pagamento, rastrear pedido) + faixa escura (logo e atendimento ao cliente).
   ========================================================================== */
.pp-footer.pp-rod { margin-top: 32px; padding: 0; background: var(--cor-fundo); border-top: 1px solid var(--cor-linha); color: var(--cor-texto-2); text-align: center; }
.pp-rod-in { max-width: 480px; margin: 0 auto; padding: 22px 20px; }
.pp-rod-tit { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-cinza); }

/* Faixa clara */
.pp-rod-seguro { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px; padding: 6px 12px; border: 1px solid var(--cor-linha); border-radius: 999px; background: var(--cor-caixa); font-size: 11.5px; color: var(--cor-texto-2); }
.pp-rod-seguro .pp-ico { width: 13px; height: 13px; flex: 0 0 auto; color: var(--cor-principal-escura); }
.pp-rod .pp-bandeiras { margin-top: 0; gap: 6px; }
.pp-rod .pp-band { width: 44px; height: 28px; border: 1px solid var(--cor-linha); background: var(--cor-caixa); }
.pp-rod-rastreio { display: inline-block; margin-top: 18px; font-size: 12.5px; color: var(--cor-texto-2); text-decoration: underline; text-decoration-color: var(--cor-linha-forte); text-underline-offset: 3px; }
.pp-rod-rastreio:hover { color: var(--cor-principal-escura); text-decoration-color: currentColor; }

/* Faixa escura */
.pp-rod-escuro { background: var(--cor-escura); color: var(--cor-sobre-escuro); }
.pp-rod-escuro .pp-rod-in { padding: 26px 20px calc(92px + env(safe-area-inset-bottom)); }
.pp-rod-logo { display: block; height: 26px; width: auto; margin: 0 auto 20px; opacity: .92; }
.pp-rod-escuro .pp-rod-tit { color: var(--cor-sobre-escuro-2); }
.pp-rod-atend { display: grid; justify-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--cor-sobre-escuro); }
.pp-rod-atend li { display: inline-flex; align-items: center; gap: 7px; }
.pp-rod-atend a { display: inline-flex; align-items: center; gap: 7px; color: var(--cor-sobre-escuro); text-decoration: none; }
.pp-rod-atend a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pp-rod-atend .pp-ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--cor-sobre-escuro-2); }
.pp-rod-atend .pp-ico-whats { width: 16px; height: 16px; color: var(--cor-whatsapp) !important; }
.pp-rod-whats { font-weight: 600; }
.pp-rod-legal { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 10.5px; line-height: 1.55; color: var(--cor-sobre-escuro-2); }
.pp-rod-legal p { margin: 0; }

/* ============================================================================
   RODAPÉS NA COR PRINCIPAL (08/10/2026): faixa de baixo do rodapé da loja, rodapé
   do checkout e atendimento do menu no verde da marca (era preto). Textos em branco
   para dar leitura; o ícone do WhatsApp fica verde sobre um círculo branco.
   ========================================================================== */
.pp-rod-escuro, .cdg-footer, .pp-menu-atendimento { background: var(--cor-principal); color: #fff; }
.pp-rod-escuro .pp-rod-tit, .pp-menu-atendimento .pp-menu-titulo { color: rgba(255, 255, 255, .85); }
.pp-rod-atend, .pp-rod-atend a, .pp-menu-atendimento a, .pp-menu-atendimento span { color: #fff; }
.pp-rod-atend .pp-ico, .pp-menu-atendimento .pp-ico { color: rgba(255, 255, 255, .85); }
.pp-rod-legal, .cdg-footer-empresa { color: rgba(255, 255, 255, .88); font-size: 11px; }
.pp-rod-legal { border-top-color: rgba(255, 255, 255, .22); }
.pp-rod-logo { opacity: 1; }
.pp-rod-atend .pp-ico-whats, .pp-menu-atendimento .pp-ico-whats { box-sizing: content-box; padding: 2px; border-radius: 50%; background: #fff; color: var(--cor-whatsapp) !important; }
/* Rodapé verde, ajuste: logo toda branca (a versão clara tem detalhes verdes que
   sumiam no fundo verde) e textos/ícones em branco sólido, sem cinzas misturados. */
.pp-rod-logo { filter: brightness(0) invert(1); opacity: 1; }
.pp-rod-escuro .pp-rod-tit, .pp-menu-atendimento .pp-menu-titulo { color: #fff; opacity: .9; }
.pp-rod-atend, .pp-rod-atend a, .pp-menu-atendimento a, .pp-menu-atendimento span { color: #fff; font-weight: 500; }
.pp-rod-atend .pp-ico, .pp-menu-atendimento .pp-ico { color: #fff; }
.pp-rod-whats { font-weight: 600 !important; }
.pp-rod-legal, .cdg-footer-empresa { color: #fff; opacity: .9; }
.pp-rod-legal { border-top-color: rgba(255, 255, 255, .3); }
/* Logo do rodapé um pouco maior; ícone do WhatsApp como o original do app
   (círculo verde com o desenho branco), no rodapé e no menu. */
.pp-rod-logo { height: 34px; margin-bottom: 22px; }
.pp-rod-atend .pp-ico-whats, .pp-menu-atendimento .pp-ico-whats { box-sizing: content-box; width: 14px; height: 14px; padding: 3px; border-radius: 50%; background: var(--cor-whatsapp); color: #fff !important; }
/* ============================================================================
   RODAPÉ NUMA FAIXA SÓ (08/10/2026): sem a faixa clara; tudo dentro do verde.
   Rastrear pedido abaixo do horário; links institucionais pequenos, CNPJ,
   copyright e "Site seguro" no fim.
   ========================================================================== */
.pp-footer.pp-rod { background: var(--cor-principal); border-top: 0; color: #fff; }
.pp-rod-escuro .pp-rod-in { padding-top: 28px; }
.pp-rod-atend .pp-rod-rastreio { margin: 2px 0 0; font-size: 13px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.pp-rod-atend .pp-rod-rastreio:hover { text-decoration-color: #fff; }
.pp-rod-legal { margin-top: 22px; padding-top: 16px; }
.pp-rod-legal .pp-footer-links { margin: 0 0 12px; gap: 4px 0; }
.pp-rod-legal .pp-footer-links a, .pp-rod-legal .pp-footer-links button { font-size: 11px; line-height: 1.5; color: #fff; opacity: 1; }
.pp-rod-legal .pp-footer-links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-rod-legal .pp-footer-links > * + *::before { margin: 0 6px; color: rgba(255, 255, 255, .55); }
.pp-rod-legal p + p { margin-top: 2px; }
.pp-rod-legal .pp-rod-seguro { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 0; border: 0; background: none; font-size: 10.5px; color: #fff; opacity: .85; }
.pp-rod-legal .pp-rod-seguro .pp-ico { width: 11px; height: 11px; color: #fff; }
/* Links institucionais do rodapé: sem pontos (evita ponto solto quando quebra a linha) */
.pp-rod-legal .pp-footer-links { gap: 4px 16px; }
.pp-rod-legal .pp-footer-links > * + *::before { content: none; }
/* ============================================================================
   FAIXA DO TOPO (08/10/2026): mesma cor do rodapé (verde principal), em loop na
   velocidade das fotos das avaliações (--pp-promo-dur calculada no PpPromo),
   ícone do caminhão à esquerda da frase.
   ========================================================================== */
.pp-promo.is-loop { background: var(--cor-principal); color: #fff; }
.pp-promo.is-loop .pp-promo-track { animation: pp-marquee var(--pp-promo-dur, 20s) linear infinite; }
.pp-promo.is-loop .pp-promo-item { gap: 6px; padding: 8px 22px; font-size: 12.5px; font-weight: 500; letter-spacing: .01em; }
.pp-promo.is-loop .pp-promo-item::after { background: rgba(255, 255, 255, .45); }
.pp-promo.is-loop .pp-promo-item .pp-ico { width: 15px; height: 15px; flex: 0 0 auto; color: #fff; }
/* Tela do Pix: aviso do nome do recebedor (abaixo do passo 4) */
.pp-pix-recebedor { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--cor-principal-linha); border-radius: 12px; background: var(--cor-principal-clara); font-size: 13.5px; line-height: 1.45; text-align: left; color: var(--cor-texto-2); }
.pp-pix-recebedor .pp-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--cor-principal-escura); }
.pp-pix-recebedor strong { color: var(--cor-escura); font-weight: 800; white-space: nowrap; }
/* ============================================================================
   TELA DO PIX ENXUTA (08/10/2026): título, valor, cronômetro, copiar, passos,
   aviso do nome no banco (texto pequeno) e "Já paguei". QR só no computador.
   ========================================================================== */
.pp-pix-card.is-curta { padding: 8px 0 0; }
.pp-pix-titulo { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--cor-escura); }
.pp-pix-card.is-curta .pp-pix-valor { margin-top: 6px; }
.pp-pix-card.is-curta .pp-pix-expira { margin-top: 8px; font-weight: 500; color: var(--cor-cinza); }
.pp-pix-card.is-curta .pp-pix-expira .pp-ico { color: var(--cor-cinza); }
.pp-pix-card.is-curta .pp-pix-expira strong { color: var(--cor-texto-2); font-weight: 700; }
.pp-pix-card.is-curta .pp-pix-expira.is-fim, .pp-pix-card.is-curta .pp-pix-expira.is-fim .pp-ico { color: var(--cor-erro); }
.pp-pix-card.is-curta .pp-pix-copia { margin-top: 18px; }
.pp-pix-passo-valor { color: var(--cor-escura); font-weight: 800; white-space: nowrap; }
.pp-page .pp-pix-card.is-curta .pp-pix-verificar { margin-top: 22px; background: transparent; border: 1.5px solid var(--cor-linha-forte); }
/* QR Code: escondido até 768px; no computador, aberto (200px) acima do botão de copiar */
.pp-pix-qr-desk { display: none; }
@media (min-width: 769px) {
  .pp-pix-qr-desk { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
  .pp-pix-qr-desk img { width: 200px; height: 200px; padding: 8px; border: 1px solid var(--cor-linha); border-radius: 12px; background: #fff; }
  .pp-pix-qr-desk p { margin: 0; font-size: 13px; color: var(--cor-cinza); }
}
/* Tela do Pix enxuta: logo do Pix pequeno entre o título e o valor; código em
   caixa tracejada (2 linhas, reticências) logo acima do botão de copiar. */
.pp-pix-card.is-curta .pp-pix-logo { height: 20px; margin: 10px auto 0; }
.pp-pix-card.is-curta .pp-pix-valor { margin-top: 4px; }
.pp-page .pp-pix-card.is-curta .pp-pix-codigo-curto { margin-bottom: 0; padding: 10px 12px; font-size: 12px; line-height: 1.5; }
/* Tela do Pix: "Pedido reservado" com check verde, subtítulo e nº do pedido */
.pp-pix-titulo.is-reservado { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pp-pix-titulo.is-reservado .pp-ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--cor-principal); stroke-width: 2.4; }
.pp-pix-subtitulo { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--cor-cinza); }
.pp-pix-num { margin: 4px 0 0; font-size: 12.5px; color: var(--cor-cinza); }
.pp-pix-card.is-curta .pp-pix-logo { margin-top: 12px; }
/* Tela do Pix (09/10/2026): o pedido (foto do kit + brinde) abaixo do valor e
   "Depois que você pagar" no fim. Mesmas fotos e cores do resumo do checkout. */
.pp-pix-produto { list-style: none; display: grid; gap: 10px; margin: 16px 0 0; padding: 0; text-align: left; }
.pp-pix-produto li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-pix-prod-foto { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; border: 1px solid var(--cor-linha); object-fit: cover; background: #fff; }
.pp-pix-produto .is-brinde .pp-pix-prod-foto { display: inline-flex; align-items: center; justify-content: center; background: var(--pp-accent-soft); color: var(--pp-accent); }
.pp-pix-prod-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pp-pix-prod-txt strong { font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-pix-prod-txt span { font-size: 13px; color: var(--cor-cinza); }
.pp-pix-produto .is-brinde .pp-pix-prod-txt span { color: var(--pp-green); font-weight: 700; }
.pp-pix-depois { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cor-linha); text-align: left; }
.pp-pix-depois-tit { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--pp-ink); }
.pp-pix-depois ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.pp-pix-depois li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--cor-texto-2); }
.pp-pix-depois li .pp-ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--cor-principal); }
.pp-pix-depois strong { color: var(--cor-escura); }
/* Topo da tela do Pix (09/10/2026): etiqueta do pedido, título e subtítulo; depois,
   com respiro, logo do Pix, valor e o prazo numa pílula neutra. */
.pp-pix-card.is-curta .pp-pix-num { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-cinza); }
.pp-pix-card.is-curta .pp-pix-subtitulo { margin-top: 6px; }
.pp-pix-card.is-curta .pp-pix-logo { display: block; height: 18px; margin: 26px auto 0; }
.pp-pix-card.is-curta .pp-pix-valor { margin-top: 6px; font-size: 38px; }
.pp-pix-card.is-curta .pp-pix-expira { margin-top: 12px; padding: 6px 14px; border-radius: 99px; background: rgba(22, 22, 22, .05); font-size: 13.5px; }
/* Header do checkout e da tela do Pix (sem seta): à direita, cadeado + "Pagamento
   seguro" em duas linhas. Colunas laterais iguais para o logo ficar no centro. */
.pp-ck-head.is-seguro { grid-template-columns: 1fr auto 1fr; }
.pp-ck-head.is-seguro .pp-ck-voltar { justify-self: start; }
/* AVALIAÇÕES (09/10/2026): nota grande com estrelas e total ao lado; cada avaliação
   num card branco; "✓ Venda verificada" embaixo do nome. Sobrepõe as regras antigas. */
#avaliacoes .pp-eyebrow { color: var(--pp-ico); margin-bottom: 6px; } /* mesma cor e respiro do coração de "Por que você vai amar" */
.pp-av-placar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 0; }
.pp-av-placar-nota { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--cor-escura); }
.pp-av-placar-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 12px; border-left: 1px solid var(--cor-linha); font-size: 13.5px; color: var(--cor-cinza); text-align: left; }
.pp-av-placar-info .pp-stars .pp-ico { width: 17px; height: 17px; }
#avaliacoes .pp-av-faixa { margin-top: 22px; }
#avaliacoes .pp-av-lista { display: grid; gap: 12px; margin-top: 22px; }
#avaliacoes .pp-av-card { padding: 18px 16px; background: #fff; border: 1px solid var(--cor-linha); border-radius: 16px; box-shadow: none; }
#avaliacoes .pp-av-card:first-child { border-top: 1px solid var(--cor-linha); }
#avaliacoes .pp-av-pessoa { gap: 12px; margin-bottom: 12px; }
#avaliacoes .pp-av-avatar { flex: 0 0 40px; width: 40px; height: 40px; font-size: 16px; background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
#avaliacoes .pp-av-quem { gap: 3px; }
#avaliacoes .pp-av-nome { font-size: 15px; font-weight: 700; color: var(--cor-escura); }
.pp-av-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.pp-av-verif { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--cor-principal-escura); }
.pp-av-verif .pp-ico { width: 13px; height: 13px; stroke-width: 3; }
#avaliacoes .pp-av-cidade { display: inline; margin: 0; font-size: 12.5px; }
#avaliacoes .pp-av-card > .pp-stars .pp-ico { width: 15px; height: 15px; }
#avaliacoes .pp-av-texto { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--cor-texto-2); }
#avaliacoes .pp-av-vermais { margin-top: 14px; padding: 13px 16px; border: 1.5px solid var(--cor-linha-forte); border-radius: 12px; background: transparent; font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-ck-seguro { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: left; color: var(--pp-green); }
.pp-ck-seguro .pp-ico { flex: 0 0 auto; width: 14px; height: 14px; stroke-width: 2.2; }
/* Checkout: "Seu pedido" sem caixa (igual à tela do Pix). O card branco é do bundle
   e envolve o PpResumoPedido; os outros cards do checkout seguem com caixa. */
.pp-page .bg-white:has(> .pp-resumo) { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0 0; }
/* Código expirado: botão para gerar outro (leva ao checkout já preenchido). */
.pp-page .pp-pix-novo { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; }
.pp-pix-novo .pp-ico { width: 18px; height: 18px; }
/* WhatsApp do rodapé e do menu (09/10/2026): o mesmo texto ("Fale pelo WhatsApp") e
   o logo do WhatsApp em branco, sem o círculo verde (o desenho ficava espremido dentro
   dele). Mesmo estilo dos outros ícones brancos do atendimento (e-mail, relógio). */
.pp-rod-atend .pp-ico-whats,
.pp-menu-atendimento .pp-ico-whats { box-sizing: border-box; width: 17px; height: 17px; padding: 0; border-radius: 0; background: none; color: #fff !important; }
.pp-menu-atendimento a[href*="wa.me"] { font-weight: 600; }
/* Carrinho sem seletor de quantidade (maxQtd 1): o preço continua à direita. */
.pp-cart-linha > .pp-cart-preco:only-child { margin-left: auto; }
/* Carrinho: o brinde aparece como item, abaixo do kit (09/10/2026). Kit com foto de
   88px; o brinde no mesmo visual da landing: faixa verde-clara, foto de 64px. */
.pp-cart-item .pp-cart-foto { width: 88px; height: 88px; }
.pp-cart-item .pp-cart-nome { font-size: 14px; }
.pp-cart-item.is-brinde { align-items: center; margin: 12px 0 6px; padding: 11px 12px; background: var(--pp-accent-soft); border: 0; border-radius: 14px; }
.pp-cart-item.is-brinde .pp-cart-foto { width: 64px; height: 64px; border: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--pp-accent); }
.pp-cart-item.is-brinde .pp-cart-linha { margin-top: 4px; }
.pp-cart-brinde-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--pp-green); }
.pp-cart-brinde-tag .pp-ico { width: 14px; height: 14px; }
/* Fotos de clientes na faixa das avaliações: não são clicáveis (09/10/2026). */
.pp-av-faixa-foto { display: block; cursor: default; }
/* Preço cheio riscado ao lado do preço no Pix em todo lugar (09/10/2026): barra fixa,
   total do carrinho e topo do checkout, igual à página e ao resumo de valores. */
.pp-sticky-price span { margin: 0 0 1px; }
.pp-sticky-price s { font-weight: 500; }
.pp-sticky-price strong small { margin-left: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--pp-green); }
.pp-cart-total-valor { display: inline-flex; align-items: baseline; gap: 8px; }
.pp-cart-total-valor s { font-size: 13px; font-weight: 500; color: var(--pp-muted); }
.pp-cart-total-valor small { margin-left: 4px; }
/* "no Pix" do carrinho (linha do item e total) verde e no mesmo peso do resto da loja (16/10/2026) */
.pp-cart-preco small, .pp-cart-soma.is-total .pp-cart-total-valor small { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--cor-principal-escura); }
.pp-cart-preco strong { white-space: nowrap; } /* "R$ 60,00 no Pix" numa linha só */
/* Linha do kit (17/10/2026): "R$ 120,00 R$ 60,00 no Pix" lado a lado, abaixo do nome */
.pp-cart-preco.is-de-por { flex-direction: row; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; }
.pp-cart-preco.is-de-por s { font-size: 12.5px; }
.pp-cart-item:not(.is-brinde) .pp-cart-info > .pp-cart-linha { justify-content: flex-start; margin-top: 4px; }
.pp-resumo-valor { display: inline-flex; align-items: baseline; gap: 8px; }
.pp-resumo-valor s { font-size: 12.5px; font-weight: 500; color: var(--pp-muted); }
.pp-resumo-valor small { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--cor-principal-escura); } /* "no Pix", verde como no resto da loja */

/* ============================================================================
   TESTE VISUAL DA LANDING (09/10/2026) — NÃO É DEFINITIVO
   Mesmo estilo da seção de avaliações em toda a landing: títulos de seção
   centralizados (sem a barra lateral), conteúdo em cards brancos de canto 16px,
   sem "caixa dentro de caixa" no bloco de compra. Só aparência: nenhum texto muda.
   Tudo limitado à landing (.pp-main): checkout e tela do Pix não mudam.
   PARA DESFAZER: apagar daqui até "FIM DO TESTE VISUAL", ou restaurar o
   tema-casa.css de versoes-antigas/antes-visual-lp-2026-10-09/.
   ========================================================================== */
/* Faixa verde do topo: texto todo em MAIÚSCULAS, peso normal (não negrito),
   com um leve espaçamento entre as letras. A velocidade segue a mesma (o site
   recalcula a duração pela largura do texto). */
.pp-promo.is-loop .pp-promo-item,
.pp-promo.is-fixa .pp-promo-item { text-transform: uppercase; font-weight: 400; font-size: 11.5px; letter-spacing: .06em; }

/* Menu: só o ícone da casa (logo-icone.png) no lugar da logo completa. O PNG tem
   fundo branco; "multiply" faz o branco sumir no fundo bege do menu. */
.pp-menu-logo.is-icone { height: 56px; width: 56px; margin: -13px 0 -13px -10px; mix-blend-mode: multiply; }

/* Rodapé: só a casa, centralizada, do mesmo tamanho da casa do ícone do menu
   (~43 × 35px). Usa a mesma logo clara (branca pelo filtro do rodapé), recortada
   na parte da casa (os primeiros ~25% da largura da imagem). */
.pp-rod-logo { width: 43px; height: 36px; object-fit: cover; object-position: left center; }

/* Títulos: todos centralizados, sem a barra cinza à esquerda */
.pp-main .pp-sec-head { text-align: center; }
.pp-main .pp-sec-head:not(.is-center) .pp-h2 { justify-content: center; }
.pp-main .pp-sec-head:not(.is-center) .pp-h2::before { display: none; }
.pp-main .pp-sec-head { margin-bottom: 18px; }

/* Bloco de compra: o preço segue na caixa bege com borda, como antes (Luan quer o
   destaque); o brinde fica sem borda. */
.pp-main .pp-brinde { border: 0; border-radius: 12px; }
.pp-main .pp-trust3 .pp-ico { color: var(--cor-principal); }

/* Por que você vai amar: foto e benefícios como antes (foto de ponta a ponta, sem card). */

/* Oferta do meio da página: mesmo canto dos outros cards */
.pp-main .pp-offer { border-radius: 16px; box-shadow: none; }
/* Oferta do meio como RESUMO DO PEDIDO: foto das 5 toalhas no topo do card, lista
   "O que vem no seu pedido", preço numa faixa bege (igual à do topo), botão e contador. */
.pp-main .pp-offer.is-resumo { padding: 0; overflow: hidden; text-align: left; }
.pp-offer-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; }
.pp-offer-corpo { padding: 20px 18px 18px; }
.pp-offer-tit { margin: 0 0 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-escura); }
.pp-offer-lista { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.pp-offer-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--cor-texto-2); }
.pp-offer-lista .pp-ico { flex: 0 0 auto; width: 20px; height: 20px; padding: 3px; margin-top: 0; border-radius: 99px; background: var(--cor-principal-clara); color: var(--cor-principal-escura); stroke-width: 3; }
.pp-offer.is-resumo .pp-offer-valor { margin: 18px 0 14px; padding: 14px 16px; text-align: center; background: var(--cor-fundo, #f7f6f2); border: 1px solid var(--cor-linha); border-radius: 14px; }
.pp-offer.is-resumo .pp-offer-sub { margin: 6px 0 0; }
.pp-offer.is-resumo .pp-offer-old { justify-content: center; }
/* Especificações e Dúvidas continuam soltas (sem card), como antes do teste. */
/* Pedido no carrinho, no checkout e na tela do Pix: o mesmo desenho, encolhendo
   conforme a pessoa avança. Kit sempre maior; brinde ≈ ¾ do kit, na faixa
   verde-clara da landing com 🎁 "Brinde grátis". Nome 14px e linha de baixo 12,5px.
   Carrinho: kit 88 / brinde 64 (regras do carrinho). Checkout: 64 / 48. Pix: 52 / 40. */
.pp-cart-brinde-tag, .pp-cart-item .pp-cart-cor { font-size: 12.5px; }
.pp-resumo-lista li > .pp-resumo-foto { width: 64px; height: 64px; }
.pp-resumo-lista li.pp-resumo-brinde { padding: 10px 12px; background: var(--pp-accent-soft); border-radius: 14px; }
.pp-resumo-lista li.pp-resumo-brinde > .pp-resumo-foto { width: 48px; height: 48px; border: 0; border-radius: 10px; }
.pp-resumo-txt strong { font-size: 14px; white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.pp-resumo-txt span { font-size: 12.5px; }
.pp-resumo-brinde .pp-resumo-txt span { display: inline-flex; align-items: center; gap: 5px; }
.pp-resumo-brinde .pp-resumo-txt span .pp-ico { width: 14px; height: 14px; }
.pp-pix-produto li:not(.is-brinde) .pp-pix-prod-foto { width: 52px; height: 52px; }
.pp-pix-produto li.is-brinde { padding: 8px 10px; background: var(--pp-accent-soft); border-radius: 12px; }
.pp-pix-produto li.is-brinde .pp-pix-prod-foto { width: 40px; height: 40px; border: 0; border-radius: 9px; }
.pp-pix-prod-txt strong { font-size: 14px; }
.pp-pix-prod-txt span { font-size: 12.5px; }
.pp-pix-produto .is-brinde .pp-pix-prod-txt span { display: inline-flex; align-items: center; gap: 5px; }
.pp-pix-produto .is-brinde .pp-pix-prod-txt span .pp-ico { width: 14px; height: 14px; }
/* Comparação "Kit Folha × Toalha velha" (depois das Especificações): card branco,
   cabeçalho cinza-claro, nossa coluna em verde, ✓ verde e ✕ vermelho em círculos. */
.pp-cmp { overflow: hidden; background: #fff; border: 1px solid var(--cor-linha); border-radius: 16px; }
.pp-cmp-linha { display: grid; grid-template-columns: 1fr 76px 76px; align-items: center; gap: 4px; padding: 13px 14px 13px 16px; border-top: 1px solid var(--cor-linha); font-size: 14.5px; line-height: 1.35; color: var(--cor-texto-2); }
.pp-cmp-linha > span:not(:first-child) { display: flex; justify-content: center; text-align: center; }
.pp-cmp-linha.is-cabeca { border-top: 0; padding-top: 12px; padding-bottom: 12px; background: #f4f3ef; font-size: 13px; font-weight: 700; color: var(--cor-cinza); }
.pp-cmp-linha.is-cabeca > span:first-child { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.pp-cmp-linha.is-cabeca .is-nosso { color: var(--cor-principal-escura); font-weight: 800; }
.pp-cmp-marca { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 99px; }
.pp-cmp-marca .pp-ico { width: 14px; height: 14px; stroke-width: 3; }
.pp-cmp-marca.is-sim { background: #dcf3e6; color: #1f9d55; }
.pp-cmp-marca.is-nao { background: #fde4e4; color: #d93636; }
/* ============================ FIM DO TESTE VISUAL ========================== */

/* 13/10/2026 (pedido do Luan): carrossel de ponta a ponta. A foto da fachada
   ("Conheça a Casa da Gente", regras de .pp-loja-foto lá em cima) e a de
   "Por que você vai amar" ficam em caixa: margem de 16px, cantos de 18px e sombra leve. */
.pp-ben-fotos { margin-left: 0; margin-right: 0; }
.pp-ben-fotos .pp-foto-secao, .pp-ben-fotos .pp-foto-vaga { border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }


/* ============================================================================
   LOJA COM VITRINE (TESTE 16/10/2026) — loja-vitrine.js, classes "pp-lv-*".
   Página inicial com boas-vindas e categorias, grade de categoria/busca e a
   página de produto simples (igual para todos) com barra fixa Adicionar/Comprar.
   Mesma paleta do site (--cor-*). Desfazer = apagar este bloco + loja-vitrine.js
   (ver o comentário no topo dele).
   ========================================================================== */
.pp-lv-corpo { display: block; }

/* Faixa do topo: uma frase por vez (a nova sobe de baixo esmaecendo, ~0,45 s) */
.pp-lv-topo { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; overflow: hidden; background: var(--cor-principal); color: #fff; }
.pp-lv-topo-frase {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: pp-lv-topo-entra .45s cubic-bezier(.22, 1, .36, 1) both;
}
.pp-lv-topo-frase .pp-ico { flex: 0 0 auto; width: 15px; height: 15px; }
.pp-lv-topo-frase strong { font-weight: 800; color: #fff; }
.pp-lv-topo-frase span { font-weight: 500; color: var(--cor-principal-linha); }
@keyframes pp-lv-topo-entra {
  from { opacity: 0; transform: translateY(70%); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-lv-topo-frase { animation: none; } }
.pp-lv-main { max-width: 480px; margin: 0 auto; }
.pp-lv a { color: inherit; text-decoration: none; }

/* Topo: logo | busca | rastreio | carrinho */
.pp-lv-head { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; }
.pp-lv-head-vao { flex: 1 1 auto; } /* página do produto: sem busca, o vão empurra os ícones para a direita */
.pp-header-in .pp-lv-head .pp-lv-logo { margin: 0 4px 0 6px; flex: 0 0 auto; }
.pp-lv-logo .pp-logo-img { height: 36px; } /* 36px: a casinha fica do MESMO tamanho da do rodapé (.pp-rod-logo, 36px de altura) — pedido do Luan */
.pp-lv-busca {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin: 0 2px 0 4px;
  padding: 0 12px;
  border: 1px solid var(--cor-linha);
  border-radius: 999px;
  background: var(--cor-caixa);
  color: var(--cor-cinza);
}
.pp-lv-busca:focus-within { border-color: var(--cor-principal); }
.pp-lv-busca .pp-ico { flex: 0 0 auto; width: 16px; height: 16px; }
.pp-lv-busca input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px; /* 16px: o iPhone não dá zoom ao tocar */
  color: var(--cor-escura);
}
.pp-lv-busca input::placeholder { color: var(--cor-cinza); }
.pp-lv-busca input::-webkit-search-cancel-button { display: none; }
.pp-lv-head .pp-icon-btn { flex: 0 0 auto; width: 40px; height: 40px; }
/* Logo de 36px: em tela estreita os ícones e a busca ficam mais justos para "Buscar" caber */
@media (max-width: 400px) {
  .pp-lv-head .pp-icon-btn { width: 34px; }
  .pp-lv-busca { padding: 0 8px; gap: 5px; margin-left: 2px; }
  .pp-header-in .pp-lv-head .pp-lv-logo { margin-right: 2px; }
}
.pp-lv-head .pp-icon-btn .pp-ico { width: 22px; height: 22px; }

/* Categorias em pílulas */
.pp-lv-chips {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 4px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.pp-lv-chips::-webkit-scrollbar { display: none; }
.pp-lv-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--cor-linha);
  border-radius: 999px;
  background: var(--cor-caixa);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cor-texto-2);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pp-lv-chip .pp-ico { width: 16px; height: 16px; }
.pp-lv-chip.is-on { background: var(--cor-principal-escura); border-color: var(--cor-principal-escura); color: #fff; }

/* Boas-vindas */
.pp-lv-hero {
  margin: 12px 16px 0;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--cor-principal) 0%, var(--cor-principal-escura) 55%, #07524d 100%);
  color: #fff;
  box-shadow: 0 14px 30px -18px rgba(10, 110, 103, .8);
}
.pp-lv-hero-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 12.5px;
  font-weight: 700;
}
.pp-lv-hero-selo .pp-ico { width: 14px; height: 14px; color: #ffd36b; }
.pp-lv-hero-tit { margin: 14px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.pp-lv-hero-txt { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.pp-lv-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.pp-lv-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: 12.5px;
  font-weight: 600;
}
.pp-lv-hero-chips .pp-ico { width: 14px; height: 14px; }

/* Faixa de promoção */
.pp-lv-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 16px 0;
  padding: 0;
  color: var(--cor-principal-escura);
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
}
.pp-lv-promo svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* Prateleira de uma categoria (página inicial) */
.pp-lv-cat { margin-top: 26px; }
.pp-lv-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; }
.pp-lv-cat-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-escura); }
.pp-lv-cat-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--cor-principal-clara);
  color: var(--cor-principal-escura);
}
.pp-lv-cat-ico .pp-ico { width: 17px; height: 17px; }
.pp-lv-ver { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 700; color: var(--cor-principal-escura) !important; }
.pp-lv-ver .pp-ico { width: 15px; height: 15px; }
.pp-lv-trilho {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 16px 4px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.pp-lv-trilho::-webkit-scrollbar { display: none; }
.pp-lv-trilho > * { flex: 0 0 44%; max-width: 200px; scroll-snap-align: start; }

/* Card de produto */
.pp-lv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--cor-linha);
  border-radius: 16px;
  background: var(--cor-caixa);
}
.pp-lv-card-link { display: flex; flex-direction: column; flex: 1 1 auto; padding-bottom: 2px; }
.pp-lv-card-foto { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--cor-fundo); }
.pp-lv-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-lv-off {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--cor-desconto);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
.pp-lv-card-foto .pp-lv-off { position: absolute; top: 8px; right: 8px; }
.pp-lv-card-nome {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--cor-escura);
}
.pp-lv-card-nota { display: flex; align-items: center; gap: 4px; margin: 5px 10px 0; font-size: 11.5px; color: var(--cor-cinza); }
.pp-lv-card-nota .pp-stars .pp-ico { width: 12px; height: 12px; }
.pp-lv-card-preco { display: flex; flex-direction: column; margin: 6px 10px 0; line-height: 1.2; }
.pp-lv-card-preco s { font-size: 12px; color: var(--cor-cinza); }
.pp-lv-card-preco strong { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-escura); }
.pp-lv-card-preco small { font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--cor-principal-escura); }
.pp-lv-card-frete { margin: 3px 10px 0; font-size: 11.5px; font-weight: 700; color: var(--cor-principal-escura); }
.pp-lv-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  margin: 10px;
  border-radius: 10px;
  background: var(--cor-principal);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.pp-lv-card-btn .pp-ico { width: 15px; height: 15px; }
.pp-lv-card-btn.is-off { background: var(--cor-linha); color: var(--cor-cinza); }

/* Espaço reservado para os próximos produtos */
.pp-lv-vaga {
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 230px;
  padding: 16px;
  border: 1.5px dashed var(--cor-linha-forte);
  background: transparent;
  text-align: center;
  color: var(--cor-cinza);
}
.pp-lv-vaga-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--cor-caixa);
  border: 1px solid var(--cor-linha);
}
.pp-lv-vaga-ico .pp-ico { width: 22px; height: 22px; }
.pp-lv-vaga strong { font-size: 14px; color: var(--cor-texto-2); }
.pp-lv-vaga span:last-child { font-size: 12px; }

/* Categoria e busca: título + grade de 2 colunas */
.pp-lv-lista-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; margin: 0; padding: 18px 16px 12px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-escura); }
.pp-lv-lista-tit small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--cor-cinza); }
.pp-lv-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.pp-lv-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 16px 0;
  padding: 34px 20px;
  text-align: center;
  color: var(--cor-cinza);
}
.pp-lv-vazio > .pp-ico { width: 34px; height: 34px; margin-bottom: 4px; color: var(--cor-linha-forte); }
.pp-lv-vazio strong { font-size: 15.5px; color: var(--cor-escura); }
.pp-lv-vazio span { font-size: 13.5px; }
.pp-lv-vazio-link { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--cor-principal-escura) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* Garantias antes do rodapé: soltas na página, sem caixa (pedido do Luan) */
.pp-lv-garantias {
  list-style: none;
  max-width: 448px;
  margin: 28px auto 0;
  padding: 0;
}
@media (max-width: 480px) { .pp-lv-garantias { margin-left: 16px; margin-right: 16px; } }
.pp-lv-garantias li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--cor-linha); }
.pp-lv-garantias li:last-child { border-bottom: 0; }
.pp-lv-garantias .pp-ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--cor-principal); }
.pp-lv-garantias strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-lv-garantias small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--cor-cinza); }
.pp-lv .pp-footer.pp-rod { margin-top: 28px; }
/* Rodapé do checkout e das telas de pagamento = o da página /rastreio (institucional.css .inst-rodape) */
.cdg-footer.is-simples { margin-top: 32px; padding: 22px 16px; border-top: 1px solid var(--cor-linha); background: var(--cor-fundo); color: var(--cor-cinza); text-align: center; font-size: 13px; }
/* 21/10/2026: CNPJ e direitos no mesmo tamanho do rodapé da landing (.pp-rod4-legal: 11,5px) */
.pp-page .cdg-footer.is-simples p, .cdg-footer.is-simples p { margin: 0; font-size: 11.5px; line-height: 1.6; }
/* Rodapé do checkout: a mesma logo branca do rodapé da loja, com o mesmo respiro até o CNPJ */
.cdg-footer-in .cdg-footer-logo { margin: 8px auto 14px; }
/* Os dois rodapés (loja e checkout) com o mesmo texto: 12px, branco, mesmo respiro da logo */
.cdg-footer-empresa { font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .88); opacity: 1; }
.pp-rod .pp-rod-logo { margin-bottom: 14px; }
.pp-rod-legal.is-so p + p, .cdg-footer-empresa + .cdg-footer-empresa { margin-top: 0; }
/* WhatsApp no rodapé, abaixo da logo: logo original (círculo verde #25D366) + texto branco, sem fundo */
.pp-rod-whats-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: #fff !important; font-size: 14.5px; font-weight: 700; text-decoration: none !important; }
.pp-rod-whats-logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 99px; background: #25d366; color: #fff; }
.pp-rod-whats-logo .pp-rod-whats-svg { width: 20px; height: 20px; }
/* Rodapé só com a logo, o CNPJ e o © (16/10/2026): sem o fio, perto da logo e legível no verde */
.pp-rod-legal.is-so { margin-top: 14px; padding-top: 0; border-top: 0; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
/* Loja nova: o rodapé não precisa da folga de 92px da landing antiga (a página do
   produto já reserva o espaço da barra fixa em .pp-lv.is-produto). */
.pp-lv .pp-rod-escuro .pp-rod-in { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
/* Rodapé da loja (16/10/2026, pedido do Luan): logo, CNPJ e © CENTRALIZADOS; só as abas
   "Atendimento ao cliente" e "Institucional" alinhadas à ESQUERDA (margem de 16px). */
.pp-lv .pp-footer.pp-rod { text-align: center; }
.pp-lv .pp-rod-escuro .pp-rod-in { padding-left: 16px; padding-right: 16px; }
/* Na PÁGINA DO PRODUTO o rodapé inteiro fica à esquerda (logo, abas, CNPJ e ©), na margem de 16px */
.pp-lv.is-produto .pp-footer.pp-rod { text-align: left; }
.pp-lv.is-produto .pp-rod-logo { margin-left: 0; margin-right: 0; }
.pp-lv .pp-rod-atend { justify-items: start; }
.pp-lv .pp-rod-atend li { align-items: flex-start; }
.pp-lv .pp-rod-atend .pp-ico { margin-top: 1px; }
/* Abas clicáveis do rodapé: "Atendimento ao cliente" e "Institucional" (fechadas por padrão) */
.pp-rod-aba { border-top: 1px solid rgba(255, 255, 255, .25); text-align: left; }
.pp-rod-aba:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.pp-rod-aba summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pp-rod-aba summary::-webkit-details-marker { display: none; }
.pp-rod-aba-seta { width: 18px; height: 18px; color: #fff; transition: transform .2s ease; }
.pp-rod-aba[open] .pp-rod-aba-seta { transform: rotate(180deg); }
.pp-rod-aba .pp-rod-atend { justify-items: start; padding-bottom: 14px; }
.pp-rod-inst { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0 0 14px; }
.pp-rod-inst button { padding: 0; font-size: 13px; font-weight: 500; color: #fff; text-align: left; }
.pp-rod-inst button:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-rod-aba + .pp-rod-legal { margin-top: 16px; padding-top: 0; border-top: 0; }
/* 17/10/2026: blocos sempre abertos (sem clicar): título fixo, conteúdo à vista */
.pp-rod-aba-tit { margin: 0; padding: 14px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pp-rod-aba.is-ultima { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.pp-lv.is-produto .pp-rod-escuro .pp-rod-in { padding-bottom: 24px; }
/* 17/10/2026 (pedido do Luan): rodapé da loja TODO CENTRALIZADO (logo, títulos,
   atendimento, institucionais, CNPJ e ©). Vale também na página do produto. */
.pp-lv .pp-footer.pp-rod,
.pp-lv.is-produto .pp-footer.pp-rod,
.pp-lv .pp-rod-aba { text-align: center; }
.pp-lv .pp-rod-logo,
.pp-lv.is-produto .pp-rod-logo { margin-left: auto; margin-right: auto; }
.pp-lv .pp-rod-atend,
.pp-lv .pp-rod-aba .pp-rod-atend { justify-items: center; }
.pp-lv .pp-rod-atend li { align-items: center; justify-content: center; text-align: center; }
.pp-lv .pp-rod-inst { justify-items: center; }
/* 17/10/2026: institucionais 2 por fileira (Quem Somos | Trocas / Termos | Privacidade) */
.pp-lv .pp-rod-inst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; max-width: 360px; margin: 0 auto; }
/* Aba "Institucional" (clicável) centralizada: título no meio com a seta ao lado */
.pp-lv .pp-rod-aba summary { justify-content: center; gap: 6px; }
.pp-lv .pp-rod-aba[open] summary { padding-bottom: 10px; }
.pp-lv .pp-rod-inst button { text-align: center; }

/* ---------- Página do produto ---------- */
.pp-lv.is-produto { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.pp-lv-trilha { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; font-size: 13px; color: var(--cor-cinza); white-space: nowrap; overflow: hidden; }
.pp-lv-trilha a { flex: 0 0 auto; }
.pp-lv-trilha a:hover { text-decoration: underline; }
.pp-lv-trilha .pp-ico { flex: 0 0 auto; width: 13px; height: 13px; }
.pp-lv-trilha span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--cor-escura); }
.pp-lv-trilha + .pp-lv-linha-topo { margin-top: 12px; }
/* "Novo | +5.000 vendidos": pequeno e cinza, com um fio separando as partes */
.pp-lv-linha-topo { display: flex; align-items: center; margin: 10px 16px 0; font-size: 12px; color: var(--cor-cinza); }
.pp-lv-linha-topo span + span::before { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 8px; vertical-align: -1px; background: var(--cor-linha-forte); }
.pp-lv-linha-topo + .pp-lv-titulo { padding-top: 4px; }
.pp-lv-titulo { margin: 0; padding: 10px 16px 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.025em; color: var(--cor-escura); text-wrap: balance; }
.pp-lv-nota { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 0; font-size: 13px; color: var(--cor-cinza); }
.pp-lv-nota strong { color: var(--cor-principal-escura); } /* mesma cor da nota grande das opiniões */
.pp-lv-nota .pp-stars .pp-ico { width: 14px; height: 14px; }

/* Carrossel de ponta a ponta, sem caixa (sem cantos nem sombra), a pedido do Luan */
.pp-lv-gal { margin: 14px 0 0; }
.pp-lv-gal-palco {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain; /* deslizar a foto não puxa a página nem o "voltar" do navegador */
}
.pp-lv-gal-palco::-webkit-scrollbar { display: none; }
.pp-lv-gal-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; scroll-snap-stop: always; } /* 17/10/2026: "always" = um deslize passa UMA foto só (antes um deslize rápido pulava da 1ª para a 3ª) */
.pp-lv-gal-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
/* Sem miniaturas: só as bolinhas da foto atual */
.pp-lv-gal-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.pp-lv-gal-ponto { width: 7px; height: 7px; padding: 0; border-radius: 99px; background: var(--cor-linha-forte); transition: width .2s ease, background-color .2s ease; }
.pp-lv-gal-ponto.is-on { width: 20px; background: var(--cor-principal); }

.pp-lv-preco { margin: 18px 16px 0; }
.pp-lv-preco p { margin: 0; }
.pp-lv-preco-de { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cor-cinza); }
.pp-lv-preco-por { display: flex; align-items: baseline; gap: 6px; margin-top: 2px !important; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--cor-escura); }
.pp-lv-preco-por small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--cor-principal-escura); }
.pp-lv-preco-sub { margin-top: 4px !important; font-size: 13px; color: var(--cor-texto-2); }
.pp-lv-preco-frete { display: flex; align-items: center; gap: 6px; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--cor-linha); font-size: 13.5px; font-weight: 700; color: var(--cor-principal-escura); }
.pp-lv-preco-frete .pp-ico { width: 17px; height: 17px; }
.pp-lv-produto .pp-brinde { margin: 14px 16px 0; border: 0; border-radius: 12px; }

/* Seções: respiro maior entre elas (títulos sem barrinha, como o Luan prefere) */
.pp-lv-sec { padding: 36px 16px 0; scroll-margin-top: 70px; }
.pp-lv-h2 { margin: 0 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-escura); }

/* Card padrão (descrição e opiniões): branco, fio leve e sombra bem suave */
.pp-lv-caixa {
  padding: 18px;
  border: 1px solid var(--cor-linha);
  border-radius: 16px;
  background: var(--cor-caixa);
  box-shadow: 0 1px 2px rgba(22, 22, 22, .04), 0 12px 26px -22px rgba(22, 22, 22, .3);
}
.pp-lv-desc p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--cor-texto-2); }
.pp-lv-desc p + p { margin-top: 12px; }
/* Texto curto acima da foto de "Por que você vai amar": estilo da landing (.pp-ben-intro, centralizado), só o respiro antes da foto */
.pp-lv-desc-intro { margin-bottom: 18px; }
#descricao .pp-sec-head { margin-bottom: 12px; }
/* Foto de "Por que você vai amar": de ponta a ponta, sem caixa */
/* 16/10/2026: um pouco menor e com cantos arredondados, dentro das margens (antes de ponta a ponta) */
.pp-lv-desc-foto { margin: 0 0 20px; }
.pp-lv-desc-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
/* 17/10/2026: foto do detalhe da barra dentro de "Especificações" (mesmo cantos da foto de cima) */
.pp-lv-ficha-foto { margin: 0 0 16px; }
.pp-lv-ficha-foto img { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; }
/* "Por que você vai amar" (16/10/2026, lista do Luan): grade 2×2 de cartões brancos,
   borda clara 1px, cantos 12px, padding 16px, conteúdo centralizado; ícone num círculo
   verde-claro de 40px e título em negrito (até 2 linhas). Gap de 12px. */
.pp-lv-cartoes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2px 0 0; padding: 0; }
.pp-lv-cartao { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--cor-linha); border-radius: 12px; background: var(--cor-caixa); text-align: center; }
.pp-lv-cartao-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 99px; background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
.pp-lv-cartao-ico .pp-ico { width: 20px; height: 20px; }
.pp-lv-cartao strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--cor-escura); }
/* Avaliações como conversa (16/10/2026, pedido do Luan): fundo bege de chat com textura
   leve (CSS próprio, não é o papel de parede do WhatsApp) e balões brancos com bico. */
.pp-lv-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 -16px; padding: 16px 12px 18px; background-color: #efeae2; background-image: radial-gradient(rgba(84, 70, 50, .07) 1.2px, transparent 1.6px); background-size: 18px 18px; text-align: left; }
.pp-lv-balao { position: relative; max-width: 88%; padding: 6px 10px 8px; border-radius: 0 10px 10px 10px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.pp-lv-balao::before { content: ""; position: absolute; top: 0; left: -8px; border-top: 0 solid transparent; border-right: 8px solid #fff; border-bottom: 10px solid transparent; }
.pp-lv-balao-quem { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 2px; font-size: 13px; }
.pp-lv-balao-quem strong { font-weight: 700; }
.pp-lv-balao-quem .pp-stars .pp-ico { width: 11px; height: 11px; }
.pp-lv-balao-quem.cor-0 strong { color: #0a6e67; }
.pp-lv-balao-quem.cor-1 strong { color: #c2185b; }
.pp-lv-balao-quem.cor-2 strong { color: #6a4fbf; }
.pp-lv-balao-quem.cor-3 strong { color: #b26a00; }
.pp-lv-balao-quem.cor-4 strong { color: #1565c0; }
.pp-lv-balao-texto { margin: 0; font-size: 14.5px; line-height: 1.45; color: #111b21; }
.pp-lv-balao-sub { margin: 4px 0 0; font-size: 11px; text-align: right; color: #667781; }
/* Descrição de landing (16/10/2026): benefícios em lista (ícone em círculo verde-claro +
   título + 1 linha), ficha técnica em linhas e nota de cuidado. Sem caixas pesadas. */
/* Tamanhos na escala de "Quem comprou, aprovou" (título 19px, texto 14–14,5px), a pedido do Luan */
.pp-lv-beneficios { list-style: none; display: grid; gap: 14px; margin: 4px 0 0; padding: 0; text-align: left; }
.pp-lv-beneficios li { display: flex; align-items: flex-start; gap: 12px; }
.pp-lv-beneficio-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 99px; background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
.pp-lv-beneficio-ico .pp-ico { width: 18px; height: 18px; }
.pp-lv-beneficio-txt { display: flex; flex-direction: column; gap: 1px; }
.pp-lv-beneficio-txt strong { font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-lv-beneficio-txt span { font-size: 13.5px; line-height: 1.45; color: var(--cor-texto-2); }
.pp-lv-ficha { margin-top: 32px; text-align: left; }
.pp-lv-ficha h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
/* "Especificações" como seção própria (16/10/2026): título centralizado igual aos outros */
.pp-lv-ficha > h2.pp-lv-h2 { text-align: center; margin-bottom: 12px; }
#descricao .pp-lv-ficha-nota { justify-content: center; text-align: center; }
.pp-lv-ficha dl { margin: 0; border-top: 1px solid var(--cor-linha); }
.pp-lv-ficha dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--cor-linha); font-size: 13.5px; }
.pp-lv-ficha dt { color: var(--cor-cinza); }
.pp-lv-ficha dd { margin: 0; font-weight: 600; text-align: right; color: var(--cor-escura); }
.pp-lv-ficha-nota { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--cor-cinza); text-align: left; }
#descricao .pp-ben-intro { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; }
/* 17/10/2026 (modelo do Luan): ícone pequeno acima do título, texto de abertura mais
   leve e lista de 6 benefícios mais compacta (círculo 30px, título 14px, texto 13px). */
.pp-lv-desc-icone { display: flex; justify-content: center; margin: 0 0 4px; color: var(--cor-escura); }
.pp-lv-desc-icone .pp-ico { width: 18px; height: 18px; }
#descricao .pp-ben-intro { font-size: 14px; line-height: 1.6; color: var(--cor-texto-2); }
#descricao .pp-lv-beneficios { gap: 16px; }
#descricao .pp-lv-beneficio-ico { width: 30px; height: 30px; }
#descricao .pp-lv-beneficio-ico .pp-ico { width: 15px; height: 15px; }
#descricao .pp-lv-beneficio-txt strong { font-size: 14px; }
#descricao .pp-lv-beneficio-txt span { font-size: 13px; line-height: 1.5; }
/* Nota abaixo dos chips: cinza e pequena (mas legível) */
.pp-lv-kit-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--cor-cinza); }
/* "O que vem no kit": título centralizado com a caixinha e os itens em pílulas, sem caixa em volta */
.pp-lv-kit { margin-top: 18px; text-align: center; }
.pp-lv-kit-tit { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--cor-escura); }
.pp-lv-kit-tit .pp-ico { width: 19px; height: 19px; color: var(--cor-principal-escura); }
/* Itens numa linha só, como o Luan escreveu: "✓ 5 toalhas · ✓ 70 × 140 cm · ✓ 300 g cada" (sem fundo) */
.pp-lv-kit ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin: 0; padding: 0; }
.pp-lv-kit li { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 700; color: var(--cor-escura); white-space: nowrap; }
.pp-lv-kit li + li::before { content: "·"; margin: 0 9px; font-weight: 400; color: var(--cor-cinza); }
.pp-lv-kit li .pp-ico { width: 15px; height: 15px; stroke-width: 2.8; color: var(--cor-principal-escura); }
/* Subtítulo ("O que vem no kit") e lista com ✓ dentro da descrição */
.pp-lv-desc-sub { margin: 16px 0 0; font-size: 15px; font-weight: 800; color: var(--cor-escura); } /* sem fio: segue o texto, uma coisa só */
.pp-lv-desc ul { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.pp-lv-desc li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--cor-texto-2); }
.pp-lv-desc li .pp-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--cor-principal-escura); stroke-width: 2.6; }

/* Opiniões (referência do Luan): um card só com título, nota grande na cor da loja,
   um fio e as opiniões em cartões leves (fio fino, sem sombra) */
.pp-lv-op .pp-lv-h2 { margin-bottom: 16px; }
.pp-lv-placar { display: flex; align-items: center; justify-content: center; gap: 14px; padding-bottom: 18px; }
/* Título e nota das opiniões centralizados (pedido do Luan) */
.pp-lv-op > .pp-lv-h2, #descricao > .pp-lv-h2 { text-align: center; }
.pp-lv-placar > strong { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--cor-principal-escura); }
.pp-lv-placar > span { display: flex; flex-direction: column; gap: 4px; }
.pp-lv-placar .pp-stars .pp-ico { width: 20px; height: 20px; }
.pp-lv-placar small { font-size: 13px; color: var(--cor-cinza); }
/* Opiniões direto no card principal (sem caixa própria), separadas pelo mesmo fio de baixo da nota */
/* Só as mensagens ficam numa caixa, uma embaixo da outra separadas por um fio */
.pp-lv-caixa.pp-lv-op-lista { padding-top: 0; padding-bottom: 0; }
.pp-lv-av { padding: 18px 0; }
.pp-lv-av + .pp-lv-av { border-top: 1px solid var(--cor-linha); }
.pp-lv-av-topo { display: flex; align-items: center; gap: 11px; }
.pp-lv-av-inicial {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: var(--cor-principal-clara);
  color: var(--cor-principal-escura);
  font-size: 15px;
  font-weight: 800;
}
.pp-lv-av-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; }
.pp-lv-av-quem strong { font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-lv-av-quem .pp-stars .pp-ico { width: 13px; height: 13px; }
.pp-lv-av-sub { margin: 1px 0 0; font-size: 12px; color: var(--cor-cinza); }
.pp-lv-av-texto { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--cor-texto-2); }
/* Faixa de fotos de clientes em loop, de uma borda da TELA à outra (sem caixa), abaixo da nota */
.pp-lv-av-faixa { overflow: hidden; margin: 0 -16px 22px; }
.pp-lv-av-trilho { display: flex; gap: 8px; width: max-content; animation: pp-lv-av-loop var(--pp-av-dur, 32s) linear infinite; }
@keyframes pp-lv-av-loop { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } } /* metade da trilha + meio gap: emenda sem salto */
.pp-lv-av-faixa:hover .pp-lv-av-trilho,
.pp-lv-av-faixa:active .pp-lv-av-trilho { animation-play-state: paused; }
.pp-lv-av-faixa-foto { flex: 0 0 auto; width: 96px; height: 96px; overflow: hidden; border-radius: 10px; background: var(--cor-linha); }
.pp-lv-av-faixa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .pp-lv-av-faixa { overflow-x: auto; }
  .pp-lv-av-trilho { animation: none; }
}
/* Fotos das opiniões: quadradas e menores (76px), lado a lado */
.pp-lv-av-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pp-lv-av-fotos span { flex: 0 0 auto; width: 76px; height: 76px; overflow: hidden; border-radius: 10px; background: var(--cor-linha); }
.pp-lv-av-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Quantidade (antes do botão) */
.pp-lv-qtd { display: flex; align-items: center; gap: 12px; margin: 18px 16px 0; }
.pp-lv-qtd-rot { font-size: 14px; font-weight: 700; color: var(--cor-escura); }
.pp-lv-qtd .pp-qty { background: var(--cor-caixa); }
.pp-lv-qtd-total { margin-left: auto; font-size: 13px; color: var(--cor-principal-escura); font-weight: 600; }
.pp-lv-qtd-total strong { font-size: 15px; font-weight: 800; color: var(--cor-escura); }

/* Botão "Adicionar ao carrinho" logo depois do brinde */
.pp-lv-produto .pp-cta.pp-lv-cta { width: calc(100% - 32px); margin: 14px 16px 0; }
.pp-lv-cta.is-off { background: var(--cor-linha); color: var(--cor-cinza); box-shadow: none; }
/* 21/10/2026 (modelo do Luan): "Comprar agora" cheio e "Adicionar ao carrinho" claro com contorno */
.pp-lv-ctas { display: grid; gap: 10px; margin: 14px 16px 0; }
.pp-lv-produto .pp-lv-ctas .pp-cta.pp-lv-cta { width: 100%; margin: 0; }
.pp-lv-cta-2 { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--cor-principal); border-radius: 14px; background: rgba(15, 138, 126, .07); font-size: 16px; font-weight: 700; color: var(--cor-principal-escura); cursor: pointer; transition: background .15s; }
.pp-lv-cta-2:hover { background: rgba(15, 138, 126, .13); }
.pp-lv-cta-2 .pp-ico { width: 20px; height: 20px; }
/* Caixa verde-clara de entrega grátis, abaixo do preço */
.pp-lv-entrega { display: flex; align-items: center; gap: 14px; margin: 14px 16px 0; padding: 14px 16px; border-radius: 14px; background: #ecfaf1; }
.pp-lv-entrega .pp-ico { flex: 0 0 auto; width: 24px; height: 24px; stroke-width: 1.7; color: #16a34a; }
.pp-lv-entrega p { margin: 0; display: grid; gap: 2px; line-height: 1.3; }
.pp-lv-entrega strong { font-size: 15.5px; font-weight: 700; color: #16a34a; }
.pp-lv-entrega span { font-size: 13.5px; color: var(--cor-texto-2); }
/* 21/10/2026: "Devolução grátis" e "Compra Garantida" abaixo dos botões de compra */
.pp-lv-garantia-compra { list-style: none; margin: 14px 16px 0; padding: 0; display: grid; gap: 12px; }
.pp-lv-garantia-compra li { display: flex; align-items: center; gap: 12px; }
.pp-lv-garantia-compra .pp-ico { flex: 0 0 auto; width: 20px; height: 20px; stroke-width: 1.8; color: var(--cor-texto-2); }
.pp-lv-garantia-compra p { margin: 0; font-size: 14.5px; line-height: 1.3; color: var(--cor-texto-2); }
.pp-lv-garantia-compra strong { font-weight: 700; color: #16a34a; }
/* Confiança abaixo do botão: compra segura · devolução, e as bandeiras */
/* Abaixo do botão: as 4 garantias lado a lado (ícone em cima, título embaixo, sem caixa) e as bandeiras */
.pp-lv-confianca { margin: 16px 16px 0; text-align: center; }
.pp-lv-garantias.is-linha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: none; margin: 0; }
.pp-lv-garantias.is-linha li { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 0; border: 0; text-align: center; }
/* 16/10/2026: letra mais leve, a pedido do Luan; ícones testados com 28px e voltaram para 22px */
.pp-lv-garantias.is-linha .pp-ico { width: 22px; height: 22px; }
.pp-lv-garantias.is-linha strong { font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--cor-texto-2); }
.pp-lv-confianca .pp-bandeiras { margin-top: 14px; }
/* 17/10/2026 ("fora de esquadro"): 4 colunas exatamente iguais, ícones na mesma linha,
   títulos sempre em 2 linhas (quebra feita no código) e bandeiras centralizadas. */
.pp-lv-garantias.is-linha { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 4px; align-items: start; }
.pp-lv-garantias.is-linha li { align-items: center; gap: 7px; }
.pp-lv-garantias.is-linha li > span { display: block; width: 100%; }
.pp-lv-garantias.is-linha strong { display: block; white-space: nowrap; }
/* 17/10/2026: fios verticais finos separando os 4 selos (pedido do Luan) */
.pp-lv-garantias.is-linha { gap: 0; }
.pp-lv-garantias.is-linha li + li { border-left: 1px solid var(--cor-linha); }
.pp-lv-confianca .pp-bandeiras { justify-content: center; gap: 8px; margin-top: 16px; }
/* 17/10/2026: mais respiro entre o botão "Adicionar ao carrinho" e os selos (estava colado) */
.pp-lv-confianca { margin-top: 26px; }
/* Mesmo respiro (proporcional) entre os selos e as bandeiras do cartão */
.pp-lv-confianca .pp-bandeiras { margin-top: 26px; }

/* Barra fixa do produto: preço | Adicionar. Só aparece com o botão principal fora da tela. */
.pp-lv-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--cor-caixa);
  border-top: 1px solid var(--cor-linha);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .18);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform .16s ease-out;
}
.pp-lv-barra.is-on { transform: none; }
.pp-lv-barra-in { max-width: 480px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.pp-lv-barra-preco { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pp-lv-barra-preco s { font-size: 11.5px; color: var(--cor-cinza); }
.pp-lv-barra-preco strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--cor-escura); }
.pp-lv-barra-preco small { font-size: 11.5px; font-weight: 700; letter-spacing: 0; color: var(--cor-principal-escura); }
.pp-lv-barra .pp-cta.pp-lv-btn-barra { flex: 0 0 auto; width: 46%; min-width: 132px; max-width: 230px; min-height: 50px; padding: 0 12px; font-size: 15px; }
.pp-lv-btn-barra.is-off { background: var(--cor-linha); color: var(--cor-cinza); box-shadow: none; }
/* Checkout: foto da fachada no lugar do header (seta de voltar por cima, no canto) */
.pp-ck-fachada { position: relative; max-width: 480px; margin: 0 auto; background: #0d3b37; }
.pp-ck-fachada img { display: block; width: 100%; height: auto; aspect-ratio: 1078 / 356; object-fit: cover; }
.pp-ck-fachada-voltar {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  color: var(--cor-escura);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}
.pp-ck-fachada-voltar .pp-ico { width: 20px; height: 20px; }
/* Tela do Pix (16/10/2026): topo com "Total a pagar" + valor + contador; no fim,
   o card "Seu pedido" no estilo da loja (produto, valor, entrega e contato). */
.pp-pix-total-rot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--cor-texto-2); }
.pp-pix-total-rot img { width: 16px; height: 16px; }
.pp-tela-pix .pp-pix-valor { margin-top: 2px; font-size: 38px; }
/* "Seu pedido" acima do código, SEM caixa (pedido do Luan): só fios finos separando */
.pp-rp { margin: 22px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--cor-linha); text-align: left; }
.pp-rp-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pp-rp-topo h2 { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--cor-escura); }
.pp-rp-topo span { font-size: 11.5px; font-weight: 600; color: var(--cor-cinza); }
.pp-rp-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.pp-rp-item.is-brinde { margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--cor-linha); }
.pp-rp-sem-foto { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
.pp-rp-item-txt small.is-brinde { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--cor-principal-escura); }
.pp-rp-item-txt small.is-brinde .pp-ico { width: 13px; height: 13px; }
.pp-rp-item-valor.is-gratis { color: var(--cor-principal-escura); }
.pp-rp-item img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--cor-fundo); }
.pp-rp-item-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.pp-rp-item-txt strong { font-size: 14px; font-weight: 700; color: var(--cor-escura); }
.pp-rp-item-txt small { font-size: 12.5px; color: var(--cor-cinza); }
.pp-rp-item-valor { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-rp-linha { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 0; font-size: 13.5px; color: var(--cor-texto-2); }
.pp-rp-linha strong { font-weight: 700; color: var(--cor-escura); white-space: nowrap; }
.pp-rp-linha.is-gratis strong { color: var(--cor-principal-escura); }
.pp-rp-linha.is-total { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--cor-linha); font-size: 15px; font-weight: 700; color: var(--cor-escura); }
.pp-rp-linha.is-total strong { font-size: 18px; font-weight: 800; }
.pp-rp-bloco { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cor-linha); }
.pp-rp-bloco p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cor-texto-2); word-break: break-word; }
.pp-rp-bloco .pp-rp-rot { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-principal-escura); }
.pp-rp-bloco .pp-rp-rot .pp-ico { width: 15px; height: 15px; }
.pp-rp-bloco .pp-rp-nome { font-weight: 700; color: var(--cor-escura); }
.pp-rp-bloco + .pp-rp-bloco { margin-top: 12px; padding-top: 12px; }
/* ---------- Tela do Pix v2 (16/10/2026, lista do Luan) ---------- */
/* Faixa do topo fixa: cadeado + "Pagamento seguro via Pix" (sem animação) */
.pp-lv-topo-frase.is-fixa { animation: none; }
/* "Pagamento seguro" em negrito branco e "via Pix" mais fraco: a mesma lógica da faixa das outras páginas */
/* Ritmo compacto: o botão de copiar cabe sem rolar em 375×667 */
.pp-pix-v2 { padding-top: 18px !important; min-width: 0; max-width: 100%; }
/* O código numa linha (sem quebra) não pode esticar a tela: a grade e o card ficam na largura dela */
.pp-tela-pix .pp-pix { grid-template-columns: minmax(0, 1fr); }
.pp-tela-pix .pp-pix > *, .pp-pix-v2 .pp-pix-copia { min-width: 0; max-width: 100%; }
.pp-pix-v2 > * { margin-left: auto; margin-right: auto; }
/* Selo "Aguardando pagamento" com ponto verde pulsando */
.pp-pix-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; padding: 6px 12px; border-radius: 99px; background: var(--cor-principal-clara); color: var(--cor-principal-escura); font-size: 12.5px; font-weight: 700; }
.pp-pix-status.is-fim { background: #fdecea; color: var(--cor-erro); }
.pp-pix-status-ponto { position: relative; width: 8px; height: 8px; border-radius: 99px; background: #16a34a; }
.pp-pix-status-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background: #16a34a; animation: pp-pix-pulso 1.4s ease-out infinite; }
@keyframes pp-pix-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-pix-status-ponto::after { animation: none; } }
.pp-pix-v2 .pp-pix-valor { margin: 8px 0 0; font-size: 38px; }
.pp-pix-v2 .pp-pix-expira { margin-top: 6px; }
.pp-pix-v2 .pp-pix-copia { margin-top: 14px; }
.pp-pix-v2 .pp-pix-copiar { margin: 0; }
/* Código Pix numa linha só, com reticências (tocar copia) */
.pp-pix-v2 .pp-pix-copia .pp-pix-copiar { margin-top: 10px; }
.pp-pix-codigo-linha { display: block; width: 100%; margin-top: 0; padding: 11px 14px; border: 1px dashed var(--cor-linha-forte); border-radius: 12px; background: var(--cor-caixa); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--cor-texto-2); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pix-v2 .pp-pix-codigo { margin-top: 0; }
/* Como pagar: 3 passos curtos, um por linha */
.pp-pix-v2 .pp-pix-passos-tit { margin-top: 22px; }
.pp-pix-passos.is-curtos li { align-items: center; }
.pp-pix-passos.is-curtos li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "A confirmação é automática" */
.pp-pix-auto { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; font-size: 13.5px; font-weight: 600; color: var(--cor-principal-escura); }
.pp-pix-auto .pp-ico { width: 17px; height: 17px; }
/* Accordion "Ver resumo do pedido" (fechado por padrão) */
.pp-pix-resumo { margin-top: 20px; border-top: 1px solid var(--cor-linha); border-bottom: 1px solid var(--cor-linha); text-align: left; }
.pp-pix-resumo summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 2px; list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--cor-escura); }
.pp-pix-resumo summary::-webkit-details-marker { display: none; }
.pp-pix-resumo-seta { width: 18px; height: 18px; color: var(--cor-cinza); transition: transform .2s ease; }
.pp-pix-resumo[open] .pp-pix-resumo-seta { transform: rotate(180deg); }
.pp-pix-resumo .pp-rp { margin: 0 0 14px; padding-top: 0; border-top: 0; }
.pp-rp-num { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--cor-cinza); }
.pp-rp-item.is-brinde { border-bottom: 0; margin-bottom: 0; }
/* Nº do pedido, kit e brinde acima do código (sem caixa); brinde na faixa verde-clara do checkout */
.pp-pix-itens { margin: 16px 0 0 !important; padding: 0; border-top: 0; text-align: left; }
.pp-pix-itens .pp-rp-item { padding: 6px 0; }
.pp-pix-itens .pp-rp-item.is-brinde { margin-top: 6px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--cor-principal-clara); }
.pp-pix-itens .pp-rp-item.is-brinde img { width: 48px; height: 48px; border-radius: 11px; }
.pp-pix-resumo .pp-rp > .pp-rp-linha:first-child { padding-top: 0; }
/* Tela do Pix: o conteúdo ocupa o espaço e o rodapé fica no pé da tela */
.pp-tela-pix .pp-status-main, .pp-tela-pix .pp-pix { flex: 1 0 auto; }
/* WhatsApp no fim da página do produto (depois das avaliações), com o logo original */
.pp-lv-whats { padding-top: 40px; text-align: center; }
.pp-lv-whats-logo { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 99px; background: #25d366; color: #fff; box-shadow: 0 10px 22px -12px rgba(37, 211, 102, .8); }
.pp-lv-whats-logo .pp-lv-whats-svg { width: 30px; height: 30px; }
.pp-lv-whats-tit { margin: 14px 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-escura); }
.pp-lv-whats-txt { margin: 0; font-size: 14.5px; color: var(--cor-texto-2); }
.pp-lv-whats-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; min-height: 50px; padding: 0 24px; border-radius: 99px; background: #25d366; color: #fff !important; font-size: 15.5px; font-weight: 800; box-shadow: 0 12px 24px -14px rgba(37, 211, 102, .9); }
.pp-lv-whats-btn .pp-lv-whats-svg { width: 21px; height: 21px; }
/* FIM DA LOJA COM VITRINE */

/* ============================================================================
   FOTOS DO PEDIDO COM UM TAMANHO SÓ (16/10/2026, pedido do Luan): carrinho, checkout
   e tela do Pix iguais — kit 64px (cantos 12px) e brinde 48px (cantos 10px).
   ========================================================================== */
.pp-cart-item .pp-cart-foto,
.pp-resumo-lista li > .pp-resumo-foto,
.pp-rp-item img,
.pp-pix-itens .pp-rp-item img { width: 64px; height: 64px; border-radius: 12px; }
.pp-cart-item.is-brinde .pp-cart-foto,
.pp-resumo-lista li.pp-resumo-brinde > .pp-resumo-foto,
.pp-pix-itens .pp-rp-item.is-brinde img,
.pp-rp-sem-foto { width: 48px; height: 48px; border-radius: 10px; }

/* ---------- RODAPÉ no modelo do Luan (17/10/2026, print) ----------
   Verde, centralizado: casinha branca; ATENDIMENTO AO CLIENTE (WhatsApp, e-mail,
   horário, Rastrear pedido sublinhado); fio; institucionais pequenos; CNPJ e ©. */
.pp-footer.pp-rod4 { margin: 0; padding: 0; border: 0; background: var(--cor-principal); color: #fff; text-align: center; }
.pp-rod4-in { max-width: 480px; margin: 0 auto; padding: 26px 16px calc(22px + env(safe-area-inset-bottom)); }
.pp-rod4-logo { display: block; width: 43px; height: 36px; margin: 0 auto 18px; object-fit: cover; object-position: left center; filter: brightness(0) invert(1); }
.pp-footer.pp-rod4 p { text-align: center; }
.pp-rod4-tit { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pp-rod4-atend { list-style: none; display: grid; justify-items: center; gap: 8px; margin: 0; padding: 0 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pp-rod4-atend a, .pp-rod4-atend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #fff !important; text-decoration: none; }
.pp-rod4-atend a.is-forte { font-weight: 700; font-size: 13.5px; }
.pp-rod4-atend a.is-sublinhado { text-decoration: underline !important; text-underline-offset: 3px; }
.pp-rod4-atend .pp-ico { width: 15px; height: 15px; color: #fff; }
.pp-rod4-linha-dupla { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.pp-rod4-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 16px 0 0; }
.pp-rod4-links button { padding: 0; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.pp-rod4-links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pp-rod4-legal { margin-top: 16px; }
.pp-rod4-legal p { margin: 0; font-size: 11px; line-height: 1.7; color: rgba(255, 255, 255, .85); }

/* ---------- "Sobre o produto" simples (17/10/2026, modelo do Luan) ----------
   Título à esquerda e um parágrafo corrido numa caixa cinza-clara com cantos arredondados. */
.pp-lv-desc-simples .pp-lv-h2,
#descricao.pp-lv-desc-simples h2.pp-lv-h2 { text-align: left; margin-bottom: 14px; }
.pp-lv-desc-caixa { padding: 18px 18px; border-radius: 14px; background: rgba(0, 0, 0, .035); text-align: left; }
.pp-lv-desc-caixa p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--cor-texto-2); }
/* 17/10/2026 ("centraliza e deixa mais elegante"): título centralizado; caixa branca com
   fio fino, mais respiro, parágrafos espaçados e uma linha de resumo no pé. */
.pp-lv-desc-simples .pp-lv-h2,
#descricao.pp-lv-desc-simples h2.pp-lv-h2 { text-align: center; margin-bottom: 16px; }
.pp-lv-desc-caixa { padding: 22px 20px 18px; border: 1px solid var(--cor-linha); border-radius: 16px; background: #fff; }
/* 17/10/2026: descrição SEM caixa (sem fundo, borda nem cantos), só o texto solto na página */
.pp-lv-desc-caixa { padding: 0; border: 0; border-radius: 0; background: none; }
.pp-lv-desc-caixa p { font-size: 14.5px; line-height: 1.7; color: var(--cor-texto-2); }
.pp-lv-desc-caixa p + p { margin-top: 12px; }
/* 21/10/2026 (pedido do Luan): tópicos só em bullets com ✓ verde à esquerda, sem caixa */
.pp-lv-desc-topicos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.pp-lv-desc-topicos li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--cor-texto-2); }
.pp-lv-desc-topicos .pp-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--pp-accent); }
.pp-lv .pp-lv-desc-topicos li { font-size: 15px; }
.pp-lv-desc-caixa p.pp-lv-desc-resumo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cor-linha); font-size: 12.5px; font-weight: 400; letter-spacing: .01em; line-height: 1.5; color: var(--cor-cinza); text-align: center; } /* 17/10/2026: sem verde, cinza simples (pedido do Luan) */

/* ---------- Selos depois das avaliações (17/10/2026, modelo do Luan) ----------
   Lista vertical sem fios: ícone grande verde-escuro à esquerda, título em negrito
   e uma linha cinza. Abaixo do botão ficaram só as bandeiras. */
.pp-lv-confianca.is-so-bandeiras .pp-bandeiras { margin-top: 0; }.pp-lv-selos .pp-lv-garantias { display: grid; gap: 26px; max-width: none; margin: 0; padding: 4px 4px 0; text-align: left; }
.pp-lv-selos .pp-lv-garantias li { gap: 16px; padding: 0; border: 0; }
.pp-lv-selos .pp-lv-garantias .pp-ico { width: 32px; height: 32px; stroke-width: 1.4; color: var(--cor-principal-escura); }
.pp-lv-selos .pp-lv-garantias strong { font-size: 15px; font-weight: 700; }
.pp-lv-selos .pp-lv-garantias small { margin-top: 3px; font-size: 13px; color: var(--cor-texto-2); }

/* ---------- Dúvidas frequentes depois das avaliações (17/10/2026) ----------
   Linhas com fio, pergunta em negrito à esquerda e seta à direita; resposta curta. */
.pp-lv-faq .pp-lv-h2 { text-align: center; }
.pp-lv-faq-lista { margin-top: 8px; border-top: 1px solid var(--cor-linha); text-align: left; }
.pp-lv-faq-item { border-bottom: 1px solid var(--cor-linha); }
.pp-lv-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--cor-escura); }
.pp-lv-faq-item summary::-webkit-details-marker { display: none; }
.pp-lv-faq-seta { flex: 0 0 auto; width: 16px; height: 16px; color: var(--cor-cinza); transition: transform .2s ease; }
.pp-lv-faq-item[open] .pp-lv-faq-seta { transform: rotate(180deg); }
.pp-lv-faq-item p { margin: -4px 2px 15px; font-size: 13.5px; line-height: 1.55; color: var(--cor-texto-2); }

/* ---------- Faixa de urgência acima do botão (17/10/2026) ---------- */
/* 17/10/2026: as duas partes numa linha só, lado a lado (referência do Luan) */
.pp-lv-urgencia { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 14px 16px 0; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, #f97316, #ef4444); color: #fff; text-align: center; }
.pp-lv-urgencia p { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; }
.pp-lv-urgencia p.is-forte { font-weight: 700; }
.pp-lv-urgencia .pp-ico { flex: 0 0 auto; width: 15px; height: 15px; }
.pp-lv-urg-n { font-weight: 800; animation: pp-urg-n .4s ease; }
@keyframes pp-urg-n { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-lv-urg-n { animation: none; } }
.pp-lv-urgencia + .pp-lv-cta { margin-top: 10px; }
/* Celulares menores (até 370px): um pouco menor para continuar numa linha só */
@media (max-width: 370px) {
  .pp-lv-urgencia { gap: 4px 10px; padding: 10px 8px; }
  .pp-lv-urgencia p { gap: 4px; font-size: 12px; }
  .pp-lv-urgencia .pp-ico { width: 13px; height: 13px; }
}

/* ---------- Header centralizado + menu lateral (17/10/2026, referência do Luan) ---------- */
.pp-lv-head.is-centro { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
.pp-lv-head-lado { display: flex; align-items: center; gap: 2px; }
.pp-lv-head-lado.is-dir { justify-content: flex-end; }
.pp-header-in .pp-lv-head.is-centro .pp-lv-logo { margin: 0; justify-self: center; }
.pp-lv-head.is-centro .pp-menu-btn { margin-left: -6px; }
.pp-lv-head.is-centro .pp-lv-head-lado.is-dir { margin-right: -6px; }
@media (max-width: 400px) { .pp-lv-head.is-centro .pp-icon-btn { width: 38px; } }

.pp-lv-menu { width: min(330px, 86vw); background: #fff; }
.pp-lv-menu-topo { position: relative; flex: 0 0 auto; padding: 18px 16px 16px; background: var(--cor-principal); color: #fff; }
.pp-lv-menu-marca { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.pp-lv-menu-icone { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; overflow: hidden; }
.pp-lv-menu-icone img { width: 40px; height: 40px; object-fit: contain; }
.pp-lv-menu-marca strong { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.pp-lv-menu-marca small { display: block; margin-top: 1px; font-size: 12.5px; opacity: .85; }
.pp-lv-menu-fechar { position: absolute; top: 16px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; }
.pp-lv-menu-fechar .pp-ico { width: 18px; height: 18px; }
.pp-lv-menu-selo { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .14); font-size: 11.5px; font-weight: 600; color: #fff; }
.pp-lv-menu-selo .pp-ico { width: 13px; height: 13px; }
/* 17/10/2026: checkout SEM header — só a faixa do topo e o botão redondo de voltar
   (mesmo estilo do /rastreio), no fluxo da página, antes de "Seu pedido". */
.pp-ck-voltar-solto { display: flex; justify-content: flex-start; box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 16px 0; text-align: left; }
.pp-ck-voltar-solto button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 99px; background: #fff; color: var(--cor-escura); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3); }
.pp-ck-voltar-solto .pp-ico { width: 20px; height: 20px; }

/* 17/10/2026: topo do menu = foto da fachada de ponta a ponta, com o X por cima */
.pp-lv-menu-topo.is-fachada { padding: 0; background: var(--cor-principal); }
.pp-lv-menu-fachada { display: block; width: 100%; height: auto; aspect-ratio: 1078 / 356; object-fit: cover; }
.pp-lv-menu-topo.is-fachada .pp-lv-menu-fechar { top: 6px; right: 6px; width: 28px; height: 28px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); }
.pp-lv-menu-topo.is-fachada .pp-lv-menu-fechar .pp-ico { width: 16px; height: 16px; }
.pp-lv-menu .pp-menu-corpo { padding: 10px 10px 18px; }
.pp-lv-menu .pp-menu-item { padding: 11px 8px; font-weight: 500; font-size: 15px; color: var(--cor-escura); }
.pp-lv-menu .pp-menu-item > .pp-ico:first-child { width: 19px; height: 19px; color: var(--cor-principal); }
.pp-lv-menu .pp-menu-titulo { margin: 16px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--cor-cinza); }
.pp-lv-menu-garantias { list-style: none; display: grid; gap: 12px; margin: 18px 6px 0; padding: 14px; border: 1px solid var(--cor-linha); border-radius: 14px; background: var(--cor-fundo, #f7f6f2); }
.pp-lv-menu-garantias li { display: flex; align-items: center; gap: 12px; }
.pp-lv-menu-garantia-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cor-principal-clara); color: var(--cor-principal-escura); }
.pp-lv-menu-garantia-ico .pp-ico { width: 16px; height: 16px; }
.pp-lv-menu-garantias strong { display: block; font-size: 13px; font-weight: 700; color: var(--cor-escura); }
.pp-lv-menu-garantias small { display: block; font-size: 12px; color: var(--cor-cinza); }
.pp-lv-menu-atend { flex: 0 0 auto; display: grid; justify-items: start; gap: 6px; padding: 4px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cor-linha); background: var(--cor-fundo, #f7f6f2); }
.pp-lv-menu-atend .pp-menu-titulo { margin: 12px 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-cinza); }
.pp-lv-menu-atend a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--cor-escura); text-decoration: none; }
.pp-lv-menu-atend .pp-ico { width: 16px; height: 16px; color: var(--cor-principal); }
.pp-lv-menu-atend .pp-ico-whats { color: var(--cor-whatsapp, #25d366) !important; }
.pp-lv-menu-horario { padding-left: 24px; font-size: 12px; color: var(--cor-cinza); }

/* ---------- RODAPÉ NOVO (17/10/2026, modelo do Luan) ----------
   Fundo verde da loja, tudo alinhado à esquerda na margem de 16px:
   logo + frase / botão do WhatsApp / e-mail e horário / links com seta /
   bandeiras / CNPJ, endereço e ©. Substitui as abas e a centralização anteriores. */
.pp-lv .pp-footer.pp-rod,
.pp-lv.is-produto .pp-footer.pp-rod { text-align: left; }
.pp-lv .pp-rod-escuro .pp-rod-in { display: grid; gap: 22px; padding-top: 28px; }
.pp-rod2-marca .pp-rod2-logo,
.pp-lv .pp-rod2-marca .pp-rod-logo { display: block; height: 34px; width: auto; margin: 0; }
.pp-rod2-frase { margin: 10px 0 0; max-width: 300px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.pp-rod2-contato { display: grid; justify-items: start; gap: 10px; }
.pp-rod2-whats { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin-bottom: 4px; padding: 13px 16px; border-radius: 12px; background: #fff; color: var(--cor-principal-escura) !important; font-size: 15px; font-weight: 700; text-decoration: none !important; }
.pp-rod2-whats .pp-ico { width: 20px; height: 20px; color: #25d366; }
.pp-rod2-linha { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: #fff !important; text-decoration: none !important; }
.pp-rod2-linha .pp-ico { width: 16px; height: 16px; color: rgba(255, 255, 255, .85); }
.pp-rod2-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.pp-rod2-links li { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pp-rod2-links button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0; font-size: 14px; font-weight: 500; color: #fff; text-align: left; }
.pp-rod2-links button .pp-ico { width: 16px; height: 16px; color: rgba(255, 255, 255, .7); }
.pp-rod2-bandeiras .pp-bandeiras { justify-content: flex-start; margin: 0; }
.pp-rod2-bandeiras .pp-band { background: #fff; border-color: transparent; }
.pp-rod2-legal p { margin: 0; font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .8); }

/* ---------- RODAPÉ ENXUTO (17/10/2026, "mais simples mas profissional") ----------
   Fundo claro (creme da página) com fio em cima; tudo centralizado e pequeno. */
.pp-footer.pp-rod3 { margin: 0; padding: 0; background: var(--cor-fundo, #f7f6f2); border-top: 1px solid var(--cor-linha); color: var(--cor-texto-2); text-align: center; }
.pp-rod3-in { max-width: 480px; margin: 0 auto; padding: 28px 16px calc(24px + env(safe-area-inset-bottom)); }
.pp-rod3-logo { display: block; height: 30px; width: auto; margin: 0 auto 18px; }
.pp-rod3-contato { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.pp-rod3-contato a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cor-escura) !important; text-decoration: none !important; }
.pp-rod3-contato .pp-ico { width: 17px; height: 17px; color: var(--cor-principal); }
.pp-rod3-ponto, .pp-rod3-links button + button::before { color: var(--cor-linha-forte, #c9c4b8); }
.pp-footer.pp-rod3 p { text-align: center; }
.pp-rod3-horario { margin: 6px 0 0; font-size: 12.5px; color: var(--cor-cinza); }
.pp-rod3-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 0; }
.pp-rod3-links button { padding: 2px 0; font-size: 13px; font-weight: 500; color: var(--cor-texto-2); }
.pp-rod3-links button + button::before { content: "·"; margin: 0 10px; }
.pp-rod3-links button:hover { color: var(--cor-escura); }
.pp-rod3-legal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cor-linha); }
.pp-rod3-legal p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--cor-cinza); }
/* 17/10/2026: o mesmo rodapé enxuto, mas no VERDE da loja (pedido do Luan) */
.pp-footer.pp-rod3 { background: var(--cor-principal); border-top: 0; color: #fff; }
.pp-rod3-contato a { color: #fff !important; }
.pp-rod3-contato .pp-ico { color: #fff; }
.pp-rod3-ponto, .pp-rod3-links button + button::before { color: rgba(255, 255, 255, .5); }
.pp-rod3-horario { color: rgba(255, 255, 255, .8); }
.pp-rod3-links button { color: rgba(255, 255, 255, .92); }
.pp-rod3-links button:hover { color: #fff; }
.pp-rod3-legal { border-top-color: rgba(255, 255, 255, .22); }
.pp-rod3-legal p { color: rgba(255, 255, 255, .75); }

/* ==========================================================================
   TAMANHOS DE LETRA MAIORES (17/10/2026) — na proporção do site de referência
   do Luan (velnix.com.br, medido em 375px): o público que mais compra é mais
   velho e no celular. Fica no FIM do arquivo para valer sobre as regras acima.
   Referência: faixa 14 · título 18/700 · preço 36/900 (de 18) · títulos de
   seção 24/700 · textos 16 (linha 24–26) · nota 60/900 · selos 16/14 ·
   rodapé 14–16 · botões 16–18.
   ========================================================================== */
/* Faixa do topo */
.pp-lv-topo .pp-lv-topo-frase { font-size: 14px; }
.pp-lv-topo .pp-lv-topo-frase .pp-ico { width: 18px; height: 18px; }
/* Topo do produto */
.pp-lv .pp-lv-linha-topo { font-size: 13px; }
.pp-lv .pp-lv-titulo { font-size: 19px; font-weight: 700; line-height: 1.3; }
.pp-lv .pp-lv-nota strong { font-size: 15px; }
.pp-lv .pp-lv-nota span { font-size: 14px; }
.pp-lv .pp-lv-nota .pp-stars .pp-ico { width: 17px; height: 17px; }
/* Preço */
.pp-lv .pp-lv-preco-de s { font-size: 17px; }
.pp-lv .pp-lv-preco-de .pp-lv-off { font-size: 14px; }
.pp-lv .pp-lv-preco-por { font-size: 36px; font-weight: 900; line-height: 1.15; }
.pp-lv .pp-lv-preco-por small { font-size: 17px; }
.pp-lv .pp-lv-preco-sub { font-size: 15px; line-height: 1.45; }
.pp-lv .pp-lv-preco-frete { font-size: 16px; }
.pp-lv .pp-lv-preco-frete .pp-ico { width: 20px; height: 20px; }
/* Brinde, urgência e botão */
.pp-lv .pp-brinde { font-size: 16px; }
.pp-lv .pp-lv-urgencia { gap: 4px 8px; padding-left: 8px; padding-right: 8px; }
.pp-lv .pp-lv-urgencia p { gap: 4px; font-size: 13.5px; } /* 13,5: maior que antes e ainda numa linha só em 375px */
.pp-lv .pp-lv-urgencia .pp-ico { width: 16px; height: 16px; }
.pp-lv #pp-lv-cta { min-height: 58px; font-size: 18px; }
/* Títulos das seções */
.pp-lv .pp-lv-sec .pp-lv-h2 { font-size: 24px; font-weight: 700; line-height: 1.3; }
/* Sobre o produto */
.pp-lv .pp-lv-desc-caixa p { font-size: 16px; line-height: 1.6; }
/* 21/10/2026 (pedido do Luan): espaço de parágrafo (recuo na 1ª linha) na descrição. */
.pp-lv .pp-lv-desc-caixa p:not(.pp-lv-desc-resumo) { text-indent: 1.5em; }
/* Avaliações */
.pp-lv .pp-lv-placar > strong { font-size: 60px; font-weight: 900; }
.pp-lv .pp-lv-placar small { font-size: 16px; }
.pp-lv .pp-lv-placar .pp-stars .pp-ico { width: 22px; height: 22px; }
.pp-lv .pp-lv-balao-quem { font-size: 16px; }
.pp-lv .pp-lv-balao-texto { font-size: 16px; line-height: 1.6; }
/* Selos depois das avaliações */
.pp-lv .pp-lv-selos .pp-lv-garantias strong { font-size: 16px; }
.pp-lv .pp-lv-selos .pp-lv-garantias small { font-size: 14px; line-height: 1.45; }
/* Barra fixa de baixo */
.pp-lv .pp-lv-barra-preco s { font-size: 13px; }
.pp-lv .pp-lv-barra-preco strong { font-size: 20px; }
.pp-lv .pp-lv-btn-barra { font-size: 14px; }
/* Rodapé */
/* 21/10/2026 (pedido do Luan): rodapé mais discreto e proporcional. Título leve, WhatsApp
   com a mesma fonte e grossura do e-mail, tudo em 2 ou 3 tamanhos só. */
.pp-rod4 .pp-rod4-logo { width: 38px; height: 32px; margin-bottom: 14px; opacity: .95; }
.pp-rod4 .pp-rod4-tit { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #fff; }
.pp-rod4 .pp-rod4-atend { gap: 6px; padding-bottom: 18px; border-bottom-color: rgba(255, 255, 255, .16); }
.pp-rod4 .pp-rod4-atend a, .pp-rod4 .pp-rod4-atend span { gap: 6px; font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, .92) !important; }
.pp-rod4 .pp-rod4-atend .pp-ico { width: 14px; height: 14px; color: rgba(255, 255, 255, .85); }
/* Número e e-mail continuam NUMA LINHA (pedido anterior do Luan) */
.pp-rod4 .pp-rod4-linha-dupla { gap: 6px 16px; }
.pp-rod4 .pp-rod4-links { gap: 6px 16px; margin-top: 14px; }
.pp-rod4 .pp-rod4-links button { font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, .8); }
.pp-rod4 .pp-rod4-legal { margin-top: 12px; }
.pp-rod4 .pp-rod4-legal p { font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, .65); }

/* ---------- Mesma proporção no CARRINHO, CHECKOUT e TELA DO PIX (17/10/2026) ----------
   Regra: nada importante abaixo de 14px; nomes/textos 16; títulos 20; totais e
   valores maiores; botões 18. */
/* Carrinho (gaveta) */
.pp-gaveta-head strong { font-size: 20px; }
.pp-gaveta .pp-cart-nome { font-size: 16px; line-height: 1.3; }
.pp-gaveta .pp-cart-preco s { font-size: 14px; }
.pp-gaveta .pp-cart-preco strong { font-size: 17px; }
.pp-gaveta .pp-cart-preco small { font-size: 14px; }
.pp-gaveta .pp-cart-brinde-tag { font-size: 14px; }
.pp-gaveta .pp-cart-soma { font-size: 15px; }
.pp-gaveta .pp-cart-soma.is-total > span:first-child { font-size: 17px; }
.pp-gaveta .pp-cart-total-valor s { font-size: 14px; }
.pp-gaveta .pp-cart-total-valor strong { font-size: 24px; }
.pp-gaveta .pp-cart-soma.is-total .pp-cart-total-valor small { font-size: 14px; }
.pp-gaveta .pp-cart-rodape .pp-cta { min-height: 58px; font-size: 18px; }
.pp-gaveta .pp-cart-continuar { font-size: 15px; }
/* Checkout */
.pp-page .pp-resumo-topo > span:first-child { font-size: 15px; }
.pp-page .pp-resumo-valor s { font-size: 14px; }
.pp-page .pp-resumo-valor strong { font-size: 17px; }
.pp-page .pp-resumo-valor small { font-size: 14px; }
.pp-page .pp-resumo-txt strong { font-size: 16px; }
.pp-page .pp-resumo-txt span { font-size: 14px; }
.pp-page .ck-titulo { font-size: 20px; }
.pp-page .ck-rot { font-size: 16px; }
.pp-page .ck-ajuda { font-size: 14px; }
.pp-page form input { font-size: 17px; }
.pp-page .pp-pay-opcao-txt strong { font-size: 17px; }
.pp-page .pp-pay-opcao-txt small { font-size: 14.5px; }
/* Selo "Recomendado" pequeno e sem espaçamento, para "R$ 60,00 · aprovação na hora" caber ao lado */
.pp-page .pp-pay-selo { font-size: 10.5px; letter-spacing: 0; padding: 3px 6px; }
.pp-page .pp-pay-opcao-txt { min-width: 0; }
.pp-page .pp-checkout-seguro, .pp-page .pp-checkout-seguro span { font-size: 14px; }
.pp-page .pp-pay-nota { font-size: 15px; line-height: 1.5; }
.pp-page .pp-pay-outras span { font-size: 15px; }
.pp-page .pp-prazo-checkout, .pp-page .pp-prazo-linha { font-size: 15px; }
.pp-page form > .bg-white.text-xs { font-size: 14.5px; }
.pp-page form > .bg-white.text-xs > .border-t { font-size: 18px; }
.pp-page form > .bg-white.text-xs > .border-t .text-lg { font-size: 22px; }
.pp-page form .pp-cta { min-height: 58px; font-size: 18px; }
.pp-page .cdg-footer.is-simples { font-size: 14px; }
/* Tela do Pix */
.pp-page .pp-pix-status { font-size: 14px; }
.pp-page .pp-pix-card .pp-pix-valor { font-size: 42px; }
.pp-page .pp-pix-expira, .pp-page .pp-pix-expira strong { font-size: 15px; }
.pp-page .pp-rp-num { font-size: 14px; }
.pp-page .pp-rp-item-txt strong { font-size: 16px; }
.pp-page .pp-rp-item-txt small { font-size: 14px; }
.pp-page .pp-rp-item-valor { font-size: 16px; }
.pp-page .pp-pix-codigo-linha { font-size: 14px; }
.pp-page .pp-pix-copiar { min-height: 58px; font-size: 18px; }
.pp-page .pp-pix-passos-tit { font-size: 18px; }
.pp-page .pp-pix-passos li, .pp-page .pp-pix-passos li span, .pp-page .pp-pix-passos li strong { font-size: 16px; }
/* Com a letra maior, o texto do passo precisa quebrar linha em vez de passar da tela */
.pp-page .pp-pix-passos { max-width: 100%; }
.pp-page .pp-pix-passos li { max-width: 100%; }
.pp-page .pp-pix-passos li > span { flex: 1 1 auto; min-width: 0; white-space: normal; }
.pp-page .pp-pix-auto { font-size: 15px; }

/* ---------- 21/10/2026 (pedido do Luan): resumo do checkout menor, na mesma proporção ----------
   O foco é preencher os dados e pagar: "Seu pedido" e os valores encolhem ~80% (fotos, letras e
   espaços juntos). Fica no fim do arquivo para vencer as regras de tamanho acima. */
.pp-page .pp-resumo-topo { padding-bottom: 6px; }
.pp-page .pp-resumo-topo > span:first-child { font-size: 13px; }
.pp-page .pp-resumo-valor { gap: 6px; }
.pp-page .pp-resumo-valor s { font-size: 12px; }
.pp-page .pp-resumo-valor strong { font-size: 14px; }
.pp-page .pp-resumo-lista { gap: 8px; }
.pp-page .pp-resumo-lista li { gap: 9px; }
.pp-page .pp-resumo-lista li > .pp-resumo-foto { width: 46px; height: 46px; border-radius: 8px; }
.pp-page .pp-resumo-lista li.pp-resumo-brinde { padding: 7px 10px; border-radius: 11px; }
.pp-page .pp-resumo-lista li.pp-resumo-brinde > .pp-resumo-foto { width: 34px; height: 34px; border-radius: 7px; }
.pp-page .pp-resumo-txt strong { font-size: 13.5px; }
.pp-page .pp-resumo-txt span { font-size: 12px; }
.pp-page .pp-resumo-brinde .pp-resumo-txt span .pp-ico { width: 12px; height: 12px; }
.pp-page .pp-ck-totais { margin-top: 10px; padding-top: 10px; }
.pp-page .pp-ck-totais > :not(:last-child) { margin-bottom: 5px; } /* no lugar dos 8px do space-y-2 */
.pp-page .pp-ck-totais > div { font-size: 11.5px; }
.pp-page .pp-ck-totais > div:last-child { padding-top: 6px; font-size: 14px; }
.pp-page .pp-ck-totais > div:last-child > span:last-child { font-size: 15px; }

/* 21/10/2026 (modelo do Luan): faixa de urgência no topo de "Seus dados" */
.ck-bloco .pp-lv-urgencia { margin: 0; flex-wrap: nowrap; gap: 10px; padding: 10px 8px; }
.ck-bloco .pp-lv-urgencia p { gap: 4px; font-size: 12px; white-space: nowrap; }
.ck-bloco .pp-lv-urgencia .pp-ico { width: 14px; height: 14px; }

/* 21/10/2026 (modelo do Luan): tela do Pix num card só (PpTelaPix), sem QR Code.
   Ícone do Pix, título, etapas 1·2·3, tempo restante, código com o botão Copiar ao lado,
   Como pagar (caixa azul), os selos do checkout (.pp-selos-ck) e o resumo (pedido, valor, rastrear). */
.pp-tela-pix .pp-pix { gap: 0; padding: 14px 12px 20px; }
/* 21/10/2026: símbolo do Pix no botão "Pagar com PIX" do checkout, em branco. */
/* 21/10/2026 (pedido do Luan, vídeo): ao tocar em "Pagar com PIX", enquanto o pedido é
   enviado, o botão fica com o degradê verde-escuro → roxo, meio apagado, com "Processando...". */
.pp-cta.is-processando,
.pp-cta.is-processando:disabled { background: linear-gradient(90deg, #133631 0%, #6416cd 100%); opacity: .55; box-shadow: none; filter: none; cursor: not-allowed; transition: opacity .15s ease; }
.pp-cta.is-processando .animate-spin { flex: 0 0 auto; display: inline-block; }
.pp-cta-pix { display: inline-block; width: 20px; height: 20px; margin: -3px 8px 0 0; vertical-align: middle; filter: brightness(0) invert(1); }
.pp-ck-head.is-so-logo { grid-template-columns: 1fr; justify-items: center; }
.pp-px { display: grid; gap: 14px; justify-items: center; min-width: 0; padding: 22px 16px 18px; background: var(--cor-caixa); border: 1px solid var(--cor-linha); border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.pp-px > * { width: 100%; min-width: 0; margin: 0; }
.pp-px > .pp-px-icone { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cor-principal-clara); }
.pp-px-icone img { width: 28px; height: 28px; }
.pp-px > .pp-px-tit { margin-top: -4px; font-size: 22px; font-weight: 800; text-align: center; color: var(--cor-escura); }
/* 21/10/2026 (pedido do Luan): no topo, o valor no lugar de "Pague com PIX" e, abaixo, o
   nº do pedido com o kit e o brinde num resumo MENOR que o do checkout (fotos 44/36px). */
.pp-px > .pp-px-valor { font-size: 32px; font-weight: 800; line-height: 1.1; text-align: center; letter-spacing: -.01em; color: var(--cor-escura); }
.pp-px > .pp-px-itens { margin: -4px 0 0 !important; }.pp-page .pp-px-itens .pp-rp-num { margin-bottom: 2px; font-size: 12px; }
.pp-px-itens .pp-rp-item { gap: 10px; padding: 4px 0; }
.pp-px-itens .pp-rp-item img { width: 44px; height: 44px; border-radius: 9px; }
.pp-px-itens .pp-rp-item.is-brinde { margin-top: 4px; padding: 6px 10px 6px 6px; border-radius: 12px; }
.pp-px-itens .pp-rp-item.is-brinde img,
.pp-px-itens .pp-rp-sem-foto { width: 36px; height: 36px; border-radius: 8px; }
.pp-page .pp-px-itens .pp-rp-item-txt strong { font-size: 13.5px; }
.pp-page .pp-px-itens .pp-rp-item-txt small { font-size: 12px; }
.pp-page .pp-px-itens .pp-rp-item-valor { font-size: 14px; }
.pp-px > .pp-px-etapas { display: flex; justify-content: center; align-items: center; margin-top: -4px; padding: 0; list-style: none; }
.pp-px-etapas li { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-size: 12px; font-weight: 700; }
.pp-px-etapas li + li { margin-left: 40px; }
.pp-px-etapas li + li::before { content: ""; position: absolute; top: 50%; right: 100%; width: 32px; height: 2px; margin-right: 4px; background: #e5e7eb; }
.pp-px-etapas li.is-atual { background: var(--cor-principal); color: #fff; }
/* 21/10/2026 (print do Luan): a etapa atual em verde (como no print), acima do tempo. */
.pp-px-etapas li.is-atual { background: #16a34a; }
.pp-px > .pp-px-etapas { margin-top: 0; margin-bottom: -6px; }
/* Símbolo do Pix (cores originais) num círculo pequeno e "Pague com PIX" acima das etapas. */
/* 21/10/2026 (pedido do Luan): sem o círculo verde em volta; só o símbolo, para ocupar menos altura. */
.pp-px > .pp-px-icone { justify-self: center; width: auto; height: auto; margin-top: 2px; border-radius: 0; background: none; }
.pp-px > .pp-px-icone img { display: block; width: 26px; height: 26px; }
.pp-px > .pp-px-tit { margin-top: -10px; font-size: 22px; }
.pp-px-tempo { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--cor-linha); border-radius: 12px; background: var(--cor-fundo); font-size: 13px; color: var(--cor-cinza); }
.pp-px-tempo .pp-ico { width: 16px; height: 16px; }
.pp-px-tempo strong { font-size: 17px; font-weight: 800; color: var(--cor-escura); font-variant-numeric: tabular-nums; }
.pp-px-tempo.is-fim { border-color: var(--cor-erro-linha); background: var(--cor-erro-fundo); color: var(--cor-erro); font-weight: 600; }
.pp-px-dica { font-size: 12.5px; text-align: center; color: var(--cor-cinza); }
.pp-px-codigo { padding: 12px; border: 1px solid var(--cor-linha); border-radius: 14px; background: var(--cor-fundo); }
.pp-px-rot { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--cor-cinza); }
.pp-px-codigo-linha { display: flex; align-items: stretch; gap: 8px; }
.pp-px-codigo-txt { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--cor-linha-forte); border-radius: 10px; background: var(--cor-caixa); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--cor-escura); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-px-codigo-txt.is-aberto { white-space: normal; word-break: break-all; resize: none; font-size: 12px; }
.pp-px-copiar { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--cor-principal-escura); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.pp-px-copiar .pp-ico { width: 16px; height: 16px; }
.pp-px-copiar.is-ok { background: var(--cor-principal); }
/* 21/10/2026: CTA "Copiar código Pix" abaixo da linha do código, no estilo .pp-cta do site
   (.pp-px-copiar ficou sem uso). */
.pp-px-codigo .pp-cta.pp-px-cta { margin-top: 10px; }
.pp-px-copiar:disabled { opacity: .6; cursor: default; }
.pp-px-como { padding: 14px 16px; border: 1px solid #cfe0fb; border-radius: 14px; background: #eff5ff; }
.pp-px-como > p { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #1e3a8a; }
.pp-px-como ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.pp-px-como li { counter-increment: passo; display: flex; gap: 6px; font-size: 12.5px; line-height: 1.4; color: #1e40af; }
.pp-px-como li::before { content: counter(passo) "."; font-weight: 700; }
.pp-px-resumo { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--cor-linha); border-radius: 14px; background: var(--cor-fundo); }
.pp-px-resumo p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font-size: 13px; color: var(--cor-cinza); }
.pp-px-resumo strong { font-size: 15px; font-weight: 800; color: var(--cor-escura); }
.pp-px-resumo strong.is-num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; }
.pp-px-resumo a { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--cor-linha); font-size: 13px; font-weight: 600; color: var(--cor-principal-escura); text-decoration: none; }
/* 21/10/2026: no lugar da caixa .pp-px-resumo (que ficou sem uso), só o link de rastreio. */
.pp-tela-pix .pp-px-rastrear { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 2px; font-size: 14px; font-weight: 600; color: var(--cor-principal-escura); text-decoration: none; }
.pp-px-rastrear .pp-ico { width: 16px; height: 16px; }

/* ---------- Tela do Pix na MESMA proporção do checkout e da landing (21/10/2026, pedido do Luan) ----------
   Checkout: margem de 16px, card branco com cantos 12px e padding 16px, título 20px,
   rótulos 16px, campos 17px e CTA 18px. A tela do Pix segue os mesmos números
   (antes: margem 12px, card 18px de canto e textos de 10,5 a 13px). */
.pp-tela-pix .pp-pix { padding: 16px 16px 24px; }
.pp-px { gap: 16px; padding: 20px 16px; border-radius: 12px; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
/* "Menos encaixotado" (21/10/2026, pedido do Luan): sem o card branco em volta de tudo; o
   conteúdo fica direto no fundo da página, na largura do checkout. As caixas de dentro ficam. */
.pp-px.is-solto { padding: 8px 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pp-px > .pp-px-valor { font-size: 34px; }
/* Selo "Aguardando pagamento" acima do valor (estilo .pp-pix-status da tela v469). */
.pp-px > .pp-pix-status { justify-self: center; width: auto; margin-bottom: -8px; padding: 7px 14px; font-size: 14px; }
.pp-page .pp-px-itens .pp-rp-num { margin-bottom: 4px; font-size: 14px; }
/* Linha do pedido com o valor à direita (o valor grande do topo saiu, pedido do Luan). */
.pp-page .pp-px-itens .pp-px-num { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-page .pp-px-itens .pp-px-num strong { margin-left: auto; font-size: 17px; font-weight: 800; color: var(--cor-escura); }
.pp-px-itens .pp-rp-item { gap: 12px; }
.pp-px-itens .pp-rp-item img { width: 48px; height: 48px; border-radius: 10px; }
.pp-px-itens .pp-rp-item.is-brinde img,
.pp-px-itens .pp-rp-sem-foto { width: 40px; height: 40px; border-radius: 9px; }
.pp-page .pp-px-itens .pp-rp-item-txt strong { font-size: 15px; }
.pp-page .pp-px-itens .pp-rp-item-txt small { font-size: 13.5px; }
.pp-px-tempo { padding: 13px; font-size: 15px; }
/* 21/10/2026 (pedido do Luan): o tempo restante sem moldura (sem borda e sem fundo),
   centralizado, no mesmo lugar (abaixo do resumo). Expirado continua em vermelho. */
.pp-px > .pp-px-tempo { justify-self: center; width: auto; padding: 0; border: 0; background: transparent; }
.pp-px > .pp-px-tempo.is-fim { background: transparent; }
.pp-px-tempo .pp-ico { width: 18px; height: 18px; }
.pp-px-tempo strong { font-size: 19px; }
.pp-px-codigo { padding: 14px; border-radius: 12px; }
.pp-px-rot { margin-bottom: 10px; font-size: 12px; }
.pp-px-codigo-txt { padding: 12px 13px; font-size: 15px; }
.pp-px-codigo .pp-cta.pp-px-cta { min-height: 56px; margin-top: 12px; font-size: 18px; }
.pp-tela-pix .pp-px-rastrear { margin-top: 14px; font-size: 16px; }
/* ---------- Selos de segurança no meio do caminho (21/10/2026, pedido do Luan) ----------
   Estavam grudados no que vem em cima (landing 22px em cima / 54px embaixo, checkout 26/48,
   Pix 16/60). Agora 36px em cima e 36px embaixo nas três telas. */
.pp-lv-selos { padding-top: 36px; padding-bottom: 8px; }
.pp-page .pp-selos-ck { margin-top: 36px; }
.pp-page .pp-lv-selos .pp-selos-ck { margin-top: 0; } /* na landing os 36px vêm do padding do .pp-lv-selos */
.pp-px .pp-selos-ck { margin-top: 20px; } /* + 16px do gap do .pp-px = 36px */
.pp-tela-pix .pp-pix { padding-bottom: 12px; }
.pp-page:has(.pp-selos-ck) .cdg-footer.is-simples { margin-top: 20px; }
/* Dentro do card (324px) os três selos não cabiam numa linha: um pouco menores e mais juntos. */
.pp-px .pp-selos-ck { flex-wrap: nowrap; gap: 8px; }
.pp-px .pp-selo-blindado { width: 90px; }
/* "Como pagar" mais visível: título no tamanho dos títulos do checkout, passos em 16px
   com o número num círculo azul cheio, e a caixa com borda mais forte. */
.pp-px-como { padding: 16px; border: 1.5px solid #bcd3fa; border-radius: 12px; }
.pp-px-como > p { margin-bottom: 12px; font-size: 18px; font-weight: 800; color: #1e3a8a; }
.pp-px-como ol { gap: 10px; }
.pp-px-como li { align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; color: #1e3a8a; }
.pp-px-como li::before { content: counter(passo); flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 13px; font-weight: 800; }