/* ---------------- General ---------------- */
body {
    margin:0;
    padding:0;
    font-family:'Roboto', sans-serif;
    background:#fdf9f8;
    color:#333;
}



/* ---------------- Hero ---------------- */
.products-hero {
    text-align:center;
    padding:120px 20px;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/products-hero.jpg') center/cover no-repeat;
    color:#fff;
}
.products-hero h1 {
    font-family:'Playfair Display', serif;
    font-size:48px;
    margin-bottom:20px;
    animation: fadeInDown 1s ease forwards;
}
.products-hero p {
    font-size:20px;
    margin-bottom:30px;
    animation: fadeInUp 1.5s ease forwards;
}
.btn-gradient {
    padding:15px 35px;
    font-weight:bold;
    color:#fff;
    background: linear-gradient(45deg, #ff8a00, #e52e71);
    border:none;
    border-radius:50px;
    cursor:pointer;
    transition:0.4s;
    text-decoration:none;
}
.btn-gradient:hover {
    transform: scale(1.05);
    box-shadow:0 10px 25px rgba(229,46,113,0.4);
}

/* ---------------- Product Grid ---------------- */
.product-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:30px;
    padding:80px 20px;
}
.product-card {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius:20px;
    width:250px;
    text-align:center;
    padding:20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.5s, box-shadow 0.5s;
}
.product-card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.product-card img {
    width:100%;
    border-radius:15px;
    margin-bottom:15px;
    transition: transform 0.5s;
}
.product-card:hover img {
    transform: scale(1.1);
}
.product-card h3 {
    font-family:'Playfair Display', serif;
    font-size:20px;
    margin-bottom:8px;
}
.product-card p {
    font-weight:bold;
    color:#e52e71;
    margin-bottom:12px;
}

/* ---------------- Animations ---------------- */
@keyframes fadeInDown {
    0% { opacity:0; transform:translateY(-50px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp {
    0% { opacity:0; transform:translateY(50px); }
    100% { opacity:1; transform:translateY(0); }
}

/* ---------------- Responsive ---------------- */
@media(max-width:992px){
    .product-grid { gap:20px; }
}
@media(max-width:768px){
    .product-grid { flex-direction:column; align-items:center; }
    .products-hero h1 { font-size:36px; }
}