/**
 * Inventory UI refinements for pages that include [motors_listing_inventory].
 * Scoped with body.stm-inventory-shortcode-page (see functions.php).
 *
 * Featured “bleed” alignment uses CSS variables (defaults below). Override from a plugin or child
 * `functions.php` via filters in motors_child_inventory_featured_gutter_css_vars() — no need to fork this file
 * if Motors changes gutter sizes slightly.
 */

/* Defaults for featured listing horizontal bleed (list / grid); PHP may override same vars on body. */
body.stm-inventory-shortcode-page {
	--mc-inv-gutter-list: 15px;
	--mc-inv-gutter-grid-bs: 15px;
	--mc-inv-gutter-grid-mvl: 8px;
}

/* Do not hide .stm_breadcrumbs_unit — that is the theme/page-setting breadcrumb (e.g. Breadcrumb NavXT). */

/* --- MVL Pro only: duplicate “Home › Page title” row inside inventory (search-results-actions) --- */
.stm-inventory-shortcode-page .search-results-actions-breadcrumbs {
	display: none !important;
}

/* --- Classic vertical filter sidebar (not horizontal bar layout) --- */
.stm-inventory-shortcode-page .archive-listing-page_side:not(.horizontal_filter) .filter.filter-sidebar {
	background: #fff;
	border: 1px solid #e0e3e8;
	border-radius: 8px;
	padding: 16px 16px 12px;
	box-sizing: border-box;
	/* Do not use overflow:hidden — Select2 / custom dropdowns paint outside the box; clipping caused left shift & cut-off labels. */
	overflow: visible;
}

.stm-inventory-shortcode-page .archive-listing-page_side:not(.horizontal_filter) .filter.filter-sidebar .sidebar-action-units {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid #eceef2;
}

/* --- Sidebar heading: full-width tab strip (rounded top only), not an inset “field” --- */
.stm-inventory-shortcode-page .sidebar-entry-header.motors-child-filters-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -16px -16px 14px;
	padding: 12px 16px;
	background: #f0f2f5;
	border-radius: 7px 7px 0 0;
	border: none;
	border-bottom: 1px solid #e4e7ec;
	color: #1a1d24;
}

.stm-inventory-shortcode-page .sidebar-entry-header.motors-child-filters-heading .h4 {
	font-size: 15px;
	line-height: 1.25;
	font-weight: 600;
	margin: 0;
	letter-spacing: 0.02em;
	color: inherit;
}

.stm-inventory-shortcode-page .sidebar-entry-header.motors-child-filters-heading i {
	font-size: 18px;
	color: #3a4049;
	opacity: 1;
}

/* --- MVL Pro inventory (inventory-modern / inventory-modular): sidebar filter column --- */
.stm-inventory-shortcode-page .stm-inventory-pro-sidebar .stm-inventory-pro-filter {
	background: #fff;
	border: 1px solid #e0e3e8;
	border-radius: 8px;
	padding: 12px 14px 16px;
	box-sizing: border-box;
	/* Do not use overflow:hidden — opening selects/dropdowns must not be clipped (was shifting content left). */
	overflow: visible;
}

.stm-inventory-shortcode-page .stm-inventory-pro-filter-header {
	margin: -12px -14px 14px;
	padding: 12px 16px;
	background: #f0f2f5;
	border-radius: 7px 7px 0 0;
	border: none;
	border-bottom: 1px solid #e4e7ec;
	color: #1a1d24;
}

.stm-inventory-shortcode-page .stm-inventory-pro-filter-header .heading {
	font-size: 15px;
	line-height: 1.25;
	font-weight: 600;
	margin: 0;
	letter-spacing: 0.02em;
	color: inherit;
}

/*
 * MVL Pro “static” filter skin sets .stm-pro-filter-dropdown-box to width:130% so the open panel
 * bleeds past the field; inside our boxed sidebar column that overlaps the listing grid.
 */
body.stm-inventory-shortcode-page .stm-inventory-pro-sidebar .stm-filter-pro-item-content.static .stm-pro-filter-dropdown-box {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * Modular inventory uses “aside” for most dropdowns: MVL positions the panel at left:100% with
 * min-width:370px so it opens beside the filter column. In a narrow boxed sidebar that reads as
 * a huge dropdown overlapping listings — keep the panel the width of the filter row instead.
 */
@media (min-width: 1024px) {
	body.stm-inventory-shortcode-page .stm-inventory-pro-sidebar .stm-filter-item .stm-filter-pro-item-content.aside {
		left: 0;
		right: auto;
		margin-left: 0;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}
}

/* Keep option rows (logo + label + count) inside the constrained dropdown. */
body.stm-inventory-shortcode-page .stm-inventory-pro-sidebar .stm-pro-filter-dropdown-box .stm-filter-pro-item-content {
	max-width: 100%;
}

body.stm-inventory-shortcode-page .stm-inventory-pro-sidebar .stm-pro-filter-dropdown-box .stm-filter-pro-item-content .select2-option-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* --- Featured listings cluster (wrapper from child listings/filter/featured.php) --- */
/*
 * Equal padding on all sides inside the bordered panel.
 * Widen slightly so the panel lines up with listing cards: offset must match row gutters.
 * - Plugin `filter/results.php`: featured is inside one `.stm-isotope-sorting` (uses .default on outer for default skin).
 * - Motors parent `listings/filter/results.php` (inventory-modern): featured is `#listings-result > .motors-child-inventory-featured-wrap`
 *   *before* `.stm-isotope-sorting-main` — previous selectors never matched; use :has(+ .stm-isotope-sorting-main…).
 * - List + grid default: Bootstrap .row ≈ -15px.
 * - Grid MVL modern cards (skin_* / classic): MVL base.css uses -8px on `.mvl-card-skins.car-listing-modern-grid`.
 */
.stm-inventory-shortcode-page .motors-child-inventory-featured-wrap {
	background: #f6f7f9;
	border: 1px solid #e0e3e8;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 20px;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
}

@media (min-width: 768px) {
	.stm-inventory-shortcode-page #listings-result > .stm-isotope-sorting.stm-isotope-sorting-list > .motors-child-inventory-featured-wrap {
		margin-inline: calc(-1 * var(--mc-inv-gutter-list));
		width: calc(100% + 2 * var(--mc-inv-gutter-list));
	}

	.stm-inventory-shortcode-page #listings-result > .stm-isotope-sorting.stm-isotope-sorting-grid.default > .motors-child-inventory-featured-wrap {
		margin-inline: calc(-1 * var(--mc-inv-gutter-grid-bs));
		width: calc(100% + 2 * var(--mc-inv-gutter-grid-bs));
	}

	.stm-inventory-shortcode-page #listings-result > .stm-isotope-sorting.stm-isotope-sorting-grid:not(.default) > .motors-child-inventory-featured-wrap {
		margin-inline: calc(-1 * var(--mc-inv-gutter-grid-mvl));
		width: calc(100% + 2 * var(--mc-inv-gutter-grid-mvl));
	}

	/* Motors theme split layout — featured is direct child of #listings-result (modern inventory + card skins). */
	.stm-inventory-shortcode-page #listings-result > .motors-child-inventory-featured-wrap:has(+ .stm-isotope-sorting-main.stm-isotope-sorting-list) {
		margin-inline: calc(-1 * var(--mc-inv-gutter-list));
		width: calc(100% + 2 * var(--mc-inv-gutter-list));
	}

	.stm-inventory-shortcode-page #listings-result > .motors-child-inventory-featured-wrap:has(+ .stm-isotope-sorting-main.stm-isotope-sorting-grid:not([class*="skin_"]):not(.classic)) {
		margin-inline: calc(-1 * var(--mc-inv-gutter-grid-bs));
		width: calc(100% + 2 * var(--mc-inv-gutter-grid-bs));
	}

	.stm-inventory-shortcode-page #listings-result > .motors-child-inventory-featured-wrap:has(+ .stm-isotope-sorting-main.stm-isotope-sorting-grid[class*="skin_"]),
	.stm-inventory-shortcode-page #listings-result > .motors-child-inventory-featured-wrap:has(+ .stm-isotope-sorting-main.stm-isotope-sorting-grid.classic) {
		margin-inline: calc(-1 * var(--mc-inv-gutter-grid-mvl));
		width: calc(100% + 2 * var(--mc-inv-gutter-grid-mvl));
	}
}

.stm-inventory-shortcode-page .motors-child-inventory-featured-wrap .stm-featured-top-cars-title,
.stm-inventory-shortcode-page .motors-child-inventory-featured-wrap .mvl-featured-title-container {
	margin-top: 0;
}

.stm-inventory-shortcode-page .motors-child-inventory-featured-wrap .stm-isotope-sorting-featured-top {
	margin-bottom: 0;
}