/*
 * Catalog product details
 *
 * /Catalog and /gian-hang intentionally share _MarketplaceProductCard.
 * The catalog-specific legacy layer hid the store, description and facts to
 * keep cards short.  Keep the catalog's filters and purchase action, while
 * restoring the same useful product context that shoppers see in a store.
 */

body.marketplace-surface .market-catalog-page .market-product-collection:not(.is-list) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr));
}

body.marketplace-surface .market-catalog-page .market-product-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

body.marketplace-surface .market-catalog-page .market-product-content {
    min-height: 0;
    height: 100%;
    align-content: start;
}

/* Restore all of the semantic product information already rendered by the
 * shared partial.  The description remains a concise preview, as it does on
 * /gian-hang; the product page remains the place for a long description. */
body.marketplace-surface .market-catalog-page .market-product-store {
    display: flex;
}

body.marketplace-surface .market-catalog-page .market-product-content > p {
    display: -webkit-box;
}

body.marketplace-surface .market-catalog-page .market-product-facts {
    display: flex;
}

body.marketplace-surface .market-catalog-page .market-product-content > footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--sa-line);
}

/* Catalog is a data-heavy working page. Never leave all results transparent
 * when a browser delays or declines the optional reveal observer (for example
 * after changing between the grid and list URLs). */
body.marketplace-surface .market-catalog-page .market-catalog-results.ui-reveal {
    opacity: 1;
    transform: none;
}

/* A list already has generous horizontal space, so a slightly longer preview
 * helps compare products without opening them one by one. */
body.marketplace-surface .market-catalog-page .market-product-collection.is-list .market-product-content > p {
    min-height: 0;
    -webkit-line-clamp: 3;
}

@media (max-width: 560px) {
    body.marketplace-surface .market-catalog-page .market-product-content {
        min-height: 0;
    }

    body.marketplace-surface .market-catalog-page .market-product-content > p {
        min-height: 0;
        -webkit-line-clamp: 3;
    }

    /* Do not hide stock information on phones now that the card is meant to
     * present the complete purchase context.  Let this small text wrap inside
     * the card instead of overflowing the narrow viewport. */
    body.marketplace-surface .market-catalog-page .market-product-card-stats {
        flex-wrap: wrap;
        overflow: visible;
        white-space: normal;
    }

    body.marketplace-surface .market-catalog-page .market-product-card-stats > i {
        display: inline;
    }

    body.marketplace-surface .market-catalog-page .market-product-card-stats > span:last-child {
        display: inline;
        overflow: visible;
        text-overflow: clip;
    }
}