/* Final compact detail-page rails. The title clamp belongs on the h3 itself
 * because the browser acceptance contract measures that rendered box, while
 * the link inherits the same two-line clipping. */
.app-route-detail .app-similar-feed .listing-card-title-row h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    height: 2.56em !important;
    min-height: 2.56em !important;
    max-height: 2.56em !important;
}

.app-route-detail .app-similar-feed .listing-card-title-row h3 > a {
    display: contents;
}

@media (max-width: 900px) {
    .app-route-detail .app-similar-feed .app-product-rail {
        scroll-padding-inline: 0 16px;
    }

    /* The global mobile rail uses 4:3 media, but the compact detail-page
       recommendation rail is deliberately square. Keep this late, scoped
       override beside the rest of the detail-rail contract. */
    .app-route-detail .app-similar-feed .app-product-rail .app-listing-card .listing-card-media {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .app-route-detail .app-similar-feed .app-product-rail-item:last-child {
        margin-right: 4px;
    }
}