/*
|--------------------------------------------------------------------------
| Sean B Shop Marketplace
| Category Page CSS
|--------------------------------------------------------------------------
*/


/*=====================================================
 CATEGORY PAGE
=====================================================*/

.category-page{

    background:#f5f7fa;
    padding:35px 0 80px;
    min-height:70vh;

}


.category-page .container{

    width:100%;
    max-width:1280px;
    margin:auto;
    padding:0 20px;

}




/*=====================================================
 BREADCRUMB
=====================================================*/


.breadcrumb{

    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:25px;
    font-size:.9rem;

}


.breadcrumb a{

    color:#555;
    text-decoration:none;

}


.breadcrumb a:hover{

    color:#e60000;

}


.breadcrumb span{

    color:#999;

}


.breadcrumb strong{

    color:#0b1f3a;

}






/*=====================================================
 CATEGORY HEADER
=====================================================*/


.category-header{

    background:#fff;
    padding:35px;
    border-radius:18px;
    margin-bottom:25px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.05);

}


.category-header h1{

    margin:0 0 12px;
    color:#0b1f3a;
    font-size:2rem;
    font-weight:700;

}


.category-header p{

    color:#666;
    max-width:700px;
    margin:0 auto 15px;
    line-height:1.7;

}


.category-header strong{

    color:#e60000;
    font-size:.95rem;

}






/*=====================================================
 FILTER TOOLBAR
=====================================================*/


.category-toolbar{

    background:#fff;
    padding:20px;
    border-radius:15px;
    margin-bottom:30px;
    box-shadow:0 5px 20px rgba(0,0,0,.04);

}



.category-toolbar form{

    display:flex;
    gap:15px;
    align-items:center;

}



.category-toolbar input{

    flex:1;
    height:45px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:0 15px;
    font-size:.95rem;
    outline:none;

}



.category-toolbar input:focus{

    border-color:#0b1f3a;

}



.category-toolbar select{

    height:45px;
    padding:0 15px;
    border-radius:8px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;

}



.category-toolbar button{

    height:45px;
    padding:0 25px;
    border:none;
    border-radius:8px;
    background:#e60000;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.3s;

}



.category-toolbar button:hover{

    background:#b90000;

}







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


.products-grid{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;

}






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


.product-card{

    background:#fff;
    border-radius:15px;
    overflow:hidden;
    border:1px solid #eee;
    transition:.3s;
    position:relative;

}



.product-card:hover{

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

}



.product-card a{

    text-decoration:none;
    color:inherit;
    display:block;

}





/*=====================================================
 PRODUCT IMAGE
=====================================================*/


.product-image{

    width:100%;
    aspect-ratio:1/1;
    background:#fafafa;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;

}



.product-image img{

    width:100%;
    height:100%;
    object-fit:contain;
    transition:.4s;

}



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

    transform:scale(1.05);

}






/*=====================================================
 PRODUCT DETAILS
=====================================================*/


.product-card h3{

    padding:15px 15px 8px;
    margin:0;
    color:#0b1f3a;
    font-size:.95rem;
    line-height:1.45;
    min-height:55px;
    font-weight:600;

}




.product-price{

    padding:0 15px;
    color:#e60000;
    font-size:1.1rem;
    font-weight:700;

}







/*=====================================================
 STOCK BADGE
=====================================================*/


.stock{

    display:inline-block;
    margin:12px 15px 18px;
    padding:6px 12px;
    border-radius:20px;
    font-size:.75rem;
    font-weight:600;

}



.stock.available{

    background:#e8f8ef;
    color:#198754;

}



.stock.unavailable{

    background:#fdeaea;
    color:#dc3545;

}







/*=====================================================
 EMPTY PRODUCTS
=====================================================*/


.empty-products{

    grid-column:1/-1;
    background:#fff;
    padding:70px 20px;
    text-align:center;
    border-radius:18px;

}



.empty-products h3{

    color:#0b1f3a;
    margin-bottom:10px;

}



.empty-products p{

    color:#777;

}







/*=====================================================
 PAGINATION
=====================================================*/


.pagination{

    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:40px;
    flex-wrap:wrap;

}



.pagination a{

    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:8px;
    text-decoration:none;
    color:#0b1f3a;
    font-weight:600;
    border:1px solid #ddd;

}



.pagination a:hover{

    background:#0b1f3a;
    color:#fff;

}



.pagination a.active{

    background:#e60000;
    color:#fff;
    border-color:#e60000;

}








/*=====================================================
 TABLETS
=====================================================*/


@media(max-width:1100px){


    .products-grid{

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

    }


}







@media(max-width:900px){


    .products-grid{

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

    }


    .category-toolbar form{

        flex-wrap:wrap;

    }


}







/*=====================================================
 MOBILE
=====================================================*/


@media(max-width:600px){


    .category-page{

        padding:20px 0 50px;

    }



    .category-header{

        padding:25px 18px;

    }



    .category-header h1{

        font-size:1.5rem;

    }



    .category-toolbar form{

        flex-direction:column;

        align-items:stretch;

    }



    .category-toolbar button,
    .category-toolbar select,
    .category-toolbar input{

        width:100%;

    }



    .products-grid{

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

    }



    .product-card h3{

        font-size:.85rem;
        padding:12px 10px;

    }



    .product-price{

        font-size:.95rem;
        padding:0 10px;

    }



    .stock{

        margin:10px;

    }


}





@media(max-width:380px){


    .products-grid{

        gap:10px;

    }


}