/* ═══════════════════════════════════════════════════════════════════════════════════════
   LOJA B2B — VISUAL NOVO (style guide v2 levado à loja, 13/10/2026)
   Mesma família do painel («Moldura», paleta Ardósia clara): menu sobre fundo cinza-azulado,
   conteúdo numa folha clara, logo oficial, botão principal em tinta (quase preto), UM acento
   azul para o que é clicável secundário, verde só para economia/desconto, âmbar para escassez.

   Só vale com html.loja-v2 (o interruptor fica no <head> de index.html e login.html):
   ?visual=novo liga para este navegador, ?visual=antigo desliga. Apagar este arquivo = volta.
   Muito do HTML da loja tem estilo inline; por isso os !important — são todos daqui, escopados.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
html.loja-v2 {
    --lv-fundo: #E8ECF1;
    --lv-folha: #F6F7F9;
    --lv-card: #FFFFFF;
    --lv-tinta: #0F1B2D;
    --lv-txt: #45526A;
    --lv-fraco: #6B778A;
    --lv-linha: #DDE3EA;
    --lv-acento: #1F4FB8;
    --lv-bom: #0E8F64;
    --lv-bom-bg: #E7F6EF;
    --lv-alerta: #9A5B00;
    --lv-alerta-bg: #FDF1DC;
    --lv-raio: 12px;
}
html.loja-v2 body { background: var(--lv-fundo); color: var(--lv-tinta); }

/* ── Moldura: menu no fundo, conteúdo numa folha colada nas bordas ─────────────────────── */
html.loja-v2 .app-container { background: var(--lv-fundo); }
html.loja-v2 .sidebar { background: var(--lv-fundo) !important; border-right: 0 !important; box-shadow: none !important; }
html.loja-v2 .main-content { background: var(--lv-folha) !important; border-left: 1px solid var(--lv-linha); }
/* o topo do menu tem a ALTURA do cabeçalho da direita (72px) e a mesma linha embaixo: as duas faixas viram uma só (dono, 19/10) */
html.loja-v2 .sidebar-header { height: 72px !important; min-height: 72px; box-sizing: border-box; padding: 0 1.2rem !important; border-bottom: 1px solid var(--lv-linha) !important; flex-shrink: 0; }
html.loja-v2 .sidebar-header { justify-content: center !important; position: relative; }
html.loja-v2 .logo-area { flex: 1 1 auto; display: flex !important; justify-content: center !important; }
html.loja-v2 .sidebar-header .mobile-close { position: absolute; right: 10px; top: 14px; }
html.loja-v2 .logo-area img { height: auto !important; width: 150px !important; }
html.loja-v2 .logo-area span > span { color: var(--lv-fraco) !important; margin-top: 6px !important; font-size: .56rem !important; letter-spacing: .42em !important; }
html.loja-v2 .nav-section { color: var(--lv-fraco) !important; font-size: 10.5px !important; letter-spacing: .1em !important; padding-left: 14px !important; margin-left: 0 !important; }
html.loja-v2 .nav-item { color: var(--lv-txt) !important; border-radius: 9px !important; font-size: 14px !important; }
html.loja-v2 .nav-item:hover { background: rgba(15, 27, 45, .05) !important; color: var(--lv-tinta) !important; }
html.loja-v2 .nav-item.active { background: #fff !important; color: var(--lv-tinta) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15, 27, 45, .08) !important; }
html.loja-v2 .nav-item.active .nav-ico { color: var(--lv-tinta) !important; }
html.loja-v2 .nav-item.active::after { display: none !important; }

/* ── Topo ──────────────────────────────────────────────────────────────────────────────── */
html.loja-v2 .top-header { background: #fff !important; border-bottom: 1px solid var(--lv-linha) !important; box-shadow: none !important; padding-top: 12px !important; padding-bottom: 12px !important; }
html.loja-v2 .search-bar { background: var(--lv-folha) !important; border: 1px solid var(--lv-linha) !important; border-radius: 9px !important; height: 40px; margin: 0 auto; }
html.loja-v2 .search-bar input { background: transparent !important; }

/* ── Cabeçalho do catálogo: sem o cartão gigante; título e linha de apoio ─────────────────── */
html.loja-v2 .hero-section { display: none !important; }
html.loja-v2 .catalog-title { font-size: 26px !important; font-weight: 650 !important; letter-spacing: -.02em !important; color: var(--lv-tinta) !important; }
html.loja-v2 .catalog-subtitle { color: var(--lv-fraco) !important; }


/* Filtros de categoria: pílulas discretas; a ativa em tinta */
html.loja-v2 .pill { background: #fff !important; border: 1px solid var(--lv-linha) !important; color: var(--lv-txt) !important; font-weight: 500 !important; }
html.loja-v2 .pill:hover { border-color: #B9C3D0 !important; color: var(--lv-tinta) !important; }
html.loja-v2 .pill.active { background: var(--lv-tinta) !important; border-color: var(--lv-tinta) !important; color: #fff !important; }
html.loja-v2 .sort-dropdown select { background: #fff !important; border: 1px solid var(--lv-linha) !important; border-radius: 9px !important; }

/* ── Cartão de produto ─────────────────────────────────────────────────────────────────── */
html.loja-v2 .product-grid { gap: 16px !important; }
html.loja-v2 .product-card { background: var(--lv-card) !important; border: 1px solid var(--lv-linha) !important; border-radius: var(--lv-raio) !important; box-shadow: none !important; overflow: hidden; }
html.loja-v2 .product-card:hover { border-color: #B9C3D0 !important; box-shadow: 0 6px 20px rgba(15, 27, 45, .08) !important; transform: none !important; }
html.loja-v2 .pimg-wrap { background: #F1F3F6; aspect-ratio: 1 / 1; }
html.loja-v2 .pimg-wrap .product-image { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html.loja-v2 .product-card:hover .product-image { transform: scale(1.02); }
html.loja-v2 .stock-sticker { background: var(--lv-alerta-bg) !important; color: var(--lv-alerta) !important; border: 0 !important; box-shadow: none !important; font-weight: 600 !important; letter-spacing: .04em !important; top: 10px !important; left: 10px !important; border-radius: 6px !important; }
html.loja-v2 .product-info { padding: 14px 14px 14px !important; gap: 4px; }
html.loja-v2 .product-title { color: var(--lv-tinta) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; }
html.loja-v2 .product-title small { color: var(--lv-fraco); font-weight: 400; }
html.loja-v2 .product-sku { color: var(--lv-fraco) !important; font-size: 12px !important; }
html.loja-v2 .stock-pill { font-size: 11px !important; letter-spacing: .02em !important; }
html.loja-v2 .stock-pill.in { background: transparent !important; color: var(--lv-bom) !important; padding-left: 0 !important; }
/* preço: tinta (não vermelho); o desconto é economia → verde */
html.loja-v2 .product-card .price { color: var(--lv-tinta) !important; font-size: 18px !important; font-weight: 700 !important; }
html.loja-v2 .product-card span[style*="background:#fee2e2"] { background: var(--lv-bom-bg) !important; color: var(--lv-bom) !important; font-weight: 600 !important; }
html.loja-v2 .product-card input[type=number] { height: 36px; border: 1px solid var(--lv-linha) !important; border-radius: 8px !important; text-align: center; }
html.loja-v2 .btn-add { background: var(--lv-tinta) !important; color: #fff !important; border-radius: 8px !important; width: 36px !important; height: 36px !important; box-shadow: none !important; }
html.loja-v2 .btn-add:hover { background: #24344D !important; }

/* ── Botões ───────────────────────────────────────────────────────────────────────────── */
html.loja-v2 .btn-primary { background: var(--lv-tinta) !important; border-color: var(--lv-tinta) !important; color: #fff !important; border-radius: 9px !important; box-shadow: none !important; }
html.loja-v2 .btn-primary:hover { background: #24344D !important; }
html.loja-v2 .btn-outline { background: #fff !important; border: 1px solid var(--lv-linha) !important; color: var(--lv-tinta) !important; border-radius: 9px !important; }

/* ── Botão do carrinho (flutuante) ─────────────────────────────────────────────────────── */
html.loja-v2 .highlight-cart-btn { background: var(--lv-tinta) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px rgba(15, 27, 45, .25) !important; }
html.loja-v2 .highlight-cart-btn .cart-badge { background: #D9BF84 !important; color: var(--lv-tinta) !important; }
html.loja-v2 #cartFloatingMsg { background: #fff !important; border: 1px solid var(--lv-linha) !important; color: var(--lv-txt) !important; box-shadow: 0 6px 16px rgba(15, 27, 45, .12) !important; }

/* ── Gaveta do carrinho ────────────────────────────────────────────────────────────────── */
html.loja-v2 .cart-drawer { background: #fff !important; border-left: 1px solid var(--lv-linha) !important; }
html.loja-v2 .cart-header { border-bottom: 1px solid var(--lv-linha) !important; }
html.loja-v2 .cart-header h2, html.loja-v2 .cart-header h3 { color: var(--lv-tinta) !important; font-weight: 650 !important; }
html.loja-v2 #cartItems > div { border-bottom: 1px solid var(--lv-linha) !important; }
html.loja-v2 #cartItems img { border-radius: 10px !important; border: 1px solid var(--lv-linha); }
html.loja-v2 .cart-footer { background: var(--lv-folha) !important; border-top: 1px solid var(--lv-linha) !important; }

/* ── Janelas (checkout, perfil, produto) ──────────────────────────────────────────────── */
html.loja-v2 .modal-overlay { background: rgba(15, 27, 45, .45) !important; backdrop-filter: blur(2px); }
html.loja-v2 .modal-content { background: #fff !important; border: 1px solid var(--lv-linha) !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgba(15, 27, 45, .25) !important; }
html.loja-v2 #checkoutItemsList { background: #fff !important; border: 1px solid var(--lv-linha) !important; }
html.loja-v2 #checkoutStep2 > div > div { background: var(--lv-folha) !important; border: 1px solid var(--lv-linha) !important; }
html.loja-v2 #checkoutModal input, html.loja-v2 #checkoutModal select, html.loja-v2 #profileModal input, html.loja-v2 #profileModal select, html.loja-v2 #profileModal textarea { background: #fff !important; border: 1px solid var(--lv-linha) !important; border-radius: 9px !important; }
html.loja-v2 #checkoutModal input:focus, html.loja-v2 #checkoutModal select:focus { border-color: var(--lv-acento) !important; box-shadow: 0 0 0 3px rgba(31, 79, 184, .15) !important; outline: none; }

/* ── Delivery hub: em destaque (decide preço e estoque de tudo na tela) ────────────────── */
html.loja-v2 .delivery-hub { background: #EAF0FE !important; border: 1px solid #C9D7FB !important; border-radius: 11px !important; padding: 5px 5px 5px 12px !important; gap: 10px !important; }
html.loja-v2 .delivery-hub-label { color: #1D4FD7 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; }
html.loja-v2 .hub-pill { background: #fff !important; color: #1D4FD7 !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(29, 79, 215, .18) !important; padding: 7px 10px 7px 11px !important; }
html.loja-v2 .hub-pill-select { color: #1D4FD7 !important; font-weight: 700 !important; font-size: 14px !important; }

/* ── Perfil no rodapé do menu: quem está logado em cima, as duas ações lado a lado embaixo;
      sem o cartão que abria e fechava ─────────────────────────────────────────────────── */
html.loja-v2 .sidebar-footer { padding: 12px !important; border-top: 1px solid var(--lv-linha) !important; }
html.loja-v2 .account-menu { display: flex !important; flex-direction: column-reverse; gap: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
html.loja-v2 .account-trigger { background: transparent !important; border: 0 !important; padding: 2px 4px !important; cursor: default !important; pointer-events: none; }
html.loja-v2 .account-chevron { display: none !important; }
html.loja-v2 .account-avatar { width: 38px !important; height: 38px !important; background: var(--lv-tinta) !important; color: #D9BF84 !important; }
html.loja-v2 .account-name { color: var(--lv-tinta) !important; font-size: 14px !important; }
html.loja-v2 .account-role { color: var(--lv-fraco) !important; }
html.loja-v2 .account-links { flex-direction: row !important; gap: 8px !important; max-height: none !important; opacity: 1 !important; padding: 0 !important; overflow: visible !important; }
html.loja-v2 .account-link { flex: 1; justify-content: center; white-space: nowrap; gap: 6px !important; padding: 8px 8px !important; border-radius: 9px !important; background: #fff !important; border: 1px solid var(--lv-linha) !important; color: var(--lv-tinta) !important; font-size: 13px !important; }
html.loja-v2 .account-link:hover { border-color: #B9C3D0 !important; }
html.loja-v2 .account-link.danger { color: #C92A2A !important; }
html.loja-v2 .account-link.danger:hover { background: #FBEAEA !important; border-color: #F1C9C9 !important; }

/* ── Celular ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html.loja-v2 .main-content { border-left: 0; }
    html.loja-v2 .sidebar { box-shadow: 0 0 30px rgba(15, 27, 45, .25) !important; }
}

/* ═════════════════════ LOGIN / CADASTRO / SENHA (login.html, register.html…) ═════════════ */
/* Essas páginas têm o próprio <style> com variáveis (--bg, --line, --gold…): trocar as variáveis
   muda tudo de uma vez; o botão principal deixa o ouro e vai para a tinta, igual ao painel. */
html.loja-v2.auth { --bg: #E8ECF1; --surface: #FFFFFF; --ink: #0F1B2D; --muted: #5B677B; --line: #DDE3EA; --gold: #0F1B2D; --gold-deep: #1F4FB8; --gold-soft: rgba(31, 79, 184, .12); }
html.loja-v2.auth .hdr { background: rgba(255, 255, 255, .92) !important; }
html.loja-v2.auth .wrap::before { display: none !important; }
html.loja-v2.auth .card { box-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 18px 40px -24px rgba(15, 27, 45, .30) !important; border-radius: 14px !important; }
html.loja-v2.auth .eyebrow { font-family: 'Inter', system-ui, sans-serif !important; font-size: .68rem !important; letter-spacing: .18em !important; color: #8A6A1F !important; font-weight: 600; }
html.loja-v2.auth .card h1 { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 650 !important; font-size: 1.55rem !important; letter-spacing: -.02em; }
html.loja-v2.auth input { background: #fff !important; }
html.loja-v2.auth input:focus { border-color: #1F4FB8 !important; }
html.loja-v2.auth .btn { background: #0F1B2D; border-color: #0F1B2D; color: #fff !important; }
html.loja-v2.auth .btn:hover { background: #24344D !important; border-color: #24344D !important; }
html.loja-v2.auth .btn.btn-google, html.loja-v2.auth .support-box .btn { background: #fff !important; color: #0F1B2D !important; border-color: #DDE3EA !important; }
html.loja-v2.auth .btn.btn-google:hover, html.loja-v2.auth .support-box .btn:hover { background: #F6F7F9 !important; border-color: #B9C3D0 !important; }

/* ═════════════════════ PERFIL POR TIPO (19/10/2026) ═══════════════════════════════════════
   Cor por tipo de cliente — B2B azul, Herald roxo, cliente (B2C) verde-azulado — no avatar do
   menu, no rótulo do tipo e no topo da janela de perfil. Vale nos dois visuais (sem loja-v2). */
html { --tipo-cor: #2563EB; --tipo-bg: #EAF1FE; --tipo-claro: #7FA8FF; }
html.tipo-herald { --tipo-cor: #7C3AED; --tipo-bg: #F3ECFE; --tipo-claro: #B794F6; }
html.tipo-b2c { --tipo-cor: #EA580C; --tipo-bg: #FFF1E8; --tipo-claro: #FF9A5C; }
html .account-avatar, html.loja-v2 .account-avatar { background: var(--tipo-cor) !important; color: #fff !important; }
html .account-role, html.loja-v2 .account-role { color: var(--tipo-cor) !important; font-weight: 600; }
/* o menu lateral ganha o tom do tipo depois do login (dono, 19/10: «a barra lateral com uma tonalidade de acordo com a cor dele») */
html.loja-v2.tipo-b2b .sidebar, html.loja-v2.tipo-herald .sidebar, html.loja-v2.tipo-b2c .sidebar { background: var(--tipo-bg) !important; }
html.loja-v2.tipo-b2b .sidebar-footer, html.loja-v2.tipo-herald .sidebar-footer, html.loja-v2.tipo-b2c .sidebar-footer { border-color: color-mix(in srgb, var(--tipo-cor) 18%, transparent) !important; }
html.loja-v2[class*=tipo-] .nav-section { color: color-mix(in srgb, var(--tipo-cor) 70%, #475569) !important; }

.pf-overlay { align-items: center; justify-content: center; z-index: 9000; position: fixed; inset: 0; background: rgba(15, 27, 45, .45); padding: 16px; }
.pf-overlay .pf-box { width: min(860px, 100%); max-width: none; max-height: min(92vh, 860px); padding: 0 !important; display: flex; flex-direction: column; overflow: hidden !important; position: relative; background: #fff; border-radius: 14px; border-top: 4px solid var(--tipo-cor) !important; }
.pf-topo { display: flex; align-items: center; gap: 14px; padding: 20px 24px 14px; }
.pf-avatar { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tipo-cor); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.pf-quem { flex: 1; min-width: 0; }
.pf-quem h2 { margin: 0; font-size: 1.2rem; font-weight: 650; color: #0F1B2D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: .82rem; color: #6B778A; }
.pf-tipo { background: var(--tipo-bg); color: var(--tipo-cor); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.pf-fechar { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: #6B778A; cursor: pointer; padding: 4px 8px; border-radius: 8px; align-self: flex-start; }
.pf-fechar:hover { background: #F1F3F6; color: #0F1B2D; }
.pf-abas { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid #DDE3EA; overflow-x: auto; }
.pf-aba { border: 0; background: transparent; padding: 10px 14px; font: 600 .86rem/1.2 inherit; color: #6B778A; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pf-aba:hover { color: #0F1B2D; }
.pf-aba.on { color: #0F1B2D; border-bottom-color: var(--tipo-cor); }
.pf-corpo { flex: 1; overflow-y: auto; padding: 20px 24px 24px; }
.pf-painel[hidden] { display: none !important; }
.pf-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.pf-grade .pf-largo { grid-column: 1 / -1; }
.pf-grade [hidden] { display: none !important; }
#profileModal .form-group { margin: 0; min-width: 0; }
#profileModal .form-group > label { display: block; font-size: .78rem; font-weight: 600; color: #45526A; margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
#profileModal .form-group > label small { font-weight: 400; color: #8A94A6; margin-left: 4px; }
#profileModal .form-group input, #profileModal .form-group select, #profileModal .form-group textarea { width: 100%; box-sizing: border-box; }
#profileModal input:disabled { background: #F4F6F8 !important; color: #6B778A; }
.pf-topo, .pf-abas, .pf-rodape { flex-shrink: 0; }
html.loja-v2 #profileModal .pf-box, #profileModal .pf-box { border-top: 4px solid var(--tipo-cor) !important; }
#profileModal .sh-tog { display: flex !important; margin: 0 !important; font-weight: 500; color: #45526A; text-transform: none !important; letter-spacing: 0 !important; }
.pf-horas .sh-row { grid-template-columns: 110px 90px auto !important; justify-content: start; }
.pf-horas .sh-times input[type=time] { min-width: 120px; }
#profileModal #shopMediaBox { margin-top: 22px; }
.pf-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid #DDE3EA; background: #F6F7F9; }
.pf-rodape[hidden] { display: none !important; }
.pf-msg { flex: 1; font-size: .84rem; color: #6B778A; }
.pf-msg.ok { color: #0E8F64; font-weight: 600; }
.pf-msg.erro { color: #C92A2A; font-weight: 600; }
.pf-vazio { padding: 24px; text-align: center; color: #6B778A; background: #F6F7F9; border-radius: 10px; font-size: .88rem; }
.pf-herald-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #45526A; font-size: .86rem; margin-bottom: 16px; }
.pf-selo { background: var(--tipo-cor); color: #fff; font-weight: 700; font-size: .74rem; padding: 4px 10px; border-radius: 999px; }
.pf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pf-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid #DDE3EA; border-radius: 12px; background: #fff; }
.pf-kpi-rot { font-size: .76rem; color: #6B778A; font-weight: 600; }
.pf-kpi-val { font-size: 1.5rem; font-weight: 700; color: #0F1B2D; font-variant-numeric: tabular-nums; }
.pf-kpi-sub { font-size: .76rem; color: #8A94A6; }
.pf-h4 { margin: 22px 0 10px; font-size: .92rem; font-weight: 650; color: #0F1B2D; }
.pf-tabela { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pf-tabela th { text-align: left; font-size: .74rem; font-weight: 600; color: #6B778A; background: #F6F7F9; padding: 7px 10px; border-bottom: 1px solid #DDE3EA; }
.pf-tabela td { padding: 7px 10px; border-bottom: 1px solid #EEF1F5; color: #0F1B2D; }
.pf-tabela .pf-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
    .pf-grade { grid-template-columns: 1fr; }
    .pf-kpis { grid-template-columns: 1fr 1fr; }
    .pf-topo, .pf-abas, .pf-corpo, .pf-rodape { padding-left: 16px; padding-right: 16px; }
    .pf-horas .sh-row { grid-template-columns: 1fr !important; }
}

/* Tipo do cliente (pedido do dono, 20/10/2026): selo na barra do topo, antes do Delivery Hub.
   Morava ao lado do logo e o encolhia; o dono quer o logo no tamanho de sempre. */
.lv-tipo { display: none; }
html[class*=tipo-] .top-header .lv-tipo { display: inline-flex; align-items: center; margin-right: 10px; white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: var(--tipo-bg); color: var(--tipo-cor); border: 1px solid color-mix(in srgb, var(--tipo-cor) 30%, transparent); font: 700 .68rem/1.3 'Inter', system-ui, sans-serif; letter-spacing: .08em; }
@media (max-width: 680px) { html[class*=tipo-] .top-header .lv-tipo { display: none; } }
html.tipo-b2b .lv-tipo::after { content: 'RETAIL ACCOUNT'; }
html.tipo-b2c .lv-tipo::after { content: 'CUSTOMER ACCOUNT'; }
html.tipo-herald .lv-tipo::after { content: 'HERALD'; }

/* ═════════════════════ MENU ESCURO «Malediction» (opção C, dono 22/10/2026) ══════════════════════
   Menu em #12161E com o logo oficial em branco; o tipo do cliente aparece numa linha de 3px no
   topo, no selo sob o logo, no ícone do item ativo e no avatar. Cores: Retail Account azul,
   Customer Account laranja, Herald roxo (o tom claro é o que lê sobre o escuro). */
html.loja-v2 .sidebar, html.loja-v2[class*=tipo-] .sidebar { background: #12161E !important; color: #C8CFDA; }
html.loja-v2 .sidebar::before { content: ''; display: block; height: 3px; background: var(--tipo-claro); flex-shrink: 0; }
html.loja-v2 .sidebar-header { height: 88px !important; min-height: 88px; padding-top: 6px !important; align-items: center !important; border-bottom-color: rgba(255,255,255,.08) !important; }
html.loja-v2 .logo-area img { display: none !important; }
.lv-logo-claro { display: none; }
html.loja-v2 .logo-area img.lv-logo-claro { display: block !important; width: 138px !important; height: auto !important; }
html.loja-v2 .logo-area span > span { color: #7C8699 !important; margin-top: 5px !important; }
html.loja-v2 .logo-area .lv-tipo-menu { display: none; }
html.loja-v2[class*=tipo-] .logo-area .lv-tipo-menu { display: inline-block; margin-top: 6px !important; padding: 1px 8px !important; border: 1px solid var(--tipo-claro); border-radius: 999px; color: var(--tipo-claro) !important; font: 700 .56rem/1.4 'Inter', system-ui, sans-serif !important; letter-spacing: .1em !important; white-space: nowrap; }
html.loja-v2[class*=tipo-] .top-header .lv-tipo { display: none; }
html.loja-v2 .sidebar-header .mobile-close { color: #C8CFDA; }
html.loja-v2 .nav-section, html.loja-v2[class*=tipo-] .nav-section { color: #7C8699 !important; }
html.loja-v2 .nav-item { color: #C8CFDA !important; }
html.loja-v2 .nav-item .nav-ico { color: #8E98AA !important; }
html.loja-v2 .nav-item:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
html.loja-v2 .nav-item.active { background: rgba(255,255,255,.07) !important; color: #fff !important; box-shadow: none !important; }
html.loja-v2 .nav-item.active .nav-ico { color: var(--tipo-claro) !important; }
html.loja-v2 .sidebar-footer, html.loja-v2[class*=tipo-] .sidebar-footer { border-top: 1px solid rgba(255,255,255,.08) !important; }
html.loja-v2 .account-name { color: #fff !important; }
html.loja-v2 .account-avatar { background: var(--tipo-claro) !important; color: #12161E !important; }
html.loja-v2 .account-role { color: var(--tipo-claro) !important; }
html.loja-v2 .account-link { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; color: #C8CFDA !important; }
html.loja-v2 .account-link:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.18) !important; color: #fff !important; }
html.loja-v2 .account-link.danger { color: #F28B8B !important; }
html.loja-v2 .account-link.danger:hover { background: rgba(242,139,139,.1) !important; border-color: rgba(242,139,139,.3) !important; }

/* ═════════════════════ MOLDURA ESCURA (opção B da barra, dono 22/10/2026) ════════════════════════
   Menu e barra de cima viram um fundo escuro só; a loja fica numa folha clara com o canto superior
   esquerdo arredondado. Sem linha entre as partes, nada desalinha. Botões da barra num estilo só. */
html.loja-v2 .app-container, html.loja-v2 .main-content { background: #12161E !important; border-left: 0 !important; }
html.loja-v2 .sidebar-header { border-bottom-color: transparent !important; }
html.loja-v2 .top-header { background: #12161E !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.loja-v2 .content-wrapper { flex: 1 0 auto; max-width: none !important; margin: 0 !important; box-sizing: border-box;
    padding-left: max(2rem, calc((100% - 1400px) / 2 + 2rem)) !important; padding-right: max(2rem, calc((100% - 1400px) / 2 + 2rem)) !important;
    background: var(--lv-folha); border-radius: 16px 0 0 0; overflow: clip; }
html.loja-v2 .menu-toggle { color: #E2E7EF !important; }
html.loja-v2 .search-bar { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.1) !important; }
html.loja-v2 .search-bar input { background: transparent !important; border: 0 !important; color: #fff !important; }
html.loja-v2 .search-bar input::placeholder { color: #8E98AA; }
html.loja-v2 .search-bar .search-ico { color: #8E98AA !important; }
html.loja-v2 .search-bar:focus-within { border-color: #7FA8FF !important; }
html.loja-v2 .delivery-hub { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.1) !important; }
html.loja-v2 .delivery-hub-label { color: #8E98AA !important; }
html.loja-v2 .hub-pill { background: rgba(255,255,255,.08) !important; color: #E2E7EF !important; box-shadow: none !important; }
html.loja-v2 .hub-pill-select { color: #fff !important; background: transparent !important; }
html.loja-v2 .hub-pill-select option { color: #0F1B2D; background: #fff; }
html.loja-v2 #adminReturnBtn { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.1) !important; color: #E2E7EF !important; box-shadow: none !important; }
html.loja-v2 #adminReturnBtn:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
html.loja-v2 #vlBtn { color: #FBBF5A !important; border-color: rgba(251,191,90,.5) !important; }
html.loja-v2 #vlBtn:hover { background: rgba(251,191,90,.1) !important; }
@media (max-width: 768px) { html.loja-v2 .content-wrapper { border-radius: 0; padding-left: 1rem !important; padding-right: 1rem !important; } }
/* Linha da cor do tipo de ponta a ponta no topo (dono 22/10/2026) */
html.loja-v2 body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--tipo-claro); z-index: 1000; pointer-events: none; }