/* ========================================================== */
/* MEGA-MENU -- Desktop                                        */
/* ========================================================== */

/* O header precisa ficar ABAIXO do backdrop do modal do Bootstrap (1040) para nao
   cobrir/clarear os modais abertos, e ACIMA do overlay do mega-menu (1030) para o
   painel dropdown (.mega-painel) aparecer corretamente sobre o conteudo da pagina.
   Valores antigos (9998/9999) venciam o modal e deixavam o header por cima dele. */
.header-bottom {
    position: relative;
    z-index: 1031;
}

/* .header-middle (logo, busca, dropdown do usuario) precisa ficar acima do .header-bottom */
.header-middle {
    position: relative;
    z-index: 1032;
}

/* Remove o override anterior que nao tinha efeito */

.menu-novo {
    padding-top: 0.7rem;
}

    .menu-novo > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.2rem;
        flex-wrap: nowrap;
    }

        .menu-novo > ul > li {
            position: static;
        }

            .menu-novo > ul > li > a {
                display: block;
                padding: 0.6rem 0.9rem;
                color: #555;
                font-size: var(--fonte-size-base);
                white-space: nowrap;
                border-radius: 4px 4px 0px 0px;
                transition: background-color 120ms, color 120ms;
            }

                .menu-novo > ul > li > a:hover:not(.menu-item-btn),
                .menu-novo > ul > li > a.mega-ativo {
                    background-color: var(--cor-submenu-active);
                    color: var(--cor-padrao);
                    text-decoration: none;
                }

                .menu-novo > ul > li > a > span {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.35rem;
                    font-size: var(--fonte-size-base);
                }

                    .menu-novo > ul > li > a > span > i {
                        font-size: 0.7em;
                        color: #aaa;
                        transition: transform 150ms;
                    }

    /* Sobrescreve regra legada do site.css que forcava 20px no icone do all-departamentos */
    .menu-novo .all-departamentos i {
        font-size: 0.7em !important;
    }

    .menu-novo > ul > li > a.mega-ativo > span > i {
        transform: rotate(180deg);
        color: var(--cor-padrao);
    }

    .menu-novo a.menu-item-destaque {
        font-weight: 700;
    }

    .menu-novo a.menu-item-btn {
        background-color: var(--cor-menu-item-btn);
        color: white;
        border-radius: 10px 10px 0px 0px;
        padding: 0.55rem 1.4rem !important;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

        .menu-novo a.menu-item-btn:hover {
            opacity: 0.9;
            text-decoration: none !important;
        }

    .menu-novo li.no-underline > a::after {
        display: none;
    }

    .menu-novo > ul > li:not(.no-underline) > a::after {
        content: '';
        display: block;
        height: 2px;
        background-color: var(--cor-padrao);
        transform: scaleX(0);
        transition: transform 120ms ease-in-out;
    }

.header-bottom.black-friday .menu-novo > ul > li > a > span > i {
    color: #fff !important;
}

/* -- Overlay escurecido quando o mega-menu esta aberto -- */
/* O z-index precisa ficar ABAIXO do modal do Bootstrap (backdrop 1040 / modal 1050).
   Com um valor alto (ex.: 9000) este overlay cobria qualquer modal aberto,
   deixando o conteudo escuro e sem clique. */
.mega-overlay {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1030;
    animation: overlayFadeIn 180ms ease-out forwards;
}

    .mega-overlay.mega-overlay-visivel {
        display: block;
    }

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* -- Painel dropdown (mega-painel) -- */
.mega-painel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: #fff;
    border-top: 2px solid var(--cor-padrao);
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
    z-index: 9999;
    border-radius: 0 0 8px 8px;
    animation: megaFadeIn 120ms ease-out forwards;
    /* padding-top cria area de tolerancia invisivel: mouse pode passar por cima sem fechar */
    padding-top: 6px;
}

    .mega-painel.mega-visivel {
        display: block;
    }

@keyframes megaFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* -- Departamento individual: grid de categorias -- */
.mega-categorias-wrapper {
    padding: 2rem 2.4rem;
    min-height: 18rem;
    display: flex;
    align-items: flex-start;
}

.mega-categorias {
    column-count: 3;
    column-gap: 2.8rem;
    column-fill: balance;
    width: 100%;
}

.mega-grupo {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.6rem;
}

.mega-grupo-titulo {
    display: block;
    font-size: var(--fonte-size-base);
    font-weight: 700;
    color: #222;
    padding: 0.3rem 0.5rem 0.4rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0.35rem;
    text-decoration: none;
    border-radius: 4px;
    transition: color 100ms, background-color 100ms;
}

    .mega-grupo-titulo:hover {
        color: var(--cor-padrao);
        background-color: var(--cor-submenu-active);
        text-decoration: none;
    }

.mega-grupo-filho {
    display: block;
    font-size: var(--fonte-size-base);
    color: #555;
    padding: 0.25rem 0.5rem 0.25rem 0.8rem;
    text-decoration: none;
    border-radius: 4px;
    transition: color 100ms, background-color 100ms;
}

    .mega-grupo-filho:hover {
        color: var(--cor-padrao);
        background-color: var(--cor-submenu-active);
        text-decoration: none;
    }

.mega-item-simples {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 0.3rem;
}

    .mega-item-simples a {
        display: block;
        font-size: var(--fonte-size-base);
        font-weight: 700;
        color: #222;
        padding: 0.3rem 0.5rem;
        text-decoration: none;
        border-radius: 4px;
        transition: color 100ms, background-color 100ms;
    }

        .mega-item-simples a:hover {
            color: var(--cor-padrao);
            background-color: var(--cor-submenu-active);
            text-decoration: none;
        }

/* -- Todos os Produtos: two-panel -- */
.mega-todos-wrapper {
    display: flex;
    min-height: 28rem;
    max-height: 70vh;
}

.mega-todos-esquerda {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid #f0f0f0;
    overflow-y: auto;
    padding: 1rem 0;
    background-color: #fafafa;
    border-radius: 0 0 0 8px;
}

    .mega-todos-esquerda::-webkit-scrollbar {
        width: 4px;
    }

    .mega-todos-esquerda::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
    }

.mega-dep-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.2rem;
    font-size: var(--fonte-size-base);
    color: #444;
    cursor: pointer;
    transition: background-color 80ms, color 80ms;
    text-decoration: none;
}

    .mega-dep-item:hover, .mega-dep-item.mega-dep-ativo {
        background-color: var(--cor-submenu-active);
        color: var(--cor-padrao);
        font-weight: 600;
        text-decoration: none;
    }

    .mega-dep-item > i {
        font-size: 1rem;
        opacity: 0.5;
    }

    .mega-dep-item.mega-dep-ativo > i {
        opacity: 1;
    }

.mega-todos-direita {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 2.4rem;
}

    .mega-todos-direita::-webkit-scrollbar {
        width: 4px;
    }

    .mega-todos-direita::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
    }

.mega-dep-painel {
    display: none;
    animation: megaFadeIn 100ms ease-out forwards;
}

    .mega-dep-painel.mega-dep-painel-ativo {
        display: block;
    }

    /* Quando .mega-categorias-wrapper esta dentro do painel de "Todos", remove o padding duplo */
    .mega-dep-painel .mega-categorias-wrapper {
        padding: 0;
        min-height: unset;
    }

    /* O painel direito e mais estreito, entao usa menos colunas */
    .mega-dep-painel .mega-categorias {
        column-count: 2;
    }

/* -- Loader -- */
.mega-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
}

.mega-loader-spinner {
    width: 2.4rem;
    height: 2.4rem;
    border: 3px solid #eee;
    border-top-color: var(--cor-padrao);
    border-radius: 50%;
    animation: megaSpin 0.7s linear infinite;
}

@keyframes megaSpin {
    to {
        transform: rotate(360deg);
    }
}