/* ═══════════════════════════════════════════════════════════════
   Tema OUTUBRO ROSA da loja online (02/10/2026 → 31/10/2026).
   Só vale com a classe .tema-outubro-rosa no <html>, que o servidor (tema.js) põe sozinho durante o
   período — fora dele este arquivo nem é carregado. Nenhum JS da loja foi alterado: o que o JS pinta
   com cor fixa (style="…#003F7F…") é trocado aqui pelo seletor de atributo.
   Paleta (contraste conferido): vinho #4A0E2E no lugar do azul-marinho, rosa #E64980 no lugar do
   laranja, framboesa #A61E4D no lugar do azul; rosa-claro #FFF0F6 · #FFDEEB · borda #FCC2D7.
   ═══════════════════════════════════════════════════════════════ */
:root.tema-outubro-rosa {
  --tr-rosa: #E64980;
  --tr-rosa-forte: #D6336C;
  --tr-framboesa: #A61E4D;
  --tr-vinho: #4A0E2E;
  --tr-claro: #FFF0F6;
  --tr-claro2: #FFDEEB;
  --tr-borda: #FCC2D7;

  /* desktop (styles2.css) e página de produto (/produto/…) */
  --azul: #A61E4D;
  --azul-claro: #FFF0F6;
  --laranja: #E64980;
  --laranja-hover: #D6336C;
  --bg: #FFF7FA;

  /* celular (mobile.css) */
  --m-navy: #4A0E2E;
  --m-orange: #E64980;
  --m-orange-press: #D6336C;
  --m-bg: #FFF7FA;
}

/* ───────── Faixa do Outubro Rosa (desktop e página de produto) ───────── */
.tema-faixa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 7px 16px; text-align: center;
  background: linear-gradient(90deg, #FFDEEB, #FFF0F6 50%, #FFDEEB);
  border-bottom: 1px solid #FCC2D7;
  color: #A61E4D; font: 600 13.5px/1.4 Manrope, -apple-system, "Segoe UI", Arial, sans-serif;
}
.tema-faixa b { font-weight: 800; }
.tema-faixa .tema-laco { flex: none; display: block; }
@media (max-width: 760px) {
  .tema-faixa-desktop { display: none !important; }   /* no app-shell do celular a faixa vai no cabeçalho */
  .tema-faixa { font-size: 12.5px; padding: 6px 12px; }
}

/* ───────── Celular: faixa dentro do cabeçalho vinho de cada tela ───────── */
.tema-outubro-rosa #mobile-root .m-head::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32' width='11' height='15'%3E%3Cpath d='M8.4 29.2 15.4 14.4C17 11 16.2 6 12 6S7 11 8.6 14.4' fill='none' stroke='%23F783AC' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.6 14.4 15.6 29.2' fill='none' stroke='%234A0E2E' stroke-width='6.4' stroke-linecap='round'/%3E%3Cpath d='M8.6 14.4 15.6 29.2' fill='none' stroke='%23F783AC' stroke-width='3.8' stroke-linecap='round'/%3E%3C/svg%3E") "  Outubro Rosa · Prevenção também é proteção";
  display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 12px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: #FFC2D8; line-height: 15px;
}

/* ───────── Desktop: o que o styles2.css pinta com cor fixa ───────── */
.tema-outubro-rosa .topbar { border-bottom-color: #FCC2D7; }
.tema-outubro-rosa .conta-credito { background: linear-gradient(135deg, #A61E4D, #E64980); }
.tema-outubro-rosa .preco-login:hover { background: #FFDEEB; }
.tema-outubro-rosa .cart-login { border-color: #FCC2D7; background: #FFF0F6; }
.tema-outubro-rosa .cart-login-titulo { color: #A61E4D; }
.tema-outubro-rosa .cart-login-cad { color: #A61E4D; border-color: #A61E4D; }
.tema-outubro-rosa .cart-login-cad:hover { background: #FFDEEB; }
.tema-outubro-rosa .selo-novo { box-shadow: 0 2px 8px rgba(230, 73, 128, .35); }
.tema-outubro-rosa .btn-add-cart { box-shadow: 0 6px 16px -8px rgba(230, 73, 128, .55); }
.tema-outubro-rosa .toast { background: #4A0E2E; }
.tema-outubro-rosa .subbar-novos { background: #FFDEEB; color: #A61E4D; }
.tema-outubro-rosa .subbar-novos:hover { background: #E64980; color: #fff; }
.tema-outubro-rosa .faixa-inst:hover { background: #8C1940; }
.tema-outubro-rosa .fi-texto span { color: #FFD1E1; }
html.tema-outubro-rosa body { background: #FFF7FA; }   /* página de produto (o index já usa var(--bg)) */
.tema-outubro-rosa .vit-seta:focus-visible, .tema-outubro-rosa .vit-trilho:focus-visible, .tema-outubro-rosa .faixa-inst:focus-visible,
.tema-outubro-rosa .rl-lista a:focus-visible, .tema-outubro-rosa .subbar-inst:focus-visible { outline-color: rgba(166, 30, 77, .35); }
.tema-outubro-rosa .lanc-todos:focus-visible, .tema-outubro-rosa .subbar-novos:focus-visible { outline-color: rgba(230, 73, 128, .35); }

/* página de produto (/produto/…): selos que não usam variável */
.tema-outubro-rosa .badge { background: #FFF0F6; }

/* ───────── Cores fixas do JS (app.js, mobile.js e checkout.js) ─────────
   azul #003F7F → framboesa · marinho #0E1C2B → vinho · laranja #FF7A2E → rosa */
.tema-outubro-rosa [style*="color:#003F7F" i] { color: #A61E4D !important; }
.tema-outubro-rosa [style*="background:#003F7F" i] { background: #A61E4D !important; }
.tema-outubro-rosa [style*="solid #003F7F" i] { border-color: #A61E4D !important; }
.tema-outubro-rosa [style*="linear-gradient(135deg,#003F7F" i] { background: linear-gradient(135deg, #A61E4D, #E64980) !important; }
.tema-outubro-rosa [style*="background:#eaf3ff" i],
.tema-outubro-rosa [style*="background:#f0f6ff" i],
.tema-outubro-rosa [style*="background:#fff7f2" i] { background: #FFF0F6 !important; }

.tema-outubro-rosa [style*="background:#0E1C2B" i] { background: #4A0E2E !important; }
.tema-outubro-rosa [style*="color:#0E1C2B" i] { color: #4A0E2E !important; }
.tema-outubro-rosa [style*="accent-color:#0E1C2B" i] { accent-color: #4A0E2E !important; }
.tema-outubro-rosa [stroke="#0E1C2B" i] { stroke: #4A0E2E; }

.tema-outubro-rosa [style*="background:#FF7A2E" i] { background: #E64980 !important; }
.tema-outubro-rosa [style*="color:#FF7A2E" i] { color: #E64980 !important; }
.tema-outubro-rosa [style*="solid #FF7A2E" i] { border-color: #E64980 !important; }
.tema-outubro-rosa [stroke="#FF7A2E" i] { stroke: #E64980; }

/* celular: cinzas azulados do cabeçalho viram rosados (eles só aparecem sobre o fundo escuro) */
.tema-outubro-rosa #mobile-root [style*="color:#9fb0c2" i] { color: #F3BFD2 !important; }
.tema-outubro-rosa #mobile-root [stroke="#9fb0c2" i] { stroke: #F3BFD2; }
.tema-outubro-rosa #mobile-root [stroke="#cdd6e0" i] { stroke: #F8D7E3; }
.tema-outubro-rosa #mobile-root [style*="color:#7d8da3" i] { color: #DDA0BA !important; }
.tema-outubro-rosa #mobile-root [style*="color:#ffb27a" i] { color: #FFC2D8 !important; }