/* Savelly — Modernist adaptado à marca (handoff design_handoff_savelly). Fonte única Archivo, nenhum canto
   arredondado, divisórias de 2px, tudo flush left. Tokens extraídos do logo. */

:root {
  --color-bg: #f8f5ee;
  --color-surface: #efebe1;
  --color-text: #0b3b26;
  --color-divider: #0b3b26;
  --color-accent: #2ea85a;
  --color-accent-100: #e3f4e8;
  --color-accent-200: #c2e7cd;
  --color-accent-400: #57bd78;
  --color-accent-500: #2ea85a;
  --color-accent-600: #238a49;
  --color-accent-700: #1a6b39;
  --color-accent-800: #124d29;
  --color-accent-900: #0b3b26;
  --color-yellow: #f5cf2a;
  --color-on-accent: #f8f5ee;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --pad: clamp(var(--space-4), 5vw, var(--space-8));
  --shadow-md: 0 3px 10px color-mix(in srgb, #0b3b26 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #0b3b26 22%, transparent);
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
}
body.sem-rolagem { overflow: hidden; }
main { flex: 1; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(36px, 9vw, 56px); }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
button { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
[hidden] { display: none !important; }

.text-muted { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.pequeno { font-size: 13px; }
.forte { font-weight: 600; }
.cresce { flex: 1; min-width: 0; }
.topo-3 { margin-top: var(--space-3); }
.sem-margem { margin: 0; }
.kicker { color: var(--color-accent-700); }
.secao-pad { padding: var(--pad); }
.secao-pad-x { padding: 0 var(--pad) var(--pad); }
.borda-baixo { border-bottom: 2px solid var(--color-divider); }
.titulo-pagina { font-size: clamp(32px, 8vw, 48px); margin-bottom: var(--space-4); }
.secao-titulo { margin: 0 0 var(--space-4); }
.acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ── Botões / tags / inputs (classes base do design system) ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  cursor: pointer; text-decoration: none; text-align: left;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: 0;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  min-height: 36px;
}
.btn:disabled, .btn.desabilitado { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-700); }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn-alto { min-height: 44px; }
.btn-pequeno { font-size: 13px; }
.btn-mini { font-size: 12px; padding: 4px 8px; min-height: 32px; }
.btn-largo { width: 100%; min-height: 44px; }
.btn-cresce { flex: 1; min-height: 44px; }
.btn-inicio { align-self: flex-start; }
.btn-amarelo { background: var(--color-yellow); color: var(--color-accent-900); }
.btn-amarelo:hover { background: #e9c31d; color: var(--color-accent-900); }
.btn-escuro { background: var(--color-accent-900); color: var(--color-on-accent); }
.btn-escuro:hover { background: var(--color-accent-800); color: var(--color-on-accent); }
.btn-link { all: unset; cursor: pointer; color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 0; white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.tag-desconto { background: var(--color-yellow); color: var(--color-accent-900); font-weight: 800; }
.tag-melhor { background: var(--color-accent); color: var(--color-on-accent); font-weight: 800; }
.tag-fundo { background: var(--color-bg); }

.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0;
}
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.form-erro { font-size: 13px; color: var(--color-accent-700); }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-divider); }
.seg .btn { min-height: 34px; }

/* ── Header ───────────────────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 5; height: 64px;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--pad); background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.brand { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.brand-logo { width: 40px; height: 40px; overflow: hidden; position: relative; flex: none; display: block; }
.brand-logo img { position: absolute; max-width: none; width: 93px; height: 93px; left: -28px; top: -15px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px; letter-spacing: -0.02em;
  color: var(--color-text); text-decoration: none;
}
.brand-name:hover { color: var(--color-text); }
.brand-city {
  all: unset; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--color-accent-700);
}
.brand-city:focus-visible, .header-city:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.site-nav { display: flex; gap: var(--space-6); height: 100%; align-items: stretch; font-size: 14px; font-weight: 600; white-space: nowrap; }
.site-nav a {
  display: flex; align-items: center; height: 100%; padding: 4px 0 0; line-height: 1;
  color: var(--color-text); text-decoration: none; border-bottom: 4px solid transparent;
}
.site-nav a.ativo { border-bottom-color: var(--color-accent); }
.site-nav a:hover { color: var(--color-accent-700); }
.header-right { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; font-size: 13px; white-space: nowrap; }
/* Busca no header (toda página), como nos agregadores: uma linha de 40 px, nunca uma seção. */
.header-busca { display: flex; align-items: stretch; height: 40px; flex: 1 1 200px; min-width: 0; max-width: 460px; margin-left: auto; }
/* appearance:none — o <input type=search> nativo (Chrome/Safari no celular) ignora a altura e ficava mais baixo que a lupa. */
.header-busca .input { flex: 1; min-width: 0; height: 100%; min-height: 0; font-size: 16px; padding-block: 0; padding-inline: var(--space-3); appearance: none; -webkit-appearance: none; }
.header-busca .input::-webkit-search-decoration, .header-busca .input::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-busca .btn { height: 100%; min-height: 0; width: 44px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.header-busca + .header-right { margin-left: 0; }
/* Sino/alertas do header na MESMA altura do campo e da lupa (40 px), não os 44 px do .btn-alto genérico. */
.header-right .btn-alto { min-height: 40px; height: 40px; padding-block: 0; }
@media (max-width: 899.98px) {
  /* Celular: logo + cidade | busca | sino. O campo é quem cresce; a cidade encurta com reticências. */
  .site-header { gap: var(--space-2); }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 18px; }
  /* Cidade em até 2 linhas ("São José dos / Campos/SP"), nunca cortada no meio do nome. */
  .brand-city.so-mobile { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 112px; overflow: hidden; font-size: 11px; line-height: 1.15; text-align: left; }
  .header-busca { flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 0; }
  .header-busca .input { font-size: 15px; padding-inline: var(--space-2); }
  .header-busca .btn { width: 40px; }
  .header-right { gap: 0; }
  .header-right .btn-alto { padding-inline: var(--space-2); }
}
@media (max-width: 599.98px) { .brand-name { display: none; } .brand-city.so-mobile { font-weight: 800; } }
.header-city { all: unset; cursor: pointer; font-weight: 800; }
.header-city:hover { color: var(--color-accent-700); }

/* Breakpoints: mobile < 900, desktop ≥ 900, wide ≥ 1200 */
.so-mobile { display: none !important; }
.so-wide { display: none !important; }
@media (min-width: 1200px) {
  .so-wide { display: inline-flex !important; }
  .ate-wide { display: none !important; }
}
@media (max-width: 899.98px) {
  .so-desktop { display: none !important; }
  .so-mobile { display: revert !important; }
  .brand-city.so-mobile { display: inline !important; }
}

/* Tab bar fixa no rodapé (mobile) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-bg); border-top: 2px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 899.98px) {
  .tabbar.so-mobile { display: grid !important; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.tabbar a {
  height: 60px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; font-weight: 800; text-decoration: none; color: var(--color-text);
  border-top: 4px solid transparent;
}
.tabbar a.ativo { color: var(--color-accent-700); background: var(--color-accent-100); border-top-color: var(--color-accent); }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────── */
.site-footer {
  padding: var(--space-6) var(--pad); display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 13px; border-top: 2px solid var(--color-divider);
}
.footer-cidades { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; align-items: baseline; }
.footer-linha { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ── Home ─────────────────────────────────────────────────────────────────────────────────── */
/* Topo (15/10/2026): H1 pequeno + chips colados no header; a primeira dobra é a fileira de capas. */
.faixa-topo { padding-top: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-divider); }
.faixa-titulo { margin: 0 0 var(--space-2); }
.faixa-numeros { font-weight: 600; letter-spacing: 0; text-transform: none; }
.faixa-topo .chips { margin-top: 0; }
.form-oculto { display: none; }
@media (max-width: 899.98px) {
  /* Celular: H1 pequeno e inteiro (até 2 linhas), sem os números — a primeira tela é a fileira de capas, não texto. */
  .faixa-titulo { font-size: 11px; line-height: 1.3; }
  .faixa-numeros { display: none; }
}
/* Resposta datada (o que a IA/Google cita) e perguntas frequentes. */
.resumo-hoje { max-width: 720px; margin: 0 0 var(--space-4); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

/* "Folhetos da semana": capas em fileira que rola p/ o lado (celular e desktop), selo de validade sobre a capa. */
.capas-semana-secao { padding-top: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-divider); }
.capas-head { margin-bottom: var(--space-2); align-items: center; }
.capas-head h2 { font-size: 20px; }
.capas-head a { margin-left: auto; font-size: 13px; }
.capas-semana { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); scroll-snap-type: x proximity; }
.capas-semana::-webkit-scrollbar { display: none; }
.capa-mini { flex: none; width: 124px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--color-text); scroll-snap-align: start; }
.capa-mini-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-surface); border: 2px solid var(--color-text); }
.capa-mini-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.capa-mini:hover .capa-mini-img { opacity: .85; }
/* Capa do encarte em destaque na página da rede (Mercados/Detalhe): capa + "Ver o folheto completo". */
.encarte-destaque { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-2);
  max-width: 440px; border: 2px solid var(--color-text); background: var(--color-accent-100); color: var(--color-text); text-decoration: none; }
.encarte-destaque .capa-mini-img { flex: none; width: 84px; }
.encarte-destaque-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.encarte-destaque-txt strong { font-size: 17px; }
.encarte-destaque-cta { margin-top: 4px; font-weight: 700; color: var(--color-accent); }
.encarte-destaque:hover { background: var(--color-accent-200); }
.capa-mini-selo { position: absolute; left: 4px; bottom: 4px; font-size: 11px; line-height: 1.2; padding: 2px 6px; background: var(--color-bg); }
.capa-mini-nome { font-size: 12px; font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.capa-mini-mais { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--color-accent-700); background: var(--color-accent-100); border-color: var(--color-accent-200); }
@media (max-width: 899.98px) {
  .capa-mini { width: 104px; }
  .capas-head h2 { font-size: 18px; }
}
/* ── Índice de preços (substitui o bloco "Índice de preços da cesta básica" do site.css) ───────────── */
/* Topo: número principal + ações de compartilhar num painel escuro */
.indice-topo { display: flex; flex-wrap: wrap; padding: 0 !important; }
.indice-topo-esq { flex: 2 1 520px; min-width: 0; padding: var(--space-8) var(--pad); }
.indice-topo-dir {
  flex: 1 1 280px; padding: var(--space-8) var(--pad); background: var(--color-accent-900); color: var(--color-on-accent);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.indice-topo-dir h6 { margin: 0 0 var(--space-2); color: var(--color-on-accent); }
.indice-topo-nota { margin: auto 0 0; padding-top: var(--space-4); color: var(--color-accent-200); }
.btn-contorno-claro { background: transparent; color: var(--color-on-accent); border: 2px solid var(--color-accent-400); justify-content: flex-start; }
.btn-contorno-claro:hover { background: var(--color-accent-800); }

.indice-principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.indice-principal-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(44px, 9vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.indice-principal-var { display: flex; flex-direction: column; line-height: 1.2; }
.indice-principal-pct { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 4vw, 28px); }
.indice-principal-sub { max-width: 640px; margin: var(--space-3) 0 0; font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tag-amarela { background: var(--color-yellow); color: var(--color-accent-900); font-weight: 800; }

.indice-secundarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 2px solid var(--color-divider); margin-top: var(--space-6); max-width: 760px; }
.indice-sec { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4); color: var(--color-text); text-decoration: none; border-right: 2px solid var(--color-divider); }
.indice-sec:last-child { border-right: 0; }
.indice-sec:hover { background: var(--color-accent-100); }
.indice-sec-num { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1.1; }
.indice-rotulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent-700); }

/* Variações: sem opacidade (contraste), vermelho para alta mantido como única exceção à paleta */
.var-queda { color: var(--color-accent-700); }
.var-alta { color: #b3261e; }
.var-neutra { color: var(--color-neutral-700); }

/* Duas colunas: gráfico de 12 semanas | altas e quedas (painel escuro) */
.indice-duas { display: flex; flex-wrap: wrap; }
.indice-col { flex: 1 1 360px; min-width: 0; }
.indice-col:first-child { border-right: 2px solid var(--color-divider); }
.indice-col-escura { background: var(--color-accent-900); color: var(--color-on-accent); }
.indice-col-escura .secao-titulo, .indice-col-escura h6 { color: var(--color-on-accent); }
.indice-col-escura h6 { margin: 0 0 var(--space-2); }

.grafico-semanas { list-style: none; margin: var(--space-4) 0 var(--space-3); padding: 0; display: flex; align-items: flex-end; gap: 4px; height: 180px; border-bottom: 2px solid var(--color-divider); max-width: 760px; }
.grafico-semana { flex: 1; min-width: 0; height: 100%; }
.grafico-semana a { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-decoration: none; color: var(--color-text); position: relative; }
.grafico-valor { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% - 18px); font-size: 11px; font-weight: 800; white-space: nowrap; opacity: 0; }
.grafico-semana a:hover .grafico-valor, .grafico-atual .grafico-valor { opacity: 1; }
.grafico-barra { display: block; flex: none; background: var(--color-neutral-300); }
.grafico-semana a:hover .grafico-barra { background: var(--color-accent-400); }
.grafico-menor .grafico-barra { background: var(--color-yellow); }
.grafico-atual .grafico-barra { background: var(--color-accent); }
.grafico-data { flex: none; height: 22px; font-size: 11px; text-align: center; padding-top: 4px; white-space: nowrap; }
@media (max-width: 599.98px) { .grafico-semana:nth-child(odd) .grafico-data { visibility: hidden; } .grafico-semana a:hover .grafico-valor { opacity: 0; } }
.legenda { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin: 0 4px 0 var(--space-3); }
.legenda:first-child { margin-left: 0; }
.legenda-atual { background: var(--color-accent); }
.legenda-menor { background: var(--color-yellow); }

.altas-quedas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.var-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 2px solid var(--color-accent-700); color: var(--color-on-accent); text-decoration: none; }
.var-linha:hover { color: var(--color-yellow); }
.var-pct { font-family: var(--font-heading); font-size: 20px; white-space: nowrap; }
.var-pct-queda { color: var(--color-yellow); }
.var-pct-alta { color: var(--color-on-accent); }

/* Ranking: barra proporcional como fundo da linha inteira */
.ranking { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-top: 2px solid var(--color-divider); max-width: 900px; }
.ranking-item { border-bottom: 2px solid var(--color-divider); }
.ranking-item summary { list-style: none; cursor: pointer; position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-2); isolation: isolate; }
.ranking-item summary::-webkit-details-marker { display: none; }
.ranking-fundo { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-surface); z-index: -1; }
.ranking-primeiro .ranking-fundo { background: var(--color-accent-100); }
.ranking-item summary:hover .ranking-fundo { background: var(--color-accent-200); }
.ranking-pos { font-family: var(--font-heading); font-weight: 800; font-size: 20px; text-align: center; }
.ranking-nome { display: flex; flex-direction: column; min-width: 0; }
.ranking-abrir { color: var(--color-accent-700); font-weight: 600; }
.ranking-item[open] .ranking-abrir { visibility: hidden; }
.ranking-total { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.ranking-detalhe { margin: 0 0 var(--space-3); font-size: 13px; max-width: none; }
.ranking-detalhe .nao-anunciado td { color: var(--color-neutral-700); }
@media (max-width: 599.98px) { .ranking-detalhe th:nth-child(3), .ranking-detalhe td:nth-child(3) { display: none; } }

/* Itens: tabela no desktop; vira cards no celular */
.tabela-itens { max-width: none; width: 100%; margin-top: var(--space-3); }
.tabela-itens td, .tabela-itens th { vertical-align: top; }
.tabela-itens td > *, .tabela-itens td > a { display: block; }
.tabela-itens td.num { font-family: var(--font-heading); font-size: 16px; white-space: nowrap; }
.tabela-itens .poucos-dados td.num { color: var(--color-neutral-700); }
.tabela-itens .tag { display: inline-block; margin-top: 4px; }
@media (max-width: 719.98px) {
  .tabela-itens thead { display: none; }
  .tabela-itens, .tabela-itens tbody, .tabela-itens tr, .tabela-itens td { display: block; }
  .tabela-itens tr { border: 2px solid var(--color-divider); padding: var(--space-3); margin-bottom: var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .tabela-itens td { border: 0; padding: 0; }
  .tabela-itens td:first-child, .tabela-itens td:last-child { grid-column: 1 / -1; }
  .tabela-itens td[data-rotulo]:not(:first-child)::before { content: attr(data-rotulo); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent-700); }
}

.comparativo { max-width: 760px; display: flex; flex-direction: column; margin-top: var(--space-3); border: 2px solid var(--color-divider); }
.comparativo-linha { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; padding: var(--space-3); border-bottom: 2px solid var(--color-divider); }
.comparativo-linha:last-child { border-bottom: 0; }
.comparativo-linha strong { font-family: var(--font-heading); font-size: 22px; white-space: nowrap; }
.comparativo-nosso { background: var(--color-accent-100); }
.comparativo-nota { margin: 0; padding: var(--space-3); border-bottom: 2px solid var(--color-divider); }
.link-folheto { white-space: nowrap; font-weight: 600; }
.folheto-encerrado { white-space: nowrap; font-size: 12px; color: var(--color-neutral-700); }
.metodologia summary { cursor: pointer; list-style: none; }
.metodologia summary::-webkit-details-marker { display: none; }
.metodologia summary h2::after { content: " +"; color: var(--color-accent-700); }
.metodologia[open] summary h2::after { content: " −"; }
.metodologia ul { line-height: 1.5; }
/* Tabela de itens dentro do .tabela-rolavel: no celular vira cards, sem a largura mínima da tabela rolável. */
@media (max-width: 719.98px) { .tabela-rolavel .tabela.tabela-itens { min-width: 0; } }
.tabela-rolavel { overflow-x: auto; }
.tabela-rolavel .tabela { max-width: none; min-width: 640px; }
.faq { max-width: 760px; display: flex; flex-direction: column; }
.faq-item { border-bottom: 2px solid var(--color-divider); }
.faq-item summary { cursor: pointer; padding: var(--space-3) 0; list-style: none; display: flex; gap: var(--space-2); align-items: baseline; }
.faq-item summary::before { content: "+"; font-weight: 800; color: var(--color-accent-700); }
.faq-item[open] summary::before { content: "−"; }
.faq-item summary h3 { display: inline; margin: 0; font-size: 16px; }
.faq-item p { margin: 0 0 var(--space-3) 1.2em; line-height: 1.5; }
/* .busca: campo grande da "Minha lista" (a home usa a busca do header). */
.busca { display: flex; max-width: 720px; }
.busca .input { flex: 1; min-width: 0; height: 48px; font-size: 16px; }
.busca .btn { height: 48px; flex: none; }
/* Atalhos "Mais buscados" abaixo do campo: um toque roda a busca. */
.sugestoes-busca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
.sugestoes-busca a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.chips .btn { font-size: 13px; }
/* Mobile: uma fileira que rola p/ o lado (13 chips quebrariam em 4 linhas). */
@media (max-width: 899.98px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .btn { flex: none; white-space: nowrap; }
}

.secao-head { display: flex; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.secao-head h2 { margin: 0; }
.secao-head .seg { margin-left: auto; }
@media (max-width: 899.98px) { .secao-head .seg { margin-left: 0; } }

.vazio { border: 2px solid var(--color-divider); padding: var(--space-6); }

.grade-ofertas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  border-top: 2px solid var(--color-divider); border-left: 2px solid var(--color-divider);
}
.card-oferta {
  border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
}
.card-selos { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; min-height: 22px; }
.card-img {
  aspect-ratio: 4 / 3; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-nome { font-weight: 600; line-height: 1.3; min-height: 40px; overflow-wrap: anywhere; }
.card-preco { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.preco { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.1; }
.preco-unidade { font-size: 13px; font-weight: 600; color: var(--color-accent-700); }
.preco-condicao { font-size: 12px; line-height: 1.3; color: var(--color-accent-700); overflow-wrap: anywhere; }
.preco-antigo { text-decoration: line-through; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
/* Ações do card: grade fixa, não flex-wrap. Medido em 15/10/2026: num celular de 351–360 px o conteúdo do card tem
   ~140 px e "+ Lista" (58 px) + "Comparar" (78 px) não cabiam lado a lado, então os 3 botões empilhavam (128 px, mais
   alto que a imagem da oferta). Agora: "+ Lista" | "Comparar" dividem a 1ª linha e "Avisar" ocupa a 2ª inteira — 2
   linhas sempre, em qualquer largura. No card estreito (≤ 150 px de conteúdo) a fonte cai p/ 11 px (container query). */
.card-oferta { container-type: inline-size; }
.card-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.card-acoes .btn-mini { justify-content: center; text-align: center; padding-inline: var(--space-1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-acoes .btn-avisar { grid-column: 1 / -1; }
@container (max-width: 150px) { .card-acoes .btn-mini { font-size: 11px; padding-inline: 2px; } }
.card-rodape {
  display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px;
  border-top: 2px solid var(--color-divider); padding-top: var(--space-2); margin-top: auto;
}
.card-rodape a { font-weight: 800; color: var(--color-text); }
.btn-mais { margin-top: var(--space-4); }

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.passo { border-top: 4px solid var(--color-accent); padding-top: var(--space-3); }
.passo h4 { margin: var(--space-1) 0; }
.passo p { margin: 0; }
.passo-num { font-weight: 800; font-size: 32px; }

.faixa-final { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.faixa-final p { margin: 0; flex: 1; min-width: 220px; font-size: 18px; font-weight: 600; }

/* ── Modais ───────────────────────────────────────────────────────────────────────────────── */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: color-mix(in srgb, #0b3b26 50%, transparent);
}
.dialog {
  width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); background: var(--color-bg); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg);
}
.dialog h3, .dialog h6 { margin: 0; }
.dialog-rolavel { width: min(520px, 100%); }
.dialog .resumo { font-size: 13px; }
.lista-cidades { display: flex; flex-direction: column; border-top: 2px solid var(--color-divider); }
.lista-cidades a {
  display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: 2px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-weight: 600;
}
.lista-cidades a:hover, .lista-cidades a.ativo { background: var(--color-accent-100); }

.linhas { border-top: 2px solid var(--color-divider); }
.linha {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: 2px solid var(--color-divider); flex-wrap: wrap;
}
.preco-linha { font-family: var(--font-heading); font-weight: 800; font-size: 20px; min-width: 96px; text-align: right; }
.historico { display: flex; align-items: flex-end; gap: 4px; height: 72px; flex: none; border-bottom: 2px solid var(--color-divider); }
.historico > div { flex: 1; }
.historico-legenda { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px; }

/* ── Folhetos ─────────────────────────────────────────────────────────────────────────────── */
.linha-tempo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.lt-celula {
  padding: var(--space-4) var(--pad); border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column; gap: 2px; color: var(--color-text); text-decoration: none;
}
.lt-celula:hover, .lt-celula.ativa { background: var(--color-accent-100); color: var(--color-text); }
.lt-rotulo { font-size: 12px; font-weight: 600; color: var(--color-accent-700); }
.lt-num { font-family: var(--font-heading); font-weight: 800; font-size: 32px; line-height: 1; }
.lt-mercados { font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.grade-folhetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-6); }
.folheto { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.folheto-capa {
  aspect-ratio: 3 / 4; background: var(--color-surface); border: 2px solid var(--color-text);
  display: flex; flex-direction: column; position: relative; text-decoration: none; overflow: hidden;
}
.folheto-capa:hover { opacity: 0.85; }
.folheto-pagina { flex: 1; min-height: 0; overflow: hidden; }
.folheto-pagina img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.folheto-selo { position: absolute; left: var(--space-2); bottom: var(--space-2); background: var(--color-bg); }
.folheto-nome { display: flex; align-items: center; gap: var(--space-2); }
.folheto-nome strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.coracao { color: var(--color-accent-700); font-size: 18px; }

/* ── Leitor (tela cheia, fundo verde-900) ─────────────────────────────────────────────────── */
body.leitor {
  background: var(--color-accent-900); color: var(--color-on-accent);
  height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  padding-bottom: 0 !important; /* sem tab bar no leitor */
}
.leitor-topo, .leitor-rodape {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); flex-wrap: wrap;
}
.leitor-topo { border-bottom: 2px solid var(--color-accent-700); padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); }
.leitor-rodape { border-top: 2px solid var(--color-accent-700); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; }
.leitor-titulo { font-size: 18px; }
.leitor-zoom { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.leitor-fechar { order: 10; } /* desktop: Fechar no canto direito, depois do zoom */
.zoom-rotulo { min-width: 56px; font-weight: 800; text-align: center; }
.btn-contorno { background: transparent; color: var(--color-on-accent); border-color: var(--color-accent-400); font-size: 12px; }
.btn-contorno:hover { background: var(--color-accent-800); color: var(--color-on-accent); }
.btn-claro { background: var(--color-bg); color: var(--color-accent-900); border-color: var(--color-bg); }
.btn-claro:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
.leitor-palco { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: var(--space-4); }
/* Lista das ofertas da página em TEXTO (o que o Google lê; a imagem não indexa): fechada por padrão p/ a
   página continuar encaixada na tela, abre com um toque. */
.leitor-ofertas { width: 100%; max-width: 720px; flex: none; margin-top: var(--space-3); color: var(--color-on-accent); }
.leitor-ofertas summary { cursor: pointer; font-weight: 800; padding: var(--space-2) 0; }
.leitor-ofertas ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-1); font-size: 14px; }
.leitor-ofertas a { color: var(--color-on-accent); }
.leitor-ofertas .preco-lista { font-weight: 800; white-space: nowrap; }
.leitor-ofertas nav { margin-top: var(--space-3); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.leitor-pagina {
  --zoom: 1;
  margin: auto; flex: none; position: relative;
  width: min(520px, 100%); /* sem JS; com JS a largura encaixa a página inteira no palco */
  background: var(--color-bg);
}
.leitor-pagina img { width: 100%; height: 100%; object-fit: contain; }
.recorte {
  all: unset; position: absolute; cursor: pointer; box-sizing: border-box;
  border: 2px solid transparent;
}
.recorte .tag {
  position: absolute; left: 2px; bottom: 2px; background: var(--color-bg); color: var(--color-accent-700);
  border: 1px solid var(--color-accent); opacity: 0; pointer-events: none;
}
.recorte:hover, .recorte:focus-visible { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent-100) 35%, transparent); }
.recorte:hover .tag, .recorte:focus-visible .tag, .recorte.na-lista .tag { opacity: 1; }
.recorte.na-lista { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent-100) 55%, transparent); }
.recorte.na-lista .tag { background: var(--color-accent-100); color: var(--color-accent-800); }
/* Oferta que veio do "ver no folheto" do índice: moldura amarela pulsando + etiqueta fixa no topo da caixa. */
.recorte.destaque {
  border: 4px solid var(--color-yellow); background: color-mix(in srgb, var(--color-yellow) 22%, transparent);
  box-shadow: 0 0 0 4px var(--color-accent-900), 0 0 0 9999px rgba(0, 0, 0, .35);
  animation: pulsa-destaque 1.2s ease-in-out 3; z-index: 2;
}
.recorte.destaque .tag-destaque {
  position: absolute; left: -4px; top: -30px; bottom: auto; opacity: 1; white-space: nowrap;
  background: var(--color-yellow); color: var(--color-accent-900); border: 0; font-weight: 800;
}
@keyframes pulsa-destaque { 50% { border-color: var(--color-bg); } }
.tag-destaque-topo { background: var(--color-yellow); color: var(--color-accent-900); border: 0; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .recorte.destaque { animation: none; } }
.leitor-miniaturas { flex: 1; display: flex; gap: var(--space-1); overflow-x: auto; min-width: 0; }
.leitor-miniaturas a {
  flex: none; width: 32px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; text-decoration: none;
  background: var(--color-accent-800); color: var(--color-on-accent);
}
.leitor-miniaturas a.atual { background: var(--color-yellow); color: var(--color-accent-900); }
.leitor-status { white-space: nowrap; }
@media (max-width: 899.98px) {
  .leitor-rodape { flex-wrap: wrap; }
  .leitor-miniaturas { order: -1; flex-basis: 100%; }
  .leitor-status { flex: 1; min-width: 0; text-align: center; white-space: normal; font-size: 12px; }
  .leitor-topo { gap: var(--space-2); padding: var(--space-2) var(--space-3); padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); }
  .leitor-titulo { font-size: 16px; }
  .leitor-fechar { order: 0; margin-left: auto; }
  .leitor-topo .btn-contorno { min-height: 36px; }
  .leitor-rodape { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .leitor-palco { padding: var(--space-2); }
}

/* ── Mercados ─────────────────────────────────────────────────────────────────────────────── */
.linha-mercado {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4);
  align-items: center; padding: var(--space-6) 0; border-bottom: 2px solid var(--color-divider);
}
.mercado-nome { font-weight: 800; font-size: 20px; color: var(--color-text); }
.mercado-endereco { font-size: 14px; }
.mercado-topo { display: flex; flex-wrap: wrap; }
.mercado-info { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--space-3); }
.enderecos { margin: 0; padding: 0; list-style: none; font-size: 16px; display: flex; flex-direction: column; gap: var(--space-1); }
.mercado-mapa {
  flex: 1 1 360px; min-height: 320px; background: var(--color-surface);
  border-left: 2px solid var(--color-divider);
  position: relative; isolation: isolate; /* panes do Leaflet (z 400+) não sobem acima do header sticky */
}
@media (max-width: 899.98px) { .mercado-mapa { border-left: 0; border-top: 2px solid var(--color-divider); } }
.pin { background: var(--color-accent); border: 2px solid var(--color-accent-900); }
.pin-atual { background: var(--color-yellow); z-index: 1000 !important; }
.linha-oferta .linha-nome { font-weight: 600; flex: 1; min-width: 160px; }
.linha-oferta .preco-linha { font-size: 22px; min-width: 0; }

/* ── Minha lista ──────────────────────────────────────────────────────────────────────────── */
.duas-colunas { display: flex; flex-wrap: wrap; }
.coluna-produtos { flex: 1 1 300px; border-right: 2px solid var(--color-divider); }
.coluna-totais { flex: 2 1 420px; }
@media (max-width: 899.98px) { .coluna-produtos { border-right: 0; border-bottom: 2px solid var(--color-divider); } }
.duas-colunas h3 { margin: 0 0 var(--space-3); }
.linha-compacta { padding: var(--space-2) 0; gap: var(--space-2); }
.linha-total { padding: var(--space-3); }
.linha-total.destaque { background: var(--color-accent-100); }
.preco-total { font-family: var(--font-heading); font-weight: 800; font-size: 24px; }
.faixa-amarela {
  padding: var(--space-4) var(--pad); background: var(--color-yellow); color: var(--color-accent-900);
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.form-alerta { max-width: 520px; }
.form-alerta .input, .form-alerta .btn { height: 44px; }

/* Contato */
.form-contato { max-width: 560px; display: flex; flex-direction: column; gap: var(--space-4); }
.form-contato .campo { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; }
.form-contato .campo .input { font-weight: 400; font-size: 16px; }
.form-contato textarea.input { resize: vertical; min-height: 140px; }
.form-contato .btn { align-self: flex-start; }
.form-contato .form-erro:empty { display: none; }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contato-ok { max-width: 560px; padding: var(--space-4); background: var(--color-accent-100); border: 2px solid var(--color-accent); }
.contato-ok p { margin: var(--space-2) 0 var(--space-4); }
/* Anúncio (AdSense) na grade: ocupa a linha inteira; some se o Google não tiver anúncio p/ mostrar. */
.grade-ofertas .anuncio {
  grid-column: 1 / -1; padding: var(--space-3) var(--space-4);
  border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
}
.anuncio-rotulo { display: none; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-bottom: var(--space-1); }
.anuncio:has(ins[data-ad-status="filled"]) .anuncio-rotulo { display: block; }
.anuncio:has(ins[data-ad-status="unfilled"]) { display: none; }
.grade-ofertas .anuncio:not(:has(ins[data-ad-status="filled"])) { padding: 0; border-bottom: 0; }

/* Páginas institucionais (privacidade) */
.texto-legal { max-width: 760px; line-height: 1.6; }
.texto-legal h2 { font-size: 22px; margin: var(--space-8) 0 var(--space-2); }
.texto-legal h3 { font-size: 17px; margin: var(--space-4) 0 var(--space-2); }
.texto-legal p, .texto-legal ul { margin: 0 0 var(--space-3); }
.texto-legal ul { padding-left: 20px; }
.texto-legal li { margin-bottom: var(--space-1); }
.texto-legal code { font-size: 14px; }
.chip-termo { display: inline-flex; align-items: center; border: 1px solid var(--color-divider); font-size: 13px; font-weight: 600; }
.chip-termo a { padding: 0 var(--space-1) 0 var(--space-3); color: var(--color-text); text-decoration: none; }
.chip-termo .btn-icon { width: 32px; height: 32px; min-height: 32px; }

/* ── SEO: h1 com cara de kicker / slogan com cara de h1; nomes que viraram links ─────────────── */
h1.texto-kicker { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.titulo-grande {
  font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em;
  font-size: clamp(36px, 9vw, 56px);
}
a.card-nome, .linha-oferta a.linha-nome { display: block; color: var(--color-text); text-decoration: none; }
a.card-nome:hover, .linha-oferta a.linha-nome:hover { color: var(--color-accent-700); text-decoration: underline; }
h1.leitor-titulo { font-size: 18px; margin: 0; letter-spacing: 0; }
h1.leitor-titulo a { color: inherit; text-decoration: none; }
@media (max-width: 899.98px) { h1.leitor-titulo { font-size: 16px; } }

/* ── Produto ──────────────────────────────────────────────────────────────────────────────── */
.produto-img { flex: 0 1 360px; display: flex; align-items: center; justify-content: center; }
.produto-img img { max-width: 100%; max-height: 320px; object-fit: contain; background: var(--color-surface); }
.historico-grande { height: 140px; max-width: 720px; }
.tabela { border-collapse: collapse; width: 100%; max-width: 720px; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); }
.tabela th { font-weight: 800; }
.tabela tr.destaque td { background: var(--color-accent-100); }

/* Hit targets ≥ 44px no mobile */
@media (max-width: 899.98px) {
  .btn { min-height: 44px; }
  .btn-icon { width: 44px; height: 44px; }
  .btn-mini { min-height: 40px; }
}

/* Horário de funcionamento da loja (página /{cidade}/loja/...) */
.horario-loja { display: flex; flex-direction: column; gap: var(--space-1); }
.horario-titulo { font-size: 16px; margin: 0; }
.horario-tabela { border-collapse: collapse; font-size: 15px; max-width: 360px; }
.horario-tabela th { text-align: left; font-weight: 400; padding: 2px var(--space-3) 2px 0; white-space: nowrap; }
.horario-tabela td { padding: 2px 0; font-variant-numeric: tabular-nums; }
.horario-tabela tr.hoje th, .horario-tabela tr.hoje td { font-weight: 700; }

/* ── Conversão (13/10/2026): ofertas na 1ª tela, atalhos por rede, WhatsApp direto ─────────────────────── */
/* Selo de validade curta (hoje/amanhã/2 dias) em laranja: motivo p/ abrir agora, como nos agregadores. */
.tag-urgente { background: #f28c28; color: #fff; font-weight: 800; }
/* "🔔 Avisar" do card: era botão fantasma; agora tem borda e cor de ação. */
.btn-avisar { border: 1px solid var(--color-accent); color: var(--color-accent-700); background: var(--color-bg); }
.btn-avisar:hover { background: var(--color-accent-100); }
.card-rodape { flex-wrap: wrap; row-gap: 2px; }
.card-distancia { font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; }

/* Barra flutuante do WhatsApp: acima da tab bar no celular; canto inferior no desktop. */
.barra-whats { position: fixed; z-index: 40; left: var(--space-2); right: var(--space-2); bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-accent-900); color: var(--color-on-accent); border: 2px solid var(--color-accent-900); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.barra-whats[hidden] { display: none; }
.barra-whats-texto { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.barra-whats .btn-icon { color: var(--color-on-accent); width: 32px; height: 32px; flex: none; }
.barra-whats .btn-amarelo { flex: none; }
@media (max-width: 899.98px) {
  .barra-whats { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--space-2)); }
}
@media (min-width: 900px) {
  .barra-whats { left: auto; right: var(--space-4); bottom: var(--space-4); max-width: 520px; }
}

/* Faixa do 1º acesso: cidade adivinhada (IP/padrão) com "Sim" / "Trocar cidade". */
.faixa-cidade { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-accent-100); color: var(--color-text); border-bottom: 2px solid var(--color-divider); font-size: 14px; }
.faixa-cidade[hidden] { display: none; }
.faixa-cidade-texto { flex: 1 1 200px; min-width: 0; }

/* Minha lista: total em uma linha + ponte p/ o WhatsApp. */
.lista-resumo { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.lista-total { margin: 0; font-size: 18px; }
@media (max-width: 899.98px) {
  /* Celular: cabeçalho da grade numa faixa só. */
  #ofertas .secao-head { gap: var(--space-2); margin-bottom: var(--space-3); align-items: center; }
  #ofertas .secao-head h2 { font-size: 22px; }
  #ofertas .secao-head .btn-pequeno { min-height: 30px; padding-block: 2px; }
  #ofertas .secao-head .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  #ofertas .secao-head .seg .btn { white-space: nowrap; flex: none; }
}
/* Logo da rede num círculo (lista de mercados e página da rede). Ícone quadrado preenche o círculo; logo largo
   (wordmark) fica inteiro com margem; sem logo, iniciais. */
.rede-circulo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--color-neutral-300); display: flex; align-items: center; justify-content: center; flex: none; transition: border-color .15s; }
.rede-circulo img { width: 78%; height: 78%; object-fit: contain; }
.rede-circulo.rede-icone img { width: 100%; height: 100%; object-fit: cover; }
.rede-iniciais { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-accent-700); }
/* Lista de mercados: logo no círculo + nome; mapa único da cidade no topo (pins amarelos = com oferta hoje). */
.mercado-cabecalho { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.mercado-cabecalho .rede-circulo { width: 56px; height: 56px; }
.mercado-cabecalho .rede-iniciais { font-size: 18px; }
.mercados-mapa { height: 340px; background: var(--color-surface); position: relative; isolation: isolate; }
@media (max-width: 899.98px) { .mercados-mapa { height: 260px; } }