/* ============================================================================
   Estilos do header compartilhado (views/_includes/header.php)
   Carregado em TODAS as páginas/lojas pelo head.php, DEPOIS do style-NN.css e
   template-NN.css — a ordem importa: estas regras vencem empates de cascata.
   ============================================================================ */

#username { cursor: default; }

/* mini-carrinho vazio (dropdown do menu e versão mobile) */
.cartMenu .miniCartVazio { text-align: center; padding: 24px 16px 22px; }
.cartMenu .miniCartVazio .miniCartVazio-icone {
    width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
    background: #f0f1f3; display: flex; align-items: center; justify-content: center;
}
.cartMenu .miniCartVazio .miniCartVazio-icone i { font-size: 22px; color: #9aa0ab; }
.cartMenu .miniCartVazio p { color: #6b7180; font-size: 14px; line-height: 1.4; margin: 0 0 14px; }
.cartMenu .miniCartVazio .btn { font-size: 13px; padding: 7px 22px; }

/* dropdown da conta (usuário logado) — avatar com iniciais + atalhos do painel */
.contaMenu.account-box, .contaMenu.account-box-sm { width: auto; height: auto; position: relative; margin-top: 18px; }
.contaMenu.account-box-sm { margin: 15px 8px 0; }

/* ===== Mini-carrinho: lista de itens + rodapé no padrão dos cards do site ===== */
.dropdown.cartMenu > .dropdown-menu {
    border: 1px solid #ececec; border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 0 14px;
}
.cartMenu table tr { border-bottom: 1px solid #f0f1f3; }
.cartMenu table tr:last-child { border-bottom: 0; }
.cartMenu table tr td { padding: 10px 6px; vertical-align: middle; }
/* Larguras da linha do item.
   `table-layout: fixed` é o que segura a tabela dentro do dropdown: com layout
   automático, nome longo + "X 2000" + subtotal em nowrap faziam a tabela ficar
   mais larga que o menu, e a coluna da lixeira caía fora do corte (o botão
   remover "sumia"). As colunas laterais têm largura fixa; a descrição fica com
   o que sobra. */
.cartMenu .miniCartTable table { width: 100%; table-layout: fixed; }
.cartMenu td.miniCartProductThumb { width: 62px; }
.cartMenu td.miniCartQuantity { width: 62px; white-space: nowrap; }
.cartMenu td.miniCartSubtotal { width: 96px; }
.cartMenu td.delete { width: 32px; text-align: right; }
/* nome comprido não pode empurrar as colunas: quebra dentro da própria célula */
.cartMenu td.miniCartDescricaoCol { min-width: 0; word-break: break-word; }
.cartMenu .miniCartProductThumb img {
    width: 46px; height: 46px; object-fit: cover;
    border-radius: 8px; border: 1px solid #ececec; background: #fff;
}
.cartMenu h4 { margin: 0 0 3px; line-height: 1.3; }
.cartMenu h4 a {
    font-size: 13px; font-weight: 600; color: #3a3f49;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartMenu h4 a:hover { text-decoration: none; }
.cartMenu .miniCartDescription .price { font-size: 12.5px; color: #6b7180; font-weight: 400; }
.cartMenu .miniCartQuantity a { color: #6b7180; font-size: 12.5px; }
.cartMenu .miniCartSubtotal span { font-size: 13px; font-weight: 700; color: #3a3f49; white-space: nowrap; }
/* remover: mesma lixeira da tela de carrinho (cinza -> vermelho no hover) */
.cartMenu tr.miniCartProduct td:last-child a { color: #c0c4cc; font-size: 15px; transition: color .15s; }
.cartMenu tr.miniCartProduct td:last-child a:hover { color: #c0392b; }
/* respiro entre a coluna de excluir e a barra de rolagem (global deixava só 5px) */
.cartMenu .miniCartTable .mCSB_container { margin-right: 16px !important; }
.cartMenu .miniCartFooter { border-top: 1px solid #f0f1f3; padding: 12px 0 14px; }
.cartMenu .miniCartFooter .subtotal { font-size: 14px; text-transform: none; color: #3a3f49; margin-bottom: 10px; }
.cartMenu .miniCartFooter .btn { padding: 8px 18px; }

/* mobile: badge de quantidade no botão do carrinho (substitui o "(R$ 0,00)" largo) */
/* o inline-flex fica dentro do media query p/ não anular o display:none do Bootstrap no desktop */
@media (max-width: 1199px) {
    .navbar-header .navbar-toggle.cart-drawer-toggle { display: inline-flex; align-items: center; }
}

/* ===== Header mobile estendido até 991px (alinhado ao painel Minha Conta) =====
   O Bootstrap 3 tem @media (min-width:768px) que ESCONDE os .navbar-toggle e
   transforma a .navbar-collapse em barra horizontal. Para que 768–991px também
   seja mobile (hambúrguer + drawers), precisamos VENCER o Bootstrap nessa faixa:
   reexibir os toggles e impedir a navbar de virar menu horizontal.
   Vale para TODAS as lojas (header global). */
@media (min-width: 768px) and (max-width: 1199px) {
    /* reexibe o hambúrguer (menu) e o botão do carrinho que o BS esconde em ≥768px */
    .navbar-header .navbar-toggle { display: block !important; }
    .navbar-header .navbar-toggle.cart-drawer-toggle { display: inline-flex !important; }
    /* o menu de navegação não vira barra horizontal: fica como drawer (off-canvas).
       O bloco @media (max-width:991px) abaixo já o posiciona fixed/translateX. */
    .navbar .navbar-collapse.collapse:not(.menu-drawer-aberto) {
        /* mantém escondido fora da tela (o bloco de drawer já cuida do transform);
           aqui só garantimos que o BS não o force a barra visível */
        float: none !important;
    }
    /* o dropdown de conta/carrinho do topo (desktop) não aparece nessa faixa:
       a conta usa o ícone do drawer; o carrinho usa o cart-drawer */
    .navbar-header .cartMenu.dropdown { display: none !important; }

    /* ESCONDE os ícones DESKTOP que vivem DENTRO da .navbar-collapse (agora drawer).
       Eles têm .hidden-xs (visíveis em sm+), então a 768–991px vazavam para dentro
       do menu — é o que aparecia "no meio" quando o drawer abria. No mobile só valem
       os ícones -sm da .navbar-header. */
    .navbar .navbar-collapse .search-box,
    .navbar .navbar-collapse .access-box,
    .navbar .navbar-collapse .account-box,
    .navbar .navbar-collapse .navbar-right { display: none !important; }

    /* REEXIBE os ícones MOBILE da fileira (lupa, conta/entrar) que o Bootstrap
       esconde nessa faixa via .hidden-sm. Sem isso, a 768–991px sumiam (a versão
       desktop deles vive dentro do menu, que agora virou drawer off-canvas). */
    .navbar-header .access-box-sm.hidden-sm,
    .navbar-header .account-box-sm.hidden-sm { display: block !important; }
    .navbar-header .search-box.hidden-sm { display: block !important; }

    /* o Bootstrap dá float:left + largura-de-conteúdo à .navbar-header em ≥768px
       (esperando a navbar-collapse ao lado). Replicamos o que o mobile ≤767px faz:
       largura total e sem float, p/ os ícones float:right encostarem na DIREITA. */
    .navbar-header { float: none !important; width: 100% !important; }

    /* remove o fundo cinza (rgba(0,0,0,.2)) que o Bootstrap/template dá ao
       .navbar-toggle — no header mobile os toggles são ícones "limpos". */
    .navbar-header .navbar-toggle,
    .navbar-header .navbar-toggle:hover,
    .navbar-header .navbar-toggle:focus {
        background-color: transparent !important;
        border: 0 !important;
    }
}
.navbar-header .navbar-toggle.cart-drawer-toggle .fa-shopping-cart { font-size: 21px; }
.navbar-header .qtd-carrinho-sm {
    display: inline-block; min-width: 17px; height: 17px; line-height: 15px; padding: 0 4px;
    margin-left: 5px; border-radius: 9px;
    background: #fff; border: 1px solid rgba(0,0,0,.15);
    color: #3a3f49; font-size: 11px; font-weight: 700;
}
/* ===== Mobile (≤767px): alinhamento vertical da fileira de ações do topo =====
   A fileira (lupa · carrinho · conta · hambúrguer) são elementos flutuados com
   alturas e margin-top diferentes, o que os deixava em alturas distintas.
   Solução determinística: dar a cada item a MESMA altura (44px) e a MESMA margem,
   centralizando o conteúdo interno via flex — assim todos alinham pelo centro,
   independentemente do tamanho do ícone.
   IMPORTANTE: no toggle do MENU o flex precisa ser `flex-direction: column`, senão
   os três .icon-bar (hambúrguer) ficam lado a lado e viram um traço único. */
@media (max-width: 1199px) {
    /* margem do topo só no item flutuado de cada ação (centraliza a fileira na barra ~80px) */
    .navbar-header .navbar-toggle,
    .navbar-header .contaMenu.account-box-sm,
    .navbar-header .access-box-sm,
    .navbar-header .search-box {
        margin-top: 18px !important;
        margin-bottom: 0 !important;
    }
    /* zera margens internas que empilhariam com a do item */
    .navbar-header .search-box .input-group,
    .navbar-header .access-box-sm .input-group { margin-top: 0 !important; }

    /* cada item da fileira: 44px de altura, conteúdo centralizado verticalmente */
    .navbar-header .navbar-toggle,
    .navbar-header .contaMenu.account-box-sm,
    .navbar-header .access-box-sm .input-group,
    .navbar-header .search-box .input-group {
        display: flex; align-items: center; justify-content: center;
        height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important;
    }
    /* hambúrguer: barras empilhadas (column) e centralizadas — preserva o ícone */
    .navbar-header .navbar-toggle.menu-drawer-toggle {
        flex-direction: column;
    }
    /* hambúrguer à ESQUERDA, antes da logo (padrão app; o Bootstrap flutua à direita);
       padding lateral garante área de toque confortável (o style-NN aperta p/ 2px em ≤400px) */
    .navbar-header .navbar-toggle.menu-drawer-toggle {
        float: left; margin-left: 10px; margin-right: 0;
        padding-left: 10px; padding-right: 10px;
    }

    /* logo na MESMA linha da fileira: cada template-NN.css dá margens/altura
       próprias à <img id="logoprincipal"> (ex.: #logoprincipal{margin-top:32px}
       na uniasselvi, padding em outras), o que desalinhava a logo no mobile.
       Como são regras de ID (especificidade alta), o seletor abaixo TAMBÉM usa o
       ID (img#logoprincipal) para vencer os 28 templates de uma vez e centralizar
       a logo na fileira de 44px via flex. */
    .navbar-header .navbar-brand {
        display: flex; align-items: center;
        height: 44px !important; margin-top: 18px !important; margin-bottom: 0 !important;
        padding-top: 0 !important; padding-bottom: 0 !important;
        /* o Bootstrap/template dá margin-left:-15px ao .navbar-brand (p/ colar na
           borda do container). Como o hambúrguer fica à ESQUERDA do logo no mobile,
           esse recuo negativo jogava o logo POR CIMA do hambúrguer. Zera o recuo e
           dá uma folga à esquerda (o hambúrguer ocupa ~57px da borda). */
        margin-left: 6px !important;
        padding-left: 8px !important;
    }
    .navbar-header .navbar-brand img,
    .navbar-header .navbar-brand img#logoprincipal {
        margin: 0 !important; padding: 0 !important;
        max-height: 40px !important; width: auto !important;
        display: block !important;
    }
}

/* ===== Mobile (≤767px): menu como DRAWER lateral (padrão app) =====
   O hambúrguer fica à esquerda (antes da logo) e abre um painel off-canvas que
   desliza da esquerda, com backdrop. O menu NÃO usa mais o collapse do Bootstrap
   (dois collapses irmãos — menu e mini-carrinho — conflitavam); o estado é a
   classe .menu-drawer-aberto, controlada por JS no footer.php.
   Desktop intocado: ≥768px o Bootstrap força .navbar-collapse visível e o
   toggle some; o cabeçalho do drawer fica display:none fora do mobile. */
.menu-drawer-cabecalho { display: none; }
.menu-drawer-backdrop { display: none; }

@media (max-width: 1199px) {
    /* painel: fixo, desliza da esquerda; .navbar .navbar-collapse vence o
       `.megamenu .collapse { position: static }` do style-NN.css */
    .navbar .navbar-collapse.collapse {
        display: block !important;
        position: fixed; top: 0; bottom: 0; left: 0;
        width: 300px; max-width: 86vw; height: auto !important; max-height: none;
        margin: 0 !important; padding: 0 !important; border: 0 !important;
        background: #fff;
        -webkit-transform: translateX(-105%); transform: translateX(-105%);
        transition: transform .25s ease, visibility 0s linear .25s;
        visibility: hidden;
        overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
        z-index: 1061; /* acima do card do mini-carrinho (1052) e da navbar (1030) */
    }
    .navbar .navbar-collapse.collapse.menu-drawer-aberto {
        -webkit-transform: translateX(0); transform: translateX(0);
        visibility: visible; transition: transform .25s ease;
        box-shadow: 0 0 28px rgba(0,0,0,.3);
    }

    /* backdrop: escurece a página atrás do drawer; clique fecha (JS) */
    .menu-drawer-backdrop {
        display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(0,0,0,.45); z-index: 1060;
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }
    .menu-drawer-backdrop.ativo { opacity: 1; visibility: visible; transition: opacity .25s ease; }

    /* trava o scroll da página com o drawer aberto (escopado no media query:
       redimensionar p/ desktop com o drawer aberto não deixa o overflow preso) */
    body.menu-drawer-trava-scroll { overflow: hidden; }

    /* cabeçalho do drawer: título + botão fechar */
    .menu-drawer-cabecalho {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px; border-bottom: 1px solid #f0f1f3;
    }
    .menu-drawer-cabecalho .menu-drawer-titulo { font-size: 15px; font-weight: 700; color: #3a3f49; }
    .menu-drawer-cabecalho .menu-drawer-fechar {
        border: 0; background: none; padding: 0 4px; line-height: 1;
        font-size: 26px; color: #b0b4bc; cursor: pointer;
    }
    .menu-drawer-cabecalho .menu-drawer-fechar:hover { color: #6b7180; }

    /* lista de itens: card branco com texto escuro — mesma linguagem visual dos
       dropdowns de conta e mini-carrinho. O !important vence o bg/cor por loja
       (ex.: .navbar-nav{background:#001D99} e a{color:#fff} dos template-NN.css) */
    /* largura contida no drawer: o mega-menu (.megamenu-fullwidth) impõe ~330px
       ao .navbar-nav/li, fazendo a borda dos itens vazar à direita do painel de
       300px (traços brancos sobre o conteúdo). Forçar 100% + box-sizing resolve. */
    .navbar .navbar-collapse .navbar-nav {
        margin: 0; float: none; background: transparent !important;
        width: 100% !important;
    }
    .navbar .navbar-collapse .navbar-nav > li {
        float: none; height: auto; background: transparent !important;
        border-bottom: 1px solid #f0f1f3;
        width: 100% !important; box-sizing: border-box;
    }
    .navbar .navbar-collapse .navbar-nav > li > a {
        display: flex !important; align-items: center; justify-content: flex-start !important;
        height: auto !important; min-height: 48px;
        padding: 13px 18px !important; font-size: 15px; font-weight: 600;
        color: #3a3f49 !important; text-align: left; text-transform: none;
    }
    /* a setinha (caret) do dropdown vai p/ a direita */
    .navbar .navbar-collapse .navbar-nav > li > a .caret { margin-left: auto; }

    /* categoria ATUAL (.menu-item-ativo vem do PHP, mesma condição do bg inline por
       loja — que é neutralizado acima): fundo suave + barra à esquerda + negrito.
       box-shadow inset no lugar de border-left p/ não deslocar o texto. */
    .navbar .navbar-collapse .navbar-nav > li.menu-item-ativo {
        background: #f2f5f9 !important;
        box-shadow: inset 3px 0 0 0 #3a3f49;
    }
    .navbar .navbar-collapse .navbar-nav > li.menu-item-ativo > a { font-weight: 700; }

    /* submenu (categorias nível 2): lista recuada clara, sem as colunas/produtos do mega-menu */
    .navbar .navbar-collapse .navbar-nav .dropdown-menu {
        position: static; float: none; width: auto;
        background: #f7f8fa; border: 0; box-shadow: none; margin: 0; padding: 0;
    }
    .navbar .navbar-collapse .navbar-nav .dropdown-menu .megamenu-content,
    .navbar .navbar-collapse .navbar-nav .dropdown-menu .newCollectionUl,
    .navbar .navbar-collapse .navbar-nav .dropdown-menu ul {
        width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
        list-style: none;
    }
    .navbar .navbar-collapse .navbar-nav .dropdown-menu .promo-1 {
        padding: 10px 18px 4px; margin: 0; font-size: 12px; color: #6b7180; text-align: left;
    }
    .navbar .navbar-collapse .navbar-nav .dropdown-menu li > a {
        display: block; padding: 11px 18px 11px 30px; font-size: 14px; color: #3a3f49 !important;
    }
    /* esconde as colunas de produtos (imagens) que o mega-menu injeta — poluem no mobile */
    .navbar .navbar-collapse .navbar-nav .dropdown-menu .productPopItem { display: none; }
}

/* toggle do carrinho (templates != padrao): o <a> era inline e o badge flutuado escapava do
   fluxo — o destaque do hover cobria tudo, mas só o ícone respondia ao clique. Em flex,
   a área destacada inteira (ícone + badge + paddings) vira área clicável. */
.dropdown.cartMenu > a.cartToggle { display: inline-flex; align-items: center; }
.dropdown.cartMenu > a.cartToggle .qtd-carrinho { float: none; order: 2; height: auto; margin-left: 6px; line-height: 1.2; }

.contaMenu .contaMenu-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 14px; font-weight: 700; letter-spacing: .5px; color: #fff;
    padding: 0; border: 0;
}
.contaMenu.account-box-sm .contaMenu-avatar { width: 34px; height: 34px; font-size: 13px; }
.contaMenu .contaMenu-menu {
    right: 0; left: auto; min-width: 260px; padding: 0; margin-top: 8px;
    border-radius: 10px; border: 1px solid #ececec; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 1051; /* acima do dropdown do carrinho (1000), que vem depois no DOM */
}
.contaMenu .contaMenu-cabecalho { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f0f1f3; }
.contaMenu .contaMenu-avatar-lg { width: 42px; height: 42px; margin-right: 10px; flex-shrink: 0; }
.contaMenu .contaMenu-id { min-width: 0; }
.contaMenu .contaMenu-id strong { display: block; font-size: 14px; color: #3a3f49; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contaMenu .contaMenu-id small { display: block; font-size: 12px; color: #6b7180; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contaMenu .contaMenu-lista { list-style: none; margin: 6px 0; padding: 0; }
.contaMenu .contaMenu-lista a { display: block; padding: 9px 16px; font-size: 13.5px; color: #3a3f49; text-decoration: none; text-align: left; }
.contaMenu .contaMenu-lista a:hover { background: #f6f7f8; color: #3a3f49; }
.contaMenu .contaMenu-lista a i { width: 18px; margin-right: 8px; color: #9aa0ab; text-align: center; }
.contaMenu .contaMenu-sair { border-top: 1px solid #f0f1f3; }
.contaMenu .contaMenu-sair a { display: block; padding: 11px 16px; font-size: 13.5px; color: #c0392b; text-decoration: none; text-align: left; }
.contaMenu .contaMenu-sair a:hover { background: #fdf3f2; color: #c0392b; }

/* ===== Mobile (≤767px): mini-carrinho como DRAWER lateral DIREITO (padrão de mercado) =====
   Simétrico ao drawer do menu (esquerda): desliza da direita, mesmo backdrop, mesma
   linguagem visual. Como o menu, NÃO usa mais o collapse do Bootstrap — o estado é a
   classe .cart-drawer-aberto, controlada pelo mesmo JS no footer.php. A classe
   `collapse` permanece no markup só para o display:none do desktop (≥768px o carrinho
   do topo é o dropdown .cartMenu, não este painel). */
@media (max-width: 1199px) {
    /* painel: fixo, desliza da direita; coluna flex (cabeçalho / lista rolável / rodapé) */
    .navbar .navbar-cart.collapse {
        display: flex !important; flex-direction: column;
        position: fixed; top: 0; bottom: 0; right: 0; left: auto;
        width: 360px; max-width: 92vw; height: auto !important; max-height: none;
        margin: 0 !important; padding: 0 !important; border: 0 !important;
        background: #fff;
        -webkit-transform: translateX(105%); transform: translateX(105%);
        transition: transform .25s ease, visibility 0s linear .25s;
        visibility: hidden;
        overflow: hidden;
        z-index: 1061; /* mesmo nível do drawer do menu, acima do backdrop (1060) */
    }
    .navbar .navbar-cart.collapse.cart-drawer-aberto {
        -webkit-transform: translateX(0); transform: translateX(0);
        visibility: visible; transition: transform .25s ease;
        box-shadow: 0 0 28px rgba(0,0,0,.3);
    }

    /* container interno: coluna flex que ocupa o restante do painel */
    .navbar-cart .cartMenuMobile {
        background: transparent !important; width: 100% !important;
        float: none !important; margin: 0 !important; padding: 0 !important;
        display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    }

    /* lista de itens rola; o rodapé (subtotal/CTA) fica sempre visível embaixo */
    .navbar-cart .miniCartTable { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 10px; }
    /* mesmas larguras do dropdown desktop — o drawer usa o mesmo partial, e sem
       table-layout fixo a lixeira também some no corte em telas estreitas */
    .navbar-cart .miniCartTable table { width: 100%; table-layout: fixed; }
    .navbar-cart td.miniCartProductThumb { width: 62px; }
    .navbar-cart td.miniCartQuantity { width: 58px; }
    .navbar-cart td.miniCartSubtotal { width: 92px; }
    .navbar-cart td.delete { width: 32px; text-align: right; }
    .navbar-cart td.miniCartDescricaoCol { min-width: 0; word-break: break-word; }
    .navbar-cart .miniCartTable tr.miniCartProduct { border-bottom: 1px solid #f0f1f3; }
    .navbar-cart .miniCartTable tr.miniCartProduct:last-child { border-bottom: 0; }
    .navbar-cart .miniCartTable td { padding: 10px 6px !important; vertical-align: middle; color: #3a3f49; }
    .navbar-cart .miniCartProductThumb img {
        width: 46px; height: 46px; object-fit: cover;
        border: 1px solid #ececec; border-radius: 8px; background: #fff;
    }
    .navbar-cart .miniCartDescription h4 { margin: 0 0 3px; }
    .navbar-cart .miniCartDescription h4 a {
        font-size: 13px; font-weight: 600; color: #3a3f49; line-height: 1.3;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .navbar-cart .miniCartDescription .price span { font-size: 12.5px; color: #6b7180; }
    .navbar-cart .miniCartQuantity,
    .navbar-cart .miniCartQuantity a { color: #6b7180; font-size: 12.5px; white-space: nowrap; }
    .navbar-cart .miniCartSubtotal span { font-size: 13px; font-weight: 700; color: #3a3f49; white-space: nowrap; }
    .navbar-cart td.delete a { color: #c0c4cc; font-size: 15px; }
    .navbar-cart td.delete a:hover { color: #c0392b; }

    /* rodapé: subtotal + botão (substitui o estilo escuro herdado) */
    .navbar-cart .miniCartFooter,
    .navbar-cart .miniCartFooterInMobile {
        background: #fafbfc !important; border-top: 1px solid #f0f1f3 !important;
        margin: 0 !important; padding: 12px 16px 14px !important; text-align: left !important;
    }
    .navbar-cart .miniCartFooter .subtotal {
        margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #3a3f49; text-transform: none;
    }
    .navbar-cart .miniCartFooter .btn {
        display: block; width: 100%; border-radius: 8px; padding: 10px;
        font-weight: 700; font-size: 14px; margin: 0;
    }

    /* estado vazio: centralizado verticalmente no drawer (coluna flex) */
    .navbar-cart .miniCartVazio { padding: 22px 16px 24px; margin: auto 0; }
}

/* desktop com mouse: dropdowns de conta e carrinho abrem no hover (touch continua no tap) */
@media (min-width: 1200px) and (hover: hover) {
    .contaMenu:hover > .contaMenu-menu,
    .cartMenu:hover > .dropdown-menu { display: block; }
    /* ponte invisível cobrindo o respiro entre o avatar e o menu (senão o hover "cai" no vão e fecha) */
    .contaMenu .contaMenu-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
    /* idem p/ o carrinho: o menu ancora na navbar (não no .cartMenu), então existe um vão
       maior entre o toggle e o topo do menu — sem a ponte, descer o mouse até o menu o fechava */
    .dropdown.cartMenu > .dropdown-menu::before { content: ''; position: absolute; top: -26px; left: 0; right: 0; height: 26px; }
}


/* ============================================================================
   Modal "Acessar Loja" (#ModalSignup, markup no header.php)
   O cabeçalho colorido vem do skin (.modal-header{background:<cor da loja>}) e o
   botão herda .btn-primary — nenhuma cor de marca fixa aqui (CLAUDE.md, regra 6).
   ============================================================================ */
/* Centralização vertical.
   O Bootstrap 3 NÃO centraliza modal na vertical: .modal-dialog usa
   "margin:30px auto" (≥768px) — o auto centraliza só na horizontal, e os 30px
   fixos deixavam este modal (baixo, ~420px) colado no header fixo.
   Flex no .modal-dialog + min-height:100% centraliza SEM tirar a rolagem: o
   .modal continua sendo o elemento que rola (overflow-y:auto do Bootstrap), e
   com min-height (não height) o diálogo cresce e rola normalmente quando a
   janela é mais baixa que o conteúdo. */
.signUpContent .modal-dialog {
    max-width: 420px;
    /* margem horizontal auto: abaixo de 768px o Bootstrap usa "margin:10px" nos
       QUATRO lados (sem auto), então entre ~440px e 767px o modal — que tem
       420px — encostava na esquerda e sobrava todo o vão à direita. */
    margin: 10px auto;
    min-height: calc(100% - 20px);   /* 20px = as margens verticais de 10px */
    display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) {
    /* ≥768px o Bootstrap troca a margem vertical para 30px */
    .signUpContent .modal-dialog { margin: 30px auto; min-height: calc(100% - 60px); }
}
.signUpContent .modal-content {
    width: 100%;                     /* filho flex: ocupa a largura do dialog */
    border: 0; border-radius: 12px; overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
}

/* cabeçalho: título proporcional ao modal (o base do style.css é 38px Oswald) */
.signUpContent .modal-header {
    padding: 16px 20px; margin-bottom: 0; border-bottom: 0; position: relative;
}
.signUpContent .modal-header .modal-title-site {
    font-size: 19px; line-height: 1.2; padding: 0; margin: 0;
    letter-spacing: .5px; font-weight: 500;
}
/* área de toque de 44px no X (era um × solto de ~10px) */
.signUpContent .modal-header .close {
    position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
    width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%;
    color: #fff; opacity: .8; font-size: 22px; font-weight: 400;
    text-shadow: none; background: rgba(255,255,255,.14); border: 0;
    transition: opacity .15s ease, background .15s ease;
}
.signUpContent .modal-header .close:hover,
.signUpContent .modal-header .close:focus { opacity: 1; background: rgba(255,255,255,.28); color: #fff; }

.signUpContent .modal-body { padding: 22px 24px 24px; }

/* subtítulo: contraste AA (o #999 anterior dava ~2.8:1) e hierarquia correta */
.signUpContent .acesso-intro {
    margin: 0 0 20px; font-size: 14px; line-height: 1.45; color: #5a6068; text-align: center;
}
.signUpContent .acesso-intro span { display: block; color: #82888f; font-size: 13px; }

.signUpContent .acesso-campo { margin-bottom: 14px; }
.signUpContent .acesso-campo label {
    display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600;
    color: #4a4f59; text-transform: uppercase; letter-spacing: .3px;
}
/* input: o base do style.css tem border-radius 3px 0 0 3px e bordas assimétricas */
.signUpContent .acesso-campo .form-control {
    height: 44px; margin-bottom: 0; padding: 10px 12px;
    border: 1px solid #d6d9de; border-radius: 8px;
    font-size: 15px; color: #3a3f49; box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.signUpContent .acesso-campo .form-control::-webkit-input-placeholder { color: #a8adb5; }
.signUpContent .acesso-campo .form-control:-ms-input-placeholder { color: #a8adb5; }
.signUpContent .acesso-campo .form-control::placeholder { color: #a8adb5; }
.signUpContent .acesso-campo .form-control:focus {
    border-color: var(--mc-cor, #7d8590);
    box-shadow: 0 0 0 3px var(--mc-cor-borda, rgba(120,130,145,.22));
}
.signUpContent .acesso-campo .form-control.campo-erro { border-color: #d64545; }

/* mostrar/ocultar senha */
.signUpContent .acesso-senha-wrap { position: relative; }
.signUpContent .acesso-senha-wrap .form-control { padding-right: 44px; }
.signUpContent .acesso-ver-senha {
    position: absolute; top: 0; right: 0; width: 44px; height: 44px;
    padding: 0; border: 0; background: none; color: #9aa0ab; font-size: 15px;
    cursor: pointer; transition: color .15s ease;
}
.signUpContent .acesso-ver-senha:hover { color: #5a6068; }

/* "Lembrar meu e-mail" — checkbox nativo estilizado por appearance:none.

   Mesmo desenho do checkbox da página /login (views/_css/login-novo.css): caixa
   de 20px e o "check" desenhado com border, para herdar a cor de TEXTO que
   contrasta com a cor da loja (--mc-cor-texto, calculada pela luminância em
   views/_includes/_cor-tema.php). accent-color resolveria em uma linha, mas
   deixa o check sempre branco — que é justamente o que desaparece nas lojas de
   cor clara (o #FFDD00 da Uniasselvi).

   O fallback dos var() é o cinza neutro usado no resto deste bloco: se a sonda
   de cor não rodar, a caixa fica cinza legível em vez de invisível. */
.signUpContent .acesso-lembrar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* padding vertical dá ~34px de alvo de toque; como o <label> envolve o
       input, a área toda é clicável */
    padding: 6px 0;
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    color: #5a6068;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.signUpContent .acesso-lembrar input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    background: #fff;
    border: 1.5px solid #c3ccd6;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.signUpContent .acesso-lembrar:hover input { border-color: #7d8590; }
.signUpContent .acesso-lembrar input:checked {
    background: var(--mc-cor, #6b7180);
    border-color: var(--mc-cor, #6b7180);
}
.signUpContent .acesso-lembrar input:checked::after {
    content: "";
    position: absolute;
    left: 50%; top: 46%;
    width: 5px; height: 9px;
    margin: -6px 0 0 -3px;
    border: solid var(--mc-cor-texto, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.signUpContent .acesso-lembrar input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--mc-cor-borda, rgba(120,130,145,.22));
}

/* Com a linha do "lembrar" logo acima, o botão não precisa dos 20px cheios. */
.signUpContent .acesso-lembrar + .acesso-btn { margin-top: 12px; }

/* botão: cor herdada de .btn-primary (skin da loja) */
.signUpContent .acesso-btn {
    height: 46px; margin-top: 20px; border-radius: 8px;
    font-size: 15px; font-weight: 700; letter-spacing: .3px;
}
.signUpContent .acesso-btn .acesso-btn-spinner { display: none; margin-left: 8px; }
.signUpContent .acesso-btn.is-loading { opacity: .75; cursor: default; }
.signUpContent .acesso-btn.is-loading .acesso-btn-spinner { display: inline-block; }

/* ===== Passos do modal (acesso → recuperar senha → confirmação) =====
   Trocar de passo é só alternar a classe .acesso-passo-oculto — o modal não
   navega para outra página, então o usuário não perde o carrinho/contexto. */
.signUpContent .acesso-passo-oculto { display: none; }

/* confirmação de envio */
.signUpContent .acesso-sucesso { text-align: center; padding: 4px 0 0; }
.signUpContent .acesso-sucesso-icone {
    width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--mc-cor-suave, #f0f1f3);
    display: flex; align-items: center; justify-content: center;
}
.signUpContent .acesso-sucesso-icone i { font-size: 25px; color: var(--mc-cor, #6b7180); }
.signUpContent .acesso-sucesso h4 {
    margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #3a3f49;
}
.signUpContent .acesso-sucesso p {
    margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: #5a6068;
}
.signUpContent .acesso-sucesso p strong { color: #3a3f49; word-break: break-all; }
.signUpContent .acesso-sucesso .acesso-sucesso-dica { font-size: 13px; color: #82888f; }
.signUpContent .acesso-sucesso .acesso-btn { margin-top: 18px; }

.signUpContent .modal-footer {
    background: #fafbfc; border-top: 1px solid #eef0f2; padding: 13px 24px; text-align: center;
}
.signUpContent .modal-footer a { font-size: 13.5px; color: #5a6068; }
.signUpContent .modal-footer a:hover { color: var(--mc-cor, #3a3f49); text-decoration: underline; }
/* O rodapé mostra um link por vez, comandado por uma classe de estado no
   #ModalSignup (o JS só troca a classe; a visibilidade é decidida no CSS):
   sem classe = passo 1 ("Esqueceu sua senha?"); .acesso-em-recuperacao = "Voltar". */
.signUpContent .modal-footer .acesso-voltar-login { display: none; }
.signUpContent.acesso-em-recuperacao .modal-footer [data-acesso-ir="recuperar"] { display: none; }
.signUpContent.acesso-em-recuperacao .modal-footer .acesso-voltar-login { display: inline; }
.signUpContent .acesso-voltar-login i { margin-right: 3px; }

/* mobile: modal colado às bordas com respiro, campos com 16px (evita zoom no iOS) */
@media (max-width: 480px) {
    /* margem e min-height andam juntos: o calc desconta as margens verticais,
       senão o dialog fica mais alto que a área visível e reaparece a rolagem.
       Horizontal: "auto" centraliza (necessário perto de 480px, onde o
       max-width:420px deixa sobra lateral) e o max-width em calc garante o
       respiro de 12px — com margem fixa o modal encostava nas duas bordas. */
    .signUpContent .modal-dialog {
        margin: 12px auto;
        /* fallback p/ navegador sem min() (CSS Values 4): garante o respiro
           lateral; abaixo de 444px é este valor que vale de qualquer forma */
        max-width: calc(100% - 24px);
        /* min() dos dois tetos: nunca passa dos 420px do desktop nem encosta
           nas bordas (respiro de 12px de cada lado) */
        max-width: min(420px, calc(100% - 24px));
        min-height: calc(100% - 24px);
    }
    .signUpContent .modal-body { padding: 20px 18px 22px; }
    .signUpContent .modal-footer { padding: 13px 18px; }
    .signUpContent .acesso-campo .form-control { font-size: 16px; }
}