/* WarextMarket v0.547
 * Category/filter alignment and equal-height listing card stabilization.
 * Scoped to category listing pages so home/profile/admin cards keep their own layouts.
 */

html body:not(.admin-body) .category-listing-page .listing-filter-panel,
html body:not(.admin-body) .category-listing-page .listing-filter-form,
html body:not(.admin-body) .category-listing-page .listing-filter-group,
html body:not(.admin-body) .category-listing-page .listing-results-panel,
html body:not(.admin-body) .category-listing-page .listing-results-toolbar,
html body:not(.admin-body) .category-listing-page .listing-browser-grid,
html body:not(.admin-body) .category-listing-page .listing-browser-card,
html body:not(.admin-body) .category-listing-page .listing-browser-card__seller,
html body:not(.admin-body) .category-listing-page .listing-browser-card__media,
html body:not(.admin-body) .category-listing-page .listing-browser-card__body,
html body:not(.admin-body) .category-listing-page .listing-browser-card__price,
html body:not(.admin-body) .category-listing-page .listing-browser-card__price--cta {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Do not let the legacy mobile negative-margin rule pull the results panel
 * outside the category/filter column. */
html body:not(.admin-body) .category-listing-page .listing-results-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
}

html body:not(.admin-body) .category-listing-page .listing-results-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
}

html body:not(.admin-body) .category-listing-page .listing-results-toolbar > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body:not(.admin-body) .category-listing-page .listing-results-toolbar p {
    margin: 4px 0 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

/* Filter controls stay inside their own column instead of widening or
 * shifting the result column. */
html body:not(.admin-body) .category-listing-page .listing-filter-form input,
html body:not(.admin-body) .category-listing-page .listing-filter-form select,
html body:not(.admin-body) .category-listing-page .listing-filter-form textarea,
html body:not(.admin-body) .category-listing-page .listing-filter-submit,
html body:not(.admin-body) .category-listing-page .listing-filter-reset {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body:not(.admin-body) .category-listing-page .listing-filter-group label,
html body:not(.admin-body) .category-listing-page .listing-filter-group h3,
html body:not(.admin-body) .category-listing-page .listing-type-item {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

/* Every grid item stretches to the row height.  The legacy mobile sheet
 * forces cards to display:block; restore a vertical flex layout here so
 * title/meta length cannot move the price/CTA to a different baseline. */
html body:not(.admin-body) .category-listing-page .listing-browser-grid {
    align-items: stretch !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-grid > .listing-browser-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__seller,
html body:not(.admin-body) .category-listing-page .listing-browser-card__media {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__seller-meta {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__seller-meta strong,
html body:not(.admin-body) .category-listing-page .listing-browser-card__seller-meta span,
html body:not(.admin-body) .category-listing-page .listing-browser-card__seller-meta small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__body h3 {
    display: -webkit-box !important;
    min-height: 2.6em !important;
    max-height: 2.6em !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__body ul,
html body:not(.admin-body) .category-listing-page .listing-browser-card__body li {
    min-width: 0 !important;
    max-width: 100% !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__body li {
    overflow-wrap: anywhere !important;
}

html body:not(.admin-body) .category-listing-page .listing-browser-card__price,
html body:not(.admin-body) .category-listing-page .listing-browser-card__price--cta {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;
}

@media (max-width: 640px) {
    html body:not(.admin-body) .category-listing-page .listing-results-panel {
        margin-inline: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html body:not(.admin-body) .category-listing-page .listing-results-toolbar {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}