/* SearchCars.ca — main stylesheet
   Aesthetic: confident, editorial-utilitarian. Trustworthy Canadian marketplace.
   Deep navy ink, a single confident blue, warm paper surfaces, one maple-red
   signature. Display: Fraunces. UI/body: Sora. Prices in tabular figures.
   Depth via layered shadows + hairlines; restrained, intentional motion. */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--scm-ink);
	background: var(--scm-mist);
	line-height: 1.58;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; line-height: 1.12; color: var(--scm-ink); letter-spacing: -0.01em; margin: 0; }
a { color: var(--scm-blue); text-decoration: none; transition: color .15s var(--scm-ease); }
a:hover { color: var(--scm-blue-dark); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--scm-blue); outline-offset: 2px; border-radius: 4px; }

.scm-wrap { max-width: var(--scm-max); margin: 0 auto; padding: 0 22px; }

/* Tabular numerals for any price-like figure */
.scm-card-price, .scm-listing-price, .scm-sticky-price, .scm-calc-out, .scm-hub-links span { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.scm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	font: 600 14px/1 "Sora", sans-serif; letter-spacing: .01em;
	padding: 12px 20px; border-radius: var(--scm-radius-sm);
	border: 1px solid transparent; cursor: pointer; transition: transform .16s var(--scm-ease), background .16s var(--scm-ease), box-shadow .16s var(--scm-ease);
	text-decoration: none; white-space: nowrap;
}
.scm-btn-primary { background: var(--scm-blue); color: #fff; box-shadow: 0 1px 2px rgba(29,95,212,.4), 0 6px 16px rgba(29,95,212,.22); }
.scm-btn-primary:hover { background: var(--scm-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(29,95,212,.4), 0 10px 22px rgba(29,95,212,.28); }
.scm-btn-ghost { background: var(--scm-paper); color: var(--scm-ink); border-color: var(--scm-line); }
.scm-btn-ghost:hover { border-color: var(--scm-blue); color: var(--scm-blue); transform: translateY(-1px); }
.scm-btn-block { width: 100%; }

/* ---------- Header ---------- */
.scm-header { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--scm-line); position: sticky; top: 0; z-index: 40; }
.scm-header-inner { display: flex; align-items: center; gap: 26px; height: 70px; }
.scm-logo { font: 600 23px/1 "Fraunces", serif; color: var(--scm-ink); letter-spacing: -0.02em; }
.scm-logo strong { color: var(--scm-blue); font-weight: 600; }
.scm-logo span { color: var(--scm-maple); }
.scm-nav { margin-left: auto; }
.scm-menu { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.scm-menu a { color: var(--scm-slate); }
.scm-menu a:hover { color: var(--scm-ink); }
.scm-header-cta { display: flex; gap: 10px; }

/* ---------- Hero ---------- */
.scm-hero {
	position: relative; overflow: hidden; color: #fff; padding: 72px 0 60px;
	background:
		radial-gradient(120% 120% at 85% -10%, rgba(200,49,43,.22), transparent 45%),
		linear-gradient(157deg, #0a1626 0%, #14346f 55%, #1546a0 100%);
}
/* fine grid texture for depth */
.scm-hero::before {
	content: ""; position: absolute; inset: 0; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
	pointer-events: none;
}
.scm-hero .scm-wrap { position: relative; z-index: 1; }
.scm-hero-title { color: #fff; font-size: clamp(34px, 5.2vw, 56px); margin: 0 0 12px; font-weight: 600; }
.scm-hero-title .scm-accent { color: #ffd9d6; }
.scm-hero-sub { color: #c6d3ec; font-size: clamp(16px, 2vw, 19px); margin: 0 0 30px; max-width: 540px; }

/* Search bar */
.scm-search {
	display: flex; flex-wrap: wrap; gap: 10px; background: #fff; padding: 12px;
	border-radius: var(--scm-radius); box-shadow: var(--scm-shadow-lg);
}
.scm-search input, .scm-search select {
	flex: 1 1 148px; min-width: 0; padding: 13px 12px; border: 1px solid var(--scm-line);
	border-radius: var(--scm-radius-sm); font: 400 15px "Sora", sans-serif; color: var(--scm-ink); background: var(--scm-paper-warm);
	transition: border-color .15s var(--scm-ease), box-shadow .15s var(--scm-ease);
}
.scm-search input:focus, .scm-search select:focus { outline: none; border-color: var(--scm-blue); box-shadow: 0 0 0 3px rgba(29,95,212,.14); background: #fff; }
.scm-search input[type="text"] { flex: 2 1 220px; }
.scm-search .scm-btn { flex: 0 0 auto; padding-inline: 26px; }

/* trust strip */
.scm-trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; color: #b9c7e2; font-size: 13.5px; font-weight: 500; }
.scm-trust span { display: inline-flex; align-items: center; gap: 7px; }
.scm-trust span::before { content: "✓"; color: #7fe0a6; font-weight: 700; }

.scm-quick { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.scm-chip {
	background: rgba(255,255,255,.10); color: #fff; padding: 8px 15px; border-radius: 999px;
	font-size: 13px; font-weight: 500; border: 1px solid rgba(255,255,255,.18); transition: background .15s var(--scm-ease), transform .15s var(--scm-ease);
}
.scm-chip:hover { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-1px); }

/* ---------- Sections ---------- */
.scm-section { padding: 48px 22px; }
.scm-section-title { font-size: clamp(22px, 3vw, 28px); margin: 0 0 24px; position: relative; padding-bottom: 12px; }
.scm-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--scm-blue); }
.scm-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.scm-section-head .scm-section-title { margin: 0; }
.scm-link { font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ---------- Cards grid ---------- */
.scm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }
.scm-card {
	background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius);
	overflow: hidden; transition: transform .2s var(--scm-ease), box-shadow .2s var(--scm-ease), border-color .2s var(--scm-ease);
	display: flex; flex-direction: column;
}
.scm-card:hover { box-shadow: var(--scm-shadow-lg); transform: translateY(-3px); border-color: transparent; }
.scm-card-media { position: relative; display: block; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--scm-blue-soft), #dce8fb); overflow: hidden; }
.scm-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--scm-ease); }
.scm-card:hover .scm-card-media img { transform: scale(1.04); }
.scm-card-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--scm-slate-2); font-size: 13px; }
.scm-card-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.scm-card-title { font-size: 16px; line-height: 1.3; margin: 0 0 4px; font-family: "Sora"; font-weight: 600; letter-spacing: -0.01em; }
.scm-card-title a { color: var(--scm-ink); }
.scm-card-title a:hover { color: var(--scm-blue); }
.scm-card-price { font: 700 21px "Sora", sans-serif; color: var(--scm-ink); letter-spacing: -0.02em; }
.scm-card-meta { color: var(--scm-slate); font-size: 13px; margin: 3px 0 12px; }
.scm-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.scm-age { color: var(--scm-slate-2); font-size: 12px; }

/* Pills + deal badges */
.scm-pill { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.scm-pill-dealer { background: var(--scm-blue-soft); color: var(--scm-blue-dark); }
.scm-pill-private { background: #e9f6ed; color: var(--scm-great); }
.scm-deal { position: absolute; left: 11px; top: 11px; font-size: 11px; font-weight: 700; color: #fff; padding: 5px 11px; border-radius: 7px; box-shadow: 0 2px 8px rgba(10,22,38,.25); letter-spacing: .01em; }
.scm-deal-great { background: var(--scm-great); }
.scm-deal-good { background: var(--scm-good); }
.scm-deal-fair { background: var(--scm-fair); }
.scm-deal-high { background: var(--scm-high); }

/* Favourite heart */
.scm-fav {
	position: absolute; right: 11px; top: 11px; width: 38px; height: 38px; border-radius: 50%;
	border: none; background: rgba(255,255,255,.94); color: var(--scm-slate-2); font-size: 16px;
	cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--scm-shadow-sm);
	transition: transform .15s var(--scm-ease), color .15s var(--scm-ease);
}
.scm-fav:hover { transform: scale(1.12); color: var(--scm-maple); }
.scm-fav.is-saved { color: var(--scm-maple); }
.scm-fav-wide { position: static; width: 100%; height: auto; border-radius: var(--scm-radius-sm); padding: 12px; border: 1px solid var(--scm-line); margin-top: 10px; gap: 8px; font: 600 14px "Sora"; }

/* ---------- Breadcrumbs ---------- */
.scm-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-size: 13px; color: var(--scm-slate-2); }
.scm-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--scm-line); }
.scm-crumbs a { color: var(--scm-slate); }
.scm-crumbs li[aria-current] { color: var(--scm-ink); font-weight: 600; }

/* ---------- Browse hub (internal linking) ---------- */
.scm-browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scm-hub { background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius); padding: 20px; }
.scm-hub h3 { font-size: 16px; margin: 0 0 14px; font-family: "Sora"; font-weight: 600; }
.scm-hub-links { display: flex; flex-wrap: wrap; gap: 8px; }
.scm-hub-links a { display: inline-flex; align-items: center; gap: 6px; background: var(--scm-mist); color: var(--scm-ink-soft); padding: 6px 11px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: background .15s var(--scm-ease); }
.scm-hub-links a:hover { background: var(--scm-blue-soft); color: var(--scm-blue-dark); }
.scm-hub-links span { color: var(--scm-slate-2); font-size: 11px; font-weight: 600; }

/* ---------- Why row ---------- */
.scm-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.scm-why > div { background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius); padding: 24px; }
.scm-why h3 { font-size: 19px; margin: 0 0 9px; }
.scm-why p { color: var(--scm-slate); margin: 0; font-size: 14.5px; }

/* ---------- Results layout ---------- */
.scm-results { display: grid; grid-template-columns: 280px 1fr; gap: 30px; padding: 8px 22px 56px; }
.scm-filters { background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius); padding: 20px; align-self: start; position: sticky; top: 90px; }
.scm-filters h2 { font-size: 17px; margin: 0 0 16px; font-family: "Sora"; font-weight: 700; }
.scm-filter-toggle { display: none; }
.scm-results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 14px; }
.scm-results-head h1 { font-size: clamp(22px, 3vw, 28px); }
.scm-count { color: var(--scm-slate-2); font-family: "Sora"; font-size: 15px; font-weight: 500; }
.scm-sort select { padding: 9px 11px; border: 1px solid var(--scm-line); border-radius: 8px; font: 500 14px "Sora"; background: var(--scm-paper); }
.scm-pagination { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.scm-pagination .page-numbers { padding: 9px 14px; border: 1px solid var(--scm-line); border-radius: 8px; background: var(--scm-paper); font-weight: 500; font-size: 14px; }
.scm-pagination .page-numbers:hover { border-color: var(--scm-blue); }
.scm-pagination .current { background: var(--scm-blue); color: #fff; border-color: var(--scm-blue); }

/* ---------- Forms ---------- */
.scm-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 15px; color: var(--scm-ink); }
.scm-form input, .scm-form select, .scm-form textarea {
	display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--scm-line);
	border-radius: var(--scm-radius-sm); font: 400 15px "Sora", sans-serif; color: var(--scm-ink); background: var(--scm-paper-warm);
	transition: border-color .15s var(--scm-ease), box-shadow .15s var(--scm-ease);
}
.scm-form input:focus, .scm-form select:focus, .scm-form textarea:focus { outline: none; border-color: var(--scm-blue); box-shadow: 0 0 0 3px rgba(29,95,212,.14); background: #fff; }
.scm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scm-flags { border: 1px solid var(--scm-line); border-radius: var(--scm-radius-sm); padding: 14px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--scm-paper-warm); }
.scm-check { display: flex !important; align-items: center; gap: 9px; font-weight: 500 !important; margin-bottom: 0 !important; }
.scm-check input { width: auto !important; margin: 0 !important; accent-color: var(--scm-blue); }

/* ---------- Listing detail ---------- */
.scm-listing { padding: 16px 22px 40px; }
.scm-listing-head { margin: 18px 0 0; }
.scm-listing-head h1 { font-size: clamp(25px, 3.4vw, 36px); margin: 0 0 8px; }
.scm-listing-price { font: 700 30px "Sora", sans-serif; display: flex; align-items: center; gap: 13px; letter-spacing: -0.02em; }
.scm-listing-price .scm-deal { position: static; box-shadow: none; }
.scm-listing-sub { color: var(--scm-slate-2); margin: 6px 0 22px; font-size: 14px; }
.scm-listing-grid { display: grid; grid-template-columns: 1fr 366px; gap: 36px; }
.scm-gallery-main { border-radius: var(--scm-radius); width: 100%; aspect-ratio: 16/10; object-fit: cover; box-shadow: var(--scm-shadow); }
.scm-gallery-thumbs { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.scm-gallery-thumbs img { width: 94px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s var(--scm-ease); }
.scm-gallery-thumbs img:hover { border-color: var(--scm-blue); }
.scm-specs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--scm-line); border-radius: var(--scm-radius); overflow: hidden; background: var(--scm-paper); }
.scm-specs dt { padding: 12px 15px; background: var(--scm-paper-warm); font-size: 13px; color: var(--scm-slate); border-top: 1px solid var(--scm-line); }
.scm-specs dd { padding: 12px 15px; margin: 0; font-weight: 600; border-top: 1px solid var(--scm-line); }
.scm-specs dl > dt:first-of-type, .scm-specs dl > dd:nth-of-type(1) { border-top: none; }
.scm-specs, .scm-description, .scm-safety { margin-top: 30px; }
.scm-specs h2, .scm-description h2 { font-size: 21px; margin-bottom: 14px; }
.scm-safety { background: linear-gradient(180deg, #fffaf0, #fff6e8); border: 1px solid #f1dcae; border-radius: var(--scm-radius); padding: 18px 20px; }
.scm-safety h3 { margin: 0 0 9px; font-size: 16px; font-family: "Sora"; font-weight: 700; }
.scm-safety ul { margin: 0; padding-left: 18px; color: var(--scm-ink-soft); }
.scm-safety li { margin-bottom: 5px; }

.scm-contact-card, .scm-payment-card { background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius); padding: 22px; box-shadow: var(--scm-shadow); }
.scm-contact-card { position: sticky; top: 90px; }
.scm-payment-card { margin-top: 18px; }
.scm-contact-card h2 { font-size: 19px; margin: 12px 0 14px; }
.scm-report { text-align: center; margin: 12px 0 0; font-size: 13px; }
.scm-report a { color: var(--scm-slate-2); }
.scm-calc label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 11px; }
.scm-calc input, .scm-calc select { width: 100%; padding: 10px; border: 1px solid var(--scm-line); border-radius: 7px; margin-top: 5px; font: 400 14px "Sora"; }
.scm-calc-out { font: 700 24px "Sora"; color: var(--scm-blue-dark); margin: 10px 0 2px; letter-spacing: -0.02em; }
.scm-payment-card h3 { font-family: "Sora"; font-weight: 700; font-size: 16px; margin: 0 0 14px; }

.scm-similar { padding: 8px 0 48px; }

/* Sticky mobile contact bar */
.scm-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
	align-items: center; justify-content: space-between; gap: 12px;
	background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--scm-line);
	padding: 12px 18px; box-shadow: 0 -6px 20px rgba(10,22,38,.10);
}
.scm-sticky-price { font: 700 19px "Sora"; }
.scm-sticky-cta .scm-btn { flex: 0 0 auto; }

/* ---------- Dashboard / tables ---------- */
.scm-dash { padding: 30px 0; }
.scm-dash h2 { font-size: 28px; margin-bottom: 6px; }
.scm-dash h3 { font-family: "Sora"; font-weight: 700; font-size: 18px; margin: 26px 0 12px; }
.scm-table { width: 100%; border-collapse: collapse; background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius); overflow: hidden; }
.scm-table th, .scm-table td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--scm-line); font-size: 14px; }
.scm-table th { background: var(--scm-paper-warm); font-weight: 600; }
.scm-table tr:last-child td { border-bottom: none; }
.scm-msgs { list-style: none; padding: 0; }
.scm-msgs li { background: var(--scm-paper); border: 1px solid var(--scm-line); border-radius: var(--scm-radius-sm); padding: 15px; margin-bottom: 11px; }

/* ---------- Notices ---------- */
.scm-notice { padding: 14px 16px; border-radius: var(--scm-radius-sm); margin: 0 0 18px; font-size: 14px; border: 1px solid transparent; }
.scm-notice-info { background: var(--scm-blue-soft); color: var(--scm-blue-dark); border-color: #cfe0fb; }
.scm-notice-success { background: #e7f6ec; color: var(--scm-great); border-color: #b8e3c6; }
.scm-notice-error { background: #fdeceb; color: var(--scm-high); border-color: #f4c9c4; }

/* ---------- Pages ---------- */
.scm-page { padding: 30px 22px 56px; max-width: 760px; }
.scm-page-title { font-size: clamp(30px, 4vw, 40px); margin: 14px 0 20px; }
.scm-page-content { font-size: 16px; color: var(--scm-ink-soft); }
.scm-page-content h2 { font-size: 24px; margin: 28px 0 12px; }

/* ---------- Footer ---------- */
.scm-footer { background: var(--scm-ink); color: #aeb9c9; margin-top: 48px; }
.scm-footer-inner { display: flex; justify-content: space-between; gap: 32px; padding: 48px 22px 36px; flex-wrap: wrap; }
.scm-footer-brand { max-width: 320px; }
.scm-footer-brand p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; }
.scm-footer .scm-logo { color: #fff; }
.scm-footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 0; }
.scm-footer-menu a { color: #aeb9c9; font-size: 14px; }
.scm-footer-menu a:hover { color: #fff; }
.scm-footer-legal { border-top: 1px solid rgba(255,255,255,.09); padding: 18px 22px; color: #7a8699; }

/* ---------- Motion: staggered card reveal on load ---------- */
@media (prefers-reduced-motion: no-preference) {
	.scm-cards .scm-card { animation: scm-rise .5s var(--scm-ease) both; }
	.scm-cards .scm-card:nth-child(2) { animation-delay: .04s; }
	.scm-cards .scm-card:nth-child(3) { animation-delay: .08s; }
	.scm-cards .scm-card:nth-child(4) { animation-delay: .12s; }
	.scm-cards .scm-card:nth-child(n+5) { animation-delay: .16s; }
	@keyframes scm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.scm-why, .scm-browse-grid { grid-template-columns: 1fr; }
	.scm-listing-grid { grid-template-columns: 1fr; }
	.scm-contact-card { position: static; }
}
@media (max-width: 780px) {
	.scm-nav { display: none; }
	.scm-results { grid-template-columns: 1fr; }
	.scm-filter-toggle {
		display: block; width: 100%; padding: 13px; margin-bottom: 16px;
		background: var(--scm-blue); color: #fff; border: none; border-radius: var(--scm-radius-sm);
		font: 600 15px "Sora"; cursor: pointer;
	}
	.scm-filters { display: none; position: static; }
	.scm-filters.is-open { display: block; }
	.scm-header-cta .scm-btn-ghost { display: none; }
	.scm-sticky-cta { display: flex; }
	body.single-vehicle_listing { padding-bottom: 72px; }
}
@media (max-width: 480px) {
	.scm-grid-2, .scm-flags { grid-template-columns: 1fr; }
	.scm-hero { padding: 52px 0 44px; }
}