/**
 * Product names on cards: one line, everywhere (ARKAN-257)
 *
 * A long name is cut off and ends with "…", so every card in a row is the
 * same height. The product page shows the name in full (#product-info's
 * title is not a card and is not listed here).
 *
 * The cards each have their own name class, some clamped to two lines by
 * their page's stylesheet (explore-men, search, the wishlist and Complete The
 * Look on phones). The one-line rules are !important so they win over those
 * page rules, whatever their selector or load order.
 */

.text-wrapper .model,                 /* homepage carousels and grids, collection cards (js/products.js) */
.product-card-title,                  /* collection, gender, search results and photo search pages */
.search-result-title,                 /* search drop-down */
#related-products .related-product-title,
.wishlist-card-title,                 /* My Account → Wishlist */
.wishlist-item-title,                 /* wishlist drawer */
.ctl-card-title,                      /* homepage Complete the Look */
.qs-ctls-card__name,                  /* Complete The Looks page */
.tiktok-tile-name {                   /* TikTok collection tiles */
    display: block !important;
    max-width: 100%;
    min-width: 0;
    min-height: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
}

/* A link inside the name (wishlist drawer) is cut with it */
.wishlist-item-title a {
    white-space: nowrap;
}

/*
 * The cards, and the boxes between a card and its name, may shrink below the
 * name's full length. A grid or flex item is otherwise at least as wide as its
 * content, and a one-line name is as wide as the whole name: the long one would
 * widen its column (two columns of 300 and 353px in a 343px grid on a phone)
 * instead of being cut. :where() keeps this at no specificity, so any card
 * that sets a min-width of its own keeps it.
 */
:where(
    .product-card, .product-card-wrapper, .product-link, .text-wrapper,
    .related-product-info,
    .search-result-item, .search-result-info,
    .wishlist-card, .wishlist-card-link, .wishlist-card-info,
    .wishlist-drawer-item, .wishlist-item-details,
    .ctl-card, .ctl-card-link, .ctl-card-text,
    .qs-ctls-card,
    .tiktok-tile, .tiktok-tile-caption
) {
    min-width: 0;
}

/*
 * …and the boxes inside a card never grow past it. A box sized to its content
 * (the related products' info box, in a flex column card) is otherwise as wide
 * as the whole name, and the card's own overflow cuts the name off with no "…".
 */
:where(
    .product-link, .text-wrapper,
    .related-product-info,
    .search-result-info,
    .wishlist-card-link, .wishlist-card-info,
    .wishlist-item-details,
    .ctl-card-link, .ctl-card-text,
    .tiktok-tile-caption
) {
    max-width: 100%;
}