/* --- PRODUCT GRID & CARDS (The main store area) --- */
.product-grid {
    /* KEY FIX 1: Ensures grid has enough room and centers it */
    max-width: 1280px; /* Provides ample space for 4 columns */
    margin: 0 auto; /* Centers the grid */
    
    display: flex;
    flex-wrap: wrap;
    /* KEY FIX 2: Spreads cards out evenly */
    justify-content: space-between; 
    
    gap: 20px; /* Reduced gap slightly to help fit four items */
    padding: 40px 20px;
}

.product-card {
    border: 1px solid #DCDCDC; /* Light Grey border */
    background-color: #FFFFFF; /* White card background */
    padding: 20px;
    
    /* KEY FIX 3: Calculate width for 4 cards */
    /* (100% / 4) = 25%. Subtract 15px to account for the 20px gap */
    width: calc(25% - 15px); 
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: box-shadow 0.3s;
    text-align: center;
    /* CRUCIAL: Ensures padding and border are included in the 25% width */
    box-sizing: border-box; 
}

.product-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 🌟 FIX: IMAGE SIZE ADJUSTMENT 🌟 */
.product-card img {
    /* Ensures the image fills the width of the card's content area */
    width: 100%; 
    /* Sets a maximum height for visual consistency (250px is a good starting point) */
    max-height: 250px;
    /* Scales the image down to fit the container without stretching or cropping */
    object-fit: contain;
    /* Centers the image and adds bottom spacing */
    display: block;
    margin: 0 auto 15px auto;
}
/* 🌟 END FIX 🌟 */


/* ========================================================= */
/* 📱 NEW: RESPONSIVE STYLES FOR MOBILE AND TABLETS 📱 */
/* ========================================================= */

/* 2-Column Layout for Tablets and Large Phones (screens up to 768px wide) */
@media (max-width: 768px) {
    .product-grid {
        gap: 15px;
        padding: 20px 10px; /* Adjust padding for smaller screens */
    }

    .product-card {
        /* Calculation for 2 columns: (100% / 2) - half the gap */
        width: calc(50% - 7.5px); 
        padding: 15px;
    }
}

/* 1-Column Layout for Standard Phones (screens up to 480px wide) */
@media (max-width: 480px) {
    .product-grid {
        /* Switch to centering items */
        justify-content: center;
        gap: 15px;
        padding: 15px 10px;
    }

    .product-card {
        /* Full width on very small screens */
        width: 100%;
        /* Prevent the card from getting excessively wide on large phones */
        max-width: 400px;
        padding: 10px;
    }
    
    /* Optional: Shrink product image slightly on the smallest screens */
    .product-card img {
        max-height: 200px;
    }
    
    /* Ensure the header is also responsive */
    header .nav-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 10px;
    }
    .welcome-text {
        order: 3; /* Move welcome text below logo */
        font-size: 1em;
    }
    .whatsapp-link {
        font-size: 1em;
        padding: 5px 0;
    }
}