/* Target the specific Tailwind classes used in the Loop widget */
img.h-\[50px\].w-\[50px\] {
    width: 46px !important;
    height: 46px !important;
    border-radius: 5px !important;
    min-width: 46px !important;
}

/* Ensure the container doesn't force it back to 50px */
.loop-bundle-added-item-row img {
    max-width: 46px !important;
    max-height: 46px !important;
}

/* Targets the specific image container used in the banner */
.loop-bundle-image-container.loop-img-fit {
    display: none !important;
}

/* Ensure the header container collapses its height after hiding the image */
.loop-bundle-header, 
[class*="loop-bundle-banner"] {
    display: none !important; /* Optional: If the empty banner area still shows, use this line. */
}

/* Remove the product description container from the bundle card */
.loop-product-description, 
.loop-bundle-product-card-description,
.loop-bundle-image-container {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* Optional: Tighten up the spacing in the body container if it looks too gapped */
.loop-product-card-description-body {
    gap: 4px !important; /* Adjust this number to bring title and price closer together */
}

/* Target the product image directly */
img.loop-img-fit.image-width {
    width: 100% !important;
    height: 100% !important;
    /* This is the magic line that fixes aspect ratio issues */
    object-fit: cover !important; 
    /* Ensures the image stays centered within its box */
    object-position: center !important; 
    border-radius: 12px !important;
}

/* Ensure the parent container doesn't restrict the image's "cover" behavior */
.loop-bundle-product-card-image-wrapper {
    aspect-ratio: 1 / 1 !important; /* Forces the box to be a perfect square */
    overflow: hidden !important;
    border-radius: 12px !important;
}