/* Fix the styling issue in Jetpack search result page SS-5894495-hc */
.jetpack-instant-search__search-result-title .jetpack-instant-search__search-result-title-link {
   flex-wrap: wrap;
}/* Limit title to 50 characters and style for desktop */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 1em;
    max-width: 50ch; /* Limits title to about 50 characters */
    text-align: center; /* Keeps titles aligned neatly */
}

/* Adjust product grid layout for desktop */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Makes the grid responsive */
    gap: 20px; /* Gap between grid items */
    justify-content: center; /* Centers the grid items */
    text-align: center; /* Centers the text */
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .woocommerce ul.products {
        display: grid;
        grid-template-columns: 1fr; /* One item per row */
        gap: 10px; /* Adjust gap for mobile */
        width: 100%; /* Ensures everything fits on the screen */
        justify-items: center; /* Centers the items in each grid cell */
    }

    .woocommerce ul.products li.product {
        text-align: center;
        box-sizing: border-box;
        padding: 5px; /* Reduced padding */
        max-width: 100%; /* Makes sure the product box takes the full width */
        width: 100%; /* Ensures product box uses full width */
    }

    /* Enlarge the images on mobile without distorting */
    .woocommerce ul.products li.product img {
        width: 100% !important; /* Ensures image takes full width */
        height: auto !important; /* Auto-adjusts the height based on the width */
        max-width: 100% !important; /* Prevents image overflow */
        object-fit: contain; /* Keeps the image aspect ratio */
        display: block;
        margin-left: auto;
        margin-right: auto; /* Centers the image */
    }

    /* Adjust the gap between the image and the text */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        margin-top: 10px; /* Reduce space between text and image */
        font-size: 1.1em; /* Adjust title size for mobile */
    }
}