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

.products-page{

    width:90%;

    max-width:1200px;

    margin:70px auto;

}

.products-header{

    text-align:center;

    margin-bottom:60px;

}

.products-header h1{

    font-size:48px;

    color:#ff4f87;

    margin-bottom:15px;

}


.products-header p{

    color:#666;

    font-size:20px;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}

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

.products-filter{

    display:flex;

    flex-direction:column;

    gap:25px;

    margin-bottom:50px;

}

.products-filter input{

    width:100%;

    padding:16px 20px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:17px;

    outline:none;

    transition:.3s;

    max-width: 650px;

    margin:auto;

}

.products-filter input:focus{

    border-color:#ff4f87;

    box-shadow:0 0 0 4px rgba(255,79,135,.12);

}

.category-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.category-buttons a{

    padding:10px 18px;

    border-radius:30px;

    background:#f5f5f5;

    color:#555;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.category-buttons a:hover{

    background:#ff4f87;

    color:white;

}

.active-category{

    background:#ff4f87 !important;

    color:white !important;

}

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

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,320px));

    justify-content:center;

    gap:30px;

}

.product-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s;

    display:flex;

    flex-direction:column;

    width:100%;

    max-width:320px;

    text-decoration:none;

    color:inherit;

}

.product-card:hover{

    transform:translateY(-8px) scale(1.03);

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

}



.product-card img{

    width:100%;

    aspect-ratio:4 / 3;

    height:auto;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.product-image-link{

    display:block;

}

.product-card-content{

    display:flex;

    flex-direction:column;

    flex:1 0 auto;

}

.product-card h3{

    margin:16px 12px 8px;

    color:#333;

    font-size:20px;

    line-height:1.5;

    height:66px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

}

.product-link{

    text-decoration:none;

    color:inherit;

    display:block;

    height:90px;

    flex:0 0 90px;

}

/*.product-card p{

    margin:0 20px 18px;

    color:#777;

    line-height:1.7;

    flex-grow:1;

}*/

.product-card h4{

    margin:0 20px 18px;

    color:#ff4f87;

    font-size:24px;

    font-weight:bold;

    flex:0 0 auto;

}

.add-to-cart-btn{

    margin:0 20px 20px;

    background:#ff4f87;

    color:white;

    text-align:center;

    padding:14px;

    border-radius:12px;

    font-weight:bold;

    transition:.3s;

    display:block;

    flex:0 0 auto;

}

.add-to-cart-btn:hover{

    background:#ff2d70;

}

.price{

    margin:0 20px 20px;

    color:#ff4f87;

    font-size:24px;

    font-weight:bold;

}


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

@media (max-width:768px){

    .products-page{

        width:95%;

        margin:45px auto;

    }

    .products-header h1{

        font-size:36px;

    }

    .products-header p{

        font-size:17px;

    }

    .products-grid{

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

    }

    .product-card h3{

        margin:16px 12px 8px;

        color:#333;

        font-size:20px;

        line-height:1.5;

        height:66px;

        overflow:hidden;

        display:-webkit-box;

        -webkit-box-orient:vertical;

        -webkit-line-clamp:2;

    }

    .product-card h4{

        font-size:22px;

        margin:0 12px 15px;

    }

    .add-to-cart-btn{

        margin:0 12px 15px;

        padding:13px 8px;

        min-height:52px;

        display:flex;

        align-items:center;

        justify-content:center;

        box-sizing:border-box;

    }


}