/* --- YOUR ORIGINAL CARD STYLING --- */
/* 1. Create a uniform "box" for every image */
.card-img-top, .product-image, .card-img {
    width: 100% !important;
    height: 250px !important; /* Forces all images to this exact height */
    
    /* 2. This is the magic part: */
    object-fit: cover !important; /* Fills the 250px box by cropping edges instead of stretching */
    object-position: center; /* Keeps the center of the photo visible */
}

/* 3. Ensures the cards stay the same height */
.card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 4. Keeps the text and buttons aligned */
.card-body {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* --- UPDATED STABILITY STYLING (MOBILE ONLY) --- */
/* This media query ensures the "jump" fix only applies to mobile/tablets */
@media (max-width: 992px) {
    html {
        overflow: hidden;
        width: 100%;
    }

    body {
        height: 100%;
        position: fixed; /* Locks the viewport on mobile to stop jumping */
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: none;
    }
}