@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    background: linear-gradient(to bottom, #B2B2B2, #FFF);
}

/* =============== Main */
main {
    height: fit-content;
    width: 80%;
    display: flex;

    margin-top: 5vh;
    margin-bottom: 5vh;

    box-sizing: border-box;
}

/* ======================== Filtros */
.options {
    width: calc(100px + 10%);
    padding: 1%;

    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2%;

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;

    background-color: #9E7054;
    box-sizing: border-box;
}

.options h3 {
    width: 100%;

    font-size: 150%;
    text-align: center;

    border-bottom: solid 0.05vw black;
}

.div-option {
    height: 2vh;
    width: 80%;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    border-bottom: solid 0.05vw rgba(0, 0, 0, 0.1);
}

.div-option input {
    width: 20px;
    height: 20px;

    position: absolute;
    left: 0;
}

/* ======================= Produtos */
.all-produtos {
    height: fit-content;
    width: calc(90% - 100px);
    padding: 2vh;

    display: flex;
    justify-content: space-around;
    row-gap: 2vh;
    column-gap: 2vh;
    flex-wrap: wrap;
}


/* Base */
.moldura {
    min-width: calc(50px + 10%);
    max-width: calc(100px + 12%);
    min-height: calc(150px + 20vw);
    position: relative;

    transition: box-shadow 0.3s, transform 0.3s;

    flex-grow: 1;
    flex-shrink: 1;

    background-color: #9E7054;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;

    cursor: pointer;
}

.moldura:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.moldura::before {
    content: "Adicionar ao carrinho";

    position: absolute;
    width: 100%;
    height: 12%;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;

    bottom: 0;
    right: 100%;

    transition: right 0.3s;

    background-color: #C48B68;

    font-size: 15px;
}

.moldura:hover::before {
    right: 0;
}


/* Conteudo em Si */
.moldura img {
    width: 100%;
    height: 60%;

    object-fit: cover;
    object-position: center;

    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.conteudo {
    height: 40%;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    
    padding: 10px;
    padding-top: 0;

    box-sizing: border-box;
}

.conteudo h4 {
    width: 90%;

    position: absolute;
    top: 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;

    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.moldura:hover h4 {
    -webkit-line-clamp: 3;
}

.conteudo p {
    position: absolute;
    top: 45%;
    left: 5%;

    font-family: Arial;
    font-size: medium;
    font-weight: 600;
}

/* Quando o item estiver no carrinho */
.no-carrinho::before {
    animation: mudar-texto 1s forwards;
}

.pages {
    width: 100%;

    display: flex;
    justify-content: center;
    column-gap: 3vw;
}

.pages input {
    width: 20%;
    font-weight: 700;
    font-size: large;
    background-color: transparent;
    cursor: pointer;
    border: none;
}

/* Key frames */
@keyframes mudar-texto {
    from {
        right: 0;
    }

    40% {
        right: 110%;
    }

    50% {
        content: "No carrinho";
    }

    to {
        right: 0;
        content: "No carrinho";
    }

}