/* ===========================================
   RISE - SHOP.CSS
=========================================== */


/* ===========================================
   SHOP HERO
=========================================== */

.shop-hero{

    padding:150px 0 80px;

    background:#f8f8f8;

}

.shop-hero .container{

    text-align:center;

}

.shop-hero .section-title{

    display:block;

    margin-bottom:15px;

}

.shop-hero h1{

    font-size:5rem;

    margin-bottom:20px;

}

.shop-hero p{

    max-width:600px;

    margin:0 auto;

}


/* ===========================================
   SHOP FILTERS
=========================================== */

.shop-filters{

    padding:35px 0;

    border-bottom:1px solid #e5e5e5;

}

.shop-filters .container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

}

.filter{

    border:none;

    background:none;

    padding:10px 20px;

    font-family:'Montserrat',sans-serif;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.3s;

}

.filter:hover{

    color:#777;

}

.filter.active{

    background:#111;

    color:#fff;

}


/* ===========================================
   SHOP PRODUCTS
=========================================== */

.shop-products{

    padding:80px 0 120px;

}


/* ===========================================
   PRODUCT GRID
=========================================== */

#product-grid{

    display:grid;

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

    gap:55px 25px;

}


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

#product-grid .product-card{

    display:block;

    width:100%;

    max-width:300px;

    margin:0 auto;

    text-decoration:none;

    color:#111;

}

#product-grid .product-card img{

    width:100%;

    height:auto;

    aspect-ratio:4 / 5;

    object-fit:contain;

    display:block;

    background:#f7f7f7;

    transition:.4s ease;

}

#product-grid .product-card:hover img{

    transform:scale(1.03);

}

#product-grid .product-card h3{

    margin-top:18px;

    font-size:1.35rem;

    line-height:1.2;

}

#product-grid .product-card span{

    display:block;

    margin-top:8px;

    font-size:1rem;

    font-weight:600;

}


/* ===========================================
   SHOP NOW
=========================================== */

#product-grid .shop-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:15px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

#product-grid .shop-btn i{

    transition:.3s;

}

#product-grid .product-card:hover .shop-btn i{

    transform:translateX(4px);

}


/* ===========================================
   EMPTY SHOP
=========================================== */

.empty-shop{

    grid-column:1 / -1;

    text-align:center;

    padding:100px 20px;

}

.empty-shop h2{

    margin-bottom:15px;

}

.empty-shop p{

    color:#666;

}


/* ===========================================
   RESPONSIVE
=========================================== */

@media(max-width:1100px){

    #product-grid{

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

    }

}


@media(max-width:800px){

    .shop-hero{

        padding:120px 0 60px;

    }

    .shop-hero h1{

        font-size:4rem;

    }

    #product-grid{

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

        gap:45px 20px;

    }

}


@media(max-width:500px){

    .shop-hero h1{

        font-size:3rem;

    }

    .shop-filters .container{

        gap:5px;

    }

    .filter{

        padding:8px 12px;

        font-size:.75rem;

    }

    #product-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    #product-grid .product-card{

        max-width:360px;

    }

}