body {
    padding-top: 70px;
    /* Adjust if your navbar height changes */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa;
    /* Light background for user area */
}

main {
    flex: 1;
}

.product-card {
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15) !important;
}

.product-photo-grid {
    width: 100%;
    height: 200px;
    object-fit: cover;
    /* Ensures the image covers the area, might crop */
}

.card-title {
    min-height: 3rem;
    /* Ensure titles have roughly same height for alignment */
}

#productGridContainer .spinner-border {
    width: 3rem;
    height: 3rem;
}