.catalogo-container {
    position: relative;
    width: 75%;
    justify-self: center;
}

.catalogo-absolute-right {
    position: absolute;
    right: 5px;
    top: 25px;
}

.catalogo-detalhes-pedido-container {
    border: 1px solid black;
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    color: var(--cor-primaria);

    background-color:#fff;
    border: 1px solid #d9d9d9;
    border-radius:6px;
}

.catalogo-detalhes-pedido-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 3px;
    padding: 3px;
    border-radius: 6px;
    gap: 40px;
}
.catalogo-detalhes-pedido-header:hover {
    background-color: #eee;
}

.catalogo-detalhes-pedido-conteudo {
    display: flex;
    padding: 5px;
    flex-direction: column;
    border-top: 1px solid #eee;
    font-size: 90%;
}
.catalogo-detalhes-pedido-conteudo label,
.catalogo-detalhes-pedido-conteudo span {
    margin: 0px;
    padding-left: 5px;
}

.catalogo-detalhes-pedido-conteudo > div {
    display: flex;
    flex-direction: column;
}

.catalogo-row {
    display: flex;
    flex-direction: row;
}

.catalogo-mobile {
    display: none;
}

.catalogo-between {
    justify-content: space-between;
}

.catalogo-column {
    display: flex;
    flex-direction: column;
}

.catalogo-filtro-card {
    background-color: white;
    border: solid 1px #e2e2e2;
    padding: 4px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.catalogo-filtro-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 6px 10px;
    cursor: pointer;
}

.catalogo-filtro-header:hover {
    background-color: #fafafa;
}

.catalogo-filtro-icon-toggle {
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.catalogo-filtro-icon-toggle.aberto {
    transform: rotate(-90deg);
}

.catalogo-filtro-pesquisa {
    margin-left: 10px;
    /* margin-right: 15px; */
    /* margin-left: auto; */
    padding: 5px;
    width: 90%;
    font-style: 14px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
}

.catalogo-filtro-conteudo {
    overflow: hidden;
    opacity: 1;
    transition: max-height .3s ease, opacity .3s ease;
}
.catalogo-filtro-conteudo.fechado {
    max-height: 0;
    opacity: 0;
}

.catalogo-filtro-titulo {
    font-size: 16px;
}

.catalogo-filtro-opcao {
    margin: 5px 10px 5px 10px;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
}
.catalogo-filtro-opcao:hover {
    background-color: #fafafa;
}
.catalogo-filtro-opcao i {
    color: var(--cor-primaria)
}

.catalogo-toolbar {
    display: flex;
    column-gap: 10px;
}

.catalogo-toolbar .toolbar-pesquisa {
    flex: 1;
    position: relative;
}
.catalogo-toolbar .toolbar-ordenacao {
    display: flex;
    flex-direction: column;
    width: 160px;
}
.catalogo-toolbar .toolbar-itens-por-pagina {
    display: flex;
    flex-direction: column;
    width: 120px;
}
.catalogo-toolbar .toolbar-exibicao {
    display: flex;
    justify-content: end;
}

.catalogo-input-pesquisa {
    height: 40px;
    padding: 0 12px;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: .2s;
}
.catalogo-input-pesquisa-button {
    background: none;
    border: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    height: 36px;
    width: 40px;
    border-radius: 6px;
}

.catalogo-input-pesquisa-button:hover {
    background-color: #fafafa;
    border-left: none;
}
.catalogo-input-apaga-pesquisa-button {
    background: none;
    border: none;
    position: absolute;
    right: 35px;
    bottom: 2px;
    height: 36px;
    width: 40px;
    border-radius: 6px;
}
.catalogo-input-apaga-pesquisa-button:hover {
    background-color: #fafafa;
    border-left: none;
}

.catalogo-produtos {
    margin-top: 10px;
}

.catalogo-exibicao-opcoes {
    display: flex;
    justify-self: end;
    align-self: end;
    gap: 0px
}

.catalogo-exibicao-opcoes-left {
    margin: 0px;
    background-color: white;
    border: solid 2px #e2e2e2;
    padding: 8px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.catalogo-exibicao-opcoes-right {
    margin: 0px;
    background-color: white;
    border: solid 2px #e2e2e2;
    border-left: 0px;
    padding: 8px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.catalogo-exibicao-btn {
    color: 
    color-mix(
        in srgb,
        var(--cor-primaria) 50%,
        white
    ) !important;
}
.catalogo-exibicao-btn.ativo {
    color: var(--cor-primaria) !important;
}

.catalogo-select-itens-por-pagina {
    height: 40px;
    padding: 0 12px;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: .2s;
}

.catalogo-produtos-grade {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.catalogo-produto-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 12px;
    border: solid 2px #e2e2e2;
    border-radius:6px;
    cursor: pointer;
    position: relative;
}

.catalogo-produto-container-lista {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.catalogo-produto-imagem-container {
    position: relative;
}

.catalogo-produto-imagem-container .fa {
    position: absolute;
    top: 50%;
    font-size: 20px;
    padding: 8px;
    border-radius: 3px;
}

.catalogo-produto-imagem-container.lista .fa  {
    bottom: 0px;
    top: auto;
}

.catalogo-produto-imagem-container .fa:hover {
    background-color: 
    color-mix(
        in srgb,
        var(--cor-primaria) 12%,
        white
    );
}

.catalogo-produto-imagem-container .fa-chevron-left {
    left: 0px;
}
.catalogo-produto-imagem-container .fa-chevron-right {
    right: 0px;
}

.catalogo-produto-container-grade {
    text-align: center;
    height: 100%;
}

.catalogo-produto-imagem-lista {
    width:120px;
    height:120px;
    object-fit:contain;
    margin-right:15px;
    border-radius: 6px;
}

.catalogo-produto-imagem-grade {
    width:100%;
    height:250px;
    object-fit:contain;
    margin-right:15px;
    border-radius: 6px;
}

.catalogo-produto-infos-container {
    display: flex;
    flex-direction: column;
}

.catalogo-produto-infos-container.lista {
    justify-content: space-between;
}

.catalogo-produto-infos-container.grade {
    justify-content: space-between;
    flex: 1;
}

.catalogo-produto-preco {
    font-weight: 600;
    font-size: 16px;
    align-self: flex-end;
}

.catalogo-produto-categoria {
    position: absolute;
    padding: 2px;
    border-radius: 6px;
    padding-left: 4px;
    padding-right: 4px;
    background-color: 
    color-mix(
        in srgb,
        var(--cor-primaria) 50%,
        rgba(255, 255, 255, 1)
    );
    z-index: 2;
    left: 10px;
    top: 10px;
    display: flex;
    color: white;
    font-size: 85%;
}
.catalogo-produto-categoria.lista {
    top: 0px;
    left: 0px;
    position: relative;
    height: min-content;
    width: min-content;
}

.catalogo-produto-estoque-container {
    background-color: white;
    margin-top: 5px;
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 6px;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center;

    position: relative;
}

.estoque-tooltip-content {
    display: none;
    position: absolute;
    top: 10%;
    left: 125%;
    width: min-content;
    /* min-width: 120px; */
    padding: 8px;
    background: #eee;
    border-radius: 4px;
    z-index: 1000;
    white-space: nowrap;
    flex-direction: column;
    text-align: left;
}

.catalogo-produto-estoque-container:hover .estoque-tooltip-content {
    display: flex;
}

.catalogo-produto-estoque-container:hover {
    background-color: #eee;
}

.catalogo-produto-icons {
    /* position: absolute; */
    /* right: 8px; */
    /* top: 10px; */
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    font-size: 13px;
    font-weight: 600;
    /* gap: 5px; */
    z-index: 2;
}

.catalogo-produto-icons.grade {
    /* top: 15px; */
    /* right: 16px;     */
}

.catalogo-produto-icon {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
    border-radius: 6px;
}

.catalogo-produto-icon:hover {
    background-color: #fafafa;
}

.catalogo-produto-icon .fa-heart {
    color: tomato;
}
.catalogo-produto-icon .fa-shopping-cart span {
    font-size: 13px;
    font-weight: 600;
}

.catalogo-pagination {
    margin: 0px;
}

.catalogo-pagination-bottom {
    display: flex;
    justify-content: end;
    margin-top: 10px;
}

.catalogo-produto-container.consultando {
    position: relative;
    overflow: hidden;
    height: 150px;
    margin-bottom: 10px;
}
.catalogo-produto-container.consultando.grade {
    height: 320px;
    margin-bottom: 0px;
}
.catalogo-produto-container.consultando::after {
    content: '';
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        #f5f5f5 0%,
        #fafafa 25%,
        #ffffff 50%,
        #fafafa 75%,
        #f5f5f5 100%
    );

    background-size: 250% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
    /* z-index: 1; */
}

@keyframes skeleton {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

@media(max-width:1400px) {

    .catalogo-produtos-grade {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 989px) {

    .catalogo-container {
        width: 100%;
    }

    .catalogo-desktop {
        display: none !important;
    }

    .catalogo-mobile {
        display: flex;
    }

    .catalogo-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .catalogo-detalhes-pedido-container {
        position: relative;
        width: 100%;
        margin-bottom: 0px;
    }

    .catalogo-toolbar .toolbar-pesquisa {
        width: 100%;
        flex: 1 0 100%;
    }

    .catalogo-toolbar .toolbar-ordenacao,
    .catalogo-toolbar .toolbar-itens-por-pagina {
        width: calc(50% - 5px);
    }

    .catalogo-between {
        align-items: end;
    }

    .catalogo-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .pagination-status {
        width: 100%;
        text-align: center;
        order: -1;
    }

}

@media (max-width: 620px) {

    .catalogo-produtos-grade {
        grid-template-columns: 1fr;
    }
}