/* --- Product Grid Styling --- */
.product-grid-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.product-grid-wrapper:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

/* Ensure images are uniform and fill the box */
.grid-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Makes all images perfectly square. Change to 4/5 if you need them slightly taller */
    object-fit: cover; /* Prevents stretching */
    display: block;
    border-radius: 12px;
}
.product-grid-wrapper img{
    width: 100%;
    border-radius: 15px;
}