*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


body{
    background:#f8f9fa;
    color:#333;
}


/*
 * =========================================================
 * PAGE TITLE
 * =========================================================
 */

.page-title{
    margin-top:75px;

    text-align:center;

    padding:60px 20px;

    background:#b71c1c;

    color:#fff;
}


.page-title h1{
    font-size:2.8rem;

    margin-bottom:10px;
}


.page-title p{
    font-size:1rem;
}


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

.filters{
    width:90%;
    max-width:1200px;

    margin:40px auto;

    display:flex;

    gap:20px;

    justify-content:space-between;

    flex-wrap:wrap;
}


/*
 * =========================================================
 * SEARCH BOX
 * =========================================================
 */

.search-box{
    flex:1;

    position:relative;
}


.search-box i{
    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    color:#888;
}


.search-box input{
    width:100%;

    padding:14px 20px 14px 50px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;
}


.search-box input:focus{
    outline:none;

    border-color:#b71c1c;
}


/*
 * =========================================================
 * CATEGORY FILTER
 * =========================================================
 */

.category-filter select{
    padding:14px 20px;

    border:1px solid #ddd;

    border-radius:10px;

    background:#fff;

    cursor:pointer;

    min-width:220px;
}


.category-filter select:focus{
    outline:none;

    border-color:#b71c1c;
}


/*
 * =========================================================
 * PRODUCTS CONTAINER
 * =========================================================
 */

.menu-products{
    width:90%;
    max-width:1300px;

    margin:auto;

    padding-bottom:70px;
}


.products-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}


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

.product-card{
    background:#fff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;
}


.product-card:hover{
    transform:translateY(-8px);
}


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

.product-image{
    height:220px;

    overflow:hidden;
}


.product-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.3s;
}


.product-card:hover img{
    transform:scale(1.05);
}


/*
 * =========================================================
 * PRODUCT INFORMATION
 * =========================================================
 */

.product-info{
    padding:20px;
}


.category{
    display:inline-block;

    background:#fff4d8;

    color:#b71c1c;

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    margin-bottom:12px;
}


.product-info h3{
    margin-bottom:10px;

    color:#222;
}


.product-info p{
    color:#666;

    font-size:14px;

    min-height:60px;

    margin-bottom:15px;
}


.product-info h2{
    color:#b71c1c;

    margin-bottom:20px;
}


/*
 * =========================================================
 * QUANTITY CONTROLS
 * =========================================================
 */

.quantity{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    margin-bottom:20px;
}


.quantity button{
    width:40px;
    height:40px;

    border:none;

    background:#b71c1c;

    color:#fff;

    border-radius:8px;

    cursor:pointer;

    font-size:18px;
}


.quantity button:hover{
    background:#8b0000;
}


.quantity input{
    width:60px;

    text-align:center;

    height:40px;

    border:1px solid #ccc;

    border-radius:8px;
}


/*
 * =========================================================
 * ADD TO CART
 * =========================================================
 */

.add-cart{
    width:100%;

    padding:14px;

    border:none;

    background:#ffc107;

    color:#333;

    font-weight:600;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;
}


.add-cart:hover{
    background:#ffb300;
}


.add-cart i{
    margin-right:8px;
}


/*
 * =========================================================
 * DISABLED PRODUCT CONTROLS
 * =========================================================
 */

.quantity button:disabled,
.quantity input:disabled,
.add-cart:disabled{
    cursor:not-allowed;

    opacity:0.5;
}


/*
 * =========================================================
 * NO PRODUCTS
 * =========================================================
 */

.no-products{
    grid-column:1/-1;

    background:#fff;

    padding:60px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.08);
}


.no-products i{
    font-size:60px;

    color:#b71c1c;

    margin-bottom:20px;
}


.no-products h2{
    margin-bottom:10px;
}


/*
 * =========================================================
 * FOOTER
 * =========================================================
 */

footer{
    background:#b71c1c;

    color:#fff;

    text-align:center;

    padding:20px;

    margin-top:40px;
}


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

@media(max-width:768px){

    /*
     * =====================================================
     * PAGE TITLE
     * =====================================================
     */

    .page-title{
        /*
         * The shared mobile topbar is no longer inside
         * this CSS file.
         *
         * customer_topbar.css handles the topbar.
         */
        margin-top:0;

        padding:45px 20px;
    }


    .page-title h1{
        font-size:2rem;
    }


    .page-title p{
        font-size:.95rem;
    }


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

    .filters{
        width:90%;

        margin:30px auto;

        flex-direction:column;

        gap:15px;
    }


    .search-box{
        width:100%;
    }


    .category-filter{
        width:100%;
    }


    .category-filter select{
        width:100%;

        min-width:0;
    }


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

    .menu-products{
        width:90%;

        padding-bottom:50px;
    }


    .products-grid{
        grid-template-columns:
            repeat(auto-fit,minmax(240px,1fr));

        gap:20px;
    }


    .product-image{
        height:210px;
    }

}


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

@media(max-width:480px){

    /*
     * =====================================================
     * PAGE TITLE
     * =====================================================
     */

    .page-title{
        padding:40px 15px;
    }


    .page-title h1{
        font-size:1.8rem;
    }


    .page-title p{
        font-size:.9rem;
    }


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

    .products-grid{
        grid-template-columns:1fr;
    }


    .product-image{
        height:200px;
    }

}