/* Identidade "Nove de Julho": azul-marinho + dourado sobre base branca/gelo,
   alinhada a lojanovedejulho.com.br (azul, branco, dourado -- os tons
   exatos nao foram confirmados, entao escolhi valores especificos que
   funcionam bem juntos; ajuste aqui se tiver a marca oficial em maos). */
:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --card: #ffffff;
  --ink: #142238;
  --muted: #5b6b82;
  --accent: #14335c;
  --accent-dark: #0d233f;
  --gold: #b8923d;
  --gold-soft: #f4ecd8;
  /* --gold puro so tem ~2.9:1 de contraste sobre fundo claro (falha WCAG AA) --
     as duas variantes abaixo sao pra uso como cor de TEXTO, nunca --gold puro. */
  --gold-texto-claro: #8a6d2e; /* texto dourado sobre fundo claro (~4.9:1) */
  --gold-texto-escuro: #d4ac5c; /* texto dourado sobre fundo escuro/--accent (~6:1) */
  --border: #dde3ec;

  /* cor PROPRIA de preco -- antes o preco usava --accent (o mesmo
     azul-marinho de titulo/link), e sumia no meio da pagina. Bordo
     liturgico: terceira cor natural ao lado de marinho + dourado,
     contraste ~9:1 sobre branco. Usar so em preco/desconto, nunca em
     link ou titulo, senao perde o sinal de "aqui esta o preco". */
  --preco: #8e1b2c;
  --preco-fundo: #fbeef0;

  /* consolida os varios tons de verde/vermelho quase iguais que foram
     sendo escolhidos separadamente em conversas diferentes pro mesmo
     significado (sucesso/erro) -- ver conversa: "site não estava
     padronizado". Um so par de cada daqui pra frente. */
  --sucesso-texto: #1e7a43;
  --sucesso-fundo: #e3f6ea;
  --erro-texto: #7a2118;
  --erro-fundo: #fdecea;

  /* escala de cantos -- antes havia 6/8/10/12/14/16/999px espalhados sem
     regra. Agora so 4 degraus (+ 50% pra circulo e 0):
     p = selos/etiquetas pequenas, m = botoes/campos/miniaturas,
     g = cards/caixas/paineis, pilula = botoes e chips arredondados. */
  --raio-p: 6px;
  --raio-m: 10px;
  --raio-g: 14px;
  --raio-pilula: 999px;

  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* esconde visualmente mas mantem acessivel pra leitor de tela/SEO --
   uso: <h1> semantico em paginas onde o hero e so imagem, sem lugar
   visual natural pro titulo (ver templates/index.html). */
.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;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--bg);
  color: var(--ink);
  /* trava o arrasto/scroll horizontal como rede de seguranca (ver
     conversa) -- a causa raiz era um bug na sangria dos banners no
     mobile empurrando .banner-uso-real 16px pra fora da tela (ja
     corrigido, ver regra .hero-banner-wrap/.banner-atacado/.banner-uso-real
     em @media max-width:640px). Overflow-x aqui SO no <body>, nunca no
     <html> -- colocar no <html> tambem quebra o header sticky
     (.topo-fixo), porque o <html> vira o "scroller" e o sticky perde a
     referencia certa pra grudar no topo (testado e confirmado). */
  overflow-x: hidden;
}

/* reveal ao rolar (static/js/reveal.js poe/tira essas classes; sem JS
   nada disso e´ aplicado). Subida curta (16px) e curva que desacelera
   -- efeito de "assentar", nao de "voar". */
/* "html" na frente sobe a especificidade acima de regras de 1 classe
   com transition propria (.modelo-card, .destaque-card), senao a
   transition deles apagava a do reveal. */
html .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-atraso, 0ms),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-atraso, 0ms);
}

html .reveal.reveal-visivel {
  opacity: 1;
  transform: none;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}

/* topo */

.topo-fixo {
  position: sticky;
  top: 0;
  z-index: 10;
}

.faixa-topo {
  background: var(--accent);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.faixa-topo::-webkit-scrollbar {
  display: none;
}

.faixa-topo-botao {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
}

.faixa-topo span:nth-child(2) {
  color: var(--gold-texto-escuro);
}

@media (max-width: 480px) {
  .faixa-topo span:nth-child(2) {
    display: none;
  }
  .faixa-topo {
    justify-content: flex-start;
  }
}

header.topo {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topo-esquerda {
  display: flex;
  align-items: center;
  gap: 12px;
}

.barra-persistente {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px 10px;
}

.barra-persistente-grupo + .barra-persistente-grupo {
  margin-top: 8px;
}

.barra-persistente-texto {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 6px;
}

.barra-progresso {
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--border);
  overflow: hidden;
}

.barra-progresso-preenchimento {
  height: 100%;
  border-radius: var(--raio-pilula);
  background: var(--accent);
  width: 0%;
  transition: width 0.35s ease;
}

.barra-progresso-preenchimento.barra-progresso-frete {
  background: #4a7a5f;
}

.menu-lateral-botao {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 4px 8px 4px 0;
  cursor: pointer;
  color: var(--ink);
}

.imagem-modal.menu-lateral-overlay {
  justify-content: flex-start;
  padding: 0;
}

.menu-lateral-caixa {
  width: min(300px, 84vw);
  height: 100%;
  max-height: 100%;
  background: var(--card);
  padding: 56px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  border-radius: 0;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
}

.menu-lateral-caixa a {
  padding: 13px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

a.marca {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
}

.marca-logo {
  display: block;
  height: 40px;
  width: auto;
}

.marca-texto {
  display: flex;
  flex-direction: column;
}

.marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--accent);
}

.marca-sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-texto-claro);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 16px;
}

.link-icone-topo {
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
}

a.link-carrinho {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

a.link-carrinho #contador-carrinho {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--raio-pilula);
  background: var(--accent);
  color: white;
  font-size: 0.75rem;
  text-align: center;
}

/* o icone de "Meus pedidos" (.topo-acoes) tomou espaco extra do
   cabecalho -- reduz marca/carrinho pra "Nove de Julho" e "Medalhas
   Catolicas" caberem numa linha cada de novo, como antes desse icone
   existir (ver conversa "loja mensageiros"). Precisa vir DEPOIS das
   regras base acima (.marca-logo/.marca-nome/.marca-sub/.link-carrinho),
   senao elas vencem por virem depois na cascata mesmo dentro do media
   query (mesmo bug ja visto com .menu-lateral-overlay). */
@media (max-width: 480px) {
  header.topo {
    gap: 8px;
  }
  .marca {
    gap: 6px;
  }
  .marca-logo {
    height: 34px;
  }
  .marca-nome {
    font-size: 1.02rem;
  }
  .marca-sub {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }
  .topo-acoes {
    gap: 10px;
  }
  a.link-carrinho {
    font-size: 0.8rem;
  }
}

/* busca fixa no topo (dentro de .topo-fixo, ver base.html) -- mesmo
   input/dropdown com busca ao vivo da home (.busca-wrap-home,
   static/js/home_busca.js), mesmo tamanho de campo tambem (ver
   conversa: a versao compacta anterior ficava pequena demais, sem
   necessidade real de espaco). Sem max-width/margin:auto de proposito
   -- pedido do usuario pra essa barra ir de ponta a ponta da tela,
   igual o cabecalho logo acima, em vez de ficar encaixotada no meio
   como o resto do conteudo (dentro de <main>, max-width:960px). */
.busca-wrap-topo {
  padding: 10px 16px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

/* hero da home */

.hero {
  padding: 8px 0 20px;
  text-align: center;
}

/* carrossel de 3 slides (ver conversa 2026-09-22) -- substituiu o
   banner unico estatico com botoes desenhados dentro da imagem. Altura
   fixada por aspect-ratio (os 3 slides tem exatamente a mesma
   proporcao, 1200x500) pra nao pular de tamanho ao trocar de slide;
   cada <div class="hero-slide"> (sem link -- navegacao de verdade e´
   a linha de botoes abaixo) fica empilhado por cima do outro
   (position:absolute) e so o marcado com hero-slide-ativo fica visivel
   -- ver static/js/hero_carrossel.js pro troca automatica/pontinhos/
   deslize. touch-action: pan-y deixa o navegador so interceptar o
   gesto HORIZONTAL pro JS (deslize entre slides), sem brigar com o
   scroll vertical normal da pagina. */
.hero-banner-wrap {
  position: relative;
  line-height: 0;
  margin: 0 0 20px;
  aspect-ratio: 1200 / 500;
  border-radius: var(--raio-g);
  overflow: hidden;
  background: var(--accent-dark);
  touch-action: pan-y;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-slide-ativo {
  opacity: 1;
  z-index: 1;
}

.hero-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-dots {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.hero-dot-ativo {
  background: #fff;
}

/* linha de botoes de verdade (clicaveis, com texto legivel por leitor
   de tela) logo abaixo do banner -- desde que o carrossel de slides
   (ver .hero-banner-wrap acima, conversa 2026-09-22) parou de desenhar
   botao dentro da imagem, essa linha e´ a UNICA navegacao explicita
   pros 3 destinos (catalogo/personalizada/PDF), nao mais redundante.
   Cabe em UMA linha ate no menor celular -- por isso o texto mais
   curto ("Baixar PDF" em vez de "Baixar catálogo em PDF") e fonte
   pequena, em vez do padrao .botao-hero-primario/secundario (grande
   demais pra 3 caberem lado a lado). */
.hero-acoes-linha {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.hero-acao {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 9px 4px;
  border-radius: var(--raio-g);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 6px 14px -8px rgba(20, 51, 92, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .hero-acao:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(20, 51, 92, 0.6);
  }
}

.botao-hero-primario,
.botao-hero-secundario {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--raio-pilula);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.botao-hero-primario {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(20, 51, 92, 0.5);
}

.botao-hero-secundario {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

@media (hover: hover) {
  .botao-hero-primario:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(20, 51, 92, 0.6);
  }
  .botao-hero-secundario:hover {
    background: var(--gold-soft);
    transform: translateY(-1px);
  }
}

/* faixa de vantagens (estilo "selos de confianca" de e-commerce) */

.vantagens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 18px;
  margin: 0 0 16px;
}

/* widget "liturgia de hoje" -- demonstracao ao vivo na propria landing
   /liturgia-do-mes (ver services/liturgia_hoje.py), pra quem esta
   decidindo se baixa o e-book ver um exemplo de verdade antes. */
.liturgia-hoje-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 16px 18px;
  margin: 0 0 16px;
  color: var(--ink);
}

.liturgia-hoje-selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.liturgia-hoje-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.98rem;
  margin: 0 0 4px;
}

.liturgia-hoje-leitura {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.liturgia-hoje-cta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

@media (hover: hover) {
  .liturgia-hoje-cta:hover {
    text-decoration: underline;
  }
}

@media (min-width: 640px) {
  .vantagens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.vantagem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  align-items: center;
}

@media (min-width: 640px) {
  .vantagem {
    flex: 0 0 calc(33.333% - 8px);
  }
}

.vantagem-icone {
  font-size: 1.5rem;
  margin-bottom: 4px;
  color: var(--accent);
}

.vantagem-icone .icone {
  display: block;
  width: 28px;
  height: 28px;
}

.vantagem-icone-img {
  height: 26px;
  width: auto;
}

.vantagem-icone-duplo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vantagem-icone-duplo img {
  height: 15px;
  width: auto;
}

.vantagem-icone-chip-escuro {
  display: inline-flex;
  align-items: center;
  background: #171527;
  border-radius: var(--raio-p);
  padding: 3px 6px;
}

.vantagem-icone-chip-escuro img {
  height: 15px;
}

.vantagem strong {
  font-size: 0.82rem;
}

.vantagem span:not(.vantagem-icone) {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
}

/* guia de passos da personalizada */

.passos-personalizada {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 18px;
  margin: 0 0 16px;
}

@media (min-width: 640px) {
  .passos-personalizada {
    grid-template-columns: repeat(4, 1fr);
  }
}

.passo-personalizada {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  align-items: center;
}

.passo-numero {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.passo-personalizada strong {
  font-size: 0.82rem;
}

.passo-personalizada span:not(.passo-numero) {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
}

/* busca */

.busca-wrap {
  margin: 16px 0 8px;
}

.busca-wrap-home {
  position: relative;
}

#busca,
.busca-home-input,
#busca-personalizada {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  background: var(--card);
  color: var(--ink);
}

.busca-home-legenda {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.busca-resultados {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  box-shadow: 0 14px 30px -16px rgba(20, 51, 92, 0.4);
  overflow: hidden;
}

.busca-resultado-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.busca-resultado-item img {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-m);
  object-fit: cover;
  flex-shrink: 0;
}

.busca-resultado-item span {
  font-size: 0.88rem;
  font-weight: 600;
}

.busca-resultado-ver-todos,
.busca-resultados-vazio {
  display: block;
  padding: 10px 12px;
  font-size: 0.82rem;
}

.busca-resultado-ver-todos {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.busca-resultados-vazio {
  color: var(--muted);
  margin: 0;
}

.filtros-categoria {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin: 4px 0 4px;
  scrollbar-width: none;
}

.filtros-categoria::-webkit-scrollbar {
  display: none;
}

.chip-categoria {
  display: inline-block;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--raio-pilula);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.chip-categoria[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.contagem {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 16px;
}

.sem-resultado {
  color: var(--muted);
  text-align: center;
  padding: 32px 16px;
}

/* grid de cards do catalogo */

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .grid-produtos {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .grid-produtos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-produto {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .card-produto:hover {
    box-shadow: 0 10px 24px -14px rgba(20, 51, 92, 0.35);
    transform: translateY(-2px);
    border-color: var(--accent);
  }
}

.card-imagem-wrap {
  position: relative;
}

.card-produto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--bg);
}

/* so a secao "Conheca alguns santos" da home (ver conversa 2026-09-19)
   -- reduz visualmente o tamanho da foto dentro do card, mantendo nome/
   preco/selos do mesmo jeito. O padding no wrap encolhe TANTO a foto
   quanto os selos (position:absolute com inset:0 usa a borda do padding
   como referencia, nao a borda do elemento) -- os dois acompanham juntos
   sem precisar reposicionar nada a mais. Nao mexe no /catalogo, que
   reusa as mesmas classes mas continua com a foto ocupando o card
   inteiro. */
.destaques-grupo .card-imagem-wrap {
  padding: 14px;
  background: var(--bg);
}

/* no hover (desktop), troca pra foto real do chaveiro daquele modelo --
   ja gerada em data/produtos.json, mostra "isso tambem vem em chaveiro"
   sem precisar de nenhuma imagem nova. */
.card-imagem-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

@media (hover: hover) {
  .card-produto:hover .card-imagem-alt {
    opacity: 1;
  }
}

.badge-formatos {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(20, 34, 56, 0.72);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 7px;
  border-radius: var(--raio-pilula);
  line-height: 1.3;
}

/* fundo era --gold puro com texto branco: so 2,9:1 de contraste,
   reprovado no PageSpeed/Lighthouse (precisa 4,5:1 pra texto desse
   tamanho, ~10px -- ver conversa 2026-09-22). --gold-texto-claro ja
   existia no :root exatamente pra esse tipo de caso (~4,9:1), so nao
   estava sendo usado aqui. */
.badge-vendas {
  position: absolute;
  left: 6px;
  top: 6px;
  background: var(--gold-texto-claro);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 7px;
  border-radius: var(--raio-pilula);
  line-height: 1.3;
}

.card-corpo {
  padding: 10px 12px 14px;
}

.card-corpo h2 {
  font-size: 0.95rem;
  margin: 0 0 4px;
  line-height: 1.25;
}

.card-corpo .preco {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 6px;
}

.card-avaliacoes {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 4px;
}

.card-estrelas {
  color: var(--gold);
  letter-spacing: 1px;
  margin-right: 2px;
}

.preco-atacado {
  color: var(--gold-texto-claro);
  font-weight: 600;
}

.card-corpo .ver-modelos {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

/* pagina de produto */

a.voltar {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin: 12px 0;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

h1 {
  font-size: 1.3rem;
  margin: 0 0 4px;
}

.instrucao {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 14px;
}

.aviso-preco-atacado {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  margin: 0 0 16px;
}

.aviso-preco-atacado strong {
  font-size: 0.95rem;
}

.cabecalho-produto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cabecalho-produto h1 {
  margin: 0;
}

.cabecalho-produto .ajuda-botao {
  flex-shrink: 0;
}

.vendas-recentes-produto {
  color: var(--gold-texto-claro);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 16px;
}

.aviso-info {
  background: #e7edf6;
  color: var(--accent);
  border-radius: var(--raio-m);
  padding: 12px 14px;
  font-size: 0.85rem;
  margin: 0 0 16px;
  line-height: 1.4;
}

.aviso-simulacao {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  margin: 8px 0 16px;
  line-height: 1.4;
}

.aviso-borda-medalha {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 12px;
}

.aviso-dados-salvos {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: space-between;
}

.aviso-dados-salvos .link-limpar-dados-salvos {
  background: none;
  border: none;
  padding: 0;
  color: #7a5c1f;
  text-decoration: underline;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.aviso-formatos {
  background: #e7edf6;
  color: var(--accent);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  margin: 0 0 16px;
  line-height: 1.4;
}

/* buy-box de preco (produto.html e personalizada.html) -- pedido do
   usuario 2026-09-17: preco visivel antes de escolher modelo/formato,
   estilo "site grande" (foto + preco + tabela de formatos + selos +
   botao), em vez de so aparecer depois de escolher tudo. */

.buybox {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 16px;
  margin: 14px 0 20px;
  box-shadow: 0 6px 20px rgba(20, 51, 92, 0.08);
}

.buybox-topo {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.buybox-img {
  width: 88px;
  height: 88px;
  border-radius: var(--raio-g);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.buybox-precos {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.buybox-de {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* preco grande na linha de base. Antes: riscado + selo de % na MESMA linha de base, como em
   loja grande: o olho le primeiro o numero, depois a economia. */
.buybox-linha-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 4px 0 8px;
}

/* preco na serifa da marca (Fraunces) -- pedido do usuario: "nao seria
   melhor outra fonte?". Da o ar de joalheria/loja de devocionais das
   referencias (Santo Altar) e separa ainda mais o preco do resto do
   texto em Public Sans. Tabela de formatos continua sans (leitura). */
.buybox-valor {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--fonte-titulo);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--preco);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}

.buybox-moeda,
.buybox-centavos {
  font-size: 0.45em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.buybox-moeda {
  margin-right: 3px;
}

.buybox-tag-desconto {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-texto-claro);
}

.buybox-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.buybox-tabela td {
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}

.buybox-tabela tr:last-child td {
  border-bottom: none;
}

.buybox-tabela td:last-child {
  text-align: right;
  white-space: nowrap;
}

.buybox-tabela .final {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.buybox-selos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.buybox-selos span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.buybox-selos .fininha {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}

.buybox-cta {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 16px rgba(20, 51, 92, 0.28);
  transition: transform 0.15s ease;
}

.buybox-cta:hover {
  transform: translateY(-1px);
}

/* galeria da buybox (produto.html, static/js/galeria.js) -- no celular
   a foto deixa de ser miniatura de 88px e ocupa a largura, com as
   outras vistas (formatos do mesmo modelo + verso) numa fileira que
   rola na horizontal. So produto.html tem .buybox-topo-galeria; a
   /personalizada continua com a foto pequena ao lado do preco. */
.buybox-topo-galeria {
  flex-direction: column;
  align-items: stretch;
}

.galeria {
  min-width: 0;
}

.galeria-principal {
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: var(--raio-g);
}

.galeria .buybox-img {
  width: min(100%, 300px);
  height: auto;
  aspect-ratio: 1;
  box-shadow: none;
}

.galeria-miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: safe center;
  padding: 2px;
}

.galeria-miniaturas::-webkit-scrollbar {
  display: none;
}

.galeria-mini {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.galeria-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria-mini:hover {
  border-color: var(--muted);
}

.galeria-mini.ativa {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.galeria-mini:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* desktop: 2 colunas classicas de pagina de produto -- foto a esquerda,
   preco + tabela de formatos a direita (antes o preco ficava encostado
   na borda direita com um vazio enorme no meio). display:contents deixa
   a foto e o bloco de preco do .buybox-topo virarem celulas do grid sem
   mudar o HTML do mobile. */
@media (min-width: 860px) {
  .buybox {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 36px;
    padding: 24px;
  }
  .buybox-topo {
    display: contents;
  }
  .buybox-img {
    grid-row: 1 / span 2;
    width: 300px;
    height: 300px;
    border-radius: var(--raio-g);
  }
  .galeria {
    grid-row: 1 / span 2;
    width: 300px;
  }
  .galeria .buybox-img {
    width: 300px;
    height: 300px;
  }
  .galeria-miniaturas {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  .galeria-mini {
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }
  .buybox-precos {
    align-self: end;
    padding: 8px 0 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .buybox-valor {
    font-size: 3.2rem;
  }
  .buybox-de {
    font-size: 0.8rem;
  }
  .buybox-tabela {
    align-self: start;
    margin-bottom: 0;
  }
}

/* toggle "acrescentar um segundo lado" (produto.html) -- em vez de 6
   botoes de formato (medalha/entremeio/chaveiro x 1/2 lados), mantem os
   3 formatos normais e oferece esse toggle: liga, o formato escolhido
   vira a versao de 2 lados por baixo dos panos (ver produto.js). */

.toggle-2lados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--gold-soft);
  border: 1px solid #e6d7ae;
  border-radius: var(--raio-m);
  padding: 12px 14px;
  margin: 4px 0 18px;
  cursor: pointer;
}

.toggle-2lados-texto {
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a5c1f;
}

.toggle-2lados-sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.toggle-2lados-switch {
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: var(--raio-g);
  background: var(--border);
  position: relative;
  transition: background 0.15s ease;
}

.toggle-2lados-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}

.toggle-2lados.ativo {
  background: #e9f7ee;
  border-color: #bfe6cc;
}

.toggle-2lados.ativo .toggle-2lados-switch {
  background: #2f9e5c;
}

.toggle-2lados.ativo .toggle-2lados-switch::after {
  left: 20px;
}

.toggle-2lados.ativo .toggle-2lados-texto {
  color: #1f6b3c;
}

.lado2-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 14px;
  margin: -6px 0 18px;
}

.lado2-widget-titulo {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.lado2-widget-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lado2-widget-lado {
  flex-shrink: 0;
  text-align: center;
}

.lado2-widget-lado img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}

.lado2-widget-lado span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
  max-width: 80px;
}

.lado2-widget-mais {
  font-size: 1.4rem;
  color: var(--border);
  flex-shrink: 0;
}

.lado2-widget-busca {
  flex: 1;
  position: relative;
  min-width: 0;
}

.lado2-widget-busca input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  font-size: 0.82rem;
  box-sizing: border-box;
}

.lado2-widget-resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 20;
}

.lado2-widget-resultado-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.8rem;
}

.lado2-widget-resultado-item:hover {
  background: var(--bg);
}

.lado2-widget-resultado-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.lado2-widget-modelos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lado2-widget-modelo-item {
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 4px;
  background: none;
  cursor: pointer;
  text-align: center;
  font-size: 0.75rem;
  width: 64px;
}

.lado2-widget-modelo-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio-p);
  display: block;
  margin-bottom: 2px;
}

.lado2-widget-modelo-item:hover,
.lado2-widget-modelo-item.selecionado {
  border-color: var(--accent);
}

.lado2-widget-escolhido {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.lado2-widget-escolhido img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
}

.lado2-widget-escolhido span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  max-width: 100px;
}

.lado2-widget-trocar {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}

.lado2-widget-subselecao {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.lado2-widget-subselecao-grupo {
  flex: 1;
}

.lado2-widget-subselecao-grupo legend {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.lado2-widget-subselecao-opcoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lado2-widget-subselecao-opcoes label {
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 6px 10px;
  font-size: 0.76rem;
  cursor: pointer;
}

.lado2-widget-subselecao-opcoes label:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.lado2-widget-preco-nota {
  font-size: 0.75rem;
  color: var(--gold-texto-claro);
  margin: 10px 0 0;
  text-align: center;
}

.lado2-widget-ou {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 10px 0;
}

.lado2-widget-personalizada {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  width: 100%;
}

.modelos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .modelos-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}

.modelo-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--raio-g);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  box-shadow: 0 2px 8px -4px rgba(20, 51, 92, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.modelo-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(20, 51, 92, 0.35);
}

@media (hover: hover) {
  .modelo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(20, 51, 92, 0.3);
    border-color: var(--gold);
  }
}

.modelo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.modelo-card span {
  padding: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* painel de selecao (tamanho + quantidade) */

.painel-selecao {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 18px;
}

.painel-selecao h2 {
  font-size: 1rem;
  margin: 0 0 14px;
}

.preview-formato-wrap {
  max-width: 220px;
  margin: 0 auto 16px;
}

.preview-formato-wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--raio-g);
  border: 1px solid var(--border);
  background: var(--bg);
}

/* quando o verso aparece (so medalha de 1 lado, ver produto.js),
   a linha vira 2 colunas e o wrap todo alarga um pouco -- feito por
   JS (classe "tem-verso") pra nao afetar o layout quando so tem a
   foto principal. */
.preview-formato-wrap.tem-verso {
  max-width: 320px;
}

.preview-formato-linha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.preview-formato-linha #sel-preview-imagem {
  flex: 1 1 0;
  min-width: 0;
}

.preview-verso {
  flex: 0 0 92px;
  text-align: center;
}

.preview-verso img {
  width: 92px;
  height: 92px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--raio-g);
  border: 1px solid var(--border);
  background: var(--bg);
}

.preview-verso span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.2;
}

fieldset.tamanhos,
fieldset.formatos,
fieldset.cores {
  border: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

fieldset.tamanhos legend,
fieldset.formatos legend,
fieldset.cores legend {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
  width: 100%;
}

.opcao-tamanho,
.opcao-formato,
.opcao-cor {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.forma-pagamento .opcao-formato {
  flex-wrap: wrap;
}

.opcao-formato-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--raio-p);
  object-fit: cover;
  flex-shrink: 0;
}

.etiqueta-rapido {
  flex-basis: 100%;
  margin-left: 22px;
  width: fit-content;
  background: var(--gold-soft);
  color: var(--gold-texto-claro);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--raio-pilula);
}

.quantidade {
  margin-bottom: 20px;
}

/* Colares -- peca exclusiva do varejo (ver conversa 2026-09-25 e
   templates/colares.html): cada colar publicado vira uma secao com
   galeria + descricao + botao proprio, separadas por uma borda quando
   houver mais de um (Nossa Senhora/Sao Jose entram aqui assim que
   tiverem foto de verdade, ver services/colares.py). */
.colar-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.colar-item:last-of-type {
  border-bottom: none;
}

.colar-item h2 {
  margin-top: 0;
}

/* Carrossel de fotos das pecas exclusivas do varejo (colar/pulseira,
   ver conversa 2026-09-25: "não tem como fazer no mesmo estilo [da
   Parresia]... sendo que melhor") -- 1 foto por vez, arrasta/desliza
   (scroll-snap nativo, sem lib nova) com bolinhas indicando a posicao,
   toque pra ampliar (ver .peca-zoom-* abaixo, reaproveita .imagem-modal
   ja usado nos avisos do carrinho). */
.peca-carrossel {
  margin: 0 0 16px;
}

.peca-carrossel-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--raio-g);
  scrollbar-width: none;
}

.peca-carrossel-trilho::-webkit-scrollbar {
  display: none;
}

.peca-carrossel-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  scroll-snap-align: start;
  cursor: zoom-in;
}

.peca-carrossel-pontos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.peca-carrossel-pontos .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s, transform 0.15s;
}

.peca-carrossel-pontos .ponto.ativo {
  background: var(--gold-texto-claro);
  transform: scale(1.3);
}

/* Preco em destaque -- maior e mais proximo do botao de comprar do que
   o resto do texto da pagina, mesmo criterio visual da Parresia (preco
   grande logo acima do CTA), sem inventar "de/por" nenhum (essas pecas
   sempre tiveram esse preco unico, nao teria um valor "riscado" real
   pra mostrar). */
.peca-preco-bloco {
  margin: 4px 0 16px;
}

.peca-preco-valor {
  font-family: var(--fonte-titulo);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold-texto-claro);
}

.peca-preco-parcelamento {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}

.peca-descricao h3 {
  font-size: 1rem;
  margin: 20px 0 8px;
}

.peca-descricao ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.peca-descricao li {
  margin-bottom: 4px;
}

/* Upload de foto pra personalizar um relicario (pedido em 2026-09-25:
   "Colocar upload de imagem, mas não gerar previa(não criei modelo)") --
   so mostra a propria foto enviada como previa (nao um mockup do
   produto composto, ver static/js/relicarios.js), com aviso deixando
   claro que a confirmacao/previa de verdade vem depois pelo WhatsApp. */
.personalizacao-bloco {
  margin: 4px 0 16px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--raio-g);
  background: var(--card);
}

.personalizacao-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.personalizacao-input {
  font-size: 0.85rem;
  max-width: 100%;
}

.personalizacao-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.personalizacao-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--raio-m);
  border: 1px solid var(--border);
}

.personalizacao-remover {
  border: none;
  background: none;
  color: var(--erro-texto);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.personalizacao-aviso {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Card de upsell da corrente companheira (relicario coracao ouro/prata,
   ver services/relicarios.py) -- "aviso" na propria pagina do produto,
   preco cheio (sem desconto de combo, ver conversa 2026-09-25). */
.compre-junto-card {
  margin: 4px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  background: var(--gold-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.compre-junto-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--raio-m);
  flex-shrink: 0;
}

.compre-junto-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compre-junto-info label {
  font-size: 0.88rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.compre-junto-checkbox {
  margin-top: 3px;
  flex-shrink: 0;
}

.compre-junto-preco {
  font-size: 0.82rem;
  color: var(--gold-texto-claro);
  font-weight: 600;
}

/* Popup de upsell da corrente logo apos adicionar o relicario no
   carrinho (ver conversa: "aparecer popup upsell quando adicionar o
   relicário no carrinho") -- reaproveita o mesmo shell .imagem-modal /
   .imagem-modal-caixa ja usado no zoom de foto e nos avisos do carrinho. */
.upsell-modal-conteudo {
  text-align: center;
}

.upsell-modal-conteudo img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--raio-m);
  margin: 0 auto 12px;
  display: block;
}

.upsell-modal-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.upsell-modal-preco {
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 16px;
}

.upsell-modal-botoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quantidade label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.stepper {
  display: flex;
  align-items: stretch;
  max-width: 180px;
}

.stepper button {
  width: 48px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 1.2rem;
  cursor: pointer;
}

.stepper button:first-child {
  border-radius: var(--raio-m) 0 0 var(--raio-m);
}

.stepper button:last-child {
  border-radius: 0 var(--raio-m) var(--raio-m) 0;
}

.stepper input {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  font-size: 1rem;
  padding: 10px 0;
}

button.botao-carrinho {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

button.botao-carrinho:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

/* selo de confianca (pagina de produto, embaixo do botao de comprar) */

.selo-confianca {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  background: var(--card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.selo-item {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: var(--ink);
  line-height: 1.15;
}

.selo-item strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 2px;
  color: var(--accent);
}

.selo-fininha {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* icones de traco (templates/_icones.html) no lugar dos emoji -- sem
   bolinha de fundo, so o desenho na cor da marca, como nas lojas de
   referencia. */
.selo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: var(--accent);
}

.selo-icone .icone {
  width: 24px;
  height: 24px;
}

.icone-inline {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 2px;
}

/* Bandeira do Brasil como imagem, nao emoji -- no Windows (Chrome/Edge)
   o emoji de bandeira 🇧🇷 nao tem glifo real e cai pro texto "BR" (ver
   conversa: "no desktop nao aparece", so no mobile). */
.selo-icone-brasil {
  width: 16px;
  height: auto;
  border-radius: 2px;
}

.selo-divisor {
  width: 1px;
  height: 38px;
  background: var(--border);
}

.compartilhar-produto {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.compartilhar-titulo {
  color: var(--muted);
  font-weight: 600;
}

.compartilhar-produto a,
.compartilhar-produto button {
  border: 1px solid var(--border);
  border-radius: var(--raio-pilula);
  padding: 6px 12px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* prova social (pagina de produto) */

.avaliacoes-produto {
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--raio-g);
}

.avaliacoes-produto h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.avaliacoes-resumo {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.avaliacoes-estrelas,
.avaliacao-estrelas {
  color: var(--gold);
  letter-spacing: 1px;
}

.avaliacoes-vazio {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.avaliacoes-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 14px;
}

.avaliacao-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
}

.avaliacao-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--raio-m);
  flex-shrink: 0;
}

.avaliacao-corpo {
  min-width: 0;
}

.avaliacao-nome {
  display: block;
  font-size: 0.86rem;
  margin: 2px 0;
}

.avaliacao-formato {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.avaliacao-corpo p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink);
  line-height: 1.4;
}

.form-avaliacao {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.form-avaliacao label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin: 12px 0 4px;
}

.form-avaliacao input[type="text"],
.form-avaliacao input[type="file"],
.form-avaliacao textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  font-size: 0.88rem;
  box-sizing: border-box;
  font-family: inherit;
}

.aval-formatos {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.aval-formatos label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0;
}

.aval-estrelas-input {
  display: flex;
  gap: 4px;
}

.aval-estrelas-input button {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  padding: 0;
}

.aval-estrelas-input button.ativa {
  color: var(--gold);
}

.aval-sucesso {
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--sucesso-texto);
}

.prova-social {
  margin: 24px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--raio-g);
}

/* descricao do produto (produto.html) -- texto "Sobre a devocao" a
   esquerda, ficha tecnica a direita no desktop; empilhados no celular.
   Tom editorial (serifa no titulo, medida de linha curta, filete
   dourado na curiosidade), pra ler como loja de devocionais e nao como
   formulario. */
.descricao-produto {
  display: grid;
  gap: 24px;
  margin: 28px 0 0;
  padding: 24px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
}

.descricao-eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-texto-claro);
}

.descricao-sobre h2,
.descricao-ficha h2 {
  margin: 0 0 12px;
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--ink);
}

.descricao-texto {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.descricao-curiosidade {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 var(--raio-m) var(--raio-m) 0;
}

.descricao-curiosidade strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-texto-claro);
}

.descricao-curiosidade p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.descricao-link-blog {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}

.descricao-ficha h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.descricao-ficha dl {
  margin: 0;
}

.descricao-ficha dl > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.5;
}

.descricao-ficha dl > div:last-child {
  border-bottom: none;
}

.descricao-ficha dt {
  font-weight: 700;
  color: var(--muted);
}

.descricao-ficha dd {
  margin: 0;
  color: var(--ink);
}

@media (min-width: 860px) {
  .descricao-produto {
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    padding: 32px;
  }
  .descricao-produto-so-ficha {
    grid-template-columns: 1fr;
  }
  .descricao-ficha dl > div {
    grid-template-columns: 9rem 1fr;
  }
  .descricao-sobre h2 {
    font-size: 2rem;
  }
}

.relacionados {
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--raio-g);
}

.relacionados h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.relacionados .destaques-linha {
  margin-bottom: 12px;
}

.prova-social h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.prova-social > p {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.prova-social-linha {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.prova-social-card {
  flex: 0 0 auto;
  width: 150px;
  border-radius: var(--raio-g);
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  scroll-snap-align: start;
}

.prova-social-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.prova-social-legenda {
  padding: 10px;
  font-size: 0.75rem;
  color: var(--ink);
}

.prova-social-acoes {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* pagina do carrinho */

.vazio-texto {
  color: var(--muted);
  margin: 24px 0 16px;
}

.botao-secundario {
  display: inline-block;
  padding: 12px 18px;
  border: 1.5px solid var(--accent);
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .botao-secundario:hover {
    background: var(--gold-soft);
    transform: translateY(-1px);
  }
}

.lista-itens {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.item-carrinho {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 10px;
}

.item-carrinho img {
  width: 72px;
  height: 72px;
  border-radius: var(--raio-m);
  object-fit: cover;
}

.item-imagem-link {
  display: block;
  width: 72px;
}

.item-info h2 a {
  color: inherit;
  text-decoration: none;
}

.item-info h2 a:hover {
  text-decoration: underline;
}

/* item de 2 lados -- mesma coluna de 72px do .item-carrinho img normal,
   so que empilha as duas fotos (lado 1 em cima, lado 2 embaixo) em vez
   de uma unica imagem. */
.item-imagem-duas-faces {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 72px;
}

.item-imagem-duas-faces img {
  width: 72px;
  height: 34.5px;
  border-radius: var(--raio-m);
  object-fit: cover;
  display: block;
}

.item-info h2 {
  font-size: 0.95rem;
  margin: 0 0 2px;
}

.item-info p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.variacao-tamanho-select,
.variacao-cor-select,
.variacao-cor-cruz-select {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: #e7edf6;
  border: none;
  border-radius: var(--raio-p);
  padding: 2px 6px;
  cursor: pointer;
}

.item-aviso-foto {
  font-size: 0.75rem !important;
  color: var(--accent) !important;
  background: #e7edf6;
  border-radius: var(--raio-p);
  padding: 4px 8px;
  display: inline-block;
  margin: 0 0 8px !important;
}

/* pilula unida (mesmo padrao do .stepper da pagina de produto) em vez
   de 3 caixinhas soltas cada uma com cantinho proprio -- ver conversa:
   "os botões de desktop tem uns feios... não é arredondado, é quadrado
   simples". */
.item-stepper {
  display: flex;
  align-items: stretch;
}

.item-stepper button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 1rem;
  cursor: pointer;
}

.item-stepper button:first-child {
  border-radius: var(--raio-m) 0 0 var(--raio-m);
}

.item-stepper button:last-child {
  border-radius: 0 var(--raio-m) var(--raio-m) 0;
}

.item-stepper .item-qtd {
  width: 44px;
  height: 32px;
  text-align: center;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  background: var(--bg);
  color: inherit;
  -moz-appearance: textfield;
}

.item-stepper .item-qtd::-webkit-outer-spin-button,
.item-stepper .item-qtd::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.item-preco {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 8px 0 0;
}

.item-preco strong {
  color: var(--ink);
}

.item-remover {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--raio-pilula);
  background: var(--bg);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  align-self: start;
}

.resumo-carrinho {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 18px;
}

.resumo-linha {
  font-size: 1rem;
  margin: 0 0 6px;
}

.resumo-subtotal {
  font-size: 1.15rem;
  margin: 10px 0;
}

.cupom-bloco {
  margin: 0 0 10px;
}

.cupom-linha {
  display: flex;
  gap: 8px;
}

.cupom-linha input {
  flex: 1;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  font-size: 0.88rem;
}

.cupom-linha button {
  padding: 9px 16px;
  border: 1px solid var(--gold-texto-claro);
  border-radius: var(--raio-m);
  background: transparent;
  color: var(--gold-texto-claro);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.cupom-linha button:disabled {
  opacity: 0.5;
  cursor: default;
}

.cupom-mensagem {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.resumo-desconto {
  color: #1e7a3b;
  font-size: 1rem;
  margin: -6px 0 10px;
}

.resumo-frete-linha {
  color: var(--muted);
  font-size: 1rem;
  margin: -6px 0 10px;
}

.resumo-total-final {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 4px 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.resumo-total-aviso {
  font-size: 0.82rem;
  color: var(--muted);
  margin: -6px 0 14px;
}

.progresso-bloco {
  margin: 0 0 16px;
}

.progresso-texto {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0 0 6px;
}

/* Botao "completar com os mais vendidos" embaixo da barra de atacado
   (ver conversa 2026-09-25) -- mesmo padrao visual do botao-secundario,
   so que menor pra caber junto da barra sem competir com ela. */
.botao-completar-atacado {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid var(--gold-texto-claro);
  border-radius: var(--raio-m);
  background: transparent;
  color: var(--gold-texto-claro);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.botao-completar-atacado:disabled {
  opacity: 0.5;
  cursor: default;
}

.calculadora-frete {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  margin: 16px 0;
}

.calculadora-frete > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.frete-linha {
  display: flex;
  gap: 8px;
}

#frete-cep,
.frete-linha input[type="text"] {
  flex: 1;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: var(--card);
  color: var(--ink);
}

input[readonly] {
  background: var(--bg);
  color: var(--muted);
}

#btn-calcular-frete,
.frete-linha button {
  padding: 12px 18px;
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

#btn-calcular-frete:disabled,
.frete-linha button:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

#frete-resultado {
  margin-top: 12px;
}

.frete-opcao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.frete-opcao[aria-pressed="true"] {
  border-color: var(--accent);
  background: #eef2f8;
}

.frete-opcao-nome {
  font-weight: 600;
}

.frete-opcao-logo {
  height: 16px;
  width: auto;
  vertical-align: -3px;
  margin-right: 5px;
}

/* Jadlog (marca compacta) e Loggi (marca quadrada) ficam visualmente
   menores que as outras nessa altura padrão -- aumenta só essas duas
   pra pesarem igual ao lado de Correios/Azul/Total Express. */
.frete-opcao-logo[src$="jadlog.png"],
.frete-opcao-logo[src$="loggi.png"] {
  height: 22px;
  vertical-align: -6px;
}

.frete-opcao-prazo {
  color: var(--muted);
  font-size: 0.78rem;
}

.frete-opcao-aviso {
  color: #7a5c1f;
  font-size: 0.75rem;
  margin-top: 2px;
}

.frete-opcao-preco {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  text-align: right;
}

.frete-opcao-preco-original {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: line-through;
}

.frete-opcao-gratis {
  color: var(--sucesso-texto);
}

.frete-opcao-por {
  color: var(--accent);
}

.frete-gratis-aviso {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.frete-erro {
  color: var(--erro-texto);
  font-size: 0.85rem;
}

.aviso-minimo {
  background: var(--erro-fundo);
  color: var(--erro-texto);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.85rem;
  margin: 0 0 12px;
}

.aviso-pagamento {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 12px;
}

.aviso-producao {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 12px;
}

.aviso-producao strong {
  color: var(--ink);
}

.aviso-frete-estimativa {
  background: var(--gold-soft);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 12px;
}

.gatilho-producao {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 12px;
}

.gatilho-producao:empty {
  display: none;
}

.preview-preco {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 14px;
}

.preview-preco strong {
  color: var(--accent);
}

.pix-bloco {
  margin: 0 0 16px;
}

.pix-resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  background: var(--card);
}

.pix-qr {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: var(--raio-m);
}

.pix-resultado label {
  font-size: 0.78rem;
  color: var(--muted);
  align-self: flex-start;
}

.pix-copia-cola {
  width: 100%;
  font-family: monospace;
  font-size: 0.72rem;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: var(--bg);
  color: inherit;
  resize: none;
}

.pix-copiado {
  color: var(--sucesso-texto);
  font-size: 0.8rem;
  font-weight: 600;
}

.resumo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #25d366;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 60;
  transition: transform 0.15s ease;
}

/* Circulo desenhado em CSS puro (nao mais uma imagem com o circulo
   verde ja´ desenhado dentro) -- a imagem antiga tinha a borda do
   circulo anti-aliasada assumindo um fundo claro por baixo, o que
   deixava uma auréola clara visivel quando o botao (fixed, sempre por
   cima) passava sobre o fundo escuro do rodape ao rolar a pagina (ver
   conversa). Sem imagem nenhuma na borda, nao tem o que falhar. */
.whatsapp-flutuante img {
  display: block;
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.whatsapp-flutuante:hover {
  transform: scale(1.06);
}

.video-flutuante {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 59;
  display: block;
}

.video-flutuante video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.video-flutuante-fechar {
  position: fixed;
  left: 58px;
  bottom: 58px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 61;
}

.whatsapp-flutuante,
.video-flutuante,
.video-flutuante-fechar {
  transition: transform 0.15s ease, bottom 0.15s ease;
}

/* pagina de produto: barra fixa de compra some pra cima os botoes
   flutuantes (whatsapp/video), pra nao ficarem um em cima do outro */
body.tem-barra-fixa-comprar .whatsapp-flutuante {
  bottom: 84px;
}

body.tem-barra-fixa-comprar .video-flutuante {
  bottom: 78px;
}

body.tem-barra-fixa-comprar .video-flutuante-fechar {
  bottom: 122px;
}

body.tem-barra-fixa-comprar main {
  padding-bottom: 90px;
}

.barra-fixa-comprar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}

.barra-fixa-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.barra-fixa-info strong {
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-fixa-info span {
  font-size: 0.75rem;
  color: var(--muted);
}

/* na barra fixa o preco fica em Public Sans (a Fraunces e´ mais larga
   e cortava "R$ 5,00" no celular) -- so a cor bordo marca o preco. */
#barra-fixa-preco {
  color: var(--preco);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

#barra-fixa-detalhe {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* info (nome + preco) com largura propria e botao ocupando o resto --
   antes o botao era fixo e em tela de 360px esmagava o preco
   ("a partir de R$ 5" cortado). Texto longo no botao quebra em 2 linhas. */
.barra-fixa-comprar .barra-fixa-info {
  flex: 0 0 auto;
  max-width: 46%;
}

.barra-fixa-comprar .botao-carrinho {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 12px 16px;
  line-height: 1.2;
}

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 25, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.video-modal-caixa {
  width: min(860px, 92vw);
  max-height: 80vh;
  background: #000;
  border-radius: var(--raio-g);
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.video-modal-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}

.video-modal video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
  background: #000;
}

.imagem-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 25, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.imagem-modal-caixa {
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--raio-g);
  padding: 18px;
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.imagem-modal-caixa img {
  width: 100%;
  border-radius: var(--raio-m);
  display: block;
}

.imagem-modal-caixa p {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 10px 0 0;
  text-align: center;
}

.imagem-modal-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 34, 56, 0.75);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}

.imagem-modal-caixa-larga {
  width: min(720px, 92vw);
  text-align: left;
}

.tabela-desconto-titulo {
  font-size: 1.1rem;
  margin: 4px 30px 6px 0;
}

.tabela-desconto-intro {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 18px;
}

.tabela-desconto {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.86rem;
}

.tabela-desconto caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent);
}

.tabela-desconto th,
.tabela-desconto td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.tabela-desconto td:last-child,
.tabela-desconto th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela-desconto tbody tr:last-child td {
  font-weight: 700;
  color: var(--gold-texto-claro);
}

.ajuda-caminho {
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 14px;
  margin: 0 0 14px;
}

.ajuda-caminho h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.ajuda-caminho ol {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 0.86rem;
  color: var(--muted);
}

.ajuda-caminho li {
  margin-bottom: 4px;
}

#modal-ajuda-produto ol {
  padding-left: 20px;
  font-size: 0.9rem;
}

#modal-ajuda-produto li {
  margin-bottom: 6px;
}

.ajuda-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--accent);
  border-radius: var(--raio-pilula);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0 0 12px;
}

.ajuda-botao-centralizado {
  display: flex;
  width: fit-content;
  margin: 0 auto 12px;
}

/* usado pelo popup de upsell da cruz (base.html) -- era compartilhado
   tambem com o popup "quer ajuda pra fazer seu pedido?" da home, ja
   removido (ver conversa), mas essa classe generica de par de botoes
   continua em uso aqui. */
.popup-ajuda-botoes {
  display: flex;
  gap: 8px;
}

.popup-ajuda-botoes button {
  flex: 1;
  padding: 9px 10px;
  font-size: 0.82rem;
}

.upsell-cruz-texto {
  font-size: 0.92rem !important;
  color: var(--ink) !important;
  text-align: left !important;
  margin: 12px 0 14px !important;
}

#upsell-cruz-adicionar {
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.link-guia-tamanhos {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  text-decoration: underline;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  padding: 12px 20px;
  border-radius: var(--raio-pilula);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 50;
  max-width: calc(100% - 32px);
  text-align: center;
}

/* banner do desconto de atacado automatico, bem no topo da home --
   imagem fornecida pelo cliente, ver templates/index.html */

.banner-atacado {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  border-radius: var(--raio-g);
  overflow: hidden;
  margin: 0 0 16px;
  line-height: 0;
  cursor: pointer;
}

.banner-atacado img {
  width: 100%;
  height: auto;
  display: block;
}

.banner-urgencia {
  background: var(--gold-soft);
  color: #7a5c1f;
  border-radius: var(--raio-g);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: center;
}

.banner-urgencia strong {
  color: #6b4a12;
}

.nossa-historia {
  max-width: 68ch;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
}

.nossa-historia h2 {
  font-size: 1.02rem;
  margin: 0 0 8px;
  color: var(--accent);
}

.nossa-historia p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
}

.nossa-historia-corpo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.nossa-historia-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.nossa-historia-corpo p {
  margin-top: 0;
}

/* destaques da home (mais vendidos / novidades / etc) */

.destaques {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.destaques-titulo {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--accent);
}

.destaques-subtitulo {
  font-size: 0.85rem;
  margin: -4px 0 8px;
  color: var(--muted);
}

.destaques-linha {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.destaque-card {
  flex: 0 0 auto;
  width: 108px;
  border-radius: var(--raio-g);
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.destaque-card img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  display: block;
}

.destaque-card span {
  display: block;
  padding: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Grade da pagina-hub /linha-premium (pedido em 2026-09-25, 2a parte:
   "coloca tudo numa linha so") -- reaproveita .destaques-linha/.destaque-
   card da home, so que sem scroll horizontal (a pagina inteira e´ sobre
   essas pecas, entao mostra tudo de uma vez em vez de esconder atras de
   um scroll lateral pensado pra teaser de 1 linha na home). */
.destaques-linha-pagina {
  flex-wrap: wrap;
  overflow-x: visible;
}

.destaques-linha-pagina .destaque-card {
  width: 150px;
}

.destaques-linha-pagina .destaque-card img {
  height: 150px;
}

/* Upsell da Linha Premium no carrinho (pedido em 2026-09-25, 3a parte:
   "a mesma linha de cards que tem na home, coloca no carrinho, menor
   talvez") -- mesmo scroll horizontal da home, card um pouco menor (84px
   em vez de 108px) pra ficar claramente secundario, sem competir com o
   resumo do pedido logo abaixo. */
.destaques-carrinho {
  margin-bottom: 20px;
}

.destaques-linha-carrinho .destaque-card {
  width: 84px;
}

.destaques-linha-carrinho .destaque-card img {
  height: 84px;
}

.destaques-linha-carrinho .destaque-card span {
  font-size: 0.75rem;
  padding: 6px;
}

/* Sugestoes pra completar o pedido minimo dentro do proprio popup (ver
   conversa 2026-09-25) -- reaproveita o .destaque-card de cima, so que
   em <button> em vez de <a> (adiciona ao carrinho na hora, nao navega). */
.aviso-minimo-sugestoes {
  margin: 14px 0;
  text-align: left;
}

.aviso-minimo-sugestoes-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.destaque-card-sugestao {
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.destaque-card-sugestao span strong {
  color: var(--gold-texto-claro);
}

.destaque-card-sugestao:disabled {
  opacity: 0.5;
  cursor: default;
}

/* banner de destaque para a personalizada e o kit sugerido, na home --
   imagens fornecidas pelo cliente, ver templates/index.html */

.banner-personalizada,
.banner-uso-real,
.banner-kit,
.banner-kit-topo {
  display: block;
  border-radius: var(--raio-g);
  overflow: hidden;
  margin: 0 0 20px;
  line-height: 0;
}

.banner-personalizada img,
.banner-uso-real img,
.banner-kit img,
.banner-kit-topo img {
  width: 100%;
  height: auto;
  display: block;
}

/* sangria no mobile pros 3 banners novos (hero/atacado/uso-real) --
   o texto vem desenhado dentro da imagem (ver conversa), entao ganhar
   os ~32px do padding lateral do <main> aumenta o texto de verdade em
   vez de so a moldura. Sem sangria no desktop -- ali a imagem ja fica
   bem grande dentro do max-width de 960px do <main>. Precisa vir DEPOIS
   das regras acima (.banner-uso-real base tem margin:0 0 20px, que
   sobrescreveria margin-left/right daqui se essa regra viesse antes --
   ver conversa: era exatamente essa ordem invertida que deixava o
   banner-uso-real sangrando so de um lado, empurrando a pagina inteira
   pra permitir arrasto horizontal). */
@media (max-width: 640px) {
  .hero-banner-wrap,
  .banner-atacado,
  .banner-uso-real {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    border-radius: 0;
  }

  .hero-banner {
    border-radius: 0;
  }
}

/* pagina /personalizada -- upload */

.card-upload {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 20px;
}

label.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--border);
  border-radius: var(--raio-g);
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

label.dropzone:active {
  border-color: var(--accent);
}

/* estado visual enquanto o arquivo esta sendo arrastado por cima (ver
   static/js/personalizada.js) -- so faz sentido em ponteiro com mouse
   de verdade, arrastar arquivo pro navegador nao existe em touch. */
label.dropzone.dropzone-arrastando {
  border-color: var(--accent);
  background: var(--bg);
}

.dropzone-dica-desktop {
  display: none;
}

.escolher-catalogo {
  margin: 14px 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.escolher-catalogo-titulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 8px;
}

.escolher-catalogo-santo-nome {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 10px;
}

@media (hover: hover) and (pointer: fine) {
  .dropzone-dica-desktop {
    display: block;
  }
}

label.dropzone .icone {
  font-size: 2rem;
}

label.dropzone .principal {
  font-weight: 600;
}

label.dropzone .secundario {
  font-size: 0.85rem;
  color: var(--muted);
}

input[type="file"] {
  display: none;
}

#nome-arquivo {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  word-break: break-word;
}

.card-upload fieldset.tamanhos,
.card-upload fieldset.formatos,
.card-upload fieldset.cores {
  margin-top: 0;
  margin-bottom: 18px;
}

.card-upload .quantidade {
  margin-top: 18px;
  margin-bottom: 0;
}

.card-upload #botao-enviar {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.card-upload #botao-enviar:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

/* editor de recorte */

#cropper-canvas {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--raio-g);
  touch-action: none;
  background: #111;
}

.cropper-dica {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 10px 0 0;
}

.zoom-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.zoom-linha span {
  font-size: 1.1rem;
}

.zoom-linha input[type="range"] {
  flex: 1;
}

#botao-cropper-confirmar {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}

.duas-colunas-personalizada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 10px;
}

.duas-colunas-personalizada .botao-secundario {
  display: block;
  text-align: center;
  padding: 12px;
  text-decoration: none;
}

#botao-reposicionar {
  display: block;
  width: 100%;
  padding: 13px;
  margin-bottom: 16px;
}

.opcao-sem-foto {
  text-align: center;
  margin: 18px 0 0;
}

.opcao-sem-foto-texto {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.opcao-sem-foto .botao-secundario {
  display: block;
  width: 100%;
  padding: 13px;
}

.opcao-sem-foto .botao-secundario:disabled {
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.preview-personalizada {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 16px;
  margin-bottom: 16px;
}

.preview-personalizada img {
  width: 100%;
  /* a peca real e´ pequena (medalha/entremeio/chaveiro) -- sem um teto,
     a previa (imagem quadrada) esticava ate quase a largura toda do
     <main> (960px) em telas largas, dominando a pagina sem necessidade
     (ver conversa). Continua responsiva/menor no celular. */
  max-width: 420px;
  margin: 0 auto;
  border-radius: var(--raio-g);
  display: block;
}

.indicador-lado {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.indicador-lado a {
  font-weight: 600;
  color: var(--accent);
  margin-left: 8px;
}

.duas-faces-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.duas-faces-lado {
  text-align: center;
}

.duas-faces-rotulo {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.duas-faces-lado img {
  width: 100%;
  border-radius: var(--raio-g);
  display: block;
  border: 1px solid var(--border);
}

@media (max-width: 480px) {
  .duas-faces-preview {
    grid-template-columns: 1fr;
  }
}

.erro {
  background: var(--erro-fundo);
  color: var(--erro-texto);
  border-radius: var(--raio-m);
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

/* whatsapp */

.pedido-id {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.cadastro-cliente {
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 16px;
  margin: 0 0 14px;
  background: var(--card);
}

/* Flash rapido quando o formulario aparece ao escolher "Pix ou Cartao"
   -- sem isso, em telas onde o formulario ja cabe no viewport o
   scrollIntoView nao move nada e o clique parece nao ter feito efeito
   nenhum (ver auditoria Claude in Chrome). */
.cadastro-cliente.destaque-revelado {
  animation: destaqueRevelado 900ms ease-out;
}

@keyframes destaqueRevelado {
  0% { background: var(--accent-soft, #fff3cd); border-color: var(--accent, #d4a017); }
  100% { background: var(--card); border-color: var(--border); }
}

.cadastro-cliente h2 {
  font-size: 1rem;
  margin: 0 0 4px;
}

.cadastro-tipo-pessoa {
  display: flex;
  gap: 18px;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 0.88rem;
}

.cadastro-tipo-pessoa legend {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0;
  margin: 0 0 6px;
}

.cadastro-campos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cadastro-campos label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
}

.cadastro-campos input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  font-size: 0.92rem;
  font-family: inherit;
}

.cadastro-linha-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cadastro-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.85rem;
  line-height: 1.35;
  cursor: pointer;
}

.cadastro-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}

.cadastro-destinatario {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.campo-erro {
  margin: -8px 0 0;
  font-size: 0.78rem;
  color: var(--erro-texto);
}

.cadastro-ie-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.cadastro-ie-opcoes .cadastro-checkbox {
  margin-top: 8px;
}

.cadastro-instrucao-destinatario {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 14px 0 4px;
}

.botao-pagar {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border: none;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.botao-pagar:active {
  background: var(--accent-dark);
}

.botao-pagar:disabled {
  opacity: 0.6;
  cursor: default;
}

.selo-confianca {
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 10px 0 0;
}

.whatsapp-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.botao-whatsapp {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--raio-m);
  background: #25d366;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.botao-whatsapp:active {
  background: #1eb958;
}

.botao-whatsapp-icone {
  height: 22px;
  width: auto;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
}

.opcao-formato-icone-wpp {
  height: 18px;
  width: auto;
  vertical-align: -4px;
}

.botao-whatsapp-secundario {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* rodape */

.rodape {
  margin-top: 32px;
  background: var(--accent-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 16px 0;
}

.rodape-colunas {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 24px;
}

@media (min-width: 640px) {
  .rodape-colunas {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.rodape-coluna {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rodape-coluna strong {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.rodape-coluna a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.85rem;
}

.rodape-coluna a:hover {
  color: #fff;
  text-decoration: underline;
}

.rodape-link-icone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rodape-link-icone img {
  flex-shrink: 0;
  opacity: 0.8;
}

/* logo do WhatsApp em linha com texto (menu lateral, admin, compartilhar
   da pagina de produto) -- ver conversa: era emoji generico de balao
   (💬), trocado pela logo de verdade. */
.icone-marca-inline {
  height: 14px;
  width: auto;
  vertical-align: -2px;
  margin-right: 3px;
}

.rodape-marca p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.rodape-logo {
  margin-bottom: 4px;
}

.rodape-newsletter {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rodape-newsletter label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}

.rodape-newsletter-linha {
  display: flex;
  gap: 6px;
}

.rodape-newsletter-linha input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--raio-p);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.82rem;
}

.rodape-newsletter-linha input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.rodape-newsletter-linha button {
  padding: 8px 14px;
  border-radius: var(--raio-p);
  border: none;
  background: var(--gold);
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.rodape-newsletter-linha button:disabled {
  opacity: 0.6;
  cursor: default;
}

.rodape-newsletter-feedback {
  margin: 0;
  font-size: 0.78rem;
  color: #9be29b;
}

.rodape-newsletter-feedback-erro {
  color: #f2a1a1;
}

/* landing /liturgia-de-outubro -- captura de e-mail maior/de pagina
   inteira (a do rodape acima e´ so o widget compacto presente em toda
   pagina). Botao de download so aparece depois do cadastro (ver
   static/js/liturgia_outubro.js). */
.ebook-captura {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 24px 22px;
  margin: 20px 0;
}

.ebook-captura-lista p {
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--accent);
}

.ebook-captura-lista ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.ebook-captura-lista li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.ebook-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.ebook-form label {
  font-weight: 600;
  font-size: 0.92rem;
}

.ebook-form-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ebook-form-linha input {
  flex: 1;
  min-width: 200px;
  padding: 13px 16px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.95rem;
}

.ebook-form-linha button {
  padding: 13px 24px;
  border-radius: var(--raio-pilula);
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}

.ebook-form-linha button:disabled {
  opacity: 0.6;
  cursor: default;
}

.ebook-form-feedback {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--erro-texto);
}

.ebook-download {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.ebook-download p {
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 12px;
}

.ebook-download .ebook-download-calendario {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 18px 0 10px;
}

@media (min-width: 640px) {
  .ebook-captura {
    padding: 32px 36px;
  }
}

/* landing /liturgia-do-mes -- mais respiro entre os blocos (pedido do
   usuario: "dar mais espaco entre os paragrafos"), escopado com
   .pagina-liturgia pra nao mexer em .instrucao nas outras paginas. */
.pagina-liturgia .instrucao {
  margin: 0 0 24px;
  line-height: 1.6;
}

.pagina-liturgia .ebook-captura-lista li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.liturgia-creditos-foto {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  margin: 6px 0 26px;
}

.rodape-selos {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* Quase toda logo de pagamento tem cor que some ou perde contraste no
   fundo azul-marinho do rodape (Visa e´ um azul parecido, Apple Pay/
   Samsung Wallet sao preto puro, Google Pay tem texto cinza escuro) --
   ver conversa: pediu as logos OFICIAIS, entao em vez de recolorir (o
   que desrespeitaria a marca), TODAS ganham uma "placa" branca, igual
   aparece em maquininha/comprovante de cartao -- visual consistente pra
   fileira inteira, em vez de misturar logo "solta" com logo "em placa".
   "Pagamento seguro" e "Boleto" nao sao marca de uma empresa so (nao ha´
   "logo oficial" pra elas) -- static/img/pagamento/pagamento-seguro.svg
   e boleto.svg sao icones proprios (cadeado/codigo de barras + texto),
   desenhados no mesmo padrao visual pra fila ficar consistente. */
.rodape-selo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--raio-p);
  padding: 3px 8px;
  line-height: 0;
}

.rodape-selo-logo {
  height: 16px;
  width: auto;
  display: block;
}

.rodape-selo-logo-quadrada {
  height: 20px;
}

.rodape-selo-logo-larga {
  height: 18px;
  width: auto;
}

.rodape-selos-processadoras {
  border-top: none;
  padding-top: 0;
  gap: 6px 8px;
}

.rodape-selo-logo-processadora {
  height: 14px;
  width: auto;
  display: block;
}

.rodape-selo-processadoras {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.rodape-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

.rodape-legal p {
  margin: 0 0 4px;
}

/* paginas institucionais (/atendimento/<slug>) */

.conteudo-institucional {
  max-width: 68ch;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
  counter-reset: novena-dia;
}

/* So no blog (ver conversa 2026-09-25: "os textos não ficariam melhor
   se fossem centralizados?") -- centraliza a COLUNA de texto dentro da
   pagina mais larga (main tem 960px), sem centralizar o texto em si
   (paragrafo centralizado fica mais dificil de ler). */
.conteudo-institucional-blog {
  margin: 0 auto;
}

.conteudo-institucional h2 {
  font-size: 1.1rem;
  margin: 32px 0 12px;
  color: var(--accent);
}

.conteudo-institucional p {
  margin: 0 0 18px;
}

.conteudo-institucional ol,
.conteudo-institucional ul {
  margin: 0 0 18px;
  padding-left: 24px;
}

.conteudo-institucional li {
  margin-bottom: 8px;
}

/* Imagens NO MEIO do texto do artigo (ver conversa: "pesquisar imagens
   na internet e colocar em meio aos textos") -- diferente da
   .imagem-artigo-blog (foto de capa, fora do corpo_html, ja existente
   em templates/blog_artigo.html). */
.conteudo-institucional figure {
  margin: 22px 0;
}

.conteudo-institucional figure img {
  width: 100%;
  border-radius: var(--raio-g);
  display: block;
}

.conteudo-institucional figcaption {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

.conteudo-institucional .acordeao {
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  margin: 0 0 10px;
  background: var(--card);
}

.conteudo-institucional .acordeao > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}

.conteudo-institucional .acordeao > summary::-webkit-details-marker {
  display: none;
}

.conteudo-institucional .acordeao > summary::before {
  content: '+ ';
}

.conteudo-institucional .acordeao[open] > summary::before {
  content: '− ';
}

.conteudo-institucional .acordeao > summary + * {
  margin-top: 10px;
}

.conteudo-institucional .acordeao :last-child {
  margin-bottom: 0;
}

/* dias da novena (<details class="novena-dia">, ver services/blog.py) --
   cards maiores e mais faceis de tocar no celular, com numero do dia em
   bolinha dourada via CSS counter (nao precisa numerar cada dia no HTML). */
.novena-dia {
  counter-increment: novena-dia;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  margin: 0 0 12px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.novena-dia[open] {
  border-color: var(--accent);
}

.novena-dia > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}

.novena-dia > summary::-webkit-details-marker {
  display: none;
}

.novena-dia > summary::before {
  content: counter(novena-dia);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-texto-claro);
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.novena-dia > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.novena-dia[open] > summary::after {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .novena-dia > summary:hover {
    background: var(--bg);
  }
}

.novena-dia > p {
  margin: 0;
  padding: 0 18px 18px 60px;
}

/* passo a passo didatico (ver services/blog.py: artigo "como-fazer-
   lectio-divina") -- cards grandes e sempre abertos (nao e´ um
   accordeao como .novena-dia: aqui e´ conteudo curto (4 passos) feito
   pra ler direto, sem clicar em nada). Genérico o suficiente pra
   reaproveitar em outros artigos de "passo a passo" no futuro. */
.passo-guia {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--raio-g);
  padding: 18px 20px;
  margin: 0 0 14px;
}

.passo-guia-numero {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passo-guia-conteudo h3 {
  margin: 0 0 6px;
  font-family: var(--fonte-titulo);
  color: var(--accent);
  font-size: 1.05rem;
}

.passo-guia-conteudo p {
  margin: 0 0 8px;
}

.passo-guia-dica {
  background: var(--gold-soft);
  border-radius: var(--raio-m);
  padding: 10px 12px;
  font-size: 0.85rem;
  color: var(--gold-texto-claro);
  margin: 8px 0 0 !important;
}

/* callout grande pra uma unica ideia-chave (pedido do usuario: "coisas
   grandes em informacoes importantes") -- so texto, sem numero, usado
   uma vez por artigo pro ponto mais importante. */
.lectio-destaque {
  background: var(--accent);
  color: #fff;
  border-radius: var(--raio-g);
  padding: 20px 22px;
  margin: 0 0 22px;
  text-align: center;
}

.lectio-destaque p {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* descricoes por formato (pagina de produto) */

.formato-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  margin: 0 0 16px;
}

.formato-info p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* kit sugerido (/kit-livraria-shalom) */

.kit-tamanho {
  border: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kit-tamanho legend {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0;
  width: 100%;
}

.kit-tamanho label {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  padding: 10px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.kit-itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}

.kit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: var(--card);
}

.kit-item img {
  width: 56px;
  height: 56px;
  border-radius: var(--raio-m);
  object-fit: cover;
  flex-shrink: 0;
}

.kit-item-nome {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
}

.kit-item-stepper {
  max-width: 132px;
  flex-shrink: 0;
}

.kit-item-stepper button {
  width: 36px;
}

.kit-item-stepper input {
  padding: 8px 0;
}

.kit-resumo {
  font-weight: 600;
  margin: 0 0 14px;
}

.kit-adicionar {
  margin-bottom: 24px;
}

/* pagina 404 */

.pagina-404 {
  text-align: center;
  padding: 32px 0 8px;
}

.pagina-404-numero {
  display: block;
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--border);
  line-height: 1;
  margin-bottom: 8px;
}

.pagina-404 h1 {
  margin: 0 0 8px;
}

.pagina-404 .instrucao {
  max-width: 44ch;
  margin: 0 auto 24px;
}

.pagina-404 .busca-wrap {
  max-width: 420px;
  margin: 0 auto 20px;
  text-align: left;
}

.pagina-404-botao {
  margin: 0 6px 10px;
}

/* pagina de acompanhamento de pedido (/pedido/<token>) */

.pedido-status {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--raio-pilula);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 18px;
}

.pedido-status-pendente {
  background: var(--gold-soft);
  color: #7a5c1f;
}

.pedido-status-pago {
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
}

.pedido-status-faturado {
  background: #e0eefc;
  color: #14548c;
}

.pedido-status-enviado {
  background: #e6e0fc;
  color: #4a2e9c;
}

.pedido-status-entregue {
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
}

.pedido-status-cancelado {
  background: var(--erro-fundo);
  color: var(--erro-texto);
}

.pedido-timeline {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.pedido-timeline-etapa {
  position: relative;
  padding: 0 0 24px 30px;
  font-size: 0.88rem;
  color: var(--muted);
}

.pedido-timeline-etapa:last-child {
  padding-bottom: 0;
}

.pedido-timeline-ponto {
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--border);
  box-sizing: border-box;
}

.pedido-timeline-etapa::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.pedido-timeline-etapa:last-child::after {
  display: none;
}

.pedido-timeline-etapa.concluida {
  color: var(--ink);
  font-weight: 600;
}

.pedido-timeline-etapa.concluida .pedido-timeline-ponto {
  background: var(--accent);
}

.pedido-timeline-etapa.concluida::after {
  background: var(--accent);
}

.pedido-timeline-etapa.atual .pedido-timeline-ponto {
  box-shadow: 0 0 0 4px var(--gold-soft);
}

.pedido-timeline-agora {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-texto-claro);
  background: var(--gold-soft);
  border-radius: var(--raio-pilula);
  padding: 1px 8px;
  margin-left: 4px;
  vertical-align: middle;
}

.pedido-timeline-nf {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.pedido-timeline-previsao {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

.pedido-timeline-aviso-transportadora {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
  font-style: italic;
}

.pedido-envio-antecipado {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
  border-radius: var(--raio-m);
  font-size: 0.88rem;
}

.pedido-aviso-transportadora {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}

.pedido-obrigado {
  margin: 0 0 20px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: var(--raio-g);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pedido-obrigado h2 {
  margin: 0 0 10px;
  color: var(--ink);
}

.pedido-obrigado p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
}

.pedido-obrigado-prazo {
  display: block;
  background: var(--bg);
  border: 1px dashed var(--gold);
  border-radius: var(--raio-g);
  padding: 14px;
  margin: 0 0 16px;
}

.pedido-obrigado-prazo strong {
  display: block;
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.pedido-obrigado-prazo span {
  font-size: 0.85rem;
  color: var(--muted);
}

.pedido-obrigado .botao-pagar {
  margin-top: 0;
  margin-bottom: 12px;
  background: #27ae60;
}

.pedido-obrigado-upsell {
  text-align: left;
  background: var(--gold-soft);
  border-radius: var(--raio-g);
  padding: 12px 14px;
  margin: 0 0 16px;
}

.pedido-obrigado-upsell strong {
  display: block;
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.pedido-obrigado-upsell ul {
  margin: 0;
  padding-left: 18px;
}

.pedido-obrigado-upsell li {
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 4px;
}

.pedido-obrigado-instagram {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.pedido-obrigado-bencao {
  font-size: 0.76rem;
  color: var(--muted);
  margin: 16px 0 0;
}

.pedido-resumo,
.pedido-entrega {
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 16px;
  margin: 0 0 16px;
  background: var(--card);
}

.pedido-resumo h2,
.pedido-entrega h2 {
  font-size: 1rem;
  margin: 0 0 10px;
}

.pedido-itens {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.9rem;
}

.pedido-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.pedido-item:last-child {
  border-bottom: none;
}

.pedido-item img {
  width: 52px;
  height: 52px;
  border-radius: var(--raio-m);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}

.pedido-item-imagens {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.pedido-item-imagens img {
  width: 52px;
  height: 52px;
  border-radius: var(--raio-m);
  object-fit: cover;
  background: var(--bg);
}

.pedido-item div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pedido-item strong {
  font-size: 0.9rem;
}

.pedido-item span {
  font-size: 0.78rem;
  color: var(--muted);
}

.pedido-item-qtd {
  font-weight: 600;
  color: var(--ink) !important;
}

.pedido-linha {
  font-size: 0.9rem;
  margin: 0 0 6px;
  word-break: break-all;
}

.pedido-saudacao {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 4px;
}

.botao-rastrear {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 0 14px;
  border-radius: var(--raio-pilula);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-decoration: none;
}

@media (hover: hover) {
  .botao-rastrear:hover {
    background: var(--accent-dark);
  }
}

.logo-transportadora-pedido {
  height: 16px;
  width: auto;
  vertical-align: -3px;
  margin-right: 4px;
}

.botao-copiar {
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: var(--card);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.pedido-total {
  font-size: 1.05rem;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}

.pedido-ajuda {
  font-size: 0.88rem;
  color: var(--muted);
}

/* blog (/blog, /blog/<slug>) -- historia/significado dos santos, pra
   aparecer em busca de quem ainda nao sabe qual produto quer */

.grid-blog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.card-blog {
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .card-blog:hover {
    box-shadow: 0 10px 24px -14px rgba(20, 51, 92, 0.35);
    transform: translateY(-2px);
    border-color: var(--accent);
  }
}

.card-blog img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg);
}

@media (min-width: 640px) {
  .card-blog img { width: 160px; height: 160px; }
}

.card-blog-corpo {
  padding: 10px 14px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.card-blog-corpo h2 {
  font-size: 1rem;
  margin: 0 0 6px;
  line-height: 1.3;
}

.card-blog-corpo p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.45;
}

.imagem-artigo-blog {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio-g);
  margin: 8px 0 18px;
  display: block;
}

.link-blog-relacionado {
  font-size: 0.85rem;
  margin: -6px 0 14px;
}

.link-blog-relacionado a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.cta-blog-produto {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 22px 18px;
  margin: 28px 0 8px;
  text-align: center;
}

.cta-blog-produto p {
  margin: 0 0 14px;
  font-weight: 600;
}

.botao-principal {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--raio-pilula);
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(20, 51, 92, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .botao-principal:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(20, 51, 92, 0.55);
  }
}

.cta-blog-produto .botao-principal {
  padding: 15px 26px;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .cta-blog-produto .botao-principal {
    display: block;
    width: 100%;
  }
}

.voltar-blog {
  margin-top: 28px;
}

.voltar-blog a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
  .voltar-blog a:hover {
    border-color: var(--accent);
    background: var(--card);
  }
}

/* tour guiado da personalizada (ver static/js/tour_personalizada.js) */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.tour-hole {
  position: fixed;
  border-radius: var(--raio-g);
  box-shadow: 0 0 0 9999px rgba(20, 34, 56, 0.72);
  outline: 2px solid #fff;
  transition: top 250ms ease, left 250ms ease, width 250ms ease, height 250ms ease;
}

.tour-tooltip {
  position: fixed;
  z-index: 501;
  width: 280px;
  max-width: calc(100vw - 24px);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--raio-g);
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  transition: top 250ms ease, left 250ms ease;
}

.tour-tooltip-titulo {
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 4px;
}

.tour-tooltip-texto {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.tour-tooltip-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-pular {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
}

.tour-proximo {
  padding: 8px 16px;
  font-size: 0.85rem;
  width: auto;
}

/* ==========================================================================
   Revisao frontend-design (2026-09-30): home, /categoria e /carrinho.
   Plano: marinho estojo #14335c, marinho fundo #0d233f, dourado aro
   #b8923d (so filete/aro, nunca texto), bordo #8e1b2c (so preco), gelo
   #f5f7fa e branco almofada. Fraunces nos titulos e precos, Public Sans
   no resto. A unica peca ousada e´ o "estojo": painel marinho com um
   filete dourado por dentro, como a tampa de um estojo de joia, onde a
   medalha aparece redonda sobre uma almofada branca. O resto fica quieto:
   titulo de secao com tamanho de titulo, espaco no lugar de caixa.
   Fica no fim do arquivo de proposito -- sobrescreve as regras antigas
   de mesma especificidade sem precisar mexer nelas.
   ========================================================================== */

:root {
  --estojo: #14335c;
  --estojo-forro: #0d233f;
  --aro: #b8923d;
  --fs-secao: 1.5rem;
  --fs-titulo: 2rem;
}

@media (min-width: 900px) {
  :root {
    --fs-secao: 1.75rem;
    --fs-titulo: 2.5rem;
  }
}

/* foco visivel em tudo que e´ clicavel nessas paginas */
.estojo a:focus-visible,
.card-produto:focus-visible,
.destaque-card:focus-visible,
.hero-acao:focus-visible,
.chip-categoria:focus-visible,
.opcao-formato:focus-within {
  outline: 2px solid var(--aro);
  outline-offset: 3px;
}

/* ---- titulos de secao: tamanho de titulo, nao de legenda ---- */

.destaques-titulo,
.nossa-historia h2 {
  font-size: var(--fs-secao);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0 0 6px;
}

.destaques-subtitulo {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 0 14px;
}

.destaques {
  margin: 0 0 40px;
  gap: 0;
}

/* ---- botoes do hero: um principal, dois secundarios ---- */

.hero-acoes-linha {
  gap: 8px;
  margin-top: 14px;
}

.hero-acao {
  background: var(--card);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--raio-pilula);
  box-shadow: none;
  font-size: 0.8rem;
  padding: 10px 6px;
}

.hero-acao-principal {
  background: var(--accent);
  color: #fff;
}

@media (hover: hover) {
  .hero-acao:hover {
    background: var(--gold-soft);
    box-shadow: none;
  }
  .hero-acao-principal:hover {
    background: var(--estojo-forro);
  }
}

@media (min-width: 640px) {
  .hero-acao {
    font-size: 0.9rem;
    padding: 12px 10px;
  }
}

.ajuda-botao-centralizado {
  border: none;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.88rem;
  margin: 10px auto 20px;
}

/* ---- condicoes de compra: lista alinhada a esquerda, sem caixa ---- */

.vantagens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 0 8px;
  margin: 0 0 40px;
}

@media (min-width: 900px) {
  .vantagens {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.vantagem {
  display: grid;
  align-content: start;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  text-align: left;
}

@media (min-width: 640px) {
  .vantagem {
    flex: none;
  }
}

.vantagem > * {
  grid-column: 2;
}

.vantagem > .vantagem-icone {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: 1rem;
  line-height: 0;
}

.vantagem-icone .icone {
  width: 24px;
  height: 24px;
}

.vantagem-icone-img {
  height: 24px;
}

.vantagem strong {
  font-size: 0.92rem;
  line-height: 1.3;
}

.vantagem span:not(.vantagem-icone) {
  font-size: 0.84rem;
  line-height: 1.45;
}

.vantagem .vantagem-icone-duplo {
  grid-column: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

/* celular estreito: icone em cima do titulo, 2 colunas */
@media (max-width: 559px) {
  .vantagem {
    grid-template-columns: 1fr;
  }
  .vantagem > *,
  .vantagem > .vantagem-icone,
  .vantagem .vantagem-icone-duplo {
    grid-column: 1;
    grid-row: auto;
  }
  .vantagem > .vantagem-icone {
    align-self: start;
    margin-bottom: 6px;
  }
  .vantagem .vantagem-icone-duplo img {
    height: 13px;
  }
}

/* ---- o estojo ---- */

.estojo {
  position: relative;
  background: var(--estojo);
  color: #fff;
  border-radius: var(--raio-g);
  padding: 28px 24px 30px;
  margin: 0 0 40px;
  isolation: isolate;
}

/* o filete dourado do forro, 8px pra dentro da borda */
.estojo::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--aro);
  border-radius: calc(var(--raio-g) - 6px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

.estojo-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 22px;
}

.estojo-titulo {
  font-size: var(--fs-secao);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

.estojo-link {
  color: var(--gold-texto-escuro);
  font-size: 0.88rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

.estojo-medalhas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 16px;
}

.estojo-medalha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

.estojo-almofada {
  display: block;
  width: 100%;
  max-width: 176px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 3px var(--estojo-forro), 0 0 0 4px var(--aro);
  transition: box-shadow 0.2s ease;
}

.estojo-almofada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.estojo-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
}

@media (hover: hover) {
  .estojo-medalha:hover .estojo-almofada {
    box-shadow: 0 0 0 3px var(--estojo-forro), 0 0 0 6px var(--aro);
  }
  .estojo-medalha:hover .estojo-nome {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* celular: o estojo encosta nas bordas da tela (como o banner) e as
   medalhas viram um trilho que rola de lado */
@media (max-width: 640px) {
  .estojo {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    padding: 26px 16px 24px;
  }
  .estojo::before {
    border-radius: 4px;
  }
  .estojo-medalhas {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    padding: 6px 22px 8px;
    margin: 0 -16px;
    scrollbar-width: none;
  }
  .estojo-medalhas::-webkit-scrollbar {
    display: none;
  }
  .estojo-medalhas > li {
    flex: 0 0 112px;
    scroll-snap-align: start;
  }
  .estojo-nome {
    font-size: 0.9rem;
  }
}

/* cabecalho da categoria no estojo */

.estojo-categoria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 28px;
}

@media (min-width: 720px) {
  .estojo-categoria {
    grid-template-columns: 1fr auto;
    padding: 40px 40px 40px;
  }
}

.estojo-categoria h1 {
  font-size: var(--fs-titulo);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 12px;
}

.estojo-descricao {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 58ch;
  color: #dfe6f0;
  margin: 0 0 12px;
}

.estojo-contagem {
  font-size: 0.9rem;
  color: var(--gold-texto-escuro);
  font-weight: 600;
  margin: 0;
}

.estojo-medalhas-mini {
  display: flex;
  gap: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
}

.estojo-medalhas-mini > li {
  flex: 0 0 auto;
  width: 104px;
}

.estojo-medalhas-mini > li + li {
  margin-left: -26px;
}

@media (max-width: 719px) {
  .estojo-medalhas-mini {
    order: -1;
  }
  .estojo-medalhas-mini > li {
    width: 76px;
  }
  .estojo-medalhas-mini > li + li {
    margin-left: -18px;
  }
}

/* ---- trilhos de destaque (novidades, jubileu, premium...) ---- */

.destaques-linha {
  gap: 14px;
  padding: 2px 2px 8px;
}

.destaque-card {
  width: 128px;
  border: none;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.destaque-card img,
.destaque-card picture img {
  height: 128px;
  border-radius: var(--raio-g);
  background: var(--card);
  border: 1px solid var(--border);
}

.destaque-card span {
  padding: 8px 2px 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (hover: hover) {
  .destaque-card:hover img {
    border-color: var(--aro);
  }
  .destaque-card:hover span {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media (min-width: 900px) {
  .destaque-card {
    width: 150px;
  }
  .destaque-card img,
  .destaque-card picture img {
    height: 150px;
  }
}

.banner-urgencia {
  background: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 0;
  margin: 0 0 40px;
  font-size: 0.9rem;
  color: var(--muted);
}

.banner-urgencia strong {
  color: var(--ink);
}

/* ---- procura (busca + categorias) ---- */

.procura {
  margin: 0 0 40px;
}

.procura .busca-wrap {
  margin-top: 10px;
}

.chip-categoria {
  color: var(--accent);
  font-size: 0.86rem;
}

@media (hover: hover) {
  .chip-categoria:hover {
    border-color: var(--accent);
  }
}

/* ---- card de santo (home, categoria, catalogo) ---- */

.grid-produtos {
  gap: 24px 14px;
}

@media (min-width: 640px) {
  .grid-produtos {
    gap: 32px 20px;
  }
}

.card-produto {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

@media (hover: hover) {
  .card-produto:hover {
    box-shadow: none;
    transform: none;
  }
  .card-produto:hover .card-imagem-wrap {
    border-color: var(--aro);
  }
  .card-produto:hover h2 {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.card-imagem-wrap,
.destaques-grupo .card-imagem-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  overflow: hidden;
  padding: 10px;
  transition: border-color 0.2s ease;
}

.card-produto img {
  background: var(--card);
}

.card-imagem-alt {
  inset: 10px;
  width: calc(100% - 20px) !important;
}

.badge-vendas {
  left: 8px;
  top: 8px;
  font-size: 0.68rem;
}

.card-corpo {
  padding: 12px 2px 0;
}

.card-corpo h2 {
  font-size: 1.06rem;
  line-height: 1.25;
  margin: 0 0 3px;
  color: var(--ink);
}

.card-formatos {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.card-avaliacoes {
  margin: -4px 0 8px;
}

.card-preco {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.card-preco strong {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--preco);
  margin-right: 2px;
}

.card-atacado {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-texto-claro);
}

.destaques > .destaques-grupo > .botao-secundario {
  margin-top: 24px;
}

/* ---- quem faz ---- */

.nossa-historia {
  max-width: none;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 32px 0 0;
  margin: 0 0 32px;
}

.nossa-historia-corpo {
  gap: 20px;
}

.nossa-historia-foto {
  width: 96px;
  height: 96px;
  border: none;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--aro);
}

.nossa-historia p {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 62ch;
}

@media (min-width: 640px) {
  .nossa-historia-foto {
    width: 128px;
    height: 128px;
  }
}

/* ---- categoria / breadcrumbs ---- */

.breadcrumbs {
  margin: 8px 0 14px;
}

/* ---- carrinho ---- */

.carrinho-titulo {
  font-size: var(--fs-titulo);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 8px 0 20px;
}

/* celular: itens -> resumo -> etapas. Desktop: itens e etapas a
   esquerda, resumo fixo a direita. O #resumo-carrinho vira
   display:contents pra os 2 filhos dele (totais e fechamento) entrarem
   direto na grade -- os ids que o JS usa continuam todos no lugar, e o
   [hidden] (display:none !important) ainda esconde tudo com carrinho
   vazio. */
.carrinho-grade {
  display: flex;
  flex-direction: column;
}

.carrinho-grade > .resumo-carrinho {
  display: contents;
  background: none;
  border: none;
  padding: 0;
}

.resumo-totais {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 20px;
  margin: 0 0 28px;
}

.resumo-titulo {
  font-size: 1.25rem;
  color: var(--accent);
  margin: 0 0 12px;
}

.resumo-subtotal strong,
.resumo-total-final strong {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--preco);
}

.resumo-subtotal strong {
  font-size: 1.35rem;
}

.resumo-total-final strong {
  font-size: 1.6rem;
}

.resumo-fechamento {
  min-width: 0;
}

@media (min-width: 900px) {
  .carrinho-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 32px;
    align-items: start;
  }
  .carrinho-grade > * {
    grid-column: 1;
  }
  .carrinho-grade .resumo-totais {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 104px;
    margin: 0;
  }
}

.item-carrinho {
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 14px;
}

.item-carrinho img,
.item-imagem-link {
  width: 80px;
}

.item-carrinho img {
  height: 80px;
}

.item-info h2 {
  font-size: 1.08rem;
}

.item-preco strong {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--preco);
}

/* etapas numeradas: frete -> como fechar -> seus dados (uma sequencia de
   verdade, por isso o numero) */
.etapa-titulo,
fieldset.formatos legend.etapa-titulo,
.cadastro-cliente h2.etapa-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 12px;
}

.etapa-numero {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--aro);
  color: var(--gold-texto-claro);
  font-size: 0.95rem;
  line-height: 1;
}

.calculadora-frete {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.calculadora-frete > label.etapa-titulo {
  display: flex;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

/* avisos: uma lista discreta com icone, em vez de 3 caixas coloridas */
.condicoes-pedido {
  list-style: none;
  margin: 0 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.condicoes-pedido li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.condicoes-pedido .icone {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.condicoes-pedido strong {
  color: var(--ink);
}

.condicoes-pedido .gatilho-producao {
  background: none;
  padding: 0;
  margin: 0;
  color: var(--ink);
  font-size: inherit;
}

.gatilho-producao-item:has(.gatilho-producao:empty) {
  display: none;
}

/* formas de pagamento: 3 opcoes da mesma largura, a escolhida marcada */
fieldset.forma-pagamento {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
}

.forma-pagamento .opcao-formato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.forma-pagamento .opcao-formato .icone {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.forma-pagamento .opcao-formato:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.forma-pagamento .opcao-formato input {
  accent-color: var(--accent);
  margin: 0;
}

.forma-pagamento .etiqueta-rapido {
  flex-basis: 100%;
  margin: 0 0 0 23px;
  background: none;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.forma-pagamento .opcao-formato:first-of-type .etiqueta-rapido {
  color: var(--gold-texto-claro);
  font-weight: 700;
}

.cadastro-cliente {
  padding: 20px;
}

.resumo-acoes {
  margin-top: 8px;
}

.forma-pagamento .opcao-formato-icone-wpp {
  height: 22px;
  vertical-align: middle;
}

/* no carrinho a Linha Premium e´ sugestao, nao secao principal */
.destaques-carrinho .destaques-titulo {
  font-size: 1.15rem;
}

@media (max-width: 640px) {
  .estojo-categoria {
    padding: 28px 24px;
  }
  .estojo-medalhas.estojo-medalhas-mini {
    overflow: visible;
    padding: 0;
    margin: 0;
  }
}

/* ==========================================================================
   Revisao frontend-design, parte 2 (2026-09-30): blog, artigo e
   liturgia do mes. Mesma paleta/tokens da parte 1 (estojo, aro, bordo).
   Blog = "sumario do missal": entradas de indice agrupadas por tema, sem
   caixa, com um destaque. Liturgia = pagina de missal com a fita
   marcadora na cor liturgica do dia.
   ========================================================================== */

/* ---- indice do blog ---- */

.blog-cabecalho {
  margin: 0 0 28px;
}

.blog-cabecalho h1 {
  font-size: var(--fs-titulo);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--accent);
  max-width: 18ch;
  margin: 4px 0 12px;
}

.blog-cabecalho p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 18px;
}

.blog-temas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-temas a {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio-pilula);
  background: var(--card);
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .blog-temas a:hover {
    border-color: var(--accent);
  }
}

.blog-destaque {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0 0 48px;
  color: var(--ink);
  text-decoration: none;
}

@media (min-width: 760px) {
  .blog-destaque {
    grid-template-columns: 1.15fr 1fr;
    gap: 32px;
    align-items: center;
  }
}

.blog-destaque img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-g);
  display: block;
  background: var(--card);
}

.blog-destaque-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-destaque-data {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-texto-claro);
}

.blog-destaque-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.blog-destaque-resumo {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

@media (hover: hover) {
  .blog-destaque:hover .blog-destaque-titulo,
  .blog-entrada:hover .blog-entrada-titulo {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

.blog-tema {
  margin: 0 0 44px;
  scroll-margin-top: 110px;
}

.blog-tema h2 {
  font-size: var(--fs-secao);
  line-height: 1.15;
  color: var(--accent);
  margin: 0 0 20px;
  padding-top: 14px;
  position: relative;
}

/* filete dourado curto acima do titulo do tema, como a abertura de
   uma secao no missal */
.blog-tema h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 2px;
  background: var(--aro);
}

.blog-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 32px;
}

@media (min-width: 760px) {
  .blog-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog-entrada {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;
  color: var(--ink);
  text-decoration: none;
}

@media (min-width: 760px) {
  .blog-entrada {
    grid-template-columns: 112px 1fr;
  }
}

.blog-entrada img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-m);
  display: block;
  background: var(--card);
}

.blog-entrada-texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.blog-entrada-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--accent);
}

.blog-entrada-resumo {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-destaque:focus-visible,
.blog-entrada:focus-visible,
.blog-temas a:focus-visible {
  outline: 2px solid var(--aro);
  outline-offset: 4px;
  border-radius: var(--raio-m);
}

/* ---- artigo ---- */

.artigo-blog {
  max-width: 68ch;
  margin: 0 auto;
}

.artigo-blog-cabecalho {
  margin: 8px 0 24px;
}

.artigo-blog-cabecalho h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--accent);
  max-width: 22ch;
  margin: 0 0 14px;
}

.artigo-blog-resumo {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}

.artigo-blog-data {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.artigo-blog .imagem-artigo-blog {
  max-width: none;
  aspect-ratio: 16 / 9;
  margin: 0 0 28px;
}

.artigo-blog .conteudo-institucional {
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.artigo-blog .conteudo-institucional h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 40px 0 14px;
}

.blog-leia-tambem {
  max-width: 68ch;
  margin: 48px auto 0;
  padding-top: 8px;
}

.blog-leia-tambem .blog-lista {
  grid-template-columns: 1fr;
}

.artigo-blog + .blog-leia-tambem + .voltar-blog,
.voltar-blog {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- liturgia do mes ---- */

.liturgia-faixa img {
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

@media (max-width: 640px) {
  .liturgia-faixa {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
  }
}

.pagina-liturgia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 860px) {
  .pagina-liturgia {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
  }
}

.pagina-liturgia h1 {
  font-size: var(--fs-titulo);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 14px;
}

.pagina-liturgia .instrucao {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 56ch;
}

/* a pagina de missal: fita marcadora pendurada no topo, na cor do dia */
.liturgia-hoje-card {
  position: relative;
  padding: 26px 24px 22px 24px;
  margin: 8px 0 0;
  border-radius: 4px var(--raio-g) var(--raio-g) 4px;
  box-shadow: inset 3px 0 0 var(--border);
}

.liturgia-hoje-card::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 28px;
  width: 16px;
  height: 64px;
  background: var(--cor-liturgica, var(--aro));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

.liturgia-hoje-data {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-texto-claro);
  margin: 0 0 6px;
}

.liturgia-hoje-card .liturgia-hoje-titulo {
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--accent);
  margin: 0 40px 10px 0;
}

.liturgia-hoje-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.liturgia-hoje-card .liturgia-hoje-selo {
  margin: 0;
  padding: 2px 10px;
  background: none;
  border: 1.5px solid var(--cor-rank, var(--accent));
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.liturgia-hoje-card .liturgia-hoje-leitura {
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 14px;
}

.liturgia-hoje-card .liturgia-hoje-cta {
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagina-liturgia .ebook-captura {
  margin: 0;
  border-top: 3px solid var(--accent);
}

.ebook-captura-lista h2 {
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0 0 12px;
}

.pagina-liturgia .ebook-captura-lista li {
  margin-bottom: 8px;
}

@media (min-width: 860px) {
  .pagina-liturgia .ebook-captura {
    position: sticky;
    top: 110px;
  }
}

.liturgia-hoje-pergunta {
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 40px 12px 0;
}

.liturgia-leituras-sem-dado {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  padding: 22px 24px;
}

.liturgia-leituras-sem-dado .liturgia-hoje-leitura {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
}

/* ==========================================================================
   Revisao frontend-design, parte 3 (2026-09-30): Linha Premium,
   personalizada e condicoes da home centralizadas.
   Linha Premium = "vitrine de joalheria": galeria numa moldura com o
   filete dourado do estojo + miniaturas, compra a direita, ficha tecnica
   em linhas. Escala de espaco unica: 8 / 16 / 24 / 40.
   ========================================================================== */

/* ---- condicoes da home: cada item centralizado, icone em cima ---- */

.vantagens .vantagem {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.vantagens .vantagem > *,
.vantagens .vantagem > .vantagem-icone,
.vantagens .vantagem .vantagem-icone-duplo {
  grid-column: 1;
  grid-row: auto;
}

.vantagens .vantagem > .vantagem-icone {
  align-self: auto;
  margin: 0 0 8px;
}

.vantagens .vantagem .vantagem-icone-duplo {
  justify-content: center;
}

/* ---- Linha Premium ---- */

.colar-item.premium {
  padding: 8px 0 0;
  border-bottom: none;
}

.premium-topo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0 0 40px;
}

@media (min-width: 820px) {
  .premium-topo {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .premium-galeria {
    position: sticky;
    top: 110px;
  }
}

.premium-galeria .peca-carrossel {
  position: relative;
  margin: 0;
}

.premium-galeria .peca-carrossel-trilho {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
}

/* filete dourado por dentro da moldura (o forro do estojo) */
.premium-galeria .peca-carrossel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  aspect-ratio: 1;
  width: calc(100% - 16px);
  border: 1px solid var(--aro);
  border-radius: calc(var(--raio-g) - 6px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.premium-galeria .peca-carrossel-slide {
  object-fit: contain;
  background: #fff;
}

.premium-miniaturas {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.premium-miniaturas .ponto {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--raio-m);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transform: none;
}

.premium-miniaturas .ponto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.premium-miniaturas .ponto.ativo {
  background: #fff;
  transform: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.premium-miniaturas .ponto:focus-visible {
  outline: 2px solid var(--aro);
  outline-offset: 2px;
}

.premium-zoom-dica {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 8px 0 0;
}

.premium-compra h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 8px;
}

.premium-compra .avaliacoes-resumo {
  margin: 0 0 16px;
}

.premium .peca-preco-bloco {
  margin: 16px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.premium .peca-preco-valor {
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--preco);
}

.premium .peca-preco-parcelamento {
  font-size: 0.88rem;
  margin-top: 4px;
}

.premium-resumo {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 24px;
}

.premium .personalizacao-bloco {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px dashed var(--border-forte, #c6d0de);
  border-radius: var(--raio-m);
  background: var(--card);
}

.premium .personalizacao-aviso {
  line-height: 1.5;
}

.premium-comprar-linha {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 16px;
  margin: 0 0 16px;
}

.premium-comprar-linha .quantidade {
  margin: 0;
}

.premium-comprar-linha .quantidade label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.premium-comprar-linha .preview-preco {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.premium-comprar-linha .preview-preco:empty {
  visibility: hidden;
}

.premium .compre-junto-card {
  margin: 0 0 16px;
}

.premium .botao-carrinho {
  width: 100%;
  margin: 0 0 16px;
}

.premium-garantias {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.premium-garantias li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

.premium-garantias strong {
  color: var(--ink);
}

.premium-garantias .icone {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.premium-sobre {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 40px;
  padding: 40px 0 0;
  margin: 0 0 40px;
  border-top: 1px solid var(--border);
}

@media (min-width: 820px) {
  .premium-sobre {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.premium-sobre h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 16px;
}

.premium-sobre .peca-descricao p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 62ch;
}

.premium-ficha dl {
  margin: 0;
}

.premium-ficha dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.45;
}

.premium-ficha dl > div:first-child {
  border-top: 1px solid var(--border);
}

.premium-ficha dt {
  font-weight: 600;
  color: var(--muted);
}

.premium-ficha dd {
  margin: 0;
  color: var(--ink);
}

.premium .avaliacoes-produto {
  margin: 0 0 24px;
}

.premium .avaliacoes-produto h2 {
  font-size: 1.4rem;
  line-height: 1.2;
}

.premium-rodape {
  margin: 0 0 16px;
}

/* ---- Personalizada: "atelie" ---- */

.pers-topo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  margin: 0 0 24px;
}

@media (min-width: 820px) {
  .pers-topo {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
  }
}

.estojo.pers-estojo {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 40px 24px;
  aspect-ratio: 1;
}

.pers-estojo .estojo-almofada {
  width: 78%;
  max-width: 300px;
}

@media (max-width: 819px) {
  .estojo.pers-estojo {
    aspect-ratio: auto;
    padding: 28px 16px;
  }
  .pers-estojo .estojo-almofada {
    width: 180px;
  }
}

.pers-cabecalho h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 12px;
}

.pers-subtitulo {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 48ch;
}

.buybox.pers-buybox {
  margin: 0;
  padding: 20px;
  box-shadow: none;
}

.pers-buybox .buybox-precos {
  margin: 0 0 16px;
}

.pers-buybox .buybox-de {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
}

/* etapas numeradas: uma linha que liga os 4 numeros */
.passos-personalizada {
  list-style: none;
  counter-reset: none;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 24px;
  gap: 16px;
}

.passo-personalizada {
  position: relative;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.passo-numero {
  width: 32px;
  height: 32px;
  background: var(--card);
  color: var(--gold-texto-claro);
  border: 1.5px solid var(--aro);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

.passo-personalizada strong {
  font-size: 0.95rem;
  color: var(--accent);
}

.passo-personalizada span:not(.passo-numero) {
  font-size: 0.84rem;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .passo-personalizada:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 40px;
    right: 0;
    height: 1px;
    background: var(--border);
  }
}

/* formulario: formatos em blocos com a miniatura grande */
#view-upload.card-upload {
  padding: 24px;
}

#sel-formatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 640px) {
  #sel-formatos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

#sel-formatos legend,
#sel-tamanhos legend,
#sel-cores legend {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--accent);
  margin: 0 0 12px;
}

#sel-formatos .opcao-formato {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 10px 12px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

#sel-formatos .opcao-formato input {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
  accent-color: var(--accent);
}

#sel-formatos .opcao-formato-thumb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

#sel-formatos .opcao-formato:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (hover: hover) {
  #sel-formatos .opcao-formato:hover {
    border-color: var(--accent);
  }
}

#sel-formatos .opcao-formato:focus-within {
  outline: 2px solid var(--aro);
  outline-offset: 2px;
}

#sel-tamanhos .opcao-tamanho:has(input:checked),
#sel-cores .opcao-cor:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

#view-upload label.dropzone {
  border-color: #c6d0de;
  background: var(--bg);
  padding: 36px 16px;
}

@media (hover: hover) {
  #view-upload label.dropzone:hover {
    border-color: var(--accent);
    background: #fff;
  }
}

#view-upload label.dropzone .principal {
  font-size: 1.02rem;
  color: var(--accent);
}

.personalizada-info h2,
#avaliacoes > h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--accent);
}

#avaliacoes > h2 {
  margin: 0 0 12px;
}

/* Linha Premium: ajustes da critica com print */
.premium-galeria .peca-carrossel-slide {
  object-fit: cover;
}

.premium-comprar-linha .preview-preco {
  display: block;
  padding: 10px 12px;
  font-size: 0.86rem;
  line-height: 1.45;
}

.premium .compre-junto-card {
  background: var(--card);
  padding: 12px 14px;
}

.premium .compre-junto-info label {
  display: block;
  font-size: 0.9rem;
  line-height: 1.4;
}

.premium .compre-junto-info label input {
  margin: 0 6px 0 0;
  vertical-align: -2px;
  accent-color: var(--accent);
}

.premium .compre-junto-preco {
  color: var(--preco);
  padding-left: 22px;
}

@media (max-width: 520px) {
  .premium-comprar-linha {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.buybox.pers-buybox {
  display: block;
}

.pers-buybox .buybox-tabela {
  width: 100%;
  margin: 0;
}

/* ==========================================================================
   Revisao frontend-design, parte 4 (2026-09-30): acompanhamento do
   pedido (/pedido/<token>). Situacao atual + o que fazer agora em
   destaque; andamento como linha do tempo; resumo, entrega e ajuda na
   lateral (desktop). Sem emoji nos status: a cor da faixa + a palavra.
   ========================================================================== */

.acomp-cabecalho {
  margin: 8px 0 24px;
}

.acomp-cabecalho h1 {
  font-size: var(--fs-titulo);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 6px;
  font-variant-numeric: lining-nums;
}

.acomp-data {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.acomp-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 860px) {
  .acomp-grade {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
  }
}

.acomp-status {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--raio-g);
  padding: 20px 22px;
  margin: 0 0 24px;
}

.acomp-status.status-pendente { border-left-color: var(--aro); }
.acomp-status.status-pago,
.acomp-status.status-entregue { border-left-color: var(--sucesso-texto); }
.acomp-status.status-cancelado,
.acomp-status.status-excluido { border-left-color: var(--erro-texto); }

.acomp-status .pedido-status {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 12px;
}

.acomp-status .pedido-status-pago,
.acomp-status .pedido-status-entregue { color: var(--sucesso-texto); }
.acomp-status .pedido-status-cancelado { color: var(--erro-texto); }

.acomp-status .pedido-linha {
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  margin: 0 0 8px;
}

.acomp-status .botao-pagar,
.acomp-status .botao-rastrear,
.acomp-status .botao-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 12px 0 8px;
  padding: 14px 16px;
  border-radius: var(--raio-m);
  font-size: 1rem;
  letter-spacing: 0;
}

.acomp-status .botao-copiar {
  padding: 6px 12px;
}

.acomp-status .pedido-aviso-transportadora,
.acomp-status .pedido-ajuda {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 0 0;
}

.acomp-status .pedido-obrigado {
  margin: 16px 0 0;
}

.acomp-etapas h2,
.acomp-lateral h2 {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 16px;
}

.acomp-etapas .pedido-timeline-etapa {
  font-size: 0.95rem;
  padding-bottom: 22px;
}

.acomp-etapas .pedido-timeline-ponto {
  width: 16px;
  height: 16px;
  top: 2px;
}

.acomp-etapas .pedido-timeline-etapa::after {
  left: 7px;
  top: 18px;
}

.acomp-etapas .pedido-timeline-etapa.atual .pedido-timeline-rotulo {
  color: var(--accent);
}

.acomp-etapas .pedido-timeline-nf {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 16px;
  border-radius: var(--raio-pilula);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.acomp-etapas .pedido-timeline-nf:hover,
.acomp-etapas .pedido-timeline-nf:focus-visible {
  background: #0f2847;
  color: #fff;
}

.acomp-lateral .pedido-resumo,
.acomp-lateral .pedido-entrega,
.acomp-ajuda {
  padding: 20px 22px;
  margin: 0 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
}

.acomp-lateral .pedido-item img,
.acomp-lateral .pedido-item-imagens img {
  width: 56px;
  height: 56px;
}

.acomp-lateral .pedido-item strong {
  font-size: 0.95rem;
}

.pedido-valores {
  margin: 12px 0 0;
}

.pedido-valores > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-size: 0.92rem;
}

.pedido-valores dt {
  color: var(--muted);
}

.pedido-valores dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pedido-valores .pedido-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 1rem;
}

.pedido-valores .pedido-total dt {
  color: var(--ink);
  font-weight: 600;
}

.pedido-valores .pedido-total dd {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--preco);
}

.acomp-lateral #btn-repetir-pedido {
  width: 100%;
  margin-top: 16px;
}

.acomp-lateral .pedido-entrega p {
  line-height: 1.6;
  margin: 0;
}

.acomp-ajuda p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 14px;
}

.acomp-ajuda-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: var(--card);
}

@media (hover: hover) {
  .acomp-ajuda-botao:hover {
    border-color: var(--accent);
  }
}

/* ---- Cruz para Terco: mesmo layout de peca avulsa da Linha Premium ---- */

.cruz-terco .peca-carrossel-slide {
  cursor: default;
}

.cruz-cores {
  display: grid;
  gap: 8px;
  margin: 0 0 24px;
}

.cruz-cores legend {
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.cruz-cores .opcao-cor {
  display: grid;
  grid-template-columns: auto 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cruz-cores .opcao-cor input {
  margin: 0;
  accent-color: var(--accent);
}

.cruz-cores .opcao-formato-thumb {
  width: 40px;
  height: 40px;
}

.cruz-cor-nome {
  font-weight: 600;
}

.cruz-cor-preco {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--preco);
}

.cruz-cores .opcao-cor:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.cruz-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cruz-fotos img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-g);
  border: 1px solid var(--border);
  background: #fff;
  display: block;
}

.cruz-link-catalogo {
  margin-top: 20px;
}

/* ---- Pagina de produto: alinhada ao resto do site (titulo grande em
   Fraunces, sem rotulo em caixa alta, modelo escolhido marcado, sem
   sombra solta em cada caixa) ---- */

.cabecalho-produto {
  align-items: flex-end;
  margin: 4px 0 8px;
}

.cabecalho-produto h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--accent);
}

.link-blog-relacionado {
  margin: 0 0 16px;
}

.link-blog-relacionado a {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--raio-pilula);
  background: var(--card);
  font-size: 0.86rem;
}

@media (hover: hover) {
  .link-blog-relacionado a:hover {
    border-color: var(--accent);
  }
}

.vendas-recentes-produto {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--raio-pilula);
  background: var(--gold-soft);
}

.buybox,
.painel-selecao,
.descricao-produto,
.relacionados,
.avaliacoes-produto,
.prova-social {
  box-shadow: none;
}

.modelo-card {
  box-shadow: none;
  border-width: 1px;
}

.modelo-card[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (hover: hover) {
  .modelo-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--accent);
  }
}

.modelo-card:focus-visible {
  outline: 2px solid var(--aro);
  outline-offset: 2px;
}

.painel-selecao h2 {
  font-size: 1.2rem;
  color: var(--accent);
}

.painel-selecao fieldset legend {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--accent);
}

.painel-selecao .opcao-formato:has(input:checked),
.painel-selecao .opcao-tamanho:has(input:checked),
.painel-selecao .opcao-cor:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.descricao-eyebrow {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.relacionados h3,
.avaliacoes-produto h3,
.prova-social h3 {
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--accent);
}

/* ---- Linha Premium: indice em vitrine, agrupado por tipo ---- */

.premium-hub-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
}

@media (min-width: 760px) {
  .premium-hub-grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }
}

.premium-hub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}

.premium-hub-foto {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  background: #fff;
  overflow: hidden;
  margin: 0 0 8px;
}

/* mesmo filete dourado da moldura da pagina de cada peca */
.premium-hub-foto::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--aro);
  border-radius: calc(var(--raio-g) - 4px);
  opacity: 0.5;
  pointer-events: none;
}

.premium-hub-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.premium-hub-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--accent);
}

.premium-hub-resumo {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}

.premium-hub-preco {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--preco);
}

@media (hover: hover) {
  .premium-hub-card:hover .premium-hub-nome {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .premium-hub-card:hover .premium-hub-foto {
    border-color: var(--accent);
  }
}

.premium-hub-card:focus-visible {
  outline: 2px solid var(--aro);
  outline-offset: 4px;
  border-radius: var(--raio-g);
}

/* paginas de texto (atendimento, FAQ, landings /para/...): mesma coluna
   de leitura dos artigos do blog (ver .artigo-blog) */
.pagina-texto .artigo-blog-cabecalho {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.pagina-texto .artigo-blog-resumo {
  margin: 0;
}

.pagina-texto .conteudo-institucional .acordeao {
  background: var(--card);
}

.acomp-status .botao-rastrear {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

fieldset.cores.cruz-cores {
  display: grid;
  gap: 8px;
}

fieldset.cores.cruz-cores .opcao-cor {
  width: 100%;
}

.buybox-de {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
}

/* ---- "Obrigado pela sua compra" (so no primeiro retorno do pagamento):
   no estojo marinho, a mesma peca de destaque do resto do site ---- */
.estojo.pedido-obrigado {
  display: block;
  margin: 0 0 32px;
  padding: 32px 28px;
  border: none;
  text-align: left;
}

@media (max-width: 640px) {
  .estojo.pedido-obrigado {
    padding: 28px 20px;
  }
}

.pedido-obrigado h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.12;
  color: #fff;
  margin: 0 0 10px;
}

.pedido-obrigado .pedido-obrigado-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: #dfe6f0;
  max-width: 56ch;
  margin: 0 0 20px;
}

.pedido-obrigado .pedido-obrigado-prazo {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 14px 0;
  border: none;
  border-top: 1px solid rgba(184, 146, 61, 0.45);
  border-bottom: 1px solid rgba(184, 146, 61, 0.45);
  background: none;
  border-radius: 0;
  text-align: left;
}

.pedido-obrigado .pedido-obrigado-prazo > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  font-size: 0.95rem;
}

@media (max-width: 520px) {
  .pedido-obrigado .pedido-obrigado-prazo > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.pedido-obrigado .pedido-obrigado-prazo dt {
  color: var(--gold-texto-escuro);
  font-weight: 600;
}

.pedido-obrigado .pedido-obrigado-prazo dd {
  margin: 0;
  color: #fff;
}

.pedido-obrigado .pedido-obrigado-upsell {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: var(--raio-m);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-align: left;
}

.pedido-obrigado .pedido-obrigado-upsell strong {
  color: var(--gold-texto-escuro);
}

.pedido-obrigado .pedido-obrigado-upsell li {
  color: #eef2f7;
}

.pedido-obrigado .pedido-obrigado-texto,
.pedido-obrigado .pedido-obrigado-bencao {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #dfe6f0;
  margin: 0 0 16px;
}

.pedido-obrigado .pedido-obrigado-bencao {
  font-family: var(--fonte-titulo);
  font-style: italic;
  margin: 16px 0 0;
}

.pedido-obrigado-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pedido-obrigado-acoes .botao-pagar,
.pedido-obrigado-acoes .botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 1 1 200px;
  margin: 0;
  padding: 14px 20px;
}

.pedido-obrigado-acoes .botao-pagar {
  background: #fff;
  color: var(--accent);
}

.pedido-obrigado-acoes .botao-secundario {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.pedido-obrigado .pedido-obrigado-upsell li,
.pedido-obrigado .pedido-obrigado-upsell ul {
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* na visita do "obrigado" o card de status repetiria "pagamento
   confirmado" logo abaixo -- some so nessa primeira visita */
.pedido-obrigado + .acomp-grade .acomp-status.status-pago {
  display: none;
}

/* desconto combinado no pedido manual (ver app.py:admin_pedido_criar_manual) */
.pedido-valores .pedido-valores-desconto dt,
.pedido-valores .pedido-valores-desconto dd {
  color: #1e7a43;
  font-weight: 700;
}

/* ===== Liturgia de hoje na home (templates/_liturgia_home.html) =====
   Pagina de missal aberta no dia: papel branco com filete dourado duplo
   (a moldura das paginas de missal) e a fita marcadora caindo por cima
   da borda na cor liturgica de hoje -- o unico elemento "forte" do bloco.
   Fraunces so no nome da celebracao. */
.missal-hoje {
  --cor-fita: var(--gold);
  margin: 0 0 40px;
  padding-top: 12px; /* espaco pra fita que sobe acima da pagina */
}

.missal-hoje-pagina {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 30px 22px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--raio-g);
  box-shadow: 0 14px 30px -24px rgba(20, 51, 92, 0.45);
}

/* filete duplo dourado, 7px pra dentro: lembra a moldura do missal */
.missal-hoje-pagina::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(184, 146, 61, 0.55);
  outline: 1px solid rgba(184, 146, 61, 0.28);
  outline-offset: 3px;
  border-radius: 9px;
  pointer-events: none;
}

/* a fita: sai de cima da pagina e termina em rabo de andorinha */
.missal-hoje-pagina::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 30px;
  width: 22px;
  height: 92px;
  background: var(--cor-fita);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.08);
}

.missal-hoje-dia,
.missal-hoje-convite {
  position: relative; /* acima do filete */
  min-width: 0;
}

.missal-hoje-titulo {
  margin: 0 44px 10px 0;
  font-family: var(--fonte-corpo);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold-texto-claro);
}

.missal-hoje-data {
  font-weight: 600;
}

.missal-hoje-festa {
  margin: 0 44px 4px 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-wrap: balance;
}

.missal-hoje-festa-extra {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--muted);
}

.missal-hoje-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 12px 0 14px;
  font-size: 0.86rem;
  color: var(--muted);
}

.missal-hoje-selo {
  padding: 2px 10px;
  border: 1.5px solid var(--cor-rank, var(--accent));
  border-radius: var(--raio-pilula);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

/* leituras do dia: cada referencia num bloco, separadas por filete */
.missal-hoje-leituras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* marca dourada antes de cada referencia: funciona mesmo quando a
   linha quebra (domingo tem 4 leituras), sem separador sobrando */
.missal-hoje-leituras li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.missal-hoje-leituras li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.missal-hoje-convite {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.missal-hoje-chamada {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.missal-hoje-detalhe {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.missal-hoje-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missal-hoje-form input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #c9d2df;
  border-radius: var(--raio-m);
  background: #fff;
  font: inherit;
  font-size: 1rem; /* 16px: o iPhone nao da zoom no campo */
  color: var(--ink);
}

.missal-hoje-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.missal-hoje-form input[aria-invalid="true"] {
  border-color: var(--erro-texto);
}

.missal-hoje-form button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--raio-m);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.missal-hoje-form button:hover {
  background: var(--accent-dark);
}

.missal-hoje-form button:focus-visible,
.missal-hoje-baixar:focus-visible,
.missal-hoje-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.missal-hoje-form button:disabled {
  opacity: 0.7;
  cursor: progress;
}

.missal-hoje-feedback {
  margin: 8px 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--erro-texto);
}

.missal-hoje-pronto {
  padding: 14px 16px;
  border-radius: var(--raio-m);
  background: var(--sucesso-fundo);
  color: var(--sucesso-texto);
  font-size: 0.92rem;
}

.missal-hoje-pronto p {
  margin: 0 0 10px;
}

.missal-hoje-baixar {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--raio-m);
  background: var(--sucesso-texto);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.missal-hoje-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
}

@media (min-width: 820px) {
  .missal-hoje-pagina {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0;
    padding: 38px 40px 34px;
  }

  .missal-hoje-dia {
    padding-right: 36px;
  }

  .missal-hoje-convite {
    padding: 4px 0 0 36px;
    border-top: 0;
    border-left: 1px solid var(--border);
    align-self: center;
  }

  /* no desktop a fita fica sobre a coluna do dia, nao sobre o formulario */
  .missal-hoje-pagina::after {
    right: auto;
    left: calc(55.5% - 52px);
    height: 108px;
  }
}

/* ===== Cabeçalho (auditoria 2026-10-10) =====
   Ícones de traço no lugar dos emojis (👤 🛒 ☰ mudavam de desenho em
   cada celular) e, no computador, as seções da loja visíveis no topo. */
.menu-lateral-botao { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: -8px; border-radius: 10px; }
.menu-lateral-botao:hover { background: var(--bg); }
.menu-lateral-botao .icone { width: 24px; height: 24px; }
.topo-nav { display: none; }
.topo-acoes { gap: 6px; }
.link-icone-topo, a.link-carrinho { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.link-icone-topo:hover, a.link-carrinho:hover { background: var(--bg); }
.link-icone-topo .icone, a.link-carrinho .icone { width: 24px; height: 24px; color: var(--accent); }
.topo-acao-texto { display: none; }
a.link-carrinho #contador-carrinho { position: absolute; top: 2px; left: 22px; min-width: 18px; padding: 1px 5px; font-size: 0.68rem; line-height: 1.35; box-shadow: 0 0 0 2px var(--card); }
.menu-lateral-botao:focus-visible, .link-icone-topo:focus-visible, a.link-carrinho:focus-visible, .topo-nav a:focus-visible, .topo-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (min-width: 480px) {
  .topo-acao-carrinho { display: inline; }
  a.link-carrinho #contador-carrinho { position: static; box-shadow: none; }
}
@media (min-width: 1000px) {
  header.topo { padding: 12px 28px; gap: 24px; }
  .topo-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
  .topo-nav a, .topo-nav button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
  .topo-nav a:hover, .topo-nav button:hover { background: var(--bg); color: var(--accent); }
  .topo-acao-texto { display: inline; }
}

/* WhatsApp flutuante menor no celular (auditoria 2026-10-10: o de 56px
   cobria preço e miniaturas). Continua com área de toque de 48px. */
@media (max-width: 640px) {
  .whatsapp-flutuante { width: 48px; height: 48px; right: 12px; bottom: 14px; }
  body.tem-barra-fixa-comprar .whatsapp-flutuante { bottom: 80px; }
}

/* Home enxuta (auditoria 2026-10-10) */
.hero-pdf { margin: 10px 0 0; text-align: center; font-size: 0.86rem; }
.hero-pdf a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.hero-pdf a:hover { color: var(--accent); }
.ocasioes { margin: 0 0 32px; }
.ocasioes-titulo { margin: 0 0 12px; font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 600; color: var(--accent); text-align: center; }
.ocasioes-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ocasioes-lista a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--raio-pilula); background: var(--card); color: var(--ink); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.ocasioes-lista a:hover { border-color: var(--accent); color: var(--accent); }
.ocasioes-lista a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 699px) { .banner-uso-real { display: none; } }
@media (min-width: 700px) { .ocasioes { display: none; } }

/* barra fixa do produto: pendencia em dourado (botao ativo que leva ao
   campo que falta) e destaque breve no campo */
.barra-fixa-comprar .barra-fixa-pendente { background: var(--card) !important; color: var(--accent) !important; border: 1.5px solid var(--accent) !important; }
.campo-pendente { animation: campo-pendente 1.6s ease; border-radius: var(--raio-m); }
@keyframes campo-pendente { 0%, 60% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .campo-pendente { animation: none; box-shadow: 0 0 0 3px var(--gold); } }

/* carrinho vazio com vitrine (auditoria 2026-10-10): em vez de so uma
   frase + botao, os santos mais pedidos -- mesmo card da home. */
.carrinho-vazio {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 8px 0 24px;
}
.carrinho-vazio .vazio-texto {
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
}
.carrinho-vazio-sub {
  margin: 0;
  color: var(--muted);
}
.carrinho-vazio-grade {
  width: 100%;
  text-align: left;
}

/* pagina de produto no desktop (auditoria 2026-10-10): o painel de
   escolha era uma coluna so -- foto em cima, opcoes embaixo, muita
   rolagem. A partir de 1000px a foto fica fixa a esquerda enquanto o
   cliente escolhe formato/tamanho/cor a direita. */
@media (min-width: 1000px) {
  .painel-selecao:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  .painel-selecao > * {
    grid-column: 2;
  }
  .painel-selecao > .preview-formato-wrap {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: 96px;
    margin: 0;
  }
}

/* rolagem da barra fixa ate o campo pendente: deixa espaco pro topo fixo */
#sel-tamanhos, #sel-cores, #btn-adicionar { scroll-margin-top: 150px; }

/* Aviso de cookies (LGPD, ver static/js/cookies_consentimento.js) --
   faixa fixa no rodape, mesma paleta do resto do site. */
.aviso-cookies {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px -16px rgba(20, 34, 56, 0.35);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.aviso-cookies p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  flex: 1 1 260px;
}

.aviso-cookies a {
  color: var(--accent);
  font-weight: 600;
}

.aviso-cookies-botoes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.aviso-cookies-botao {
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
}

.aviso-cookies-botao-secundario {
  background: transparent;
  color: var(--accent);
}


/* Prévia homolog 10/10: benefícios em tarja baixa abaixo do hero no desktop. */
@media (min-width: 1000px) {
  .vantagens.vantagens-faixa {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 16px 0 12px;
    padding: 16px 8px;
    background: var(--card);
    border-block: 1px solid var(--border);
  }
  .vantagens.vantagens-faixa .vantagem {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    align-content: center;
    justify-items: start;
    min-width: 0;
    padding: 0 16px;
    text-align: left;
  }
  .vantagens.vantagens-faixa .vantagem + .vantagem { border-left: 1px solid var(--border); }
  .vantagens.vantagens-faixa .vantagem > * { grid-column: 2; grid-row: auto; margin: 0; }
  .vantagens.vantagens-faixa .vantagem > .vantagem-icone {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
  }
  .vantagens.vantagens-faixa .vantagem-icone .icone { width: 25px; height: 25px; }
  .vantagens.vantagens-faixa .vantagem strong { font-size: 13px; line-height: 1.3; }
  .vantagens.vantagens-faixa .vantagem > span:not(.vantagem-icone) { font-size: 12px; line-height: 1.35; }
  .vantagens.vantagens-faixa .vantagem .vantagem-icone-duplo { display: none; }
}