/* 2.10.5-2 - SEIS VISUAIS "PREMIUM" DA LOJA DO CLIENTE (escolha no painel: Empresa e site > Visual da loja).
   O visual fica em <html data-loja-visual="...">: padrao | ouro | vidro | neon | platina | champanhe | aurora.
   Vai junto com loja-nova.css / loja-nova.js. Para criar outro visual: copiar um bloco abaixo, trocar o nome
   e acrescentar o nome no VISUAIS do loja-nova.js, no painel (empresa.js, VISUAIS_LOJA) e no settings.schemas.ts. */

/* ===================================================================================
   BRILHO EM COMUM (todos menos o Padrão): reflexo que passa no botão, cartões que sobem,
   selo de desconto com reflexo. Quem pediu "menos movimento" no aparelho não vê animação.
   =================================================================================== */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.lj .btn-primary { position: relative; overflow: hidden; border: none; transition: transform .15s ease, box-shadow .2s ease, filter .2s; }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.lj .btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); transition: left .7s ease;
}
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.lj .btn-primary:hover::after { left: 150%; }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) body.lj .btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) .lj-selo-desc { position: relative; overflow: hidden; }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) .lj-selo-desc::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-120%); animation: ljt-reflexo 3.2s ease-in-out infinite;
}
@keyframes ljt-reflexo { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) .product-card.lj-card:hover { transform: translateY(-5px); }
/* área da foto como "vitrine": quadro claro com cantos arredondados dentro do cartão (fica bem nos visuais escuros) */
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) .lj-card-img { margin: 8px; width: calc(100% - 16px); border-radius: 10px; overflow: hidden; }
html[data-loja-visual]:not([data-loja-visual="padrao"]):not([data-loja-visual="site"]) .lj-modo-lista .lj-card-img { margin: 8px; }
@media (prefers-reduced-motion: reduce) {
  html[data-loja-visual] *, html[data-loja-visual] *::after { animation: none !important; transition: none !important; }
}

/* aviso de prévia (?visual=...) */
.lj-previa { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9800; background: #111; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: 0 8px 26px rgba(0,0,0,.35); display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); }
.lj-previa span { line-height: 1.35; }
.lj-previa button { flex-shrink: 0; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: 12px; }
@media (max-width: 860px) { .lj-previa { bottom: 78px; border-radius: 14px; font-size: 12px; padding: 8px 12px; width: calc(100vw - 32px); } }

/* ===================================================================================
   1. PRETO E OURO — luxo escuro, detalhes em dourado brilhante
   =================================================================================== */
html[data-loja-visual="ouro"] {
  --bg: #0a0a0c !important; --bg-alt: #17171b !important; --surface: #141417 !important;
  --ink: #f4efe2 !important; --ink-soft: #a9a290 !important; --line: #2a2823 !important;
  --accent-soft: rgba(212,165,49,.18) !important;
  --lj-cartao: #141417; --lj-o1: #fbeaa0; --lj-o2: #e2b84a; --lj-o3: #a87a17;
  --lj-ouro-grad: linear-gradient(135deg, #fbeaa0 0%, #e2b84a 38%, #b8861b 62%, #f3d77a 100%);
  --lj-sombra: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.55);
  --lj-sombra-forte: 0 0 0 1px rgba(226,184,74,.55), 0 20px 44px rgba(0,0,0,.65), 0 0 34px rgba(226,184,74,.18);
  --lj-verde: #6fe0a8; --lj-verde-fundo: rgba(111,224,168,.10); --lj-vermelho: #ff7a66;
}
html[data-loja-visual="ouro"] body.lj { background: radial-gradient(1100px 500px at 50% -120px, rgba(226,184,74,.10), transparent 70%), #0a0a0c; }
html[data-loja-visual="ouro"] .lj-faixa { background: linear-gradient(90deg, #8a6212, #f3d77a 30%, #fff3c4 50%, #f3d77a 70%, #8a6212); color: #1b1404; }
html[data-loja-visual="ouro"] body.lj .topbar { background: linear-gradient(180deg, #17171a, #050506); border-bottom: 1px solid rgba(226,184,74,.35); box-shadow: 0 6px 24px rgba(0,0,0,.6); }
html[data-loja-visual="ouro"] .lj-busca { background: #1a1a1f; border: 1px solid rgba(226,184,74,.45); }
html[data-loja-visual="ouro"] .lj-busca input[type="search"] { background: transparent; color: #f4efe2; }
html[data-loja-visual="ouro"] .lj-busca button, html[data-loja-visual="ouro"] body.lj .btn-primary { background: var(--lj-ouro-grad); color: #1b1404; box-shadow: 0 6px 18px rgba(226,184,74,.30); }
html[data-loja-visual="ouro"] .lj-deptos { background: #08080a; border-top: 1px solid rgba(226,184,74,.15); border-bottom: 1px solid rgba(226,184,74,.15); }
html[data-loja-visual="ouro"] .lj-depto.ativo { color: var(--lj-o1); border-bottom-color: var(--lj-o2); }
html[data-loja-visual="ouro"] .lj-depto-oferta { color: var(--lj-o1); }
html[data-loja-visual="ouro"] body.lj .lj-car .cart-count, html[data-loja-visual="ouro"] .lj-bolinha { background: var(--lj-ouro-grad); color: #1b1404; }
html[data-loja-visual="ouro"] .product-card.lj-card, html[data-loja-visual="ouro"] .lj-filtros, html[data-loja-visual="ouro"] .lj-faixa-prod { border: 1px solid #24231f; }
html[data-loja-visual="ouro"] .lj-por, html[data-loja-visual="ouro"] .lj-faixa-cab h2, html[data-loja-visual="ouro"] .lj-barra h1 { background: var(--lj-ouro-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-loja-visual="ouro"] .lj-card .lj-de + .lj-por, html[data-loja-visual="ouro"] .lj-det-preco .lj-de + .lj-por { background: linear-gradient(135deg, #ffb199, #ff6a55); -webkit-background-clip: text; background-clip: text; }
html[data-loja-visual="ouro"] .lj-marca { color: var(--lj-o2) !important; }
html[data-loja-visual="ouro"] .lj-fopc.ativo { background: rgba(226,184,74,.16); color: var(--lj-o1); }
html[data-loja-visual="ouro"] .lj-fval.ativo, html[data-loja-visual="ouro"] .lj-modos button.ativo { background: var(--lj-ouro-grad); color: #1b1404; border-color: transparent; }
html[data-loja-visual="ouro"] .lj-selo-novo { background: var(--lj-ouro-grad); color: #1b1404; }
html[data-loja-visual="ouro"] .lj-modal-caixa, html[data-loja-visual="ouro"] .lj-adicionado { border: 1px solid rgba(226,184,74,.4); }
html[data-loja-visual="ouro"] .lj-det-preco { background: #0e0e11; border: 1px solid #24231f; }
html[data-loja-visual="ouro"] .lj-sem-foto { background: linear-gradient(135deg, #f7f4ea, #e8e2cf); }
html[data-loja-visual="ouro"] .lj-baixo { background: #050506; border-top: 1px solid rgba(226,184,74,.3); }
html[data-loja-visual="ouro"] .lj-baixo button.active { color: var(--lj-o1); }
html[data-loja-visual="ouro"] .login-screen { background: radial-gradient(800px 400px at 50% 0, rgba(226,184,74,.16), transparent 70%), #0a0a0c; }
html[data-loja-visual="ouro"] .login-panel { background: #141417; border: 1px solid rgba(226,184,74,.35); box-shadow: 0 20px 60px rgba(0,0,0,.6); }

/* ===================================================================================
   2. VIDRO LUMINOSO — fundo claro com luzes coloridas e painéis de vidro fosco
   =================================================================================== */
html[data-loja-visual="vidro"] {
  --bg: #eef1f8 !important; --line: rgba(30,40,80,.12) !important;
  --lj-cartao: rgba(255,255,255,.66);
  --lj-sombra: 0 8px 30px rgba(40,50,120,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --lj-sombra-forte: 0 22px 50px rgba(40,50,120,.22), inset 0 1px 0 #fff;
}
html[data-loja-visual="vidro"] body.lj {
  background:
    radial-gradient(900px 520px at 8% -6%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%),
    radial-gradient(800px 520px at 100% 4%, rgba(120,140,255,.38), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(255,120,190,.22), transparent 60%), #eef1f8;
  background-attachment: fixed;
}
html[data-loja-visual="vidro"] .lj-faixa { background: rgba(255,255,255,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #1b1d2a; border-bottom: 1px solid rgba(255,255,255,.7); }
html[data-loja-visual="vidro"] body.lj .topbar, html[data-loja-visual="vidro"] .lj-deptos { background: rgba(14,16,28,.74); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }
html[data-loja-visual="vidro"] .lj-busca { box-shadow: 0 6px 22px rgba(0,0,0,.18); }
html[data-loja-visual="vidro"] .lj-busca button, html[data-loja-visual="vidro"] body.lj .btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 100%, #fff 0%), color-mix(in srgb, var(--accent) 55%, #ff9a3c));
  color: #17130a; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-loja-visual="vidro"] .product-card.lj-card, html[data-loja-visual="vidro"] .lj-filtros, html[data-loja-visual="vidro"] .lj-faixa-prod,
html[data-loja-visual="vidro"] .lj-mini, html[data-loja-visual="vidro"] body.lj .card, html[data-loja-visual="vidro"] .lj-chip, html[data-loja-visual="vidro"] .lj-modos {
  background: rgba(255,255,255,.62); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.85);
}
html[data-loja-visual="vidro"] .product-card.lj-card { border-radius: 18px; }
html[data-loja-visual="vidro"] .lj-modal { background: rgba(20,24,50,.35); backdrop-filter: blur(6px); }
html[data-loja-visual="vidro"] .lj-modal-caixa, html[data-loja-visual="vidro"] .lj-adicionado { background: rgba(255,255,255,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid #fff; border-radius: 20px; }
html[data-loja-visual="vidro"] .lj-det-preco { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); }
html[data-loja-visual="vidro"] .lj-baixo { background: rgba(14,16,28,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html[data-loja-visual="vidro"] .login-screen { background: inherit; }
html[data-loja-visual="vidro"] body:not(.lj) { background: radial-gradient(900px 520px at 8% -6%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 62%), radial-gradient(800px 520px at 100% 4%, rgba(120,140,255,.38), transparent 60%), #eef1f8; background-attachment: fixed; }
html[data-loja-visual="vidro"] .login-panel { background: rgba(255,255,255,.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid #fff; box-shadow: 0 20px 60px rgba(40,50,120,.18); border-radius: 20px; }

/* ===================================================================================
   3. NEON — escuro com brilho ciano e roxo (estilo loja gamer)
   =================================================================================== */
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; --accent-soft: rgba(0,229,255,.16) !important;
  --lj-cartao: #0d1020; --lj-c: #00e5ff; --lj-r: #b14bff; --lj-rosa: #ff3d8b;
  --lj-neon-grad: linear-gradient(90deg, #00e5ff, #7b6bff 55%, #b14bff);
  --lj-sombra: 0 10px 30px rgba(0,0,0,.55);
  --lj-sombra-forte: 0 0 0 1px rgba(0,229,255,.7), 0 0 30px rgba(0,229,255,.28), 0 20px 44px rgba(0,0,0,.6);
  --lj-verde: #3dffb0; --lj-verde-fundo: rgba(61,255,176,.10); --lj-vermelho: #ff3d8b;
}
html[data-loja-visual="neon"] body.lj { background: radial-gradient(900px 480px at 85% -10%, rgba(177,75,255,.18), transparent 65%), radial-gradient(800px 420px at 0% 10%, rgba(0,229,255,.10), transparent 60%), #070812; }
html[data-loja-visual="neon"] .lj-faixa { background: var(--lj-neon-grad); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
html[data-loja-visual="neon"] body.lj .topbar { background: linear-gradient(90deg, #0a0c1c, #140a2c); border-bottom: 1px solid rgba(177,75,255,.45); box-shadow: 0 0 26px rgba(177,75,255,.25); }
html[data-loja-visual="neon"] .lj-busca { background: #0d1020; border: 1px solid rgba(0,229,255,.45); }
html[data-loja-visual="neon"] .lj-busca:focus-within { border-color: var(--lj-c); box-shadow: 0 0 18px rgba(0,229,255,.45); }
html[data-loja-visual="neon"] .lj-busca input[type="search"] { background: transparent; color: #e9edff; }
html[data-loja-visual="neon"] .lj-busca button, html[data-loja-visual="neon"] body.lj .btn-primary { background: var(--lj-neon-grad); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.3); box-shadow: 0 0 18px rgba(0,229,255,.40), 0 0 34px rgba(177,75,255,.25); }
html[data-loja-visual="neon"] .lj-deptos { background: #080a17; border-bottom: 1px solid #1c2244; }
html[data-loja-visual="neon"] .lj-depto.ativo { color: var(--lj-c); border-bottom-color: var(--lj-c); text-shadow: 0 0 10px rgba(0,229,255,.7); }
html[data-loja-visual="neon"] .lj-depto-oferta { color: var(--lj-rosa); text-shadow: 0 0 10px rgba(255,61,139,.6); }
html[data-loja-visual="neon"] body.lj .lj-car .cart-count, html[data-loja-visual="neon"] .lj-bolinha { background: var(--lj-rosa); color: #fff; box-shadow: 0 0 10px rgba(255,61,139,.8); }
html[data-loja-visual="neon"] .product-card.lj-card, html[data-loja-visual="neon"] .lj-filtros, html[data-loja-visual="neon"] .lj-faixa-prod { border: 1px solid #1c2244; }
html[data-loja-visual="neon"] .lj-por { color: #fff !important; text-shadow: 0 0 14px rgba(0,229,255,.65); }
html[data-loja-visual="neon"] .lj-card .lj-de + .lj-por, html[data-loja-visual="neon"] .lj-det-preco .lj-de + .lj-por { color: #ff6fae !important; text-shadow: 0 0 14px rgba(255,61,139,.7); }
html[data-loja-visual="neon"] .lj-faixa-cab h2, html[data-loja-visual="neon"] .lj-barra h1 { background: var(--lj-neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-loja-visual="neon"] .lj-marca { color: var(--lj-c) !important; }
html[data-loja-visual="neon"] .lj-selo-desc { background: linear-gradient(90deg, #ff3d8b, #ff7a3d); box-shadow: 0 0 12px rgba(255,61,139,.7); }
html[data-loja-visual="neon"] .lj-selo-novo { background: var(--lj-neon-grad); box-shadow: 0 0 12px rgba(0,229,255,.6); }
html[data-loja-visual="neon"] .lj-fopc.ativo { background: rgba(0,229,255,.12); color: var(--lj-c); }
html[data-loja-visual="neon"] .lj-fval.ativo, html[data-loja-visual="neon"] .lj-modos button.ativo { background: var(--lj-neon-grad); color: #fff; border-color: transparent; }
html[data-loja-visual="neon"] .lj-modal-caixa, html[data-loja-visual="neon"] .lj-adicionado { border: 1px solid rgba(0,229,255,.45); box-shadow: 0 0 40px rgba(0,229,255,.18), 0 30px 60px rgba(0,0,0,.6); }
html[data-loja-visual="neon"] .lj-det-preco { background: #090b18; border: 1px solid #1c2244; }
html[data-loja-visual="neon"] .lj-sem-foto { background: linear-gradient(135deg, #eef3ff, #dfe6fb); }
html[data-loja-visual="neon"] .lj-baixo { background: #080a17; border-top: 1px solid rgba(177,75,255,.4); }
html[data-loja-visual="neon"] .lj-baixo button.active { color: var(--lj-c); text-shadow: 0 0 10px rgba(0,229,255,.7); }
html[data-loja-visual="neon"] .login-screen { background: radial-gradient(800px 420px at 80% 0, rgba(177,75,255,.25), transparent 65%), radial-gradient(700px 420px at 0 100%, rgba(0,229,255,.15), transparent 60%), #070812; }
html[data-loja-visual="neon"] .login-panel { background: #0d1020; border: 1px solid rgba(0,229,255,.4); box-shadow: 0 0 40px rgba(0,229,255,.15); }

/* ===================================================================================
   4. PLATINA — claro, limpo e sofisticado (muito branco, cinza prata, sombras macias)
   =================================================================================== */
html[data-loja-visual="platina"] {
  --bg: #f5f5f7 !important; --surface: #ffffff !important; --ink: #1d1d1f !important; --ink-soft: #6e6e73 !important; --line: #e2e2e7 !important;
  --lj-cartao: #fff; --lj-raio: 18px;
  --lj-sombra: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.06);
  --lj-sombra-forte: 0 2px 6px rgba(0,0,0,.05), 0 24px 48px rgba(0,0,0,.14);
  --lj-vermelho: #d70015;
}
html[data-loja-visual="platina"] body.lj { background: linear-gradient(180deg, #fbfbfd 0, #f5f5f7 420px); }
html[data-loja-visual="platina"] .lj-faixa { background: #1d1d1f; color: #f5f5f7; }
html[data-loja-visual="platina"] body.lj .topbar { background: rgba(255,255,255,.84); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); color: #1d1d1f; border-bottom: 1px solid #e2e2e7; box-shadow: none; }
html[data-loja-visual="platina"] body.lj .topbar .logo, html[data-loja-visual="platina"] body.lj .topbar .logo-text { color: #1d1d1f; }
html[data-loja-visual="platina"] body.lj .nav-item.lj-ico { color: #1d1d1f; }
html[data-loja-visual="platina"] body.lj .nav-item.lj-ico.active { background: #f0f0f3; color: #1d1d1f; }
html[data-loja-visual="platina"] .lj-ico-txt small, html[data-loja-visual="platina"] body.lj .nav-item.lj-ico.active small { color: #6e6e73; }
html[data-loja-visual="platina"] body.lj .topbar-user .btn-outline { color: #1d1d1f; border-color: #d2d2d7; }
html[data-loja-visual="platina"] .lj-busca { background: #f0f0f3; border: 1px solid #e2e2e7; }
html[data-loja-visual="platina"] .lj-busca input[type="search"] { background: transparent; }
html[data-loja-visual="platina"] .lj-busca:focus-within { border-color: #1d1d1f; background: #fff; }
html[data-loja-visual="platina"] .lj-busca button { background: #1d1d1f; color: #fff; }
html[data-loja-visual="platina"] .lj-deptos { background: #fff; border-bottom: 1px solid #e2e2e7; }
html[data-loja-visual="platina"] .lj-depto { color: #424245; }
html[data-loja-visual="platina"] .lj-depto:hover { color: #1d1d1f; background: #f5f5f7; }
html[data-loja-visual="platina"] .lj-depto.ativo, html[data-loja-visual="platina"] .lj-depto-todos { color: #1d1d1f; border-bottom-color: #1d1d1f; }
html[data-loja-visual="platina"] .lj-depto-oferta { color: #d70015; }
html[data-loja-visual="platina"] body.lj .btn-primary { background: linear-gradient(180deg, #48484a, #1d1d1f); color: #fff; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
html[data-loja-visual="platina"] .lj-passo { border-radius: 999px; }
html[data-loja-visual="platina"] .lj-por { font-weight: 700 !important; letter-spacing: -.02em; }
html[data-loja-visual="platina"] .lj-modos button.ativo, html[data-loja-visual="platina"] .lj-fval.ativo { background: #1d1d1f; color: #fff; }
html[data-loja-visual="platina"] .lj-fopc.ativo { background: #f0f0f3; color: #1d1d1f; }
html[data-loja-visual="platina"] .lj-selo { border-radius: 999px; padding: 3px 10px; }
html[data-loja-visual="platina"] .lj-selo-novo { background: #1d1d1f; }
html[data-loja-visual="platina"] .lj-card-img { background: linear-gradient(180deg, #fff, #f7f7f9) !important; }
html[data-loja-visual="platina"] .lj-modal-caixa { border-radius: 24px; }
html[data-loja-visual="platina"] .lj-baixo { background: rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid #e2e2e7; box-shadow: none; }
html[data-loja-visual="platina"] .lj-baixo button { color: #6e6e73; }
html[data-loja-visual="platina"] .lj-baixo button.active { color: #1d1d1f; }
html[data-loja-visual="platina"] .login-panel { border: none; border-radius: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 30px 60px rgba(0,0,0,.10); }

/* ===================================================================================
   5. CHAMPANHE — creme quente, café escuro e dourado suave; títulos com letra elegante
   =================================================================================== */
html[data-loja-visual="champanhe"] {
  --bg: #f6f1e8 !important; --surface: #fffdf9 !important; --bg-alt: #fffdf9 !important;
  --ink: #2a231e !important; --ink-soft: #7f7266 !important; --line: #e7dccb !important; --accent-soft: #f1e5cc !important;
  --lj-cartao: #fffdf9; --lj-raio: 8px; --lj-ch1: #ecdcb8; --lj-ch2: #c9a66b; --lj-cafe: #1f1916;
  --lj-champ-grad: linear-gradient(135deg, #f3e6c8, #d8b97f 50%, #c09553);
  --lj-sombra: 0 1px 2px rgba(60,40,20,.05), 0 8px 22px rgba(60,40,20,.06);
  --lj-sombra-forte: 0 0 0 1px #d8b97f, 0 18px 40px rgba(60,40,20,.16);
  --lj-vermelho: #8c2f39;
}
html[data-loja-visual="champanhe"] body.lj { background: radial-gradient(900px 400px at 50% -100px, rgba(216,185,127,.25), transparent 70%), #f6f1e8; }
html[data-loja-visual="champanhe"] h1, html[data-loja-visual="champanhe"] h2, html[data-loja-visual="champanhe"] .lj-barra h1,
html[data-loja-visual="champanhe"] .lj-faixa-cab h2, html[data-loja-visual="champanhe"] .lj-det-info h2, html[data-loja-visual="champanhe"] .lj-por { font-family: "Playfair Display", Georgia, serif !important; }
html[data-loja-visual="champanhe"] .lj-faixa { background: var(--lj-cafe); color: var(--lj-ch1); letter-spacing: .04em; }
html[data-loja-visual="champanhe"] body.lj .topbar { background: linear-gradient(180deg, #2b221d, #191412); border-bottom: 1px solid rgba(201,166,107,.4); }
html[data-loja-visual="champanhe"] .lj-busca { border: 1px solid rgba(201,166,107,.6); }
html[data-loja-visual="champanhe"] .lj-busca button, html[data-loja-visual="champanhe"] body.lj .btn-primary { background: var(--lj-champ-grad); color: #2a1f12; box-shadow: 0 6px 16px rgba(192,149,83,.30); letter-spacing: .02em; }
html[data-loja-visual="champanhe"] .lj-deptos { background: #191412; }
html[data-loja-visual="champanhe"] .lj-depto { letter-spacing: .03em; }
html[data-loja-visual="champanhe"] .lj-depto.ativo { color: var(--lj-ch1); border-bottom-color: var(--lj-ch2); }
html[data-loja-visual="champanhe"] .lj-depto-oferta { color: var(--lj-ch1); }
html[data-loja-visual="champanhe"] body.lj .lj-car .cart-count, html[data-loja-visual="champanhe"] .lj-bolinha { background: var(--lj-champ-grad); color: #2a1f12; }
html[data-loja-visual="champanhe"] .product-card.lj-card, html[data-loja-visual="champanhe"] .lj-filtros, html[data-loja-visual="champanhe"] .lj-faixa-prod { border: 1px solid #ece2d2; }
html[data-loja-visual="champanhe"] .lj-marca { color: #a8854a !important; letter-spacing: .08em; }
html[data-loja-visual="champanhe"] .lj-por { font-weight: 700 !important; font-variant-numeric: lining-nums; }
html[data-loja-visual="champanhe"] .lj-selo { border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
html[data-loja-visual="champanhe"] .lj-selo-desc { background: #8c2f39; }
html[data-loja-visual="champanhe"] .lj-selo-novo { background: var(--lj-cafe); color: var(--lj-ch1); }
html[data-loja-visual="champanhe"] .lj-selo-leve { background: #5b4a6e; }
html[data-loja-visual="champanhe"] .lj-fopc.ativo { background: #f1e5cc; color: #2a231e; }
html[data-loja-visual="champanhe"] .lj-fval.ativo, html[data-loja-visual="champanhe"] .lj-modos button.ativo { background: var(--lj-cafe); color: var(--lj-ch1); border-color: var(--lj-cafe); }
html[data-loja-visual="champanhe"] .lj-det-preco { background: #f8f1e4; border: 1px solid #ece2d2; }
html[data-loja-visual="champanhe"] .lj-baixo { background: #191412; }
html[data-loja-visual="champanhe"] .lj-baixo button.active { color: var(--lj-ch1); }
html[data-loja-visual="champanhe"] .login-screen { background: radial-gradient(700px 360px at 50% 0, rgba(216,185,127,.35), transparent 70%), #f6f1e8; }
html[data-loja-visual="champanhe"] .login-panel { border: 1px solid #e7dccb; box-shadow: 0 24px 60px rgba(60,40,20,.12); }

/* ===================================================================================
   6. AURORA — cores vivas em degradê (amarelo da marca, laranja, rosa e lilás) e faixa que se move
   =================================================================================== */
html[data-loja-visual="aurora"] {
  --bg: #fbf8ff !important; --line: #ece6f7 !important;
  --lj-aurora: linear-gradient(120deg, var(--accent), #ff9f43 30%, #ff4f9a 62%, #8b5cf6 100%);
  --lj-sombra: 0 2px 4px rgba(80,40,140,.04), 0 12px 30px rgba(80,40,140,.08);
  --lj-sombra-forte: 0 24px 50px rgba(139,92,246,.22), 0 6px 16px rgba(255,79,154,.14);
  --lj-raio: 16px;
}
html[data-loja-visual="aurora"] body.lj { background: radial-gradient(900px 420px at 0 0, rgba(255,159,67,.12), transparent 60%), radial-gradient(900px 420px at 100% 0, rgba(139,92,246,.12), transparent 60%), #fbf8ff; }
html[data-loja-visual="aurora"] .lj-faixa { background: linear-gradient(90deg, var(--accent), #ff9f43, #ff4f9a, #8b5cf6, #ff4f9a, #ff9f43, var(--accent)); background-size: 300% 100%; animation: ljt-aurora 14s linear infinite; color: #fff; text-shadow: 0 1px 4px rgba(60,0,60,.35); }
@keyframes ljt-aurora { from { background-position: 0 0; } to { background-position: 300% 0; } }
html[data-loja-visual="aurora"] body.lj .topbar, html[data-loja-visual="aurora"] .lj-deptos { background: #150f24; }
html[data-loja-visual="aurora"] body.lj .topbar { box-shadow: 0 8px 30px rgba(139,92,246,.25); }
html[data-loja-visual="aurora"] .lj-busca:focus-within { border-color: #ff4f9a; }
html[data-loja-visual="aurora"] .lj-busca button, html[data-loja-visual="aurora"] body.lj .btn-primary { background: var(--lj-aurora); color: #1d0f33; font-weight: 800; box-shadow: 0 8px 22px rgba(255,79,154,.30); }
html[data-loja-visual="aurora"] .lj-depto.ativo { color: #fff; border-image: var(--lj-aurora) 1; border-bottom-width: 3px; border-bottom-style: solid; }
html[data-loja-visual="aurora"] .lj-depto-oferta { color: #ff9fc8; }
html[data-loja-visual="aurora"] body.lj .lj-car .cart-count, html[data-loja-visual="aurora"] .lj-bolinha { background: linear-gradient(135deg, #ff9f43, #ff4f9a); color: #fff; }
html[data-loja-visual="aurora"] .product-card.lj-card { border: 2px solid transparent; }
html[data-loja-visual="aurora"] .product-card.lj-card:hover { background: linear-gradient(#fff, #fff) padding-box, var(--lj-aurora) border-box; }
html[data-loja-visual="aurora"] .lj-por { background: linear-gradient(120deg, #6d28d9, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-loja-visual="aurora"] .lj-card .lj-de + .lj-por, html[data-loja-visual="aurora"] .lj-det-preco .lj-de + .lj-por { background: linear-gradient(120deg, #f97316, #e11d48); -webkit-background-clip: text; background-clip: text; }
html[data-loja-visual="aurora"] .lj-faixa-cab h2, html[data-loja-visual="aurora"] .lj-barra h1 { background: linear-gradient(120deg, #1d0f33, #8b5cf6 60%, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-loja-visual="aurora"] .lj-selo-desc { background: linear-gradient(135deg, #ff4f9a, #f97316); }
html[data-loja-visual="aurora"] .lj-selo-novo { background: linear-gradient(135deg, #8b5cf6, #3b82f6); }
html[data-loja-visual="aurora"] .lj-fopc.ativo { background: linear-gradient(90deg, rgba(255,159,67,.18), rgba(255,79,154,.14)); color: #1d0f33; }
html[data-loja-visual="aurora"] .lj-fval.ativo, html[data-loja-visual="aurora"] .lj-modos button.ativo { background: var(--lj-aurora); color: #1d0f33; border-color: transparent; }
html[data-loja-visual="aurora"] .lj-det-preco { background: linear-gradient(135deg, rgba(255,159,67,.10), rgba(139,92,246,.10)); }
html[data-loja-visual="aurora"] .lj-adicionado { border-top: 4px solid #ff4f9a; }
html[data-loja-visual="aurora"] .lj-baixo { background: #150f24; }
html[data-loja-visual="aurora"] .lj-baixo button.active { color: #ff9fc8; }
html[data-loja-visual="aurora"] .login-screen { background: radial-gradient(700px 380px at 0 0, rgba(255,159,67,.25), transparent 60%), radial-gradient(700px 380px at 100% 100%, rgba(139,92,246,.25), transparent 60%), #fbf8ff; }
html[data-loja-visual="aurora"] .login-panel { border: none; box-shadow: 0 30px 60px rgba(139,92,246,.18); border-radius: 20px; }

/* ===================================================================================
   7. IGUAL AO SITE DA EMPRESA (2.11.2) — copia o visual do site institucional
   (www.informaticacriciuma.com.br): topo branco translúcido com linha fina, letras Space Grotesk
   nos títulos e IBM Plex Sans no texto, botões amarelos de canto 8px, cartões brancos com
   borda fina que sobem um pouco ao passar o mouse, faixas escuras e rodapé preto.
   As cores vêm da marca (marca.js); sem brilho nem animação extra, como no site.
   =================================================================================== */
html[data-loja-visual="site"] body.lj { background: var(--bg); font-family: "IBM Plex Sans", sans-serif; }
html[data-loja-visual="site"] h1, html[data-loja-visual="site"] h2, html[data-loja-visual="site"] h3,
html[data-loja-visual="site"] .lj-nome, html[data-loja-visual="site"] .lj-por, html[data-loja-visual="site"] .btn { font-family: "Space Grotesk", sans-serif; }
html[data-loja-visual="site"] .lj-faixa { background: var(--primary-dark); color: #C7C7C7; }
html[data-loja-visual="site"] .lj-faixa b, html[data-loja-visual="site"] .lj-faixa a { color: #fff; }
html[data-loja-visual="site"] .lj-faixa a:hover { color: var(--accent); }
html[data-loja-visual="site"] body.lj .topbar { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: none; color: var(--ink); }
html[data-loja-visual="site"] body.lj .topbar .logo { color: var(--ink); }
html[data-loja-visual="site"] body.lj .topbar .logo-mark { background: var(--primary-dark); color: var(--accent); }
html[data-loja-visual="site"] body.lj .nav-item.lj-ico { color: var(--ink); }
html[data-loja-visual="site"] body.lj .nav-item.lj-ico.active { background: var(--bg); }
html[data-loja-visual="site"] .lj-ico-txt small { color: var(--ink-soft); }
html[data-loja-visual="site"] body.lj .topbar-user .btn-outline { color: var(--ink); border-color: var(--line); }
html[data-loja-visual="site"] body.lj .topbar-user .btn-outline:hover { border-color: var(--primary); }
html[data-loja-visual="site"] .lj-busca { background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; }
html[data-loja-visual="site"] .lj-busca:focus-within { border-color: var(--accent); background: #fff; }
html[data-loja-visual="site"] .lj-busca input[type="search"] { background: transparent; }
html[data-loja-visual="site"] .lj-busca button { border-radius: 0 6px 6px 0; }
html[data-loja-visual="site"] .lj-deptos { background: var(--primary); }
html[data-loja-visual="site"] .lj-depto { color: #C7C7C7; }
html[data-loja-visual="site"] .lj-depto:hover { color: #fff; }
html[data-loja-visual="site"] .lj-depto.ativo { color: #fff; border-bottom-color: var(--accent); }
html[data-loja-visual="site"] .lj-depto-oferta { color: var(--accent); }
html[data-loja-visual="site"] body.lj .btn { border-radius: 8px; font-weight: 600; }
html[data-loja-visual="site"] body.lj .btn-primary { background: var(--accent); border: 1.5px solid var(--accent); color: var(--primary-dark); }
html[data-loja-visual="site"] body.lj .btn-primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
html[data-loja-visual="site"] .product-card.lj-card, html[data-loja-visual="site"] .lj-filtros, html[data-loja-visual="site"] .lj-faixa-prod, html[data-loja-visual="site"] body.lj .card { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; background: #fff; }
html[data-loja-visual="site"] .product-card.lj-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(18,17,16,.08); border-color: #D0D0D0; }
html[data-loja-visual="site"] .lj-marca { color: var(--accent-dark) !important; letter-spacing: .02em; }
html[data-loja-visual="site"] .lj-fopc.ativo { background: var(--accent-soft); color: var(--ink); }
html[data-loja-visual="site"] .lj-fval.ativo, html[data-loja-visual="site"] .lj-modos button.ativo { background: var(--primary); color: var(--accent); border-color: var(--primary); }
html[data-loja-visual="site"] .lj-selo { border-radius: 4px; }
html[data-loja-visual="site"] .lj-selo-novo { background: var(--primary); color: var(--accent); }
html[data-loja-visual="site"] .lj-barra h1::after { content: ""; display: block; width: 30px; height: 2px; background: var(--accent); margin-top: 8px; }
html[data-loja-visual="site"] .lj-baixo { background: #fff; border-top: 1px solid var(--line); box-shadow: none; }
html[data-loja-visual="site"] .lj-baixo button { color: var(--ink-soft); }
html[data-loja-visual="site"] .lj-baixo button.active { color: var(--ink); }
html[data-loja-visual="site"] .lj-baixo button.active svg { color: var(--accent-dark); }
html[data-loja-visual="site"] .login-screen { background: var(--bg); }
html[data-loja-visual="site"] .login-panel { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(18,17,16,.06); }
html[data-loja-visual="site"] .login-panel .logo { color: var(--ink); }