/**
 * CORREÇÃO DESKTOP - Forçar menu horizontal em resoluções maiores que 1200px
 * Arquivo: desktop-menu-fix.css
 * Data: 2026-03-25
 */

/* Forçar menu desktop em resolução >= 1200px */
@media screen and (min-width: 1200px) {
    /* .menu-toggle contém o logo — manter visível em desktop, esconder apenas o botão hambúrguer */
    .back-main-menu .menu-toggle,
    .pi-main-menu .menu-toggle {
        display: flex !important;
        align-items: center;
    }
    .back-main-menu .menu-toggle #menu-btn,
    .pi-main-menu .menu-toggle #menu-btn {
        display: none !important;
    }

    /* nav: row align-center flex-start. Logo + menu agrupados à esquerda, searchbar
       é empurrado para a direita via margin-left:auto. */
    .back-main-menu nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    /* Override do flex:1 do .searchbar-part (style.css:674-678) e empurra à direita */
    .back-header .searchbar-part {
        flex: 0 0 auto;
        margin-left: auto;
    }
    /* Espaço entre o último item do menu e o botão "Minha Conta" */
    .back-header .searchbar-part .back-btn {
        margin-left: 30px;
    }
    /* Logo maior em desktop — força sobrescrever .img-fluid e width inline */
    .back-header .logo img {
        width: 280px !important;
        max-width: 280px !important;
        height: auto !important;
    }
    /* Reduzir padding-right do logo (default 57px) para ganhar espaço horizontal */
    .back-header .logo {
        padding-right: 20px !important;
    }
    /* Items do menu mais compactos para caber tudo dentro do container 1200px */
    .back-menus > li > a,
    .back-inner-menus .back-menus > li > a {
        padding: 26px 14px 26px 14px !important;
    }

    /* Forçar menu horizontal horizontal (float left) */
    .back-menus,
    .back-inner-menus .back-menus {
        display: flex !important;
        flex-direction: row !important;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    /* Items do menu com float left e alinhamento horizontal */
    .back-menus > li,
    .back-inner-menus .back-menus > li {
        display: block !important;
        float: left;
        margin: 0;
        padding: 0;
        border: 0;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .back-menus > li > a,
    .back-inner-menus .back-menus > li > a {
        white-space: nowrap;
    }
    
    /* Links do menu exibição correta */
    .back-menus > li > a,
    .back-inner-menus .back-menus > li > a {
        display: block !important;
        position: relative;
        margin: 0;
        padding: 26px 24px 26px 24px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
    }
    
    /* Submenus oculto até hover */
    .back-menus li ul.sub-menu,
    .back-inner-menus .back-menus li ul.sub-menu {
        display: none !important;
        list-style: none;
        clear: both;
        margin: 0;
        position: absolute;
        z-index: 999;
    }
    
    /* Mostrar submenu ao hover */
    .back-menus li:hover > ul.sub-menu,
    .back-inner-menus .back-menus li:hover > ul.sub-menu {
        display: block !important;
    }
    
    /* (Removido) .back-header display:flex — quebrava a centralização do .container Bootstrap.
       O alinhamento vertical agora é feito pelo <nav> flex (regra acima). */

    /* (Removido) .back-inner-menus display:flex — entrava em conflito com display:contents
       de style.css:320 que é o que mantém o layout interno do nav funcionando. */
    
    /* Container de mega menu desktop */
    #back-header .back-menus li.mega-inner ul.mega-menu {
        left: 0 !important;
        right: 0 !important;
        display: none !important;
    }
    
    /* Mostrar mega menu ao hover em desktop */
    #back-header .back-menus li.mega-inner:hover ul.mega-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        z-index: 111;
        height: auto;
    }
}

/* Menu aparência correta em desktop XXL (1920px+) */
@media screen and (min-width: 1920px) {
    .back-menus > li > a {
        padding: 26px 28px 26px 28px;
    }
}

/* Remover padding excessivo em menu touch/tablet */
@media screen and (max-width: 1199px) {
    .back-main-menu .menu-toggle {
        display: flex !important;
    }
}