/* Loja pública. Sem framework, pelo mesmo motivo do painel: é uma página só,
   e a dependência a menos vale mais do que a comodidade. */

:root {
  --fundo: #0E1116;
  --superficie: #161A21;
  --superficie-alt: #1D222B;
  --borda: #262C36;
  --texto: #E9EDF3;
  --texto-suave: #A2ACBB;
  --texto-fraco: #6C7684;
  --laranja: #FF6242;
  --laranja-escuro: #E5462A;
  --laranja-suave: rgba(255, 98, 66, 0.14);
  --verde: #2FC4B2;
  --amarelo: #FFB800;
  --raio: 12px;

  /* Respiro lateral, e não largura máxima.
     A versão anterior travava em 1180px e sobrava faixa preta dos dois lados
     numa tela grande. Numa vitrine isso é espaço desperdiçado: cabe mais
     produto por linha, e produto visível é o que converte. */
  --lado: clamp(12px, 3vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.oculto { display: none !important; }

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 17, 22, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}

.faixa {
  padding: 12px var(--lado);
  display: flex;
  align-items: center;
  gap: 16px;
}

.marca { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.marca img { border-radius: 9px; display: block; }
.marca-nome { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.marca-fim { color: var(--laranja); }

.busca { display: flex; flex: 1; max-width: 560px; gap: 8px; }
.busca input {
  flex: 1;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 10px 14px;
  color: var(--texto);
  font-size: 15px;
}
.busca input:focus { outline: none; border-color: var(--laranja); }
.busca button {
  background: var(--laranja);
  color: #fff;
  border: 0;
  border-radius: var(--raio);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.busca button:hover { background: var(--laranja-escuro); }

.conta { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }

.btn-icone {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.btn-icone:hover { color: var(--laranja); border-color: var(--laranja); }

.contador {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--laranja);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 5px;
}

.btn-conta {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-conta:hover { border-color: var(--laranja); color: var(--laranja); }

/* Rola na horizontal no celular: 45 categorias não cabem empilhadas sem
   empurrar os produtos para fora da primeira tela. */
.tira-categorias { position: relative; }

.categorias {
  padding: 0 var(--lado) 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

/**
 * Setas sobre as pontas da tira.
 *
 * Ficam escondidas quando nao ha para onde rolar daquele lado (o JS cuida do
 * atributo hidden), entao nao aparece seta que nao faz nada. O degrade ao lado
 * do botao mostra que o conteudo continua por baixo — sem ele, a tira parece
 * simplesmente acabar ali.
 */
.seta-cat {
  position: absolute;
  top: 0;
  bottom: 12px;
  z-index: 5;
  width: 46px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--texto-suave);
}
.seta-cat:hover { color: var(--laranja); }
.seta-cat[hidden] { display: none; }

#catAntes {
  left: 0;
  background: linear-gradient(90deg, var(--fundo) 55%, transparent);
  padding-right: 12px;
  justify-items: start;
  padding-left: 4px;
}
#catDepois {
  right: 0;
  background: linear-gradient(270deg, var(--fundo) 55%, transparent);
  padding-left: 12px;
  justify-items: end;
  padding-right: 4px;
}

/* No toque a tira já se arrasta, e a seta só cobriria uma categoria. */
@media (hover: none) {
  .seta-cat { display: none; }
}

.categorias button {
  flex-shrink: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.categorias button:hover { border-color: var(--laranja); color: var(--texto); }
.categorias button.ativa {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #fff;
  font-weight: 600;
}

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 40px var(--lado) 26px;
  /* Brilho quente atrás do texto, como a abertura do app. Radial e não linear:
     num bloco largo o gradiente linear cria uma faixa com borda visível. */
  background:
    radial-gradient(900px 340px at 18% -10%, var(--laranja-suave), transparent 70%);
}
.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 4.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.8px;
  max-width: 16ch;
}
.hero p {
  margin: 0;
  color: var(--texto-suave);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.55;
  max-width: 56ch;
}

.hero-numeros { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.hero-numeros div { display: flex; flex-direction: column; }
/**
 * Informação de apoio, com peso de apoio.
 *
 * "Todo dia", "Preço conferido" e "Sem cadastro" estavam em laranja e tamanho
 * de título — três chamadas do tamanho de uma manchete para explicar o que o
 * título logo acima já diz. Em branco e menores continuam legíveis e param de
 * roubar o laranja, que agora tem dono: o preço.
 */
.hero-numeros b { font-size: 17px; font-weight: 700; color: var(--texto); }
.hero-numeros span { font-size: 12.5px; color: var(--texto-fraco); }

/* ---------- comunicado do app no hero ---------- */

/**
 * Um aviso, nao um cartao de vendas.
 *
 * A versao anterior era uma caixa cinza de borda dura com tres itens dentro —
 * peso de secao inteira para dizer uma frase. Aqui e uma pilula: mesma
 * informacao, sem competir com o titulo ao lado.
 */
.hero-app {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 20px 13px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 98, 66, 0.18);
  /* Vidro sobre o gradiente do hero, em vez de bloco solido recortado nele. */
  background:
    linear-gradient(120deg, rgba(255, 98, 66, 0.12), rgba(255, 98, 66, 0) 70%),
    rgba(22, 26, 33, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 46px -20px rgba(255, 98, 66, 0.5);
}
.hero-app { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.hero-app[href]:hover { border-color: rgba(255, 98, 66, 0.45); transform: translateY(-1px); }
.hero-app img {
  border-radius: 13px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(255, 98, 66, 0.28);
}
.hero-app strong { display: block; font-size: 15px; margin-bottom: 2px; white-space: nowrap; }
.hero-app span { font-size: 12.5px; color: var(--laranja); font-weight: 600; white-space: nowrap; }

/* Some antes de ficar apertado: a partir daqui a pílula roubaria largura do
   título em vez de ocupar espaço que sobrava. A faixa do rodapé continua
   avisando do app no celular. */
@media (max-width: 1080px) {
  .hero { display: block; }

  /* Escondida por padrão e revelada pelo JS só quando existe APK: sem
     arquivo, o texto vira "Em breve na Play Store" e aí é recado ocupando o
     lugar da primeira linha de ofertas. */
  .hero-app { display: none; }
  .hero-app.tem-download {
    display: flex;
    width: 100%;
    margin-top: 22px;
    border-radius: 14px;
    padding: 12px 16px 12px 12px;
  }
  .hero-app.tem-download strong,
  .hero-app.tem-download span { white-space: normal; }
  .hero-app.tem-download .hero-app-extra { display: block; }
}

/* ---------- conteúdo ---------- */

main { padding: 8px var(--lado) 40px; }

.controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.resultado { margin: 0; font-size: 14px; color: var(--texto-suave); }
.ordenar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-fraco); }
.ordenar select {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}
.ordenar select:focus { outline: none; border-color: var(--laranja); }

.grade {
  display: grid;
  /* `auto-fill` com mínimo de 170px: dois cartões no celular e o número cresce
     sozinho conforme a tela, sem ponto de quebra escrito à mão. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.cartao {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .14s, border-color .14s;
}
.cartao:hover { transform: translateY(-3px); border-color: var(--laranja); }

.foto-caixa { position: relative; aspect-ratio: 1; background: var(--superficie-alt); }
.foto-caixa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.selo-desconto {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--verde);
  color: #04201d;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 7px;
}

/* Coração sobre a foto. Fundo escuro semitransparente porque a foto atrás
   pode ser clara ou escura, e cor sólida do tema sumiria numa das duas. */
.btn-fav {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.btn-fav:hover { background: rgba(0, 0, 0, 0.65); }
.btn-fav.ativo { color: var(--laranja); }
.btn-fav.ativo svg { fill: var(--laranja); }

.corpo { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

.nome {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto);
  /* Duas linhas fixas: sem o corte, títulos de anúncio da Shopee (que passam
     de 100 caracteres) deixam os cartões de alturas diferentes e a grade
     desalinha. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0;
}

.preco-linha { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: auto; }
/* Sobe de 18 para 20: com o botão vazado, o preço é o único peso forte do
   cartão e pode ocupar esse lugar sem brigar com nada. */
.preco { font-size: 20px; font-weight: 800; color: var(--laranja); }
.preco-antes { font-size: 12.5px; color: var(--texto-fraco); text-decoration: line-through; }
.meta { font-size: 11.5px; color: var(--texto-fraco); margin: 0; }
.estrela { color: var(--amarelo); }

/**
 * Contorno, e não bloco cheio.
 *
 * Era laranja sólido. Numa grade de cinquenta cartões isso vira uma parede de
 * laranja — e o PREÇO, que também é laranja, passa a disputar atenção com um
 * botão que se repete em todo cartão dizendo sempre a mesma coisa.
 *
 * Quem decide comprar decide pelo preço; o botão só precisa estar visível
 * quando a pessoa já quis. Vazado, ele continua óbvio como botão e devolve ao
 * preço o único laranja sólido do cartão.
 *
 * No hover ele enche — aí sim é o momento em que a pessoa está mirando nele.
 */
.botao-ir {
  margin-top: 8px;
  background: transparent;
  color: var(--laranja);
  border: 1.5px solid var(--laranja);
  border-radius: 9px;
  padding: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background .15s, color .15s;
}
.botao-ir:hover { background: var(--laranja); color: #fff; }
.botao-ir:disabled { opacity: .6; cursor: wait; }

/* ---------- estados ---------- */

.rodape-lista { padding: 28px 0; text-align: center; color: var(--texto-fraco); font-size: 14px; }

.botao-mais {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: var(--raio);
  padding: 12px 28px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.botao-mais:hover { border-color: var(--laranja); }

.esqueleto { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.esqueleto .barra { background: var(--superficie-alt); border-radius: 6px; height: 12px; margin: 8px 12px; }
.esqueleto .foto-caixa { animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

.vazio { padding: 60px 20px; text-align: center; color: var(--texto-suave); }
.vazio strong { display: block; font-size: 17px; color: var(--texto); margin-bottom: 6px; }

/* ---------- faixa do app ---------- */

.faixa-app {
  margin: 0 var(--lado) 34px;
  padding: 22px 24px;
  background: linear-gradient(120deg, var(--superficie-alt), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.faixa-app img { border-radius: 13px; flex-shrink: 0; }
.faixa-app div { flex: 1; min-width: 220px; }
.faixa-app h2 { margin: 0 0 4px; font-size: 18px; }
.faixa-app p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-suave); max-width: 60ch; }

.btn-app {
  background: var(--laranja);
  color: #fff;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}
.btn-app:hover { background: var(--laranja-escuro); }
.btn-app.indisponivel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  cursor: default;
}

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

.rodape {
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  padding: 26px var(--lado) 34px;
}
.rodape p { max-width: 780px; margin: 0 auto; text-align: center; }
.aviso { font-size: 13px; line-height: 1.6; color: var(--texto-suave); }
.miudo { font-size: 12px; line-height: 1.6; color: var(--texto-fraco); margin-top: 10px !important; }

/* ---------- folhas ---------- */

.veu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 30;
}

.folha {
  position: fixed;
  z-index: 31;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 28px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  overflow-y: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.folha-larga { width: min(1000px, calc(100vw - 32px)); }
.folha h2 { margin: 0 0 6px; font-size: 21px; }

.fechar {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 0;
  color: var(--texto-fraco);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.fechar:hover { color: var(--texto); }

.folha-nota { margin: 0 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }

.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 12.5px; color: var(--texto-fraco); margin-bottom: 6px; }
.campo input {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--texto);
  font-size: 15px;
}
.campo input:focus { outline: none; border-color: var(--laranja); }

.btn-primario {
  width: 100%;
  background: var(--laranja);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.btn-primario:hover { background: var(--laranja-escuro); }
.btn-primario:disabled { opacity: .6; cursor: wait; }

.btn-secundario {
  width: 100%;
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 10px;
  padding: 12px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.btn-secundario:hover { border-color: var(--laranja); color: var(--laranja); }

.erro {
  background: rgba(239, 83, 80, 0.12);
  border: 1px solid rgba(239, 83, 80, 0.4);
  color: #FF8A80;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 0 0 12px;
}

.alternar { margin: 18px 0 0; font-size: 13.5px; color: var(--texto-fraco); text-align: center; }
.alternar button {
  background: transparent;
  border: 0;
  color: var(--laranja);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 0 4px;
}

/* ---------- celular ---------- */

@media (max-width: 720px) {
  .faixa { flex-wrap: wrap; row-gap: 10px; }
  /* A busca vai para a segunda linha e ocupa tudo: no celular ela é o
     controle mais usado, e espremida entre a marca e a conta ficaria com
     espaço para três letras. */
  .busca { order: 3; width: 100%; max-width: none; }
  .conta { margin-left: auto; }
  .hero { padding-top: 26px; padding-bottom: 18px; }
  .hero-numeros { gap: 18px; margin-top: 16px; }
  .hero-numeros b { font-size: 19px; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .faixa-app { flex-direction: column; align-items: flex-start; text-align: left; }
  .btn-app { width: 100%; text-align: center; }

  /* Folha vira gaveta de baixo: no celular, caixa centrada com o teclado
     aberto empurra o campo para fora da tela. */
  .folha {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    max-height: 90vh;
  }
}

@media (max-width: 380px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .btn-conta { padding: 9px 12px; }
}

/* ---------- folha de conta ---------- */

.folha-conta { width: min(430px, calc(100vw - 32px)); padding: 34px 30px 28px; }

/* A logo no topo responde a uma pergunta que todo formulário de senha levanta:
   "em que site eu estou digitando isso?". Sem marca, um campo de senha flutuando
   num modal parece exatamente com o que um golpe parece. */
.conta-topo { text-align: center; margin-bottom: 24px; }
.conta-logo {
  border-radius: 16px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(255, 98, 66, 0.30);
}
.conta-topo h2 { font-size: 23px; margin-bottom: 8px; }
.conta-topo .folha-nota { margin: 0; max-width: 32ch; margin-inline: auto; }

.campo .rotulo-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.campo .rotulo-linha span { display: inline; margin: 0; }
.campo .entrada-senha { margin: 0; }
.link-fraco {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--laranja);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-fraco:hover { color: var(--laranja-escuro); }

/* "Mostrar" dentro do campo: senha de 8 caracteres digitada às escuras no
   celular erra, e errar aqui parece senha errada. */
.entrada-senha { position: relative; display: block; }
.entrada-senha input { padding-right: 84px; }
.entrada-senha button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--texto-fraco);
  cursor: pointer;
  border-radius: 8px;
}
.entrada-senha button:hover { color: var(--laranja); background: var(--superficie); }

.entrada-codigo {
  text-align: center;
  font-size: 26px;
  letter-spacing: 10px;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
}

/* Verde e não vermelho: "código enviado" e "senha alterada" são boas notícias,
   e cair no mesmo estilo do erro faz a pessoa achar que falhou. */
.recado {
  background: rgba(47, 196, 178, 0.12);
  border: 1px solid rgba(47, 196, 178, 0.35);
  color: var(--verde);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.conta-legal { margin: 16px 0 0; text-align: center; line-height: 1.5; }

.avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--laranja), var(--laranja-escuro));
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.linha-conta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--texto);
  cursor: pointer;
}
.linha-conta:hover { border-color: var(--laranja); }
.linha-conta-fim {
  background: var(--laranja-suave);
  color: var(--laranja);
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .folha-conta { width: 100%; padding: 28px 20px 24px; }
}

/* ---------- folha do produto ---------- */

/**
 * Duas colunas no computador, empilhado no celular.
 *
 * A primeira versao era uma coluna so, e a foto — quadrada, com a largura da
 * folha — virava um bloco de 700px de altura: abria a ficha e nao se via preco
 * nem botao sem rolar. Numa vitrine, esconder o preco atras de uma rolagem e o
 * pior lugar possivel para escondê-lo.
 */
.folha-produto {
  width: min(880px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
.folha-produto .fechar {
  /* Sobre a foto: fundo semitransparente porque a imagem atras pode ser clara
     e o × preto sumiria nela. */
  background: rgba(0, 0, 0, 0.5);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  color: #fff;
  z-index: 3;
}

.p-grade {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  max-height: min(86vh, 640px);
}

.p-fotos {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--superficie-alt);
  align-self: start;
}
.p-fotos::-webkit-scrollbar { display: none; }
.p-fotos img, .p-fotos video {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 1;
  object-fit: contain;
  scroll-snap-align: start;
  display: block;
  background: #fff;
}

/* A coluna da direita rola sozinha: descricao longa nao pode empurrar a foto
   nem esticar a folha inteira. */
.p-corpo {
  padding: 24px 26px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* Espaço para o × , que fica no canto e passaria por cima da última linha. */
.p-nome { margin: 0 0 12px; padding-right: 36px; font-size: 17px; line-height: 1.4; font-weight: 600; }

.p-precos { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.p-preco { font-size: 30px; font-weight: 700; color: var(--laranja); letter-spacing: -0.5px; }
.p-antes { font-size: 15px; color: var(--texto-fraco); text-decoration: line-through; }
.p-off { background: var(--verde); color: #04201d; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 7px; }

.p-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; font-size: 13.5px; color: var(--texto-suave); }

/* Prova de que a oferta e oferta: preco observado por nos, nao o "de/por" que
   o vendedor digita. So aparece quando o historico sustenta. */
.p-historico { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.p-selo {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--texto-suave);
}
.p-selo b { color: var(--verde); }
.p-selo.destaque { background: var(--laranja-suave); border-color: transparent; color: var(--laranja); font-weight: 600; }

.p-secao { margin: 20px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-fraco); }
.p-descricao { font-size: 14px; line-height: 1.65; color: var(--texto-suave); white-space: pre-wrap; }
.p-variacoes { display: flex; gap: 6px; flex-wrap: wrap; }
.p-variacoes span {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--texto-suave);
}

/* O botao acompanha a rolagem: a descricao pode ser longa, e um botao que fica
   la em cima obriga a voltar para comprar. */
.p-acoes {
  position: sticky;
  bottom: 0;
  background: var(--fundo);
  padding: 14px 0 0;
  margin-top: auto;
  display: flex;
  gap: 10px;
}
.p-acoes .botao-ir { margin: 0; flex: 1; padding: 14px; font-size: 15px; }
.p-acoes .btn-secundario { margin: 0; width: auto; padding: 14px 18px; white-space: nowrap; }

@media (max-width: 720px) {
  .folha-produto { width: 100%; }
  /* Empilhado, e a foto limitada em altura: quadrada na largura da tela ela
     tomaria a tela inteira e o preco ficaria fora de vista outra vez. */
  .p-grade { grid-template-columns: 1fr; max-height: 90vh; }
  .p-fotos img, .p-fotos video { aspect-ratio: auto; height: 38vh; }
  .p-corpo { padding: 18px 18px 16px; }
  .p-preco { font-size: 26px; }
}

/* ---------- paginação ---------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.paginacao .botao-mais { padding: 11px 20px; font-size: 14px; }
.paginacao .botao-mais:disabled { opacity: .4; cursor: default; border-color: var(--borda); }
.pagina-atual { font-size: 14px; color: var(--texto-suave); min-width: 92px; text-align: center; }

/* ---------- barra de aviso ---------- */

/**
 * Aparece quando alguem favorita sem conta.
 *
 * Sem ela o coracao acende e nada mais acontece — a pessoa acredita que
 * guardou. E guardou, mas so neste navegador: o vinculo e o device_id do
 * localStorage. Trocar de aparelho, limpar o navegador ou abrir numa aba
 * anonima faz a lista sumir sem explicacao. Melhor dizer isso na hora do que
 * deixar a pessoa descobrir quando os favoritos ja se perderam.
 */
.barra-aviso {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 20px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100vw - 24px));
  background: var(--superficie-alt);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 13px 14px 13px 17px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--texto-suave);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.barra-aviso.aparece { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.barra-aviso b { color: var(--texto); font-weight: 600; }
.barra-aviso button {
  flex-shrink: 0;
  background: var(--laranja);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 9px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.barra-aviso button:hover { background: var(--laranja-escuro); }
.barra-aviso .fechar-aviso {
  background: none;
  color: var(--texto-fraco);
  font-size: 19px;
  padding: 4px 8px;
  font-weight: 400;
}
.barra-aviso .fechar-aviso:hover { background: none; color: var(--texto); }

@media (max-width: 720px) {
  /* Acima do rodape e da faixa do app, sem cobrir os cartoes da ultima linha. */
  .barra-aviso { bottom: 12px; padding: 12px 12px 12px 14px; gap: 10px; font-size: 13px; }
}

/* Aviso dentro da folha de favoritos: a barra some sozinha, e quem abre a
   lista dias depois precisa ver o recado outra vez. */
.fav-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--laranja-suave);
  border: 1px solid rgba(255, 98, 66, 0.28);
  border-radius: 12px;
  padding: 13px 15px;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--texto-suave);
}
.fav-aviso b { color: var(--texto); font-weight: 600; }
.fav-aviso button {
  flex-shrink: 0;
  margin-left: auto;
  background: var(--laranja);
  color: #fff;
  border: 0;
  border-radius: 9px;
  padding: 9px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.fav-aviso button:hover { background: var(--laranja-escuro); }

/* ---------- instruções de instalação ---------- */

.app-ajuda {
  flex-basis: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--borda);
  padding-top: 14px;
  font-size: 13.5px;
  color: var(--texto-suave);
}
.app-ajuda.oculto { display: none; }
.app-ajuda summary {
  cursor: pointer;
  color: var(--laranja);
  font-weight: 600;
  list-style: none;
}
.app-ajuda summary::-webkit-details-marker { display: none; }
.app-ajuda summary::before { content: '▸ '; }
.app-ajuda[open] summary::before { content: '▾ '; }
.app-ajuda ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 9px; line-height: 1.5; }
.app-ajuda b { color: var(--texto); font-weight: 600; }
.app-ajuda p { margin: 14px 0 0; font-size: 12.5px; color: var(--texto-fraco); line-height: 1.5; }

/* Peso do arquivo junto do botão: 104 MB em rede móvel é uma decisão, não um
   detalhe, e descobrir isso depois de começar o download é tarde demais. */
.btn-app small { display: block; font-size: 11.5px; font-weight: 400; opacity: .85; }

/* Links legais do rodapé. A Play Store exige a política em URL pública, e o
   revisor abre daqui — por isso são <a> de verdade, não montados por JS. */
.links-legais { margin-top: 10px; }
.links-legais a { color: var(--texto-fraco); text-decoration: underline; text-underline-offset: 2px; }
.links-legais a:hover { color: var(--laranja); }

/* ---------- segunda ação dos avisos ---------- */

/* "Baixar o app" ao lado de "Criar conta": duas saídas para o mesmo problema,
   e no celular a segunda resolve melhor — lá os favoritos sincronizam e ainda
   chega aviso de queda de preço. Fica secundária no peso visual porque criar
   conta funciona em qualquer aparelho, inclusive nos que não rodam o APK. */
.barra-aviso-acoes, .fav-aviso-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fav-aviso-acoes { margin-left: auto; }

.barra-aviso .secundario,
.fav-aviso .secundario {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.barra-aviso .secundario:hover,
.fav-aviso .secundario:hover { border-color: var(--laranja); color: var(--laranja); }
.barra-aviso .secundario.oculto,
.fav-aviso .secundario.oculto { display: none; }

@media (max-width: 720px) {
  /* Quebra em duas linhas: dois botões e um texto não cabem lado a lado numa
     tela de 360px, e espremer transforma os alvos de toque em armadilha.
     O × sai do fluxo e vai para o canto — em linha própria ele ocupava a
     altura de um botão para fazer o trabalho de um ícone. */
  .barra-aviso { flex-wrap: wrap; padding: 14px 40px 14px 16px; }
  .barra-aviso > span { flex-basis: 100%; }
  .barra-aviso-acoes { width: 100%; flex-shrink: 1; }
  .barra-aviso-acoes button, .barra-aviso-acoes .secundario {
    flex: 1;
    text-align: center;
    padding-inline: 10px;
    /* Sem quebrar: "Criar conta" em duas linhas fica mais alto que o vizinho
       e a dupla perde o alinhamento. */
    white-space: nowrap;
  }
  .barra-aviso .fechar-aviso { position: absolute; top: 8px; right: 8px; }

  .fav-aviso { flex-wrap: wrap; }
  .fav-aviso-acoes { margin-left: 0; width: 100%; }
  .fav-aviso-acoes button, .fav-aviso-acoes .secundario {
    flex: 1;
    text-align: center;
    padding-inline: 10px;
  }
}

/* Escondida por padrão: no computador a pílula é compacta e uma terceira
   linha desequilibraria o bloco ao lado do título. */
.hero-app-extra {
  display: none;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--texto-fraco);
  font-weight: 400;
}