/* ==========================================
   MARUWATA SHOP PAGE CSS
========================================== */


/* GLOBAL */

.shop{

    padding:60px 0;

    background:#f5f6fa;

}



.container{

    width:100%;

    max-width:1600px;

    margin:auto;

}





/* TITLE */

.section-title{

    text-align:center;

    font-size:38px;

    color:#222;

    margin-bottom:10px;

    font-weight:700;

}



.section-desc{

    text-align:center;

    color:#777;

    font-size:17px;

    margin-bottom:40px;

}







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


.product-grid{


    display:grid;


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


    gap:30px;


}






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


.product-card{


    background:#ffffff;


    border-radius:20px;


    overflow:hidden;


    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;


    position:relative;


}



.product-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 15px 40px rgba(0,0,0,.15);


}






/* IMAGE */


.product-img{


    width:100%;

    height:350px;

    overflow:hidden;

}



.product-img img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.4s;


}



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


    transform:scale(1.08);


}






/* INFO */


.product-info{


    padding:20px;


}



.company{


    color:#2d74c4;


    font-size:14px;


    font-weight:600;


}





.product-name{


    font-size:19px;


    color:#222;


    margin:10px 0;


    line-height:1.4;


}



.sku{


    color:#888;


    font-size:13px;


}







/* PRICE */


.price{


    margin:15px 0;


}



.old-price{


    color:#999;


    text-decoration:line-through;


    margin-right:10px;


    font-size:14px;


}



.new-price{


    color:#0b8f3c;


    font-size:20px;


    font-weight:700;


}







/* BUTTON AREA */


.product-actions{


    display:flex;


    gap:10px;


    align-items:center;


}



.wishlist-shop-btn{


    width:38px;


    height:38px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:#f5f5f5;


    border-radius:25%;


    text-decoration:none;


    font-size:20px;


}
.wishlist-shop-btn:hover{


    background:#a4a9b4;


}





.btn-buy{


    flex:1;


    text-align:center;


    padding:12px;


    background:#1e4f8a;


    color:white;


    text-decoration:none;


    border-radius:10px;


    font-weight:600;


}



.btn-buy:hover{


    background:#07a54e;


}







.btn-cart{


    flex:1;


    text-align:center;


    padding:12px;


    background:

    linear-gradient(
    135deg,
    #F53333,
    #F89A1C
    );


    color:white;


    text-decoration:none;


    border-radius:10px;


    font-weight:600;


}



.btn-cart:hover{


    opacity:.9;


}







/* PAGINATION */


.pagination{


    text-align:center;


    margin:50px 0 20px;


}



.pagination a{


    display:inline-block;


    padding:10px 20px;


    margin:5px;


    background:#1e4f8a;


    color:white;


    text-decoration:none;


    border-radius:10px;


    transition:.3s;


}



.pagination a:hover{


    background:#F53333;


}







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


@media(max-width:1100px){


    .product-grid{


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


    }


}





@media(max-width:768px){


    .product-grid{


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


        gap:20px;


    }



    .product-img{


        height:220px;


    }


}





@media(max-width:500px){


    .product-grid{


        grid-template-columns:1fr;


    }



    .section-title{


        font-size:30px;


    }


}