/* ==========================================================================
   DIX STOREFRONT - MODERN THEME ENGINE
   ========================================================================== */

/* 1. VARI�VEIS & CONFIGURA��ES GLOBAIS (O "Motor")
   --------------------------------------------------------------------------
   As vari�veis --cor-primaria, --cor-menu, etc, s�o injetadas pelo _Layout.cshtml
   baseado no Banco de Dados. Aqui n�s derivamos as varia��es.
*/
:root {
    /* Cria automaticamente um tom 20% mais escuro para intera��es (Hover) */
    --cor-primaria-dark: color-mix(in srgb, var(--cor-primaria), black 20%);
    /* --cor-primaria-soft e --on-primaria-soft vem do servidor (_ThemeTokens):
       precisam conhecer a SUPERFICIE e ter piso de contraste. Ver DESIGN_TOKENS.md */
    /* Sombras Padronizadas (Efeito de profundidade moderna) */
    --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --sombra-flutuante: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    /* Transi��es */
    --transicao-padrao: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   1b. CONTEXTOS DE SUPERFÍCIE  (Fase 2)
   --------------------------------------------------------------------------
   PROBLEMA QUE ISTO RESOLVE: --cor-titulo/--cor-texto eram derivados apenas do
   FUNDO DA PÁGINA e usados sobre QUALQUER superfície. Num tema escuro, um card
   claro recebia título quase branco => texto invisível. E vice-versa.

   COMO FUNCIONA: o servidor deriva um conjunto (título/texto/suave/borda) para
   CADA superfície e emite em _ThemeTokens.cshtml. As classes abaixo apenas
   REAPONTAM os tokens C3 para o conjunto da superfície corrente. Como custom
   properties são herdadas, tudo que estiver dentro do bloco passa a enxergar as
   cores certas — sem que nenhum componente precise saber onde está.

   PARA AUTORES DE TEMPLATE: nunca escreva cor de texto fixa. Se criar um bloco
   com fundo próprio, marque-o com a classe de contexto correspondente.
   Contrato: Docs/DesignTokens/DESIGN_TOKENS.md
   ========================================================================== */

/* Superfície de card/painel — aplicada automaticamente aos componentes que já
   usam var(--superficie) como fundo. */
.ctx-superficie,
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.accordion-item,
.list-group-item,
.bg-superficie,
.card-depoimento,
.mk-secao-painel {
    --cor-titulo: var(--titulo-on-superficie);
    --cor-texto: var(--texto-on-superficie);
    --cor-texto-muted: var(--suave-on-superficie);
    --cor-borda: var(--borda-on-superficie);
    /* Um card é sempre a superfície do TEMA, mesmo aninhado dentro de um bloco
       claro fixo. Sem isto, um .card dentro de .bg-light herdaria --superficie
       branco e receberia o texto claro do tema => claro sobre branco. */
    --superficie: var(--superficie-base);
    --on-superficie: var(--on-superficie-base);
    /* Recalcula os tokens de campo NESTE contexto: custom properties são
       computadas onde são declaradas, então sem isto continuariam valendo os
       valores do :root. */
    --campo-fundo: color-mix(in srgb, var(--texto-on-superficie) 7%, var(--superficie-base));
    --campo-fundo-hover: color-mix(in srgb, var(--texto-on-superficie) 11%, var(--superficie-base));
    --acento: var(--acento-on-superficie);
    --acento-sec: var(--acento-sec-on-superficie);
    --bs-link-color: var(--acento-on-superficie);
    --bs-link-color-rgb: var(--acento-on-superficie-rgb);
    --campo-texto-suave: var(--suave-on-campo);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* Superfície CLARA FIXA: blocos que continuam brancos/quase-brancos mesmo em
   tema escuro (bg-white/bg-light no markup, heros com gradiente claro).
   Aqui o texto precisa ficar ESCURO — é o oposto do resto do tema. */
/* NOTA (upgrade p/ Bootstrap 5.3): os .alert saíram desta lista. No 5.1 eles
   tinham fundo claro FIXO e precisavam de contexto claro; no 5.3 seguem o
   data-bs-theme (--bs-info-bg-subtle vira #032830 no escuro), então o contexto
   PADRÃO já é o correto para eles. Mantê-los aqui seria a regressão inversa:
   texto escuro sobre alert escuro.
   .bg-white e .bg-light, ao contrário, continuam claros fixos no 5.3
   (--bs-light-rgb e --bs-white-rgb não são redefinidos no tema escuro). */
.ctx-claro,
.bg-white,
.bg-light {
    --cor-titulo: var(--titulo-on-claro);
    --cor-texto: var(--texto-on-claro);
    --cor-texto-muted: var(--suave-on-claro);
    --cor-borda: var(--borda-on-claro);
    --superficie: #ffffff;
    --on-superficie: #212529;
    /* token-ok: este contexto E a superficie clara fixa; #ffffff aqui e a definicao */
    --campo-fundo: color-mix(in srgb, var(--texto-on-claro) 7%, #ffffff);
    --campo-fundo-hover: color-mix(in srgb, var(--texto-on-claro) 11%, #ffffff);
    --acento: var(--acento-on-claro);
    --acento-sec: var(--acento-sec-on-claro);
    --bs-link-color: var(--acento-on-claro);
    --bs-link-color-rgb: var(--acento-on-claro-rgb);
    --campo-texto-suave: var(--suave-on-claro);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* EXCEÇÕES: elementos que TÊM bg-light/bg-white no markup mas cujo fundo a
   camada de compatibilidade (Fase 1) já tokenizou. Eles seguem o tema, não são
   claros fixos — portanto voltam ao contexto de superfície.
   Precisam vir DEPOIS do bloco acima. */
.table > thead.bg-light,
.table > thead.bg-white,
.table > thead.table-light,
.form-control.bg-light,
.form-control.bg-white,
.form-select.bg-light,
.form-select.bg-white,
.input-group.bg-light,
.input-group.bg-white,
.input-group-text.bg-light,
.input-group-text.bg-white,
.card.bg-superficie,
.card-header.bg-superficie,
.card-footer.bg-superficie {
    --cor-titulo: var(--titulo-on-superficie);
    --cor-texto: var(--texto-on-superficie);
    --cor-texto-muted: var(--suave-on-superficie);
    --cor-borda: var(--borda-on-superficie);
    /* Alias estável: volta à superfície do tema sem auto-referência cíclica
       (--superficie: var(--superficie) seria inválido). */
    --superficie: var(--superficie-base);
    --on-superficie: var(--on-superficie-base);
    --campo-fundo: color-mix(in srgb, var(--texto-on-superficie) 7%, var(--superficie-base));
    --campo-texto-suave: var(--suave-on-campo);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* Topo e rodapé: fundos próprios, configurados pelo lojista. */
.ctx-topo {
    --cor-titulo: var(--titulo-on-topo);
    --cor-texto: var(--texto-on-topo);
    --cor-texto-muted: var(--suave-on-topo);
    --cor-borda: var(--borda-on-topo);
    --acento: var(--acento-on-topo);
    --acento-sec: var(--acento-sec-on-topo);
    --bs-link-color: var(--acento-on-topo);
    --bs-link-color-rgb: var(--acento-on-topo-rgb);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

.ctx-rodape,
footer {
    --cor-titulo: var(--titulo-on-rodape);
    --cor-texto: var(--texto-on-rodape);
    --cor-texto-muted: var(--suave-on-rodape);
    --cor-borda: var(--borda-on-rodape);
    --acento: var(--acento-on-rodape);
    --acento-sec: var(--acento-sec-on-rodape);
    --bs-link-color: var(--acento-on-rodape);
    --bs-link-color-rgb: var(--acento-on-rodape-rgb);
    /* Espelha os --bs-* que dependem do contexto. Sem isto eles ficariam com o
       valor computado no :root: custom property e computada ONDE e declarada,
       entao um .h6 dentro de um bloco claro continuaria com a cor de titulo do
       tema (bug encontrado pela pagina /dev/tokens). */
    --bs-heading-color: var(--cor-titulo);
    --bs-emphasis-color: var(--cor-titulo);
    --bs-body-color: var(--cor-texto);
    --bs-secondary-color: var(--cor-texto-muted);
    --bs-tertiary-color: var(--cor-texto-muted);
    --bs-border-color: var(--cor-borda);
    --bs-border-color-translucent: var(--cor-borda);
    /* REAPLICA a cor: trocar o token nao basta. Texto que apenas HERDA do body
       continuaria com a cor do contexto anterior — foi assim que um paragrafo
       claro apareceu dentro de um bloco branco. Achado pela pagina /dev/tokens. */
    color: var(--cor-texto);
}

/* NOTA: o .toast NAO recebe contexto claro. No 5.3 --bs-toast-bg deriva de
   --bs-body-bg, entao ele acompanha o tema — mesma situacao dos .alert. Forcar
   contexto claro aqui daria texto escuro sobre toast escuro (media 1,43 na
   pagina /dev/tokens). O fundo #fff inline do _Layout tambem foi removido. */


/* Área de FOTO de produto: fundo branco é exceção legítima do contrato, mas
   NÃO deve criar contexto claro para o texto ao redor — só contém <img>. */
.bg-foto {
    /* token-ok: foto de produto tem fundo branco chapado (excecao do contrato) */
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6, .fw-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    /* Token sem�ntico: derivado do fundo do site (override: cor_titulos) */
    color: var(--cor-titulo);
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--cor-fundo-site);
    /* Token sem�ntico: derivado do fundo do site (override: cor_texto_site) */
    color: var(--cor-texto);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Texto de ênfase: mesma cor dos títulos, SEM alterar fonte/peso (ao contrário
   de .fw-title, que também aplica Montserrat 700). Substitui os usos de
   .text-dark cujo objetivo era "destacar", não "escurecer".
   Ver Docs/DesignTokens/PLANO_CONTRASTE.md */
.texto-enfase {
    color: var(--cor-titulo);
}

/* Preço no card da vitrine (L03a / DEC-FRETE-078). A decisão autoriza corpo menor,
   e ele precisa dele: no card o preço divide espaço com nome, categoria e botão.
   Herda a cor de .texto-enfase, então acompanha a paleta de cada empresa — cada
   tema decide apenas ONDE incluir a partial _PrecoNaVitrine, nunca a cor. */
.preco-vitrine {
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Área levemente rebaixada DENTRO da superfície corrente. Substitui os usos de
   .bg-light cuja intenção era "separar esta região do resto do card", e não
   "esta região é branca": um formulário sob as abas, o rodapé de total, um card
   de observação. Segue o tema em vez de virar um bloco claro no escuro.
   Em tema claro a superfície É #ffffff, então o resultado fica próximo do
   #f8f9fa que o bg-light dava. */
.superficie-suave {
    background-color: color-mix(in srgb, var(--cor-texto) 5%, var(--superficie));
}

/* Hero institucional: mesma ideia, em gradiente. */
.hero-suave {
    background: linear-gradient(180deg, var(--superficie) 0%, color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)) 100%);
}

    .hero-suave.hero-suave-diagonal {
        background: linear-gradient(135deg, var(--superficie) 0%, color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)) 100%);
    }

/* Variante do CTA que usa a cor de CALL em vez da primária. */
.bg-cta-call {
    /* token-ok: gradiente de marca (receita do contrato); texto vai em var(--on-call) */
    background: linear-gradient(135deg, var(--cor-call) 0%, color-mix(in srgb, var(--cor-call), #000 45%) 100%);
    color: var(--on-call) !important;
}

/* Superfície de card/painel. Substitui .bg-white em elementos de card, onde o
   branco fixo era só "a cor de card do tema claro".
   Seguro nos dois temas: --superficie É #ffffff quando o fundo do site é claro
   (BaseController), então em tema claro isto é no-op visual; em tema escuro
   corrige o texto claro que sumia sobre o branco fixo.
   NÃO usar em área de FOTO de produto — lá o branco é exceção legítima. */
.bg-superficie {
    background-color: var(--superficie);
}

/* Cor secund�ria como acento (texto). Ex.: rótulos/eyebrows, "Veja também". */
.text-secundaria {
    color: var(--cor-secundaria) !important;
}

/* Selo de apoio na cor secund�ria (a��o/informa��o secund�ria; o selo principal fica na prim�ria) */
.badge-secundaria {
    background-color: var(--cor-secundaria) !important;
    color: var(--on-secundaria) !important;
}

a {
    text-decoration: none;
    transition: var(--transicao-padrao);
    /* --acento: marca verificada contra a superficie corrente (ver contexto) */
    color: var(--acento);
}

    a:hover {
        color: var(--cor-primaria-dark);
    }

/* 3. BOT�ES (Design System)
   --------------------------------------------------------------------------
*/
/* Bot�o Principal (S�lido) */
.btn-custom {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-primaria) !important; /* MUDOU AQUI */
    border: 1px solid transparent;
    transition: var(--transicao-padrao);
    font-weight: 600;
}

    .btn-custom:hover {
        /* --cor-primaria-hover move a cor no sentido OPOSTO ao do texto, entao o
           contraste sobe. O --cor-primaria-dark escurecia sempre, o que reduz o
           contraste quando o texto por cima e escuro (marca clara). */
        background-color: var(--cor-primaria-hover);
        color: var(--on-primaria-hover) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

/* CLASSE PARA O CARD DO "FALE CONOSCO" */
.bg-primaria-dinamico {
    background-color: var(--cor-primaria) !important; /* Adicione o !important aqui */
    color: var(--cor-texto-primaria) !important;
}

    .bg-primaria-dinamico * {
        color: var(--cor-texto-primaria) !important;
    }

/* Bot�o Secund�rio (Borda) — usa a COR SECUND�RIA (a��o secund�ria; a��o principal fica no .btn-custom) */
.btn-outline-custom {
    border: 2px solid var(--cor-secundaria);
    color: var(--acento-sec);
    background: transparent;
    font-weight: 700;
    transition: var(--transicao-padrao);
}

    .btn-outline-custom:hover {
        background-color: var(--cor-secundaria);
        color: var(--on-secundaria);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

/* Bot�o Whatsapp Flutuante */
.btn-whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    /* token-ok: WhatsApp tem cor de marca propria, nao acompanha a paleta */
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    transition: var(--transicao-padrao);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
}

    .btn-whatsapp-float:hover {
        /* token-ok: WhatsApp (hover) */
        background-color: #1da851;
        transform: scale(1.1) rotate(5deg); /* Pequena anima��o */
        /* token-ok: WhatsApp (hover) */
        color: #fff;
    }

/* Bot�es de Navega��o (Carrossel) */
.btn-nav-flutuante {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 45px;
    height: 45px;
    background-color: var(--superficie);
    color: var(--cor-primaria);
    border: none;
    border-radius: 50%;
    box-shadow: var(--sombra-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicao-padrao);
    opacity: 0.9;
    cursor: pointer;
}

    .btn-nav-flutuante:hover {
        background-color: var(--cor-primaria);
        color: var(--cor-texto-primaria);
        transform: translateY(-50%) scale(1.1);
        opacity: 1;
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }

.btn-nav-prev {
    left: -20px;
}

.btn-nav-next {
    right: -20px;
}

@media (max-width: 992px) {
    .btn-nav-prev, .btn-nav-next {
        display: none;
    }
}

/* 4. CARDS & PRODUTOS
   --------------------------------------------------------------------------
*/
.card {
    border: none;
    background: var(--superficie);
    transition: var(--transicao-padrao);
    border-radius: 16px; /* Bordas mais arredondadas estilo App */
}

/* --------------------------------------------------------------------------
   CARD DE PRODUTO (Base) — usado no carrossel da home, em Campanhas e no Catalogo.

   O card e UMA superficie so, com uma "janela" de foto no topo. Antes o rodape
   dos botoes tambem era branco, entao o nome do produto virava uma tarja escura
   entre dois blocos brancos em tema escuro. Removido o branco do rodape, o nome
   e os botoes passam a dividir a superficie do card e a tarja deixa de existir
   — mesma estrutura que o tema Aurora ja usava.

   Branco permanece SO na area de foto e nas miniaturas (.bg-foto): foto de
   produto tem fundo branco chapado, excecao registrada no contrato.
   -------------------------------------------------------------------------- */
.card-produto-foto {
    height: 200px;
}

.card-produto-thumbs {
    min-height: 42px;
}

.card-produto-categoria {
    font-size: 0.62rem;
    letter-spacing: 1px;
    /* --acento-sec: a secundaria ja verificada contra a superficie do card */
    color: var(--acento-sec);
}

.card-produto-titulo {
    font-size: 0.85rem;
    /* line-height proprio: o 1.6 do body deixava o bloco de 2 linhas alto demais
       e colava o nome nos botoes. 0,85rem x 1,3 reduz ~27% a altura do bloco. */
    line-height: 1.3;
    color: var(--cor-titulo);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Efeito Hover nos Cards de Produto */
.hover-card {
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    position: relative;
}

    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--sombra-flutuante) !important;
    }

    .hover-card img {
        transition: transform 0.5s ease;
    }

    .hover-card:hover img {
        transform: scale(1.05); /* Zoom sutil na imagem */
    }

/* Card de Depoimento */
.card-depoimento {
    background: var(--superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-suave);
    transition: var(--transicao-padrao);
}

    .card-depoimento:hover {
        transform: translateY(-5px);
        box-shadow: var(--sombra-flutuante);
    }

/* ==========================================================================
   5. NAVEGA��O E TOPO DIN�MICO (HEADER)
   ========================================================================== */
header nav {
    transition: padding 0.3s ease;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.03);
}

/* ---------------------------------------------------
   TEXTOS DO TOPO: Respeita a escolha do usu�rio (--cor-menu) 
   --------------------------------------------------- */
.navbar-dinamico .nav-link,
.navbar-dinamico .logo-texto-fallback,
.navbar-dinamico .icone-usuario,
.navbar-dinamico .menu-hamburguer-btn i {
    color: var(--cor-menu) !important;
}

.navbar-dinamico .divisor-topo {
    background-color: var(--cor-menu) !important;
    opacity: 0.3;
}

.menu-hamburguer-btn:focus {
    box-shadow: none;
    outline: none;
}

/* ---------------------------------------------------
   EFEITOS HOVER NO MENU: Usa a Cor Prim�ria 
   --------------------------------------------------- */
.navbar-dinamico .nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem !important;
    position: relative;
    opacity: 0.9;
}

    /* Quando passa o mouse, a letra fica da cor de HOVER do menu (fallback: prim�ria) */
    .navbar-dinamico .nav-link:hover {
        color: var(--cor-hover-menu) !important;
        opacity: 1;
    }

    /* A linha animada embaixo do menu acompanha a cor de HOVER do menu */
    .navbar-dinamico .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background-color: var(--cor-hover-menu);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .navbar-dinamico .nav-link:hover::after {
        width: 70%;
    }

/* ---------------------------------------------------
   BOT�ES DO TOPO (Carrinho e Entrar) 
   --------------------------------------------------- */

/* Estado Normal do Carrinho */
.btn-carrinho-topo {
    background-color: transparent !important;
    border: 1px solid color-mix(in srgb, var(--cor-menu), transparent 80%);
    color: var(--cor-menu) !important;
    border-radius: 50px;
    padding: 8px 20px !important;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transicao-padrao);
}

    .btn-carrinho-topo .icone-carrinho {
        color: var(--cor-menu) !important;
    }

/* Remove a linha de sublinhado animado que os links normais t�m */
.navbar-dinamico .btn-carrinho-topo::after {
    display: none !important;
}

/* HOVER DO CARRINHO: For�a a cor de contraste e adiciona o efeitinho de pular */
.navbar-dinamico .btn-carrinho-topo:hover {
    background-color: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    color: var(--cor-texto-primaria) !important;
    transform: translateY(-2px); /* Efeito igual ao do bot�o Entrar */
}

    .navbar-dinamico .btn-carrinho-topo:hover .icone-carrinho {
        color: var(--cor-texto-primaria) !important;
    }

/* A bolinha vermelha do carrinho (Qtd) */
.badge-carrinho {
    /* token-ok: vermelho semantico de alerta */
    background-color: #dc3545 !important;
    color: white !important;
}

/* Estado Normal do Bot�o Entrar */
.btn-login-topo {
    border: 2px solid var(--cor-menu);
    color: var(--cor-menu) !important;
    background: transparent;
    transition: var(--transicao-padrao);
}

    /* HOVER DO BOT�O ENTRAR */
    .btn-login-topo:hover {
        background-color: var(--cor-primaria);
        border-color: var(--cor-primaria);
        color: var(--cor-texto-primaria) !important;
        transform: translateY(-2px);
    }

/* ---------------------------------------------------
   BOT�O DE BUSCA DO TOPO (UX Premium)
   --------------------------------------------------- */
/* 1. Ajuste de Respiro (Padding e Tamanho) */
.btn-busca-topo {
    background-color: transparent !important;
    color: var(--cor-menu) !important;
    border-radius: 50%;
    width: 45px; /* Ligeiramente maior para dar margem */
    height: 45px;
    padding: 0 !important;
    transition: var(--transicao-padrao);
    border: 1px solid transparent;
}

.navbar-dinamico .btn-busca-topo::after {
    display: none !important;
}

/* Reduz o �cone sutilmente para sobrar mais espa�o em branco no c�rculo */
.btn-busca-topo .icone-busca {
    font-size: 1.15rem !important;
}

/* 2. O Hover Discreto: Fundo transl�cido em vez de cor s�lida */
/* O rgba branco com 15% de opacidade cria um destaque elegante em fundos escuros */
.btn-busca-topo:hover, .btn-busca-topo[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--cor-menu) !important;
    transform: translateY(-2px);
}

/* 3. Dropdown flutuante (Descolado do menu) */
.dropdown-busca .dropdown-menu {
    margin-top: 15px !important; /* Cria um v�o entre o cabe�alho e a caixa */
    border: 1px solid rgba(0,0,0,0.05) !important;
}

/* 4. Input Premium (Estilo P�lula com bot�o interno) */
.input-group-busca {
    background-color: color-mix(in srgb, var(--cor-texto) 7%, var(--superficie)); /* Fundo neutro derivado da superf�cie */
    border-radius: 50px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

    /* Quando o usu�rio clica para digitar, a caixa acende com a cor da marca */
    .input-group-busca:focus-within {
        background-color: var(--superficie);
        border-color: var(--cor-primaria-soft);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
    }

    .input-group-busca .form-control {
        color: var(--cor-texto);
        font-weight: 500;
    }

        .input-group-busca .form-control::placeholder {
            color: var(--cor-texto-muted);
            font-weight: 400;
        }

@media (max-width: 992px) {
    .dropdown-busca .dropdown-menu {
        min-width: 100% !important;
        margin-top: 10px !important;
    }
}



/* 6. TABELAS & CARRINHO (Ajustes finos)
   --------------------------------------------------------------------------
*/
.table-hover tbody tr:hover {
    background-color: var(--cor-primaria-soft);
}

/* Controle de Quantidade */
.qtd-control-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cor-borda);
    border-radius: 50px; /* P�lula completa */
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    background: var(--superficie);
    width: auto; /* Permite crescer */
    min-width: 120px; /* Garante tamanho m�nimo */
}

    .qtd-control-group .btn {
        border: none;
        background: transparent;
        padding: 0.5rem 1rem;
        color: var(--cor-texto);
        transition: background-color 0.2s;
        z-index: 10; /* Garante clique */
    }

        .qtd-control-group .btn:hover {
            background-color: color-mix(in srgb, var(--cor-texto) 8%, var(--superficie));
            color: var(--cor-primaria);
        }

        .qtd-control-group .btn:active {
            background-color: color-mix(in srgb, var(--cor-texto) 12%, var(--superficie));
        }

    .qtd-control-group input {
        border: none;
        text-align: center;
        font-weight: 700;
        width: 60px; /* Aumentado para caber 3-4 d�gitos */
        padding: 0;
        background: transparent;
        color: var(--cor-texto);
        -moz-appearance: textfield; /* Remove setinhas nativas */
    }

        /* Remove setinhas nativas do Chrome/Safari */
        .qtd-control-group input::-webkit-outer-spin-button,
        .qtd-control-group input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    /* Feedback Visual de Carregando (Opcional) */
    .qtd-control-group.loading {
        opacity: 0.7;
        pointer-events: none;
    }

/* 7. RODAP� (FOOTER)
   --------------------------------------------------------------------------
*/
footer {
    background-color: var(--cor-rodape) !important;
    color: var(--cor-texto-rodape);
    font-size: 0.9rem;
}

    footer h5 {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        margin-bottom: 1.5rem;
        color: var(--cor-texto-rodape);
        opacity: 0.95;
        font-weight: 700;
    }

    footer a {
        color: color-mix(in srgb, var(--cor-texto-rodape) 70%, transparent) !important;
        transition: all 0.2s ease;
    }

        footer a:hover {
            color: var(--cor-texto-rodape) !important;
            padding-left: 5px; /* Seta imagin�ria */
            text-decoration: none;
        }

.copyright-bar {
    background-color: color-mix(in srgb, var(--cor-texto-rodape) 8%, transparent);
    padding: 20px 0;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--cor-texto-rodape) 60%, transparent);
}

/* 8. UTILIT�RIOS E CLASSES ESPECIAIS
   --------------------------------------------------------------------------
*/

/* Sombras Suaves */
.shadow-soft {
    box-shadow: var(--sombra-suave) !important;
}

/* Fundo Call to Action com Gradiente */
.bg-cta-modern {
    /* token-ok: gradiente de marca (receita do contrato); texto vai em var(--on-call) */
    background: linear-gradient(135deg, var(--cor-primaria) 0%, color-mix(in srgb, var(--cor-primaria), #000 45%) 100%);
    color: var(--cor-texto-primaria) !important;
}

    .bg-cta-modern h2, .bg-cta-modern p, .bg-cta-modern i {
        color: var(--cor-texto-primaria) !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* Card de CTA com mídia real (imagem/gif/vídeo vindos do ERP) */
.cta-media {
    height: auto;
    min-height: 180px;
    max-height: 520px;
    object-fit: cover;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Com texto do lojista por cima da mídia: véu escuro uniforme p/ leitura */
.cta-overlay-texto {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Texto do lojista (HTML livre do ERP): branco com sombra p/ legibilidade */
.cta-conteudo {
    max-width: 780px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

    .cta-conteudo,
    .cta-conteudo * {
        /* token-ok: texto sobre imagem com veu escuro (excecao do contrato) */
        color: #fff !important;
    }

/* ===================================================================
   BANNER DA CAMPANHA COM A BUSCA INCORPORADA
   A busca fica A CAVALEIRO da borda inferior do banner: metade sobre a
   arte, metade para fora. Integra os dois num conjunto so cobrindo o
   minimo do trabalho do lojista (so a metade de cima do campo encosta
   na imagem), e a sombra do campo mantem o efeito de profundidade.
   Vale em todos os tamanhos: no celular o banner 3:1 fica baixo, e e
   justamente ai que sobrepor pouco importa mais.
   =================================================================== */
/* MOBILE (padrao): banner e busca empilhados dentro de um card so. Com 3:1 o
   banner fica com ~130px no celular; a cavaleiro, o campo comeria um quinto da
   arte. Aqui ele nao cobre nada. O arredondado/sombra sao do CONTAINER. */
.campanha-banner {
    position: relative;
    background-color: var(--superficie);
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
}

.campanha-banner-arte {
    overflow: hidden;
}

.campanha-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.campanha-banner-busca {
    padding: 0.85rem 0.85rem 1rem;
}

/* DESKTOP: a arte vira o card e a busca sai do fluxo, ficando A CAVALEIRO da
   borda inferior - metade sobre a imagem, metade fora. Aqui o banner e alto o
   bastante para a faixa coberta ser irrelevante, e a sombra do campo da o
   efeito de profundidade. */
@media (min-width: 768px) {
    .campanha-banner {
        background-color: transparent;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
        /* Reserva o espaco da metade do campo que avanca para fora da arte */
        padding-bottom: 2.25rem;
    }

    .campanha-banner-arte {
        border-radius: var(--bs-border-radius-xl);
        box-shadow: var(--bs-box-shadow-sm);
    }

    .campanha-banner-busca {
        position: absolute;
        left: 0;
        right: 0;
        /* Alinha a base do campo com a borda inferior da arte... */
        bottom: 2.25rem;
        /* ...e desce metade da propria altura, deixando-o meio dentro, meio fora */
        transform: translateY(50%);
        padding: 0 0.75rem;
        /* O container ocupa a largura toda; sem isto ele roubaria o clique do
           link do banner nas laterais vazias da busca. */
        pointer-events: none;
    }

        .campanha-banner-busca form {
            pointer-events: auto;
        }
}

/* ===================================================================
   DROPDOWN QUE ABRE NO HOVER  (opt-in pela classe .dropdown-hover)
   So no desktop COM MOUSE de verdade: em toque nao existe hover, e um
   menu que abre "sozinho" no primeiro toque engole o toque seguinte.
   O clique continua funcionando normalmente - o Bootstrap segue no
   comando, isto aqui e so uma camada visual por cima.
   Nao usar em menu de conta/acoes destrutivas: abrir sem intencao um
   menu que tem "Sair" e pedir clique errado.
   =================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .dropdown-hover:hover > .dropdown-menu {
        display: block;
        /* Sem o Popper (que so roda no clique) o menu nao recebe top/left:
           o [data-bs-popper] do Bootstrap so aparece quando o JS abre. */
        top: 100%;
        left: 0;
    }

    /* Ponte invisivel sobre o vao do mt-2: sem ela o caminho diagonal do
       mouse ate o primeiro item sai do elemento e o menu pisca/fecha.
       A altura casa EXATAMENTE com o mt-2 (0.5rem) dos dois temas: se passar
       disso, a ponte cobre a barriga do proprio link e engole o clique nele. */
    .dropdown-hover > .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.5rem;
        height: 0.5rem;
    }
}

/* Ajuste dos indicadores do carrossel */
.carousel-indicators [data-bs-target] {
    background-color: var(--cor-primaria) !important;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;
}

.carousel-inner {
    padding-bottom: 20px;
}

/* Formata��o de Conte�do HTML do Banco (Quem Somos, FAQ) */
.conteudo-dinamico {
    font-family: 'Open Sans', sans-serif;
    color: var(--cor-texto);
    line-height: 1.8;
    font-size: 1rem;
    white-space: pre-line;
}

    .conteudo-dinamico h1, .conteudo-dinamico h2, .conteudo-dinamico h3 {
        font-family: 'Montserrat', sans-serif;
        color: var(--cor-primaria);
        font-weight: 700;
        margin-top: 2rem;
    }

    .conteudo-dinamico ul {
        padding-left: 1.5rem;
    }

    .conteudo-dinamico a {
        color: var(--cor-primaria);
        text-decoration: underline;
        font-weight: 600;
    }

    .conteudo-dinamico *:not(br) {
        white-space: normal;
    }

/* Ajuste local para o Accordion ficar na cor da marca em INSTITUCIONAL */
.accordion-button:not(.collapsed) {
    background-color: var(--cor-primaria-soft);
    color: var(--on-primaria-soft);
    box-shadow: none; /* Remove a borda azul padr�o */
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,0.1);
}

/* ==========================================================================
   9. HEADER E LOGO DIN�MICA
   ========================================================================== */
.img-logo-topo {
    max-height: 85px; /* Altura generosa para Desktop (pode aumentar se quiser) */
    width: auto;
    max-width: 280px; /* Limite de largura para logos muito compridas */
    object-fit: contain;
    transition: var(--transicao-padrao);
}

/* Reduz a logo automaticamente em celulares e tablets */
@media (max-width: 992px) {
    .img-logo-topo {
        max-height: 55px;
        max-width: 200px;
    }
}

/* ==========================================================================
   10. MICRO-ANIMA��ES E GATILHOS PSICOL�GICOS
   ========================================================================== */

/* Anima��o suave de entrada dos produtos (Efeito Cascata/Dopamina) */
.fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sombra aprimorada para a barra de pesquisa flutuante */
.shadow-flutuante {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15) !important;
}

/* Intera��o com o input de pesquisa */
.search-wrapper:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--cor-primaria-soft);
}

/* ==========================================================================
   11. MENU DROPDOWN ANIMADO E PREMIUM
   ========================================================================== */

/* Anima��o suave para o Dropdown abrir deslizando */
.navbar-dinamico .dropdown-menu {
    animation: slideDropdown 0.3s ease-out forwards;
    transform-origin: top center;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* Dropdowns (busca, menus) acompanham a superf�cie do tema em vez do branco fixo do Bootstrap */
.dropdown-menu {
    background-color: var(--superficie);
}

@keyframes slideDropdown {
    0% {
        opacity: 0;
        transform: scaleY(0.9) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
    }
}

/* Estilo individual de cada item do menu Dropdown */
.navbar-dinamico .dropdown-item {
    transition: all 0.2s ease;
    border-radius: 8px; /* Arredonda a sele��o interna */
    font-size: 0.95rem;
    color: var(--cor-texto);
    margin-bottom: 2px;
}

    /* Fundo super suave e �cone pula pra direita */
    .navbar-dinamico .dropdown-item:hover {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
        transform: translateX(5px); /* D� um passinho pro lado indicando interatividade */
    }

        /* O �cone dentro do link acompanha a cor no hover */
        .navbar-dinamico .dropdown-item:hover i {
            color: var(--cor-primaria) !important;
        }

/* Efeito 'Hover-Scale' Global para bot�es (voc� usou nas views, aqui est� o motor dele) */
.hover-scale {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
}

    .hover-scale:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    }

/* ==========================================================================
   12. LINKS DE A��O (TEXT LINKS)
   ========================================================================== */

/* Efeito cl�ssico de "Ver Mais" (Arrow Slide) usado em grandes e-commerces */
.link-campanha {
    transition: color 0.3s ease;
}

    .link-campanha i {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .link-campanha:hover {
        color: var(--cor-primaria-dark) !important;
        text-decoration: underline !important;
        text-underline-offset: 4px; /* Afasta a linha do texto para ficar mais leg�vel */
    }

        /* A setinha pula para a direita quando o mouse passa por cima do texto */
        .link-campanha:hover i {
            transform: translateX(6px);
        }
/* ==========================================================================
   BOT�ES DO BANNER PRINCIPAL (Premium & Responsivo)
   ========================================================================== */
.nav-banner-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Usa a cor do topo como fundo e a cor do menu como �cone para harmonia total */
    background-color: var(--cor-topo);
    color: var(--cor-menu);
    border: 1px solid rgba(0,0,0,0.05); /* Borda microsc�pica para separar de fundos da mesma cor */
    transition: var(--transicao-padrao);
}

    /* Quando passa o mouse, inverte as cores ou usa a prim�ria para dar destaque */
    .nav-banner-btn:hover {
        background-color: var(--cor-primaria);
        color: var(--cor-texto-primaria) !important;
    }

/* RESPONSIVIDADE MOBILE: Encolhe o bot�o em telas pequenas para n�o roubar espa�o do banner */
@media (max-width: 768px) {
    .nav-banner-btn {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   BANNER RESPONSIVO (Ajuste de Altura e Textos)
   ========================================================================== */
.img-banner-adaptativo {
    width: 100%;
    height: auto; /* A M�GICA: O banner dita a pr�pria altura, acabando com as faixas brancas */
    max-height: 700px; /* Trava de seguran�a para n�o explodir em monitores gigantes */
    object-fit: cover; /* Se bater na trava de 700px, ele corta o excesso suavemente */
    background-color: var(--cor-topo);
}

@media (max-width: 768px) {
    /* 1. Ajuste da Imagem: Altura menor e preenchimento total */
    .img-banner-adaptativo {
        height: auto !important; /* Deixa o celular calcular a altura exata baseada na largura */
        height: 250px;
        object-fit: cover !important; /* Faz a imagem preencher o espa�o, sumindo com o branco */
    }

    /* 2. Degrad� e Textos: O degrad� no mobile deve vir de BAIXO PARA CIMA (0deg) para leitura perfeita */
    .carousel-caption {
        background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%) !important;
        padding: 1.2rem !important;
    }

        /* 3. Escala Perfeita das Fontes para n�o quebrar a tela */
        .carousel-caption .display-5 {
            font-size: 1.3rem !important; /* T�tulo leg�vel mas compacto */
            margin-bottom: 0.3rem !important;
            line-height: 1.2;
        }

        .carousel-caption .lead {
            font-size: 0.85rem !important; /* Subt�tulo menor */
            margin-bottom: 0.5rem !important;
        }

        .carousel-caption .btn {
            padding: 0.3rem 1.2rem !important;
            font-size: 0.85rem !important;
        }
}

/* ==========================================================================
   BOT�O VOLTAR AO TOPO
   ========================================================================== */
.btn-voltar-topo {
    position: fixed;
    bottom: 100px; /* Fica estrategicamente acima do WhatsApp (que est� em 30px) */
    right: 35px;
    background-color: var(--cor-primaria-dark); /* Usa a cor escura do menu para n�o brigar com o verde do zap */
    color: var(--cor-texto-primaria);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: var(--sombra-suave);
    border: none;
    cursor: pointer;
}

    .btn-voltar-topo.show {
        opacity: 0.8;
        visibility: visible;
        transform: translateY(0);
    }

    .btn-voltar-topo:hover {
        opacity: 1;
        background-color: var(--cor-primaria);
        color: var(--cor-texto-primaria);
        transform: translateY(-3px);
    }

/* ==========================================================================
   13. MEGA-MENU DE CATEGORIAS  (Views/Shared/_Topo.cshtml)
   O ranking so em Modo Loja; a arvore do site (L42), quando o lojista a liga,
   em Cotacao e em Loja, com o desenho proprio da 13b. Regra em
   Services/DepartamentosNoTopo.cs. O desenho do ranking e o do
   mega-menu do Aurora: departamentos em colunas + trilho de atalhos
   (campanhas, Destaques, catalogo). Abre no hover (.dropdown-hover) e no
   clique.
   No desktop o painel se centraliza no container do topo: o item Categorias
   fica no meio do menu, e um painel de 720px ancorado nele sairia da tela nas
   larguras perto de 992px. Centraliza por margem, e nao por transform, porque
   o slideDropdown (secao 11) anima o transform. Na vertical ele nasce logo
   abaixo do link (top: auto), como o Campanhas: aberto, cobre o pe da barra,
   e a segunda linha de um item vizinho que quebre.
   No menu recolhido (celular) vira lista, sem o trilho: as campanhas ja estao
   no dropdown Campanhas, logo acima.
   ========================================================================== */

/* Sem overflow: hidden. Ele cortaria a ponte ::before do .dropdown-hover, que
   fica acima do painel, e o menu fecharia no caminho do mouse ate o primeiro
   item. O arredondamento chega ao trilho por heranca. */
.mega-categorias {
    border: 1px solid var(--cor-borda);
    text-align: start;
}

.mega-categorias-grid {
    border-radius: inherit;
}

.mega-categorias-depts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem 0.5rem;
    padding: 0.75rem;
    align-content: start;
}

.mega-categorias-dept {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .mega-categorias-dept i {
        color: var(--cor-primaria);
        font-size: 0.65rem;
        opacity: 0.6;
        flex-shrink: 0;
        transition: transform 0.15s ease, color 0.15s ease;
    }

    .mega-categorias-dept span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mega-categorias-dept:hover,
    .mega-categorias-dept:focus-visible {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
    }

        .mega-categorias-dept:hover i,
        .mega-categorias-dept:focus-visible i {
            color: var(--on-primaria-soft);
            transform: translateX(2px);
            opacity: 1;
        }

/* O trilho so aparece no desktop (ver o cabecalho da secao) */
.mega-categorias-rail {
    display: none;
}

.mega-categorias-rail-titulo {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cor-texto-muted);
    margin-bottom: 0.35rem;
}

.mega-categorias-rail-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .mega-categorias-rail-link i {
        color: var(--cor-primaria);
        flex-shrink: 0;
    }

    .mega-categorias-rail-link:hover,
    .mega-categorias-rail-link:focus-visible {
        background-color: var(--superficie);
        color: var(--acento-on-superficie);
    }

.mega-categorias-cta {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    border-radius: 999px;
    background-color: var(--cor-primaria);
    color: var(--cor-texto-primaria);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
}

    .mega-categorias-cta:hover,
    .mega-categorias-cta:focus-visible {
        background-color: var(--cor-primaria-hover);
        color: var(--on-primaria-hover);
    }

@media (min-width: 576px) {
    .mega-categorias-depts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    /* So o topo da Base e .navbar: o Aurora e o Confete nao sao afetados */
    .navbar.navbar-dinamico > .container {
        position: relative;
    }

    .navbar-dinamico .mega-categorias-host {
        position: static;
    }

    /* Centrado no .container, mas com o top automatico: o painel nasce logo abaixo do link,
       como o Campanhas, e a ponte de 0.5rem cobre o vao. Com top: 100% ele nascia na borda de
       baixo do .container, e entre o link e o painel sobrava uma faixa fora do li (27px com a
       logo de 85px) onde o hover se perdia e o menu fechava. */
    /* A ponte do .dropdown-hover (secao 11) se mede da caixa de padding, e este painel
       tem borda de 1px: sem descontar a borda, sobrava 1px entre o link e a ponte, e
       o Firefox fechava o menu ali. */
    .navbar-dinamico .mega-categorias-host > .mega-categorias::before {
        top: calc(-0.5rem - 1px);
    }

    .navbar-dinamico .mega-categorias-host > .mega-categorias {
        width: min(720px, calc(100vw - 2rem));
        top: auto;
        left: 50% !important;
        margin-left: calc(min(720px, calc(100vw - 2rem)) / -2);
    }

    .mega-categorias-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 230px;
    }

    .mega-categorias-depts {
        padding: 1rem;
    }

    .mega-categorias-rail {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 1rem;
        background-color: color-mix(in srgb, var(--cor-primaria) 6%, var(--superficie));
        border-left: 1px solid var(--cor-borda);
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
    }
}

/* O item Categorias alarga o menu. Medido em 15/09/2026 no topo real de uma
   loja Base (5 itens + Categorias): no container de 1140px (1200 a 1399px de
   tela, a faixa do notebook de 1366) "Dia do Cliente" e "Quem Somos" quebravam
   em duas linhas, e sem a quebra o menu passaria 73px da borda; no container
   de 960px (992 a 1199px) o menu, que ja passava 28px da borda sem Categorias,
   passou a passar 154px (a faixa de 992 a 1199px e tratada logo abaixo, D15). O espaco entre os itens encolhe SO quando o menu
   Categorias existe (:has): o Base sem o menu (Modo Cotacao sem a arvore do
   site) nao muda. Navegador sem
   :has fica com o espacamento antigo, e o texto quebra linha como antes. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-dinamico .navbar-nav:has(> .mega-categorias-host) {
        column-gap: 0.25rem !important;
    }

        .navbar-dinamico .navbar-nav:has(> .mega-categorias-host) > .nav-item > .nav-link {
            padding-left: 0.4rem !important;
            padding-right: 0.4rem !important;
        }
}

/* O topo da Base numa linha so entre 992 e 1199px (L42, D15, 25/09/2026). O ajuste acima
   nao bastava: a 1024px "Dia dos Pais" quebrava em tres linhas, "Quem Somos" e "Entrar" em
   duas. Vale para toda loja Base, com ou sem o menu Categorias (sem
   ele o menu ja passava 28px da borda). So CSS: o texto de "Orcamento" e "Entrar" sai da
   tela pelo font-size 0 e continua sendo o nome do link para o leitor de tela; o icone
   volta ao tamanho proprio. So .navbar: o Aurora e o Confete usam .navbar-dinamico num div.
   A altura do topo nao muda (128px, pelo logo de 95px): o defeito era o texto quebrado. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar.navbar-dinamico .nav-link {
        white-space: nowrap;
    }

    .navbar.navbar-dinamico .navbar-nav.gap-3 {
        gap: 0.5rem !important;
    }

    .navbar.navbar-dinamico .btn-carrinho-topo {
        font-size: 0;
        gap: 0;
        padding: 8px 12px !important;
    }

        .navbar.navbar-dinamico .btn-carrinho-topo .icone-carrinho {
            font-size: 1.25rem;
            margin-right: 0 !important;
        }

    .navbar.navbar-dinamico .btn-login-topo {
        font-size: 0;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

        .navbar.navbar-dinamico .btn-login-topo .bi {
            font-size: 1.1rem;
            margin-right: 0 !important;
        }
}

/* E entre 1200 e 1399px (a faixa do notebook de 1366), estendido pelo responsavel em
   25/09/2026 (D15): no Base em Modo Loja "Quem Somos" e "Entrar" ja quebravam em duas
   linhas a 1280 e a 1366px. Aqui cabe com o texto: sem quebra e com menos espaco entre os
   botoes, medido no dixone a 1280 e a 1366px (uma linha, 12px dentro da borda). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar.navbar-dinamico .nav-link,
    .navbar.navbar-dinamico .btn-login-topo {
        white-space: nowrap;
    }

    .navbar.navbar-dinamico .navbar-nav.gap-3 {
        gap: 0.5rem !important;
    }

    .navbar.navbar-dinamico .btn-carrinho-topo {
        padding: 8px 14px !important;
    }

    .navbar.navbar-dinamico .btn-login-topo {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-dinamico .navbar-nav:has(> .mega-categorias-host) {
        column-gap: 0.5rem !important;
    }

        .navbar-dinamico .navbar-nav:has(> .mega-categorias-host) > .nav-item > .nav-link {
            padding-left: 0.6rem !important;
            padding-right: 0.6rem !important;
        }
}

/* --------------------------------------------------------------------------
   13b. A ARVORE DO SITE NO MEGA-MENU  (L42, navegacao.categoriasSite.exibir)
   Tudo aqui mora sob .mega-categorias-arvore, que o _Topo so poe no modo
   arvore: o ranking, sem a flag, nao muda de visual.
   - Desktop (D13): a coluna com todos os departamentos a esquerda, o painel
     das subcategorias do departamento ativo ao lado e o trilho Explorar a
     direita. Um painel por departamento com subcategoria, todos no HTML e
     escondidos pelo atributo hidden: o wwwroot/js/menu-categorias.js poe o
     .is-ativo no departamento e tira o hidden do painel dele (contrato
     data-mc-*). O painel traz o nome do departamento, o "Ver tudo em" e as
     subcategorias, em 2 colunas a partir de 6.
   - Cada coluna rola sozinha, ate min(70vh, 36rem). A rolagem nunca no
     .dropdown-menu, que cortaria a ponte ::before do .dropdown-hover.
   - Todo link leva .dropdown-item, para as setas percorrerem o menu (R11). O
     visual do .dropdown-item (Bootstrap e secao 11) e sobrescrito aqui, so
     com tokens.
   - Menu recolhido (celular): so os departamentos, como a lista do ranking,
     sem a seta, sem os paineis e sem o visual do .is-ativo. As subcategorias
     viram chips na pagina da categoria (13c).
   -------------------------------------------------------------------------- */

/* O que o .dropdown-item traz e o mega-menu nao quer: o nowrap (nome longo
   quebra linha, sem estourar a coluna), a margem e o passo para o lado da
   secao 11 */
.mega-categorias-arvore .dropdown-item {
    white-space: normal;
    overflow-wrap: break-word;
    margin-bottom: 0;
    border-radius: 8px;
    color: var(--cor-texto);
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .mega-categorias-arvore .dropdown-item:hover,
    .mega-categorias-arvore .dropdown-item:focus-visible,
    .mega-categorias-arvore .dropdown-item:active {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
        transform: none;
    }

    /* Foco por dentro e na cor do texto: a coluna com rolagem cortaria o
       contorno de fora, e a cor do texto ja contrasta com o fundo do estado */
    .mega-categorias-arvore .dropdown-item:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -2px;
    }

    /* A secao 11 pinta o icone do .dropdown-item no hover com a primaria, e
       com !important: no CTA seria primaria sobre primaria; nas setas do
       departamento e do "Ver tudo em", o icone acompanha o texto. */
    .mega-categorias-arvore .mega-categorias-departamento:hover i,
    .mega-categorias-arvore .mega-categorias-ver-tudo:hover i,
    .mega-categorias-arvore .mega-categorias-cta:hover i {
        color: inherit !important;
    }

/* A coluna dos departamentos: no celular, a lista do ranking (1 coluna, 2
   a partir de 576px); no desktop, uma coluna so (ver a media de 992px) */
.mega-categorias-arvore .mega-categorias-departamentos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.1rem 0.5rem;
    padding: 0.75rem;
}

.mega-categorias-arvore .mega-categorias-departamento {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

    .mega-categorias-arvore .mega-categorias-departamento span {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* A seta do departamento com subcategoria so aparece no desktop */
    .mega-categorias-arvore .mega-categorias-departamento i {
        display: none;
        flex-shrink: 0;
        font-size: 0.7rem;
        opacity: 0.45;
        transition: transform 0.15s ease, opacity 0.15s ease;
    }

/* Os paineis so aparecem no desktop */
.mega-categorias-arvore .mega-categorias-paineis {
    display: none;
}

.mega-categorias-arvore .mega-categorias-painel-titulo {
    display: block;
    padding: 0 0.6rem;
    color: var(--cor-titulo);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.mega-categorias-arvore .mega-categorias-ver-tudo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0.5rem;
    padding: 0.35rem 0.6rem;
    color: var(--acento-on-superficie);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

    .mega-categorias-arvore .mega-categorias-ver-tudo i {
        flex-shrink: 0;
        font-size: 0.8rem;
    }

/* As subcategorias abaixo de um fio; de 6 em diante, em 2 colunas, lidas de
   cima para baixo como a ordem das setas. Navegador sem :has fica com 1
   coluna. */
.mega-categorias-arvore .mega-categorias-subs {
    padding-top: 0.5rem;
    border-top: 1px solid var(--cor-borda);
}

    .mega-categorias-arvore .mega-categorias-subs:has(> :nth-child(6)) {
        columns: 2;
        column-gap: 1rem;
    }

.mega-categorias-arvore .mega-categorias-sub {
    break-inside: avoid;
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
}

/* O trilho e o CTA com o visual do ranking, por cima do .dropdown-item */
.mega-categorias-arvore .mega-categorias-rail-link {
    white-space: nowrap;
    font-size: 0.85rem;
}

    .mega-categorias-arvore .mega-categorias-rail-link:hover,
    .mega-categorias-arvore .mega-categorias-rail-link:focus-visible,
    .mega-categorias-arvore .mega-categorias-rail-link:active {
        background-color: var(--superficie);
        color: var(--acento-on-superficie);
    }

.mega-categorias-arvore .mega-categorias-cta {
    white-space: nowrap;
    border-radius: 999px;
    background-color: var(--cor-primaria);
    color: var(--cor-texto-primaria);
    font-size: 0.85rem;
    font-weight: 700;
}

    .mega-categorias-arvore .mega-categorias-cta:hover,
    .mega-categorias-arvore .mega-categorias-cta:focus-visible,
    .mega-categorias-arvore .mega-categorias-cta:active {
        background-color: var(--cor-primaria-hover);
        color: var(--on-primaria-hover);
    }

@media (min-width: 576px) {
    .mega-categorias-arvore .mega-categorias-departamentos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    /* Mais largo que o do ranking, para caber a coluna, o painel com 2
       colunas e o trilho; a 992px o painel fica com ~450px. Centrado no
       .container como o do ranking. */
    .navbar-dinamico .mega-categorias-host > .mega-categorias.mega-categorias-arvore {
        width: min(1040px, calc(100vw - 2rem));
        margin-left: calc(min(1040px, calc(100vw - 2rem)) / -2);
    }

    /* Sem overflow: hidden (ver a secao 13): o arredondamento chega a coluna
       por heranca, como no trilho */
    .mega-categorias-arvore .mega-categorias-navegacao {
        display: grid;
        grid-template-columns: 17rem minmax(0, 1fr);
        min-width: 0;
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
    }

    .mega-categorias-arvore .mega-categorias-departamentos,
    .mega-categorias-arvore .mega-categorias-paineis {
        max-height: min(70vh, 36rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--cor-borda) transparent;
    }

    /* A coluna no fundo do trilho, e o painel na superficie entre os dois */
    .mega-categorias-arvore .mega-categorias-departamentos {
        grid-template-columns: minmax(0, 1fr);
        background-color: color-mix(in srgb, var(--cor-primaria) 6%, var(--superficie));
        border-right: 1px solid var(--cor-borda);
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
    }

    .mega-categorias-arvore .mega-categorias-departamento:hover {
        background-color: var(--superficie);
        color: var(--cor-texto);
    }

    .mega-categorias-arvore .mega-categorias-departamento i {
        display: block;
    }

    /* O departamento ativo: o do painel a vista, com a seta acesa */
    .mega-categorias-arvore .mega-categorias-departamento.is-ativo,
    .mega-categorias-arvore .mega-categorias-departamento.is-ativo:hover,
    .mega-categorias-arvore .mega-categorias-departamento.is-ativo:focus-visible {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
    }

        .mega-categorias-arvore .mega-categorias-departamento.is-ativo i {
            opacity: 1;
            transform: translateX(2px);
        }

    .mega-categorias-arvore .mega-categorias-paineis {
        display: block;
        min-width: 0;
        padding: 1rem 1.25rem;
    }

    /* Arvore sem nenhuma subcategoria: o _Topo nao escreve a area dos
       paineis, que ficaria vazia, e a coluna ocupa o lugar dela em 2 colunas,
       como a lista do ranking. Sem :has, fica a coluna de 17rem. */
    .mega-categorias-arvore .mega-categorias-navegacao:not(:has(> .mega-categorias-paineis)) {
        grid-template-columns: minmax(0, 1fr);
    }

        .mega-categorias-arvore .mega-categorias-navegacao:not(:has(> .mega-categorias-paineis)) > .mega-categorias-departamentos {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            border-right: 0;
        }
}

/* --------------------------------------------------------------------------
   13c. AS SUBCATEGORIAS NA PAGINA DA CATEGORIA  (Views/Catalogo/Index.cshtml)
   L42, R9: no celular o menu so tem os departamentos, e as subcategorias
   viram chips abaixo do H1, em todas as larguras; na subcategoria, o "voltar
   a" leva ao departamento. So existem com a flag. Ficam sobre o fundo da
   pagina: tokens do contexto da pagina, e o atual com a primaria.
   -------------------------------------------------------------------------- */
.mega-categorias-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    color: var(--acento);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

    .mega-categorias-voltar:hover,
    .mega-categorias-voltar:focus-visible {
        text-decoration: underline;
    }

.mega-categorias-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.mega-categorias-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    color: var(--cor-texto);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

    .mega-categorias-chip span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mega-categorias-chip:hover,
    .mega-categorias-chip:focus-visible {
        background-color: var(--cor-primaria-soft);
        border-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
    }

    .mega-categorias-chip:focus-visible {
        outline: 2px solid var(--acento);
        outline-offset: 2px;
    }

    .mega-categorias-chip[aria-current="page"] {
        background-color: var(--cor-primaria);
        border-color: var(--cor-primaria);
        color: var(--on-primaria);
    }

/* ==========================================================================
   Sugestões da busca do topo (L44, fatia 2) — wwwroot/js/busca-sugestoes.js
   O desenho é o .dropdown-menu / .dropdown-item de cada tema; aqui só a posição, a foto e a quebra.
   ========================================================================== */
.busca-sugestoes-ancora {
    position: relative;
}

.busca-sugestoes {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    min-width: 16rem;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    z-index: 1060;
}

.busca-sugestoes .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: normal;
}

.busca-sugestoes .dropdown-item img {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    object-fit: contain;
    border-radius: .25rem;
    background: #fff;
}

.busca-sugestoes .busca-sugestoes-todos {
    font-weight: 600;
}

/* A opção escolhida pelas setas: o par primária / texto sobre a primária do tema, o do botão principal.
   O .dropdown-item.active do tema deixava o texto claro sobre a primária clara (Aurora: ~1,8:1). */
.busca-sugestoes .dropdown-item.active,
.busca-sugestoes .dropdown-item:active {
    background-color: var(--cor-primaria);
    color: var(--on-primaria);
}

/* ==========================================================================
   Categorias do catálogo (L44, fatia 3) — Views/Catalogo/_CategoriasDoCatalogo.cshtml e o painel de
   filtros do Base no celular. Só aparecem com a árvore da loja ligada; sem ela, o catálogo não muda.
   ========================================================================== */
.catalogo-categorias-lista,
.catalogo-categorias-subs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalogo-categorias-subs {
    margin: 0.15rem 0 0.35rem 0.6rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--cor-borda);
}

.catalogo-categorias-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Os links e a seta são relative para conter o texto do leitor de tela (.visually-hidden, absoluto): sem
   isso, ele escapa da rolagem do cartão e pode alargar a página. */
.catalogo-categorias-link {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    color: var(--cor-texto);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.catalogo-categorias-subs .catalogo-categorias-link {
    font-size: 0.85rem;
    font-weight: 500;
}

.catalogo-categorias-link:hover,
.catalogo-categorias-link[aria-current="true"] {
    background-color: var(--cor-primaria-soft);
    color: var(--on-primaria-soft);
}

.catalogo-categorias-link[aria-current="page"] {
    background-color: var(--cor-primaria);
    color: var(--on-primaria);
}

.catalogo-categorias-nome {
    overflow-wrap: anywhere;
}

.catalogo-categorias-total {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cor-texto-muted);
}

.catalogo-categorias-link:hover .catalogo-categorias-total,
.catalogo-categorias-link[aria-current] .catalogo-categorias-total {
    color: inherit;
}

.catalogo-categorias-abrir {
    position: relative;
    flex: none;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--cor-texto-muted);
}

    .catalogo-categorias-abrir:hover {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
    }

    .catalogo-categorias-abrir i {
        transition: transform 0.2s ease;
    }

    .catalogo-categorias-abrir[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

@media (prefers-reduced-motion: reduce) {
    .catalogo-categorias-abrir i {
        transition: none;
    }
}

/* Na página da categoria: a busca é dentro dela. */
.catalogo-busca-no-no {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--cor-texto-muted);
}

.catalogo-busca-no-no-sair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: var(--cor-texto);
    text-decoration: none;
}

    .catalogo-busca-no-no-sair:hover {
        background-color: var(--cor-primaria-soft);
        color: var(--on-primaria-soft);
    }

/* No celular, a coluna de filtros é o painel (offcanvas-lg): sem o espaço de linha da .row g-4, e o
   cartão ocupa o painel e rola dentro dele, em vez de grudar e medir a altura da tela. */
@media (max-width: 991.98px) {
    .row > .catalogo-painel-filtros {
        margin-top: 0;
    }

    .catalogo-painel-filtros > .sidebar-filtros {
        position: static;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}