.product-listing .image .badge { margin-bottom:0px; }
:root {
    --space-s: 10px; /* Fallback value if --space-s is not defined elsewhere */
}

.listing {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 10px); /* Using the fallback value if --space-s is not defined */
    background: #eeeeee;
    padding: 15px;
    border-radius: 10px;
}

.image-aspect-ratio-landscape-4-3 img {
    object-fit: contain;
    height: 100%;
}
  @media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}
  .button {
    background-color: red; 
    color: white; 
    text-decoration: none; 
    padding: 10px 20px; 
    border-radius: 4px; 
    margin: 5px; 
    box-sizing: border-box; /* this ensures padding is included in the total width and height */
    text-align: center; /* center the text horizontally */
    white-space: nowrap; /* prevent the text from wrapping */
    overflow: hidden; /* prevent content from spilling out */
    text-overflow: ellipsis; /* add an ellipsis if the text is too long */
}

@media only screen and (max-width: 600px) {
    .button {
        padding: 10px 10px; 
        font-size: 14px; /* adjust this as needed for your design */
        flex: 1 0 auto; /* adjust flex-grow, flex-shrink, and flex-basis */
        min-width: 0; /* allows the button to shrink below its content's intrinsic width if necessary */
       display: block; /* allows the link to fill the space */
   
    }
}