/* =========================================================
   PHINUS — CSS COMPLETO E LIMPO
   DESKTOP + MOBILE
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

body {
    background: #ffffff;
}

.conteiner {
    max-width: 1280px;
}


/* =========================================================
   ESPAÇAMENTO
   ========================================================= */

.secao-banners {
    margin-bottom: 46px;
}

.listagem {
    margin-top: 25px;
    margin-bottom: 55px;
}


/* =========================================================
   CARDS DOS PRODUTOS
   ========================================================= */

.listagem-item {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.listagem-item .imagem-produto,
.listagem-item .imagem-produto a,
.listagem-item .imagem-produto img {
    border-radius: 18px !important;
    overflow: hidden !important;
}

.listagem-item .nome-produto {
    margin-top: 14px;
    line-height: 1.35;
}


/* =========================================================
   PÁGINAS DE CATEGORIA
   ========================================================= */

.pagina-categoria .coluna {
    display: none !important;
}

.pagina-categoria .conteudo {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
}

.pagina-categoria .conteiner {
    max-width: 1280px !important;
}

.pagina-categoria .listagem {
    width: 100% !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 768px) {

    .pagina-categoria .listagem .listagem-linha > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .pagina-categoria .listagem .listagem-linha > ul > li {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        box-sizing: border-box !important;
        padding: 0 22px 55px !important;
        margin: 0 !important;
    }


    /* LOGO DESKTOP */

    h1.logo.cor-secundaria {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    h1.logo.cor-secundaria a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    h1.logo.cor-secundaria a > img,
    h1.logo.cor-secundaria img[alt="Phinus"] {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        height: 95px !important;
        max-height: 95px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    .conteiner {
        width: auto !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       CABEÇALHO MOBILE
       ===================================================== */

    header .row.flex.align-items-center {
        display: flex !important;
        align-items: center !important;
    }


    /*
       BLOCO ESQUERDO:
       HAMBÚRGUER + LOGO NA MESMA LINHA
    */

    header .col.g_menu {
        display: flex !important;
        align-items: center !important;
    }

    header .col.g_menu > .col-auto {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        height: 70px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       HAMBÚRGUER
       VOLTA TOTALMENTE AO DESENHO NATIVO DO TEMA
       ===================================================== */

    button.menu-trigger.menu-toggle {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 24px !important;
        height: 24px !important;

        margin: 0 15px 0 0 !important;
        padding: 0 !important;

        align-self: center !important;
    }


    /*
       NÃO ALTERAMOS ::before NEM ::after.
       O tema desenha as três barras.
    */


    /* =====================================================
       LOGO MOBILE
       ===================================================== */

    h1.logo.cor-secundaria {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        transform: none !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        align-self: center !important;
    }

    h1.logo.cor-secundaria a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    h1.logo.cor-secundaria a > img,
    h1.logo.cor-secundaria img[alt="Phinus"] {
        display: block !important;

        width: auto !important;
        max-width: none !important;

        height: 70px !important;
        max-height: 70px !important;

        margin: 0 !important;

        object-fit: contain !important;
    }


    /* =====================================================
       PRODUTOS MOBILE
       ===================================================== */

    .pagina-categoria .conteudo {
        width: 100% !important;
        margin: 0 !important;
    }

    .pagina-categoria .listagem .listagem-linha > ul {
        display: flex !important;
        flex-wrap: wrap !important;

        margin-left: -6px !important;
        margin-right: -6px !important;
    }

    .pagina-categoria .listagem .listagem-linha > ul > li {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;

        float: none !important;

        margin: 0 !important;
        padding: 0 6px 30px !important;

        box-sizing: border-box !important;
    }

    .listagem-item .imagem-produto,
    .listagem-item .imagem-produto a,
    .listagem-item .imagem-produto img {
        border-radius: 14px !important;
    }

    .listagem-item .nome-produto {
        margin-top: 10px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

}