/* =========================================================
   PÁGINA DE CATEGORIA
   RESPONSIVO
   ========================================================= */

:root {

    --preto: #111111;
    --preto-suave: #1c1c1c;

    --cinza-escuro: #333333;
    --cinza: #666666;
    --cinza-medio: #888888;
    --cinza-claro: #dddddd;

    --cinza-fundo: #f5f5f5;

    --branco: #ffffff;

    --borda: #e5e5e5;

}


/* =========================================================
   BODY
   ========================================================= */

body {

    background: var(--cinza-fundo);

}


body.filtro-menu-aberto {

    overflow: hidden;

}


/* =========================================================
   PÁGINA
   ========================================================= */

.pagina-produtos {

    width: 90%;

    max-width: 1400px;

    margin: 50px auto 50px;

    display: flex;

    align-items: flex-start;

    gap: 30px;

    box-sizing: border-box;

}


/* =========================================================
   FILTRO LATERAL — DESKTOP
   ACIMA DE 900PX
   ========================================================= */

.filtro-lateral {

    width: 280px;

    flex: 0 0 280px;

    background: var(--branco);

    padding: 28px;

    border-radius: 18px;

    border: 1px solid var(--borda);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .07);

    box-sizing: border-box;

    /*
     * O filtro permanece dentro do fluxo normal.
     * NÃO é fixed.
     */

    position: static;

}


/* =========================================================
   CABEÇALHO DO FILTRO
   ========================================================= */

.filtro-cabecalho {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 28px;

}


.filtro-titulo {

    display: block;

    margin-bottom: 7px;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;

    color: var(--preto);

}


.filtro-subtitulo {

    display: block;

    font-size: 13px;

    line-height: 1.5;

    color: var(--cinza);

}


.filtro-kicker {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.3px;

    color: var(--cinza);

}


.btn-fechar-filtro {

    display: none;

}


/* =========================================================
   ITEM DO FILTRO
   ========================================================= */

.filtro-item {

    margin-bottom: 22px;

}


.filtro-item label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 9px;

    color: var(--preto);

    font-size: 14px;

    font-weight: 700;

}


.filtro-item label i {

    font-size: 16px;

}


/* =========================================================
   SELECTS / INPUTS
   ========================================================= */

.filtro-item select,
.filtro-item input {

    width: 100%;

    min-width: 0;

    height: 44px;

    padding: 0 12px;

    border: 1px solid var(--cinza-claro);

    border-radius: 9px;

    background: var(--branco);

    color: var(--preto);

    font-size: 14px;

    outline: none;

    box-sizing: border-box;

}


.filtro-item input {

    margin-bottom: 0;

}


.filtro-item select:focus,
.filtro-item input:focus {

    border-color: var(--preto);

}


.precos-inputs {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

}


/* =========================================================
   BOTÃO APLICAR
   ========================================================= */

.btn-filtrar {

    width: 100%;

    min-height: 45px;

    padding: 11px 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: none;

    border-radius: 9px;

    background: var(--preto);

    color: var(--branco);

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    transition:
        background .2s ease,
        transform .2s ease;

}


.btn-filtrar:hover {

    background: var(--cinza-escuro);

}


.btn-filtrar:active {

    transform: scale(.98);

}


/* =========================================================
   CONTEÚDO DOS PRODUTOS
   DESKTOP
   ========================================================= */

.lista-produtos {

    flex: 1;

    min-width: 0;

    /*
     * AUMENTO DA ALTURA DA ÁREA DOS PRODUTOS
     *
     * A área ocupa praticamente toda a altura disponível
     * da janela no computador.
     */

    height: calc(100vh - 150px);

    max-height: calc(100vh - 150px);

    min-height: 700px;

    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 10px;

    box-sizing: border-box;

}


/* =========================================================
   BARRA DE ROLAGEM DA ÁREA DOS PRODUTOS
   ========================================================= */

.lista-produtos::-webkit-scrollbar {

    width: 8px;

}


.lista-produtos::-webkit-scrollbar-track {

    background: transparent;

}


.lista-produtos::-webkit-scrollbar-thumb {

    background: var(--cinza-claro);

    border-radius: 20px;

}


.lista-produtos::-webkit-scrollbar-thumb:hover {

    background: var(--cinza-medio);

}


/* Firefox */

.lista-produtos {

    scrollbar-width: thin;

    scrollbar-color:
        var(--cinza-claro)
        transparent;

}


/* =========================================================
   CAMINHO DA CATEGORIA
   NÃO É FIXO
   ========================================================= */

.categoria-caminho {

    width: 100%;

    margin: 0 0 14px;

    padding: 0;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    color: var(--cinza-escuro);

    font-size: 18px;

    line-height: 1.4;

    font-weight: 500;

    box-sizing: border-box;

}


.categoria-caminho span:first-child {

    color: var(--cinza);

}


.separador-categoria {

    color: var(--cinza-medio);

    font-size: 15px;

}


/* =========================================================
   BARRA DO TOPO DOS PRODUTOS
   FILTRO À ESQUERDA
   RESULTADOS À DIREITA
   ========================================================= */

.barra-produtos {

    width: 100%;

    min-height: 58px;

    margin-bottom: 24px;

    padding-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid var(--borda);

    box-sizing: border-box;

}


/* =========================================================
   BOTÃO DE FILTRO
   DESKTOP ESCONDIDO
   ========================================================= */

.btn-filtro-flutuante {

    display: none;

}


.quantidade-produtos {

    flex: 0 0 auto;

    margin: 0 0 0 auto;

    display: flex;

    align-items: baseline;

    gap: 5px;

    color: var(--cinza);

    font-size: 14px;

    white-space: nowrap;

}


.quantidade-produtos strong {

    color: var(--preto);

    font-size: 18px;

    font-weight: 700;

}


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

.lista-produtos .produtos-container {

    width: 100%;

    max-width: none;

    margin: 0;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    box-sizing: border-box;

}


/* =========================================================
   CARD
   ========================================================= */

.lista-produtos .produto-card {

    width: 100%;

    min-width: 0;

    max-width: 100%;

    height: 520px;

    background: var(--branco);

    border-radius: 15px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    border: 1px solid var(--borda);

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    box-sizing: border-box;

}


.lista-produtos .produto-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .14);

}


/* =========================================================
   IMAGEM
   ========================================================= */

.lista-produtos .imagem-produto {

    width: 100%;

    height: 230px;

    min-height: 230px;

    flex: 0 0 230px;

    background: #eeeeee;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.lista-produtos .imagem-produto img {

    display: block;

    width: 100%;

    height: 100%;

    max-width: 100%;

    object-fit: contain;

}


/* =========================================================
   INFORMAÇÕES
   ========================================================= */

.lista-produtos .produto-info {

    width: 100%;

    min-width: 0;

    flex: 1;

    padding: 18px;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

}


/* =========================================================
   NOME
   ========================================================= */

.lista-produtos .produto-info h2 {

    width: 100%;

    min-width: 0;

    height: 48px;

    margin: 0 0 12px;

    font-size: 17px;

    line-height: 24px;

    font-weight: 600;

    color: var(--preto);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* =========================================================
   PREÇO
   ========================================================= */

.lista-produtos .area-preco {

    min-height: 75px;

    height: 75px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.lista-produtos .preco {

    font-size: 21px;

    line-height: 1.2;

    font-weight: 700;

    color: var(--preto);

    margin: 0 0 8px;

}


.lista-produtos .preco-antigo {

    margin: 0;

    font-size: 14px;

    line-height: 18px;

    color: var(--cinza-medio);

    text-decoration: line-through;

}


.lista-produtos .promocional {

    color: var(--preto);

}


.lista-produtos .desconto {

    display: block;

    margin-top: 3px;

    font-size: 13px;

    line-height: 17px;

    color: var(--cinza-escuro);

    font-weight: 700;

}


/* =========================================================
   AÇÕES
   ========================================================= */

.lista-produtos .acoes-produto {

    width: 100%;

    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.lista-produtos .btn-carrinho {

    width: 100%;

    min-height: 46px;

    padding: 10px;

    border: none;

    border-radius: 8px;

    background: var(--preto);

    color: var(--branco);

    font-size: 14px;

    line-height: 18px;

    cursor: pointer;

    text-align: center;

    transition:
        background .2s,
        transform .2s;

    box-sizing: border-box;

}


.lista-produtos .btn-carrinho:hover {

    background: var(--cinza-escuro);

}


.lista-produtos .btn-carrinho:active {

    transform: scale(.98);

}


.lista-produtos .btn-carrinho i {

    margin-right: 7px;

}


.lista-produtos .btn-detalhes {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 42px;

    padding: 10px;

    background: var(--cinza-escuro);

    color: var(--branco);

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;

    line-height: 18px;

    box-sizing: border-box;

    transition: background .2s;

}


.lista-produtos .btn-detalhes:hover {

    background: var(--preto);

}


/* =========================================================
   SEM PRODUTOS
   ========================================================= */

.sem-produtos {

    grid-column: 1 / -1;

    width: 100%;

    padding: 60px 25px;

    background: var(--branco);

    border: 1px solid var(--borda);

    border-radius: 15px;

    text-align: center;

}


.sem-produtos-icone {

    margin-bottom: 15px;

    font-size: 38px;

    color: var(--cinza-medio);

}


.sem-produtos h2 {

    margin: 0 0 8px;

    color: var(--preto);

}


.sem-produtos p {

    margin: 0;

    color: var(--cinza);

}


/* =========================================================
   OVERLAY
   ========================================================= */

.filtro-overlay {

    display: none;

}


/* =========================================================
   TABLETS + TELEMÓVEIS
   900PX OU MENOS
   ========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------------------
       PÁGINA
       ----------------------------------------------------- */

    .pagina-produtos {

        width: calc(100% - 32px);

        max-width: 820px;

        margin: 88px auto 45px;

        display: block;

    }


    /* -----------------------------------------------------
       ÁREA DOS PRODUTOS
       ROLAGEM NORMAL DA PÁGINA
       ----------------------------------------------------- */

    .lista-produtos {

        width: 100%;

        height: auto;

        max-height: none;

        min-height: 0;

        overflow: visible;

        padding-right: 0;

        scrollbar-width: auto;

    }


    .lista-produtos::-webkit-scrollbar {

        width: auto;

    }


    /* -----------------------------------------------------
       FILTRO MODAL
       ----------------------------------------------------- */

    .filtro-lateral {

        position: fixed;

        top: 50%;

        left: 50%;

        z-index: 1002;

        width: min(420px, calc(100% - 30px));

        max-height: calc(100vh - 30px);

        overflow-y: auto;

        padding: 24px;

        margin: 0;

        border-radius: 18px;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translate(-50%, -46%)
            scale(.97);

        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;

    }


    .filtro-lateral.filtros-abertos {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translate(-50%, -50%)
            scale(1);

    }


    .btn-fechar-filtro {

        width: 36px;

        height: 36px;

        flex: 0 0 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid var(--borda);

        border-radius: 9px;

        background: var(--branco);

        color: var(--preto);

        cursor: pointer;

    }


    /* -----------------------------------------------------
       OVERLAY
       ----------------------------------------------------- */

    .filtro-overlay {

        position: fixed;

        inset: 0;

        z-index: 1000;

        display: block;

        background: rgba(0, 0, 0, .45);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .2s ease,
            visibility .2s ease;

    }


    .filtro-overlay.overlay-aberto {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }


    /* -----------------------------------------------------
       CAMINHO
       ----------------------------------------------------- */

    .categoria-caminho {

        margin-top: 0;

        margin-bottom: 10px;

        gap: 6px;

        font-size: 15px;

    }


    .separador-categoria {

        font-size: 12px;

    }


    /* -----------------------------------------------------
       BARRA
       ----------------------------------------------------- */

    .barra-produtos {

        min-height: 58px;

        margin-bottom: 18px;

        padding-bottom: 10px;

        gap: 12px;

    }


    /* -----------------------------------------------------
       BOTÃO FILTRO
       ----------------------------------------------------- */

    .btn-filtro-flutuante {

        position: static;

        z-index: auto;

        width: auto;

        min-height: auto;

        margin: 0;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 11px;

        border: none;

        border-radius: 0;

        background: transparent;

        color: var(--preto);

        box-shadow: none;

        cursor: pointer;

        font-size: 17px;

        font-weight: 400;

        text-align: left;

        white-space: nowrap;

    }


    .btn-filtro-flutuante:hover {

        background: transparent;

    }


    .btn-filtro-flutuante:active {

        transform: none;

    }


    .btn-filtro-flutuante i {

        flex: 0 0 auto;

        font-size: 22px;

        color: var(--cinza-escuro);

    }


    /* -----------------------------------------------------
       RESULTADOS À DIREITA
       ----------------------------------------------------- */

    .quantidade-produtos {

        margin-left: auto;

        gap: 4px;

        font-size: 13px;

        white-space: nowrap;

        text-align: right;

    }


    .quantidade-produtos strong {

        font-size: 17px;

    }


    /* -----------------------------------------------------
       GRID — 2 CARDS
       ----------------------------------------------------- */

    .lista-produtos .produtos-container {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px 12px;

    }


    /* -----------------------------------------------------
       CARD
       ----------------------------------------------------- */

    .lista-produtos .produto-card {

        height: auto;

        min-height: 0;

        border-radius: 0;

        border: none;

        background: transparent;

        box-shadow: none;

        overflow: visible;

    }


    .lista-produtos .produto-card:hover {

        transform: none;

        box-shadow: none;

    }


    /* -----------------------------------------------------
       IMAGEM
       ----------------------------------------------------- */

    .lista-produtos .imagem-produto {

        width: 100%;

        height: auto;

        min-height: 0;

        flex: none;

        aspect-ratio: 1 / 1.15;

        background: #eeeeee;

        border-radius: 0;

        overflow: hidden;

    }


    .lista-produtos .imagem-produto img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }


    /* -----------------------------------------------------
       INFORMAÇÕES
       ----------------------------------------------------- */

    .lista-produtos .produto-info {

        padding: 12px 0 0;

    }


    .lista-produtos .produto-info h2 {

        height: auto;

        min-height: 0;

        margin: 0 0 9px;

        font-size: 15px;

        line-height: 21px;

    }


    /* -----------------------------------------------------
       PREÇO
       ----------------------------------------------------- */

    .lista-produtos .area-preco {

        min-height: 0;

        height: auto;

        display: flex;

        flex-direction: row;

        align-items: baseline;

        flex-wrap: wrap;

        gap: 6px;

        margin-bottom: 10px;

    }


    .lista-produtos .preco {

        margin: 0;

        font-size: 19px;

    }


    .lista-produtos .preco-antigo {

        font-size: 13px;

    }


    .lista-produtos .desconto {

        width: 100%;

        font-size: 11px;

    }


    /* -----------------------------------------------------
       AÇÕES
       ----------------------------------------------------- */

    .lista-produtos .acoes-produto {

        gap: 7px;

    }


    .lista-produtos .btn-carrinho {

        min-height: 38px;

        padding: 7px 5px;

        font-size: 11px;

    }


    .lista-produtos .btn-detalhes {

        min-height: 36px;

        padding: 6px;

        font-size: 11px;

    }

}


/* =========================================================
   TELEMÓVEIS
   600PX OU MENOS
   ========================================================= */

@media (max-width: 600px) {


    .pagina-produtos {

        width: calc(100% - 24px);

        margin: 82px auto 40px;

    }


    .categoria-caminho {

        margin-bottom: 8px;

        font-size: 14px;

    }


    .barra-produtos {

        min-height: 54px;

        margin-bottom: 14px;

        padding-bottom: 9px;

        gap: 8px;

    }


    .btn-filtro-flutuante {

        gap: 9px;

        font-size: 15px;

    }


    .btn-filtro-flutuante i {

        font-size: 20px;

    }


    .quantidade-produtos {

        gap: 3px;

        font-size: 11px;

    }


    .quantidade-produtos strong {

        font-size: 14px;

    }


    .lista-produtos .produtos-container {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px 10px;

    }


    .lista-produtos .imagem-produto {

        aspect-ratio: 1 / 1.12;

    }


    .lista-produtos .produto-info {

        padding-top: 9px;

    }


    .lista-produtos .produto-info h2 {

        margin-bottom: 6px;

        font-size: 13px;

        line-height: 19px;

    }


    .lista-produtos .area-preco {

        margin-bottom: 7px;

    }


    .lista-produtos .preco {

        font-size: 16px;

    }


    .lista-produtos .preco-antigo {

        font-size: 11px;

    }


    .lista-produtos .desconto {

        font-size: 10px;

        line-height: 13px;

    }


    .lista-produtos .btn-carrinho {

        min-height: 36px;

        font-size: 11px;

    }


    .lista-produtos .btn-detalhes {

        min-height: 34px;

        font-size: 10px;

    }


    .filtro-lateral {

        width: calc(100% - 24px);

        padding: 20px;

        border-radius: 16px;

    }


    .filtro-cabecalho {

        margin-bottom: 22px;

    }


    .filtro-titulo {

        font-size: 19px;

    }


    .filtro-subtitulo {

        font-size: 12px;

    }


    .filtro-item {

        margin-bottom: 17px;

    }


    .filtro-item label {

        font-size: 13px;

    }


    .filtro-item select,
    .filtro-item input {

        height: 42px;

        font-size: 13px;

    }


    .btn-filtrar {

        min-height: 43px;

        font-size: 13px;

    }

}


/* =========================================================
   TELEMÓVEIS MUITO PEQUENOS
   380PX OU MENOS
   ========================================================= */

@media (max-width: 380px) {


    .pagina-produtos {

        width: calc(100% - 18px);

        margin-top: 72px;

    }


    .categoria-caminho {

        font-size: 13px;

        gap: 5px;

    }


    .barra-produtos {

        gap: 5px;

    }


    .btn-filtro-flutuante {

        gap: 7px;

        font-size: 12px;

    }


    .btn-filtro-flutuante i {

        font-size: 18px;

    }


    .quantidade-produtos {

        font-size: 10px;

    }


    .quantidade-produtos strong {

        font-size: 12px;

    }


    .lista-produtos .produtos-container {

        gap: 16px 8px;

    }


    .lista-produtos .imagem-produto {

        aspect-ratio: 1 / 1.08;

    }


    .lista-produtos .produto-info {

        padding-top: 8px;

    }


    .lista-produtos .produto-info h2 {

        font-size: 12px;

        line-height: 17px;

    }


    .lista-produtos .preco {

        font-size: 15px;

    }


    .lista-produtos .preco-antigo {

        font-size: 10px;

    }


    .lista-produtos .btn-carrinho {

        min-height: 34px;

        font-size: 10px;

    }


    .lista-produtos .btn-detalhes {

        min-height: 32px;

        font-size: 10px;

    }

}


/* =========================================================
   EVITAR OVERFLOW
   ========================================================= */

.pagina-produtos,
.lista-produtos,
.lista-produtos .produtos-container,
.lista-produtos .produto-card,
.lista-produtos .produto-info {

    min-width: 0;

    box-sizing: border-box;

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lista-produtos .produto-card,
    .filtro-lateral,
    .filtro-overlay,
    .btn-filtro-flutuante {

        transition: none;

    }

}