/* 1. Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

/* 2. Header & Navigation - Eto ang magpapa-clickable ng links */
header {
    background-color: #3e2723;
    color: #fff;
    padding: 15px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* Naka-pako sa taas */
    top: 0;
    z-index: 1000; /* Pinaka-ibabaw para hindi matakpan */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 10px;
    display: block; /* Pinapalaki ang clickable area */
    transition: 0.3s;
}

nav ul li a:hover {
    color: white#d7ccs;
}

/* 3. Hero Section (Home) - Background Image */
.hero {
    height: 85vh;
    /* Gumamit ako ng working link mula sa Unsplash */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url(https://media.istockphoto.com/id/2190516245/photo/close-up-of-americano-pouring-from-the-coffee-machine-into-a-cup-professional-coffee-brewing.jpg?s=1024x1024&w=is&k=20&c=Kv_wwEOet95aihd9somEopdWfku5izsbzQsgDZzbo04=');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    z-index: 1; /* Mas mababa sa Header */
}

/* 4. Menu & Cards */
.best-sellers {
    padding: 80px 10%;
    text-align: center;
}

.product-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.product-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-card img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

/* 5. Footer */
footer {
    background-color: #3e2723;
    color: #fff;
    padding: 40px;
    text-align: center;
}