/* Used Vehicles hub/search + detail page. */

.cbm-vehicles-hero { padding-block: 8px 24px; }
.cbm-vehicles-hero h1 { font-family: var(--cbm-font-heading); font-size: 32px; margin: 0 0 6px; }
.cbm-vehicles-hero p { color: var(--cbm-body-grey); margin: 0; }

.cbm-vehicles-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.cbm-vehicles-filters input,
.cbm-vehicles-filters select {
	padding: 10px 12px; border: 1px solid var(--cbm-hairline); border-radius: 2px; font-size: 13px;
}
.cbm-vehicles-filters input[type="search"] { flex: 1 1 240px; }

.cbm-vehicle-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cbm-gap);
	margin-top: 20px;
}
@media (max-width: 1024px) { .cbm-vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cbm-vehicle-grid { grid-template-columns: 1fr; } }

.cbm-vehicle-card {
	display: block; border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius);
	overflow: hidden; color: var(--cbm-near-black-alt); background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cbm-vehicle-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
/* aspect-ratio was 8/3 after the 2026-09-04 height cut, but Jonathan found
   that too small to see the vehicle in ("hard to see the vehicle") -
   widened back by 30% (8/3 ÷ 1.3 = ~2.05/1), while keeping the tightened
   body/thumbnail spacing from that same pass, which he confirmed was a
   real improvement. */
/* Restored close to the ORIGINAL 16/10 depth - per Jonathan (2026-09-04):
   "I was wrong to reduce them" - the whole photo-shrinking idea from
   earlier today didn't work out. Body text below stays tightened (that
   part he did want to keep), doing all the remaining depth-saving work
   instead of the photo. */
.cbm-vehicle-card__media { display: block; position: relative; aspect-ratio: 1.6/1; background: var(--cbm-fill-light); overflow: hidden; }
.cbm-vehicle-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Mini thumbnail strip overlaid on a card's photo — click one to preview
   it in the main spot, without navigating to the detail page (JS in
   assets/js/used-vehicles.js stops the click reaching the card's own
   link). Shared .cbm-photo-wrap/__main/__thumbs naming so the identical
   behaviour works on both template-parts/vehicle-card.php's
   .cbm-vehicle-card and vehicle-offer-card.php's differently-shaped
   .cbm-rv-offer — everything here is scoped to .cbm-photo-wrap itself,
   never the outer card class, so it doesn't care which card it's in.
   Hidden until hover/focus so the main photo isn't cluttered at rest;
   :focus-within too so keyboard users can reach it. */
.cbm-photo-wrap { position: relative; }
.cbm-photo-thumbs {
	position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2;
	display: flex; gap: 0;
}
/* Always visible now, not hover-only - per Jonathan (2026-09-04), clicking
   a thumb still wasn't working reliably even after the gap/click-handling
   fixes below. Hover-to-reveal has real, hard-to-verify failure modes this
   session couldn't rule out (a touch/trackpad device's first tap only
   triggering :hover without a click; a timing gap between the reveal
   fading in and the click landing), on top of everything already fixed.
   Showing the strip permanently removes that whole category of problem
   outright, and there's enough room in the taller (2.05/1) photo for it
   not to look cluttered. */
.cbm-photo-wrap--swapped .cbm-photo-thumbs { opacity: 1; }
/* No flex "gap" between thumbs any more, and each one carries its own
   padding as part of its own clickable box (box-sizing: content-box) -
   per Jonathan (2026-09-04), clicking a thumb still wasn't swapping the
   photo even after the click-handling fix below. Root cause: a "gap"
   between flex items is dead space that belongs to neither thumb, so an
   imprecise real click there had nothing to actually hit. Padding, unlike
   gap, is part of the element's own box and so is fully clickable -
   closing the dead zone entirely rather than just working around it. */
/* flex:0 0 auto + width:26px alone weren't enough to pin these images down
 * consistently everywhere this card renders (found 2026-09-05: on the
 * sitewide Search Results template specifically, each thumb was stretching
 * to fill its full flex row — ~343px instead of 26px — pushing it off-page.
 * The responsive srcset/sizes attributes on these <img> tags appear to be
 * the trigger. flex:none + !important guarantees the intended fixed size
 * regardless of that interaction, on every page that uses this card. */
.cbm-photo-thumb {
	width: 26px !important; height: 26px !important; max-width: 26px !important; max-height: 26px !important;
	padding: 3px; box-sizing: content-box;
	object-fit: cover; border-radius: 2px;
	border: 1.5px solid rgba(255,255,255,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
	cursor: pointer; flex: none !important;
}
.cbm-photo-thumb:hover, .cbm-photo-thumb:focus { border-color: var(--cbm-red); outline: none; }
/* Always-visible view count, bottom-right of a listing's photo — per
   Jonathan (2026-09-04), so interest is visible without opening the
   detail page. Higher z-index than the thumbnail strip (which only shows
   on hover) so it stays legible even on a narrow card where thumbs could
   otherwise reach this corner. */
.cbm-photo-views {
	position: absolute; right: 6px; bottom: 6px; z-index: 3;
	background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; font-weight: 600;
	padding: 2px 6px; border-radius: 999px; line-height: 1.4; white-space: nowrap; pointer-events: none;
}
.cbm-vehicle-card__body { display: block; padding: 8px 12px 10px; }
.cbm-vehicle-card__manufacturer {
	display: block; font-family: var(--cbm-font-mono); font-size: 9px; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--cbm-muted-grey);
}
.cbm-vehicle-card__title { display: block; font-family: var(--cbm-font-body); font-weight: 600; font-size: 14px; margin-top: 2px; line-height: 1.3; }
.cbm-vehicle-card__meta { display: block; font-size: 11px; color: var(--cbm-muted-grey); margin-top: 4px; }
.cbm-vehicle-card__footer {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--cbm-hairline);
}
.cbm-vehicle-card__price { font-family: var(--cbm-font-mono); font-weight: 600; font-size: 15px; }
.cbm-vehicle-card__location { font-size: 11px; color: var(--cbm-muted-grey); }

.cbm-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.cbm-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 8px;
	border: 1px solid var(--cbm-hairline); border-radius: 2px; font-size: 13px; color: var(--cbm-near-black-alt);
}
.cbm-pagination .page-numbers.current { background: var(--cbm-red); color: #fff; border-color: var(--cbm-red); }

.cbm-vehicles-empty { padding: 40px 0; color: var(--cbm-muted-grey); text-align: center; }

/* Detail page */
.cbm-vehicle-detail { padding-block: 32px 56px; display: flex; flex-direction: column; gap: 16px; }
.cbm-vehicle-detail__main-photo { aspect-ratio: 16/9; background: var(--cbm-fill-light); border-radius: var(--cbm-radius); overflow: hidden; }
.cbm-vehicle-detail__main-photo img { width: 100%; height: 100%; object-fit: cover; }
.cbm-vehicle-detail__main-photo img[hidden],
.cbm-vehicle-video[hidden] { display: none; }
/* Video first in the gallery (Sarah, 2026-09-30): still frame + big play button. */
.cbm-vehicle-video { position: relative; width: 100%; height: 100%; background: #000; }
.cbm-vehicle-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cbm-vehicle-video__play {
	position: absolute; inset: 0; margin: auto; width: 84px; height: 84px;
	border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.cbm-vehicle-video__play:hover { background: var(--cbm-red); }
.cbm-vehicle-video__play span {
	width: 0; height: 0; margin-left: 7px;
	border-style: solid; border-width: 17px 0 17px 28px;
	border-color: transparent transparent transparent #fff;
}
.cbm-vehicle-video__play[hidden] { display: none; }
.cbm-vehicle-detail__gallery-counter { font-size: 12px; color: var(--cbm-muted-grey); margin: 8px 0 0; }
.cbm-vehicle-detail__thumbs { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* Gallery now sits inside .cbm-vehicle-detail__main (left grid column,
   alongside specs/description) rather than full-width above the whole
   grid — explicit spacing below it since it's no longer a flex sibling
   relying on .cbm-vehicle-detail's own gap. */
.cbm-vehicle-detail__gallery { margin-bottom: 20px; }
/* Generous padding, not the image's own tight bounds — a user repeatedly
   found real clicks on these unresponsive despite everything else on the
   page (including a tab toggle right next to them, same delegated-click
   approach) working fine; a small zero-padding hit target (90x64px image
   + 2px border, nothing more) is the most likely explanation left once
   JS-blocked, caching and browser-specific causes were all ruled out —
   any minor rendering/DPI discrepancy leaves very little margin for a
   real mouse click to land within bounds. */
.cbm-vehicle-detail__thumb-btn { padding: 6px; margin: -6px; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; line-height: 0; }
.cbm-vehicle-detail__thumb-btn img { width: 90px; height: 64px; object-fit: cover; border-radius: 1px; display: block; pointer-events: none; }
.cbm-vehicle-detail__thumb-btn.is-active { border-color: var(--cbm-red); }
.cbm-vehicle-detail__thumb-video-badge {
	width: 90px; height: 64px; display: flex; align-items: center; justify-content: center;
	background: #222; color: #fff; font-size: 11px; border-radius: 1px;
}

.cbm-vehicle-detail__header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cbm-vehicle-detail__header h1 { font-family: var(--cbm-font-heading); font-size: 28px; margin: 0; }
/* No font-family override — matches .cbm-rv-offer__price (the hub/search
   card price, rent-vehicles.css), which also doesn't set one and just
   inherits the page's normal body font. The earlier var(--cbm-font-mono)
   here wasn't a loading bug, it was a real font-FAMILY mismatch: IBM Plex
   Mono is a genuinely different typeface with its own dotted-zero design,
   present regardless of which weight loads. */
.cbm-vehicle-detail__price { font-size: 22px; font-weight: 700; color: var(--cbm-red); }
.cbm-vehicle-detail__location { color: var(--cbm-muted-grey); margin: 0; }
.cbm-vehicle-detail__views { color: var(--cbm-muted-grey); font-size: 13px; margin: 4px 0 0; }

.cbm-vehicle-detail__top-ad { margin-top: 14px; }
.cbm-vehicle-detail__top-ad .cbm-ad-empty-slot { display: flex; align-items: center; justify-content: center; height: 90px; background: var(--cbm-fill-light); border: 1px dashed var(--cbm-muted-grey); border-radius: 2px; }

.cbm-vehicle-detail__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 16px; }
@media (max-width: 1024px) { .cbm-vehicle-detail__grid { grid-template-columns: 1fr; } }

.cbm-vehicle-detail__related { margin-top: 40px; }
.cbm-vehicle-detail__related h2 { font-family: var(--cbm-font-heading); font-size: 22px; margin-bottom: 4px; }
.cbm-vehicle-detail__related-intro { color: var(--cbm-muted-grey); margin: 0 0 16px; }

/* Related Vehicles reuses .cbm-rv-offers/.cbm-rv-offer from the Rent
   Vehicles Showroom (rent-vehicles.css), which was sized for that page's
   full-width layout. Here it sits below a narrower 2fr/1fr content grid
   (see .cbm-vehicle-detail__grid above), so the same 3-column cards read
   as oversized against everything above them (Jonathan, 2026-09-02:
   "related vehicles ... displayed too big"). Scoped override: more,
   smaller columns, only inside this section — the original Rent
   Vehicles page is untouched. */
.cbm-vehicle-detail__related .cbm-rv-offers { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.cbm-vehicle-detail__related .cbm-rv-offers { grid-template-columns: repeat(2, 1fr); }
}

/* "What else do you need for this vehicle?" — the explore-beyond-vehicles
   nudge on the vehicle detail page (see single-vehicle_listing.php).
   Deliberately styled as a set of equal, neutral choices (not a single ad
   or a pushed suggestion) — mirrors the MHP2 "ask what the visitor wants"
   pattern rather than CBM's own structure. */
.cbm-vehicle-detail__next-steps { margin-top: 40px; }
.cbm-vehicle-detail__next-steps h2 { font-family: var(--cbm-font-heading); font-size: 22px; margin-bottom: 4px; }
.cbm-vehicle-detail__next-steps-intro { color: var(--cbm-muted-grey); margin: 0 0 16px; }
.cbm-next-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cbm-next-step {
	display: flex; flex-direction: column; gap: 4px;
	border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius);
	padding: 16px 18px; background: var(--cbm-fill-lighter);
	text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.cbm-next-step:hover { border-color: var(--cbm-red); background: var(--cbm-fill-light); }
.cbm-next-step__label { font-family: var(--cbm-font-body); font-weight: 700; font-size: 15px; color: var(--cbm-near-black-alt); }
.cbm-next-step__hint { font-size: 12px; color: var(--cbm-muted-grey); }
@media (max-width: 720px) { .cbm-next-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cbm-next-steps__grid { grid-template-columns: 1fr; } }

/* Guest-facing teaser shown in place of full listing/directory details —
   see inc/template-tags.php's cbm_render_member_gate_teaser(). */
.cbm-member-gate {
	border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); background: var(--cbm-fill-lighter);
	padding: 28px 24px; text-align: center; margin-top: 20px; max-width: 480px;
}
.cbm-member-gate h2 { font-family: var(--cbm-font-body); font-size: 20px; margin: 0 0 8px; }
.cbm-member-gate p { color: var(--cbm-body-grey); font-size: 14px; margin: 0 0 16px; }
.cbm-member-gate .cbm-btn { display: inline-block; }
.cbm-member-gate__login { margin-top: 14px !important; font-size: 13px !important; }

.cbm-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin: 12px 0 20px; }
.cbm-spec-grid__row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--cbm-hairline); font-size: 13px; }
.cbm-spec-grid__row dt { color: var(--cbm-muted-grey); margin: 0; }
.cbm-spec-grid__row dd { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .cbm-spec-grid { grid-template-columns: 1fr; } }

.cbm-feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cbm-feature-chip {
	font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 2px;
	background: var(--cbm-fill-light); color: var(--cbm-near-black-alt);
}

.cbm-contact-card { border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); padding: 0; margin-bottom: 16px; overflow: hidden; }
.cbm-contact-card h2 { font-size: 15px; margin: 0 0 10px; }
.cbm-contact-card__name { font-weight: 700; margin: 0 0 4px; }
.cbm-contact-card__phone { font-family: var(--cbm-font-mono); color: var(--cbm-body-grey); margin: 0; }

.cbm-contact-card__tabs { display: flex; border-bottom: 1px solid var(--cbm-hairline); }
.cbm-contact-card__tab { flex: 1; padding: 12px 8px; border: none; background: var(--cbm-fill-lighter); font-family: var(--cbm-font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cbm-muted-grey); cursor: pointer; }
.cbm-contact-card__tab.is-active { background: #fff; color: var(--cbm-near-black); box-shadow: inset 0 -2px 0 var(--cbm-red); }
.cbm-contact-card__panel { padding: 16px 20px; }
.cbm-contact-card__other { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cbm-hairline); }
.cbm-contact-card__other h3 { font-size: 13px; margin: 0 0 8px; color: var(--cbm-muted-grey); }
.cbm-contact-card__other ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cbm-contact-card__other a { font-size: 14px; color: var(--cbm-near-black); text-decoration: none; }
.cbm-contact-card__other a:hover { color: var(--cbm-red); text-decoration: underline; }
.cbm-contact-card__mention { font-size: 13px; color: var(--cbm-muted-grey); margin: 10px 0 0; }

.cbm-vehicle-detail__mention { background: var(--cbm-fill-lighter); border: 1px solid var(--cbm-hairline); border-radius: var(--cbm-radius); padding: 14px 16px; margin-bottom: 16px; color: var(--cbm-red); font-weight: 700; text-align: center; font-size: 14px; }

.cbm-contact-card__call-btn { display: block; text-align: center; background: var(--cbm-green); color: #fff; font-family: var(--cbm-font-body); font-weight: 700; font-size: 15px; padding: 12px; border-radius: 2px; text-decoration: none; margin-bottom: 14px; }
.cbm-contact-card__call-btn:hover { filter: brightness(1.1); }
.cbm-contact-card__inquiry-hint { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--cbm-body-grey); margin: 0 0 16px; }
.cbm-contact-card__inquiry-icon { flex: none; font-size: 16px; color: var(--cbm-muted-grey); line-height: 1.4; }
.cbm-contact-card__form { max-width: none; border: none; padding: 0; }
.cbm-contact-card__form button { align-self: stretch; }

.cbm-map-embed { border-radius: var(--cbm-radius); overflow: hidden; border: 1px solid var(--cbm-hairline); }
.cbm-map-embed iframe { width: 100%; height: 220px; border: 0; display: block; }