/* || colors */

:root{
    --landing-text-color: #ff355e;
}

/* || general */

html{
    color: var(--text-color, white);
}

/* || Login */

.grid-container-login{
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
    justify-items: center;
}

.grid-container-login .form{
    margin-bottom: 3rem;
}

/* || wishlist */

.wishlist-card-wrapper{
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;    
    justify-items: center;
    margin: 2rem 0;
}

.wishlist-card-wrapper .card{
    width: 70vw;
}

/* || cart */

.page-title{
    text-align: center;
    margin: 2rem 0;
}

.grid-container-cart{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "cards  price";
    justify-items: center;
    margin: 0 8rem;

}

.card-wrapper-cart{
    grid-area: cards;
}

.price-card{
    padding: 2rem;
    height: fit-content;
    border-radius: var(--border-radius);
    grid-area: price;
}

.price-card hr, .price-card .btn{
    margin: 0.8rem 0;
}

.price-card li, .total-amount{
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
}

.total-amount{
    font-weight: 700;
}

.card-wrapper-cart .card{
    margin-bottom: 2rem;
}

/* || product */

.filter{
    padding: 2rem;
}

.filter ul{
    margin: 1.5rem 0;
}

.filter li{
    list-style: none;
    margin: 0.5rem 0;
}

.filter label{
    font-weight: 400;
}

.filter-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-page-container{
    display: grid;
    grid-template-columns: 16rem 1fr;
}

.product-cards-container{
    padding: 2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.product-cards-container:nth-child(n){
    justify-items: center;
}

.product-page-container .page-title{
    text-align: left;
    margin-left: 2rem;
    margin-bottom: 0;
}

.product-page-container .page-title span{
    font-size: 1.2rem;
    font-weight: 300;
}

/* || landing */

.landing{
    margin: 1rem;
}

.landing section{
    margin-bottom: 3rem;
}

.landing h3{
    font-size: 2rem;
    font-weight: 700;
}

.hero{
    position: relative;
    height: 50vh;
}

.hero .img-wrapper{
    max-width: 100vw;
}

.hero img{
    height: 50vh;
    border-radius: 1rem;
    object-fit: cover;
}

.hero-content{
    position: absolute;
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.hero-content h3{
    font-size: 4rem;
    font-weight: 400;
    color: var(--landing-text-color);
}

.hero-content .btn{
    width: fit-content;
    padding: 1rem;
    font-size: 1.3rem;
}

.btn .fa-long-arrow-alt-right{
    margin-left: 0.5rem;
    font-size: 1.5rem;
}

.hero-content text{
    font-size: 2rem;
    font-weight: 300;
}

.category{
    font-size: 3rem;
    font-weight: 300;
    width: fit-content;
    position: relative;
    color: var(--landing-text-color);
}

.categories-container{
    margin-top: 2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.categories-container:nth-child(n){
    justify-items: center;
}

.category > text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(234, 234, 236,0.4);
    border-radius: 50%;
    width: 20rem;
    height: 20rem;
}

/* || media queries */

@media only screen and (max-width:1280px){
    .grid-container-cart{
        margin: 0 1rem;
    }
}

@media only screen and (max-width:1024px){
    .grid-container-cart{
        margin: 0 0.5rem;
    }
}

@media only screen and (max-width:900px){
    .grid-container-cart{
        grid-template-columns: 1fr;
        grid-template-areas:
        "cards" 
        "price";
    }
}

@media only screen and (max-width:640px){
    .filter{
        display: none;
    }

    .product-page-container{
        grid-template-columns: 1fr;
    }

    .wishlist-card-wrapper .card{
        width: 90vw;
    }
    
    .hero-content h3{
        font-size: 3.5rem;
    }
    
    .landing{
        margin: 0.5rem;
    }
}

@media only screen and (max-width:480px){    
    
    .hero-content h3{
        font-size: 3rem;
    }
}