/**
 * Shared mobile layout for catalog listing pages (engines + brands homepage).
 * Loaded before engines-mobile.css / brands-mobile.css.
 */

@media (max-width: 768px) {

/* ═══ Hero: Search top, Filters+Sort+View in ONE row ═══ */
.engines-page .engines-homepage-top-row,
.brands-page .brands-homepage-top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.engines-page .engines-homepage-filter-form-wrapper,
.engines-page .hero-filter-combo-filter .brands-filter-form-inline,
.engines-page .listing-between-filters > .cars-filter-hub,
.brands-page .brands-homepage-filter-form-wrapper,
.brands-page .hero-filter-combo-filter .brands-filter-form-inline,
.brands-page .listing-between-filters > .cars-filter-hub,
.cars-page .brands-homepage-filter-form-wrapper,
.cars-page .listing-between-filters > .cars-filter-hub {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
}

.engines-page .engines-homepage-search-form-container,
.brands-page .brands-homepage-search-form-container {
    width: 100% !important;
    flex: none !important;
    order: 1 !important;
}

.engines-page .engines-homepage-actions,
.brands-page .brands-homepage-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
    order: 2 !important;
}

.engines-page .engines-homepage-filter-bar .engines-filters-toggle-btn,
.brands-page .brands-homepage-filter-bar .brands-filters-toggle-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 40px !important;
    font-size: 0.78rem !important;
}

.engines-page .engines-homepage-filter-bar .custom-dropdown,
.brands-page .brands-homepage-filter-bar .custom-dropdown {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.engines-page .engines-homepage-filter-bar .custom-dropdown .dropdown-trigger,
.brands-page .brands-homepage-filter-bar .custom-dropdown .dropdown-trigger {
    height: 40px !important;
    font-size: 0.78rem !important;
}

.engines-page .engines-homepage-filter-bar .custom-dropdown .dropdown-trigger span,
.brands-page .brands-homepage-filter-bar .custom-dropdown .dropdown-trigger span {
    max-width: 58px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.engines-page .engines-homepage-filter-bar .brands-view-toggle,
.brands-page .brands-homepage-filter-bar .brands-view-toggle {
    flex: 0 0 auto !important;
    width: 64px !important;
    height: 40px !important;
}

/* ═══ Filters card: stacked, collapsed hidden ═══ */
.engines-page .engines-filters-card:not(.is-expanded),
.brands-page .brands-filters-card:not(.is-expanded) {
    margin-top: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    pointer-events: none !important;
}

.engines-page .engines-filters-card,
.brands-page .brands-filters-card {
    transition: max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.engines-page .engines-filters-card.is-expanded,
.brands-page .brands-filters-card.is-expanded {
    max-height: 2000px !important;
    padding: 0 !important;
}

.engines-page .engines-filters-grid,
.brands-page .brands-filters-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
}

.engines-page .engines-filter-field,
.brands-page .brands-filter-field {
    width: 100% !important;
    min-width: 0 !important;
}

.engines-page .engines-filter-label,
.brands-page .brands-filter-label {
    font-size: 0.72rem !important;
}

.engines-page .engines-filters-card .engines-filters-card-inner,
.brands-page .brands-filters-card .brands-filters-card-inner {
    overflow: visible !important;
}

.engines-page .engines-filters-card .engines-filters-footer,
.brands-page .brands-filters-card .brands-filters-footer {
    padding: 0.5rem 1rem 0.75rem !important;
}

.engines-page .engines-filters-active-row,
.brands-page .brands-filters-active-row {
    flex-wrap: wrap !important;
    padding: 0 1rem 0.5rem !important;
}

/* Brand model listing + model version listing — collapsible filters card */
.brand-detail-page .brands-filters-card:not(.is-expanded),
.model-detail-page .brands-filters-card:not(.is-expanded) {
    margin-top: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    pointer-events: none !important;
}

.brand-detail-page .brands-filters-card,
.model-detail-page .brands-filters-card {
    transition: max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.brand-detail-page .brands-filters-card.is-expanded,
.model-detail-page .brands-filters-card.is-expanded {
    max-height: 2000px !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.brand-detail-page .brands-filters-card .brands-filters-card-inner,
.model-detail-page .brands-filters-card .brands-filters-card-inner {
    overflow: visible !important;
}

.brand-detail-page .catalog-detail-filter-top-row,
.model-detail-page .catalog-detail-filter-top-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
}

.brand-detail-page .catalog-detail-filter-top-row .brands-live-search,
.model-detail-page .catalog-detail-filter-top-row .brands-live-search {
    margin-bottom: 0.2rem !important;
}

/* Toolbar: row 1 sort (+ model: group), row 2 filters + view + clear */
.brand-detail-page .catalog-detail-filter-actions,
.model-detail-page .catalog-detail-filter-actions {
    margin-left: 0 !important;
    margin-top: 0.15rem !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 0.6rem !important;
    align-items: stretch !important;
}

.brand-detail-page .catalog-detail-filter-actions .catalog-detail-inline-sort {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.brand-detail-page .catalog-detail-inline-sort .filter-row-sort {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 0.45rem !important;
    align-items: center !important;
}

.brand-detail-page .catalog-detail-inline-sort .filter-row-sort .custom-dropdown {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.brand-detail-page .catalog-detail-inline-sort .dropdown-trigger {
    overflow: hidden !important;
}

.brand-detail-page .catalog-detail-inline-sort .dropdown-trigger span {
    max-width: 28ch !important;
}

.brand-detail-page .catalog-detail-brand-toolbar-filters-view-row,
.model-detail-page .catalog-detail-model-toolbar-filters-view-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
}

.brand-detail-page .catalog-detail-brand-toolbar-filters-view-row .engines-filters-toggle-btn,
.model-detail-page .catalog-detail-model-toolbar-filters-view-row .engines-filters-toggle-btn {
    flex: 1 1 120px !important;
    min-width: 0 !important;
    height: 40px !important;
    font-size: 0.78rem !important;
}

.brand-detail-page .catalog-detail-brand-toolbar-filters-view-row .brands-filter-actions,
.model-detail-page .catalog-detail-model-toolbar-filters-view-row .brands-filter-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-left: auto !important;
    min-width: 0 !important;
}

.brand-detail-page .catalog-detail-brand-toolbar-filters-view-row .clear-filters-btn,
.model-detail-page .catalog-detail-model-toolbar-filters-view-row .clear-filters-btn {
    flex-shrink: 0 !important;
}

/* Model: Sort | Group — tight column gap (no visual "hole" between buttons) */
.model-detail-page .catalog-detail-model-toolbar-sort-group-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.28rem !important;
    row-gap: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
}

.model-detail-page .catalog-detail-model-toolbar-sort-group-row .catalog-detail-inline-sort {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.model-detail-page .catalog-detail-model-toolbar-sort-group-row .catalog-detail-inline-sort .custom-dropdown,
.model-detail-page .catalog-detail-model-toolbar-sort-group-row .custom-dropdown#groupDropdown {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.model-detail-page .catalog-detail-model-toolbar-sort-group-row .dropdown-trigger {
    max-width: 100% !important;
    overflow: hidden !important;
}

.model-detail-page .catalog-detail-model-toolbar-sort-group-row .dropdown-trigger span {
    max-width: 16ch !important;
}

/* HP / displacement: always single column in filters sheet on mobile */
.brand-detail-page .catalog-detail-filters-below .catalog-detail-range-grid,
.model-detail-page .catalog-detail-filters-below .catalog-detail-range-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

.brand-detail-page .catalog-detail-filters-below .catalog-detail-range-grid .engines-filter-label,
.model-detail-page .catalog-detail-filters-below .catalog-detail-range-grid .engines-filter-label {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.brand-detail-page .catalog-detail-filters-below .engines-range-inputs,
.model-detail-page .catalog-detail-filters-below .engines-range-inputs {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto !important;
    gap: 0.3rem 0.35rem !important;
}

.brand-detail-page .catalog-detail-filters-below .engines-range-inputs input,
.model-detail-page .catalog-detail-filters-below .engines-range-inputs input {
    min-width: 0 !important;
}

}