/*RESPONSIVIDADE*/

.conteudoMiolo {
    width: 94% !important;
    margin-left: var(--redesign-collapsed-menu-width) !important;
    padding: 0 !important;
    left: 0 !important;
}

.rodape {
    width: 100% !important;
}


@media screen and (max-width: 767px) {
    .redesign .containerProductCards {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .redesign .header {
        display: none;
    }

    .redesign .mainContainer {
        margin-top: 115px !important;
        padding-left: 0px !important;
    }

    .redesign .card-item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .redesign .button {
        padding: 10px !important;
    }

    .redesign .btn-primary {
        font-size: 14px !important;
    }

/*    MENU*/
    .menuMobile#carregaMenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9999 !important;
    }

    .menuMobile#carregaMenu:not(.menunovaLargura) {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .menuMobile#carregaMenu:not(.menunovaLargura) #carrega {
        height: 100vh !important;
        height: 100dvh !important;
    }

    .menuMobile#carregaMenu:not(.menunovaLargura) .menuLinks {
        height: calc(100dvh - 55px - 150px) !important;
        overflow-y: auto !important;
    }

    /* Sobrescreve style.css mobile que escondia o botao de voltar */
    .menuMobile#carregaMenu .encolheMenu {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 40px;
    }

    .menuMobile#carregaMenu .encolheMenu i {
        color: var(--redesign-primary-color) !important;
        font-size: 20px !important;
    }

    /* Fechado no mobile: fica escondido, exibindo apenas o botao no header */
    .menuMobile#carregaMenu.menunovaLargura {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .menuMobile .tituloMain {
        display: initial !important;
    }

    /* Sobrescreve o style.css legado que esconde .menuLinks no mobile */
    .menuMobile .menuLinks {
        display: block !important;
    }

    /* No estado recolhido, mantém os links ocultos no celular */
    .menuMobile.menunovaLargura .menuLinks {
        display: none !important;
    }

    .menuMobile .menuUsuario {
        display: initial !important;
    }

    .redesign .headerRedesign {
        padding: .6rem .8rem !important;
        padding-left: .8rem !important;
    }

    .redesign .headerRedesign .redesign-info {
        gap: .8rem !important;
    }

    .redesign .headerRedesign .menu-toggle-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .redesign .headerRedesign .redesign-info .app-version,
    .redesign .headerRedesign .user-chip span {
        display: none !important;
    }

    .redesign .headerRedesign .user-chip {
        border-radius: 50%;
        padding: 4px !important;
        padding-right: 4px !important;
        min-width: 38px;
        justify-content: center;
    }

    .content-wrap {
        flex-direction: column;
    }

    .right-side {
        display: none !important;
    }
}

