/* HealthyFoodKH V7.5 - display the complete, unaltered uploaded image.
   CSS only: no re-encoding, cropping, resizing or replacement of original files.
   This sheet must load after the V7.3 and V7.2 styles. */

/* Consistent photo frame on the menu and saved favorites. */
#productGrid .food-image-wrap,
#favoritesGrid .food-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden;
    background: #f3f6f0;
}

/* CONTAIN is important: COVER cropped top, bottom and sides of photographs. */
#productGrid .food-image-wrap > img.food-image,
#favoritesGrid .food-image-wrap > img.food-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    border-radius: 0;
}

/* Disable hover zoom that previously cropped the image even when contained. */
#productGrid .food-card:hover img.food-image,
#favoritesGrid .food-card:hover img.food-image {
    transform: none !important;
}

/* Favoriting and promotional badges continue to float above the picture. */
#productGrid .food-image-wrap .favorite-heart,
#favoritesGrid .food-image-wrap .favorite-heart,
#productGrid .food-image-wrap .food-badge,
#favoritesGrid .food-image-wrap .food-badge {
    z-index: 2;
}

/* Preserve the whole image in the basket and checkout miniatures too. */
.cart-drawer .cart-item img.cart-item-img,
.checkout-body .checkout-item img {
    object-fit: contain !important;
    object-position: center !important;
    background: #f3f6f0;
}

@media (max-width: 720px) {
    /* Maintain a tidy two-column card grid; no cropping on small phones. */
    #productGrid .food-image-wrap,
    #favoritesGrid .food-image-wrap {
        aspect-ratio: 1 / 1 !important;
    }
}