/* Criado, desenvolvido, testado, abandonado, rejeitado, recuperado e testado fonte vozes da minha cabeça - William Tassi Moreira */
/* 2.18.6 - VISUAL DA LOJA NAS PÁGINAS ABERTAS (sem login): vitrine, tela de entrada, cadastro e página de início.
   Antes o visual escolhido em Empresa e site > Visual da loja só aparecia DENTRO da loja (depois de entrar), por isso
   o William trocava o visual e "as cores não mudavam". Agora as páginas abertas seguem o mesmo visual.
   Quem liga: visual-loja.js (põe <html data-loja-visual="..."> e <body class="vl">). Os visuais de dentro da loja
   continuam em loja/loja-temas.css. As variáveis vão com !important porque o marca.js grava as cores da marca
   direto no <html> e passaria por cima. "padrao" e "site" não mudam nada (ficam com as cores da marca). */

/* ---------- cores de cada visual ---------- */
html[data-loja-visual="ouro"] {
  --bg: #0a0a0c !important; --bg-alt: #17171a !important; --surface: #141417 !important; --ink: #f3ead2 !important;
  --ink-soft: #a89f86 !important; --line: #2c2720 !important; --primary: #050506 !important; --primary-dark: #050506 !important;
  --accent: #e2b84a !important; --accent-dark: #b8861b !important; --accent-soft: rgba(226,184,74,.18) !important;
  --vl-fundo: radial-gradient(900px 420px at 85% -10%, rgba(226,184,74,.16), transparent 65%), #0a0a0c;
  --vl-topo: linear-gradient(180deg, #17171a, #050506); --vl-topo-borda: rgba(226,184,74,.45);
  --vl-faixa: linear-gradient(90deg, #8a6212, #fff3c4, #8a6212); --vl-faixa-txt: #1a1405;
  --vl-botao: linear-gradient(135deg, #fbeaa0, #e2b84a, #b8861b); --vl-botao-txt: #1a1405; --vl-brilho: 0 6px 20px rgba(226,184,74,.30);
  --vl-cartao: #141417; --vl-destaque: #e2b84a;
}
html[data-loja-visual="vidro"] {
  --bg: #eef1f8 !important; --bg-alt: rgba(255,255,255,.85) !important; --surface: rgba(255,255,255,.72) !important; --ink: #141826 !important;
  --ink-soft: #5b6178 !important; --line: rgba(20,24,38,.10) !important; --accent: #ffcf4a !important; --accent-dark: #e09a1a !important; --accent-soft: rgba(255,207,74,.25) !important;
  --vl-fundo: radial-gradient(circle at 8% 0, rgba(255,233,87,.55), transparent 50%), radial-gradient(circle at 100% 8%, rgba(140,156,255,.55), transparent 52%), radial-gradient(circle at 50% 100%, rgba(255,140,200,.30), transparent 55%), #eef1f8;
  --vl-topo: rgba(14,16,28,.82); --vl-topo-borda: rgba(255,255,255,.15);
  --vl-faixa: rgba(255,255,255,.6); --vl-faixa-txt: #141826;
  --vl-botao: linear-gradient(135deg, #ffe957, #ffb04a); --vl-botao-txt: #141826; --vl-brilho: 0 8px 22px rgba(255,176,74,.35);
  --vl-cartao: rgba(255,255,255,.72); --vl-destaque: #e09a1a; --vl-vidro: blur(14px) saturate(1.4);
}
html[data-loja-visual="neon"] {
  --bg: #070812 !important; --bg-alt: #0f1224 !important; --surface: #0d1020 !important; --ink: #e9edff !important;
  --ink-soft: #8d96bd !important; --line: #1c2244 !important; --primary: #0a0c1c !important; --primary-dark: #0a0c1c !important;
  --accent: #00e5ff !important; --accent-dark: #00b8d4 !important; --accent-soft: rgba(0,229,255,.16) !important;
  --vl-fundo: radial-gradient(900px 480px at 85% -10%, rgba(177,75,255,.20), transparent 65%), radial-gradient(800px 420px at 0% 10%, rgba(0,229,255,.12), transparent 60%), #070812;
  --vl-topo: linear-gradient(90deg, #0a0c1c, #140a2c); --vl-topo-borda: rgba(177,75,255,.5);
  --vl-faixa: linear-gradient(90deg, #00e5ff, #7b6bff 55%, #b14bff); --vl-faixa-txt: #fff;
  --vl-botao: linear-gradient(90deg, #00e5ff, #7b6bff 55%, #b14bff); --vl-botao-txt: #fff; --vl-brilho: 0 0 18px rgba(0,229,255,.40), 0 0 34px rgba(177,75,255,.25);
  --vl-cartao: #0d1020; --vl-destaque: #00e5ff;
}
html[data-loja-visual="platina"] {
  --bg: #f5f5f7 !important; --bg-alt: #fff !important; --surface: #fff !important; --ink: #1d1d1f !important;
  --ink-soft: #6e6e73 !important; --line: #e3e3e8 !important; --accent: #1d1d1f !important; --accent-dark: #000 !important; --accent-soft: #ececf0 !important;
  --vl-fundo: linear-gradient(180deg, #fbfbfd, #f0f0f3);
  --vl-topo: linear-gradient(180deg, #3a3a3c, #1d1d1f); --vl-topo-borda: #c7c7cc;
  --vl-faixa: #1d1d1f; --vl-faixa-txt: #f5f5f7;
  --vl-botao: linear-gradient(180deg, #48484a, #1d1d1f); --vl-botao-txt: #fff; --vl-brilho: 0 8px 20px rgba(0,0,0,.18);
  --vl-cartao: #fff; --vl-destaque: #1d1d1f;
}
html[data-loja-visual="champanhe"] {
  --bg: #f6f1e8 !important; --bg-alt: #fffdf9 !important; --surface: #fffdf9 !important; --ink: #2a231e !important;
  --ink-soft: #7a6d62 !important; --line: #e8dccb !important; --accent: #c09553 !important; --accent-dark: #9c7536 !important; --accent-soft: #f3e6c8 !important;
  --vl-fundo: radial-gradient(900px 400px at 90% -10%, rgba(216,185,127,.30), transparent 60%), #f6f1e8;
  --vl-topo: linear-gradient(180deg, #2b221d, #191412); --vl-topo-borda: #c09553;
  --vl-faixa: #1f1916; --vl-faixa-txt: #f3e6c8;
  --vl-botao: linear-gradient(135deg, #f3e6c8, #d8b97f, #c09553); --vl-botao-txt: #2a231e; --vl-brilho: 0 8px 20px rgba(192,149,83,.30);
  --vl-cartao: #fffdf9; --vl-destaque: #9c7536; --vl-titulo: "Playfair Display", Georgia, serif;
}
html[data-loja-visual="aurora"] {
  --bg: #fbf8ff !important; --bg-alt: #fff !important; --surface: #fff !important; --ink: #1d1530 !important;
  --ink-soft: #6b5f85 !important; --line: #ece4fb !important; --accent: #8b5cf6 !important; --accent-dark: #6d3fe0 !important; --accent-soft: #efe6ff !important;
  --vl-fundo: radial-gradient(900px 420px at 100% -10%, rgba(255,79,154,.14), transparent 60%), radial-gradient(800px 400px at 0 0, rgba(255,233,87,.22), transparent 60%), #fbf8ff;
  --vl-topo: #150f24; --vl-topo-borda: #8b5cf6;
  --vl-faixa: linear-gradient(90deg, #ffe957, #ff9f43, #ff4f9a, #8b5cf6, #ffe957); --vl-faixa-txt: #1d1530;
  --vl-botao: linear-gradient(120deg, #ff9f43, #ff4f9a, #8b5cf6); --vl-botao-txt: #fff; --vl-brilho: 0 8px 22px rgba(139,92,246,.35);
  --vl-cartao: #fff; --vl-destaque: #8b5cf6;
}

/* ---------- onde as cores entram (só com visual diferente do Padrão e do "Igual ao site") ---------- */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl { background: var(--vl-fundo) fixed; color: var(--ink); }
/* topo escuro: vitrine, página de início e a faixa da tela de entrada */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-top,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl > header,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .faixa { background: var(--vl-topo); border-bottom: 1px solid var(--vl-topo-borda); backdrop-filter: var(--vl-vidro, none); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .faixa { border-bottom: 0; border-right: 1px solid var(--vl-topo-borda); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .faixa h1 span,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .faixa .logo .dot { color: var(--vl-destaque); }
/* faixa de aviso */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-aviso { background: var(--vl-faixa); background-size: 300% 100%; color: var(--vl-faixa-txt); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-aviso a { color: var(--vl-faixa-txt); }
html[data-loja-visual="aurora"] body.vl .v-aviso { animation: vl-faixa 10s linear infinite; }
@keyframes vl-faixa { from { background-position: 0 0; } to { background-position: 300% 0; } }
/* botões principais */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .btn-primary,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl button.entrar { background: var(--vl-botao); color: var(--vl-botao-txt); border-color: transparent; box-shadow: var(--vl-brilho); transition: transform .15s ease, filter .2s; }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .btn-primary:hover,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl button.entrar:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* cartões e caixas */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-card,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-filtros,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-modal-box,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl a.op,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .card,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .escolha button { background: var(--vl-cartao); border-color: var(--line); color: var(--ink); backdrop-filter: var(--vl-vidro, none); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-card:hover,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl a.op:hover { border-color: var(--vl-destaque); box-shadow: var(--vl-brilho); transform: translateY(-4px); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-card-foto { margin: 8px; border-radius: 10px; border: 0; overflow: hidden; } /* foto em "vitrine" clara, fica bem nos escuros */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .v-marca { color: var(--vl-destaque); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl a.op.destaque { background: var(--vl-topo); border-color: var(--vl-destaque); color: #fff; }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl a.op.destaque .ic { background: var(--vl-botao); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .ic { background: var(--accent-soft); }
/* campos */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl input,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl select,
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl textarea { background: var(--bg-alt); color: var(--ink); border-color: var(--line); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .abas button[aria-selected="true"] { border-bottom-color: var(--vl-destaque); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.vl .links a { color: var(--ink); }
/* títulos com letra elegante (Champanhe) */
html[data-loja-visual="champanhe"] body.vl h1, html[data-loja-visual="champanhe"] body.vl h2, html[data-loja-visual="champanhe"] body.vl .v-nome { font-family: var(--vl-titulo); }

/* ---------- faixa da prévia ("só você está vendo") ---------- */
.vl-previa { position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 9999; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: center;
  background: #111; color: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.35); font: 14px/1.3 system-ui, sans-serif; max-width: calc(100vw - 24px); }
.vl-previa b { color: #ffe957; }
.vl-previa a, .vl-previa button { color: #111; background: #ffe957; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.vl-previa button { background: #fff; }
@media (prefers-reduced-motion: reduce) { html[data-loja-visual] body.vl * { animation: none !important; transition: none !important; } }