/**
 * Clotya Product Title Ellipsis Styles
 *
 * This CSS targets the product title elements in the Clotya theme shop loop.
 */

.product-content .product-title {
    /* Required for ellipsis: prevents text from wrapping */
    white-space: nowrap;
    
    /* Required for ellipsis: hides text outside the container */
    overflow: hidden;
    
    /* Required for ellipsis: shows the '...' at the end */
    text-overflow: ellipsis;
    
    /* A necessary constraint: defines the max width the text can occupy */
    max-width: 100%; 
}

/* Ensure the anchor tag inside the title also respects the overflow properties */
.product-content .product-title a {
    display: block;
    width: 100%;
}

/* If the text is wrapped in the <h3> tag, target the <h3> */
.product-content h3.product-title {
    max-width: 200px; /* Adjust this width based on your desired layout */
    /* You may need to use !important if the theme has strong CSS rules */
}