/* ============================================================================
   Loja VivaPop — canal próprio
   Identidade vinda de vivapop.com.br (medida no CSS da loja oficial, tema
   Dooca 1.0.27):
     vermelho da marca  #F5333F   (cabeçalho e destaques)
     tinta              #1e1f20   (--color-primary / --color-text)
     verde de compra    #41BB96   (--color-buy-button)
     borda              #e1e1e1   (--border-color)
     fontes             Poppins (títulos) + Roboto (texto)

   Regras desta folha:
   1. Nenhum token é usado sem estar definido aqui. A versão anterior usava
      --cor-ouro 12 vezes e --raio-s 4 vezes sem nunca defini-los, o que
      deixava dois botões principais com fundo transparente — invisíveis.
   2. Nenhuma animação em loop infinito. Movimento só em transição de estado,
      com guarda em prefers-reduced-motion.
   3. Nada de user-scalable=no: zoom por pinça continua liberado (WCAG 1.4.4).
   ========================================================================== */

:root {
  --vermelho: #f5333f;
  --vermelho-escuro: #d21f2b;
  --tinta: #1e1f20;
  --tinta-suave: #5b5e63;
  /* Cinza de apoio. Era #86898f, que dá 3,51:1 no branco e 3,28:1 no
     `--fundo-claro` — abaixo do 4,5:1 da WCAG AA para texto pequeno. #6b6e74
     entrega 5,11:1 e 4,78:1 sem deixar de ser o degrau mais fraco da escala. */
  --tinta-fraca: #6b6e74;
  --verde: #41bb96;
  --verde-escuro: #2f9d7c;
  --branco: #ffffff;
  --fundo: #ffffff;
  --fundo-claro: #f7f7f8;
  --fundo-escuro: #1e1f20;
  --borda: #e1e1e1;
  --borda-forte: #c9cacd;
  --aviso: #b42318;
  --ok: #1f7a4d;
  /* Cor do CTA. É o vermelho da marca escurecido até passar em WCAG AA com texto
     branco: `--cta` #d21f2b dá 5,29:1 (AA exige 4,5:1 para texto normal) e
     `--cta-hover` #a8121c dá 7,59:1. `--vermelho` (#f5333f) dá só 3,87:1, então
     ele continua sendo acento — outline de foco, link, ícone — e não fundo de
     botão com texto branco. Ver `.botao-primario` / `.botao-comprar`. */
  --cta: #d21f2b;
  --cta-hover: #a8121c;

  --fonte-titulo: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-texto: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --raio: 8px;
  --raio-pequeno: 4px;
  --largura: 1200px;
  --sombra-1: 0 1px 2px rgba(30, 31, 32, .06);
  --sombra-2: 0 4px 16px rgba(30, 31, 32, .10);
  --sombra-3: 0 12px 40px rgba(30, 31, 32, .18);
  --transicao: 160ms ease;

  /* Cor da faixa de varredura que passa no hover dos botões. Branco translúcido por
     padrão porque a maioria dos CTAs é fundo escuro (`--cta`); as variantes claras
     trocam por um vermelho de tinta bem diluída — banda branca sobre fundo claro é
     banda invisível. Definido aqui, nunca usado sem estar definido (regra 1). */
  --varredura: rgba(255, 255, 255, .42);

  --hero-progresso: 0;
  --hero-deslocamento: 160px;
}

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` é display:none na folha do user-agent, e qualquer regra
   de autor com `display` ganha dele por origem — não por especificidade. Sem
   isto, `.modal { display: flex }` e `.drawer { display: flex }` ficavam
   renderizados mesmo com hidden, criando uma camada fixa invisível por cima da
   página inteira que engolia todo clique. Medido: elementFromPoint no botão
   "Comprar" devolvia `DIV|modal`. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* Rolagem suave só para quem não pede movimento reduzido. Fora disso, âncora
   pula direto — e a guarda de prefers-reduced-motion no fim desta folha cuida do
   resto. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); }
button, input, select, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }

/* O cabeçalho é fixo (65 px no celular, 74 px no desktop). Sem esta margem, o
   salto para #produtos — o CTA "Ver produtos" do hero, o link do menu e o do
   rodapé — parava com o título da seção escondido atrás dele. Medido em 390 px:
   título em y=22, cabeçalho até y=65. */
section[id], footer[id] { scroll-margin-top: 88px; }
.coluna-estreita { max-width: 780px; margin: 0 auto; }
.centralizado { text-align: center; }

.pular-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--branco); padding: 12px 20px;
}
.pular-conteudo:focus { left: 0; }

:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--raio-pequeno);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
  /* Palco da varredura de hover. `position: relative` + `overflow: hidden` só
     recortam a faixa: nada aqui muda caixa, altura ou posição do botão — o alvo de
     toque de 44 px e a posição do CTA são medidos no e2e, e uma varredura que
     deslocasse o botão faria o dedo acertar outro alvo. `isolation: isolate` cria o
     contexto de empilhamento para a faixa ficar ACIMA do fundo e ABAIXO do rótulo
     (descendente com `z-index` negativo é pintado antes do conteúdo inline). */
  position: relative; overflow: hidden; isolation: isolate;
}
/* A faixa: uma banda de luz inclinada que atravessa o botão da esquerda para a
   direita, uma vez por hover. `top/bottom` com sobra (-12px) porque o `skewX`
   jogaria as pontas para fora de uma caixa da altura exata. Vive no `::after` com
   `z-index: -1` dentro do contexto de empilhamento do próprio botão: a banda passa
   POR CIMA do fundo e POR BAIXO do rótulo, então nenhum texto fica ilegível no
   meio do varrer. O `@keyframes` mexe só em `transform`/`opacity` — nem altura, nem
   largura, nem posição do botão mudam, e por isso o alvo de toque e a posição do
   CTA permanecem os mesmos que o e2e mede. */
.botao::after,
.opcao-frete.selecionada::after {
  content: '';
  position: absolute; z-index: -1;
  top: -12px; bottom: -12px; left: 0; width: 42%;
  background: linear-gradient(100deg, transparent 0%, var(--varredura) 50%, transparent 100%);
  transform: translateX(-150%) skewX(-12deg);
  opacity: 0; pointer-events: none;
}
@keyframes varredura-botao {
  from { transform: translateX(-150%) skewX(-12deg); opacity: .95; }
  to   { transform: translateX(340%)  skewX(-12deg); opacity: .95; }
}
/* Só para quem não pediu movimento reduzido: com `reduce` a faixa simplesmente não
   corre, e o botão continua com o hover de cor que já existia — o feedback não
   some, só para de se mover. */
@media (prefers-reduced-motion: no-preference) {
  .botao:hover:not(:disabled)::after,
  .botao:focus-visible::after,
  .opcao-frete.selecionada:hover::after {
    animation: varredura-botao 560ms cubic-bezier(0.22, 0.61, 0.36, 1) 1;
  }
}
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao-grande { padding: 15px 30px; font-size: 16px; }
.botao-pequeno { padding: 9px 16px; font-size: 14px; }
.botao-bloco { width: 100%; }

/* Botão de ação principal e o "Comprar" do card usam a MESMA cor, e ela passa em
   WCAG AA. Duas correções numa:

   1. `.botao-comprar` era `--verde` (#41bb96). Branco em cima disso dá **2,39:1**
      de contraste — WCAG 1.4.3 exige 4,5:1 para texto de 15px. O botão mais
      importante da loja era o menos legível dela, e ainda por cima ficava logo
      abaixo do selo "R$ x no Pix", que também é verde: dois verdes competindo, e
      o CTA perdia. Verde nesta folha é cor de **sucesso** (barra de frete grátis,
      desconto, passo concluído, toast ok) — usar a mesma cor para "compre" e para
      "deu certo" mistura duas mensagens.
   2. `.botao-primario` era `--vermelho` (#f5333f), que dá **3,87:1** com branco.
      Passa em AA só para texto grande (3:1), e o texto do botão é 15px/600 — texto
      normal. Também falhava.

   `--cta` é o vermelho da marca escurecido o suficiente para passar: **#d21f2b dá
   5,29:1** com branco. O hover vai a #a8121c (7,59:1). `--vermelho` continua onde
   ele é acento e não texto sobre fundo (outline de foco, links, ícone, hover de
   borda) — nesses usos a regra de contraste de texto não se aplica do mesmo jeito.
   Verificação no e2e mede a cor RENDERIZADA, não o que este arquivo diz. */
.botao-primario { background: var(--cta); color: var(--branco); }
.botao-primario:hover:not(:disabled) { background: var(--cta-hover); }

.botao-comprar { background: var(--cta); color: var(--branco); }
.botao-comprar:hover:not(:disabled) { background: var(--cta-hover); }

.botao-secundario { background: var(--fundo-claro); color: var(--tinta); border-color: var(--borda-forte); --varredura: rgba(30, 31, 32, .10); }
.botao-secundario:hover:not(:disabled) { background: var(--borda); }

/* Compra em 1 clique: botão próprio, para não competir com o "Comprar" da
   sacola. O rótulo é curto de propósito: no card cabe em uma linha. */
.botao-1clique { background: var(--tinta); color: var(--branco); }
.botao-1clique:hover:not(:disabled) { background: #000; }
.um-clique-resumo { display: grid; gap: 10px; margin: 12px 0 18px; }
.um-clique-linha { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.um-clique-linha span:first-child { color: var(--tinta-fraca); }
.um-clique-linha span:last-child { text-align: right; overflow-wrap: anywhere; }
.um-clique-total { font-size: 20px; font-weight: 700; }
.um-clique-acoes { display: grid; gap: 10px; }
.um-clique-aviso { margin: 0 0 12px; color: var(--vermelho-escuro); font-size: 14px; }
.um-clique-aviso[hidden] { display: none; }
.um-clique-ok { color: #147a5b; }

.botao-contorno { background: transparent; color: var(--tinta); border-color: var(--borda-forte); --varredura: rgba(30, 31, 32, .08); }
.botao-contorno:hover:not(:disabled) { border-color: var(--tinta); }
/* O CTA secundário não pode ter o mesmo peso do primário: dois botões
   igualmente altos no fim da dobra dividem a atenção e nenhum ganha. */
.hero .botao-contorno { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.45); font-size: 14px; padding: 11px 20px; align-self: center; --varredura: rgba(255, 255, 255, .30); }
.hero .botao-contorno:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); }

.botao-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: inherit;
}
.botao-link:hover { color: var(--vermelho-escuro); }

/* Link de texto no meio de um parágrafo: cresce a área de toque para 44 px com
   margem negativa, sem empurrar a linha seguinte. O e2e mediu o "Minha conta"
   da FAQ em 83×18 e contou como alvo pequeno no celular. */
p .link-faq { display: inline-block; padding-block: 13px; margin-block: -13px; }

.botao-fechar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: none; border: 0; border-radius: var(--raio-pequeno); cursor: pointer; color: var(--tinta-suave);
}
.botao-fechar:hover { background: var(--fundo-claro); color: var(--tinta); }
.botao-fechar-absoluto { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* ------------------------------------------------------- faixa de serviço */

.faixa-servico { background: var(--fundo-escuro); color: var(--branco); font-size: 13px; }
.faixa-servico-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.faixa-servico-lista { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.faixa-servico-links { display: flex; gap: 18px; flex: 0 0 auto; }
.faixa-servico-links a { color: rgba(255,255,255,.85); text-decoration: none; }
.faixa-servico-links a:hover { color: var(--branco); text-decoration: underline; }

/* ------------------------------------------------------------- cabeçalho */

/* ------------------------------------------------------------- cabeçalho */

.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
  transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1), opacity .26s ease, box-shadow .26s ease;
}
/* O cabeçalho é SEMPRE visível e SEMPRE clicável. O que muda é só a pele:
   sobre o vídeo ele é transparente (o vídeo continua dominando a dobra, que é o
   que o dono pediu) e depois de rolar fica sólido. A versão anterior o
   transladava para fora da tela com pointer-events:none até a pessoa rolar 75%
   do hero — no celular eram ~1.180px sem sacola, sem busca e sem menu. */
.cabecalho-solido { box-shadow: 0 4px 22px rgba(0,0,0,.08); }

@media (min-width: 861px) {
  .cabecalho-transparente {
    background: linear-gradient(to bottom, rgba(15,15,16,.66) 0%, rgba(15,15,16,.28) 62%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  .cabecalho-transparente .nav-principal a,
  .cabecalho-transparente .botao-sacola,
  .cabecalho-transparente .botao-menu { color: #fff; }
  .cabecalho-transparente .nav-principal a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.8); }
  .cabecalho-transparente .busca input {
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff;
  }
  .cabecalho-transparente .busca input::placeholder { color: rgba(255,255,255,.78); }
  .cabecalho-transparente .busca-icone { color: rgba(255,255,255,.8); }
  .cabecalho-transparente .faixa-servico-link { color: #fff; }
}
.cabecalho-inner { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.marca { display: block; flex: 0 0 auto; }
.marca img { width: 132px; height: auto; }

.nav-principal { display: flex; gap: 24px; margin-right: auto; }
.nav-principal a {
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 15px;
  color: var(--tinta); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-principal a:hover { color: var(--vermelho-escuro); border-bottom-color: var(--vermelho-escuro); }

.acoes-cabecalho { display: flex; align-items: center; gap: 14px; }

/* Conta do cliente (login com Google). Botão no padrão oficial do Google —
   pílula branca, "G" colorido, sombra baixa — e, logado, um pill compacto com
   avatar + nome + sair. No header transparente os dois viram vidro. */
.conta-cliente { display: flex; align-items: center; gap: 10px; }

.botao-entrar-google {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 16px 0 8px;
  border: 1px solid rgba(30, 31, 32, .13); border-radius: 999px;
  background: #fff; color: var(--tinta);
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.botao-entrar-google:hover {
  border-color: rgba(30, 31, 32, .24);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
  transform: translateY(-1px);
}
.botao-entrar-google:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.botao-entrar-google:focus-visible { outline: 3px solid rgba(245, 51, 63, .35); outline-offset: 2px; }

/* O Apple fica só com o ícone em qualquer largura. A maçã é reconhecível e o
   rótulo de 210 px era o que empurrava a sacola para fora do container de
   1200 px quando os dois SSO apareciam juntos (medido em 1024–1440). O
   `aria-label`/`title` continuam dizendo "Continuar com Apple". */
.botao-entrar-apple {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; gap: 0;
  border: 1px solid #000; border-radius: 999px;
  background: #000; color: #fff;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.botao-entrar-apple .rotulo-entrar { display: none; }
.botao-entrar-apple:hover { background: #1d1d1f; transform: translateY(-1px); }
.botao-entrar-apple:active { transform: translateY(0); }
.botao-entrar-apple:focus-visible { outline: 3px solid rgba(245, 51, 63, .35); outline-offset: 2px; }
.apple-logo { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; }

.google-g {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(30, 31, 32, .08);
}
.google-g svg { display: block; }

.conta-logada {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 6px 0 6px;
  border: 1px solid rgba(30, 31, 32, .11); border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}
.conta-link {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 999px;
}
.conta-link:hover .conta-nome { color: var(--vermelho-escuro); }
.avatar-cliente {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; background: linear-gradient(135deg, var(--vermelho), #ff8f95);
}
.conta-nome {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 13.5px; color: var(--tinta);
}
.botao-sair-conta {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent; color: var(--tinta-suave);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.botao-sair-conta:hover { background: rgba(30, 31, 32, .07); color: var(--tinta); }
.botao-sair-conta:focus-visible { outline: 2px solid rgba(245, 51, 63, .45); outline-offset: 1px; }

@media (min-width: 861px) {
  .cabecalho-transparente .botao-entrar-google,
  .cabecalho-transparente .conta-logada {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .cabecalho-transparente .botao-entrar-google:hover { background: rgba(255, 255, 255, .22); }
  .cabecalho-transparente .conta-nome { color: #fff; }
  .cabecalho-transparente .conta-link:hover .conta-nome { color: #fff; }
  .cabecalho-transparente .botao-sair-conta { color: rgba(255, 255, 255, .85); }
  .cabecalho-transparente .botao-sair-conta:hover { background: rgba(255, 255, 255, .16); color: #fff; }
}
@media (max-width: 1240px) {
  /* O cabeçalho é uma linha só e o container para em 1200 px. Com os dois SSO
     rotulados a soma passa de 1342 px e a sacola sai da tela — medido em
     1024/1200/1280/1440. O Apple já é só ícone; aqui o Google perde o rótulo,
     mantendo `aria-label`/`title`, e a busca cede 20 px. Acima de 1240 px os
     1175 px cabem nos 1200 do container. */
  .botao-entrar-google { width: 44px; padding: 0; justify-content: center; }
  .botao-entrar-google .rotulo-entrar { display: none; }
}

@media (max-width: 720px) {
  .conta-nome { display: none; }
  .conta-logada { padding-right: 4px; }
}

.busca { position: relative; display: flex; align-items: center; }
.busca-icone { position: absolute; left: 12px; color: var(--tinta-fraca); pointer-events: none; }
.busca input {
  width: 230px; padding: 10px 14px 10px 38px;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--fundo-claro);
  transition: border-color var(--transicao), background var(--transicao);
}
.busca input:focus { background: var(--branco); border-color: var(--tinta); outline: none; }
.busca input:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 1px; }

.busca-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-2); max-height: 380px; overflow-y: auto;
}
.busca-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--fundo-claro);
  cursor: pointer; text-align: left;
}
.busca-item:last-child { border-bottom: 0; }
.busca-item:hover { background: var(--fundo-claro); }
.busca-item img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.busca-item-nome { font-size: 14px; line-height: 1.3; }
.busca-item-preco { font-size: 13px; color: var(--tinta-suave); font-weight: 500; }
.busca-nada { padding: 14px 12px; font-size: 14px; color: var(--tinta-suave); }

.botao-sacola {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid transparent;
  border-radius: var(--raio-pequeno); cursor: pointer; color: var(--tinta);
}
.botao-sacola:hover { border-color: var(--borda); }
.sacola-contador {
  position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--cta); color: var(--branco); border-radius: 10px;
  font-family: var(--fonte-titulo); font-size: 11px; font-weight: 600; line-height: 19px; text-align: center;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  /* Era 140vh. O palco (`.hero-palco`) é `position: sticky; height: 100vh`,
     então os 40vh extras eram o quanto o vídeo ficava pregado enquanto o texto
     rolava por cima — efeito bonito, e caro: 1.260 px de hero no desktop e
     1.652 px no iPad (140% da tela) antes de qualquer coisa à venda aparecer.
     115vh mantém o efeito (15vh de percurso, ~135 px no desktop) e devolve 25vh
     para o produto. No celular não muda nada: lá o override já é 74dvh com o
     palco `position: relative`, sem percurso sticky. */
  min-height: 115vh;
  min-height: 115dvh;
  background: var(--fundo-escuro);
}
.hero-palco {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
}
.hero-video-moldura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: center center;
  transform: scale(calc(1 - 0.16 * var(--hero-progresso, 0)));
  border-radius: calc(24px * var(--hero-progresso, 0));
  box-shadow: 0 20px 60px rgba(0, 0, 0, calc(0.6 * var(--hero-progresso, 0)));
  transition: border-radius 100ms ease-out, box-shadow 100ms ease-out;
  will-change: transform, border-radius;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.06);
  display: block;
}
.hero-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(15,15,16,.82) 0%, rgba(15,15,16,.45) 24%, rgba(15,15,16,.06) 50%, transparent 70%);
  transition: opacity 120ms ease-out;
}
.hero-conteudo {
  position: relative;
  z-index: 2;
  color: var(--branco);
  width: 100%;
  max-width: 720px;
  padding-bottom: 74px;
  padding-top: 24px;
  transform: translateY(calc(-1 * var(--hero-deslocamento, 160px) * var(--hero-progresso, 0)));
  will-change: transform;
}
.hero-rotulo {
  margin: 0 0 14px; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.86);
}
.hero-titulo { margin: 0 0 16px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 52px; line-height: 1.08; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(15,15,16,.55); }
.hero-subtitulo { margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.92); max-width: 46ch; text-shadow: 0 1px 14px rgba(15,15,16,.6); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-destaque {
  position: absolute; right: 24px; bottom: 88px; z-index: 3;
  width: 288px; padding: 16px; display: grid; gap: 8px;
  background: rgba(255,255,255,.97); border-radius: var(--raio); box-shadow: var(--sombra-3);
}
.hero-destaque-rotulo {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--vermelho-escuro);
}
.hero-destaque img {
  width: 100%; height: 168px; object-fit: contain;
  background: var(--fundo-claro); border-radius: var(--raio-pequeno);
}
.hero-destaque-nome { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--tinta); }
.hero-destaque-preco { margin: 0 0 4px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 22px; color: var(--tinta); }
.hero-destaque-preco small { display: block; font-family: var(--fonte-texto); font-weight: 500; font-size: 12px; color: var(--ok); }

.hero-audio {
  position: absolute; right: 24px; bottom: 24px; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(30,31,32,.6); border: 1px solid rgba(255,255,255,.4);
  color: var(--branco); cursor: pointer; backdrop-filter: blur(4px);
  transition: background var(--transicao);
}
.hero-audio:hover { background: rgba(30,31,32,.85); }

.hero-scroll-dica {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.84); text-decoration: none; font-family: var(--fonte-titulo);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: opacity var(--transicao), color var(--transicao);
  opacity: calc(1 - 3 * var(--hero-progresso, 0));
  animation: heroScrollDicaBounce 2.2s infinite ease-in-out;
}
.hero-scroll-dica:hover { color: #fff; }
@keyframes heroScrollDicaBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-6px); }
  60% { transform: translateX(-50%) translateY(-3px); }
}

/* Pagamento em 1 toque (Express Checkout Element).
   A faixa é a primeira coisa que a pessoa com Apple Pay/Google Pay vê, e é ela
   que encurta o checkout de sete campos para um toque. Por isso cartão de
   destaque, e não caixa cinza: fundo branco sobre a página, filete da borda
   padrão, sombra de 1 px e o mesmo raio do resto do checkout. O interior dos
   botões é iframe da Stripe — aqui só se desenha o contentor. */
.express-checkout-container {
  margin: 0 0 20px; padding: 16px;
  background: var(--branco); border: 1px solid var(--verde);
  border-left: 3px solid var(--verde-escuro);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  max-width: 640px;
}
.express-checkout-label {
  margin: 0 0 12px; font-family: var(--fonte-titulo);
  font-size: 12.5px; font-weight: 600; color: var(--ok);
  letter-spacing: .01em; text-align: center;
}
.express-checkout-botao { display: block; min-height: 48px; }
.express-checkout-botao > div { margin: 0 auto; }
#stripe-payment-request-button { min-height: 48px; }

/* Cue visual interativo que substitui a faixa enquanto falta um CPF ou CNPJ
   válido. Mostra os selos das carteiras (Apple Pay / Google Pay), o progresso
   dos dígitos e alerta imediato se o documento tiver dígito verificador inválido. */
.carteira-aviso {
  display: grid; gap: 8px;
  margin: 0 0 18px; padding: 12px 14px;
  max-width: 640px;
  background: var(--fundo-claro); border: 1px dashed var(--borda-forte);
  border-left: 3px solid var(--tinta);
  border-radius: var(--raio);
  font-size: 13px; line-height: 1.45; color: var(--tinta-suave);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.carteira-aviso:hover {
  border-color: var(--tinta);
}
.carteira-aviso[data-estado="digitando"] {
  background: #f2fbf6;
  border-color: #b9e3cd;
  border-left-color: var(--verde-escuro);
}
.carteira-aviso[data-estado="invalido"] {
  background: #fff5f5;
  border-style: solid;
  border-color: #f2c4c7;
  border-left: 3px solid var(--aviso);
  color: var(--aviso);
}
.carteira-aviso-topo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.carteira-aviso-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; background: var(--branco);
  border: 1px solid var(--borda); color: var(--tinta);
}
.carteira-aviso[data-estado="digitando"] .carteira-aviso-icone {
  border-color: var(--verde); color: var(--ok);
}
.carteira-aviso[data-estado="invalido"] .carteira-aviso-icone {
  border-color: #f2c4c7; color: var(--aviso);
}
.carteira-aviso-titulo {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600;
  color: var(--tinta); line-height: 1.35;
}
.carteira-aviso[data-estado="invalido"] .carteira-aviso-titulo {
  color: var(--aviso);
}
.carteira-aviso-selos {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
}
.carteira-selo {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--raio-pequeno);
  background: var(--tinta); color: var(--branco);
  font-family: var(--fonte-titulo); font-size: 11px; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap;
}
.carteira-aviso-texto {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-suave);
}
.carteira-aviso[data-estado="invalido"] .carteira-aviso-texto {
  color: var(--aviso);
}
.carteira-aviso-trilho {
  height: 4px; width: 100%;
  background: var(--borda); border-radius: 999px; overflow: hidden;
}
.carteira-aviso-barra {
  display: block; height: 100%; width: 0%;
  background: var(--verde-escuro); border-radius: 999px;
  transition: width var(--transicao), background var(--transicao);
}
.carteira-aviso[data-estado="invalido"] .carteira-aviso-barra {
  background: var(--aviso);
}
.divisor-ou {
  display: flex; align-items: center; text-align: center; margin: 14px 0 0;
}
.divisor-ou::before, .divisor-ou::after {
  content: ''; flex: 1; border-bottom: 1px solid var(--borda);
}
.divisor-ou span {
  padding: 0 10px; font-size: 11px; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .05em; font-family: var(--fonte-titulo);
}

.aviso-dados-salvos {
  /* Barra de informação, não caixa de sucesso. Antes era `border: 1px solid var(--verde)`
     cheio, que numa coluna de 1 fr ficava um retângulo verde enorme em volta de uma frase
     de 12 px. Agora: filete de acento à esquerda, fundo lavrado, altura do conteúdo. */
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 0;
  background: rgba(65, 187, 150, .09);
  border: 1px solid rgba(65, 187, 150, .26);
  border-left: 3px solid var(--verde);
  border-radius: calc(var(--raio) * .6);
  font-size: 12.5px; line-height: 1.35; color: var(--tinta);
}
.aviso-dados-salvos::before {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px;
  background: var(--verde-escuro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.aviso-dados-salvos span { flex: 1 1 auto; min-width: 0; }
.aviso-dados-salvos button {
  flex: 0 0 auto; background: none; border: 0; color: var(--verde-escuro);
  font-family: var(--fonte-titulo); font-size: 12px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  padding: 4px 2px; min-height: 32px;
}
.aviso-dados-salvos button:hover { color: var(--tinta); }

/* ---------------------------------------------------------- compromissos */

.compromissos { border-bottom: 1px solid var(--borda); background: var(--branco); }
.compromissos-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.compromisso { display: flex; align-items: center; gap: 12px; color: var(--tinta-suave); }
.compromisso svg { color: var(--vermelho-escuro); flex: 0 0 auto; }
.compromisso strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px; color: var(--tinta); line-height: 1.3; }
.compromisso span { display: block; font-size: 13px; }

/* ---------------------------------------------------------------- seções */

.secao { padding: 64px 0; }
.secao-clara { background: var(--fundo-claro); }
.secao-escura { background: var(--fundo-escuro); color: rgba(255,255,255,.88); }
.secao-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.secao-titulo { margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 32px; line-height: 1.2; letter-spacing: -.01em; color: var(--tinta); }
.secao-titulo-clara { color: var(--branco); }
.secao-descricao { margin: 0; color: var(--tinta-suave); font-size: 15px; }
.secao-descricao a { color: var(--vermelho-escuro); }

.rotulo {
  margin: 0 0 10px; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vermelho-escuro);
}
.rotulo-claro { color: #ff8a92; }

.duas-colunas { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.coluna-texto p { color: var(--tinta-suave); }
.secao-escura .coluna-texto p { color: rgba(255,255,255,.76); }
.coluna-imagem { margin: 0; }
.coluna-imagem img { width: 100%; height: auto; border-radius: var(--raio); background: var(--branco); }
.coluna-imagem figcaption { margin-top: 10px; font-size: 13px; color: var(--tinta-fraca); text-align: center; }

.lista-checagem { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.lista-checagem li { position: relative; padding-left: 28px; color: var(--tinta); font-weight: 500; }
.lista-checagem li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 9px;
  border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg);
}

.nota-rotulo { font-size: 13px; color: var(--tinta-fraca); border-left: 3px solid var(--borda); padding-left: 12px; margin-top: 20px; }

.numeros-oficiais { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--borda); }
.numeros-oficiais strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 18px; color: var(--tinta); }
.numeros-oficiais span { font-size: 13px; color: var(--tinta-suave); }

.lista-contato { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.lista-contato li { display: flex; gap: 12px; align-items: baseline; }
.lista-contato span { min-width: 96px; font-size: 13px; color: rgba(255,255,255,.6); }
.lista-contato a { color: var(--branco); font-weight: 500; text-decoration: none; }
.lista-contato a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- accordion */

.acordeao { margin-top: 24px; border-top: 1px solid var(--borda); }
.acordeao details { border-bottom: 1px solid var(--borda); }
.acordeao summary {
  padding: 18px 40px 18px 0; cursor: pointer; list-style: none; position: relative;
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 16px; color: var(--tinta);
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--tinta-suave); border-bottom: 2px solid var(--tinta-suave);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--transicao);
}
.acordeao details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.acordeao details p { margin: 0 0 18px; color: var(--tinta-suave); font-size: 15px; }

/* --------------------------------------------------------- barra de frete */

.barra-frete { margin-bottom: 24px; padding: 14px 18px; background: var(--fundo-claro); border: 1px solid var(--borda); border-radius: var(--raio); }
.barra-frete p { margin: 0 0 10px; font-size: 14px; color: var(--tinta-suave); }
.barra-frete strong { color: var(--tinta); }
.barra-frete-trilho { height: 6px; background: var(--borda); border-radius: 3px; overflow: hidden; }
.barra-frete-progresso { height: 100%; width: 0; background: var(--verde); border-radius: 3px; transition: width 260ms ease; }
.barra-frete.completa { background: #eaf7f2; border-color: #bfe6d7; }
.barra-frete.completa p { color: var(--ok); font-weight: 500; }

/* -------------------------------------------------------- filtros e grade */

.ordenar { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinta-suave); }
.ordenar select {
  padding: 9px 34px 9px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  background: var(--branco) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235b5e63' stroke-width='1.8' stroke-linecap='round' d='M1 1.5L6 6.5L11 1.5'/></svg>") no-repeat right 12px center;
  appearance: none; -webkit-appearance: none; cursor: pointer; font-size: 14px;
}

.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.filtro-chip {
  padding: 9px 18px; border: 1px solid var(--borda-forte); border-radius: 999px;
  background: var(--branco); color: var(--tinta-suave); cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 14px;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.filtro-chip:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro-chip.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

.grade-produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grade-produtos[aria-busy="true"] { min-height: 240px; }
.estado-carregando { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--tinta-fraca); }
.erro-carregamento { grid-column: 1 / -1; padding: 40px 20px; text-align: center; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-claro); }
.erro-carregamento p { margin: 0 0 14px; color: var(--aviso); }
.busca-vazia { padding: 40px 0; text-align: center; color: var(--tinta-suave); }

.cartao-produto {
  display: flex; flex-direction: column; background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.cartao-produto:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }

.cartao-foto {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  background: var(--fundo-claro); border: 0; border-bottom: 1px solid var(--borda);
  padding: 16px; cursor: pointer; overflow: hidden;
}
.cartao-foto img { width: 100%; height: 100%; object-fit: contain; background: var(--fundo-claro); }
.cartao-selo {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px;
  background: var(--tinta); color: var(--branco); border-radius: var(--raio-pequeno);
  font-family: var(--fonte-titulo); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

.cartao-corpo { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; flex: 1; align-content: start; }
/* O corpo do card é um flex column com `gap: 4px`, mas categoria, peso e o selo do
   Pix são `<p>` — e a folha do user-agent dá a `<p>` `margin: 1em 0`. A 12px de
   fonte isso são 12px em cima e 12px embaixo; a 13px, 13 e 13. Medido no iPhone 15
   Pro em 2026-10-19: dos 347px do corpo do card, **142px eram margem e padding** —
   41% de espaço em branco, e a maior parte dela era esse default que ninguém
   escreveu. Zerando, quem manda no ritmo é o `gap`, que já existia. */
.cartao-corpo p { margin: 0; }
.cartao-categoria {
  /* `--tinta-suave` (#5b5e63) e não `--tinta-fraca` (#86898f): a 12px, o cinza
     claro dava **3,51:1** sobre branco e WCAG 1.4.3 exige 4,5:1 para texto desse
     tamanho. O suave dá 6,51:1. Letra miúda e clara é o que faz a vitrine parecer
     rascunho — e aqui ainda por cima era ilegível de fato. */
  font-size: 12px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartao-nome {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 500; font-size: 15px; line-height: 1.35;
  color: var(--tinta); min-height: 2.7em; text-wrap: balance;
}
.cartao-peso { font-size: 13px; color: var(--tinta-suave); }
.cartao-preco-linha { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; }
.cartao-preco { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; color: var(--tinta); }
.cartao-parcela { font-size: 12px; color: var(--tinta-suave); }
.cartao-pix { font-size: 12px; color: var(--ok); font-weight: 500; }
/* Um único botão por card. O card inteiro já abre o detalhe (foto e nome são
   clicáveis), então um segundo botão "Detalhes" em 36 cards era só ruído. */
.cartao-acoes { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.cartao-nome-link { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; display: block; }

/* ---------------------------------------------------------------- rodapé */

.rodape { background: var(--fundo-claro); border-top: 1px solid var(--borda); padding-top: 48px; }
.rodape-grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 40px; }
.rodape-marca img { width: 132px; margin-bottom: 14px; }
.rodape-marca p { font-size: 14px; color: var(--tinta-suave); margin: 0 0 16px; }
.rodape-coluna h3 { margin: 0 0 14px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta); }
.rodape-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape-coluna li { font-size: 14px; color: var(--tinta-suave); }
.rodape-coluna a { color: var(--tinta-suave); text-decoration: none; }
.rodape-coluna a:hover { color: var(--vermelho-escuro); text-decoration: underline; }
.rodape-coluna .botao-link { color: var(--tinta-suave); font-size: 14px; }
.lista-pagamento li { line-height: 1.45; }
.rodape-nota { font-size: 13px; color: var(--tinta-suave); margin: 14px 0 4px; }
.selo-stripe { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--raio-pequeno); }
.selo-stripe img { display: block; width: 150px; height: auto; }
.selo-stripe:hover img { opacity: .88; }
.selo-stripe:focus-visible { outline-offset: 4px; }

.redes { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.redes a {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--borda-forte); border-radius: 50%; color: var(--tinta-suave); text-decoration: none;
  transition: color var(--transicao), border-color var(--transicao);
}
.redes a:hover { color: var(--vermelho-escuro); border-color: var(--vermelho-escuro); }

/* Evidências de segurança. Uma faixa só, acima dos dados legais, com quatro
   afirmações conferíveis — não é mural de selos. O verde é o mesmo do "pago" e
   do preço no Pix; o texto usa os tons de leitura já definidos na paleta. */
.rodape-confianca {
  border-top: 1px solid var(--borda);
  padding-top: 20px; padding-bottom: 20px;
}
.confianca-lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 28px; list-style: none; margin: 0; padding: 0;
}
.confianca-item {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-suave);
}
.confianca-item svg { flex: 0 0 auto; margin-top: 1px; color: var(--verde-escuro); }
.confianca-item div { min-width: 0; }
.confianca-item strong {
  display: block; margin-bottom: 2px;
  font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 600;
  line-height: 1.3; color: var(--tinta);
}
.confianca-item span { display: block; }
/* O cartão inteiro é o alvo do link para a página de segurança da Stripe: o
   texto continua legível e o alvo passa de 15 px de altura para a altura toda
   do item. `strong`/`span` mantêm a cor de leitura; o sublinhado aparece só no
   hover/focus para não competir com os outros três cartões. */
.confianca-item-link {
  display: block; min-width: 0; color: inherit; text-decoration: none;
  border-radius: var(--raio-pequeno);
}
.confianca-item-link:hover strong,
.confianca-item-link:focus-visible strong {
  color: var(--vermelho-escuro);
  text-decoration: underline; text-underline-offset: 2px;
}
.confianca-item-link:focus-visible { outline-offset: 3px; }

.rodape-legal { border-top: 1px solid var(--borda); padding-top: 24px; padding-bottom: 28px; font-size: 13px; color: var(--tinta-suave); }
.rodape-legal p { margin: 0 0 12px; }
.aviso-golpe { padding: 12px 14px; background: #fff6f5; border: 1px solid #f3cfcb; border-radius: var(--raio-pequeno); color: var(--aviso); }
.rodape-copyright { color: var(--tinta-fraca); margin-bottom: 0; }

/* ------------------------------------------------------------ formulários */

.formulario { display: grid; gap: 14px; }
.formulario-titulo { margin: 0 0 4px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; color: var(--branco); }
.campo { display: grid; gap: 6px; flex: 1; }
.campo label { font-size: 13px; font-weight: 500; color: var(--tinta-suave); }
.secao-escura .campo label { color: rgba(255,255,255,.7); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 13px; background: var(--branco);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  transition: border-color var(--transicao);
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tinta); outline: none; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 1px; }
.campo input[aria-invalid="true"] { border-color: var(--aviso); }
.campo-duas { display: flex; gap: 14px; }
.campo-tres { display: flex; gap: 14px; }
.campo-largo { flex: 2; }
.campo-junto { display: flex; gap: 8px; }
.campo-junto input { flex: 1; }
.campo-cep, .campo-cupom { margin-top: 14px; text-align: left; }

.formulario-aviso { margin: 0; font-size: 13px; min-height: 1em; }
.formulario-aviso.erro { color: var(--aviso); }
.formulario-aviso.ok { color: var(--ok); }
.formulario-aviso.info { color: var(--tinta-suave); }

.formulario-inline { display: flex; gap: 10px; max-width: 460px; margin: 20px auto 0; }
.formulario-inline input { flex: 1; padding: 12px 14px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); }

.opcao-check { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 14px; color: var(--tinta-suave); cursor: pointer; }
.opcao-check input { width: 18px; height: 18px; accent-color: var(--vermelho-escuro); }

.grupo-opcoes { border: 0; margin: 18px 0 0; padding: 0; }
.grupo-opcoes legend { font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px; padding: 0 0 10px; }
.opcoes-frete { display: grid; gap: 8px; }
/* Recalculando o frete sem mover o chão. `.calculando` só escurece e troca o
   cursor: nenhuma propriedade que mude altura. É de propósito — trocar as opções
   renderizadas por uma linha de "Calculando…" e devolvê-las depois deslocava o
   CTA "Ir para o pagamento" em 120 px ~150 ms DEPOIS do clique, e o clique caía
   fora do botão. Ver `carregarFreteNoCheckout` em loja.js. */
.opcoes-frete.calculando { opacity: .55; transition: opacity var(--transicao); }
.opcoes-frete.calculando .opcao-frete { cursor: progress; }
.opcao-frete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); cursor: pointer; background: var(--branco);
  transition: border-color var(--transicao), background var(--transicao);
  /* Palco da varredura — mesmo dispositivo do `.botao`: recorte e contexto de
     empilhamento, sem mudar caixa. */
  position: relative; overflow: hidden; isolation: isolate;
}
.opcao-frete:hover { border-color: var(--tinta); }
.opcao-frete input { width: 18px; height: 18px; accent-color: var(--vermelho-escuro); flex: 0 0 auto; }
.opcao-frete.selecionada { border-color: var(--vermelho-escuro); background: #fff5f5; --varredura: rgba(245, 51, 63, .22); }
.opcao-frete.selecionada input { accent-color: var(--vermelho-escuro); }
/* A opção mais barata da lista QUANDO ela é dos Correios — classe e selo postos por
 * `melhorPrecoFrete` / `renderizarFreteOpcoes` em `loja.js`, que devolvem `null` em
 * qualquer outra situação (uma opção só, empate, estimativa, vencedora de outra
 * transportadora). Sem a classe não há destaque, então não há afirmação.
 * `--tinta` é a cor do `.cartao-selo`: a folha já usa preto para marca da loja — e
 * verde NESTA folha é sucesso (o "Grátis" ao lado é `--ok`), então um selo verde
 * competiria com o valor grátis na mesma linha. Branco sobre #1e1f20 mede 16,51:1.
 * Borda vai a `--tinta`, o mesmo tom que `.opcao-frete:hover` já usa: ênfase sem
 * inventar cor nova. */
.opcao-frete.melhor-preco { border-color: var(--tinta); }
/* Vem depois de `.selecionada` com especificidade maior de propósito: a seleção
   continua vermelha mesmo quando a linha também é a melhor escolha, senão o cliente
   perderia a única marca que diz o que ele escolheu. */
.opcao-frete.melhor-preco.selecionada { border-color: var(--vermelho-escuro); }
/* `flex: 1 1 100%`: a linha do selo ocupa a largura INTEIRA da linha de frete, e é
   isso que faz a frase caber numa linha só em 393 px e acima (medido: 1 linha em
   393 e 1440; em 320 px ela quebra em duas, sem nunca transbordar). Colocá-la dentro
   de `.opcao-frete-texto` não funcionava: ali restam ~190 px e a frase inteira não
   cabia — virava um selo de duas, três linhas.
   `padding-left` de 30 px = 18 do rádio + 12 do `gap`, alinhando o selo embaixo do
   nome; é padding e não margin porque margin somaria ao `flex-basis: 100%` e o item
   ficaria 30 px mais largo que a linha — transbordo horizontal, que nesta casa não é
   cosmético: muda o viewport de layout, o Chrome compensa com zoom e TODO alvo de
   toque encolhe junto. O `flex-wrap: wrap` no `.opcao-frete` é o que abre essa segunda
   linha, e o `min-width: 0` no texto é a contraparte que impede o preço de ser
   empurrado para ela. */
.opcao-frete-selo { flex: 1 1 100%; min-width: 0; padding-left: 30px; }
.opcao-frete-texto { flex: 1; min-width: 0; font-size: 14px; }
.opcao-frete-texto strong { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px; }
.opcao-frete-texto span { color: var(--tinta-suave); font-size: 13px; }
.opcao-frete-selo .selo-melhor-preco {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 9px;
  background: var(--tinta); color: var(--branco); border-radius: var(--raio-pequeno);
  font-family: var(--fonte-titulo); font-size: 11.5px; font-weight: 600; line-height: 1.35;
}
.opcao-frete-selo .selo-melhor-preco::before {
  content: ''; width: 8px; height: 4px; flex: 0 0 auto;
  /* Visto desenhado com bordas e `rotate` — o mesmo traço de `.lista-checagem
     li::after` desta folha. Sem emoji: `tests/frontend_loja.test.mjs` recusa emoji
     no frontend, e ícone aqui é SVG inline ou CSS. */
  border-left: 2px solid var(--branco); border-bottom: 2px solid var(--branco);
  transform: rotate(-45deg) translateY(-1px);
}
/* `flex: 0 0 auto`: quem aperta é a coluna de texto, que quebra; a de preço não.
   Sem isto, "R$ 15,45" podia ser espremida e quebrar em duas linhas. */
.opcao-frete-valor { flex: 0 0 auto; white-space: nowrap; font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; }
.opcao-frete-valor.gratis { color: var(--ok); }
.aviso-frete { margin: 10px 0 0; font-size: 13px; color: var(--tinta-suave); }
/* Degradação visível: quando a cotação na transportadora não saiu, o valor é estimado e o
   cliente tem de saber. Não é alarme (a loja segue vendendo), mas não pode ser invisível —
   foi o silêncio aqui que deixou a loja cobrando R$ 21,90 por um SEDEX de R$ 35,77. */
.aviso-frete-estimativa {
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo-claro);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--vermelho);
  border-radius: var(--raio-pequeno);
}

.aviso-indisponivel {
  margin: 0 0 14px; padding: 12px 14px; font-size: 14px;
  background: #fff6f5; border: 1px solid #f3cfcb; border-left: 3px solid var(--aviso);
  border-radius: var(--raio-pequeno); color: var(--aviso);
}
.nota-seguranca { font-size: 13px; color: var(--tinta-fraca); margin: 12px 0 0; }
.explicacao { font-size: 14px; color: var(--tinta-suave); margin: 0 0 14px; }

/* ------------------------------------------------------- barra da sacola */

.barra-sacola {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--branco); border-top: 1px solid var(--borda); box-shadow: 0 -2px 14px rgba(30,31,32,.08);
}
.barra-sacola-botao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; color: var(--tinta);
}

/* ------------------------------------------------- overlay, drawer, modal */

.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(18,19,20,.72); backdrop-filter: blur(2px); }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(460px, 100%); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--branco); box-shadow: var(--sombra-3);
}
.drawer-carrinho { border-radius: 24px 0 0 24px; overflow: hidden; }
.drawer-cabecalho {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(20px + env(safe-area-inset-top)) 22px 18px; border-bottom: 1px solid var(--borda);
}
.drawer-cabecalho h2 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.drawer-cabecalho p { margin: 3px 0 0; color: var(--tinta-fraca); font-size: 12px; }
.drawer-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 22px 24px;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent;
}
.drawer-rodape {
  flex: 0 0 auto; display: grid; gap: 8px; padding: 14px 22px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda); background: rgba(255,255,255,.98); box-shadow: 0 -12px 30px rgba(30,31,32,.05);
}
.drawer-rodape .totais { gap: 2px; margin-bottom: 4px; }
.drawer-rodape .totais-total { padding-top: 0; border: 0; }
.drawer-rodape .botao-comprar { min-height: 50px; border-radius: 14px; font-size: 16px; }
.drawer-rodape .botao-link-whatsapp {
  justify-self: center; background: none; border: 0; padding: 6px 14px; min-height: 44px;
  cursor: pointer; font-size: 12px; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px;
}
.drawer-rodape .botao-link-whatsapp:hover { color: var(--verde-escuro); }
.barra-frete-progresso { background: var(--verde); }
.drawer-vazio { min-height: 100%; display: grid; place-content: center; justify-items: center; padding: 48px 20px; text-align: center; color: var(--tinta-suave); }
.drawer-vazio strong { color: var(--tinta); font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; }
.drawer-vazio p { max-width: 270px; margin: 8px 0 20px; font-size: 14px; line-height: 1.55; }
.sacola-sincronizacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 8px 0; color: var(--tinta-fraca); font-size: 12px; }
.sacola-sincronizacao.erro { color: var(--aviso); }
.sacola-sincronizacao button { flex: 0 0 auto; border: 0; background: none; padding: 8px 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sacola-resumo { margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--borda); }
.sacola-opcoes { display: grid; gap: 18px; padding-top: 4px; }
.sacola-opcoes .campo { margin: 0; }
.sacola-opcoes .campo > label { margin-bottom: 8px; font-weight: 600; color: var(--tinta); }
.sacola-opcoes .campo-junto { gap: 8px; }
.sacola-opcoes input { min-width: 0; border-radius: 12px; background: var(--fundo-claro); }
.sacola-opcoes .botao-secundario { border-radius: 12px; }

.item-sacola { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.item-sacola:last-child { border-bottom: 0; }
.item-sacola img { width: 80px; height: 88px; object-fit: contain; background: var(--fundo-claro); border-radius: 14px; padding: 6px; }
.item-sacola-info { min-width: 0; }
.item-sacola-nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: 14px; line-height: 1.4; margin: 0 0 4px; }
.item-sacola-preco-unit { font-size: 12px; color: var(--tinta-fraca); margin: 0 0 10px; }
.item-sacola-controles { display: flex; align-items: center; gap: 12px; }
.item-sacola-qtd { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 999px; background: var(--branco); }
.item-sacola-qtd button { width: 40px; height: 40px; background: none; border: 0; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: var(--tinta); }
.item-sacola-qtd button:hover:not(:disabled) { background: var(--fundo-claro); color: var(--vermelho-escuro); }
.item-sacola-qtd button:disabled { opacity: .3; cursor: default; }
.item-sacola-qtd span { min-width: 22px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.item-sacola-remover { background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; font-size: 12px; color: var(--tinta-fraca); text-decoration: underline; text-underline-offset: 3px; }
.item-sacola-remover:hover { color: var(--aviso); }
.item-sacola-total { padding-top: 2px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-sacola-total.pendente { color: var(--tinta-fraca); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .drawer-carrinho { animation: sacola-entra .28s cubic-bezier(.16,1,.3,1); }
  .item-sacola { animation: item-sacola-entra .2s ease-out; }
}
@keyframes sacola-entra { from { opacity: .7; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes item-sacola-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .drawer-carrinho { width: 100%; border-radius: 0; }
  .drawer-cabecalho { padding: calc(14px + env(safe-area-inset-top)) 18px 14px; }
  .drawer-corpo { padding: 6px 18px 20px; }
  .drawer-rodape { padding: 12px 18px calc(8px + env(safe-area-inset-bottom)); }
  .item-sacola { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; }
  .item-sacola img { width: 72px; height: 80px; }
}

.totais { display: grid; gap: 8px; }
.totais-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--tinta-suave); }
.totais-linha strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; color: var(--tinta); }
/* Desconto tem de parecer dinheiro economizado. A regra anterior visava
   `.totais-linha.desconto`, classe que o HTML nunca teve — ou seja, o desconto
   continuava preto com um hífen na frente. Apontar pelo id evita mexer no
   literal `class="totais-linha" style="display: none;` que a auditoria trata
   como contrato. */
#carrinho-desconto-linha strong,
#chk-resumo-desconto-linha strong { color: var(--verde); }
.totais-linha .frete-prazo { display: block; font-size: 12px; color: var(--tinta-fraca); font-weight: 400; text-align: right; }
.totais-linha.pix strong { color: var(--verde); }
.totais-total { padding-top: 10px; border-top: 1px solid var(--borda); font-size: 15px; color: var(--tinta); }
.totais-total strong { font-size: 22px; font-weight: 700; }
.totais-destaque { margin-bottom: 14px; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal-caixa {
  position: relative; width: 100%; max-width: 520px; background: var(--branco);
  border-radius: var(--raio); box-shadow: var(--sombra-3);
}
.modal-caixa-larga { max-width: 900px; }
.modal-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.modal-cabecalho h2 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 19px; }
.modal-corpo { padding: 22px; }
.texto-legal p { font-size: 14px; color: var(--tinta-suave); margin: 0 0 12px; }
.texto-legal a { color: var(--vermelho-escuro); }

/* -------------------------------------------------------------- checkout */

.passos { display: flex; gap: 8px; list-style: none; margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--borda); }
.passo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-fraca); font-family: var(--fonte-titulo); font-weight: 500; }
.passo span {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid var(--borda-forte); border-radius: 50%; font-size: 12px; font-weight: 600;
}
.passo.ativo { color: var(--tinta); }
.passo.ativo span { background: var(--cta); border-color: var(--cta); color: var(--branco); }
.passo.concluido { color: var(--tinta-suave); }
.passo.concluido span { border-color: var(--verde); color: var(--verde); }

#painel-passo-1 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 22px; align-items: start; }
/* **O banner de "dados salvos" atravessa as duas colunas.** Sem isto o painel é uma
   grade de `1fr 300px` e o banner — que só aparece em quem já comprou antes, ou seja,
   na maioria — vira um item de grade: ele ocupa os `1fr` inteiros esticado até a
   altura do fluxo e empurra o formulário para a coluna de 300 px. Foto de tela de
   2026-10-21 em Porto Alegre: caixote verde vazio ocupando metade da tela e campos de dois
   em dois espremidos do lado. O grid não é flexbox: item que não declara coluna herda
   coluna. Medido no desktop porque em mobile a grade abaixo já é de uma coluna. */
#painel-passo-1 > .aviso-dados-salvos { grid-column: 1 / -1; }
/* Pagamento e entrega são UM item da grade, na coluna larga; o resumo fica nos 300 px
   ao lado do fluxo inteiro — não só ao lado da entrega, que era o desenho antigo. */
#painel-passo-1 > .checkout-fluxo { grid-column: 1; min-width: 0; }
#painel-passo-1 > aside { grid-column: 2; min-width: 0; }
.painel[hidden] { display: none; }
#painel-passo-3 { padding: 22px; }

.resumo-lateral { align-self: start; padding: 18px; background: var(--fundo-claro); border: 1px solid var(--borda); border-radius: var(--raio); }
.resumo-lateral h3 { margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; }
.resumo-itens { list-style: none; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--borda); display: grid; gap: 8px; max-height: 220px; overflow-y: auto; }
.resumo-itens li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--tinta-suave); }
.resumo-itens strong { color: var(--tinta); font-weight: 500; white-space: nowrap; }

.metodos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.metodo {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 12px;
  background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  cursor: pointer; font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; color: var(--tinta);
  transition: border-color var(--transicao), background var(--transicao);
}
.metodo span { font-family: var(--fonte-texto); font-weight: 400; font-size: 12px; color: var(--tinta-suave); }
.metodo:hover { border-color: var(--tinta); }
.metodo.ativo { border-color: var(--vermelho-escuro); background: #fff5f5; }
.metodo.ativo span { color: var(--vermelho-escuro); }

.acoes-passo { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.selo-ok, .selo-erro { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; margin-bottom: 16px; }
.selo-ok { background: #eaf7f2; color: var(--ok); }
.selo-erro { background: #fff1f0; color: var(--aviso); }
.pedido-numero { font-size: 15px; color: var(--tinta-suave); margin: 0 0 16px; }
.pedido-numero strong { font-family: var(--fonte-titulo); color: var(--tinta); font-size: 17px; }

.bloco-pix, .bloco-boleto { margin: 20px 0; padding: 18px; background: var(--fundo-claro); border: 1px solid var(--borda); border-radius: var(--raio); }
.bloco-titulo { margin: 0 0 12px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; }
.pix-qr { width: 200px; height: 200px; margin: 0 auto 14px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
.codigo-pix {
  width: 100%; padding: 12px; margin-bottom: 12px; background: var(--branco);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all; resize: none; color: var(--tinta);
}
.codigo-boleto { font-size: 14px; letter-spacing: .04em; }

.resumo-final { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--borda); font-size: 14px; }
.resumo-final dt { color: var(--tinta-fraca); }
.resumo-final dd { margin: 0; color: var(--tinta); font-weight: 500; }

/* ------------------------------------------------------- detalhe produto */

.produto-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 26px; }
.produto-galeria img#produto-foto { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); }
.produto-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.produto-miniaturas:empty { display: none; }
.produto-miniaturas.vazia { display: none; }
.produto-miniaturas button { width: 62px; height: 62px; padding: 4px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-pequeno); cursor: pointer; }
.produto-miniaturas button.ativo { border-color: var(--vermelho-escuro); }
.produto-miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.produto-info { display: flex; flex-direction: column; gap: 10px; }
.produto-categoria { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); }
.produto-info h2 { margin: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 26px; line-height: 1.25; }
.produto-preco { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: 30px; color: var(--tinta); }
.produto-preco small { display: block; font-family: var(--fonte-texto); font-weight: 400; font-size: 13px; color: var(--tinta-suave); }
.produto-meta { margin: 0; font-size: 14px; color: var(--tinta-suave); }
.produto-quantidade { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.produto-quantidade label { font-size: 14px; color: var(--tinta-suave); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); }
.stepper button { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 19px; line-height: 1; color: var(--tinta-suave); }
.stepper button:hover { color: var(--vermelho-escuro); }
.stepper input { width: 46px; height: 44px; border: 0; border-left: 1px solid var(--borda); border-right: 1px solid var(--borda); text-align: center; background: var(--branco); }
.produto-descricao { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--tinta-suave); white-space: pre-line; max-height: 260px; overflow-y: auto; }
/* Link para o site oficial fora da coluna de compra: um `<a>` vermelho no meio
   do funil é uma porta de saída concorrendo com o "Adicionar à sacola". */
.produto-oficial { margin: 14px 0 0; font-size: 13px; color: var(--tinta-fraca); }
.produto-oficial a { color: var(--tinta-suave); }
.produto-ganhos { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--borda); display: grid; gap: 8px; }
.produto-ganhos li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tinta-suave); }
.produto-ganhos svg { color: var(--verde); flex: 0 0 auto; }

#rastreio-resultado { margin-top: 16px; }
.rastreio-linha { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.rastreio-linha dt { color: var(--tinta-fraca); }
.rastreio-linha dd { margin: 0; color: var(--tinta); font-weight: 500; }

/* ----------------------------------------------------------------- toasts */

/* Canto superior direito, abaixo do cabeçalho fixo: no canto inferior esquerdo
   o toast caía exatamente em cima da barra de frete grátis na dobra. */
.toasts { position: fixed; right: 20px; top: 124px; z-index: 120; display: grid; gap: 8px; width: min(380px, calc(100% - 40px)); pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px;
  background: var(--fundo-escuro); color: var(--branco); border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-2); font-size: 14px; line-height: 1.45;
  animation: toast-entra 180ms ease;
}
/* Faixa em tinta com o acento na cor certa: um verde só em toda a loja
   (o oficial #41BB96), e o toast deixa de parecer notificação de outro app. */
.toast { background: var(--fundo-escuro); box-shadow: 0 8px 24px rgba(15,15,16,.28); }
.toast.ok { border-left: 4px solid var(--verde); }
.toast.erro { background: var(--aviso); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- whatsapp float */

.whatsapp-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #1faa53; color: var(--branco); box-shadow: var(--sombra-2);
  transition: background var(--transicao);
}
.whatsapp-flutuante:hover { background: #178c44; }

/* --------------------------------------------------------------- Stripe */

.StripeElement { padding: 12px 13px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); background: var(--branco); }
.StripeElement--focus { border-color: var(--tinta); }
.StripeElement--invalid { border-color: var(--aviso); }

/* ---------------------------------------------------- menu de navegação */

.botao-menu {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 1px solid transparent;
  border-radius: var(--raio-pequeno); cursor: pointer; color: var(--tinta);
}
.botao-menu:hover { border-color: var(--borda); }

.drawer-menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  width: min(320px, 86%); display: flex; flex-direction: column;
  background: var(--branco); box-shadow: var(--sombra-3); overflow-y: auto;
  /* Mesmo teto dinâmico do `.drawer`: `bottom: 0` amarra ao viewport de layout, e
     no iOS as barras comem parte do viewport visual. Aqui o rodapé do menu usa
     `margin-top: auto`, então sem o teto ele pode ficar abaixo do alcance do dedo. */
  max-height: 100dvh;
}
.drawer-menu-cabecalho { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.drawer-menu nav { display: grid; padding: 8px 0; }
.drawer-menu nav a, .drawer-menu nav button {
  display: block; width: 100%; min-height: 48px; padding: 13px 18px;
  background: none; border: 0; border-bottom: 1px solid var(--fundo-claro);
  text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 16px; color: var(--tinta);
}
.drawer-menu nav a:hover, .drawer-menu nav button:hover { background: var(--fundo-claro); color: var(--vermelho-escuro); }
.drawer-menu-busca { padding: 12px 18px; border-bottom: 1px solid var(--borda); }
.drawer-menu-busca input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno); background: var(--fundo-claro); font-size: 16px;
}
.drawer-menu-resultados { padding: 0 18px 8px; display: grid; gap: 2px; }
.drawer-menu-resultados:empty { display: none; }
.drawer-menu-rodape { margin-top: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); font-size: 13px; color: var(--tinta-suave); }
.drawer-menu-rodape a { color: var(--tinta); }

/* ------------------------------------------- "ver todos os produtos" */

.ver-todos { display: flex; justify-content: center; margin-top: 30px; }
.ver-todos-contagem { display: block; margin-top: 10px; font-size: 13px; color: var(--tinta-fraca); text-align: center; }

@media (max-width: 1024px) {
  .botao-menu { display: inline-flex; }
}

@media (max-width: 640px) {
  .filtros {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro-chip { flex: 0 0 auto; scroll-snap-align: start; }
  /* No celular o toast morava em `bottom: 78px` — exatamente em cima do
     "Finalizar pedido" do drawer (medido: 14.364 px² de sobreposição num iPhone
     414x896) e por cima da opção de frete selecionada dentro do checkout.
     `pointer-events: none` impedia de ROUBAR o clique, mas não de ESCONDER o
     botão: o cliente apertava às cegas. Em cima, abaixo do cabeçalho, o toast não
     disputa área com nenhum CTA — todos os botões principais desta loja vivem no
     pé da tela. */
  .toasts {
    top: calc(74px + env(safe-area-inset-top));
    bottom: auto; left: 12px; right: 12px; width: auto;
  }
  .hero-conteudo { padding-top: 76px; }
}

/* ------------------------------------------------------------- responsivo */

@media (max-width: 1180px) {
  /* Sem espaço para o card sem cobrir o texto do hero. */
  .hero-destaque { display: none; }
}

@media (max-width: 1024px) {
  /* O menu horizontal não cabe com logo + busca + SSO + sacola: a conta fecha em
     ~998 px e o container em 1024 px tem 984 px úteis. O hambúrguer assume aqui,
     não só no celular. */
  .nav-principal { display: none; }
  /* Sem a nav, nada empurra as ações para a direita e o grupo ficava colado na
     marca com ~150 px vazios à direita (medido em 768 e 861 px). */
  .acoes-cabecalho { margin-left: auto; }
  .grade-produtos { grid-template-columns: repeat(3, 1fr); }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Coluna única no checkout — e a declaração das colunas filho TEM de vir junto.
     Só trocar para `1fr` não desfaz o `grid-column: 2` que a regra de desktop põe
     no `aside`: nada declara a segunda coluna, então o grid **cria uma implícita**,
     ela come o espaço que sobra, e o `1fr` encolhe para o min-content do
     formulário. Medido em 2026-10-23 com Chromium: iPhone Air de 420 px ficava com
     colunas de 117 px e 239 px — os campos do formulário (CEP incluso) espremidos a
     117 px, o resumo largado à direita e um buraco de 163 px acima do formulário.
     Tablet de 820 px idem: resumo mais largo que o formulário. O e2e não via nada
     disso porque preenche campo por `page.type`, que não precisa de campo visível
     nem largo — a mesma cegueira que o bloco mobile desta suíte já registra.
     `minmax(0, 1fr)` em vez de `1fr`: sem o `0`, um `<code>` ou CEP longo ainda
     estica a coluna pelo min-content. */
  #painel-passo-1 { grid-template-columns: minmax(0, 1fr); }
  #painel-passo-1 > .checkout-fluxo,
  #painel-passo-1 > aside { grid-column: 1; }
  /* Antes o resumo subia para `order: -1`, ou seja, era a primeira coisa da tela no
     celular. Com o pagamento no topo isso deixou de ser verdade por desenho: quem
     abre a folha no telefone vê primeiro Google Pay / Apple Pay e o cartão, e o
     resumo desce para o fim — o total já está à vista na barra fixa do topo. */
}

@media (max-width: 860px) {
  .duas-colunas { grid-template-columns: 1fr; gap: 28px; }
  .compromissos-grade { grid-template-columns: 1fr 1fr; gap: 16px; }
  .hero-titulo { font-size: 40px; }
  .hero-subtitulo { font-size: 16px; }
  .busca input { width: 190px; }
  .confianca-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
  /* O botão flutuante do WhatsApp tem 54 px e fica a 18 px (ou 74 px) do pé.
     Sem esta folga ele cobre a última linha do copyright quando a página chega
     ao fim — medido em 390 px: sobreposição de 117 px² no texto. */
  .rodape-legal { padding-bottom: calc(28px + 80px); }
}

@media (max-width: 400px) {
  /* Duas colunas de 140 px quebram "não passam pelos nossos servidores" em cinco
     linhas; uma coluna lê melhor e o bloco continua curto. */
  .confianca-lista { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .secao { padding: 44px 0; }
  .secao-titulo { font-size: 25px; }
  /* Esta linha sumiu numa reescrita e o celular passou a herdar as 3 colunas do
     breakpoint de 1024px: cards de 103px de largura por 515px de altura, com o
     botão Comprar a 1.733px do topo. Dois por linha é o que cabe e o que vende. */
  .grade-produtos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cartao-foto { padding: 8px; }
  /* No celular o dono quer o vídeo presente, mas o foco é compra: o hero deixa
     de ocupar 135% da tela e vira ~74%, de modo que a primeira fileira de
     produtos já aparece sem rolar uma tela inteira. Sem palco sticky e sem zoom
     — efeito de scroll cinemático em tela pequena só custa quadro e bateria. */
  .hero { min-height: 66vh; min-height: 66dvh; }
  .hero-palco { position: relative; height: auto; min-height: 66vh; min-height: 66dvh; align-items: flex-end; }
  .hero-video-moldura { transform: none; border-radius: 0; box-shadow: none; }
  .hero-conteudo { transform: none; }
  .hero-scroll-dica { display: none; }
  .hero-conteudo { padding-top: 24px; padding-bottom: 64px; }
  .hero-titulo { font-size: 32px; }
  .hero-subtitulo { font-size: 15px; margin-bottom: 22px; }
  .hero-acoes .botao { flex: 1; }
  /* Uma linha só: menu + logo + sacola. A busca vai para dentro do drawer, o que
     devolve ~70px de altura para o vídeo e para os produtos — no celular cada
     pixel acima da primeira fileira de produtos é pixel que atrasa a compra. */
  .cabecalho-inner { flex-wrap: nowrap; padding-top: 8px; padding-bottom: 8px; min-height: 60px; gap: 8px; }
  .cabecalho .busca { display: none; }
  .marca img { width: 96px; }
  /* 44, e não 42: era 42 aqui enquanto a regra base de `.botao-sacola` já dizia
     44, e o `min-width/min-height: 44px` do bloco de alvo de toque só ganhava
     porque `min-*` se sobrepõe a `width/height`. Consertar na fonte em vez de
     deixar duas declarações contraditórias no arquivo. */
  .botao-menu, .botao-sacola { width: 44px; height: 44px; }
  .acoes-cabecalho { margin-left: auto; }
  .compromissos-grade { grid-template-columns: 1fr; }
  .faixa-servico-inner { justify-content: flex-start; }
  .faixa-servico-links { display: none; }
  .cartao-corpo { padding: 10px 12px 12px; }
  .cartao-nome { font-size: 13.5px; }
  .cartao-preco { font-size: 17px; }
  .cartao-acoes { grid-template-columns: 1fr; }
  .cartao-detalhes { display: none; }
  .produto-detalhe { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .produto-info h2 { font-size: 21px; }
  .metodos { grid-template-columns: 1fr; }
  .campo-duas, .campo-tres { flex-direction: column; }
  /* `safe` é o que impede o alinhamento de jogar conteúdo para fora do alcance:
     sem suporte a `safe` a declaração inteira é descartada e vale o
     `align-items: flex-start` da regra base, que também deixa o topo alcançável.
     Os dois caminhos são seguros; o que não era seguro era o `flex-end` puro. */
  .modal { padding: 0; align-items: safe flex-end; }
  .modal-caixa {
    max-width: none;
    /* TETO DE ALTURA + SCROLL PRÓPRIO, e isto não é estética.
       A folha nasce no pé da tela (`align-items: flex-end`). Sem limite de altura
       ela cresce para CIMA e estoura para fora do contêiner de scroll — e o que
       passa do bordo inicial de um scroll container é inalcançável, porque
       `scrollTop` não vai a negativo. Medido num iPhone 414x896 com o checkout
       aberto: `#ent-nome` em y=-225, `scrollTop=0` e faixa de scroll
       `scrollHeight-clientHeight = 0`. Ou seja, nome, CPF, e-mail, WhatsApp, CEP
       e rua não podiam ser tocados de jeito nenhum; o cliente só alcançava de
       "Número" para baixo, e o formulário começava sem nenhum campo visível.
       Com o teto, a caixa nunca ultrapassa a tela e quem rola é o conteúdo dela,
       a partir do topo. */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    /* Sem isto o scroll da folha encadeia com o da página atrás e o arrasto
       vaza para o body — que já está com overflow:hidden, então o gesto morre. */
    overscroll-behavior: contain;
    border-radius: var(--raio) var(--raio) 0 0;
  }
  .passos { padding: 14px 18px; gap: 6px; }
  .passo { font-size: 12px; }
  /* `#painel-passo-2` saiu desta regra: ele mora DENTRO do 1 desde 2026-10-24, e
     um `padding` de id (que vence a classe `.checkout-pagamento`) indentava o
     pagamento em relação à entrega na mesma coluna. */
  #painel-passo-1, #painel-passo-3 { padding: 18px; }
  .acoes-passo { flex-direction: column-reverse; }
  .acoes-passo .botao { width: 100%; }
  .whatsapp-flutuante { bottom: 74px; }
  /* Este bloco vem DEPOIS do outro `max-width: 640px`, então o que ele declara
     vence — e era ele que devolvia o toast para `bottom: 78px`, em cima do
     "Finalizar pedido". Repete a âncora de cima de propósito. */
  .toasts { top: calc(74px + env(safe-area-inset-top)); bottom: auto; }
  .numeros-oficiais { gap: 20px; }
  .rodape-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* A varredura de hover já nasce atrás desta guarda — ela só é declarada dentro de
     `@media (prefers-reduced-motion: no-preference)` lá em cima. A linha abaixo não é
     redundância decorativa: ela é a afirmação explícita de que a faixa some, em vez de
     virar um flash de .001 ms no fim do hover. O hover de COR dos botões continua
     valendo, porque feedback de estado não é o que se pede para desligar. */
  .botao::after,
  .opcao-frete.selecionada::after { animation: none !important; opacity: 0 !important; }
  .hero-video { display: none; }
  .hero { background-image: url('/estatico/loja/video/vivapop-hero-poster.jpg'); background-size: cover; background-position: center; }
}

/* ── Alvo de toque: 44x44 no mínimo ───────────────────────────────────────────
   Regra 14 do NORTE (§9): todo elemento interativo tem no mínimo 44x44 px de
   área de toque (WCAG 2.5.8). Medido em 2026-10-18 num iPhone 15 Pro, a página
   tinha **32 alvos abaixo disso**, em 7 grupos: 42x42 nos dois ícones do
   cabeçalho (faltavam 2 px), 42 de altura nos chips de categoria e no <select>
   de ordenar, 36 no nome do produto dentro do card, 22-24 nos botões-link e
   16-36 nos links de contato e do rodapé. Ícone de 42 px com padding curto É um
   alvo de 42 px — o dedo não acerta.

   São duas técnicas, e a escolha entre elas não é estética:

   - Onde a caixa PODE crescer (chip, select, ícone do cabeçalho, linha de
     rodapé) usa-se `min-height`: o elemento fica maior e pronto.
   - Onde crescer deslocaria o layout (o nome do produto dentro do card, cuja
     geometria é medida em teste) usa-se `padding-block` com `margin-block`
     negativo do mesmo valor: a área de toque cresce e a caixa visual fica onde
     estava.

   A regra que decide é a vizinhança. `margin` negativa só vale onde NÃO há outro
   alvo do lado — dentro de um parágrafo. Em lista, área de toque que cresce para
   fora da linha se sobrepõe à linha de cima e à de baixo, e o navegador entrega
   o toque para uma só: trocar 14 links pequenos por 14 links que às vezes abrem o
   vizinho seria pior do que o problema original. Por isso as listas CRESCEM. */

.filtro-chip { min-height: 44px; }
.ordenar select { min-height: 44px; }
.botao-menu, .botao-sacola { min-width: 44px; min-height: 44px; }

/* Nome do produto no card: 36 -> 44 sem mudar a altura do card. */
.cartao-nome-link { padding-block: 4px; margin-block: -4px; }

/* Botão-link em texto corrido (o "Rastrear pedido" do acordeão): cresce a área
   sem empurrar a linha seguinte. Só onde não há alvo vizinho. */
.botao-link { display: inline-block; }
p .botao-link { padding-block: 11px; margin-block: -11px; }

/* Listas de contato e do rodapé: a linha inteira vira o alvo. `gap: 0` porque o
   `min-height` já faz o espaçamento — deixar os dois somaria buraco demais. */
.lista-contato { gap: 0; }
.lista-contato li { align-items: center; min-height: 44px; }
.lista-contato a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape-coluna ul { gap: 0; }
.rodape-coluna li { display: flex; align-items: center; min-height: 44px; }
.rodape-coluna a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape-coluna .botao-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 0; margin-block: 0;
}

/* Ícones de rede social: já tinham 44 de altura e 36 de largura. O `gap: 10px`
   da `.redes` continua separando — não há sobreposição de área de toque. */
.redes a {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Segunda passada da mesma regra, com os seletores que a medição apontou — 32
   alvos viraram 4 no iPhone e sobraram estes, que só aparecem em viewport maior
   (iPad/desktop) ou depois que a sacola tem item.

   `.botao { min-height }` é de propósito global: o dono pediu "botões
   consistentes e adequados", e a maneira de garantir isso é uma regra só, não
   uma exceção por tela. O botão do hero media 41 px (padding 11px 20px com fonte
   de 15) — 3 px abaixo do mínimo, que é exatamente a faixa em que o dedo erra. */
.botao { min-height: 44px; }
.botao-fechar { min-width: 44px; min-height: 44px; }
.barra-sacola-botao { min-height: 44px; }
.nav-principal a { display: inline-flex; align-items: center; min-height: 44px; }
.faixa-servico-links a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-scroll-dica { display: inline-flex; align-items: center; min-height: 44px; }

/* "Sobre" media 43,6 px de LARGURA — a altura já estava em 44, mas o alvo é
   bidimensional. Link curto de navegação precisa do mínimo nos dois eixos. */
.nav-principal a, .faixa-servico-links a { min-width: 44px; justify-content: center; }

/* Os dois links de SAC do rodapé do menu mobile mediam 96x15 e 121x15 — os
   menores alvos da loja inteira, e são justamente o telefone e o e-mail de
   atendimento, ou seja, o caminho de quem está com um problema. Estão num <p>
   separados por <br>, então o truque do padding com margin negativo NÃO serve
   aqui: as duas linhas ficam a ~15 px de distância e áreas de toque de 44 px se
   sobreporiam, entregando o toque para o link errado. Viram bloco, um por linha,
   cada um com os seus 44 px. */
.drawer-menu-rodape a {
  display: flex; align-items: center;
  min-height: 44px; min-width: 44px;
}

/* ── Cabeçalho de "Nossos produtos" comprimido ────────────────────────────────
   Entre o fim do hero e o primeiro card havia ~330 px só de cabeçalho de seção:
   padding 44 do `.secao`, título, descrição de duas linhas, barra de progresso
   do frete grátis (margin 24 + padding 28), chips de categoria (margin 26) e o
   select de ordenar. Nenhum é dispensável — a barra de frete grátis e os filtros
   vendem — mas 330 px é meia tela de iPhone SE antes de aparecer produto.
   Aperta o espaçamento sem tirar nada do que o cliente usa.

   Escopado em `#produtos` de propósito: as outras seções não estão no caminho da
   primeira venda e podem continuar com o respiro original. Mudar `.secao` inteiro
   achataria a página toda, inclusive o que vem depois da compra. */
#produtos { padding-top: 28px; }
#produtos .secao-cabecalho { margin-bottom: 16px; gap: 12px; }
#produtos .secao-titulo { margin-bottom: 6px; }
#produtos .secao-descricao { font-size: 14px; line-height: 1.45; }
#produtos .barra-frete { margin-bottom: 12px; padding: 11px 14px; }
#produtos .barra-frete p { margin-bottom: 8px; font-size: 13px; }
#produtos .filtros { margin-bottom: 14px; }

@media (max-width: 640px) {
  #produtos { padding-top: 22px; }
  #produtos .secao-cabecalho { margin-bottom: 12px; }
  #produtos .secao-titulo { font-size: 22px; }
  #produtos .secao-descricao { font-size: 13px; line-height: 1.4; }
}

/* ── ORDEM DO ARQUIVO: o que vem por último vence ─────────────────────────────
   Os blocos de alvo de toque acima foram acrescentados no FIM do arquivo, depois
   dos `@media (max-width: 640px)`. Com especificidade igual, a última declaração
   ganha — e media query não aumenta especificidade. O efeito colateral medido:
   o `display: inline-flex` que dei ao `.hero-scroll-dica` para ele atingir 44 px
   de alvo **ressuscitou a dica de rolagem no celular**, onde ela é `display: none`
   de propósito (com o hero em 66dvh e a grade logo abaixo, não há o que anunciar).

   Regra para quem acrescentar CSS aqui: se a classe tem override dentro de um
   `@media`, ou a regra nova entra dentro do mesmo `@media`, ou o override é
   reafirmado no fim. É o que faz a linha abaixo. */
@media (max-width: 640px) {
  .hero-scroll-dica { display: none; }
}

/* ── Destaque comprável DENTRO do hero, no celular ────────────────────────────
   O `.hero-destaque` já existia, já é populado com produto real do catálogo
   (`VP-KIT-FAMILIA`, o que a home oficial destaca em "APROVEITE AS NOSSAS
   OFERTAS!") e já tem botão Comprar ligado via `data-comprar`. Só que era
   `display: none` abaixo de 1180px — ou seja, justamente no celular, onde está a
   maioria das compras, o primeiro botão de compra da página ficava a **1,84
   telas** de distância (medido num iPhone SE: y=1.224 px).

   Trazer o card para dentro do hero é o que mais encurta o caminho até a primeira
   compra sem tocar no vídeo, que é o que o dono disse que gosta. Vira uma faixa
   horizontal de ~72px ancorada no pé do hero, em vez do cartão vertical de
   288x390 do desktop.

   Está DENTRO de `@media (max-width: 640px)` e no fim do arquivo de propósito: a
   regra que esconde o card mora em `@media (max-width: 1180px)`, que também vale
   em 640px. Media query não aumenta especificidade, então o que decide é a ordem
   — e esta vem depois. (Lição já paga uma vez neste arquivo com o
   `.hero-scroll-dica`.) */
@media (max-width: 640px) {
  .hero-destaque {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "foto nome   comprar"
      "foto preco  comprar";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    position: absolute;
    left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    padding: 8px 10px;
    z-index: 4;
  }
  /* O rótulo "Destaque na loja oficial" sai no celular por espaço, e a conta é
     apertada: a primeira versão desta faixa tinha 3 linhas e 119 px de altura, e
     com isso ela subia por cima dos botões "Ver produtos" e "Kit Cinema em Casa"
     — medido: 4.909 px² e 4.337 px² de sobreposição num iPhone SE, além de
     2.116 px² sobre o botão de áudio. Uma faixa que cobre o CTA é pior que faixa
     nenhuma. Com 2 linhas ela fica em ~60 px e nada se sobrepõe.
     O rótulo continua no desktop, que é onde ele cabe. */
  .hero-destaque-rotulo { display: none; }
  .hero-destaque img {
    grid-area: foto; width: 44px; height: 44px;
    object-fit: contain; background: var(--branco); border-radius: var(--raio-pequeno);
  }
  .hero-destaque-nome {
    grid-area: nome; margin: 0; font-size: 12.5px; line-height: 1.25;
    /* Uma linha só: nome de produto nesta loja chega a 40 caracteres
       ("Pipoca Pronta Doce com um Toque de Sal 20g") e duas linhas aqui
       empurrariam o preço para fora da faixa. */
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-destaque-preco { grid-area: preco; margin: 0; font-size: 15px; }
  .hero-destaque-preco small { display: inline; font-size: 10.5px; margin-left: 6px; }
  .hero-destaque-comprar { grid-area: comprar; min-width: 92px; }
  /* O conteúdo do hero sobe para não ficar embaixo da faixa. A conta é
     faixa(86) + offset do pé(10) + folga(10) = 106 px. Com 84 px (primeira
     tentativa) ainda restavam 12 px de sobreposição nos botões "Ver produtos" e
     "Kit Cinema em Casa" — medido, não estimado. */
  .hero-conteudo { padding-bottom: 106px; }
  /* O botão de áudio morava em `bottom: 24px`, que agora é território da faixa de
     destaque: 828 px² de sobreposição medidos, ou seja, quem quisesse ligar o som
     do vídeo acertava o "Comprar". Vai para o canto superior direito, logo abaixo
     do cabeçalho (65 px no celular), que é o lugar convencional de controle de
     vídeo em hero e não disputa espaço com nada — o pé do hero é da faixa. */
  .hero-audio {
    top: calc(74px + env(safe-area-inset-top));
    bottom: auto;
    right: 12px;
  }
}

/* O botão de áudio subiu para o canto superior direito (o pé do hero agora é da
   faixa de destaque). Medido no iPhone SE: a CAIXA do `<h1>` cruza a caixa do
   botão em ~1.700 px², mas o TEXTO não — `Range.getClientRects()` dá as linhas do
   título terminando em x<=211 enquanto o botão começa em x=317. Ou seja, não há
   sobreposição visual e não há o que reservar.

   A primeira tentativa reservou `padding-right: 58px` no rótulo e no título, e o
   efeito foi o contrário do desejado: o título (que tem `<br>` fixo) passou a
   quebrar em mais linhas e o hero cresceu de 440 para 490 px, empurrando o
   primeiro produto para baixo. Reserva de espaço só se mede o texto invadindo, não
   a caixa — ficou registrado aqui para ninguém "consertar" de novo. */

/* ── Método de pagamento indisponível tem de PARECER indisponível ──────────────
   Medido na captura de tela que o dono mandou (iPhone, 18/10 17:15): os cards de
   Pix e Boleto estavam `disabled` no DOM, mas visualmente IDÊNTICOS aos
   habilitados — fundo branco, borda escura, e `cursor: pointer` herdado de
   `.metodo`. Não existia nenhuma regra `:disabled` neste arquivo. O resultado é a
   queixa literal: "não consegui selecionar o boleto ou o pix".

   Um controle que parece vivo e não responde é pior do que um controle ausente: o
   cliente conclui que a loja está quebrada e insiste nele, em vez de seguir pelo
   caminho que existe. Por isso o estado indisponível é inequívoco (opaco, borda
   tracejada, cursor de proibido) e o texto miúdo deixa de prometer desconto para
   dizer o que está acontecendo. */
.metodo:disabled,
.metodo[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
  background: var(--fundo-claro);
  border-style: dashed;
  border-color: var(--borda);
  color: var(--tinta-fraca);
}
.metodo:disabled:hover,
.metodo[aria-disabled="true"]:hover { border-color: var(--borda); }
.metodo:disabled span,
.metodo[aria-disabled="true"] span { color: var(--tinta-fraca); }

/* --------------------------------------------- pagamento pendente (Pix/boleto) */

/* Faixa no fluxo do conteúdo, não flutuante. Um bar fixo no topo do mobile foi o
   que empurrou o primeiro "Comprar" para 1,84 telas de distância; aqui ela ocupa o
   lugar dela e o resto desce junto. Amarela de propósito: não é sucesso (o dinheiro
   ainda não entrou) nem erro (nada falhou). */
.faixa-pendente {
  background: #fff8e1;
  border-bottom: 1px solid #f0d787;
  padding-block: 10px;
}
.faixa-pendente-inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.faixa-pendente-texto {
  flex: 1 1 260px; margin: 0;
  font-size: 14px; line-height: 1.45; color: #5c4a12;
}
.faixa-pendente-texto strong { font-family: var(--fonte-titulo); font-weight: 600; }
.faixa-pendente-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Alvo de toque: o botão de retomar tem de ter 44 px mesmo com texto curto, e o de
   fechar já vem com o mínimo pela regra geral de `.botao-fechar`. */
#botao-retomar-pagamento { min-height: 44px; padding-inline: 18px; }

@media (max-width: 640px) {
  .faixa-pendente { padding-block: 12px; }
  .faixa-pendente-inner { gap: 10px; }
  .faixa-pendente-texto { flex: 1 1 100%; font-size: 13.5px; }
  .faixa-pendente-acoes { flex: 1 1 100%; }
  /* O CTA ocupa a largura toda no celular: é a ação que importa, e o X continua ao
     lado com alvo próprio. `margin-block` negativo não se aplica aqui porque há
     vizinho — sobrepor área entregaria o toque para o botão errado. */
  #botao-retomar-pagamento { flex: 1 1 auto; }
}

/* ------------------------------------------------- confirmação ao vivo do CEP */

/* Fica NO FLUXO, logo abaixo do campo de CEP, e não flutuante: uma camada fixa
   cobrindo o formulário é o que já custou caro nesta loja (barra fixa no mobile
   empurrou o primeiro "Comprar" para 1,84 telas). `role="status"` + `aria-live`
   no HTML é o que faz o leitor de tela anunciar — antes não havia um único
   aria-live no checkout inteiro. */
.cep-resultado {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 0; padding: 10px 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  background: var(--fundo-claro);
  font-size: 13.5px; line-height: 1.4; color: var(--tinta);
}
.cep-resultado-texto { flex: 1 1 200px; margin: 0; }
.cep-resultado-texto strong { font-family: var(--fonte-titulo); font-weight: 600; }
/* Alvo de toque: 44 px mesmo com o texto curto ("Usar este endereço"). */
.cep-resultado-botao { min-height: 44px; padding-inline: 14px; flex: 0 0 auto; font-size: 13.5px; }

/* Os três estados são distinguíveis por COR E POR TEXTO, nunca só por cor —
   daltonismo. `buscando` é neutro, `ok` é verde, `erro` é o vermelho da casa. */
.cep-resultado.buscando { border-style: dashed; color: var(--tinta-suave); }
.cep-resultado.ok { background: #f2fbf6; border-color: #b9e3cd; }
.cep-resultado.ok .cep-resultado-texto { color: var(--ok); }
.cep-resultado.erro { background: #fff5f5; border-color: #f2c4c7; }
.cep-resultado.erro .cep-resultado-texto { color: #a02029; }

@media (max-width: 640px) {
  .cep-resultado { padding: 10px; gap: 8px; }
  .cep-resultado-texto { flex: 1 1 100%; }
  /* No celular o botão ocupa a linha inteira: é a ação do bloco, e dividir a linha
     com o texto deixaria os dois apertados. */
  .cep-resultado-botao { flex: 1 1 100%; }
}

/* ── O iPad era o PIOR aparelho da loja, e o motivo era um buraco entre duas
      media queries ─────────────────────────────────────────────────────────────
   Medido em 2026-10-19 antes deste bloco (sonda reproduzível
   /tmp/vp/drive/sonda-hero-ipad.mjs, sete aparelhos):

     aparelho                hero    destaque    1º Comprar    telas
     iPad portrait (768)     115%    OCULTO      y=1905        1,86
     iPad portrait visual    115%    OCULTO      y=1790        1,94
     iPad landscape (1024)   115%    OCULTO      y=1618        2,11
     iPad Pro 11 (834)       115%    OCULTO      y=2119        1,77
     iPhone 15 Pro (393)      66%    visível     y=474         0,56
     Pixel 8 (412)            66%    visível     y=516         0,56
     Desktop 1440            115%    visível     y=752         0,84

   O tablet ficava **3,5x pior que o celular e 2,5x pior que o desktop** — o
   aparelho com a segunda maior tela de compra era o que mais escondia o produto.

   A causa não é o hero ser alto (desktop também é 115% e chega a 0,84). É que
   `.hero-destaque` é escondido em `max-width: 1180px` — com razão, o card
   vertical de 288x390 não cabia sem cobrir o texto do hero — e volta como faixa
   horizontal em `max-width: 640px`. Entre 641 e 1180, exatamente onde mora todo
   iPad, não havia regra nenhuma: 115vh de vídeo, nenhum produto e nenhum botão de
   compra à vista.

   A solução não é inventar um terceiro tratamento, é estender a faixa que já
   funciona no celular para a faixa de largura que faltava, na mesma altura em que
   o desktop coloca o card (`bottom: 88px`) — que é o que faz o desktop medir 0,84
   telas. Escala um pouco maior que a do celular (foto 56px em vez de 44, nome
   13,5px em vez de 12,5) porque há espaço e o dedo fica mais longe da tela.

   **Este bloco mora no FIM do arquivo de propósito.** Media query não aumenta
   especificidade, então contra o `display: none` de `max-width: 1180px` o que
   decide é a ordem. É a terceira vez que esta folha cobra isso — as outras duas
   estão registradas mais acima (`.hero-scroll-dica` e o próprio destaque no
   celular). */
@media (min-width: 641px) and (max-width: 1180px) {
  .hero-destaque {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "foto nome   comprar"
      "foto preco  comprar";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 88px;
    width: auto;
    /* Teto de largura: sem ele a faixa estica até 1140px num tablet largo e a
       coluna do nome vira um vão de texto de meia tela. Com `left` e `right`
       fixados E `max-width`, o elemento absolutamente posicionado fica
       sobre-restringido e o navegador honra `left` + `max-width` (a caixa é
       LTR), então a largura é determinística: 520px a partir de x=20. */
    max-width: 520px;
    padding: 10px 14px;
    z-index: 4;
  }
  /* O rótulo "Destaque na loja oficial" sai pelo mesmo motivo do celular: a conta
     de altura é apertada e uma linha a mais empurra a faixa por cima do CTA. */
  .hero-destaque-rotulo { display: none; }
  .hero-destaque img {
    grid-area: foto; width: 56px; height: 56px;
    object-fit: contain; background: var(--branco); border-radius: var(--raio-pequeno);
  }
  .hero-destaque-nome {
    grid-area: nome; margin: 0; font-size: 13.5px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-destaque-preco { grid-area: preco; margin: 0; font-size: 17px; }
  .hero-destaque-preco small { display: inline; font-size: 11.5px; margin-left: 6px; }
  .hero-destaque-comprar { grid-area: comprar; min-width: 104px; }
  /* O texto do hero sobe para não ficar embaixo da faixa. A conta é
     faixa + offset do pé + folga, e o valor da faixa é **medido, não estimado**:
     a primeira versão daqui reservava 180px assumindo faixa de 76px (o número do
     celular), e a sonda de sobreposição acusou **199 px²** de faixa por cima de um
     dos CTAs do hero em todas as seis larguras de tablet. A faixa real tem 93px
     (foto de 56px + padding de 10px em cima e embaixo + linha de preço), então a
     reserva é 93 + 88 + 19 = 200px. O base é 74px, que serve ao card vertical do
     desktop — aqui a faixa mora na mesma altura, então tem de ser a soma das duas.
     É o mesmo erro que o bloco de 640px documenta ter pago uma vez (84px
     reservados, 12px de sobreposição restantes). */
  .hero-conteudo { padding-bottom: 200px; }
}

/* ── CEP por rua: a saída para quem não sabe o próprio CEP ─────────────────────
   Mesmo vocabulário visual do `.cep-resultado` (mesma borda, mesmo fundo, mesmos
   estados distinguíveis por COR E TEXTO), porque é a continuação da mesma
   conversa: a pessoa está tentando descobrir o endereço dela.

   Alvo de toque em tudo que é clicável — o e2e varre a página inteira e recusa
   qualquer botão abaixo de 44x44 (regra 14 do NORTE / WCAG 2.5.8). Por isso os
   dois botões novos têm `min-height`, e não só padding: padding sozinho dá 44 px
   enquanto o texto for de uma linha, e rua de nome longo quebra em duas.

   No FIM do arquivo pela mesma razão de sempre: `.botao-link` já tem regra em
   `max-width: 640px` mais acima, e media query não aumenta especificidade. */
.cep-busca-abrir {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin: -8px 0 0;
  color: var(--tinta-suave);
  font-size: 13.5px;
}
.cep-busca {
  margin: 4px 0 0; padding: 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
  background: var(--fundo-claro);
}
.cep-busca-campos {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
}
.cep-busca-campos .campo { margin: 0; }
.cep-busca-aviso { margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--tinta-suave); }
.cep-busca-aviso:empty { display: none; }
.cep-busca-aviso.ok { color: var(--ok); }
.cep-busca-aviso.erro { color: #a02029; }
.cep-busca-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cep-busca-lista:empty { display: none; }
.cep-busca-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rua cep" "onde cep";
  align-items: center; column-gap: 10px; row-gap: 1px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
  background: var(--branco); cursor: pointer; text-align: left;
  font-family: inherit;
  transition: border-color var(--transicao);
}
.cep-busca-item:hover { border-color: var(--vermelho-escuro); }
.cep-busca-item:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.cep-busca-item-rua {
  grid-area: rua; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 14px; line-height: 1.3; color: var(--tinta);
}
/* O bairro é o que decide entre duas ruas de nome igual, então ele tem linha
   própria e nunca some: a ordem que o ViaCEP devolve não é confiável, e é por
   isto que a escolha é da pessoa e não do código. */
.cep-busca-item-onde { grid-area: onde; font-size: 12.5px; line-height: 1.35; color: var(--tinta-suave); }
.cep-busca-item-cep { grid-area: cep; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }

@media (max-width: 640px) {
  /* Três campos lado a lado em 390px deixariam o de rua com ~90px — largo o
     bastante para o texto não caber e a pessoa não conferir o que digitou. UF é
     curta o bastante para dividir a primeira linha com a cidade; a rua, que é o
     campo que se confere, fica inteira na segunda. */
  .cep-busca-campos { grid-template-columns: 68px minmax(0, 1fr); }
  .cep-busca-campos .campo:last-child { grid-column: 1 / -1; }
  .cep-busca { padding: 10px; }
  .cep-busca-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rua" "onde" "cep";
    row-gap: 2px;
  }
  .cep-busca-item-cep { justify-self: start; }
}

/* Páginas legais (privacidade e termos), exigidas pelo consent screen do Google
   e pela LGPD. Conteúdo textual simples, mesma paleta da loja. */
.pagina-legal { background: var(--fundo-claro); color: var(--tinta); }
.conteudo-legal { max-width: 780px; padding: 48px 20px 80px; }
.conteudo-legal h1 { font-size: clamp(28px, 4vw, 38px); margin: 8px 0 4px; }
.conteudo-legal h2 { font-size: 20px; margin: 32px 0 8px; }
.conteudo-legal p, .conteudo-legal li { font-size: 15px; line-height: 1.7; color: var(--tinta-suave); }
.conteudo-legal ul { padding-left: 22px; }
.conteudo-legal a { color: var(--vermelho-escuro); }
.conteudo-legal code { background: var(--branco); padding: 1px 5px; border-radius: 4px; }

/* Endereços salvos no checkout: chips de escolha e o atalho de novo endereço. */
.enderecos-checkout { display: grid; gap: 8px; margin: 0 0 4px; }
.enderecos-checkout-titulo {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 13px; color: var(--tinta-suave); letter-spacing: .01em;
}
.enderecos-checkout-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.endereco-chip {
  appearance: none; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--branco); color: var(--tinta); font: inherit; font-size: 13px;
  padding: 8px 14px; cursor: pointer; text-align: left; line-height: 1.25;
  max-width: 100%; transition: border-color .15s ease, background .15s ease;
}
.endereco-chip:hover { border-color: var(--tinta); }
.endereco-chip[aria-checked="true"] {
  border-color: var(--verde-escuro);
  background: rgba(65, 187, 150, .10);
  box-shadow: inset 0 0 0 1px var(--verde-escuro);
}
.endereco-chip-novo { border-style: dashed; color: var(--vermelho-escuro); }
.enderecos-checkout-salvar {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--tinta-suave);
}
.enderecos-checkout-salvar input { width: auto; }

/* Barra de ação do checkout — sticky no topo do modal. O total e o CTA
   principal ficam sempre visíveis; o rodapé continua existindo para quem
   prefere concluir depois de revisar tudo. */
.checkout-barra {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0; padding: 12px 22px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.checkout-barra-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.checkout-barra-rotulo { font-size: 12px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.checkout-barra-total { font-family: var(--fonte-titulo); font-size: 20px; color: var(--tinta); white-space: nowrap; }
.checkout-barra-nota {
  font-size: 12px; color: var(--verde-escuro); font-weight: 600;
  background: rgba(65, 187, 150, .12); border-radius: 999px; padding: 3px 10px;
}
.checkout-barra-nota:empty { display: none; }
.checkout-barra-cta { flex: 0 0 auto; min-height: 46px; padding: 0 22px; }
@media (max-width: 640px) {
  .checkout-barra { padding: 10px 16px; }
  .checkout-barra-total { font-size: 18px; }
  .checkout-barra-nota { display: none; }
  .checkout-barra-cta { padding: 0 16px; font-size: 14px; }
}

/* Checkout unificado, com o pagamento em cima (dono, 2026-10-24). As duas seções
   continuam separadas no DOM — a validação e os testes conhecem `#painel-passo-2`
   e `#formulario-entrega` — mas quem decide a ordem é o fluxo: `.checkout-fluxo`
   empilha pagamento e entrega dentro da coluna larga, e o resumo fica ao lado.
   O `padding` é zero aqui porque o painel-pai já dá os 22 px; dar de novo faria o
   bloco de pagamento parecer mais largo que o de entrega. */
.checkout-fluxo { min-width: 0; }
.checkout-pagamento { padding: 0; }
/* A linha que separa pagamento de entrega: 22 px de ar de cada lado, e nada de
   double padding — o painel-pai já dá os 22 px das bordas da folha. */
#formulario-entrega { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--borda); }
.checkout-secao-titulo {
  margin: 0 0 14px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 17px;
  color: var(--tinta);
}
.checkout-pagamento .metodos,
.checkout-pagamento .painel-metodo,
.checkout-pagamento .aviso-indisponivel {
  max-width: 640px;
}

/* Documento no alto do pagamento: é o campo que libera o 1 toque e a nota fiscal.
   Acompanha a largura da faixa de carteiras (até 640 px) e traz o selo de status
   ao lado do rótulo para o cliente saber na hora o que falta ou se já liberou. */
.campo-documento { max-width: 640px; margin-bottom: 14px; }
.campo-documento-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.campo-documento input {
  font-variant-numeric: tabular-nums;
  max-width: 360px;
}
.campo-documento[data-estado="valido"] input {
  border-color: var(--verde-escuro);
  background: #f2fbf6;
}
.campo-documento[data-estado="invalido"] input {
  border-color: var(--aviso);
  background: #fff5f5;
}
.documento-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-family: var(--fonte-titulo); font-size: 11.5px; font-weight: 600;
  line-height: 1.4;
  background: var(--fundo-claro); color: var(--tinta-suave);
  border: 1px solid var(--borda-forte);
}
.documento-status[data-estado="digitando"] {
  background: #f2fbf6; color: var(--ok); border-color: #b9e3cd;
}
.documento-status[data-estado="invalido"] {
  background: #fff5f5; color: var(--aviso); border-color: #f2c4c7;
}
.documento-status[data-estado="valido"] {
  background: #eaf7f2; color: var(--ok); border-color: var(--verde);
}
.documento-status[data-estado="valido"]::before {
  content: ''; width: 8px; height: 4px; flex: 0 0 auto;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg) translateY(-1px);
}
.campo-dica {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-suave);
}
.campo-documento[data-estado="invalido"] .campo-dica {
  color: var(--aviso); font-weight: 500;
}
.campo-documento[data-estado="valido"] .campo-dica {
  color: var(--ok); font-weight: 500;
}
@media (max-width: 640px) {
  .campo-documento input { max-width: none; }
}

/* Linha "Entregar em" — o estado de quem tem endereço cadastrado. É uma faixa de
   confirmação, não um formulário: mostra para onde vai e dá um único jeito de
   mudar. Sem chips, sem checkbox de salvar, sem card de cadastro. */
.entrega-resumo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--fundo-claro); border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.entrega-resumo-info { min-width: 0; }
.entrega-resumo-rotulo {
  margin: 0 0 2px; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.entrega-resumo-endereco {
  margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tinta);
  overflow-wrap: anywhere;
}
.entrega-resumo-trocar {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px;
  background: var(--branco); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pequeno); color: var(--tinta);
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; cursor: pointer;
}
.entrega-resumo-trocar:hover { border-color: var(--tinta); }
@media (max-width: 640px) {
  .entrega-resumo { flex-direction: column; align-items: stretch; }
  .entrega-resumo-trocar { width: 100%; }
}

/* Dica de prazo no bloco de frete e aviso de transparencia LGPD no checkout. */
.frete-dica-prazo {
  margin-top: 8px;
}
.nota-lgpd {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--fundo-claro);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.nota-lgpd-resumo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--tinta);
}
.nota-lgpd-resumo svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ok);
}
.nota-lgpd-detalhes {
  margin: 4px 0 0;
}
.nota-lgpd-detalhes > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin-left: -4px;
  font-family: var(--fonte-titulo);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cta);
  cursor: pointer;
}
.nota-lgpd-lista {
  margin: 4px 0 10px;
  padding-left: 18px;
  color: var(--tinta-suave);
}
.nota-lgpd-lista li {
  margin-bottom: 6px;
}
.nota-lgpd-lista strong {
  color: var(--tinta);
}
.nota-lgpd-rodape {
  margin: 0;
  color: var(--tinta-suave);
}
.nota-lgpd-rodape a {
  color: var(--cta);
  font-weight: 500;
}

/* Telas de 320 px (iPhone SE de 1ª geração): mesmo com os dois SSO em ícone,
   menu + marca + G + maçã + sacola passam 12 px da borda. O G continua
   disponível em /loja/conta; no cabeçalho desse tamanho ficam a maçã e a
   sacola. 341 px já cabe (o conjunto termina em 332). */
@media (max-width: 340px) {
  .botao-entrar-google { display: none; }
}