:root {
	--sixty: #222629;
	--thirty: #4A70FD;
	--ten: #ECB73C;
	--sixty-rgb: 34, 38, 41;
	--thirty-rgb: 74, 112, 253;
	--glass-bg-light: rgba(255, 255, 255, 0.8);
	--red: #EA4335;

	/* Global stacking-order scale. Only the layers that can appear at the
	   page level and might overlap each other belong here — a component's
	   own internal overlays (e.g. the gallery's controls sitting above its
	   own photo) stay as small local z-index values inside that component's
	   own stacking context and don't need a slot in this scale. */
	--z-dropdown: 100;
	--z-back-to-top: 500;
	--z-sticky-bar: 600;
	--z-header: 1111;
	--z-nav-backdrop: 1150;
	--z-nav-open: 1200;
	--z-context-menu: 2000;
	--z-modal: 9999;
}

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

body {
	margin: 0;
	font-family: 'Inter', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', "Helvetica Neue", sans-serif;
	background-color: var(--sixty);
	color: white;
}

h1 {
	text-transform: uppercase;
	font-size: 2.986rem;
	font-weight: 700;
}

h2 {
	text-transform: uppercase;
	font-size: 2.488rem;
	font-weight: 600;
}

h3 {
	text-transform: uppercase;
	font-size: 2.074rem;
	font-weight: 600;
}

h4 {
	text-transform: uppercase;
	font-size: 1.728rem;
}

h5 {
	text-transform: uppercase;
	font-size: 1.44rem;
	font-weight: 400;
}

h6 {
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: 400;
}

p {
	font-size: 1rem;
}

p.thick {
	font-weight: bold;
}

.small {
	font-size: 0.833rem;
}

.half-transparent {
	opacity: 0.5;
}

.text-uppercase {
	text-transform: uppercase;
}

.blue-text {
	color: var(--thirty)
}

.yellow-text {
	color: var(--ten)
}

.red-text {
 color: var(--red);
}

.shadow {
	text-shadow: 2px 2px 8px #000000;
}

.cross-out {
	text-decoration: line-through;
}

.section-title {
	text-transform: uppercase;
	font-size: 1rem;
	opacity: 0.5;
	margin: 0;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	margin-bottom: 12px;
	color: white;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.breadcrumb a {
	color: var(--thirty);
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb-sep {
	opacity: 0.85;
}

.breadcrumb-current {
	opacity: 1;
}

.btn {
	border: 0;
	border-radius: 20px;
	color: white;
	background-color: var(--thirty);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.btn--lg {
	padding: 0 40px;
	height: 44px;
	font-size: 16px;
	font-weight: bold;
}

.btn--sm {
	padding: 0 20px;
	height: 38px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.btn--outline {
	background-color: transparent;
	color: var(--thirty);
	border: 1.5px solid var(--thirty);
}

.btn--outline:hover {
	background-color: var(--thirty);
	color: white;
}

hr {
	opacity: 0.5;
	height: 2px;
	border: none;
	color: white;
	background-color: white;
}

.container {
	max-width: 1485px;
	margin: 0 auto;
	height: 100%;
}

.top-bar {
	display: flex;
	height: 32px;
	font-size: 12px;
	align-items: center;
}

.top-bar-icon {
	width: 16px;
	height: 16px;
	fill: white;
}

.top-bar-element {
	display: flex;
	align-items: center;
}

.top-bar-info > .top-bar-element {
	gap: 8px;
}

.top-bar-social-media {
	gap: 16px;
}

.top-bar-element>a {
	color: white;
	text-decoration: none;
}

.top-bar-info {
	display: flex;
	justify-content: space-between;
	width: 915px;
	margin: 0 auto;
}

.site-header {
	position: absolute;
	z-index: var(--z-header);
	color: white;
	height: 72px;
	width: 100%;
	top: 32px;
	left: 0;
	background-color: rgba(var(--sixty-rgb), 0.7);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.site-header > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header img {
	height: 40px;
	width: auto;
	display: block;
}

#main-header nav {
	text-transform: uppercase;
	display: flex;
	gap: 32px;
}

.nav-item {
	position: relative;
	transition: 0.3s ease;
}

.nav-item > a {
	color: rgb(255, 255, 255);
	text-decoration: none;
	font-weight: bold;
}

.nav-item::after {
	content: '';
	height: 2px;
	width: 100%;
	background-color: var(--thirty);
	position: absolute;
	left: 0;
	bottom: -8px;
	opacity: 0;
	transition: 0.3s ease;
}

.nav-item:hover::after {
	opacity: 1;
}

.selected-nav-item::after {
	opacity: 1;
}

#main-header.fixed {
	position: fixed;
	top: 0;
}

/* FOOTER STYLES */

footer {
	background-color: var(--sixty);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 56px 0 0;
	margin-top: 64px;
	color: rgba(255, 255, 255, 0.72);
}

.footer-four-sections {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 32px;
}

.footer-part {
	text-align: left;
	min-width: 0;
}

.footer-part > h5,
.footer-contact-us > h5 {
	margin: 0 0 18px;
	color: white;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.footer-part p {
	margin: 0;
	line-height: 1.65;
	font-size: 0.9rem;
}

.footer-part a {
	text-decoration: none;
	color: var(--thirty);
	transition: color 0.2s ease;
}

.footer-part a:hover {
	color: var(--ten);
}

.important-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 0.9rem;
}

.footer-contact-us {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 28px;
}

.footer-contact-us-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
}

.footer-contact-us-item-link,
.inline-contact-link {
	text-decoration: none;
	color: var(--thirty);
	transition: color 0.2s ease;
}

.footer-contact-us-item-link:hover,
.inline-contact-link:hover {
	color: var(--ten);
}

.footer-logo {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.footer-logo-img {
	width: 100%;
	max-width: 200px;
}

.footer-hr {
	margin: 48px 0 0;
	border: none;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.1);
}

.last-line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	color: rgba(255, 255, 255, 0.55);
}

.last-line > span > a {
	text-decoration: none;
}

.footer-social-media-icons {
	display: flex;
	align-items: center;
}

.footer-social-media-icons svg a {
	transition: opacity 0.2s ease;
}

.footer-social-media-icons svg a:hover {
	opacity: 0.75;
}

.nav-head {
	display: none;
}

.hamburger {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.mobile {
	display: none;
}

.messages {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: var(--z-modal);
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
	width: calc(100% - 40px);
	font-family: Arial, sans-serif;
}

.alert {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	color: #fff;
	background-color: var(--ten);
	padding: 14px 16px;
	border-radius: 12px;
	border-left: 4px solid rgba(255, 255, 255, 0.45);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.35s ease, transform 0.35s ease;
	animation: alert-slide-in 0.35s ease;
}

.alert-message {
	font-size: 0.9rem;
	line-height: 1.4;
}

.alert-message a {
	color: inherit;
	text-decoration: underline;
}

.alert-close {
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: 0.7;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.alert-close:hover {
	opacity: 1;
}

.alink {
	color: var(--thirty);
	text-decoration: underline;
}

.alert-success {
	background-color: #1f8a43;
	border-left-color: #7be3a1;
}

.alert-error {
	background-color: #c0392b;
	border-left-color: #f3a29a;
}

.alert-warning {
	background-color: #caa316;
	color: #241d02;
	border-left-color: #fff3c4;
}

.alert-info {
	background-color: #1a7f96;
	border-left-color: #a0e4f2;
}

.alert.hide {
	opacity: 0;
	transform: translateX(24px);
}

@keyframes alert-slide-in {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 560px) {
	.messages {
		left: 20px;
		right: 20px;
		max-width: none;
		width: auto;
	}
}

@media (max-width: 1600px) {
  .container {
    max-width: 1300px;
  }
}

@media (max-width: 900px) {
	.footer-four-sections {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-logo {
		justify-content: flex-start;
	}

	.footer-logo-img {
		max-width: 140px;
	}
}

@media (max-width: 800px) {
	.container {
		max-width: 600px;
		padding: 0 16px;
		box-sizing: border-box;
	}
}

@media (max-width: 1100px) {
	.mobile {
		display: block;
	}

	.hamburger {
		display: block;
	}

	#main-header {
		top: 0;
	}

	.nav-backdrop {
		content: '';
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.55);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
		z-index: var(--z-nav-backdrop);
	}

	.nav-backdrop.show {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease;
	}

	body.nav-open {
		overflow: hidden;
	}

  #main-header nav {
    display: flex;
    flex-direction: column;
    background-color: var(--sixty);
    position: fixed;
    /* The full height of the screen, starting at the very top. It used to
       start at 72px to sit under the header, but the header is 72px tall
       only once the page has scrolled - above that it sits lower - so the
       drawer's top edge cut across it, leaving a strip of dimmed header
       and a live-looking hamburger above a panel that was meant to have
       replaced them. Covering the lot means there is nothing to line up
       with and nothing left showing that still looks tappable. */
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 320px;
    max-width: 86vw;
    box-sizing: border-box;
    padding: 0 20px 24px;
    gap: 2px;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    z-index: var(--z-nav-open);
  }

	.nav-item {
		padding: 0;
		border-radius: 10px;
		transition: background-color 0.2s ease;
	}

	.nav-item:active,
	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.08);
	}

	.nav-item::after {
		display: none;
	}

	.selected-nav-item {
		background-color: rgba(255, 255, 255, 0.08);
	}

	/* The accent inside the rounded corner rather than a border outside
	   it. A 3px border-left on a border-radius box leaves a straight blue
	   edge poking out of a curve at each end, which was the one thing on
	   the panel that looked like a mistake. */
	.selected-nav-item > a::before {
		content: '';
		width: 3px;
		height: 18px;
		border-radius: 2px;
		background-color: var(--thirty);
		margin-right: 11px;
		flex-shrink: 0;
	}

	.nav-item > a {
		display: flex;
		align-items: center;
		/* The whole row is the link, so the tap target is the row and not
		   just the few characters of the word. */
		min-height: 48px;
		padding: 0 14px;
		border-radius: 10px;
		user-select: none;
	}

	.selected-nav-item > a {
		padding-left: 8px;
	}

	.nav-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 72px;
		flex-shrink: 0;
		/* Out to the drawer's edges, so the rule under it reads as the
		   bottom of a header rather than a line floating in a margin. */
		margin: 0 -20px 10px;
		padding: 0 20px 0 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.nav-head-logo img {
		height: 26px;
		width: auto;
		display: block;
		opacity: 0.85;
	}

	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 44px, the smallest thing a thumb can be asked to hit, and sat
		   over on the right where the hamburger that opened it was - so
		   open and close are the same place rather than two. */
		width: 44px;
		height: 44px;
		margin-right: -10px;
		border: 0;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.08);
		color: white;
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
		flex-shrink: 0;
	}

	.nav-close:hover {
		background-color: rgba(255, 255, 255, 0.16);
	}

  #main-header nav.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease;
  }

	.mobile-top-bar-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
		/* Pushed to the foot of the drawer. The links above are a list and
		   stop where they stop; the shop's details belong at the bottom of
		   the panel, not trailing the eighth link. */
		margin-top: auto;
		padding: 16px 14px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		font-size: 0.78rem;
		line-height: 1.45;
		color: rgba(255, 255, 255, 0.72);
	}

	.mobile-top-bar-info span {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	.mobile-top-bar-info .top-bar-icon {
		margin-top: 3px;
		flex-shrink: 0;
		opacity: 0.8;
	}

	.mobile-top-bar-info a {
		text-decoration: none;
		color: rgba(255, 255, 255, 0.85);
	}

	.mobile-top-bar-info .top-bar-social-media {
		flex-direction: row;
		margin-top: 4px;
	}

	.top-bar {
		display: none;
	}
}

@media (max-width: 560px) {
	.container {
		max-width: 360px;
	}

	footer {
		padding-top: 40px;
	}

	.footer-four-sections {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.footer-logo {
		justify-content: flex-start;
	}

	.last-line {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

.listing-context-menu {
	position: fixed;
	z-index: var(--z-context-menu);
	min-width: 190px;
	background-color: var(--sixty);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	display: none;
}

.listing-context-menu.visible {
	display: block;
}

.listing-context-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	color: white;
	font-size: 0.9rem;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
}

.listing-context-menu-item:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

.listing-context-menu-sep {
	height: 1px;
	background-color: rgba(255, 255, 255, 0.12);
	margin: 4px 0;
}

.back-to-top-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background-color: var(--thirty);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.15s ease;
	z-index: var(--z-back-to-top);
}

.back-to-top-btn.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top-btn:hover {
	background-color: var(--ten);
}

@media print {
	.back-to-top-btn {
		display: none;
	}
}

/* ==========================================================================
   Shared / reusable components
   Used by more than one page-specific stylesheet — kept here once instead
   of duplicated per file.
   ========================================================================== */

/* Empty-state CTA shown in place of the listings grid on any inventory
   category page (or the main inventory page's search/filters) when nothing
   matches — points people at the two ways to still get what they want. */
.no-results-cta {
	grid-column: 1 / -1;
	text-align: center;
	padding: 64px 24px;
	max-width: 560px;
	margin: 0 auto;
}

.no-results-cta h3 {
	margin: 0 0 8px;
}

.no-results-cta p {
	opacity: 0.7;
	margin: 0 0 28px;
}

.no-results-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* Color swatch dots, used by the inventory filters (exterior/interior color
   pickers) and the car detail page's spec list. */
.color-swatch {
	display: inline-block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
}

.color-swatch--white { background-color: #ffffff; }
.color-swatch--black { background-color: #1a1a1a; }
.color-swatch--gray { background-color: #808080; }
.color-swatch--silver { background-color: #c0c0c0; }
.color-swatch--red { background-color: #b3261e; }
.color-swatch--blue { background-color: #2952a3; }
.color-swatch--green { background-color: #2e6b3e; }
.color-swatch--brown { background-color: #6b4423; }
.color-swatch--beige { background-color: #d9c9a3; }
.color-swatch--orange { background-color: #d2691e; }
.color-swatch--yellow { background-color: #e8c547; }
.color-swatch--gold { background-color: #cfa640; }

.color-swatch--other {
	background-image: conic-gradient(#999 0deg 90deg, #666 90deg 180deg, #999 180deg 270deg, #666 270deg 360deg);
}

/* Vehicle status color coding. Used both as a full badge (inventory grid
   cards: .listing-status-badge--{status}) and as a plain background on the
   car detail page's status pill (.bg-{status}) — two different class
   schemes for the same four colors, kept in sync here in one place. */
.listing-status-badge--available,
.bg-av {
	background-color: var(--thirty);
}

.listing-status-badge--pending,
.bg-pending {
	background-color: var(--ten);
	color: var(--sixty);
}

.listing-status-badge--coming_soon,
.bg-coming-soon {
	background-color: var(--thirty);
}

.listing-status-badge--sold,
.bg-sold {
	background-color: var(--red);
}

/* Modal shell — overlay scrim + dialog card + close button, shared by every
   modal on the site (currently the add-listing MPG lookup modal and the
   services page's add/edit-service modal). The scrim is always the same dark
   dim regardless of the dialog's own theme; apply a .modal-dialog--dark or
   .modal-dialog--light modifier (and the matching .modal-close-btn--dark or
   --light) depending on the page it's used on. */
.modal-overlay {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	background-color: rgba(var(--sixty-rgb), 0.8);
	width: 100%;
	height: 100%;
	z-index: var(--z-modal);
}

.modal-overlay.hidden {
	display: none;
}

.modal-dialog {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 24px 24px;
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
}

.modal-dialog--dark {
	background-color: var(--sixty);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: white;
}

.modal-dialog--light {
	background-color: white;
	color: var(--sixty);
}

.modal-dialog > h3 {
	margin: 0 0 4px;
	text-align: center;
	text-transform: none;
	font-size: 1.3rem;
}

.modal-close-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: 0.2s ease;
}

.modal-close-btn--dark {
	background-color: rgba(255, 255, 255, 0.08);
	color: white;
}

.modal-close-btn--dark:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

.modal-close-btn--light {
	background-color: rgba(var(--sixty-rgb), 0.08);
	color: var(--sixty);
}

.modal-close-btn--light:hover {
	background-color: rgba(var(--sixty-rgb), 0.16);
}

/* "Glass card" — the translucent dark panel with a hairline border used all
   over the site (blog cards, compare cards, service cards, price cards,
   review cards, ...). Default radius is 20px for a clickable card;
   .glass-card--compact drops it to 16px for denser panels like a service
   tile. .glass-card--lift adds the hover-lift-and-brighten-border behavior
   shared by blog/compare cards specifically (components with their own
   accent-colored hover, like category chips or service cards, don't use
   this modifier and define their own :hover instead). */
.glass-card {
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
}

.glass-card--compact {
	border-radius: 16px;
}

.glass-card--lift {
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.glass-card--lift:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.3);
}