/* Jetour Mobile Menu — everything is scoped under #jmm so Bricks global
   styles can't leak in and nothing here leaks out. */

#jmm {
	--jmm-bg: #0B0D10;
	--jmm-surface: #15181D;
	--jmm-surface-2: #171A1F;
	--jmm-media: #1C2026;
	--jmm-line: #1E2228;
	--jmm-line-2: #2A2F37;
	--jmm-text: #EEF0F3;
	--jmm-text-2: #D5D9DF;
	--jmm-muted: #8B929D;
	--jmm-faint: #5B626D;
	--jmm-accent: #009CA5;      /* brand teal: icons, dots, links */
	--jmm-cta: #007F88;         /* darker teal: fills under white text (AA contrast) */
	--jmm-pill-bg: #0F3A3D;
	--jmm-pill-fg: #6FDDE2;
	--jmm-radius: 12px;
	--jmm-speed: 280ms;

	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}
#jmm[hidden] { display: none !important; }

/* ---- resets inside the menu ---- */
#jmm *, #jmm *::before, #jmm *::after { box-sizing: border-box; }
#jmm ul { list-style: none; margin: 0; padding: 0; }
#jmm h2, #jmm p { margin: 0; }
#jmm a { color: inherit; text-decoration: none; }
#jmm button {
	font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
	cursor: pointer; text-align: left; text-transform: none; letter-spacing: normal;
	box-shadow: none; min-height: 0; line-height: inherit;
}
#jmm a:focus-visible, #jmm button:focus-visible {
	outline: 2px solid var(--jmm-accent);
	outline-offset: 2px;
}
#jmm .jmm-ico { flex-shrink: 0; display: block; }

/* ---- backdrop + panel ---- */
#jmm .jmm-backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
	transition: opacity var(--jmm-speed) ease;
}
#jmm .jmm-panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(100%, 440px);
	background: var(--jmm-bg);
	color: var(--jmm-text);
	overflow: hidden;
	transform: translateX(100%);
	transition: transform var(--jmm-speed) cubic-bezier(.2, .8, .2, 1);
}
#jmm.is-open .jmm-backdrop { opacity: 1; }
#jmm.is-open .jmm-panel { transform: none; }

/* ---- views (main + models slide horizontally) ---- */
#jmm .jmm-view {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	padding-top: env(safe-area-inset-top, 0px);
	background: var(--jmm-bg);
	transition: transform var(--jmm-speed) cubic-bezier(.2, .8, .2, 1);
}
#jmm .jmm-view--models { transform: translateX(100%); }
#jmm.is-models .jmm-view--main { transform: translateX(-30%); }
#jmm.is-models .jmm-view--models { transform: none; }

#jmm .jmm-head {
	height: 64px; flex-shrink: 0;
	padding: 0 16px 0 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	border-bottom: 1px solid var(--jmm-line);
}
#jmm .jmm-view--models .jmm-head { padding-left: 16px; }
#jmm .jmm-logo { display: flex; align-items: center; height: 44px; }
#jmm .jmm-logo img { display: block; height: 22px; width: auto; max-width: 150px; }
#jmm .jmm-logo.is-white img { filter: brightness(0) invert(1); }
#jmm .jmm-logo span { font-weight: 800; font-size: 19px; letter-spacing: .2em; }
#jmm .jmm-title { flex-grow: 1; text-align: center; font-size: 17px; font-weight: 800; color: var(--jmm-text); }

#jmm .jmm-iconbtn {
	width: 44px; height: 44px; flex-shrink: 0;
	border-radius: var(--jmm-radius);
	background: var(--jmm-surface-2);
	color: var(--jmm-text);
	display: flex; align-items: center; justify-content: center;
}
#jmm .jmm-iconbtn--lg { width: 52px; height: 52px; }

#jmm .jmm-body {
	flex: 1 1 auto; min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
#jmm .jmm-foot {
	flex-shrink: 0;
	padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	display: flex; flex-direction: column; gap: 14px;
	border-top: 1px solid var(--jmm-line);
}

/* ---- model row ---- */
#jmm .jmm-models { padding: 20px 20px 0; }
#jmm .jmm-models-top { display: flex; align-items: center; justify-content: space-between; }
#jmm .jmm-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--jmm-muted); text-transform: none; }
#jmm .jmm-textbtn { font-size: 13px; font-weight: 700; color: var(--jmm-accent); padding: 12px 0 12px 12px; }
#jmm .jmm-row {
	display: flex; gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 20px;
	margin: 0 -20px; padding: 2px 20px 6px;
	scrollbar-width: none;
}
#jmm .jmm-row::-webkit-scrollbar { display: none; }
#jmm .jmm-row > li { flex: 0 0 150px; scroll-snap-align: start; }
#jmm .jmm-card {
	height: 100%;
	display: flex; flex-direction: column; gap: 4px;
	padding: 8px 8px 12px;
	background: var(--jmm-surface);
	border: 1px solid #22262D;
	border-radius: 14px;
}
/* Car photos are shot on a light studio grey (#F3F3F3, not transparent),
   so they sit on a matching light tile instead of a dark box. */
#jmm .jmm-media {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 437 / 228;
	background: #F3F3F3;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 6px;
}
#jmm .jmm-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
#jmm .jmm-media--sm { width: 112px; flex-shrink: 0; margin-bottom: 0; }

/* Model name logos are black on white: invert + screen shows them white
   on the dark card with no white box. */
#jmm .has-logo { display: flex; align-items: center; }
#jmm .has-logo img {
	display: block; width: auto; max-width: 100%;
	filter: invert(1);
	mix-blend-mode: screen;
}
#jmm .jmm-card-name { padding: 0 4px; min-height: 20px; font-size: 14px; font-weight: 700; color: var(--jmm-text); }
#jmm .jmm-card-name.has-logo img { height: 18px; }
#jmm .jmm-card-price { padding: 0 4px; font-size: 12px; color: var(--jmm-muted); }

/* drawn placeholder car (only when a model has no photo yet) */
#jmm .jmm-car-ph { width: 90%; height: auto; }
#jmm .jmm-car-ph .b { fill: #C9CED5; }
#jmm .jmm-car-ph .w { fill: #6B737E; }
#jmm .jmm-car-ph .t { fill: #FFFFFF; stroke: #3A404A; stroke-width: 2.5; }

/* ---- main nav list ---- */
#jmm .jmm-nav { padding: 14px 12px 0; }
#jmm .jmm-nav > ul { display: flex; flex-direction: column; gap: 2px; }
#jmm .jmm-item {
	width: 100%; min-height: 50px;
	padding: 0 14px;
	border-radius: var(--jmm-radius);
	display: flex; align-items: center; gap: 14px;
	color: var(--jmm-text-2);
	font-size: 16px; font-weight: 600;
}
#jmm .jmm-item > .jmm-ico:first-child { color: var(--jmm-muted); }
#jmm .jmm-item > .jmm-ico--chevron, #jmm .jmm-item > .jmm-ico--down { color: var(--jmm-faint); width: 18px; height: 18px; }
#jmm .jmm-item-label { flex-grow: 1; }
#jmm .jmm-item[aria-current="page"] { background: rgba(0, 156, 165, .13); color: #fff; font-weight: 700; }
#jmm .jmm-item[aria-current="page"] > .jmm-ico:first-child { color: var(--jmm-accent); }
#jmm .jmm-item[aria-expanded="true"] { color: #fff; }
#jmm .jmm-item[aria-expanded="true"] > .jmm-ico--down { transform: rotate(180deg); color: var(--jmm-text); }
#jmm .jmm-item > .jmm-ico--down { transition: transform 200ms ease; }
#jmm .jmm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jmm-accent); flex-shrink: 0; }
#jmm .jmm-badge {
	font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 20px;
	background: var(--jmm-pill-bg); color: var(--jmm-pill-fg);
}
#jmm .jmm-sub { margin: 0 0 6px 47px; border-left: 1px solid var(--jmm-line-2); }
#jmm .jmm-sub a {
	display: flex; align-items: center; min-height: 44px;
	padding-left: 14px;
	font-size: 14px; font-weight: 500; color: #A9AFB8;
}
#jmm .jmm-sub a[aria-current="page"] { color: var(--jmm-accent); }

/* ---- secondary links ---- */
#jmm .jmm-secondary {
	margin: 14px 20px 16px; padding-top: 8px;
	border-top: 1px solid var(--jmm-line);
	display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px;
}
#jmm .jmm-secondary a {
	display: flex; align-items: center; min-height: 44px;
	font-size: 14px; font-weight: 500; color: #A9AFB8;
}

/* ---- footer ---- */
#jmm .jmm-warranty { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--jmm-muted); }
#jmm .jmm-warranty .jmm-ico { color: var(--jmm-accent); width: 18px; height: 18px; }
#jmm .jmm-actions { display: flex; gap: 10px; }
#jmm .jmm-cta, #jmm .jmm-ghost {
	flex: 1 1 0; height: 52px;
	border-radius: var(--jmm-radius);
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; font-weight: 700; text-align: center;
}
#jmm .jmm-cta { background: var(--jmm-cta); color: #fff; }
#jmm .jmm-ghost { border: 1px solid var(--jmm-line-2); color: var(--jmm-text); }

/* ---- models panel ---- */
#jmm .jmm-chips {
	display: flex; gap: 8px;
	overflow-x: auto; scrollbar-width: none;
	padding: 16px 20px 4px;
}
#jmm .jmm-chips::-webkit-scrollbar { display: none; }
#jmm .jmm-chip {
	flex-shrink: 0; height: 36px; padding: 0 16px;
	border-radius: 20px;
	border: 1px solid var(--jmm-line-2);
	color: #C4C9D0; font-size: 13px; font-weight: 600;
}
#jmm .jmm-chip[aria-pressed="true"] { background: var(--jmm-cta); border-color: var(--jmm-cta); color: #fff; font-weight: 700; }

#jmm .jmm-list { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
#jmm .jmm-vrow {
	display: flex; flex-direction: column; gap: 10px;
	padding: 10px;
	background: var(--jmm-surface);
	border: 1px solid #22262D;
	border-radius: 16px;
}
#jmm .jmm-vrow[hidden] { display: none; }
#jmm .jmm-vrow-link { display: flex; align-items: center; gap: 14px; }
#jmm .jmm-vrow-link > .jmm-ico--chevron { color: var(--jmm-faint); width: 18px; height: 18px; }
#jmm .jmm-vrow-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#jmm .jmm-vrow-name { font-size: 16px; font-weight: 700; color: var(--jmm-text); }
#jmm .jmm-vrow-name.has-logo img { height: 20px; }
#jmm .jmm-vrow-price { font-size: 13px; color: var(--jmm-muted); }
#jmm .jmm-pills {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding-left: 126px; /* line up under the name, past the photo */
}
#jmm .jmm-pills-label { font-size: 12px; color: var(--jmm-muted); margin-right: 2px; }
#jmm .jmm-pill {
	display: inline-flex; align-items: center; min-height: 32px;
	padding: 0 12px; border-radius: 20px;
	font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	background: var(--jmm-pill-bg); color: var(--jmm-pill-fg);
}
#jmm .jmm-empty { padding: 8px 20px 20px; font-size: 14px; color: var(--jmm-muted); }

/* hover only where hover exists */
@media (hover: hover) {
	#jmm .jmm-item:hover, #jmm .jmm-secondary a:hover, #jmm .jmm-sub a:hover { color: #fff; }
	#jmm .jmm-card:hover, #jmm .jmm-vrow:hover { border-color: var(--jmm-line-2); }
	#jmm .jmm-pill:hover { background: #134A4E; }
}

@media (prefers-reduced-motion: reduce) {
	#jmm .jmm-panel, #jmm .jmm-view, #jmm .jmm-backdrop { transition: none; }
}

/* scroll lock while open */
html.jmm-lock, html.jmm-lock body { overflow: hidden !important; }