/*
 * Vitrine.
 *
 * Fundo claro, ao contrário do painel: quem abre esta página é a COMPRADORA, e
 * vitrine de loja se lê em claro. O painel é escuro porque fica aberto oito
 * horas ao lado do caixa.
 *
 * A MARCA AQUI É A DO CLIENTE, não a nossa. As cores chegam em `--loja-*`,
 * definidas por `js/identidade.js` a partir do que a lojista configurou; o que
 * está declarado abaixo é só o fallback para quando a identidade não carrega.
 *
 * O desenho segue o que a loja brasileira já ensinou a compradora a esperar —
 * Mercado Livre, Shopee: busca larga no topo, trilha de grupos, cartão com foto
 * quadrada, preço grande, "de/por" e o parcelamento embaixo. Não é cópia por
 * preguiça: é o vocabulário que ela lê sem precisar de instrução.
 */

:root {
  --loja-primaria: #1e66f5;
  --loja-escura: #0d1b2a;
  --loja-destaque: #7fd8f0;
  --loja-sobre-primaria: #ffffff;
  --loja-sobre-escura: #ffffff;

  --tinta: #17202a;
  --tinta-suave: #5b6b7f;
  --linha: #e6eaef;
  --fundo: #f2f4f7;
  --verde: #12855f;
  --ambar: #b45309;
  --vermelho: #c0392b;
  --sombra: 0 1px 3px rgba(16, 24, 40, .07), 0 6px 18px rgba(16, 24, 40, .05);
}

* { box-sizing: border-box; }

/* O atributo `hidden` traz `display: none` da folha do NAVEGADOR, que perde
 * para qualquer regra de classe. Sem isto a gaveta do carrinho fica aberta o
 * tempo todo por cima do catálogo — defeito encontrado em produção. O
 * `!important` aqui é o uso correto dele: `hidden` declara que o elemento não
 * está na página, e nenhuma regra de aparência deveria contradizer isso. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--fundo);
  color: var(--tinta);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Trava a rolagem do fundo quando uma gaveta abre — senão o dedo rola a página
   atrás em vez do painel. */
body.travado { overflow: hidden; }

.faixa { width: min(1280px, 100% - 32px); margin-inline: auto; }
a { color: var(--loja-primaria); text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }

/* ================================================================== topo == */

.topo { background: var(--loja-escura); position: sticky; top: 0; z-index: 40; }
.topo-corpo { display: flex; align-items: center; gap: 20px; padding: 12px 0; flex-wrap: wrap; }
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--loja-sobre-escura); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; flex: none;
}
.logo-area-loja { display: inline-flex; align-items: center; }
/* `max-height` e não `height`: a logo do cliente pode ser quadrada, deitada ou
   um brasão alto, e altura fixa distorce as três. */
.logo-loja { max-height: 38px; max-width: 168px; object-fit: contain; display: block; }
.logo-sigla {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--loja-primaria); color: var(--loja-sobre-primaria);
  font-weight: 800; font-size: 16px;
}

.busca { flex: 1; min-width: 240px; display: flex; background: #fff; border-radius: 10px; overflow: hidden; }
.busca input {
  flex: 1; border: 0; padding: 12px 16px; font-family: inherit; font-size: 15px;
  color: var(--tinta); background: transparent; min-width: 0;
}
.busca input:focus { outline: 2px solid var(--loja-destaque); outline-offset: -2px; }
.busca button {
  border: 0; background: transparent; color: var(--tinta-suave);
  padding: 0 16px; cursor: pointer; display: grid; place-items: center;
}
.busca button:hover { color: var(--loja-primaria); }

.topo-acoes { display: flex; align-items: center; gap: 14px; }
.topo-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--loja-sobre-escura); font-size: 13.5px; font-weight: 500; opacity: .92;
}
.topo-link:hover { opacity: 1; }

.carrinho-botao {
  position: relative; border: 0; background: transparent; cursor: pointer;
  color: var(--loja-sobre-escura); padding: 6px; display: grid; place-items: center;
}
.contador {
  position: absolute; top: -2px; right: -4px;
  background: var(--loja-primaria); color: var(--loja-sobre-primaria);
  border-radius: 999px; min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ os grupos -- */
/*
 * Trilha rolável, e não menu suspenso. No celular — que é onde a compradora
 * está — menu suspenso exige dois toques e esconde o que existe; a trilha
 * mostra os grupos e o polegar arrasta.
 */
.grupos {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px;
  width: min(1280px, 100% - 32px); margin-inline: auto;
  scrollbar-width: none;
}
.grupos::-webkit-scrollbar { display: none; }
.grupo {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 8px 15px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  background: color-mix(in srgb, var(--loja-sobre-escura) 12%, transparent);
  color: var(--loja-sobre-escura);
  transition: background .12s;
}
.grupo:hover { background: color-mix(in srgb, var(--loja-sobre-escura) 20%, transparent); }
.grupo.ativo { background: var(--loja-primaria); color: var(--loja-sobre-primaria); }
.grupo-icone { display: grid; place-items: center; }
.grupo small { opacity: .6; font-weight: 500; }

/* =============================================================== ofertas == */

main { padding: 18px 0 60px; }

.carrossel {
  display: grid; gap: 12px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.oferta-cartao {
  position: relative; border-radius: 14px; overflow: hidden;
  min-height: 148px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  cursor: pointer; box-shadow: var(--sombra);
}
/* Com arte, o texto precisa de um véu por baixo: foto de produto é clara e o
   título some. Sem arte, a cor de fundo já dá contraste. */
.oferta-cartao.com-arte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 20, 18, .82) 0%, rgba(10, 20, 18, .35) 62%, transparent 100%);
}
/*
 * A cor do texto NÃO é branca fixa — ela é herdada.
 *
 * Aqui estava um defeito visível em produção: com `color: #fff` fixo, a oferta
 * de fundo claro (a cor de destaque da loja é clara) saía branco sobre
 * quase-branco, e o cartão inteiro ficava ilegível. Quem decide agora é o
 * `vitrine.js`, que calcula a luminância do fundo e põe a cor no elemento —
 * herdada por tudo aqui dentro.
 *
 * Com ARTE continua branco, porque o véu escuro do ::after garante o contraste
 * independentemente da foto.
 */
.oferta-texto { position: relative; z-index: 1; padding: 18px 20px; color: inherit; max-width: 34ch; }
.oferta-cartao.com-arte .oferta-texto { color: #fff; }
.oferta-texto h3 {
  margin: 6px 0 3px; font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  /* A letra escolhida na campanha. Sem escolha, a da loja. */
  font-family: var(--oferta-letra, inherit);
}
.oferta-texto p { margin: 0; font-size: 13px; opacity: .92; }
/*
 * O selo também era branco fixo, e sumia no cartão claro pelo mesmo motivo do
 * título. Amarrado a `currentColor`, ele acompanha a decisão já tomada: sobre
 * fundo claro fica escuro translúcido, sobre escuro fica claro translúcido —
 * legível nos dois sem ninguém escolher nada.
 */
.selo-oferta {
  display: inline-block; color: inherit;
  background: color-mix(in srgb, currentColor 15%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 800;
}
.oferta-botao {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700;
  border-bottom: 2px solid currentColor; padding-bottom: 1px;
}

/* ============================================================== catálogo == */

.barra-catalogo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.barra-catalogo h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.barra-direita { display: flex; align-items: center; gap: 14px; }
.contagem { font-size: 13px; color: var(--tinta-suave); }
.ordenar select {
  font-family: inherit; font-size: 13px; padding: 7px 11px;
  border: 1px solid var(--linha); border-radius: 9px; background: #fff; color: var(--tinta);
}

.estado { text-align: center; padding: 60px 20px; color: var(--tinta-suave); }
.estado.erro { color: var(--vermelho); }

.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.cartao-produto {
  background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  box-shadow: var(--sombra);
  transition: transform .12s, box-shadow .12s;
}
.cartao-produto:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .09), 0 12px 28px rgba(16, 24, 40, .09);
}

/* Quadrada e com fundo branco: foto de cosmético vem recortada em branco, e
   qualquer outra proporção corta o produto ou deixa tarja. */
.cartao-foto { position: relative; aspect-ratio: 1; background: #fff; display: grid; place-items: center; padding: 10px; }
.cartao-foto img { width: 100%; height: 100%; object-fit: contain; }
.sem-foto {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 40px; font-weight: 800;
  color: color-mix(in srgb, var(--loja-primaria) 55%, #fff);
  background: color-mix(in srgb, var(--loja-primaria) 8%, #fff);
}
.sem-foto.grande { font-size: 80px; border-radius: 12px; min-height: 320px; }

.selo-off {
  position: absolute; top: 8px; left: 8px;
  background: var(--verde); color: #fff; border-radius: 6px;
  padding: 3px 8px; font-size: 12px; font-weight: 800;
}
.selo-tons {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(23, 32, 42, .78); color: #fff; border-radius: 999px;
  padding: 2px 9px; font-size: 11px; font-weight: 600;
}

/*
 * `flex: 1` no corpo e `margin-top: auto` no preço: os preços de uma mesma
 * fileira encostam na mesma linha, mesmo quando um cartão tem parcelamento e o
 * vizinho não. Sem isso, o cartão sem parcela deixa um buraco no meio e a
 * grade parece quebrada — foi o que a captura mostrou.
 */
.cartao-corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cartao-corpo .preco-de, .cartao-corpo .preco:first-of-type { margin-top: auto; }
.cartao-corpo .preco-de + .preco { margin-top: 0; }
.cartao-corpo h3 {
  margin: 0 0 6px; font-size: 13.5px; font-weight: 500; line-height: 1.35;
  /* Duas linhas fixas: cartão de altura variável faz a grade parecer quebrada. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
/* O riscado precisa ser VISTO para o desconto significar algo — no tom suave
   ele desaparecia e o "de/por" virava um número solto. */
.preco-de {
  font-size: 12.5px; color: var(--tinta-suave);
  text-decoration: line-through; text-decoration-color: var(--vermelho);
  text-decoration-thickness: 1.5px;
}
.preco { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.parcela { font-size: 12px; color: var(--verde); font-weight: 600; }
.tag-frete {
  align-self: flex-start; margin-top: 6px;
  background: color-mix(in srgb, var(--verde) 12%, #fff); color: var(--verde);
  border-radius: 5px; padding: 2px 7px; font-size: 11.5px; font-weight: 700;
}
.tag-poucas { align-self: flex-start; margin-top: 6px; color: var(--ambar); font-size: 12px; font-weight: 600; }
.tag-ok { color: var(--verde); font-size: 12.5px; font-weight: 600; }

/* ============================================================== produto === */

.cortina { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); z-index: 50; }

.produto-painel {
  position: fixed; z-index: 60; inset: 3vh 0 auto; margin-inline: auto;
  width: min(980px, calc(100% - 24px)); max-height: 94vh; overflow-y: auto;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(16, 24, 40, .3);
}
.fechar-flutuante {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: rgba(255, 255, 255, .9); border-radius: 999px;
  width: 34px; height: 34px; display: grid; place-items: center;
}
.produto-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 22px; }
.produto-fotos img#fotoGrande {
  width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff;
  border: 1px solid var(--linha); border-radius: 12px;
}
.tiras { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tira {
  width: 58px; height: 58px; padding: 4px; cursor: pointer;
  border: 2px solid var(--linha); border-radius: 9px; background: #fff;
}
.tira.ativa { border-color: var(--loja-primaria); }
.tira img { width: 100%; height: 100%; object-fit: contain; }

.migalha { font-size: 12px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.produto-info h2 { margin: 6px 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
/* `align-items: flex-start` e obrigatorio aqui: num flex em coluna os filhos
   esticam por padrao, e o selo de desconto virava uma barra verde de ponta a
   ponta em vez de uma etiqueta. */
.produto-precos {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; margin-bottom: 18px;
}
.produto-precos .preco-de { display: inline-block; }
.produto-precos .selo-off { position: static; display: inline-block; }
.preco-grande { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }

.tons { margin-bottom: 18px; }
.rotulo-tons { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.tons-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.tom {
  border: 1.5px solid var(--linha); background: #fff; color: var(--tinta);
  border-radius: 9px; padding: 8px 13px; font-family: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.tom.ativo { border-color: var(--loja-primaria); color: var(--loja-primaria); }
/* Tom esgotado fica VISÍVEL e riscado, não escondido: sumir com a opção faz a
   cliente procurar o tom que viu no Instagram e concluir que a loja não tem. */
.tom.esgotado { opacity: .45; text-decoration: line-through; cursor: not-allowed; }

.produto-desc { font-size: 14px; color: var(--tinta-suave); margin: 0 0 16px; }
.produto-saldo { margin-bottom: 14px; }
.produto-nota { font-size: 12px; color: var(--tinta-suave); margin: 12px 0 0; }

/* ================================================================ botões == */

.botao {
  font-family: inherit; font-size: 14px; font-weight: 700;
  border-radius: 10px; padding: 11px 18px; cursor: pointer;
  border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  display: inline-flex; align-items: center; gap: 8px; transition: filter .12s;
}
.botao:hover:not(:disabled) { filter: brightness(.97); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.primario {
  background: var(--loja-primaria); border-color: var(--loja-primaria);
  /* Preto ou branco conforme o CONTRASTE com a cor da marca, decidido no
     servidor pela luminância da WCAG. `#fff` fixo quebra em marca clara. */
  color: var(--loja-sobre-primaria);
}
.botao.primario:hover:not(:disabled) { filter: brightness(1.08); }
.botao.largo { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }

.icone { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--tinta-suave); padding: 0 5px; }

/* ============================================================== carrinho == */

.carrinho {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(430px, 100%); background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -18px 0 44px rgba(16, 24, 40, .18);
}
.carrinho-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--linha); font-size: 16px;
}
.itens { flex: 1; overflow-y: auto; padding: 6px 20px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.item-foto { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; border: 1px solid var(--linha); }
.item .desc { flex: 1; min-width: 0; }
.item .desc strong { display: block; font-size: 13.5px; font-weight: 600; }
.item .desc span { font-size: 12px; color: var(--tinta-suave); }
.item .qtd { display: flex; align-items: center; gap: 6px; }
.item .qtd button {
  width: 26px; height: 26px; border-radius: 7px; padding: 0;
  border: 1px solid var(--linha); background: #fff; cursor: pointer; font-size: 15px;
}
.item .qtd span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.item .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.carrinho-pe { border-top: 1px solid var(--linha); padding: 16px 20px 20px; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.total strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.frete-aviso { font-size: 12.5px; color: var(--verde); margin: 4px 0 14px; }

.checkout label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.checkout input {
  display: block; width: 100%; margin-top: 4px;
  font-family: inherit; font-size: 14px; text-transform: none; letter-spacing: 0;
  color: var(--tinta); background: #fff;
  border: 1px solid #d7dde5; border-radius: 9px; padding: 10px 12px;
}
.checkout input:focus {
  outline: 2px solid color-mix(in srgb, var(--loja-primaria) 40%, transparent);
  border-color: var(--loja-primaria);
}
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tripla { display: grid; grid-template-columns: 1fr 1.4fr .6fr; gap: 10px; }
.nota { font-size: 11.5px; color: var(--tinta-suave); margin: 10px 0 0; text-align: center; }

.aviso {
  padding: 10px 13px; border-radius: 9px; font-size: 13px; margin-bottom: 12px;
  background: #fdf2f2; border: 1px solid #f5c6c6; color: var(--vermelho);
}
.recibo {
  padding: 18px; border-radius: 12px;
  background: #f0fdf6; border: 1px solid #b9e8d0; color: #0d4d34; font-size: 14px;
}
.recibo strong { display: block; font-size: 16px; margin-bottom: 6px; }
.recibo .numero { font-family: 'IBM Plex Mono', monospace; font-size: 15px; }
.recibo p { margin: 8px 0 0; }

/* =============================================================== rodapé === */

.whats-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 56px; height: 56px; border-radius: 999px;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
}
.whats-flutuante:hover { filter: brightness(1.06); }

.rodape { border-top: 1px solid var(--linha); background: #fff; padding: 26px 0; }
.rodape-corpo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-suave);
}
.rodape-corpo strong { display: block; color: var(--tinta); font-size: 15px; }
.redes { display: flex; gap: 10px; margin-top: 8px; }
.redes a {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--fundo); color: var(--tinta-suave);
}
.redes a:hover { background: var(--loja-primaria); color: var(--loja-sobre-primaria); }
/* O crédito da casa é menor e mais claro que o nome da loja: quem vende ali é
   o cliente. */
.rodape-credito { font-size: 11.5px; opacity: .8; }

/* ============================================================ responsivo == */

@media (max-width: 860px) {
  .produto-grade { grid-template-columns: 1fr; gap: 18px; }
  .produto-painel { inset: 0; width: 100%; max-height: 100vh; border-radius: 0; }
}
@media (max-width: 640px) {
  .topo-corpo { gap: 12px; }
  .busca { order: 3; width: 100%; flex-basis: 100%; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .tripla { grid-template-columns: 1fr 1fr; }
  .topo-link span { display: none; }
}

/* ==================================================== faixa de confiança == */
/*
 * Prazo, frete, retirada e troca — as quatro perguntas que mais fazem a sacola
 * ser abandonada. Ficam ANTES do rodapé e depois do catálogo: quem rolou a
 * página inteira está decidindo, e é ali que a dúvida vira desistência.
 */
.confianca { background: #fff; border-top: 1px solid var(--linha); }
.confianca-corpo {
  display: grid; gap: 14px; padding: 22px 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.confianca-item strong {
  display: block; font-size: 13px; font-weight: 700; color: var(--tinta);
}
.confianca-item span { font-size: 13px; color: var(--tinta-suave); }

.rodape-contato { margin-top: 8px; font-size: 12.5px; color: var(--tinta-suave); }

/* ============================================================== o Vellowzinho ==== */
/*
 * O CONVITE: o mascote parado ao lado do catálogo, com um recado.
 *
 * Duas regras deram a forma disto. A primeira: o balão NÃO aparece junto com a
 * página — ele entra alguns segundos depois. Pop-up que abre na chegada é
 * fechado sem ser lido, por reflexo. A segunda: aparece UMA vez por visita, e
 * quem dispensa não vê de novo; assistente que insiste vira o chat de suporte
 * que todo mundo aprendeu a ignorar.
 *
 * O mascote fica acima do WhatsApp, e não no lugar dele. Os dois resolvem
 * coisas diferentes: o WhatsApp fala com gente e demora; o Vellowzinho responde
 * "tem?", "quanto?" e "chega quando?" na hora — que é o que trava a compra às
 * onze da noite, quando não há ninguém do outro lado.
 */
.assistente-convite {
  position: fixed; right: 18px; bottom: 92px; z-index: 45;
  display: flex; align-items: flex-end; gap: 10px;
}

.assistente-bolha {
  width: 62px; height: 62px; flex: none;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent;
  /* A sombra é do disco da arte, e não de um botão por baixo: o PNG já vem
     redondo, e um fundo atrás dele apareceria como uma casquinha nas bordas. */
  filter: drop-shadow(0 8px 18px rgba(16, 24, 40, .3));
  /* Respiração de quem está parado esperando. Quatro pixels e três segundos e
     meio: o suficiente para o olho notar que ali tem alguém, e devagar demais
     para incomodar quem está lendo a página. */
  animation: assistente-respira 3.4s ease-in-out infinite;
}
.assistente-bolha:hover { animation-play-state: paused; transform: scale(1.06); }
.assistente-inicial { width: 100%; height: 100%; display: block; }

@keyframes assistente-respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* O recado. Sai do balão em direção ao mascote — a pontinha embaixo à direita
   aponta para quem está falando. */
.assistente-recado {
  position: relative;
  max-width: 190px; text-align: left;
  padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  font-family: inherit; font-size: 13px; line-height: 1.35; cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
  animation: assistente-recado-entra .32s ease-out both;
}
.assistente-recado span { display: block; color: var(--tinta-suave); font-size: 12px; }
.assistente-recado strong { display: block; font-weight: 700; }
.assistente-recado:hover { border-color: var(--loja-primaria); }

@keyframes assistente-recado-entra {
  from { opacity: 0; transform: translateX(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* "Agora não". Pequeno e discreto, mas presente: sem uma saída à vista, a única
   forma de calar o balão seria abrir a conversa — que é exatamente a pressão
   que faz a pessoa fechar a aba. */
.assistente-dispensar {
  position: absolute; top: -8px; right: 62px;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--linha);
  background: #fff; color: var(--tinta-suave);
  font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .16);
}
.assistente-dispensar:hover { color: var(--tinta); }

/* No celular o balão sai: a faixa de baixo já tem o carrinho e o WhatsApp
   disputando o polegar, e um terceiro elemento com texto cobriria o produto. */
@media (max-width: 560px) {
  .assistente-recado, .assistente-dispensar { display: none !important; }
  .assistente-bolha { width: 54px; height: 54px; }
}

/* Quem pediu menos movimento não recebe movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  .assistente-bolha { animation: none; }
  .assistente-recado { animation: none; }
}

.assistente-janela {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .3);
}
.assistente-cabeca {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 13px 15px; background: var(--loja-escura); color: var(--loja-sobre-escura);
}
.assistente-cabeca strong { display: block; font-size: 15px; }
.assistente-cabeca small { display: block; font-size: 11.5px; opacity: .8; }
.assistente-cabeca .icone {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 4px;
}

.assistente-conversa {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; display: flex; flex-direction: column; gap: 9px;
  background: var(--fundo);
}
.assistente-abertura { margin: 0; font-size: 13px; color: var(--tinta-suave); }

.assistente-balao {
  max-width: 86%; padding: 9px 12px; border-radius: 13px;
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
}
.assistente-balao.cliente {
  align-self: flex-end; background: var(--loja-primaria); color: var(--loja-sobre-primaria);
  border-bottom-right-radius: 4px;
}
.assistente-balao.thor {
  align-self: flex-start; background: #fff; border: 1px solid var(--linha);
  border-bottom-left-radius: 4px;
}

.assistente-pensando { display: flex; gap: 5px; padding: 13px 14px; }
.assistente-pensando span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-suave);
  animation: assistente-pisca 1.1s infinite ease-in-out;
}
.assistente-pensando span:nth-child(2) { animation-delay: .18s; }
.assistente-pensando span:nth-child(3) { animation-delay: .36s; }
@keyframes assistente-pisca {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .assistente-pensando span { animation: none; opacity: .6; }
}

.assistente-linha {
  display: flex; gap: 8px; padding: 11px 13px;
  border-top: 1px solid var(--linha); background: #fff;
}
.assistente-linha input {
  flex: 1; min-width: 0; border: 1px solid var(--linha); border-radius: 9px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--tinta);
}
.assistente-linha input:focus { outline: 2px solid var(--loja-primaria); outline-offset: -1px; }

/* ===================================================== frases de efeito ===
 *
 * Uma linha só, girando. O texto entra por cima e sai por baixo — o movimento
 * lê como "próxima frase" em vez de "a página mudou".
 *
 * `min-height` fixa a altura na maior frase possível: sem isso a seção cresce e
 * encolhe a cada troca e empurra a vitrine inteira meio centímetro para cima e
 * para baixo, que é o tipo de tremor que ninguém sabe nomear mas todo mundo
 * sente.
 */
.frases {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 6px 0 2px;
}
.frase {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta);
  animation: frase-entra 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.frase b { color: var(--loja-primaria); }
@keyframes frase-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================== vida na grade de produtos ===
 *
 * Os cartões entram escalonados quando aparecem na tela. O atraso é por índice,
 * limitado a 8: com 21 produtos e atraso crescente, o último entraria quase um
 * segundo depois — o que deixa de ser charme e vira espera.
 */
.cartao-produto {
  animation: cartao-entra 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cartao-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* A foto respira no hover, e o cartão sobe um pouco mais que antes. */
.cartao-produto { transition: transform .18s ease, box-shadow .18s ease; }
.cartao-produto:hover { transform: translateY(-4px); }
.cartao-foto img { transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1); }
.cartao-produto:hover .cartao-foto img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .frase, .cartao-produto { animation: none; }
  .cartao-produto:hover { transform: none; }
  .cartao-produto:hover .cartao-foto img { transform: none; }
}

/* ============================================================== cookies ===
 * Barra inteira embaixo, e não um quadradinho no canto: é decisão, não aviso.
 */
.cookies {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .18);
  padding: 14px 16px;
  animation: cookies-entra 300ms ease both;
}
@keyframes cookies-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cookies-texto { flex: 1 1 320px; min-width: 0; }
.cookies-texto strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.cookies-texto p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--tinta-suave); }
.cookies-acoes { display: flex; gap: 8px; flex: 0 0 auto; }
/* Mesmo tamanho nos dois: recusar não pode ser mais difícil que aceitar. */
.cookies-acoes .botao { min-width: 150px; justify-content: center; }
@media (max-width: 620px) {
  .cookies-acoes { width: 100%; }
  .cookies-acoes .botao { flex: 1; min-width: 0; }
}
.link {
  background: none; border: 0; padding: 0;
  color: var(--loja-primaria); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

.privacidade-painel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: #fff; z-index: 70;
  overflow-y: auto; padding: 26px 24px 40px;
  box-shadow: -18px 0 44px rgba(16, 24, 40, .18);
}
.privacidade-painel h2 { margin: 0 0 4px; font-size: 1.25rem; }
.privacidade-painel h3 { margin: 22px 0 6px; font-size: .95rem; }
.privacidade-painel p, .privacidade-painel li { font-size: .86rem; line-height: 1.62; color: var(--tinta-suave); }
.privacidade-painel ul { margin: 0; padding-left: 18px; }
.privacidade-painel .assinatura { margin-top: 26px; font-size: .76rem; color: var(--tinta-suave); }

/* ================================================================ conta ===
 * Mesmo desenho do carrinho: painel que entra pela direita. Duas gavetas com
 * comportamentos diferentes ensinariam a loja duas vezes.
 */
.conta-botao { background: none; border: 0; cursor: pointer; font: inherit; }
.conta-painel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  background: #fff; z-index: 70;
  overflow-y: auto; padding: 26px 22px 34px;
  box-shadow: -18px 0 44px rgba(16, 24, 40, .18);
  animation: painel-entra 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes painel-entra { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.conta-titulo { margin: 0 0 2px; font-size: 1.3rem; }
.conta-ajuda { margin: 0 0 18px; font-size: .84rem; color: var(--tinta-suave); }
.conta-form { display: grid; gap: 12px; margin-bottom: 14px; }
.conta-form label { display: grid; gap: 5px; font-size: .8rem; font-weight: 600; }
.conta-form input {
  padding: 11px 12px; border: 1px solid var(--linha); border-radius: 10px;
  font: inherit; font-weight: 400;
}
.conta-form input:focus {
  outline: none;
  border-color: var(--loja-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--loja-primaria) 18%, transparent);
}
.conta-form .opcional { font-weight: 400; color: var(--tinta-suave); }
.conta-dica { font-weight: 400; font-size: .72rem; color: var(--tinta-suave); }
.conta-erro {
  background: color-mix(in srgb, var(--vermelho) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--vermelho) 35%, #fff);
  color: var(--vermelho);
  border-radius: 10px; padding: 10px 12px; font-size: .82rem; margin-bottom: 14px;
}
.conta-troca { font-size: .82rem; color: var(--tinta-suave); text-align: center; }
.botao.largo { width: 100%; justify-content: center; }

/* histórico */
.pedidos { display: grid; gap: 10px; margin-bottom: 18px; }
.pedido {
  border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px;
  animation: cartao-entra 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pedido-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--tinta-suave); }
.selo { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.selo.ok        { background: #e7f6ec; color: #176b3a; }
.selo.andamento { background: #e8f1fd; color: #14508f; }
.selo.espera    { background: #fdf3e2; color: #8a5a05; }
.selo.cancelado { background: #fdeaea; color: #9b1c1c; }
.pedidos-vazio {
  display: grid; gap: 4px; text-align: center;
  border: 1px dashed var(--linha); border-radius: 12px; padding: 26px 16px;
  font-size: .84rem; color: var(--tinta-suave);
}

/* =========================================================== mais vida ===
 * Movimento com propósito: cada um responde a uma ação e some quando a pessoa
 * pede menos animação.
 */
/* O contador do carrinho pulsa quando muda — é a confirmação de que o item
   entrou, sem precisar abrir a sacola. */
.contador.pulou { animation: contador-pula 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes contador-pula {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
/* Os grupos e as ofertas entram junto com a página. */
.grupos { animation: cartao-entra 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.oferta-cartao { animation: cartao-entra 500ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.oferta-cartao { transition: transform .2s ease, box-shadow .2s ease; }
.oferta-cartao:hover { transform: translateY(-3px); }
/* O selo de desconto chama atenção sem piscar. */
.cartao-produto:hover .selo-off { transform: scale(1.06) rotate(-2deg); }
.selo-off { transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1); }
/* Botões respondem ao toque. */
.botao { transition: transform .12s ease, filter .2s ease; }
.botao:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .conta-painel, .pedido, .grupos, .oferta-cartao { animation: none; }
  .contador.pulou { animation: none; }
  .oferta-cartao:hover, .botao:active { transform: none; }
  .cartao-produto:hover .selo-off { transform: none; }
}

/* ================================================================ cupom ===
 * Campo e botão na mesma linha: pedir "aplicar" numa linha separada faz a
 * pessoa digitar o código e fechar o pedido sem clicar.
 */
.cupom-linha { display: flex; gap: 8px; margin-bottom: 6px; }
.cupom-linha input {
  flex: 1; min-width: 0;
  padding: 11px 12px; border: 1px solid var(--linha); border-radius: 10px;
  font: inherit; text-transform: uppercase;
}
.cupom-linha input::placeholder { text-transform: none; }
.cupom-linha input:focus {
  outline: none; border-color: var(--loja-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--loja-primaria) 18%, transparent);
}
.cupom-linha .botao { flex: 0 0 auto; }
.cupom-aviso { margin: 0 0 10px; font-size: .8rem; line-height: 1.45; }
.cupom-aviso.ok  { color: #176b3a; }
.cupom-aviso.nao { color: var(--vermelho); }
.desconto-linha { display: flex; justify-content: space-between; font-size: .84rem; color: #176b3a; margin-top: -4px; }

/* endereços salvos */
.enderecos { display: grid; gap: 8px; margin-bottom: 12px; }
.endereco {
  border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  font-size: .82rem; line-height: 1.45;
}
.endereco .principal { font-size: .68rem; font-weight: 700; color: var(--loja-primaria); display: block; }
.endereco .apagar { background: none; border: 0; color: var(--tinta-suave); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.endereco .apagar:hover { color: var(--vermelho); }
.conta-secao { margin: 22px 0 8px; font-size: .95rem; }
.conta-endereco-bloco {
  display: grid; gap: 12px;
  border: 1px dashed var(--linha); border-radius: 12px;
  padding: 12px; margin-top: 2px;
}
.conta-secao-inline { font-size: .82rem; }
/* `minmax(0, 1fr)`, e não `1fr`: input tem largura mínima intrínseca, e com
   `1fr` puro ele não encolhe — o grid estica além do painel e o formulário
   inteiro vaza para fora da gaveta. */
.conta-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.conta-dupla label { min-width: 0; }
/* O painel é estreito e os campos precisam caber nele com padding e borda. */
.conta-form input, .conta-endereco-bloco input { box-sizing: border-box; width: 100%; min-width: 0; }
.salvar-endereco {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--tinta-suave);
  margin: 2px 0 10px; cursor: pointer;
}
.salvar-endereco input { width: 16px; height: 16px; accent-color: var(--loja-primaria); }