/* Master front-end font — overridden at runtime from the SITE_FONT setting */
:root{--cl-font:'Montserrat',system-ui,-apple-system,sans-serif;}
/*
Theme Name:  Cart Launch
Theme URI:   https://cartlaunchsystems.com/
Description: The Cart Launch dealer platform theme. Standalone (no parent theme, no Motors plugin) — every template is driven by the DB-backed Theme Editor in cl-engine.
Author:      Cart Launch Systems
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:        dealership, golf-carts
Version:     2.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: cart-launch
*/

h1, h2, h3, h4, h5, h6, .entry-content :where(h1,h2,h3,h4,h5,h6), .site-title, .site-title a {
	font-family: var(--cl-font);
	font-weight: 900 !important;
}

p {
	font-size: 16px;
	font-family: var(--cl-font)!important;
	font-weight: 400 !important;
	line-height: 24px;
}

.cf7-row {
	display: flex;
	gap: 24px;
	margin-bottom: 20px;
}

.cf7-row br {
	display: none;
}

.cf7-col {
	flex: 1;
}

.cf7-row label {
	width: 100%;
}

.cf7-col-full {
	width: 100%;
}

.cf7-row input,
.cf7-row textarea,
.cf7-row select {
	width: 100%;
}

.required {
	color: #ff5c35;
	font-style: italic;
	font-size: 14px;
}

@media (max-width: 768px) {
	.cf7-row {
		flex-direction: column;
		gap: 15px;
	}
}

/* =========================================================
   FOOTER (чайлд-тема) — копия футера {{DEALER_DOMAIN}}
   ========================================================= */
.gc-footer {
	background-color: #000;
	color: #ffffff;
	font-family: var(--cl-font);
}

.gc-footer a {
	color: #ffffff;
	text-decoration: none;
	transition: color .2s ease;
}

.gc-footer a:hover {
	color: var(--cl-red);
}

.gc-footer__inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 60px 20px 40px;
	display: grid;
	grid-template-columns: .8fr .7fr 2.2fr;
	gap: 40px;
}

/* --- Колонка About --- */
.gc-footer__logo {
	width: 140px;
	height: auto;
	margin-bottom: 20px;
}

.gc-footer__about-text {
	font-size: 16px !important;
	line-height: 22px;
	color: #cfcfcf;
	max-width: 280px;
}

/* --- Заголовки --- */
.gc-footer__title {
	color: #ffffff;
	font-size: 30px;
	margin: 0 0 14px;
}

.gc-footer__location-title {
	color: #ffffff;
	font-size: 18px;
	margin: 0 0 14px;
}

/* --- Разделитель --- */
.gc-footer__divider {
	display: block;
	width: 40px;
	height: 3px;
	background-color: var(--cl-red);
	margin: 0 0 20px;
}

/* --- Списки ссылок --- */
.gc-footer__menu {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.gc-footer__menu li {
	margin-bottom: 12px;
}

.gc-footer__menu--contact a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: #cfcfcf;
	font-size: 18px;
}

.gc-footer__menu--contact i {
	color: var(--cl-red);
	margin-top: 4px;
}

/* --- Соцсети --- */
.gc-footer__follow {
	font-weight: 700 !important;
	margin: 0 0 14px !important;
}

.gc-footer__socials {
	display: flex;
	gap: 12px;
}

.gc-footer__socials a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--cl-red);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 17px;
}

.gc-footer__socials a:hover {
	background-color: #ffffff;
	color: #000;
}

/* --- Локации --- */
.gc-footer__locations {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

/* --- Кнопка Contact Us --- */
.gc-footer__btn {
	display: inline-block;
	background-color: var(--cl-red);
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	padding: 10px 22px;
	border-radius: 4px;
	margin-bottom: 18px;
}

.gc-footer__btn:hover {
	background-color: #ffffff;
	color: #000 !important;
}

/* --- Карты --- */
.gc-footer__map iframe {
	width: 100%;
	max-height: 220px;
	border: 0;
	border-radius: 6px;
	display: block;
}

/* --- Нижняя полоса --- */
.gc-footer__bottom {
	background-color: #332C2B;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.gc-footer__bottom-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.gc-footer__copyright {
	font-size: 13px;
	color: #cfcfcf;
}

.gc-footer__bottom-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
	.gc-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
	.gc-footer__col--locations {
		grid-column: 1 / -1;
	}

	.stm-car_dealer-buttons.heading-font.mobile-fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}
}

@media (max-width: 600px) {
	.gc-footer__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.gc-footer__divider {
		margin-left: auto;
		margin-right: auto;
	}
	.gc-footer__about-text {
		margin-left: auto;
		margin-right: auto;
	}
	.gc-footer__socials {
		justify-content: center;
	}
	.gc-footer__locations {
		grid-template-columns: 1fr;
	}
	.gc-footer__menu--contact a {
		justify-content: center;
	}
	.gc-footer__bottom-inner {
		flex-direction: column;
		text-align: center;
	}
}

.wpcf7-form-control {
	flex-grow: 1;
	padding: 21px;
	background-color: var(--cl-legacy-filter-inputs-color);
	color: var(--cl-legacy-text-color);
	resize: none;
	font-size: 14px;
	outline: none;
	transition: all 0.3s;
	box-sizing: border-box;
	box-shadow: none !important;
	border-radius: 4px;
	border: 1px solid var(--cl-legacy-border-color) !important;
}

.wpcf7-form-control.wpcf7-select {
	height: 47px;
	padding: 13px;
}

:root {
	--page-title-display: none;
}

/* Start custom CSS */
.shipping p {
	font-size: 24px;
}

.shipping i {
	font-size: 36px;
}

@media only screen and (min-width: 1185px) and (max-width: 1415px) {
	.shipping p {
		font-size: 18px;
	}

	.shipping i {
		font-size: 24px;
	}
}

@media only screen and (min-width: 1100px) and (max-width: 1184px) {
	.shipping p {
		font-size: 16px;
	}

	.shipping i {
		font-size: 22px;
	}
}

.home-top-cta {
	/* Optional styling for your container */
	display: inline-block;
	cursor: pointer;
}

.home-top-cta h3 {
	position: relative;
	display: inline-block;
	/* Ensure the pseudo-element is positioned properly under H3 */
	line-height: 48px;
}

.home-top-cta h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 5px;
	/* Adjust line thickness */
	background-color: var(--cl-red-dark);
	/* Your line color */
	transition: width 0.3s ease;
	/* Controls the speed and timing of the animation */
}

.home-top-cta:hover h3::after {
	width: 100%;
	/* Grows from left (0) to full width (100%) on hover */
}

.home-seating-capacity {
	display: inline-block;
	cursor: pointer;
}

/* H3 underline effect */
.home-seating-capacity h3 {
	position: relative;
	display: inline-block;
	line-height: 50px;
}

.home-seating-capacity h3::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--cl-red-dark);
	transition: width 0.3s ease;
}

.home-seating-capacity:hover h3::after {
	width: 100%;
}

/* Float image up */
.home-seating-capacity img {
	display: block;
	transition: transform 0.3s ease;
}

.home-seating-capacity:hover img {
	transform: translateY(-20px);
}

/* Float paragraph down */
.home-seating-capacity p {
	transition: transform 0.3s ease;
}

.home-seating-capacity:hover p {
	transform: translateY(20px);
}

/* End custom CSS */
/* Financing application CF7 — two columns per .cf7-row */
form.mgc-financing-cf7 .cf7-step.active .cf7-row,
form.mgc-financing-cf7 .cf7-joint-only:not([hidden]) .cf7-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 20px;
}

form.mgc-financing-cf7 .cf7-col {
	flex: 1 1 calc(50% - 12px);
	min-width: 0;
}

form.mgc-financing-cf7 .cf7-col-full {
	flex: 1 1 100%;
	width: 100%;
}

form.mgc-financing-cf7 .cf7-col label,
form.mgc-financing-cf7 .cf7-col-full label,
form.mgc-financing-cf7 .cf7-field-label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 0 0 8px;
	font-weight: 600;
}

form.mgc-financing-cf7 .cf7-field-label {
	display: block;
}

form.mgc-financing-cf7 .cf7-col .wpcf7-form-control,
form.mgc-financing-cf7 .cf7-col-full .wpcf7-form-control {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

form.mgc-financing-cf7 .cf7-col-full .wpcf7-radio {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

form.mgc-financing-cf7 .cf7-step-title,
form.mgc-financing-cf7 .cf7-joint-only h3 {
	margin: 0 0 1rem;
	width: 100%;
}

@media (max-width: 768px) {
	form.mgc-financing-cf7 .cf7-step.active .cf7-row,
	form.mgc-financing-cf7 .cf7-joint-only:not([hidden]) .cf7-row {
		flex-direction: column;
		gap: 15px;
	}

	form.mgc-financing-cf7 .cf7-col {
		flex: 1 1 100%;
	}
}

form.mgc-financing-cf7 .cf7-progress,
.wpcf7 .cf7-progress {
	margin-bottom: 1.5rem;
}

form.mgc-financing-cf7 .cf7-progress__label,
.wpcf7 .cf7-progress__label {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

form.mgc-financing-cf7 .cf7-progress__bar,
.wpcf7 .cf7-progress__bar {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

form.mgc-financing-cf7 .cf7-progress__bar .cf7-progress__fill,
.wpcf7 .cf7-progress__bar .cf7-progress__fill {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #ff5c35;
	border-radius: inherit;
	transform: scaleX(var(--cf7-progress-ratio, 0.142857));
	transform-origin: left center;
	transition: transform 0.25s ease;
	pointer-events: none;
}

.cf7-step {
	display: none;
}

.cf7-step.active {
	display: block;
}

.mg-required-badge {
	color: var(--cl-red, #c02b0a);
	display: inline-block;
	font-size: 13.008px;
	padding-inline-start: 0.125em;
	font-style: italic;
}

form.mgc-financing-cf7 .wpcf7-not-valid,
.wpcf7 form.mgc-financing-cf7 .wpcf7-not-valid {
	border-color: #dc3232;
}

form.mgc-financing-cf7 label.cf7-field--error,
.wpcf7 form.mgc-financing-cf7 label.cf7-field--error {
	color: #b32d2e;
}

form.mgc-financing-cf7 .wpcf7-not-valid-tip,
.wpcf7 form.mgc-financing-cf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
}

form.mgc-financing-cf7 .cf7-validation-summary,
.wpcf7 form.mgc-financing-cf7 .cf7-validation-summary {
	margin: 16px 0 24px;
	padding: 14px 16px;
	border: 1px solid #dc3232;
	border-radius: 4px;
	background: #fff5f5;
	color: #1d2327;
}

form.mgc-financing-cf7 .cf7-validation-summary p,
.wpcf7 form.mgc-financing-cf7 .cf7-validation-summary p {
	margin: 0 0 8px;
}

form.mgc-financing-cf7 .cf7-validation-summary ul,
.wpcf7 form.mgc-financing-cf7 .cf7-validation-summary ul {
	margin: 0;
	padding-left: 20px;
}

form.mgc-financing-cf7 .cf7-validation-summary li,
.wpcf7 form.mgc-financing-cf7 .cf7-validation-summary li {
	margin: 4px 0;
}

.cf7-joint-only[hidden] {
	display: none !important;
}

.cf7-buttons p br {
	display: none;
}

.cf7-buttons .cf7-prev[hidden] {
	display: none !important;
}

/* Financing CF7 — nav & submit (CF7 wraps buttons in <p>) */
.wpcf7 .cf7-buttons,
form.mgc-financing-cf7 .cf7-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wpcf7 .cf7-buttons p,
form.mgc-financing-cf7 .cf7-buttons p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	margin: 0;
}

.wpcf7 .cf7-buttons button.cf7-prev,
.wpcf7 .cf7-buttons button.cf7-next,
.wpcf7 .cf7-buttons input.wpcf7-submit,
form.mgc-financing-cf7 .cf7-buttons button.cf7-prev,
form.mgc-financing-cf7 .cf7-buttons button.cf7-next,
form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 15px;
	font-family: var(--cl-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 .cf7-buttons button.cf7-next,
.wpcf7 .cf7-buttons input.wpcf7-submit,
form.mgc-financing-cf7 .cf7-buttons button.cf7-next,
form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit {
	background-color: var(--cl-red);
	border: 2px solid var(--cl-red);
	color: #fff;
}

.wpcf7 .cf7-buttons button.cf7-next,
form.mgc-financing-cf7 .cf7-buttons button.cf7-next {
	margin-left: auto;
}

.wpcf7 .cf7-buttons button.cf7-next:hover,
.wpcf7 .cf7-buttons button.cf7-next:focus,
.wpcf7 .cf7-buttons input.wpcf7-submit:hover,
.wpcf7 .cf7-buttons input.wpcf7-submit:focus,
form.mgc-financing-cf7 .cf7-buttons button.cf7-next:hover,
form.mgc-financing-cf7 .cf7-buttons button.cf7-next:focus,
form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit:hover,
form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit:focus {
	background-color: var(--cl-red-dark);
	border-color: var(--cl-red-dark);
	color: #fff;
	outline: none;
}

.wpcf7 .cf7-buttons button.cf7-prev,
form.mgc-financing-cf7 .cf7-buttons button.cf7-prev {
	background-color: transparent;
	border: 2px solid #000;
	color: #000;
}

.wpcf7 .cf7-buttons button.cf7-prev:hover,
.wpcf7 .cf7-buttons button.cf7-prev:focus,
form.mgc-financing-cf7 .cf7-buttons button.cf7-prev:hover,
form.mgc-financing-cf7 .cf7-buttons button.cf7-prev:focus {
	background-color: #000;
	border-color: #000;
	color: #fff;
	outline: none;
}

.wpcf7 .cf7-buttons button.cf7-prev:disabled,
form.mgc-financing-cf7 .cf7-buttons button.cf7-prev:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.wpcf7 .cf7-buttons input.wpcf7-submit,
form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit {
	margin: 0;
	margin-left: auto;
}

.wpcf7 .cf7-buttons button.cf7-prev:focus-visible,
.wpcf7 .cf7-buttons button.cf7-next:focus-visible,
.wpcf7 .cf7-buttons input.wpcf7-submit:focus-visible,
form.mgc-financing-cf7 .cf7-buttons button.cf7-prev:focus-visible,
form.mgc-financing-cf7 .cf7-buttons button.cf7-next:focus-visible,
form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit:focus-visible {
	outline: 2px solid var(--cl-red);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.wpcf7 .cf7-buttons,
	form.mgc-financing-cf7 .cf7-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wpcf7 .cf7-buttons p,
	form.mgc-financing-cf7 .cf7-buttons p {
		flex-direction: column;
		align-items: stretch;
	}

	.wpcf7 .cf7-buttons button.cf7-prev,
	.wpcf7 .cf7-buttons button.cf7-next,
	.wpcf7 .cf7-buttons input.wpcf7-submit,
	form.mgc-financing-cf7 .cf7-buttons button.cf7-prev,
	form.mgc-financing-cf7 .cf7-buttons button.cf7-next,
	form.mgc-financing-cf7 .cf7-buttons input.wpcf7-submit {
		width: 100%;
		margin-left: 0;
		justify-content: center;
	}
}

.wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-direction:  column;
	margin: 20px 0;
	border: none !important;
	background: none;
	padding: 0;
}

.wpcf7-form-control.wpcf7-radio .wpcf7-list-item label,
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	/* 2026-08-11 (owner: "the radio buttons sit above the text I need them
	   lined up", /application/): the financing form's field-label rule
	   (.cf7-col-full label — display:flex; flex-direction:column, the right
	   shape for "Make" sitting over its input) also catches CF7's own
	   radio/checkbox <label>s, and since this rule never declared a
	   direction, that column won per-property and stacked the dot above its
	   text. Row + centered, explicitly. */
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin: 0;
}

/* 2026-08-11 (owner: "blue box at the bottom of the page" after arriving with
   unit_* prefill params): CF7 shows its response box for any form status
   outside init/resetting/submitting — including 'validating', which the form
   could get stuck in (see the prefill script note in
   cl-engine/inventory/financing-prefill.php). A response box with NOTHING in
   it is never worth pixels, whatever the status: real messages (sent /
   validation errors) have text and still show. */
.wpcf7 form .wpcf7-response-output:empty {
	display: none !important;
}

.wpcf7-form-control.wpcf7-radio .wpcf7-list-item label input {
	width: 15px;
}

.wpcf7-submit {
	min-height: 44px;
	padding: 10px 15px !important;
}

/* CF7 hidden text inputs (used for vehicle context on the Quote form) */
.mgc-hidden,
.wpcf7-form .mgc-hidden {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Header nav menu — uppercase bold black */
.hfe-nav-menu .hfe-menu-item,
.hfe-nav-menu .menu-item > a,
.elementor-widget-navigation-menu .hfe-menu-item,
.elementor-widget-navigation-menu .menu-item > a {
	font-weight: 800 !important;
	font-size: 14px !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #111 !important;
}
.hfe-nav-menu .hfe-menu-item:hover,
.hfe-nav-menu .menu-item > a:hover {
	color: var(--cl-red) !important;
}
/* Active-page indicator — subtle underline, not hard red color */
.hfe-nav-menu .menu-item.current-menu-item > a,
.hfe-nav-menu .menu-item.current-menu-ancestor > a,
.hfe-nav-menu .menu-item.current-menu-parent > a {
	color: #111 !important;
	position: relative;
}
.hfe-nav-menu .menu-item.current-menu-item > a::after,
.hfe-nav-menu .menu-item.current-menu-ancestor > a::after,
.hfe-nav-menu .menu-item.current-menu-parent > a::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -6px;
	height: 2px;
	background: var(--cl-red);
}
.hfe-nav-menu .hfe-sub-menu .hfe-sub-menu-item,
.hfe-nav-menu .hfe-sub-menu .menu-item > a {
	font-weight: 700 !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
/* Sub-menu should keep dark color on active items (not red) */
.hfe-nav-menu .hfe-sub-menu .menu-item.current-menu-item > a {
	color: var(--cl-red) !important;
}
/* Top bar phone icon-box: align right */
.elementor-widget-icon-box .elementor-icon-box-content {
	text-align: right;
}
.elementor-widget-icon-box .elementor-icon-box-title a {
	color: #fff !important;
}

/* Form-page submit — let the button size to its label */
.mgc-form-page__form .wpcf7-submit,
.mgc-form-page__form input.wpcf7-submit,
.elementor-widget-shortcode .wpcf7-submit,
.elementor-widget-shortcode input.wpcf7-submit,
#trade-offer .wpcf7-submit,
#trade-offer input.wpcf7-submit {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	padding: 12px 28px !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
	flex: 0 0 auto !important;
}
.mgc-form-page__form .mgc-submit-row,
#trade-offer .mgc-submit-row {
	margin-top: 8px;
	text-align: center;
}

/* Get a Quote modal — make the CF7 form look like the request-page forms */
#trade-offer .modal-body {
	padding: 24px 28px 28px !important;
}
#trade-offer .wpcf7-form .cf7-row label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #222;
	letter-spacing: 0.2px;
	margin-bottom: 4px;
}
#trade-offer .wpcf7-form .cf7-row input[type="text"],
#trade-offer .wpcf7-form .cf7-row input[type="email"],
#trade-offer .wpcf7-form .cf7-row input[type="tel"],
#trade-offer .wpcf7-form .cf7-row input[type="number"],
#trade-offer .wpcf7-form .cf7-row input[type="date"],
#trade-offer .wpcf7-form .cf7-row textarea {
	background: #fff !important;
	border: 1px solid #d9dde2 !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	height: 44px !important;
	line-height: 22px !important;
	font-size: 14px !important;
	color: #111 !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
#trade-offer .wpcf7-form .cf7-row input:focus,
#trade-offer .wpcf7-form .cf7-row textarea:focus {
	outline: none !important;
	border-color: var(--cl-red) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-red) 12%, transparent) !important;
}
#trade-offer .wpcf7-form .cf7-row textarea {
	height: auto !important;
	min-height: 90px !important;
	line-height: 1.5 !important;
	resize: vertical !important;
	font-family: inherit !important;
}
#trade-offer .wpcf7-form .required {
	color: var(--cl-red);
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-left: 4px;
}
#trade-offer .wpcf7-submit {
	background: var(--cl-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 12px 28px !important;
	transition: background .15s ease !important;
}
#trade-offer .wpcf7-submit:hover {
	background: var(--cl-red-dark) !important;
}
/* Hide the CF7 spinner unless the form is actually submitting. CF7 6.x ships
   it visible at 0.75 opacity which makes every form look perpetually loading. */
.wpcf7-spinner {
	display: none !important;
}
.wpcf7-form.submitting .wpcf7-spinner {
	display: inline-block !important;
	opacity: 1 !important;
}

/* The Get a Quote modal injects .modal-backdrop INSIDE #trade-offer instead of
   on body. With z-index 1040, the backdrop ends up above .modal-dialog (z-auto)
   and blocks all form clicks. Push the dialog above it. */
#trade-offer .modal-dialog {
	position: relative !important;
	z-index: 1051 !important;
}
#trade-offer .modal-content {
	position: relative !important;
	z-index: 1052 !important;
}

.wpcf7-validates-as-date {
	height: 47px;
}

.listing-car-items .listing-car-item .listing-car-item-meta .car-meta-bottom ul li,
.listing-car-items .listing-car-item .listing-car-item-meta .car-meta-bottom ul li i {
	color: #fff;
}

.listing-car-items .listing-car-item .listing-car-item-meta .car-meta-bottom ul li span {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: 700;
}

#wpadminbar>#wp-toolbar>#wp-admin-bar-root-default .ab-icon img {
	width: 40px;
}

.stm-car_dealer-buttons a {
	background-color: var(--cl-red);
	color: #ffffff;
}

.stm-car_dealer-buttons a i {
	color: #ffffff;
}

.stm-car_dealer-buttons a:hover {
	background: #000;
	color: #fff;
}

/* Inventory filter sidebar — elevated white card with a soft shadow. */
.stm-inventory-pro-filter--solid {
	background-color: #ffffff !important;
	border-radius: 12px;
	padding: 24px 20px !important;
	box-shadow: 0 4px 20px rgba(17, 24, 39, 0.08), 0 1px 3px rgba(17, 24, 39, 0.04) !important;
}

/* Recolor sidebar accents (Reset All, Show all/Hide all, slider track + handles)
   from Motors default blue (#1280df) to the brand red (var(--cl-red)). */
.stm-inventory-pro-filter .filter-reset.mvl-reset-all,
.stm-inventory-pro-filter .action.action-reset,
.stm-inventory-pro-filter .show-all,
.stm-inventory-pro-filter .show-less,
.stm-inventory-pro-filter .show-all strong,
.stm-inventory-pro-filter .show-less strong,
body .stm-inventory-pro-filter-footer .actions .actions-button .button.reset-btn,
.stm-inventory-pro-filter .button-secondary.mvl-reset-all {
	color: var(--cl-red) !important;
	border-color: var(--cl-red) !important;
}

.stm-inventory-pro-filter .ui-slider-range,
.stm-inventory-pro-filter .ui-slider-handle {
	background: #111827 !important;
	background-color: #111827 !important;
	border-color: #111827 !important;
}

/* Mega menu reverted — original behavior restored. Swap to a regular
   dropdown once the new WP menu sub-items (New / Pre-Owned / All Inventory)
   are set up in Appearance → Menus. */

/* Make the header phone icon + LOCATION INFO button use the same red as
   the GET A QUOTE TODAY CTA so the brand red is consistent across the site. */
body .mgc-header__phone i,
body .mgc-header__phone .fa-phone-alt,
body .mgc-header__phone-icon,
body .mgc-header__location-btn,
body a.mgc-header__location-btn {
	color: #ffffff;
}
body .mgc-header__phone i,
body .mgc-header__phone .fa-phone-alt,
body .mgc-header__phone-icon {
	color: var(--cl-red) !important;
}
body .mgc-header__location-btn,
body a.mgc-header__location-btn {
	background-color: var(--cl-red) !important;
	border-color: var(--cl-red) !important;
}
body .mgc-header__location-btn:hover,
body a.mgc-header__location-btn:hover {
	background-color: var(--cl-red-dark) !important;
	border-color: var(--cl-red-dark) !important;
}

/* Form modals (Get a Quote / Test Drive / Trade Offer): snap remaining
   plugin reds (var(--cl-red)) to the brand red var(--cl-red) — Submit button + info icon. */
body .modal .stm-request-test-drive {
	background-color: var(--cl-red) !important;
	color: #fff !important;
	border-color: var(--cl-red) !important;
}

/* (Removed broken header icon — was rendering as an empty red square.
   The modal title alone is clearer.)
   Plugin reserved 105px of left padding for the icon — without the
   icon, the title would sit way off to the right. Match the right
   side so the title is flush with the modal body's left edge. */
body .modal-header-iconed {
	padding-left: 37px !important;
}

/* ─── Honeypot field for CF7 forms ───
   Hidden from real users via off-screen positioning (NOT display:none,
   which some bots check before deciding whether to fill a field).
   Bots that auto-fill every visible text input will populate this,
   and the server-side spam filter will reject the submission. */
.mgc-honeypot {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ─── Mobile: padding around the Interested in This Cart? widget ───
   Only spacing change kept on mobile — gives the CTA card breathing
   room between description body above and payment calculator below.
   All other section gaps left at plugin defaults per user preference. */
@media (max-width: 767px) {
	body.single-listings .mgc-sidebar-cta-wrap {
		margin: 24px 0 !important;
	}
}

/* ─── Front-end single listing features ───
   Hide the "Extra Features" sub-label (redundant with the "Features"
   heading right above it), and on mobile collapse the plugin's
   3-column grid down to 2-column. Plugin uses a CSS Grid with
   3 fixed-px columns — we override grid-template-columns to two
   equal-flex columns at the mobile breakpoint. Desktop stays 3-up. */
body.single-listings .grouped_features h4,
body.single-listings .stm-single-listing-car-features h4 {
	display: none !important;
}
@media (max-width: 767px) {
	body.single-listings .grouped_features ul,
	body.single-listings .stm-single-listing-car-features ul {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* ─── Remove the inline Payment Calculator on every listing ───
   The displayed $X/mo headline already does the conversion lifting;
   the calculator added vertical clutter and invited buyers to tinker
   the marketing number upward (shorter term = higher monthly = more
   objections). The CSS hide keeps the element in the DOM so the
   mobile CTA-reposition script still has an anchor — it just won't
   render. Desktop + mobile both. */
body.single-listings .mgc-listing-calculator-inline {
	display: none !important;
}

/* ─── Trade Offer / Get a Quote modal: mobile fit ───
   Plugin defaults to ~37px side padding + 44px top body padding +
   2-column form rows. On a 375–414px viewport that gets cut off and
   feels cramped. Tighten the padding, stack the rows into a single
   column, and cap dialog height so it scrolls internally instead of
   overflowing the viewport. ─── */
@media (max-width: 600px) {
	/* G-17 2026-08-01: vh is the LARGE viewport on a phone, so a cap written in
	   vh is taller than what the shopper can actually see whenever the browser
	   chrome is showing, and the bottom of the modal, which is where the send
	   button is, ends up behind the toolbar. The modal scrolls internally and
	   bottoms out at its own bottom, so that button cannot be scrolled up into
	   view either. dvh tracks the chrome. The vh line stays first as the
	   fallback for engines that do not know dvh. */
	body #trade-offer .modal-dialog {
		margin: 12px 8px !important;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}
	body #trade-offer .modal-content {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		overflow-y: auto;
	}
	body #trade-offer .modal-header,
	body #trade-offer .modal-header-iconed {
		padding: 18px 18px 12px !important;
	}
	body #trade-offer .modal-body {
		padding: 18px !important;
	}
	body #trade-offer .mgc-modal-title {
		font-size: 18px !important;
	}
	/* Stack First/Last and Email/Phone into one column on mobile so
	   inputs are full-width and readable. */
	body #trade-offer .row .col-md-6,
	body #trade-offer .row .col-sm-6 {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		float: none !important;
	}
	body #trade-offer .form-group {
		margin-bottom: 10px !important;
	}
	body #trade-offer textarea {
		min-height: 80px;
	}
	body #trade-offer .stm-request-test-drive {
		width: 100%;
	}
}
body .modal .stm-request-test-drive {
	color: #ffffff !important;
}
body .modal .stm-request-test-drive:hover {
	background-color: var(--cl-red-dark) !important;
}

/* Single listing page: any remaining plugin reds (spec icons, badges) that
   inherit the Motors-default var(--cl-red) → snap them to the brand var(--cl-red). */
.single-listings i[class*="cl-icons-"][style*="color"],
.single-listings .cl-icons-load2,
.single-listings .cl-icons-info-filled,
.single-listings .cl-icons-auto_electric,
.single-listings .fas.fa-user-friends,
body.single-listings i.cl-icons-load2,
body.single-listings i.cl-icons-info-filled {
	color: var(--cl-red) !important;
}

/* Hide breadcrumbs on the inventory page (Home > Inventory). */
.search-results-actions-breadcrumbs {
	display: none !important;
}

/* Hide the Compare widget (top button + floating bar). */
.motors-compare-button,
.single-add-to-compare {
	display: none !important;
}

/* Remove the three-dot actions menu (PDF / Quote by phone / Trade-In) from
   listing cards — redundant with the main GET A QUOTE TODAY button. */
.mvl-actions-popup,
.mvl-actions-popup-button {
	display: none !important;
}

/* Stack Retail Price above Our Price on every viewport. Default desktop
   layout puts them inline which looks crowded once labels are added. */
body .mvl-price-list-card .mvl-price,
body .mvl-price-list-card .mvl-price.has-sale-price {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px;
}
body .mvl-price-list-card .mvl-normal-price,
body .mvl-price-list-card .mvl-sale-price,
body .mvl-price-list-card .normal-price,
body .mvl-price-list-card .sale-price {
	display: block !important;
	float: none !important;
}

/* Label each price on listing cards: "Retail Price: $X" (strike-through)
   above "Our Price: $Y". Falls back to "Our Price: $X" when there's no sale.
   Targets both list and grid card structures. */
body .mvl-normal-price.has-sale-price,
body .normal-price.has-sale-price {
	text-decoration: line-through !important;
	text-decoration-color: #9ca3af !important;
	color: #6b7280 !important;
	font-size: 14px !important;
}

/* Hide the popup version of the Motors loan calculator — we render it
   inline below the listing description instead. */
#get-car-calculator,
.modal #get-car-calculator {
	display: none !important;
}

/* "DESCRIPTION" section heading shows two red bars because the h2 has its
   own red border-left AND a ::before pseudo-element (rendering the
   "DESCRIPTION" label) that also has a red border-left. Drop the ::before
   bar so only one red line shows. */
body .elementor-element-f0dab77 .elementor-heading-title::before {
	border-left: 0 !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Inline Loan Calculator on single listing — brand-styled. */
body .mgc-listing-calculator-inline {
	margin-top: 32px;
}
body .mgc-listing-calculator-inline .single-listing-calculator-section,
body .single-listing-calculator-section {
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}
body .single-listing-chapter-title {
	color: #111827 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 16px !important;
	border-left: 4px solid var(--cl-red);
	padding-left: 10px;
	line-height: 1.2;
}
body .single-listing-calculator-wrap,
body .single-listing-calculator {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body .single-listing-calculator-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
body .single-listing-calculator-label {
	color: #374151 !important;
	font-size: 13px;
	font-weight: 600;
}
body .single-listing-calculator-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 15px;
	background-color: #ffffff;
	color: #111827;
}
body .single-listing-calculator-field input:focus {
	outline: none;
	border-color: var(--cl-red);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-red) 15%, transparent);
}
body .single-listing-calculator-field.has-error input {
	border-color: var(--cl-red);
}
body .single-listing-calculator-button {
	background-color: var(--cl-red) !important;
	color: #ffffff !important;
	padding: 12px 18px !important;
	border-radius: 8px !important;
	text-align: center;
	font-weight: 700;
	font-family: var(--cl-font);
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--cl-red) 20%, transparent);
}
body .single-listing-calculator-button:hover {
	background-color: var(--cl-red-dark) !important;
	transform: translateY(-1px);
}
body .single-listing-calculator-results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e5e7eb;
}
body .single-listing-calculator-results .result {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}
body .single-listing-calculator-result-label {
	color: #374151;
	font-size: 13px;
	font-weight: 600;
}
body .single-listing-calculator-results .monthly_payment,
body .single-listing-calculator-results .total_interest_payment,
body .single-listing-calculator-results .total_amount_to_pay {
	color: #111827;
	font-weight: 700;
	font-size: 16px;
}
body .single-listing-calculator-results .monthly_payment {
	color: var(--cl-red);
	font-size: 18px;
}

/* Prepend a "$" to the monthly payment result. The JS sets only the number. */
body .single-listing-calculator-results .monthly_payment:not(:empty)::before {
	content: "$";
}

/* Hide "Total Interest Payment" and "Total Amount to Pay" rows — keep only
   the Monthly Payment as the focused outcome. */
body .single-listing-calculator-results .result:nth-child(2),
body .single-listing-calculator-results .result:nth-child(3) {
	display: none !important;
}

/* Disclaimer below the calculated payment — small gray fine-print. */
body .single-listing-calculator-results::after {
	content: "Sample monthly payment for illustration purposes only. Actual rate, term, taxes, and fees vary based on credit approval and lender. This is not a financing offer or commitment to lend.";
	display: block;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #f3f4f6;
	color: #6b7280;
	font-size: 11px;
	font-style: italic;
	line-height: 1.4;
}
body .calculator-alert.alert-danger {
	display: none;
	margin-top: 12px;
	padding: 8px 12px;
	background-color: color-mix(in srgb, var(--cl-red) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--cl-red) 30%, transparent);
	border-radius: 8px;
	color: var(--cl-red-dark);
	font-size: 13px;
}
body .calculator-alert.alert-danger.visible-alert {
	display: block;
}

/* On wider screens, lay the input fields out in 2 columns for compactness. */
@media (min-width: 768px) {
	body .single-listing-calculator {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 18px;
	}
	body .single-listing-calculator-button,
	body .single-listing-calculator-results,
	body .calculator-alert {
		grid-column: 1 / -1;
	}
}

/* "Special" badge on the listing image — was yellow/gold, switch to brand red. */
body .special-label,
body div.special-label,
body .special-label.h5,
body .mvl-special-label {
	background-color: var(--cl-red) !important;
	color: #ffffff !important;
}

/* Our Price — actually smaller than the title so it doesn't outweigh it.
   Plugin default is 20px (same as title-feel); dropping to 17px desktop /
   16px mobile creates a real hierarchy step. */
body .mvl-list-card-skin .mvl-price-list-card .mvl-sale-price,
body .mvl-list-card-skin .mvl-price-list-card .sale-price,
body .mvl-list-card-skin .mvl-price-list-card .mvl-normal-price:not(.has-sale-price),
body .mvl-list-card-skin .mvl-price-list-card .normal-price:not(.has-sale-price),
body .mvl-sale-price,
body .sale-price,
body .mvl-normal-price:not(.has-sale-price),
body .normal-price:not(.has-sale-price) {
	font-size: 22px !important;
	line-height: 1.25 !important;
}
@media (max-width: 600px) {
	body .mvl-list-card-skin .mvl-price-list-card .mvl-sale-price,
	body .mvl-list-card-skin .mvl-price-list-card .sale-price,
	body .mvl-sale-price,
	body .sale-price,
	body .mvl-normal-price:not(.has-sale-price),
	body .normal-price:not(.has-sale-price) {
		font-size: 20px !important;
	}
	body .mvl-normal-price.has-sale-price,
	body .normal-price.has-sale-price {
		font-size: 13px !important;
	}
}
body .mvl-normal-price.has-sale-price::before,
body .normal-price.has-sale-price::before {
	content: var(--cl-price-retail, "Retail Price: ") !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	margin-right: 2px;
	text-decoration: none !important;
}
body .mvl-normal-price:not(.has-sale-price)::before,
body .normal-price:not(.has-sale-price)::before,
body .mvl-sale-price::before,
body .sale-price::before {
	content: var(--cl-price-ours, "Our Price: ") !important;
	font-weight: 600 !important;
	color: #111827 !important;
	margin-right: 2px;
}

/* Subtle red glow + larger label on the listing-card CTA. */
.mvl_view_listing_link,
.mvl-view-listing .mvl_view_listing_link {
	box-shadow: 0 3px 10px color-mix(in srgb, var(--cl-red) 18%, transparent), 0 1px 3px color-mix(in srgb, var(--cl-red) 12%, transparent) !important;
	transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}
.mvl_view_listing_link:hover,
.mvl-view-listing .mvl_view_listing_link:hover {
	box-shadow: 0 6px 16px color-mix(in srgb, var(--cl-red) 28%, transparent), 0 2px 5px color-mix(in srgb, var(--cl-red) 16%, transparent) !important;
	transform: translateY(-1px);
}
.mvl_view_listing_link,
.mvl-view-listing .mvl_view_listing_link,
.mvl_view_listing_link .label,
.mvl-view-listing .mvl_view_listing_link .label {
	font-family: var(--cl-font)!important;
}
.mvl_view_listing_link .label,
.mvl-view-listing .mvl_view_listing_link .label {
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
}

/* Stop the listing-card spec icons (battery / condition / seating / location)
   from wrapping their labels onto a second line. Keep them as separated
   icon-over-label columns laid out evenly across the row. */
body .mvl-card-listing-data .mvl-card-listing-data-inner {
	flex-wrap: nowrap !important;
	justify-content: space-around !important;
	gap: 14px !important;
	width: 100% !important;
}

/* Spec icons + labels in dark gray, not red, so the red CTA owns the
   "click me" signal on the card. */
body .mvl-card-listing-data .mvl-card-listing-data-inner > li,
body .mvl-card-listing-data .mvl-card-listing-data-inner > li i,
body .mvl-card-listing-data .mvl-card-listing-data-inner > li span {
	color: #374151 !important;
}
.mvl-card-listing-data .mvl-card-listing-data-inner > li {
	width: auto !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.mvl-card-listing-data .mvl-card-listing-data-inner > li span {
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
	max-width: none !important;
}

/* Tighten the label font at narrow viewports so labels like "4 Passenger"
   don't get squeezed out on phones (the row already distributes the cells). */
@media (max-width: 600px) {
	.mvl-card-listing-data .mvl-card-listing-data-inner > li span {
		font-size: 13px;
	}
}

/* Hide the favorites heart icon on listing card images — redundant with
   the main CTA and only adds noise. */
.stm-listing-favorite,
.mvl-list-card-skin .stm-listing-favorite,
.mvl-grid-card-skin .stm-listing-favorite,
[class*="favorite"][class*="listing"],
[class*="favourite"][class*="listing"] {
	display: none !important;
}

/* Keep the listing-card title (e.g. "1990 Venom EV 2P W105") on a single
   line on mobile. Target every plausible title wrapper so the rule wins. */
@media (max-width: 600px) {
	body .mvl_listing_title,
	body .mvl_listing_title_wrapper .mvl_listing_title,
	body .mvl-list-card-skin .mvl_listing_title,
	body .mvl-list-card-skin a .mvl_listing_title,
	body .mvl-list-card-skin h3,
	body .mvl-list-card-skin h4,
	body .listing-list-loop .mvl_listing_title,
	body .mvl-list-content .title {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		word-wrap: normal !important;
		word-break: keep-all !important;
		font-size: 17px !important;
		line-height: 1.3 !important;
		max-width: 100% !important;
		display: block !important;
	}
	body .mvl_listing_title_wrapper,
	body .mvl_listing_title_wrapper-inner {
		flex-wrap: nowrap !important;
		min-width: 0 !important;
		overflow: hidden !important;
	}
}

/* Mobile-only: hide the "Golf Carts for sale (3 results)" heading entirely,
   tighten the spacing above the search bar, and give the Date sort dropdown
   a visible chevron so it reads as clickable. */
@media (max-width: 600px) {
	body .search-results-actions-heading {
		display: none !important;
	}

	/* Strip the leftover hero/section padding above the search bar on the
	   inventory page so search sits right under the header. */
	body .page-content,
	body .mst-wrapper-inner,
	body .stm-pro-layout,
	body .stm-inventory-pro-maincol,
	body .stm-inventory-pro-maincol > .elementor,
	body .elementor-element-7f61515,
	body .elementor-element-619a530 {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	body .search-results-actions {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	body .stm-inventory-pro-filter-mobile-apparent {
		margin-top: 6px !important;
		padding-top: 4px !important;
	}

	/* Compact sort pill with a small chevron. */
	body .stm-sort-by-options {
		display: inline-flex !important;
		align-items: center;
		gap: 4px;
		padding: 4px 22px 4px 8px;
		border: 1px solid #d1d5db;
		border-radius: 6px;
		background-color: #ffffff;
		position: relative;
		font-size: 12px;
	}
	body .stm-sort-by-options::after {
		content: "";
		position: absolute;
		right: 8px;
		top: 50%;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid #111827;
		border-bottom: 1.5px solid #111827;
		transform: translateY(-65%) rotate(45deg);
		pointer-events: none;
	}
	body .stm-sort-by-options > i {
		font-size: 12px;
	}
	body .stm-sort-by-options select {
		appearance: none;
		-webkit-appearance: none;
		background: transparent;
		border: 0;
		font-size: 12px;
		line-height: 1.2;
		padding: 0 4px 0 0;
		height: auto;
	}
}

/* Kill the catch-all `transition: all` on the mobile filter bar so toggling
   the sticky class doesn't animate position/padding (the cause of the
   "glitch" when you first start scrolling). */
.stm-inventory-pro-filter-mobile-apparent,
.stm-inventory-pro-filter-mobile-apparent.mvl-filter-sticky {
	transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Sticky filter bar — pure CSS implementation. The plugin's JS sticky was
   detaching/re-inserting the bar on scroll which caused a layout-shift
   ping-pong (that script is dequeued). Position: sticky keeps the
   bar in normal flow and pins to the top without moving any DOM.
   Full-width opaque background + bottom shadow so scrolled content doesn't
   show through. */
.stm-inventory-pro-filter-mobile-apparent,
.stm-inventory-pro-filter-mobile-apparent.mvl-filter-sticky {
	position: sticky !important;
	top: 0 !important;
	z-index: 95;
	background-color: #ffffff !important;
	margin-left: -20px !important;
	margin-right: -20px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}

/* Mobile Filter button — darken so it doesn't compete with the red CTAs.
   Selectors target every variant (.filter-handle and its inner) just in case. */
body .stm-inventory-pro-filter-mobile-apparent .filter-handle,
body .stm-inventory-pro-filter-mobile-apparent .filter-handle-wrapper .filter-handle,
body .filter-handle-wrapper .filter-handle,
.mvl-filter-sticky .filter-handle {
	background-color: #111827 !important;
	background-image: none !important;
	color: #ffffff !important;
	border-color: #111827 !important;
}
body .stm-inventory-pro-filter-mobile-apparent .filter-handle:hover,
body .stm-inventory-pro-filter-mobile-apparent .filter-handle-wrapper .filter-handle:hover {
	background-color: #000000 !important;
}

/* Listing cards on mobile — shadow-only "floating card" treatment.
   No border line so the photo and CTA stay the focus. */
@media (max-width: 991px) {
	body .mvl-card-skins.listing-list-loop,
	body .stm-isotope-listing-item.listing-list-loop,
	body .stm-listing-directory-list-loop,
	body .stm-isotope-listing-item {
		border: 0 !important;
		border-radius: 16px !important;
		box-shadow: 0 8px 24px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06) !important;
		padding: 14px !important;
		margin-bottom: 22px !important;
		/* No overflow: hidden — that would clip the inner CTA's red glow. */
		background-color: #ffffff !important;
	}

	/* PHOTO CORNERS FOLLOW THE LAYOUT (2026-08-14, owner: "Ones on the left
	   hand side one is on the top").
	   The list card is side-by-side on desktop — photo on the LEFT — so
	   skin_1.css rounds the photo's LEFT corners (8px 0 0 8px) so they sit
	   inside the card's left edge. At this breakpoint the card STACKS: the
	   photo moves to the TOP, full width, text beneath it. The radius never
	   moved with it, so the photo kept a rounded top-LEFT and bottom-LEFT while
	   its top-RIGHT stayed square — rounding on the wrong axis, which is what
	   reads as "rounded differently" beside a site whose photo rounds on top.
	   The stacking flips at exactly 991px, the same breakpoint as this block,
	   so layout and radius can never disagree. Top-only at 8px, matching the
	   grid card and the reference site; the bottom stays square because the
	   photo-count progress bar sits flush against that edge. */
	body .mvl-card-skins.listing-list-loop .skin_1.image .image-inner,
	body .stm-isotope-listing-item.listing-list-loop .skin_1.image .image-inner,
	body .stm-listing-directory-list-loop .skin_1.image .image-inner {
		border-radius: 8px 8px 0 0 !important;
	}
}

/* Push the grid/list view toggle to the right edge of the actions row. */
.search-results-actions-triggers .search-results-actions-triggers-sorting {
	flex: 1 1 auto !important;
	width: 100% !important;
}
.search-results-actions-triggers-sorting .stm-view-by {
	margin-left: auto !important;
}

/* Top actions bar (above results): applied-filter chip + Reset all link.
   Standard dealer-site neutral instead of brand red. */
.search-results-actions-result .stm-filter-chosen-units .stm-filter-chosen-units-list li,
.search-results-actions-result .stm-filter-chosen-units .stm-filter-chosen-units-list li:hover {
	background-color: #111827 !important;
}
.search-results-actions-reset-all a {
	color: #111827 !important;
}

/* Compare count bubble — switch from Motors blue to brand red. */
.stm-current-cars-in-compare {
	background-color: var(--cl-red) !important;
}

/* Featured Listings "Show all" link — switch from Motors blue to dark gray
   so it doesn't compete with the brand red CTAs. */
.mvl-featured-title-container a,
.mvl-featured-title-container.list a,
.mvl-featured-title-container.grid a {
	color: #111827 !important;
	font-weight: 600;
}
.mvl-featured-title-container a:hover {
	color: #000000 !important;
	text-decoration: underline;
}

/* Grid/List view toggle — active state from Motors blue tint to red tint. */
.search-results-actions-views .view-type.active,
.search-results-actions-triggers .view-type.active {
	background-color: color-mix(in srgb, var(--cl-red) 15%, transparent) !important;
	color: var(--cl-red) !important;
}
.search-results-actions-views .view-type.active i,
.search-results-actions-triggers .view-type.active i {
	color: var(--cl-red) !important;
}

/* Sidebar "Reset All" — plain bold dark link, no button chrome. */
body .stm-inventory-pro-filter-footer .actions .actions-button .button.reset-btn {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 6px 0 !important;
	color: #111827 !important;
	font-weight: 700 !important;
}
body .stm-inventory-pro-filter-footer .actions .actions-button .button.reset-btn:hover {
	background-color: transparent !important;
	color: #000000 !important;
	text-decoration: underline;
}

/* Inventory list-view photo: stop forcing 380px box on tablet/mobile.
   The Motors plugin pins .skin_1.image to width/max-width: 380px !important and
   height: 260px, which clipped & stretched the photo when the card stacked
   vertically below ~992px. Use a body-prefixed selector for higher specificity. */
@media (max-width: 991px) {
	body .mvl-list-card-skin.skin_1 .skin-list-gallery.skin_1 .skin_1.image {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		height: auto !important;
	}
	body .mvl-list-card-skin.skin_1 .skin-list-gallery.skin_1 .skin_1.image .image-inner {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
	}
	body .mvl-list-card-skin.skin_1 .skin-list-gallery.skin_1 .skin_1.image .image-inner img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* Listing Manager redesign: full-width tail container on Details that holds
   Description, Mark Sold, Mark Featured (moved from the hidden Summary tab). */
.mvl-listing-manager-content-body-page.option .mgc-lm-extra-fields {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}
.mvl-listing-manager-content-body-page.option .mgc-lm-extra-fields > * {
	width: 100%;
	max-width: 100%;
	margin-bottom: 16px;
	grid-column: 1 / -1;
}

/* Single-listing spec list (Condition / Seating / Power Type / Location / Stock ID / VIN):
   vertically center each cell's label against its value so a longer value that wraps
   to two lines (e.g. "{{SERVICE_CITY_2}}, {{DEALER_STATE}}" vs "{{DEALER_CITY}}, {{DEALER_STATE}}") stays aligned
   instead of pinning the label to the top and looking broken. */
.data-list-wrap li {
	align-items: center;
}

/* Single-listing description: the theme sets a ~50px line-height on this block,
   which leaves huge gaps between lines of the description paragraph. Bring it
   back to a normal, readable rhythm. */
.post-content.mvl-listing-description,
.mvl-listing-description p {
	font-size: 16px;
	line-height: 1.7;
}
/* ---- Cart Launch brand red ----
   Single source of truth for the site red. It follows the Cart Launch /
   Motors accent color setting (Settings > Appearance), so changing the color
   there changes every red on the site. Falls back to #DD0000. */
:root {
	--cl-red: var(--cl-legacy-accent-color, #DD0000);
	--cl-red-rgb: 221,0,0; /* DD0000 — overridden from BRAND_COLOR */
	--cl-red-dark: #c50e2f; /* fallback for browsers without color-mix */
	--cl-red-dark: color-mix(in srgb, var(--cl-red), #000 16%);
}

/* ---- Brand red: Elementor sync ----
   These elements have their red hardcoded inside Elementor's page data
   (Home 2120, Financing Dept 3407, Quote Received 3937), so they would NOT
   follow the Cart Launch color selector. Re-key them to var(--cl-red) here.
   If one of these elements is deleted/recreated in Elementor, set its color
   to the "Accent" global color instead and remove its rule here. */
.elementor-2120 .elementor-element-7b1d8c13 .elementor-button,
.elementor-2120 .elementor-element-2e376a65 .elementor-button,
.elementor-3407 .elementor-element-43ea90d8 .elementor-button,
.elementor-3937 .elementor-element-518654f .elementor-button {
	background-color: var(--cl-red) !important;
}
.elementor-2120 .elementor-element-7b1d8c13 .elementor-button {
	border-color: var(--cl-red) !important;
}
.elementor-2120 .elementor-element-4defb5a6:not(.elementor-motion-effects-element-type-background),
.elementor-2120 .elementor-element-4defb5a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: var(--cl-red) !important;
}
.elementor-2120 .elementor-element-6379d273.elementor-view-stacked .elementor-icon,
.elementor-3937 .elementor-element-d8d1fee.elementor-view-stacked .elementor-icon {
	background-color: var(--cl-red) !important;
}
.elementor-2120 .elementor-element-6379d273.elementor-view-framed .elementor-icon,
.elementor-2120 .elementor-element-6379d273.elementor-view-default .elementor-icon,
.elementor-3937 .elementor-element-d8d1fee.elementor-view-framed .elementor-icon,
.elementor-3937 .elementor-element-d8d1fee.elementor-view-default .elementor-icon {
	color: var(--cl-red) !important;
	border-color: var(--cl-red) !important;
}
.elementor-2120 .elementor-element-6379d273 .elementor-icon svg,
.elementor-3937 .elementor-element-d8d1fee .elementor-icon svg {
	fill: var(--cl-red) !important;
}
.elementor-3407 .elementor-element-1e12239 .elementor-heading-title,
.elementor-3407 .elementor-element-653ace78 .elementor-heading-title {
	color: var(--cl-red) !important;
}

/* ---- Mobile paragraph size ----
   Body copy was rendering ~14px on phones, which reads tiny. Bump every
   paragraph up 2px (relative to what it inherits) on mobile. Paragraphs
   that already have their own explicit size rule keep it. */
@media (max-width: 767px) {
	p {
		font-size: calc(1em + 2px);
	}
}

/* ---- Finance application form: breathing room ----
   The multi-step CF7 application form sat flush against the edges of its
   white card. Pad the form itself so fields never touch the card sides. */
.wpcf7 form.wpcf7-form:has(.cf7-progress) {
	padding-left: 14px;
	padding-right: 14px;
}
@media (min-width: 768px) {
	.wpcf7 form.wpcf7-form:has(.cf7-progress) {
		padding-left: 28px;
		padding-right: 28px;
	}
}

/* ── Red buttons: on hover, go slightly darker than the brand color.
   --cl-red-dark is color-mix(--cl-red, #000 16%), so it auto-tracks BRAND_COLOR. */
.mgc-hp-btn--red:hover,
.mgc-hero2__btn--primary:hover,
.mgc-loc-btn--red:hover,
.gc-footer__btn:hover,
.mgc-cta-btn--primary:hover,
.mgc-hp-dept__btn:hover,
.mgc-hp-hero--interior .mgc-hp-btn--red:hover {
	background-color: var(--cl-red-dark) !important;
	color: #fff !important;
}