/* =========================================
   CATEGORY PAGE - MODERN ECOMMERCE STYLE
========================================= */

.category-page{

    max-width:1400px;
    margin:50px auto;
    padding:0 25px;

}



/* CATEGORY TITLE */

.category-page > h1{

    text-align:center;

    font-size:42px;

    font-weight:700;

    color:#222;

    margin-bottom:45px;

    text-transform:capitalize;

    position:relative;

}


.category-page > h1::after{

    content:"";

    width:80px;

    height:4px;

    background:linear-gradient(90deg,#ff4d4d,#ff9900);

    position:absolute;

    bottom:-15px;

    left:50%;

    transform:translateX(-50%);

    border-radius:20px;

}




/* PRODUCT GRID */

.products-grid{

    display:grid;

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

    gap:30px;

}





/* PRODUCT CARD */

.product-card{

    background:#fff;

    border-radius:22px;

    padding:20px;

    position:relative;

    overflow:hidden;

    border:1px solid #eee;

    transition:.35s ease;

    box-shadow:0 8px 25px rgba(0,0,0,0.06);

}



.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}





/* SALE BADGE */

.sale-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:#ff3b30;

    color:#fff;

    padding:7px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    z-index:2;

}






/* PRODUCT IMAGE */

.product-card img{

    width:100%;

    height:260px;

    object-fit:contain;

    margin-bottom:20px;

    transition:.4s;

}



.product-card:hover img{

    transform:scale(1.05);

}





/* PRODUCT NAME */

.product-card h3{

    font-size:18px;

    font-weight:600;

    line-height:1.4;

    color:#222;

    height:52px;

    overflow:hidden;

    margin-bottom:12px;

}






/* SKU */

.sku{

    font-size:14px;

    color:#777;

    margin-bottom:15px;

    background:#f7f7f7;

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

}







/* PRICE AREA */

.price-box{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

}



.old-price{

    color:#999;

    text-decoration:line-through;

    font-size:15px;

}



.new-price{

    color:#e63946;

    font-size:22px;

    font-weight:800;

}






/* RATING */

.rating{

    color:#ffb400;

    font-size:18px;

    margin-bottom:20px;

}





/* BUTTON AREA */

.product-buttons{

    display:flex;

    gap:10px;

}



.product-buttons a{


    flex:1;

    text-align:center;

    padding:12px 10px;

    border-radius:12px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}




/* VIEW BUTTON */

.product-buttons a:first-child{

    background:#111;

    color:#fff;

}



.product-buttons a:first-child:hover{

    background:#333;

}





/* CART BUTTON */

.cart-btn{

    background:#ff8a00;

    color:white;

}



.cart-btn:hover{

    background:#ff6500;

}







/* EMPTY CATEGORY */

.empty-category{

    text-align:center;

    padding:80px 20px;

}



.empty-category h2{

    font-size:30px;

    color:#333;

}



.empty-category p{

    color:#777;

    margin:15px;

}



.empty-category a{

    display:inline-block;

    margin-top:20px;

    background:#111;

    color:#fff;

    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

}






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



@media(max-width:1200px){

.products-grid{

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

}

}





@media(max-width:900px){

.products-grid{

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

}

}





@media(max-width:600px){


.category-page{

padding:0 15px;

}


.category-page > h1{

font-size:32px;

}



.products-grid{

grid-template-columns:1fr;

}



.product-card img{

height:230px;

}



.product-buttons{

flex-direction:column;

}


}





/* CENTER EMPTY CATEGORY BOX */

.products-grid:has(.empty-category){

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}


.empty-category{

    margin-left:auto;

    margin-right:auto;

}