/**
 * cl-single.css — parity round 2 rebuild (2026-07-24).
 *
 * The single template now replays the legacy Elementor DOM, styled by the
 * ported legacy stylesheets (vendored Motors/Elementor css). This file only
 * carries what legacy produced AT RUNTIME (swiper-initialized layout, nav
 * arrows Motors JS injected) plus CL-only surfaces (sold page, lightbox,
 * admin sticker link). Safari budget: no :has(), no color-mix(),
 * no overflow:clip.
 */

/* ── Gallery: the swiper-initialized layout, statically ─────────────────── */
.motors-elementor-big-gallery {
	overflow: hidden;
}
.motors-elementor-big-gallery > .swiper-wrapper {
	display: flex;
	transition: transform 0.3s ease;
}
.motors-elementor-big-gallery > .swiper-wrapper > .swiper-slide {
	flex: 0 0 100%;
	max-width: 100%;
}
.motors-elementor-thumbs-gallery {
	overflow: hidden;
	/* Parity round 3 (2026-07-25): anchor the strip ‹ › arrows to the STRIP.
	   They are absolutely positioned; without this they resolved against a
	   wider ancestor and sat 30px outside / above the strip (legacy probe:
	   30x56 at the strip's own left/right edges, vertically centered). */
	position: relative;
}
.motors-elementor-thumbs-gallery > .swiper-wrapper {
	display: flex;
}
.motors-elementor-thumbs-gallery > .swiper-wrapper > .swiper-slide {
	/* widget css fixes thumbs at 142px; legacy swiper gap measured LIVE
	   (parity round 3): 23px from 767px up, 15px below — the round-2 flat
	   15px was the MOBILE value (Swiper breakpoints 320:15 / 767:23). */
	flex: 0 0 auto;
	margin-right: 23px;
	cursor: pointer;
}
@media (max-width: 766px) {
	.motors-elementor-thumbs-gallery > .swiper-wrapper > .swiper-slide {
		margin-right: 15px;
	}
}

/* Legacy runtime nav arrows (Motors JS injected these on init).
   Parity round 2 (2026-07-24): restyled to the EXACT legacy .mgc-gal-arrow
   values (inc/listing/gallery-arrows.php) — 46px circle, rgba(20,24,26,.5),
   28px text glyph, 0 2px 8px shadow — the previous 30px chevron version was
   visibly different from the production reference. */
.cl-gal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 46px;
	height: 46px;
	padding: 0 0 3px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 24, 26, 0.5);
	color: #ffffff;
	font: 700 28px/1 Arial, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.cl-gal-arrow:hover {
	background: rgba(20, 24, 26, 0.82);
}
.cl-gal-arrow:focus,
.cl-gal-arrow:focus-visible {
	outline: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cl-gal-arrow--prev {
	left: 14px;
}
.cl-gal-arrow--next {
	right: 14px;
}

/* ── Main gallery image ─────────────────────────────────────────────────────
   2026-08-13 (owner: "I do not want it to be where you can click on the image,
   and it opens up a gallery"). The lightbox overlay that used to be defined
   here is gone along with the script that opened it. The slide anchors keep
   their legacy .stm_fancybox class and href="#" (the markup is shared with the
   legacy template), so the pointer is corrected to show they are not links,
   and horizontal pan is handed to the swipe handler rather than the browser. */
.motors-elementor-big-gallery .stm_fancybox {
	cursor: default;
}
.motors-elementor-big-gallery {
	touch-action: pan-y;
}

/* ── Admin-only window sticker link ─────────────────────────────────────────
   Fixed pill (parity round 2): legacy has no such link, so it must not add
   layout height — staff see a small floating affordance, visitors nothing. */
.cl-sl-admin-tools {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 9000;
}
.cl-sl-admin-tools a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 14px;
	background: rgba(51, 44, 43, 0.85);
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cl-sl-admin-tools a:hover {
	background: rgba(51, 44, 43, 1);
	color: #ffffff;
}

/* ── Title sold flag ─────────────────────────────────────── */
/* 2026-08-06 (owner ask): the flag was a flat black pill on every site, which
   read as a stray element next to a brand-colored page. It now fills with the
   brand color like every other filled control, and its label follows the same
   Theme Editor "Button text color" choice the buttons do (the black option is
   applied in brand.php, which prints one late override for the sites that pick
   it). The fallback hex is the stock brand red, so a site with the engine off
   still gets a colored flag rather than a transparent one. */
.cl-sold-flag {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	padding: 3px 10px;
	background: var(--cl-red, #DD0000);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	border-radius: 4px;
	text-transform: uppercase;
}
/* 2026-08-06 — found while recoloring the flag above, and older than that
   change: the legacy classified-title sheet paints EVERY <span> inside the
   title wrap with the muted body color, at (0,3,0) and loading after this
   file, so the word SOLD has been rendering dark-on-dark since the flag was
   built. Nobody caught it because the pill was near-black too, so the label
   simply disappeared into it. This is the same three-class selector plus the
   element, which is the smallest thing that wins outright. It stays free of
   !important on purpose, so the Theme Editor's black button-text option
   (printed with !important from brand.php) can still override it. */
.stm-listing-single-price-title .stm-single-title-wrap span.cl-sold-flag {
	color: #fff;
}


.cl-cta-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 15px 12px;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	border-radius: 5px;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	box-sizing: border-box;
	line-height: 1.2;
}
.cl-cta-btn--primary {
	background: var(--cl-red, #DD0000);
	color: #fff !important;
	border: 2px solid var(--cl-red, #DD0000);
}
.cl-cta-btn--primary:hover,
.cl-cta-btn--primary:focus-visible {
	background: var(--cl-red-hover, #b40000);
	border-color: var(--cl-red-hover, #b40000);
	color: #fff !important;
}
.cl-cta-btn--secondary {
	background: #111;
	color: #fff !important;
	border: 2px solid #111;
}
.cl-cta-btn--secondary:hover,
.cl-cta-btn--secondary:focus-visible {
	background: #333;
	border-color: #333;
	color: #fff !important;
}
.cl-cta-btn--outline {
	background: transparent;
	color: #111 !important;
	border: 2px solid #d0d0d0;
}
.cl-cta-btn--outline:hover,
.cl-cta-btn--outline:focus-visible {
	background: #111;
	border-color: #111;
	color: #fff !important;
}
.cl-sticker-link {
	display: block;
	text-align: center;
	font-size: 13px;
	color: #6b7280;
	text-decoration: underline;
	margin-top: 2px;
}
.cl-sticker-link:hover {
	color: var(--cl-red, #DD0000);
}


.cl-single__sold-page {
	padding: 30px 0 50px;
	max-width: 1170px;
	margin: 0 auto;
}
.cl-single__sold-title {
	font-size: 30px;
	font-weight: 800;
	color: #111;
	margin: 0 0 10px;
}
.cl-single__sold-text {
	font-size: 16px;
	color: #444;
	margin: 0 0 18px;
}
.cl-single__sold-cta {
	display: inline-block;
	width: auto;
	padding: 14px 28px;
}


/* Thumb-strip prev/next: legacy shows them at rest (Motors JS pinned them).
   Parity round 3 (2026-07-25): exact live-probed legacy geometry — 30x56
   rectangles at the strip's own edges, vertically centered (the gallery-arrows
   module re-asserts the same numbers via .mgc-thumb-arrow once it wires the
   buttons through the Swiper shim; these base rules make the pre-wire frame
   pixel-identical too, hence the !importants against the mirrored widget CSS). */
.motors-elementor-thumbs-gallery .stm-swiper-prev {
	left: 0 !important;
	right: auto !important;
}
.motors-elementor-thumbs-gallery .stm-swiper-next {
	right: 0 !important;
	left: auto !important;
}
.motors-elementor-thumbs-gallery .stm-swiper-prev,
.motors-elementor-thumbs-gallery .stm-swiper-next {
	position: absolute !important;
	width: 30px !important;
	height: 56px !important;
	background-color: rgba(0, 0, 0, 0.5);
	top: 50% !important;
	transform: translateY(-50%);
	margin-top: 0;
	cursor: pointer;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mobile gallery parity: legacy swiper is swipe-only on phones (no arrows)
   and shows 2.5 thumbs per view ((100% - 20px)/2.5). */
@media (max-width: 767px) {
	.cl-gal-arrow {
		display: none;
	}
}

/* ── Value My Trade modal (2026-07-25, owner-approved) ─────────────────────
   Same design language as the quote modal (modal-style.css from the legacy
   layer). Only the trade-specific bits live here: a scrollable tall dialog
   and the compact photo-upload field stack. No :has()/color-mix()/clip. */
.cl-trade-modal .modal-dialog {
	max-height: calc(100vh - 40px);  /* vh fallback (engines without dvh) */
	max-height: calc(100dvh - 40px); /* dynamic viewport: modal never extends
	                                    behind the phone browser's bottom chrome */
	display: flex;
	flex-direction: column;
}
.cl-trade-modal .modal-content {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 40px);  /* vh fallback */
	max-height: calc(100dvh - 40px);
	overflow: hidden;
}
.cl-trade-modal .modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.cl-trade-photos .cl-trade-photos__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
.cl-trade-photos .cl-trade-photos__hint {
	font-weight: 400;
	font-size: 12px;
	color: #8a929c;
}
.cl-trade-photos .cl-trade-photo-field {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin: 0 0 6px;
}
.cl-trade-photos .cl-trade-photo-field input[type="file"] {
	display: block;
	width: 100%;
	font-size: 13px;
	padding: 6px 8px;
	border: 1px dashed #cad0d9;
	border-radius: 6px;
	background: #f9fafb;
	margin-top: 2px;
}
/* CF7's inline field errors keep their normal styling inside the modal. */
.cl-trade-modal .wpcf7-not-valid-tip {
	font-size: 12px;
}

/* ── v2 trade form (owner feedback, 2026-07-25): tighter modal + the single
   multi-file photo control. No :has()/color-mix()/overflow:clip. ─────────── */
.cl-trade-modal .cf7-row {
	margin-bottom: 12px;
	gap: 14px;
}
.cl-trade-modal .cf7-row label {
	font-size: 13px;
	margin-bottom: 0;
}
.cl-trade-modal .cf7-row input[type="text"],
.cl-trade-modal .cf7-row input[type="tel"],
.cl-trade-modal .cf7-row input[type="email"] {
	height: 38px;
}
.cl-trade-modal .cf7-row select {
	height: 38px;
	padding-top: 0;
	padding-bottom: 0;
}
.cl-trade-modal .cf7-row textarea {
	min-height: 56px;
}
.cl-trade-modal .mgc-submit-row {
	margin-top: 4px;
}
/* Year / Make / Model in one compact row; stacks with the other rows on
   phones via the existing .cf7-row media query (column direction). */
.cl-trade-row-3 .cf7-col {
	min-width: 0;
}
.cl-trade-photos-wrap {
	display: block;
}
/* Drop zone (owner feedback 2026-07-26): dashed target + centered brand
   SELECT FILES button; the native input stays as the accessible fallback,
   visually hidden but focusable (no display:none — focus must still reach
   it). No :has()/color-mix()/overflow:clip. */
.cl-trade-photos .cl-trade-photos__input {
	display: block;
	width: 100%;
	font-size: 13px;
	padding: 8px;
	border: 1px dashed #cad0d9;
	border-radius: 6px;
	background: #f9fafb;
}
.cl-trade-photos .cl-trade-photos__input--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.cl-trade-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 22px 16px;
	border: 2px dashed #cad0d9;
	border-radius: 8px;
	background: #f9fafb;
	text-align: center;
}
.cl-trade-drop--over,
.cl-trade-drop--focus {
	border-color: var(--cl-red, #DD0000);
	background: #fff5f5;
}
.cl-trade-drop__text {
	font-size: 14px;
	color: #6b7280;
}
.cl-trade-drop__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 28px;
	border: 0;
	border-radius: 5px;
	background: var(--cl-red, #DD0000);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
.cl-trade-drop__btn:hover {
	filter: brightness(0.92); /* static shade — no color-mix() */
}
.cl-trade-drop__help {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
}
/* The old inline hint in the label is superseded by the helper line below
   the zone (same wording); keep the label to "Photos of your cart". */
.cl-trade-photos .cl-trade-photos__hint {
	display: none;
}
/* Submit: full-width, centered — the same pattern as the quote modal CTA. */
.cl-trade-modal .mgc-submit-row {
	text-align: center;
}
.cl-trade-modal .mgc-submit-row input[type="submit"],
.cl-trade-modal .mgc-submit-row .wpcf7-submit {
	display: block;
	width: 100%;
	/* Motors frontend_styles.css caps every submit at max-width:190px with
	   margin-left:auto (that's what right-aligned the old button). */
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.cl-trade-drop {
		padding: 18px 12px;
	}
	.cl-trade-drop__btn {
		width: 100%;
	}
}
.cl-trade-photos__count {
	font-weight: 400;
	font-size: 12px;
	color: #374151;
}
.cl-trade-photos__list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}
.cl-trade-photos__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: #374151;
	background: #f1f3f5;
	border: 1px solid #e2e6ea;
	border-radius: 6px;
	padding: 4px 8px;
	margin: 0 0 4px;
}
.cl-trade-photos__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cl-trade-photos__remove {
	background: none;
	border: 0;
	padding: 0 4px;
	font-size: 16px;
	line-height: 1;
	color: #8a929c;
	cursor: pointer;
}
.cl-trade-photos__remove:hover,
.cl-trade-photos__remove:focus-visible {
	color: #d02329;
}
.cl-trade-photos__error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #dc3232;
}

/* Motors single-listing.css ships a bare `select { opacity:0; visibility:hidden }`
   that its select2 init used to replace at runtime; that JS is gone in cl mode,
   so native selects inside CF7 forms must be re-shown and skinned like the
   neighboring inputs (same pattern as .cl-year-select on the archive). */
.wpcf7-form select {
	opacity: 1 !important;
	visibility: visible !important;
	width: 100%;
	height: 42px;
	padding: 0 30px 0 12px;
	border: 1px solid #d9dde2;
	border-radius: 6px;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23495057' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	font-size: 14px;
	color: #332c2b;
	-webkit-appearance: none;
	appearance: none;
}

/* ── Mobile sticky quote bar vs the phone browser's bottom chrome ──────────
   [LD] 2026-08-01 (QA G-16). REVERSES the 2026-07-25 offset below, which was
   written from a field report and never checked on a real iPhone.

   What the 07-25 change did: it read `calc(100vh - 100dvh)` as "the height of
   the browser's BOTTOM toolbar" and used it to lift the fixed bar clear of
   that toolbar. That reading is wrong. dvh shrinks by ALL of the currently
   shown chrome, and on iOS Safari that is the bottom toolbar PLUS the amount
   the top address bar expands by when you are at the top of the page. So the
   expression is the TOTAL chrome delta, not the bottom part of it.

   Worse, the lift was not needed in the first place: iOS Safari already keeps
   a position:fixed; bottom:0 element pinned above its own bottom toolbar. So
   the bar was being lifted a second time, by a number that was too big to
   begin with, and it floated ~130px up the page with a band of scrolling
   content showing underneath it. That is the owner's 2026-08-01 screenshot,
   and it matches the arithmetic: the gap he measured is the whole chrome
   delta, which is exactly what you get when a correction of 0 was required.

   It only showed while the chrome was expanded, which is why it read as "the
   sticky button looks weird before you scroll down and when you scroll back
   up" — scrolling down collapses the chrome, dvh meets vh, the offset falls
   to 0 and the bar snaps back to where it belongs.

   Back to plain bottom: 0, which is what the legacy rule already says, so
   this override now carries only the padding.

   Not done deliberately, so the next person does not redo it: the safe-area
   padding is kept but it resolves to 0 on this site, because env() insets are
   only non-zero under <meta viewport-fit=cover> and this theme does not set
   it (header.php:5). Adding viewport-fit=cover is a SITE-WIDE change — it
   lets every page draw under the notch and the home indicator — so it is not
   something to slip in underneath a single listing's button. Left as is
   because under the corrected behaviour Safari pins the bar above the
   toolbar, and the home indicator is drawn on that toolbar, so there is
   nothing left for the inset to clear. */
@media (max-width: 767px) {
	body.single-listings .mgc-cta-sticky-wrap.mobile-fixed {
		bottom: 0;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
	body.single-listings {
		padding-bottom: 84px; /* bar height + shadow: content scrolls clear */
	}
	/* Quote modal (#trade-offer): the legacy footer style caps it at 92vh
	   !important — taller than the visible viewport while browser chrome is
	   shown, so the submit could sit behind the toolbar. Same dvh treatment;
	   body.single-listings prefix outranks the legacy #trade-offer rules
	   (ID+class beats ID) without touching the legacy file. */
	body.single-listings #trade-offer .modal-dialog,
	body.single-listings #trade-offer .modal-content {
		max-height: 92vh !important;  /* fallback: engines without dvh */
		max-height: 92dvh !important;
	}
}

/* ── Sticky modal submit footer (owner directive 2026-07-26) ───────────────
   The trade form is long: at phone heights its "Get My Trade-In Value"
   submit sat below the fold, invisible until the shopper scrolled. Directive:
   pin the submit row to the bottom of the modal viewport on EVERY width
   (mobile and desktop for consistency), let the form body scroll beneath it,
   and keep it clear of the phone's home-indicator (safe-area inset).
   Applied to BOTH single-page modals — #cl-trade-modal and the quote modal
   #trade-offer — via cl-only selectors (body.single-listings prefix on the
   legacy-markup quote modal; the legacy file itself is untouched).
   position:sticky INSIDE the scrollable .modal-body keeps the button in the
   CF7 <form> (submit semantics unchanged) while never leaving the visible
   area. Fallback-safe: engines without sticky render the previous in-flow
   button (form still scrolls to it). No :has()/color-mix()/overflow:clip. */

/* The quote modal gets the same scroll frame the trade modal already has
   (flex column content + scrollable body) at every width. */
body.single-listings #trade-offer .modal-dialog,
body.single-listings #trade-offer .modal-content {
	max-height: calc(100vh - 40px);  /* fallback: engines without dvh */
	max-height: calc(100dvh - 40px);
	display: flex;
	flex-direction: column;
}
body.single-listings #trade-offer .modal-content {
	overflow: hidden;
}
body.single-listings #trade-offer .modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

body.single-listings #trade-offer .mgc-submit-row,
.cl-trade-modal .mgc-submit-row {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: 3;
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
	box-shadow: 0 -4px 12px rgba(17, 24, 39, 0.08);
}
/* Bleed each footer to ITS modal-body edges. Measured paddings: trade 15px,
   quote 28px desktop / 18px phone.
   CORRECTION 2026-08-01: this comment used to claim over-bleeding was
   "clipped by the modal-content overflow, so the border always spans the
   full modal width". Measured with the modal open, that is false. The
   scrollable body has overflow-y:auto, which forces overflow-x to compute
   from visible to auto, so surplus width became scroll range instead of
   being cut off. Every case below is now cut to the padding it actually
   sits in, and overflow-x is pinned hidden further down as a backstop.
   !important: a later legacy-layer paragraph rule re-margins form <p>s.
   The body's own bottom padding is dropped so the pinned row sits flush. */
.cl-trade-modal .modal-body,
body.single-listings #trade-offer .modal-body {
	padding-bottom: 0;
}
.cl-trade-modal .mgc-submit-row,
body.single-listings #trade-offer .mgc-submit-row {
	margin: 14px -28px 0 !important;
	/* Explicit width: the legacy quote-modal-mobile.php inline CSS pins the
	   row to `width:100% !important`, so negative margins alone shifted it
	   left without widening. Same-weight override (higher specificity, and
	   that legacy file stays untouched). */
	width: calc(100% + 56px) !important;
	box-sizing: border-box;
	padding: 10px 28px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* CF7 output stays visible above the pinned row: cl-single.js re-parents
   .wpcf7-response-output to just BEFORE .mgc-submit-row (CF7 appends it
   after, where the sticky row could overlap it). Spacing for both spots. */
body.single-listings #trade-offer .wpcf7-response-output,
.cl-trade-modal .wpcf7-response-output {
	margin: 10px 0 12px;
}

/* ── Trade modal on a phone: one axis, and a form you can see the end of ───
   Owner feedback 2026-08-01. Both faults measured with the modal open at a
   390px viewport, not read off the stylesheet.

   1. SIDEWAYS SCROLL. The bleed above is cut for the QUOTE modal, whose
      body pads 28px. This modal pads 15px, so the same -28px hung the
      pinned row 13px off each edge (measured: row width 394 in a 368 body,
      body scrollWidth 381 against clientWidth 368). The comment above says
      the over-bleed is clipped by modal-content. It is not. A box with
      overflow-y:auto computes overflow-x from visible to auto as well, so
      the extra 13px did not get cut off, it became somewhere to scroll to.
      That is the left-right drift being reported.

      Fixed in two places deliberately. The bleed is re-cut to this modal's
      own 15px, so the row spans the body instead of hanging off it. Then
      overflow-x is pinned to hidden, so no future child can reopen the
      sideways axis by getting its own width wrong. The second one is what
      makes up-and-down-only a property of the container rather than
      something every child has to keep getting right forever.

   2. A FORM THAT LOOKED FINISHED. Every field sat on its own row, so the
      form ran 1120px tall inside a 720px window and opened looking like it
      ended at the photo box, with the pinned white button bar reading as
      the floor. Name, phone/email and year/make/model already pair up on a
      desktop; the site-wide phone rule (style.css) turns that off for every
      form at once. It is turned back on HERE only, because this form is the
      one that lives in a fixed-height box where its height is the problem.

      Inputs stay at 16px. Anything smaller makes mobile Safari zoom the
      page in on focus, and a zoomed page pans left and right, which would
      have quietly reintroduced fault 1 on the one device that cannot be
      emulated here. Only the labels shrink.

   The fade above the pinned button is the honest half of the cue: JS adds
   the class only while there really is more form below, so it never tells
   anyone to keep scrolling a form that has already ended. */
.cl-trade-modal .modal-body,
body.single-listings #trade-offer .modal-body {
	overflow-x: hidden;
}
.cl-trade-modal .mgc-submit-row {
	margin: 14px -15px 0 !important;
	width: calc(100% + 30px) !important;
	padding: 10px 15px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.cl-trade-modal .modal-body.cl-trade-more .mgc-submit-row::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 34px;
	pointer-events: none;
	background: linear-gradient(to top, #ffffff 14%, rgba(255, 255, 255, 0));
}

@media (max-width: 768px) {
	.cl-trade-modal .cf7-row {
		flex-direction: row;
		gap: 10px;
		/* Bottom aligned, not stretched: a label that wraps to two lines at
		   a third of a phone would otherwise push its own input down out of
		   line with the two beside it. Aligning on the bottom edge keeps the
		   inputs on one line whatever the labels above them do. */
		align-items: flex-end;
	}
	.cl-trade-modal .cf7-col {
		flex: 1 1 0;
		min-width: 0;
	}
	/* Year takes four characters and Make/Model take words, so an even split
	   would starve the two that need the room. */
	.cl-trade-modal .cl-trade-row-3 .cf7-col:first-child {
		flex: 0 0 76px;
	}
	.cl-trade-modal .cf7-row label {
		font-size: 12px;
		line-height: 1.35;
	}
	.cl-trade-modal .cf7-row .required {
		font-size: 11px;
	}
	/* Same mis-cut bleed, second modal. The quote modal's body pads 28px on a
	   desktop but drops to 18px on a phone, so the shared -28px above hung its
	   pinned row 10px off each edge there (measured: row 385 in a 365 body).
	   The overflow-x:hidden above already stops that becoming sideways drift,
	   but a row that relies on being clipped is a row whose border is being
	   cut off rather than drawn to the edge. Cut it to the 18px it actually
	   sits in, so the clip has nothing left to do. */
	body.single-listings #trade-offer .mgc-submit-row {
		margin: 14px -18px 0 !important;
		width: calc(100% + 36px) !important;
		padding: 10px 18px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
}

/* .mgc-sidebar-cta-note deleted 2026-08-06 at the owner's request. The sold
   sidebar used to print a line of explanation under "This Unit Is Sold"; the
   heading and the button now say it between them, so the rule had nothing left
   to style and came out rather than sitting here unused. (Was 2026-07-31 audit
   B-10.) */

/* ═══════════════════════════════════════════════════════════════════
   RECOMMENDED FOR YOU  (AUDIT FIX 2026-08-05)
   parts/single-related.php renders .mgc-related-listings.cl-related on
   every listing page. Its docblock claimed these styles had already been
   ported here; they had not, so even where the partial did render (the
   sold-and-hidden page) the cards came out unstyled. Ported from the
   legacy inline block in functions.php, scoped under .cl-related so it
   cannot collide with the homepage carousel, which loads its own copy
   from assets/css/mgc-home.css on pages where that file is inlined.
   ═══════════════════════════════════════════════════════════════════ */

/* 2026-08-09: .cl-related-wrap was the full-width boxed container the block
   used while it rendered at the very bottom of the page. It now sits inside the
   content column under the seller's notes (see single-listing.php), so it takes
   the column's width and needs no container of its own. The rule is kept as a
   no-op guard rather than deleted, because an older cached page can still be
   serving the old markup while this stylesheet is already the new one — without
   it that page would render the block edge to edge. */
.cl-related-wrap{
	max-width:100%;
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.cl-related-widget{ width:100%; }
.cl-related{
	margin:40px 0 0;
	padding-top:28px;
	border-top:1px solid #e5e7eb;
	min-width:0;
	max-width:100%;
	box-sizing:border-box;
}
.cl-related .mgc-related-listings__header{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:12px;
}
.cl-related .mgc-related-listings__title{
	font-size:22px;
	font-weight:800;
	color:#111;
	margin:0 0 6px;
	letter-spacing:-0.3px;
}
.cl-related .mgc-related-listings__divider{
	width:50px;
	height:3px;
	background:var(--cl-red);
	margin:0 0 20px;
}
.cl-related .mgc-related-listings__nav{
	display:flex;
	gap:6px;
}
.cl-related .mgc-related-listings__arrow{
	width:34px;
	height:34px;
	border-radius:50%;
	border:1.5px solid #111;
	background:transparent;
	color:#111;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0 0 2px;
	transition:border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.cl-related .mgc-related-listings__arrow:hover,
.cl-related .mgc-related-listings__arrow:focus,
.cl-related .mgc-related-listings__arrow:focus-visible,
.cl-related .mgc-related-listings__arrow:active{
	background:transparent;
	border-color:var(--cl-red);
	color:var(--cl-red);
	outline:none;
	box-shadow:none;
}
.cl-related .mgc-related-listings__arrow[disabled]{
	opacity:0.35;
	cursor:not-allowed;
}

/* Track: horizontal scroll with snap. Arrows drive it on desktop, native
   touch swipe on mobile. */
.cl-related .mgc-related-listings__grid{
	display:flex;
	gap:16px;
	min-width:0;
	max-width:100%;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	padding-bottom:2px;
}
.cl-related .mgc-related-listings__grid::-webkit-scrollbar{display:none;}

/* SHORT ROW (2026-08-09, owner). Cards are locked to a third of the row so a
   full row of six scrolls three at a time. When the row does NOT overflow —
   a dealer with one or two other carts in stock — that same rule left a third
   of the row visibly empty, which reads as a broken section rather than a
   small one. cl-single.js adds .is-short when it measures no overflow, and the
   cards then spread to fill. Capped at 380px so a single related cart does not
   stretch into a billboard. */
.cl-related.is-short .mgc-deal-card{
	flex:1 1 240px;
	max-width:380px;
}
.cl-related .mgc-deal-card{
	display:flex;
	flex-direction:column;
	flex:0 0 calc(33.333% - 11px);
	min-width:0;
	scroll-snap-align:start;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:8px;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	transition:box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.cl-related .mgc-deal-card:hover{
	box-shadow:0 6px 16px rgba(0,0,0,0.08);
	transform:translateY(-2px);
	border-color:#d1d5db;
	text-decoration:none;
	color:inherit;
}
.cl-related .mgc-deal-card__image{
	aspect-ratio:16 / 10;
	background:#f3f4f6;
	overflow:hidden;
}
.cl-related .mgc-deal-card__img,
.cl-related .mgc-deal-card__placeholder{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.cl-related .mgc-deal-card__body{
	padding:12px 14px 14px;
	display:flex;
	flex-direction:column;
	gap:6px;
}
/* TWO LINES, not one (2026-08-09, owner). At a third of the column a card is
   ~254px wide, and one line of 14px bold holds roughly 28 characters — enough
   for "2026 Denago EV Nomad XL" and not enough for a real lifted-cart name, so
   every card in the row clipped at about the same point and three different
   carts read as three copies of the same title. Two lines carry the trim level
   as well as the model. min-height reserves the second line whether or not it
   is used, so the prices below stay on one baseline across the row. */
.cl-related .mgc-deal-card__title{
	font-size:14px;
	font-weight:700;
	color:#111;
	line-height:1.25;
	text-align:left;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	min-height:2.5em;
}
.cl-related .mgc-deal-card__prices{
	display:flex;
	align-items:baseline;
	gap:8px;
	text-align:left;
}
.cl-related .mgc-deal-card__retail{
	font-size:12px;
	font-weight:500;
	color:#9ca3af;
	text-decoration:line-through;
}
.cl-related .mgc-deal-card__price{
	font-size:18px;
	font-weight:800;
	color:var(--cl-red);
	line-height:1;
	text-align:left;
}
.cl-related .mgc-deal-card__specs{
	display:flex;
	flex-wrap:wrap;
	gap:10px 12px;
	margin-top:2px;
}
.cl-related .mgc-deal-card__spec{
	font-size:11px;
	color:#6b7280;
	font-weight:500;
	display:inline-flex;
	align-items:center;
	gap:4px;
	line-height:1;
}
.cl-related .mgc-deal-card__spec i{
	color:#9ca3af;
	font-size:11px;
}

/* 2 cards on tablet, one card plus a peek on mobile so the swipe is
   discoverable. Arrows hide on mobile: the swipe is the affordance. */
@media (max-width:900px){
	.cl-related .mgc-deal-card{flex:0 0 calc(50% - 8px);}
}
@media (max-width:600px){
	.cl-related{margin-top:28px;padding-top:20px;}
	.cl-related .mgc-related-listings__title{font-size:18px;}
	.cl-related .mgc-related-listings__grid{gap:12px;}
	.cl-related .mgc-deal-card{flex:0 0 86%;}
	.cl-related .mgc-related-listings__nav{display:none;}
}