/* ============================================================
   OURO VERDE — REDESIGN 2026 (camada aditiva de estilo)
   ============================================================
   Este arquivo NUNCA é carregado sem ?tema=2026 na URL (ver index.php).
   Carrega DEPOIS de assets/indexstyles.min.css de propósito — é uma
   camada de override, não uma substituição. Nada aqui deve depender de
   remover regras do CSS original; só sobrepor.

   ------------------------------------------------------------
   SISTEMA DE DESIGN — ler antes de adicionar qualquer regra nova
   ------------------------------------------------------------
   Auditoria feita em 27/07: cor era consistente (10 tokens cobrindo
   tudo), mas espaçamento/raio/sombra eram improvisados por componente
   (0.65rem aqui, 0.9rem ali, cada sombra com fórmula própria) — é isso
   que fazia o site parecer colagem em vez de sistema. Esta versão
   consolida uma ESCALA fixa pra cada categoria de token. Qualquer regra
   nova deve usar um valor da escala abaixo, nunca um valor solto — se
   nenhum step da escala servir, é sinal de repensar o componente, não
   de inventar um valor novo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

/* ---------- Tokens: cor ----------
   FASE 1.1 (28/07): estes valores vieram do handoff do Claude Design
   (styles/tokens.css do pacote "Ouro Verde mercado natural.zip") — o usuário usou
   o Claude Design pra propor um redesign completo e ele DESCARTOU deliberadamente
   minha paleta dourado/musgo, voltando pras cores REAIS da marca já em produção
   (#004F3D verde-escuro + bege). Mantive os NOMES de variável --t26-* (só troquei
   os VALORES) de propósito — evita reescrever as ~700 linhas de componente que já
   referenciam esses tokens, já que a arquitetura (escopo em
   body[data-theme-build="2026"], tokens > valores soltos) continua a mesma, só a
   fonte da verdade da paleta mudou. Simplificação aceita: o handoff tem 2 tons de
   verde (green-800 pra texto/título, green-700 pra CTA) — aqui os dois colapsam
   num --t26-heading só (green-700, #004F3D), usado tanto em título quanto botão,
   pra não precisar tocar toda regra de componente nesta fase (diferença visual
   entre os 2 tons é mínima). */
body[data-theme-build="2026"] {
  --t26-bg: #FAF7F2;              /* --ov-cream-100 */
  --t26-surface: #ffffff;
  --t26-surface-sunken: #F5EFE4;  /* --ov-cream-200 — igual ao fundo real do .carrinho-fixo original */
  --t26-text: #2A1F17;            /* --ov-ink — igual à cor de texto real do body original */
  --t26-text-muted: #4a3d35;      /* --ov-ink-soft */
  --t26-text-faint: #7A6E65;      /* --ov-ink-mute */
  --t26-heading: #004F3D;         /* --ov-green-700 — cor primária real da marca */
  --t26-accent: #E8732C;          /* --ov-orange — ofertas */
  --t26-accent-soft: #FFF1E5;     /* --ov-orange-soft */
  --t26-accent-2: #70a60f;        /* --ov-leaf — ações positivas/CTA */
  --t26-accent-2-soft: #EAF7F0;   /* --ov-leaf-soft */
  --t26-danger: #C0392B;          /* --ov-tomato */
  --t26-danger-soft: #F6E3DF;
  --t26-line: #E8DDD0;            /* --ov-line */
  --t26-shadow-color: 42, 31, 23; /* rgb(--ov-ink), usado nas sombras da escala abaixo */
  --t26-whatsapp: #25D366;        /* verde oficial do WhatsApp — igual ao gradiente que já existia no botão real */
  /* FASE 1.6 (29/07) — tokens novos do pacote de mockups (Claude web): dourado como
     acento (abas ativas, CTAs secundários, bordas de destaque) e um 2º verde mais
     claro pra estados "ativo" que não devem competir com o --t26-heading principal. */
  --t26-ouro: #C89B3C;
  --t26-verde-claro: #0C6B54;
  --t26-salvia: #8FA68E;

  /* ---------- Tokens: tipografia (Inter/Fraunces, do handoff) ---------- */
  --t26-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --t26-font-body: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --t26-font-mono: 'Courier New', monospace;

  /* ---------- Tokens: espaçamento (escala 4px, igual ao handoff --sp-*) ---------- */
  --t26-space-1: 0.25rem;  /* 4px  — gaps mínimos (ícone+texto) */
  --t26-space-2: 0.5rem;   /* 8px  — gap entre elementos pequenos */
  --t26-space-3: 0.75rem;  /* 12px — padding interno compacto (badges, inputs pequenos) */
  --t26-space-4: 1rem;     /* 16px — padding padrão de componente */
  --t26-space-5: 1.25rem;  /* 20px — padding de cards */
  --t26-space-6: 1.5rem;   /* 24px — gap entre cards na grade */
  --t26-space-8: 2rem;     /* 32px — respiro de seção */
  --t26-space-10: 2.5rem;  /* 40px — respiro de hero/topo */

  /* ---------- Tokens: raio de borda (igual ao handoff --r-*) ---------- */
  --t26-radius-sm: 0.5rem;   /* 8px  — inputs, botões pequenos */
  --t26-radius-md: 0.75rem;  /* 12px — botões de forma de venda, avisos */
  --t26-radius-lg: 1.125rem; /* 18px — cards, modais */
  --t26-radius-pill: 999px;  /* botões de ação, badges, pills */

  /* ---------- Tokens: elevação (valores exatos de --shadow-* do handoff) ---------- */
  --t26-shadow-sm: 0 1px 2px rgba(var(--t26-shadow-color), 0.06), 0 1px 1px rgba(var(--t26-shadow-color), 0.04);
  --t26-shadow-md: 0 4px 14px rgba(var(--t26-shadow-color), 0.08), 0 2px 4px rgba(var(--t26-shadow-color), 0.04);
  --t26-shadow-lg: 0 12px 32px rgba(var(--t26-shadow-color), 0.12), 0 4px 8px rgba(var(--t26-shadow-color), 0.06);
}

/* Modo escuro real do site alterna via classe .dark-mode no body
   (aplicarConfiguracoesNoSite() em app.js) — não é prefers-color-scheme.
   Valores vindos do bloco [data-theme="dark"] do handoff (usado na V2). */
body[data-theme-build="2026"].dark-mode {
  --t26-bg: #14110d;
  --t26-surface: #1a1612;
  --t26-surface-sunken: #1f1a14;
  --t26-text: #f3ebdb;
  --t26-text-muted: #d6cab2;
  --t26-text-faint: #9a8c75;
  --t26-heading: #8fbb8a;
  --t26-accent: #f0985a;
  --t26-accent-soft: #3a2f23;
  --t26-accent-2: #8fbb8a;
  --t26-accent-2-soft: #1f2a1a;
  --t26-danger: #e0796a;
  --t26-danger-soft: #3a2f23;
  --t26-line: #3a2f23;
  --t26-shadow-color: 0, 0, 0;
  --t26-whatsapp: #2fd374;
}

/* ---------- Base tipográfica/cor ---------- */
body[data-theme-build="2026"] {
  background: var(--t26-bg);
  color: var(--t26-text);
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] h1,
body[data-theme-build="2026"] h2,
body[data-theme-build="2026"] h3,
body[data-theme-build="2026"] h4 {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
}

/* Barra de assinatura no topo — sinal visual de que é o novo tema */
body[data-theme-build="2026"] {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--t26-accent), var(--t26-accent-2)) 1;
}

/* ============================================================
   HEADER + HERO (header, carrossel recompostos como um bloco único)
   ============================================================ */
body[data-theme-build="2026"] .header {
  background: var(--t26-surface);
  color: var(--t26-heading);
  border-bottom: 2px solid var(--t26-heading);
  padding: var(--t26-space-10) var(--t26-space-6) var(--t26-space-5) !important;
  margin-bottom: 0;
}
body[data-theme-build="2026"] .logo-container {
  margin-bottom: var(--t26-space-2);
}
body[data-theme-build="2026"] .header-subtitle-main {
  font-family: var(--t26-font-display);
  font-weight: 800;
  color: var(--t26-heading);
  letter-spacing: -0.015em;
  font-size: 1.55rem !important;
  line-height: 1.15;
}
body[data-theme-build="2026"] .header-subtitle-tags {
  color: var(--t26-accent);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  margin-top: var(--t26-space-2);
}
body[data-theme-build="2026"] .header-subtitle-tags .sep {
  color: var(--t26-text-faint);
}
/* ---------- Busca fixa (FASE 1.2, 28/07 — V1 Refinado) ----------
   #searchModal/#searchInput/#searchResults são os MESMOS elementos e funções de
   sempre (togglePesquisa()/fecharPesquisa()/buscarProdutos() em app.js, intocado)
   — aqui só param de se comportar como overlay modal (position:fixed;inset:0;
   background:rgba(0,0,0,.8)) e viram uma barra estática sempre visível abaixo do
   header, com cabeçalho (título+fechar) escondido por não fazer mais sentido
   quando não existe "abrir/fechar". Em telas muito estreitas onde uma barra fixa
   não coubesse bem, cai de volta pro tratamento de modal via media query. */
body[data-theme-build="2026"] .search-modal {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  animation: none !important;
  display: block !important;
  z-index: auto !important;
  padding: 0 var(--t26-space-5);
  margin: var(--t26-space-2) 0 var(--t26-space-3);
}
body[data-theme-build="2026"] .search-modal-content {
  background: transparent;
  border-radius: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  animation: none !important;
}
body[data-theme-build="2026"] .search-modal-header {
  display: none; /* sem "abrir/fechar" numa barra sempre visível — título/botão de fechar ficam redundantes */
}
body[data-theme-build="2026"] .search-input-container {
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--t26-space-2);
  background: var(--t26-surface);
  border: 1.5px solid var(--t26-line);
  border-radius: var(--t26-radius-md);
  padding: 0.6rem var(--t26-space-4);
  box-shadow: var(--t26-shadow-sm);
}
body[data-theme-build="2026"] .search-input-container .search-input-icon {
  position: static;
  color: var(--t26-heading);
  order: -1;
}
body[data-theme-build="2026"] #searchInput {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--t26-text);
  font-family: var(--t26-font-body);
  font-size: 0.95rem;
}
body[data-theme-build="2026"] #searchInput:focus {
  outline: none;
}
body[data-theme-build="2026"] .search-results {
  padding: 0;
  max-height: 60vh;
}
body[data-theme-build="2026"] .search-results:not(:empty) {
  margin-top: var(--t26-space-2);
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  border-radius: var(--t26-radius-md);
  box-shadow: var(--t26-shadow-md);
}

/* ---------- Carrossel ----------
   IMPORTANTE (achado do usuário, 2 rodadas): os slides são background-image com
   background-size:cover (não <img>) — são artes prontas com texto e botão desenhados
   dentro da imagem. O CSS original já tem breakpoints de largura/altura calibrados
   pra essa proporção (450px desktop → 360px ≤1024px → 220px ≤768px → 160px no menor
   breakpoint mobile). Minha 1ª tentativa fixou width/height/margin num valor só pra
   todo tamanho de tela — no mobile isso quase virou quadrado (proporção bem diferente
   da arte, cover cortando/esmagando o banner até ficar ilegível). Correção: NÃO mexer
   em width/height/margin — só adicionar a moldura (borda/sombra) por cima do que os
   breakpoints originais já calculam certo. */
body[data-theme-build="2026"] .carrossel {
  border: 1px solid var(--t26-line);
  box-shadow: var(--t26-shadow-lg);
}
body[data-theme-build="2026"] .carrossel-controle {
  background: color-mix(in srgb, var(--t26-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--t26-heading);
  border: 1px solid var(--t26-line);
}

/* ============================================================
   TIRA DE DESTAQUES (horário / pagamento / fidelidade / acompanhar)
   ============================================================
   Achado do usuário: Horário/Pagamento eram texto solto (sem cartão)
   ao lado de Fidelidade (com cartão) — 4 pesos visuais diferentes na
   mesma fileira. .t26-secao é um wrapper novo (só HTML, nenhuma classe/
   ID existente tocada) que agrupa header+content do Horário num único
   item de grid, igual aos outros 3. */
body[data-theme-build="2026"] .informacoes-importantes {
  background: transparent;
}
body[data-theme-build="2026"] .info-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--t26-space-6);
  align-items: stretch;
  background: transparent;
  border-top: none;
  border-bottom: none;
  padding: 0;
  box-shadow: none;
}
body[data-theme-build="2026"] .info-divider {
  display: none; /* o gap do grid já separa visualmente — divisória fica redundante */
}
body[data-theme-build="2026"] .t26-secao,
body[data-theme-build="2026"] .info-pagamento,
body[data-theme-build="2026"] .card-info-extra,
body[data-theme-build="2026"] .cie-link-mini {
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  border-radius: var(--t26-radius-lg);
  padding: var(--t26-space-5);
  box-shadow: var(--t26-shadow-sm);
  margin-top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body[data-theme-build="2026"] .cie-link-mini {
  flex-direction: row; /* é um <button> ícone+texto inline — column empilharia os dois */
  justify-content: center;
  align-items: center;
  gap: var(--t26-space-2);
  text-align: center;
  color: var(--t26-accent-2);
  font-weight: 700;
  cursor: pointer;
}
body[data-theme-build="2026"] .info-title {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
  font-weight: 700;
}
body[data-theme-build="2026"] .info-icon {
  color: var(--t26-accent);
  background: var(--t26-accent-soft);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
}
body[data-theme-build="2026"] .info-days {
  color: var(--t26-text);
  font-weight: 600;
}
body[data-theme-build="2026"] .info-hours,
body[data-theme-build="2026"] .info-text {
  color: var(--t26-text-muted);
}
body[data-theme-build="2026"] .info-pag-valor.verde {
  color: var(--t26-accent-2);
  font-weight: 700;
}
body[data-theme-build="2026"] .cie-icon {
  background: var(--t26-accent-soft);
  color: var(--t26-accent);
  border-radius: 50%;
}
body[data-theme-build="2026"] .cie-icon-pedido {
  background: var(--t26-accent-2-soft);
  color: var(--t26-accent-2);
}
body[data-theme-build="2026"] .cie-titulo {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
  font-weight: 700;
}
body[data-theme-build="2026"] .cie-sub {
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .cie-btn {
  border-radius: var(--t26-radius-pill);
  font-weight: 700;
}
body[data-theme-build="2026"] .cie-btn-pri {
  background: var(--t26-heading);
  color: var(--t26-bg);
}
body[data-theme-build="2026"] .cie-btn-sec {
  background: transparent;
  border: 1.5px solid var(--t26-line);
  color: var(--t26-heading);
}

/* ============================================================
   FOOTER
   ============================================================ */
body[data-theme-build="2026"] .footer {
  background: var(--t26-surface-sunken);
  border-top: 1px solid var(--t26-line);
  color: var(--t26-text-muted);
}
body[data-theme-build="2026"] .footer-brand {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
  font-weight: 800;
  font-size: 1.1rem;
}
body[data-theme-build="2026"] .footer-brand i {
  color: var(--t26-accent-2);
}
body[data-theme-build="2026"] .footer-slogan {
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .footer-divider {
  background: var(--t26-line);
}
body[data-theme-build="2026"] .footer-social a {
  border-radius: var(--t26-radius-pill);
  border: 1px solid var(--t26-line);
  background: var(--t26-surface);
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .footer-social a:hover {
  border-color: var(--t26-accent-2);
  color: var(--t26-accent-2);
}
/* .footer a[href*="wa.me"]/[href*="instagram"] no CSS original usam color:white/#004F3D
   !important — a regra genérica acima não vence por especificidade, precisa mirar
   os mesmos seletores de atributo com !important (achado real: o botão do WhatsApp
   ficava com texto branco sobre fundo branco, invisível). */
body[data-theme-build="2026"] .footer a[href*="wa.me"] {
  background: var(--t26-whatsapp) !important;
  border-color: var(--t26-whatsapp) !important;
  color: var(--t26-bg) !important;
}
body[data-theme-build="2026"] .footer a[href*="wa.me"]:hover {
  background: color-mix(in srgb, var(--t26-whatsapp) 85%, black 10%) !important;
  border-color: color-mix(in srgb, var(--t26-whatsapp) 85%, black 10%) !important;
  color: var(--t26-bg) !important;
}
body[data-theme-build="2026"] .footer a[href*="instagram"] {
  background: var(--t26-surface) !important;
  border-color: var(--t26-line) !important;
  color: var(--t26-heading) !important;
}
body[data-theme-build="2026"] .footer a[href*="instagram"]:hover {
  background: var(--t26-heading) !important;
  border-color: var(--t26-heading) !important;
  color: var(--t26-bg) !important;
}
body[data-theme-build="2026"] .footer-copy {
  color: var(--t26-text-faint);
}

/* ---------- Botão WhatsApp fixo ---------- */
/* .whatsapp-fixed/.whatsapp-btn (posição+forma) não têm regra nenhuma fora do
   <style> inline do index.php padrão — index-tema2026.php nunca inclui esse
   arquivo, então precisa da própria aqui. Mesmo canto/tamanho do site padrão
   (canto superior direito, círculo), só cor via token em vez do gradiente
   hardcoded original. (Corrigido 08/2026: um botão .whatsapp-fixo próprio,
   embaixo à esquerda, tinha saído retangular e com cor errada — usuário pediu
   pra usar o wrapper .whatsapp-fixed de sempre.) */
body[data-theme-build="2026"] .whatsapp-fixed {
  position: fixed;
  top: 130px;
  right: 15px;
  z-index: 1005;
}
body[data-theme-build="2026"] .whatsapp-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t26-bg);
  font-size: 1.2rem;
  text-decoration: none;
  background: var(--t26-whatsapp);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--t26-whatsapp) 70%, black 10%);
  transition: transform 150ms ease, background 150ms ease;
}
body[data-theme-build="2026"] .whatsapp-btn:hover {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--t26-whatsapp) 85%, black 10%);
}

/* ---------- Voltar ao topo ---------- */
body[data-theme-build="2026"] .btn-voltar-topo {
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  color: var(--t26-heading);
  box-shadow: var(--t26-shadow-md);
}

/* ============================================================
   CATÁLOGO — categorias, card de produto, ofertas, urgência
   ============================================================
   Nota de especificidade: app.js injeta em runtime um
   <style id="css-ofertas-dinamico"> com !important e paleta antiga,
   appendado ao <head> DEPOIS deste arquivo — !important sozinho não
   vence quem carrega por último, por isso as regras de oferta abaixo
   usam seletor mais específico (#produtos-container .classe) pra
   vencer por especificidade, não por ordem. Nenhuma linha de app.js
   foi tocada.
   Categorias: checado no banco, 10 das 11 categorias reais têm
   cor='#11a800' idêntica (só Microverdes difere) — não é branding por
   categoria, é sobra de paleta antiga uniforme. Por isso o tema novo
   sobrescreve TODAS, usando o id real #categoriasCarrossel pra vencer
   a regra original com [data-cor]+!important. */
/* FASE 1.6 (29/07) — Opção B do pacote de mockups do usuário: "abas com sublinhado
   dourado". Categorias deixam de ser pills preenchidas e viram abas horizontais sem
   fundo — a aba ativa ganha um sublinhado dourado embaixo (não um preenchimento de
   cor). Substitui a Fase 1.4 (chip neutro com fundo sólido no ativo). */
body[data-theme-build="2026"] .categoria-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--t26-text-faint);
  font-weight: 600;
  font-family: var(--t26-font-body);
  padding-bottom: 0.6rem !important;
}
body[data-theme-build="2026"] #categoriasCarrossel .categoria-btn {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  color: var(--t26-text-faint) !important;
}
body[data-theme-build="2026"] #categoriasCarrossel .categoria-btn.active,
body[data-theme-build="2026"] #categoriasCarrossel .categoria-btn:hover {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--t26-ouro) !important;
  color: var(--t26-heading) !important;
  filter: none !important;
}
body[data-theme-build="2026"] .categorias {
  border-bottom: 2px solid var(--t26-line);
}
/* Subcategorias: chips RETANGULARES (não pílula), fundo creme, com contador de
   produtos (ex: "Verduras 12") — contador ainda não existe no HTML gerado pelo
   app.js (só categoria tem `total_produtos` calculado hoje); pendente decisão do
   usuário sobre adicionar esse cálculo em subcategoria antes de esse contador
   aparecer de fato. Ativo: fundo verde-claro sólido, texto creme. */
body[data-theme-build="2026"] .subcategorias-container .subcategoria-btn,
body[data-theme-build="2026"] [class*="subcategoria-btn"] {
  border-radius: var(--t26-radius-sm);
  font-family: var(--t26-font-body);
  border-width: 1px !important;
  border-color: transparent !important;
  color: var(--t26-text) !important;
  background: var(--t26-surface-sunken) !important;
}
body[data-theme-build="2026"] .subcategoria-btn.active {
  background: var(--t26-verde-claro) !important;
  border-color: var(--t26-verde-claro) !important;
  color: var(--t26-bg) !important;
}

/* ---------- Card de produto: FASE 1.6 (29/07) — Opção C do pacote de mockups do usuário ----------
   Pacote gerado no Claude web (ouroverde-redesign-pacote.zip, "lista compacta
   horizontal"): miniatura pequena (60px) à esquerda, nome+preços empilhados no
   meio, comprar+compartilhar (ícone só, sem texto) numa coluna à direita.
   Substitui a reestruturação anterior desta sessão (quadradinhos empilhados,
   botões em linha própria de largura total) — pedido explícito do usuário pra
   testar essa nova direção. Mesma técnica de `display:contents` em
   `.produto-info` (aprendida/validada mais cedo nesta sessão) pra furar a
   coluna do meio e posicionar comprar/compartilhar como 3ª coluna do grid.
   IMPORTANTE: index-tema2026.php carrega indexstyles.min.css (produção) ANTES
   deste arquivo — e a produção já tem `!important` no `.produto-card` (herdado
   do go-live parcial desta mesma sessão, Fase 1.5). `!important` sempre vence
   sobre não-important, não importa a ordem de carregamento — por isso as
   propriedades estruturais aqui também precisam de `!important` pra vencer o
   que já está em produção. */
body[data-theme-build="2026"] .produto-card {
  display: grid !important;
  grid-template-columns: 60px 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: var(--t26-space-3) !important;
  row-gap: 0.15rem !important;
  align-items: center !important;
  padding: var(--t26-space-3) var(--t26-space-4) !important;
  min-height: 0 !important;
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  border-radius: var(--t26-radius-lg);
  box-shadow: var(--t26-shadow-sm);
  overflow: visible;
  position: relative;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
body[data-theme-build="2026"] .produto-card:hover {
  border-color: var(--t26-accent-2);
  box-shadow: var(--t26-shadow-md);
  transform: translateY(-2px);
}
body[data-theme-build="2026"] .produto-card .produto-imagem-container {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: var(--t26-radius-md);
  border: none;
  margin: 0 !important;
  position: relative;
  overflow: visible;
  background: var(--t26-surface-sunken);
  flex-shrink: 0;
}
body[data-theme-build="2026"] .produto-card .produto-imagem-container picture,
body[data-theme-build="2026"] .produto-card .produto-imagem-container .produto-imagem,
body[data-theme-build="2026"] .produto-card .produto-imagem-container .produto-imagem-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--t26-radius-md);
  overflow: hidden;
}
body[data-theme-build="2026"] .produto-card > .produto-info {
  display: contents !important;
}
body[data-theme-build="2026"] .produto-card .produto-categoria {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body[data-theme-build="2026"] .produto-card .produto-nome {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* lista compacta — nome numa linha só, corta com reticências */
}
body[data-theme-build="2026"] .produto-card .preco-normal {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  font-size: 0.86rem !important;
  margin-bottom: 0 !important;
}
body[data-theme-build="2026"] .produto-card .produto-formas-container {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: 0 !important;
}
body[data-theme-build="2026"] .produto-card .produto-origem,
body[data-theme-build="2026"] .produto-card .urgencia-badge-vendido,
body[data-theme-build="2026"] .produto-card .urgencia-badge-escasso,
body[data-theme-build="2026"] .produto-card .urgencia-barra-wrap {
  grid-column: 2 !important;
  font-size: 0.68rem;
}
/* Comprar/Descrição/Compartilhar viram uma coluna só à direita (mockup Opção C:
   ícones empilhados, sem texto) — spana as 2 linhas do grid (nome + preços) pra
   ficar centralizado verticalmente ao lado da miniatura. O mockup só previu
   Comprar+Compartilhar; produtos com "Descrição" habilitada (3º botão) entram
   na mesma coluna empilhada — ajustar se ficar apertado. */
body[data-theme-build="2026"] .produto-card .botoes-produto,
body[data-theme-build="2026"] .produto-card .linha-comprar-selo {
  grid-column: 3 !important;
  grid-row: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.4rem !important;
  justify-self: end !important;
}
/* Selo orgânico (imagem real, não ícone) — Opção C ancora centralizado na borda
   inferior da miniatura de 60px (peek pra fora da foto), diferente da versão
   anterior (canto superior de uma imagem de 92px). */
body[data-theme-build="2026"] .produto-card > .selo-organico {
  grid-row: 1 / -1 !important;
  grid-column: 1 !important;
  top: auto !important;
  bottom: -6px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 24px !important;
  height: 24px !important;
}
body[data-theme-build="2026"] .produto-nome {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
  font-weight: 600;
}
body[data-theme-build="2026"] .preco-normal {
  color: var(--t26-heading) !important;
  font-family: var(--t26-font-body);
  font-weight: 700 !important;
}
body[data-theme-build="2026"] .produto-origem {
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .oferta-info-badge {
  display: none;
}
/* .badge-oferta-imagem: com a miniatura menor (60px), passa a ficar ACIMA da
   foto (mockup não tem badge de desconto na miniatura, mas o site já mostra
   o -XX% no nome/preço — aqui só evita cobrir o selo orgânico embaixo). */
body[data-theme-build="2026"] #produtos-container .badge-oferta-imagem {
  position: absolute !important;
  top: auto !important;
  bottom: 100% !important;
  left: 0 !important;
  right: auto !important;
  margin-bottom: 0.15rem !important;
  background: var(--t26-accent) !important;
  color: #fff !important;
  border-radius: var(--t26-radius-sm) !important;
  font-size: 0.6rem !important;
  padding: 0.1rem 0.35rem !important;
  z-index: 2;
}

/* ---------- Formas de venda no card — Opção C: texto inline, sem quadradinho ----------
   Mockup mostra "R$17,99 /kg  R$1,50 /un" lado a lado, sem caixa/fundo (mais
   parecido com o `.forma-venda-item` ORIGINAL de produção, que já era uma
   linha horizontal antes desta sessão, do que com os quadradinhos empilhados
   da Fase 1.5). Mesma técnica de seletor de atributo (divs internos sem
   classe própria, geradas por app.js com estilo inline). */
body[data-theme-build="2026"] .formas-venda-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0.6rem !important;
  margin-top: 0 !important;
}
body[data-theme-build="2026"] .forma-venda-item {
  flex: 0 0 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.2rem;
  background: none !important;
  border-left: none !important;
  border: none;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  text-align: left;
}
body[data-theme-build="2026"] .forma-venda-item [style*="justify-content: space-between"],
body[data-theme-build="2026"] .forma-venda-item [style*="gap: 8px"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.2rem !important;
  width: auto;
}
body[data-theme-build="2026"] .forma-venda-item [style*="2c3e50"] {
  color: var(--t26-heading) !important;
  font-family: var(--t26-font-body);
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}
body[data-theme-build="2026"] .forma-venda-item [style*="color: #666"] {
  color: var(--t26-text-faint) !important;
  font-size: 0.68rem !important;
  margin-top: 0;
}
body[data-theme-build="2026"] .forma-venda-item span {
  display: none;
}

/* ---------- .forma-com-oferta: mesma ideia, versão com desconto ---------- */
body[data-theme-build="2026"] .forma-com-oferta [style*="margin-bottom: 6px"] {
  display: none !important;
}
body[data-theme-build="2026"] .forma-com-oferta [style*="align-items: baseline"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.2rem !important;
  width: auto;
}
body[data-theme-build="2026"] .forma-com-oferta [style*="text-decoration: line-through"] {
  display: none !important;
}
body[data-theme-build="2026"] .forma-com-oferta [style*="font-size: 1.1rem"] {
  color: var(--t26-heading) !important;
  font-family: var(--t26-font-body);
  font-size: 0.78rem !important;
}
body[data-theme-build="2026"] .forma-com-oferta [style*="text-align: right"] {
  text-align: left !important;
}
body[data-theme-build="2026"] .forma-com-oferta [style*="economia"],
body[data-theme-build="2026"] .forma-com-oferta [style*="color: #70a60f"] {
  display: none !important;
}
body[data-theme-build="2026"] .forma-com-oferta [style*="color: #888"] {
  color: var(--t26-text-faint) !important;
  font-size: 0.68rem !important;
}

/* ============================================================
   FASE 2 — "Em oferta hoje" (destaque) + "Mais vendidos"
   ============================================================
   HTML gerado pelo <script> em index-tema2026.php (só leitura de dado real via
   `produtos`/`_maisVendidosIds`/`abrirModalCompra()` já expostos por app.js —
   nenhuma linha de app.js/ui.js criada ou alterada). */
body[data-theme-build="2026"] .t26-sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--t26-space-5);
  margin: var(--t26-space-6) 0 var(--t26-space-3);
}
body[data-theme-build="2026"] .t26-sec-title h3 {
  font-family: var(--t26-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--t26-heading);
  letter-spacing: -0.01em;
}
body[data-theme-build="2026"] .t26-destaque-card {
  margin: 0 var(--t26-space-5);
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  border-radius: var(--t26-radius-lg);
  overflow: hidden;
  box-shadow: var(--t26-shadow-md);
}
body[data-theme-build="2026"] .t26-destaque-img {
  height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t26-surface-sunken);
  color: var(--t26-text-faint);
  font-size: 2.5rem;
}
body[data-theme-build="2026"] .t26-destaque-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-theme-build="2026"] .t26-destaque-badge {
  position: absolute;
  top: var(--t26-space-3);
  left: var(--t26-space-3);
  background: var(--t26-accent);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: var(--t26-radius-sm);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body[data-theme-build="2026"] .t26-destaque-organico {
  position: absolute;
  top: var(--t26-space-3);
  right: var(--t26-space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--t26-heading);
  padding: 0.25rem 0.6rem;
  border-radius: var(--t26-radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
}
body[data-theme-build="2026"] .t26-destaque-info {
  padding: var(--t26-space-4);
}
body[data-theme-build="2026"] .t26-destaque-nome {
  font-family: var(--t26-font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .t26-destaque-origem {
  font-size: 0.75rem;
  color: var(--t26-text-faint);
  margin-top: 0.15rem;
}
body[data-theme-build="2026"] .t26-destaque-precos {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--t26-space-3);
}
body[data-theme-build="2026"] .t26-destaque-de {
  font-size: 0.8rem;
  color: var(--t26-text-faint);
  text-decoration: line-through;
}
body[data-theme-build="2026"] .t26-destaque-por {
  font-family: var(--t26-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .t26-destaque-unid {
  font-size: 0.75rem;
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .t26-destaque-btn {
  background: var(--t26-heading);
  color: #fff;
  border: none;
  padding: 0.7rem 1.3rem;
  border-radius: var(--t26-radius-md);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--t26-shadow-sm);
}
body[data-theme-build="2026"] .t26-destaque-btn:hover {
  background: var(--t26-accent-2);
}

body[data-theme-build="2026"] .t26-mv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--t26-space-3);
  padding: 0 var(--t26-space-5);
}
body[data-theme-build="2026"] .t26-mv-card {
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  border-radius: var(--t26-radius-lg);
  overflow: hidden;
  box-shadow: var(--t26-shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
body[data-theme-build="2026"] .t26-mv-card:hover {
  box-shadow: var(--t26-shadow-md);
  transform: translateY(-2px);
}
body[data-theme-build="2026"] .t26-mv-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t26-surface-sunken);
  color: var(--t26-text-faint);
  font-size: 1.8rem;
}
body[data-theme-build="2026"] .t26-mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-theme-build="2026"] .t26-mv-info {
  padding: var(--t26-space-3);
}
body[data-theme-build="2026"] .t26-mv-nome {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t26-heading);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body[data-theme-build="2026"] .t26-mv-preco {
  font-family: var(--t26-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--t26-heading);
  margin-top: 0.3rem;
}

/* ---------- Grade de produtos ---------- */
body[data-theme-build="2026"] .produtos-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--t26-space-6);
  max-width: 78rem;
}

/* ---------- Botões do card — Opção C: ícone só, empilhados na coluna direita ----------
   Mockup usa botão "Comprar" SEM texto (só ícone de cesta) — como o HTML real
   (app.js) sempre inclui o texto ("Comprar"/"Comprar com desconto"), escondo o
   texto via font-size:0 no botão e reafirmo o tamanho só no ícone <i> — mesma
   técnica já usada nesta sessão pra pílula agroecológico. */
body[data-theme-build="2026"] .btn-comprar {
  background: var(--t26-heading);
  color: var(--t26-bg);
  border-radius: var(--t26-radius-sm);
  border: none;
  font-weight: 700;
}
body[data-theme-build="2026"] .btn-comprar:hover {
  background: var(--t26-accent-2);
}
body[data-theme-build="2026"] .btn-comprar-oferta {
  background: var(--t26-whatsapp) !important;
  color: var(--t26-bg) !important;
  border: none !important;
}
body[data-theme-build="2026"] .btn-comprar-oferta:hover {
  background: color-mix(in srgb, var(--t26-whatsapp) 85%, black 10%) !important;
}
body[data-theme-build="2026"] .btn-descricao {
  background: transparent;
  border: 1.5px solid var(--t26-line);
  color: var(--t26-heading);
  border-radius: 50%;
}
body[data-theme-build="2026"] .btn-descricao-oferta {
  background: transparent !important;
  border: 1.5px solid var(--t26-accent) !important;
  color: var(--t26-accent) !important;
  box-shadow: none !important;
}
body[data-theme-build="2026"] .btn-share {
  background: var(--t26-surface-sunken);
  color: var(--t26-heading);
  border-radius: 50%;
  border-color: var(--t26-line);
}
body[data-theme-build="2026"] .btn-share:hover {
  background: var(--t26-heading);
  color: var(--t26-bg);
  border-color: var(--t26-heading);
}
body[data-theme-build="2026"] .botoes-produto,
body[data-theme-build="2026"] .linha-comprar-selo {
  gap: 0.4rem !important;
}
body[data-theme-build="2026"] .botoes-produto .btn-comprar,
body[data-theme-build="2026"] .linha-comprar-selo .btn-comprar {
  width: 2.1rem !important;
  height: 2.1rem !important;
  min-height: 2.1rem !important; /* produção tem min-height:48px !important no .btn-comprar base — sem isso o botão fica retangular em vez de quadrado */
  padding: 0 !important;
  font-size: 0 !important; /* esconde "Comprar"/"Comprar com desconto" — só o ícone fica */
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
body[data-theme-build="2026"] .botoes-produto .btn-comprar i,
body[data-theme-build="2026"] .linha-comprar-selo .btn-comprar i {
  font-size: 0.95rem !important;
}
body[data-theme-build="2026"] .botoes-produto .btn-descricao {
  width: 1.7rem !important;
  height: 1.7rem !important;
  padding: 0 !important;
  font-size: 0 !important; /* esconde "Descrição" — mockup não previu esse 3º botão, vira ícone compacto */
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
body[data-theme-build="2026"] .botoes-produto .btn-descricao i {
  font-size: 0.7rem !important;
}
body[data-theme-build="2026"] .botoes-produto .btn-share,
body[data-theme-build="2026"] .linha-comprar-selo .btn-share {
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  align-self: auto !important;
}

/* Selo orgânico + pílula agroecológico já existem visualmente — só realinhar cor */
/* Pílula "Agroecológico" — mesma técnica do .selo-organico: position:absolute
   relativo ao .produto-card (funciona mesmo aninhada dentro de
   .botoes-produto/.linha-comprar-selo, que não têm position própria). Nenhum
   produto tem selo_organico E selo_agroecologico juntos (checado ao vivo, 0
   casos) — sem risco de sobrepor. FASE 1.6 (Opção C, mockup): miniatura caiu
   pra 60px e o selo orgânico foi pro embaixo-centro dela — a pílula acompanha
   a mesma lógica, mas como é mais larga que a foto, ancora pela esquerda em vez
   de centralizar (senão o texto ficaria cortado pelas bordas do card). */
body[data-theme-build="2026"] .produto-card .pilula-agroecologico {
  position: absolute !important;
  top: auto !important;
  bottom: -8px !important;
  left: var(--t26-space-4) !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
  padding: 0.15rem 0.45rem !important;
  margin: 0 !important;
  border-radius: var(--t26-radius-pill);
  background: var(--t26-surface);
  border: 1px solid var(--t26-accent-2);
  box-shadow: var(--t26-shadow-sm);
  color: var(--t26-accent-2) !important;
  font-size: 0.56rem !important;
  font-weight: 700;
  z-index: 3;
}
body[data-theme-build="2026"] .produto-card .pilula-agroecologico svg {
  display: none; /* pedido do usuário: sem ícone, só o texto */
}

/* ---------- Badge/borda de oferta — vence o <style> injetado por app.js por especificidade ---------- */
body[data-theme-build="2026"] #produtos-container .produto-oferta,
body[data-theme-build="2026"] #produtos-container .produto-card[data-oferta="true"],
body[data-theme-build="2026"] #produtos-container .oferta-visual-forcada {
  border: 1.5px solid var(--t26-accent-2) !important;
  background: var(--t26-surface) !important;
  box-shadow: var(--t26-shadow-sm) !important;
}
body[data-theme-build="2026"] #produtos-container .produto-oferta:hover {
  border-color: var(--t26-accent) !important;
  box-shadow: var(--t26-shadow-md) !important;
}
body[data-theme-build="2026"] #produtos-container .badge-oferta-forcada {
  background: var(--t26-accent) !important;
  color: var(--t26-bg) !important;
  border-radius: var(--t26-radius-pill) !important;
}

/* ---------- Urgência / escassez ---------- */
body[data-theme-build="2026"] .urgencia-badge-vendido {
  background: var(--t26-accent-soft);
  color: var(--t26-accent);
  border-radius: var(--t26-radius-pill);
  font-weight: 700;
}
body[data-theme-build="2026"] .urgencia-badge-escasso {
  background: color-mix(in srgb, var(--t26-accent) 16%, var(--t26-surface));
  color: var(--t26-accent);
  border-radius: var(--t26-radius-pill);
  font-weight: 700;
}
body[data-theme-build="2026"] .urgencia-barra-label {
  color: var(--t26-text-muted);
}
body[data-theme-build="2026"] .urgencia-barra-bg {
  background: var(--t26-surface-sunken);
  border-radius: var(--t26-radius-pill);
  overflow: hidden;
}
body[data-theme-build="2026"] .urgencia-barra-fill {
  background: var(--t26-accent-2);
}
body[data-theme-build="2026"] .urgencia-barra-fill.media {
  background: var(--t26-accent);
}
body[data-theme-build="2026"] .urgencia-timer {
  color: var(--t26-accent);
  font-weight: 700;
}
body[data-theme-build="2026"] .urgencia-vendo {
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .urgencia-vendo-num {
  color: var(--t26-heading);
}

/* Skeleton de carregamento */
body[data-theme-build="2026"] .skeleton-card {
  background: var(--t26-surface);
  border: 1px solid var(--t26-line);
  border-radius: var(--t26-radius-lg);
}
body[data-theme-build="2026"] .skeleton-categoria,
body[data-theme-build="2026"] .skeleton-nome,
body[data-theme-build="2026"] .skeleton-preco,
body[data-theme-build="2026"] .skeleton-formas,
body[data-theme-build="2026"] .skeleton-btn,
body[data-theme-build="2026"] .skeleton-imagem {
  background: var(--t26-surface-sunken);
}

/* ============================================================
   MODAL DE COMPRA (variações, formas de venda, quantidade)
   ============================================================
   Quase nenhum seletor relevante aqui usa !important no CSS original
   (única exceção: border-width em [data-tem-aviso], sem impacto de cor).
   Pegadinha real: o botão de variação selecionado ganha ESTILO INLINE
   via JS (style="background:#004F3D..."), não classe — inline sempre
   vence <link> externo, então .selecionado precisa de !important aqui
   mesmo sem conflito de especificidade normal. */
body[data-theme-build="2026"] .modal-content {
  background: var(--t26-surface);
  border-radius: var(--t26-radius-lg);
  font-family: var(--t26-font-body);
}
/* ---------- #modalCompra vira bottom-sheet (handoff mockups/v4-outras-telas.jsx) ----------
   BUG REAL (28/07, achado pelo usuário ao vivo): minha 1ª versão usava
   `display:flex !important` no #modalCompra.modal — como !important em CSS externo vence
   style inline mesmo quando o valor é diferente, isso forçava o modal a ficar SEMPRE visível,
   inclusive quando fecharModalCompra() setava style.display='none' pra fechar. O modal nunca
   mais fechava depois de aberto uma vez. Corrigido: não mexo mais em `display` — só posiciono
   .modal-content com position:fixed grudado no fundo da tela, que funciona igual tanto com o
   .modal pai em display:block (aberto) quanto display:none (fechado, container todo some
   independente de como o filho está posicionado). Handle de arrastar é ::before (decorativo,
   zero HTML/JS novo). */
body[data-theme-build="2026"] #modalCompra.modal {
  background: rgba(0, 0, 0, 0.55);
  padding: 0 !important;
}
body[data-theme-build="2026"] #modalCompra .modal-content {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  max-width: 560px;
  border-radius: var(--t26-radius-lg) var(--t26-radius-lg) 0 0;
  animation: t26ModalSlideUp 0.25s ease;
}
body[data-theme-build="2026"] #modalCompra .modal-content::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--t26-line);
  border-radius: 2px;
  margin: 0 auto var(--t26-space-4);
}
/* BUG REAL (28/07, achado pelo usuário ao vivo): a animação sobrescrevia o `transform`
   inteiro do elemento durante sua execução — como o transform estático era só
   `translateX(-50%)` (pra centralizar) e o keyframe só tinha `translateY`, o elemento
   perdia a centralização horizontal enquanto a animação rodava, "pulando" de lado em vez
   de simplesmente subir. Corrigido incluindo translateX(-50%) nos dois estados do keyframe. */
@keyframes t26ModalSlideUp {
  from { transform: translateX(-50%) translateY(24px); opacity: 0.6; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
body[data-theme-build="2026"] .modal-header {
  border-bottom: 1px solid var(--t26-line);
}
body[data-theme-build="2026"] .modal-title {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
  font-weight: 700;
}
/* Original é background:#dc3545 (vermelho sólido) — eu só sobrescrevia a cor do ícone antes,
   deixando uma caixa vermelha com ícone apagado por cima. Nos mockups o botão de fechar é
   sempre discreto (sem caixa colorida), então zero o background aqui também. */
body[data-theme-build="2026"] .close-modal {
  background: transparent !important;
  color: var(--t26-text-faint);
  padding: var(--t26-space-2) !important;
}
body[data-theme-build="2026"] .close-modal:hover {
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .form-label {
  color: var(--t26-text);
  font-family: var(--t26-font-body);
  font-weight: 700;
}
body[data-theme-build="2026"] .form-control {
  border: 1.5px solid var(--t26-line);
  border-radius: var(--t26-radius-sm);
  font-family: var(--t26-font-body);
  background: var(--t26-surface-sunken);
  color: var(--t26-text);
}
body[data-theme-build="2026"] .form-control:focus {
  border-color: var(--t26-accent-2);
  outline: none;
}
body[data-theme-build="2026"] .btn {
  border-radius: var(--t26-radius-pill);
  font-family: var(--t26-font-body);
  font-weight: 700;
}
body[data-theme-build="2026"] .btn-primary {
  background: var(--t26-heading);
  color: var(--t26-bg);
}
body[data-theme-build="2026"] .btn-primary:hover {
  background: var(--t26-accent-2);
}
body[data-theme-build="2026"] .btn-secondary {
  background: transparent;
  border: 1.5px solid var(--t26-line);
  color: var(--t26-heading);
}

/* ---------- Variações (cor, tamanho...) ---------- */
body[data-theme-build="2026"] .variacao-btn-compact {
  border: 1.5px solid var(--t26-line);
  border-radius: var(--t26-radius-pill);
  color: var(--t26-text);
  background: var(--t26-surface);
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] .variacao-btn-compact.selecionado {
  background: var(--t26-heading) !important;
  border-color: var(--t26-heading) !important;
  color: var(--t26-bg) !important;
}

/* ---------- Formas de venda (kg / unidade / bandeja...) ----------
   Original empilha .formas-venda-group em coluna no mobile (flex-direction:column) e
   .forma-venda-option não tem largura própria (flex:0 0 auto) — o handoff (V4) quer os 3
   lado a lado, largura igual, mesmo no celular. */
body[data-theme-build="2026"] .formas-venda-group {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--t26-space-2);
}
body[data-theme-build="2026"] .forma-venda-option {
  flex: 1 1 0;
}
body[data-theme-build="2026"] .forma-venda-btn {
  width: 100%;
  border: 1.5px solid var(--t26-line);
  border-radius: var(--t26-radius-md);
  background: var(--t26-surface);
  font-family: var(--t26-font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--t26-space-3) var(--t26-space-1);
}
body[data-theme-build="2026"] .forma-venda-btn.active {
  background: var(--t26-heading) !important;
  border-color: var(--t26-heading) !important;
}
body[data-theme-build="2026"] .fp-sigla {
  color: var(--t26-heading);
  font-family: var(--t26-font-display);
  font-weight: 700;
}
body[data-theme-build="2026"] .fp-preco {
  color: var(--t26-text-muted);
}
body[data-theme-build="2026"] .forma-venda-btn.active .fp-sigla,
body[data-theme-build="2026"] .forma-venda-btn.active .fp-preco {
  color: var(--t26-bg) !important;
}

/* ---------- Controle de quantidade ----------
   Handoff (V4) mostra o stepper centralizado dentro de uma caixa clara — original é só um
   flex row sem fundo/padding próprios. */
body[data-theme-build="2026"] .quantidade-control-group {
  justify-content: center;
  background: var(--t26-surface-sunken);
  border-radius: var(--t26-radius-md);
  padding: var(--t26-space-3);
}
body[data-theme-build="2026"] .quantidade-btn {
  width: 40px;
  height: 40px;
  background: var(--t26-heading);
  color: #fff;
  border-radius: var(--t26-radius-sm);
  border: none;
  flex-shrink: 0;
}
body[data-theme-build="2026"] .quantidade-btn:hover {
  background: var(--t26-accent-2);
  color: var(--t26-bg);
}
body[data-theme-build="2026"] .quantidade-input {
  border: none;
  background: transparent;
  color: var(--t26-heading);
  font-family: var(--t26-font-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-align: center;
  width: 3rem;
}
body[data-theme-build="2026"] .quantidade-info {
  color: var(--t26-text-muted);
}
/* ---------- "Resumo do pedido" (preço unitário + total) — FASE 1.6, Opção C ----------
   Já existe hoje dentro de #quantidadeInfo (função atualizarInformacoesQuantidade em
   app.js), só com estilo INLINE direto (não é HTML novo) — o mockup pede fundo creme
   + borda dourada à esquerda; a caixa do "Total" já tem `border-left:3px solid #004F3D`
   fixo no inline, uso seletor de atributo pra pegar exatamente essa (mesma técnica já
   usada nesta sessão pros quadradinhos de forma de venda). */
body[data-theme-build="2026"] #quantidadeInfo [style*="border-left: 3px solid #004F3D"] {
  background: var(--t26-surface-sunken) !important;
  border-left: 3px solid var(--t26-ouro) !important;
  border-radius: var(--t26-radius-md) !important;
}
body[data-theme-build="2026"] #quantidadeInfo .preco-total {
  font-family: var(--t26-font-display);
  color: var(--t26-heading) !important;
}
body[data-theme-build="2026"] #quantidadeInfo .preco-unitario strong {
  color: var(--t26-text);
}

/* ---------- Forma de venda: cartão com check dourado no ativo — Opção C ----------
   `.forma-venda-btn.active` já preenche em verde sólido (ver acima); só falta o
   ícone de check no canto, que o mockup usa pra reforçar visualmente qual está
   selecionado. Pseudo-elemento — zero HTML novo. */
body[data-theme-build="2026"] .forma-venda-btn {
  position: relative;
}
body[data-theme-build="2026"] .forma-venda-btn.active::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.65rem;
  color: var(--t26-ouro);
}

/* ---------- Aviso de forma de venda (preço simulado/aproximado) — Opção C ----------
   `.aviso-forma-venda` (mostrarAvisoFormaVenda em app.js) já existe e já usa a classe
   (não só inline) — mas cor/borda vêm dinâmicas por `tipo_aviso` (info/warning/danger/
   success). O mockup só cobre o caso de preço simulado (tom dourado suave); aplico esse
   tom pra TODOS os tipos por simplicidade — se precisar diferenciar erro/sucesso de
   verdade depois, isso pode precisar de ajuste fino por tipo. */
body[data-theme-build="2026"] .aviso-forma-venda {
  background: rgba(200, 155, 60, 0.12) !important;
  border: 1px solid rgba(200, 155, 60, 0.35) !important;
  border-left: 1px solid rgba(200, 155, 60, 0.35) !important;
  border-radius: var(--t26-radius-md) !important;
  box-shadow: none !important;
}
body[data-theme-build="2026"] .aviso-forma-venda i {
  color: var(--t26-ouro) !important;
}

/* ============================================================
   CARRINHO (barra fixa inferior) — FASE 1.6 (29/07), Opção C do pacote de
   mockups do usuário: "lista minimalista com rodapé verde sólido".
   ============================================================
   Diferença real do mockup: lá o "carrinho fechado" é um FAB isolado (só
   cesta+badge+total+chevron); aqui o `.carrinho-header` já é uma barra
   unificada (Início/Fidelidade/WhatsApp reaproveitados, Fase A validada ao
   vivo antes desta sessão) — mantida a unificação, só aplicada a paleta verde
   sólido + dourado da Opção C em cima da estrutura existente. */
body[data-theme-build="2026"] .carrinho-fixo {
  border-top: none;
  /* box-shadow foi pro .cf-inner (mesmo motivo do background-color, ver
     comentário lá): o elemento de fora ainda tem o box (com padding-bottom
     do safe-area) mesmo sem cor, e a sombra acompanhava esse box, não o
     conteúdo visível — usuário via uma "sombra transparente" esticando no
     mesmo lugar onde o verde esticava antes do fix #7. */
  box-shadow: none;
}
body[data-theme-build="2026"] .carrinho-header {
  background: var(--t26-heading);
}
body[data-theme-build="2026"] .carrinho-header-icon {
  color: var(--t26-bg);
}
body[data-theme-build="2026"] .carrinho-header-badge {
  background: var(--t26-ouro);
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .carrinho-titulo {
  font-family: var(--t26-font-display);
  color: var(--t26-bg);
  font-weight: 700;
}
body[data-theme-build="2026"] .carrinho-subtitulo {
  color: rgba(250, 247, 242, 0.7);
}
body[data-theme-build="2026"] .carrinho-header-total {
  font-family: var(--t26-font-display);
  color: var(--t26-bg);
  font-weight: 800;
}
body[data-theme-build="2026"] .carrinho-chevron {
  color: var(--t26-ouro);
}
body[data-theme-build="2026"] .carrinho-vazio {
  color: var(--t26-text-faint);
}
/* Corpo (lista + rodapé) mantém fundo claro — só o header (fechado) e o
   rodapé (aberto) ficam verde sólido, como no mockup. */
body[data-theme-build="2026"] .carrinho-conteudo {
  background: var(--t26-surface);
}
body[data-theme-build="2026"] .carrinho-footer-novo {
  background: var(--t26-heading);
  border-top: none;
}
body[data-theme-build="2026"] .carrinho-footer-label {
  color: rgba(250, 247, 242, 0.7);
}
body[data-theme-build="2026"] .carrinho-footer-valor {
  font-family: var(--t26-font-display);
  color: var(--t26-bg);
  font-weight: 800;
}
body[data-theme-build="2026"] .btn-finalizar {
  background: var(--t26-ouro);
  color: var(--t26-heading);
  border-radius: var(--t26-radius-pill);
  font-weight: 700;
  border: none;
}
body[data-theme-build="2026"] .btn-finalizar:disabled {
  background: rgba(250, 247, 242, 0.2);
  color: rgba(250, 247, 242, 0.6);
}

/* ============================================================
   CARRINHO FLUTUANTE — bolha (aprovado via canvas de design, 08/2026)
   ============================================================
   Troca a barra fixa full-width por uma bolha ancorada no canto inferior
   ESQUERDO (WhatsApp reocupou o canto superior direito de sempre, ver acima —
   sem mais conflito de canto), escondida até o primeiro item, com animação de
   "voo" do produto até a bolha ao adicionar (voarParaCarrinho() em
   scripts/app.js). Reaproveita 100% da lógica e da paleta Opção C acima — só
   muda posição/visibilidade/animação, não cor. Os ícones de
   Início/Fidelidade/WhatsApp que viviam no header (.t26-nav-extra, FASE
   A/29-07) foram removidos do markup: não cabem numa bolha pequena e o
   usuário confirmou que não são essenciais.
   base .carrinho-fixo mantém bottom:0 !important — por isso o afastamento da
   borda usa margin-bottom, não bottom. IMPORTANTE: indexstyles.css também força
   `transform: translate3d(0,0,0) !important` no próprio .carrinho-fixo (fix de
   GPU/Safari) — !important sempre vence animação CSS, então scale()/bounce NUNCA
   apareceria se aplicado direto aqui (checado ao vivo: opacity funcionava,
   transform ficava travado em identity). Por isso todo scale/transform-origin
   abaixo mira .cf-inner (wrapper novo dentro de #carrinhoFixo, ver
   index-tema2026.php) em vez do próprio .carrinho-fixo — opacity continua no
   elemento de fora, sem esse problema. */
body[data-theme-build="2026"] .carrinho-fixo {
  right: auto;
  left: 16px;
  /* width FIXA (não "auto"/shrink-to-fit) de propósito — ver bug real abaixo,
     achado ao vivo pelo usuário: com width:auto, fechar o carrinho encolhia a
     LARGURA na hora (shrink-to-fit recalcula instantâneo, sem transition) enquanto
     a ALTURA ainda levava 350ms pra descer (grid-template-rows, base CSS) —
     por um instante virava uma barra verde alta e fina (largura de pílula,
     altura ainda de card aberto) antes de estabilizar. width explícito nos
     dois estados (aqui e na regra da pílula, mais abaixo) permite transition
     de verdade em vez de salto instantâneo, andando junto com a altura. */
  width: min(360px, calc(100vw - 32px));
  margin-bottom: 16px;
  border-radius: var(--t26-radius-lg);
  /* 350ms + a mesma curva do grid-template-rows de .carrinho-conteudo (base
     CSS) — largura e altura andando junto, sem descompasso. !important
     necessário: indexstyles.css tem `.carrinho-fixo.vv-ativo { transition:
     transform 0.3s ease !important; }` (fix de iOS, .vv-ativo é adicionada
     automaticamente por ui.js em todo #carrinhoFixo) — `transition` é
     shorthand, então essa regra SUBSTITUI a declaração inteira, não só a
     parte de transform; sem !important aqui minha transição de width/
     border-radius nunca chega a existir (só o transform, que nem se move
     porque translate3d(0,0,0) também é !important — ver comentário acima).
     translate3d transform não é afetado aqui (não repito no shorthand, então
     ele simplesmente não transiciona — tudo bem, ele nunca muda de valor
     mesmo, é sempre identity). */
  transition: opacity 220ms ease, border-radius 350ms cubic-bezier(.4, 0, .2, 1), width 350ms cubic-bezier(.4, 0, .2, 1) !important;
}
body[data-theme-build="2026"] .carrinho-fixo::before {
  border-radius: var(--t26-radius-lg) var(--t26-radius-lg) 0 0;
}
/* Verde sólido movido pra cá (não fica em .carrinho-fixo): esse elemento
   de fora tem `padding-bottom: env(safe-area-inset-bottom, 0px)` (base
   indexstyles.css, pro carrinho não ficar embaixo da barra de gestos do
   iPhone) — se o verde pintasse .carrinho-fixo direto, essa faixa de
   padding virava uma barra verde esticada visível toda vez que a altura
   efetiva do viewport mudava (barra do navegador escondendo/aparecendo no
   celular — achado real do usuário testando o site padrão; mesmo mecanismo
   se aplica aqui, corrigido preventivamente). .cf-inner não tem esse
   padding. border-radius:inherit acompanha a pílula/card sem duplicar. */
body[data-theme-build="2026"] .cf-inner {
  transform-origin: bottom left;
  transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1);
  background-color: var(--t26-heading);
  border-radius: inherit;
  overflow: hidden;
  box-shadow: 0 -4px 24px -8px rgba(var(--t26-shadow-color), 0.20);
}
/* Bug real (visto ao vivo pelo usuário): com o carrinho fechado (pílula),
   .carrinho-footer-novo (fundo verde escuro) "escapava" pra fora do
   .carrinho-conteudo colapsado (grid-template-rows:0fr + overflow:hidden),
   aparecendo como uma barra verde solta atrás da pílula. overflow:hidden
   normal não bastou porque #carrinhoFixo já está numa camada de composição
   própria (transform:translate3d(...) !important da indexstyles.css) —
   contain:paint força o recorte de verdade nesse cenário, em vez de confiar
   só no overflow. */
body[data-theme-build="2026"] .carrinho-conteudo {
  contain: paint;
}
/* Escondida até o primeiro item — atualizarCarrinho() alterna esta classe */
body[data-theme-build="2026"] .carrinho-fixo.cf-vazio {
  opacity: 0;
  pointer-events: none;
}
body[data-theme-build="2026"] .carrinho-fixo.cf-vazio .cf-inner {
  transform: scale(0.4);
}
/* Fechado (tem item, mas não expandido) = pílula compacta de verdade — só
   ícone+contador+total, sem título/subtítulo/chevron. Abrir (.carrinho-aberto)
   volta ao card normal (border-radius/padding do card, título/chevron visíveis)
   pra caber a lista de itens — não faz sentido uma pílula redonda quando tem
   conteúdo dentro. */
body[data-theme-build="2026"] .carrinho-fixo:not(.cf-vazio):not(.carrinho-aberto) {
  width: 160px;
  border-radius: var(--t26-radius-pill);
}
body[data-theme-build="2026"] .carrinho-fixo:not(.cf-vazio):not(.carrinho-aberto)::before {
  display: none;
}
body[data-theme-build="2026"] .carrinho-fixo:not(.cf-vazio):not(.carrinho-aberto) .carrinho-header {
  padding-right: 16px;
}
body[data-theme-build="2026"] .carrinho-fixo:not(.cf-vazio):not(.carrinho-aberto) .carrinho-header-text,
body[data-theme-build="2026"] .carrinho-fixo:not(.cf-vazio):not(.carrinho-aberto) .carrinho-chevron {
  display: none;
}
body[data-theme-build="2026"] .carrinho-aberto .carrinho-conteudo > .carrinho-conteudo-inner {
  max-height: min(60vh, 420px);
}

/* Pouso estilo "gota n'água": bounce elástico + onda ao adicionar item */
body[data-theme-build="2026"] .carrinho-fixo.cf-bounce .cf-inner {
  animation: cf-bounce-kf 480ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cf-bounce-kf {
  0%   { transform: scale(1); }
  28%  { transform: scale(0.85, 1.16); }
  55%  { transform: scale(1.1, 0.9); }
  78%  { transform: scale(0.96, 1.04); }
  100% { transform: scale(1); }
}
body[data-theme-build="2026"] .cf-ripple {
  position: absolute;
  width: 34px; height: 34px;
  left: 50%; top: 50%; margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--t26-ouro);
  opacity: 0;
  pointer-events: none;
}
body[data-theme-build="2026"] .cf-ripple.cf-ripple-ativo {
  animation: cf-ripple-kf 560ms cubic-bezier(.2, .6, .35, 1);
}
@keyframes cf-ripple-kf {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.3); opacity: 0; }
}
body[data-theme-build="2026"] .carrinho-header-badge.cf-badge-pop {
  animation: cf-badge-pop-kf 420ms ease-out;
}
@keyframes cf-badge-pop-kf {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* Elemento "voador" criado em runtime por voarParaCarrinho() (scripts/app.js) —
   fora da árvore do carrinho de propósito, pra sobreviver a qualquer
   re-render de #carrinhoItens durante o voo. */
.ov-fly-ghost {
  position: fixed;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--t26-ouro, #96702c);
  color: var(--t26-heading, #004F3D);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(22, 36, 26, 0.55);
  z-index: 9999;
  pointer-events: none;
}

/* Item do carrinho — linha enxuta com borda tracejada (mockup: "row-c"),
   ícone de editar em sálvia, remover em vermelho. */
body[data-theme-build="2026"] .carrinho-item-b {
  border-bottom: 1px dashed var(--t26-line);
}
body[data-theme-build="2026"] .cib-leaf {
  background: var(--t26-accent-2-soft);
  color: var(--t26-accent-2);
  border-radius: var(--t26-radius-sm);
}
body[data-theme-build="2026"] .cib-nome {
  color: var(--t26-text);
  font-family: var(--t26-font-body);
  font-weight: 600;
}
body[data-theme-build="2026"] .cib-sub {
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .cib-preco {
  font-family: var(--t26-font-body);
  color: var(--t26-text);
  font-weight: 700;
}
body[data-theme-build="2026"] .cib-btn {
  border-radius: 50%;
  border: none;
  background: transparent;
}
body[data-theme-build="2026"] .cib-edit {
  color: var(--t26-salvia);
}
body[data-theme-build="2026"] .cib-del {
  color: var(--t26-danger);
}
body[data-theme-build="2026"] .cib-edit:hover {
  color: var(--t26-verde-claro);
}
body[data-theme-build="2026"] .cib-del:hover {
  color: var(--t26-danger);
  opacity: 0.7;
}
/* Item esgotado — mantém o alerta reconhecível (vermelho), só realinha o tom */
body[data-theme-build="2026"] .carrinho-item-b.item-inativo {
  background: var(--t26-danger-soft);
}

/* Cabeçalho do carrinho (título/subtítulo truncando com reticências) — mais
   relevante ainda agora que a bolha flutuante (08/2026) é mais estreita que a
   barra full-width antiga. Início/Fidelidade/WhatsApp que viviam aqui dentro
   (FASE A, 27/07) não existem mais neste elemento — ver bloco "CARRINHO
   FLUTUANTE" mais acima e o WhatsApp solto em index-tema2026.php. */
body[data-theme-build="2026"] .carrinho-header {
  gap: var(--t26-space-2);
}
body[data-theme-build="2026"] .carrinho-header-left {
  min-width: 0;
  overflow: hidden;
}
body[data-theme-build="2026"] .carrinho-header-text {
  overflow: hidden;
}
body[data-theme-build="2026"] .carrinho-titulo,
body[data-theme-build="2026"] .carrinho-subtitulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
/* #btnVoltarTopo (voltar ao topo) estava escondido desde a FASE A porque o ícone
   "Início" da barra do carrinho fazia o mesmo papel — esse ícone não existe mais
   (carrinho flutuante, 08/2026), então o botão original volta a aparecer normalmente
   (comportamento padrão de ui.js, sem override aqui). */

/* ============================================================
   CHECKOUT (#modalFinalizar)
   ============================================================
   atualizarResumoPedido() usa html.replace() procurando um trecho
   literal com indentação exata pra injetar o preço com desconto — é
   100% dentro de app.js, nunca tocado. O resumo do pedido é quase todo
   estilo inline gerado pelo JS; não vale brigar com !important contra
   dezenas de inline styles de um bloco que já é dark-green-on-white
   (perto da paleta nova) — o esforço vai no formulário estático. */
body[data-theme-build="2026"] .form-row,
body[data-theme-build="2026"] .form-col {
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] #progressoFormulario .progresso-fill {
  background: linear-gradient(90deg, var(--t26-accent-2), var(--t26-heading));
}
/* Original empilha .formas-entrega-group em coluna no mobile — handoff (V4) quer
   Delivery/Retirada lado a lado mesmo no celular, com ícone+rótulo+subtítulo real. */
body[data-theme-build="2026"] .formas-entrega-group {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--t26-space-3) !important;
}
body[data-theme-build="2026"] .forma-entrega-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: var(--t26-space-4) var(--t26-space-2);
  border: 1.5px solid var(--t26-line);
  border-radius: var(--t26-radius-md);
  background: var(--t26-surface);
  color: var(--t26-text);
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] .forma-entrega-btn i {
  font-size: 1.3rem;
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .forma-entrega-btn .fe-label {
  font-weight: 700;
  font-size: 0.9rem;
}
body[data-theme-build="2026"] .forma-entrega-btn .fe-sub {
  font-size: 0.72rem;
  color: var(--t26-text-faint);
}
body[data-theme-build="2026"] .forma-entrega-btn.active {
  background: var(--t26-heading) !important;
  border-color: var(--t26-heading) !important;
  color: var(--t26-bg) !important;
}
body[data-theme-build="2026"] .forma-entrega-btn.active i,
body[data-theme-build="2026"] .forma-entrega-btn.active .fe-sub {
  color: var(--t26-bg) !important;
  opacity: 0.85;
}
body[data-theme-build="2026"] .cupom-section {
  border: 1.5px dashed var(--t26-line);
  border-radius: var(--t26-radius-lg);
  background: var(--t26-surface-sunken);
}
body[data-theme-build="2026"] .cupom-section-titulo {
  color: var(--t26-heading);
  font-family: var(--t26-font-display);
  font-weight: 700;
}
body[data-theme-build="2026"] .cupom-input {
  border: 1.5px solid var(--t26-line);
  border-radius: var(--t26-radius-sm);
  background: var(--t26-surface);
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] .cupom-input.valido {
  border-color: var(--t26-accent-2) !important;
  background: var(--t26-accent-2-soft) !important;
  color: var(--t26-heading) !important;
}
body[data-theme-build="2026"] .cupom-btn-aplicar {
  background: var(--t26-heading);
  color: var(--t26-bg);
  border-radius: var(--t26-radius-sm);
  font-weight: 700;
}
body[data-theme-build="2026"] .resumo-desconto-badge {
  background: var(--t26-accent);
  color: var(--t26-bg);
  border-radius: var(--t26-radius-pill);
}
body[data-theme-build="2026"] #lembrarDados {
  accent-color: var(--t26-accent-2);
}
/* Estados de cupom (handoff V7) — original é só texto colorido (sem fundo/borda);
   só 2 estados reais existem em app.js (mostrarFeedbackCupom('sucesso'|'erro', ...)) —
   o 4º estado do mockup ("cupom detectado") não corresponde a nenhum código real, não
   inventado aqui. */
body[data-theme-build="2026"] .cupom-feedback:not(:empty) {
  margin-top: var(--t26-space-2);
  padding: var(--t26-space-3);
  border-radius: var(--t26-radius-md);
  font-weight: 600;
}
body[data-theme-build="2026"] .cupom-feedback.sucesso {
  background: var(--t26-accent-2-soft) !important;
  color: var(--t26-accent-2) !important;
  border: 1px solid color-mix(in srgb, var(--t26-accent-2) 40%, transparent);
}
body[data-theme-build="2026"] .cupom-feedback.erro {
  background: var(--t26-danger-soft) !important;
  color: var(--t26-danger) !important;
  border: 1px solid color-mix(in srgb, var(--t26-danger) 40%, transparent);
}

/* ============================================================
   POLISH — exit-intent, PWA, avaliação, duplicata, inativos
   ============================================================
   Seletores do exit-popup não têm !important no CSS original —
   território limpo. */
body[data-theme-build="2026"] .exit-popup {
  border-radius: var(--t26-radius-lg);
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] .exit-popup-topo {
  background: linear-gradient(135deg, var(--t26-heading) 0%, var(--t26-accent-2) 100%);
}
body[data-theme-build="2026"] .exit-popup-tag {
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] .exit-popup-titulo {
  font-family: var(--t26-font-display);
  color: var(--t26-heading);
}
body[data-theme-build="2026"] .exit-popup-titulo span {
  color: var(--t26-accent);
}
body[data-theme-build="2026"] .exit-popup-subtitulo {
  color: var(--t26-text-muted);
}
body[data-theme-build="2026"] .exit-popup-cupom-box {
  background: var(--t26-accent-2-soft);
  border: 2px dashed var(--t26-accent-2);
  border-radius: var(--t26-radius-md);
}
body[data-theme-build="2026"] .exit-popup-cupom-codigo {
  color: var(--t26-heading);
  font-family: var(--t26-font-mono);
}
body[data-theme-build="2026"] .exit-popup-beneficio {
  background: var(--t26-surface-sunken);
  border-color: var(--t26-line);
  color: var(--t26-text-muted);
}
body[data-theme-build="2026"] .exit-popup-btn-principal {
  background: var(--t26-whatsapp);
  border-radius: var(--t26-radius-pill);
  font-family: var(--t26-font-body);
}
body[data-theme-build="2026"] .exit-popup-btn-fechar {
  color: var(--t26-text-faint);
  font-family: var(--t26-font-body);
}

/* Fase 9 (cutover) entra aqui embaixo, sempre escopada
   em body[data-theme-build="2026"]. */