/* Garimpo de Ofertas — mesmas cores do card dos posts (card.py) */

@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap;
  src: url("fontes/montserrat-regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap;
  src: url("fontes/montserrat-bold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap;
  src: url("fontes/montserrat-extrabold.woff2") format("woff2"); }

:root {
  --roxo: #220C36;
  --roxo-medio: #3B1A5C;
  --dourado: #FFC107;
  --dourado-claro: #FFD24D;
  --vermelho: #D62839;
  --vermelho-escuro: #B01E2E;
  --verde-whatsapp: #1FA855;
  --verde-whatsapp-escuro: #178A45;
  --verde-nota: #1FA35B;
  --fundo: #F6F3FA;
  --cartao: #FFFFFF;
  --texto: #1F1A28;
  --texto-suave: #6A6278;
  --borda: #E6E0EE;
  --shopee: #D73F1F;
  --ml: #2D3277;
  --largura: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.4;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- barra preta fixa ---------- */
.barra-topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 12px;
  background: #000; color: #fff;
  font-size: 13px; font-weight: 700;
}
.barra-topo__frase { min-width: 0; }
.barra-topo__canais { display: flex; align-items: center; gap: 8px; flex: none; }
.canal {
  padding: 7px 14px; border-radius: 999px;
  font-weight: 800; font-size: 12px; text-decoration: none; white-space: nowrap;
}
.canal--whatsapp { background: var(--verde-whatsapp); color: #fff; }
.canal--whatsapp:hover { background: var(--verde-whatsapp-escuro); }
.canal--telegram { background: var(--dourado); color: var(--roxo); }
.canal--telegram:hover { background: var(--dourado-claro); }
/* Celular: os dois botões não cabem ao lado da frase. O WhatsApp continua
   botão; o Telegram vira link de texto. */
@media (max-width: 479px) {
  .barra-topo { font-size: 12px; gap: 8px; }
  .canal--telegram { background: none; color: var(--dourado); padding: 7px 2px; text-decoration: underline; }
  .canal--telegram:hover { background: none; color: var(--dourado-claro); }
}

/* ---------- cabeçalho roxo ---------- */
.cabecalho { background: var(--roxo); color: #fff; }
.cabecalho__dentro {
  max-width: var(--largura); margin: 0 auto;
  padding: 18px 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px;
}
.marca { text-decoration: none; display: flex; flex-direction: column; }
.marca__nome {
  color: var(--dourado); font-weight: 800; font-size: 24px;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.1;
}
.marca__linha { color: #CFC6DD; font-size: 12px; margin-top: 4px; }
.busca { flex: 1 1 280px; }
.busca input {
  width: 100%; padding: 12px 16px;
  border: 2px solid transparent; border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--texto); background: #fff;
}
.busca input:focus { outline: none; border-color: var(--dourado); }

/* ---------- seção de ofertas ---------- */
.conteudo { max-width: var(--largura); margin: 0 auto; padding: 20px 16px 40px; }
.secao__topo { margin-bottom: 16px; }
.secao__titulo { margin: 0; font-size: 22px; font-weight: 800; color: var(--roxo); }
.secao__sub { margin-top: 4px; color: var(--texto-suave); font-size: 13px; }

/* Celular: 1 por linha, foto grande. Computador: 5 por linha. */
.grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grade { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- cartão ---------- */
.oferta {
  display: flex; flex-direction: column;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px;
  overflow: hidden;
}
.oferta[hidden] { display: none; }
/* Quadrado fixo: foto alta (espelho, cortina) não pode esticar o cartão */
.oferta__foto { position: relative; display: block; background: #fff; aspect-ratio: 1; overflow: hidden; }
.oferta__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.selo {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px; border-radius: 6px;
  background: #fff; box-shadow: 0 1px 4px rgba(34, 12, 54, .25);
  font-size: 11px; font-weight: 800; line-height: 1.3;
}
.selo--shopee { color: var(--shopee); }
.selo--mercado-livre { color: var(--ml); }

.oferta__corpo { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.oferta__quando { margin-bottom: 4px; font-size: 12px; color: var(--texto-suave); }
.oferta__titulo {
  margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;
}
.oferta__valores { margin-bottom: 14px; }
.oferta__prefixo, .oferta__sufixo { font-size: 12px; font-weight: 700; color: var(--texto-suave); }
/* Celular (1 por linha): linha vazia não ocupa espaço */
.oferta__prefixo:empty, .oferta__sufixo:empty { display: none; }
.oferta__linha-preco { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.oferta__preco { white-space: nowrap; }
.oferta__preco strong { font-size: 24px; font-weight: 800; color: var(--roxo); }
.nota {
  padding: 3px 9px; border-radius: 999px;
  background: var(--verde-nota); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}

.botao-loja {
  display: block; width: 100%; margin-top: auto;
  padding: 13px 8px; border-radius: 10px;
  background: var(--vermelho); color: #fff;
  font-weight: 800; font-size: 16px; text-align: center; text-decoration: none;
}
.botao-loja:hover, .botao-loja:focus-visible { background: var(--vermelho-escuro); }

/* "Ver na loja" + compartilhar, lado a lado no pé do cartão */
.oferta__acoes { display: flex; gap: 8px; margin-top: auto; }
.oferta__acoes .botao-loja { flex: 1; width: auto; margin-top: 0; }
.botao-compartilhar {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 46px; border-radius: 10px;
  border: 1px solid var(--borda); background: #fff; color: var(--verde-whatsapp);
}
.botao-compartilhar:hover, .botao-compartilhar:focus-visible { border-color: var(--verde-whatsapp); background: #F1FBF4; }
.icone-whatsapp { width: 22px; height: 22px; display: block; }
.oferta__titulo a { color: inherit; text-decoration: none; }
.oferta__titulo a:hover { text-decoration: underline; }

@media (min-width: 560px) {
  /* Cartões lado a lado: as duas linhas existem sempre, vazias ou não */
  .oferta__prefixo:empty, .oferta__sufixo:empty { display: block; }
  .oferta__prefixo, .oferta__sufixo { min-height: 1.4em; }
  /* Altura fixa: o preço longo (fonte menor) não pode encurtar a linha */
  .oferta__linha-preco { gap: 6px; height: 28px; }
  .nota { font-size: 10px; padding: 3px 7px; }
  .oferta__corpo { padding: 10px 12px 12px; }
  .oferta__quando { font-size: 11px; }
  .oferta__titulo { font-size: 14px; }
  .oferta__preco strong { font-size: 20px; }
  .oferta__preco--longo strong { font-size: 16px; }
  .botao-loja { font-size: 14px; padding: 11px 8px; }
  .botao-compartilhar { width: 40px; }
  .icone-whatsapp { width: 20px; height: 20px; }
}

.vazio { text-align: center; color: var(--texto-suave); padding: 40px 0; }

/* ---------- página de categoria ---------- */
.caminho { margin-bottom: 12px; font-size: 13px; color: var(--texto-suave); }
.caminho a { color: var(--roxo-medio); font-weight: 700; text-decoration: none; }
.caminho a:hover { text-decoration: underline; }
.caminho span[aria-hidden] { margin: 0 4px; }
.caminho [aria-current] { color: var(--texto); font-weight: 700; }
.secao__descricao { margin-top: 6px; max-width: 720px; color: var(--texto-suave); font-size: 14px; }

/* Filtro e ordenação só funcionam com JavaScript; sem ele, some tudo e a
   página mostra todas as ofertas */
.controles { display: none; }
.js .controles {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; margin-bottom: 16px;
}
.chips, .ordem { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .ordem__opcao {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid var(--borda); background: #fff; color: var(--texto);
}
.chip[aria-pressed="true"] { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.chip__qtd { margin-left: 4px; font-weight: 400; opacity: .75; }
.ordem__opcao { border-radius: 8px; }
.ordem__opcao[aria-pressed="true"] { border-color: var(--roxo); color: var(--roxo); box-shadow: inset 0 0 0 1px var(--roxo); }
.chip:focus-visible, .ordem__opcao:focus-visible, .ver-mais__botao:focus-visible {
  outline: 3px solid var(--dourado); outline-offset: 2px;
}

/* Celular: chips e ordenação em uma linha cada */
@media (max-width: 479px) {
  .js .controles { gap: 10px; }
  .chips, .ordem { gap: 6px; flex-wrap: nowrap; }
  .chip, .ordem__opcao { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
}

.ver-mais { text-align: center; margin-top: 24px; }
.ver-mais__botao {
  padding: 13px 28px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800;
  border: 2px solid var(--roxo); background: #fff; color: var(--roxo);
}
.ver-mais__botao:hover { background: var(--roxo); color: #fff; }
.ver-mais__botao[hidden] { display: none; }

.link-semana { margin-top: 20px; text-align: center; }

/* ---------- coleção (/c/<slug>/): grade 2x2, cartões compactos ---------- */
.colecao__conferido { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--verde-nota); }
.grade--colecao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
@media (min-width: 560px) { .grade--colecao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.grade--colecao .oferta__corpo { padding: 10px 10px 12px; }
/* A hora da conferência já está no topo da página */
.grade--colecao .oferta__quando { display: none; }
.grade--colecao .oferta__titulo { font-size: 14px; }
.grade--colecao .oferta__prefixo:empty, .grade--colecao .oferta__sufixo:empty { display: block; }
.grade--colecao .oferta__prefixo, .grade--colecao .oferta__sufixo { min-height: 1.4em; }
.grade--colecao .oferta__linha-preco { flex-wrap: wrap; height: auto; min-height: 28px; gap: 4px 6px; }
.grade--colecao .oferta__preco strong { font-size: 19px; }
.grade--colecao .nota { font-size: 10px; padding: 3px 7px; }
.grade--colecao .botao-loja { font-size: 14px; padding: 11px 6px; }
.colecao__aviso { margin-top: 12px; font-size: 13px; color: var(--texto-suave); }
.colecao__acabou {
  max-width: 760px; margin-bottom: 20px; padding: 18px 20px; border-radius: 12px;
  background: #fff; border: 1px solid var(--borda);
}
.colecao__acabou-titulo { margin-bottom: 6px; font-size: 18px; font-weight: 800; color: var(--roxo); }
.colecao .link-semana { max-width: 760px; }
.link-semana a {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: var(--roxo); color: var(--dourado);
  font-weight: 800; font-size: 15px; text-decoration: none;
}
.link-semana a:hover { background: var(--roxo-medio); }

/* ---------- atalhos das categorias (rodapé) ---------- */
.atalhos { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.atalhos__titulo { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: #fff; }
.atalhos__lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.atalhos__lista a {
  display: inline-block; padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); color: #fff;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.atalhos__lista a:hover { border-color: var(--dourado); color: var(--dourado); }

/* ---------- bloco dos canais ---------- */
.bloco-canais { background: #fff; border-top: 1px solid var(--borda); }
.bloco-canais__dentro {
  max-width: 720px; margin: 0 auto; padding: 32px 16px 36px; text-align: center;
}
.bloco-canais__titulo { margin: 0; font-size: 22px; font-weight: 800; color: var(--roxo); }
.bloco-canais__texto { margin-top: 8px; color: var(--texto-suave); font-size: 14px; }
.bloco-canais__botoes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px;
}
.canal-grande {
  flex: 1 1 220px; max-width: 300px;
  padding: 14px 16px; border-radius: 10px;
  font-weight: 800; font-size: 15px; text-decoration: none;
}
.canal-grande--whatsapp { background: var(--verde-whatsapp); color: #fff; }
.canal-grande--whatsapp:hover { background: var(--verde-whatsapp-escuro); }
.canal-grande--telegram { background: var(--dourado); color: var(--roxo); }
.canal-grande--telegram:hover { background: var(--dourado-claro); }

/* ---------- rodapé ---------- */
.rodape { background: var(--roxo); color: #CFC6DD; }
.rodape__dentro { max-width: var(--largura); margin: 0 auto; padding: 28px 16px 36px; font-size: 12px; }
.rodape__aviso { margin-bottom: 10px; max-width: 760px; }
.rodape__atualizado { margin-top: 16px; color: var(--dourado); font-weight: 700; }

@media (min-width: 640px) {
  .barra-topo { font-size: 14px; }
  .marca__nome { font-size: 28px; }
}

/* ---------- página de produto (/p/<slug>-<id>/) ---------- */
.produto {
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
  max-width: 1000px; margin-bottom: 32px;
}
@media (min-width: 820px) { .produto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.produto__foto {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: #fff; border: 1px solid var(--borda); border-radius: 14px;
}
.produto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.produto--acabou .produto__foto img { filter: grayscale(1); opacity: .55; }
.produto__info { display: flex; flex-direction: column; }
.produto__titulo { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--texto); }
.produto__loja { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.produto__valores { margin: 18px 0 20px; }
.produto__prefixo, .produto__sufixo { font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.produto__linha-preco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.produto__preco strong { font-size: 32px; font-weight: 800; color: var(--roxo); }
.produto__obs { margin-top: 4px; font-size: 12px; color: var(--texto-suave); }
.produto__quando { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--verde-nota); }
.produto__botao { font-size: 17px; padding: 15px 8px; margin-top: 0; }
.produto__compartilhar {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
  padding: 12px 8px; border-radius: 10px; border: 2px solid var(--verde-whatsapp);
  color: var(--verde-whatsapp); font-weight: 800; font-size: 15px; text-decoration: none;
}
.produto__compartilhar:hover { background: #F1FBF4; }
.produto__aviso { margin-top: 14px; font-size: 12px; color: var(--texto-suave); }
.produto__acabou {
  margin-top: 18px; padding: 16px 18px; border-radius: 12px;
  background: #fff; border: 1px solid var(--borda);
}
.produto__acabou-titulo { margin-bottom: 4px; font-size: 18px; font-weight: 800; color: var(--vermelho); }
@media (min-width: 820px) { .produto__titulo { font-size: 24px; } }

/* ---------- privacidade e textos ---------- */
.texto { max-width: 720px; }
.texto h2 { margin: 24px 0 6px; font-size: 17px; font-weight: 800; color: var(--roxo); }
.texto p { margin-bottom: 10px; font-size: 15px; line-height: 1.6; }
.texto__atualizado { margin-top: 24px; font-size: 13px; color: var(--texto-suave); }
.link-botao {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}
.rodape__links { margin-top: 10px; }
.rodape__links a { color: #fff; }

/* ---------- aviso de cookies (só com pixel): faixa discreta no pé ---------- */
.consentimento {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  max-width: 760px; margin: 0 auto; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--borda); box-shadow: 0 6px 24px rgba(34, 12, 54, .18);
  font-size: 13px;
}
.consentimento[hidden] { display: none; }
.consentimento__texto { flex: 1 1 260px; }
.consentimento__texto a { color: var(--roxo-medio); font-weight: 700; }
.consentimento__botoes { display: flex; gap: 8px; }
.consentimento__botoes button {
  padding: 9px 16px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 800;
}
.consentimento__recusar { border: 1px solid var(--borda); background: #fff; color: var(--texto); }
.consentimento__aceitar { border: 0; background: var(--roxo); color: #fff; }