/**
 * EXVIN — site shell (D-070, owner 2026-10-05): header, phone menu, visitor home, signed-in home, footer.
 *
 * Loaded after exvin.css and exvin-motion.css and replaces their header/footer rules. Logical properties only (RTL
 * safe). Identity guide v01 (2026-10-06): emerald #009B77, dark emerald #0B3B30, gold #D4AF37 (details; dark text on gold), panels #EEF7F4,
 * borders #D3EAE3; Alyamama (Arabic/Urdu) and Google Sans (English) from theme.json.
 * No scroll-triggered animation: everything is drawn where it is, at once.
 */

:root {
	--x-green: var(--wp--preset--color--emerald, #009b77);
	--x-green-dark: var(--wp--preset--color--emerald-dark, #007A5E);
	--x-deep: var(--wp--preset--color--emerald-deep, #0b3b30);
	--x-gold: var(--wp--preset--color--accent, #d4af37);
	--x-panel: var(--wp--preset--color--surface-alt, #eef7f4);
	--x-line: var(--wp--preset--color--border, #d3eae3);
	--x-muted: var(--wp--preset--color--ink-muted, #2f6b5c);
	--x-radius: 16px;
	--x-shadow: 0 1px 2px rgba(11, 59, 48, 0.06), 0 8px 24px -12px rgba(11, 59, 48, 0.18);
	--x-gutter: 16px;
	--x-max: 1240px;
}

@media (min-width: 768px) {
	:root {
		--x-gutter: 24px;
	}
}

.xl-wrap {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	margin-inline: auto;
	padding-inline: var(--x-gutter);
}

/* --------------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------------- */

html.exvin-scrolled .exvin-header.exvin-header,
.exvin-header.exvin-header {
	padding: 0 !important;
	background: #fff;
	border-block-end: 1px solid var(--x-line);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	transition: box-shadow 0.2s;
}

html.exvin-scrolled .exvin-header.exvin-header {
	box-shadow: 0 6px 18px -14px rgba(11, 59, 48, 0.45);
}

.xh {
	color: var(--x-deep);
}

.xh__bar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	min-block-size: 60px;
	margin-inline: auto;
	padding-inline: calc(var(--x-gutter) - 8px) var(--x-gutter);
}

.xh__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.xh__icon:hover {
	background: var(--x-panel);
}

.xh__logo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	line-height: 0;
}

.xh__logo img {
	inline-size: auto;
	block-size: 24px;
}

.xh__tools {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
}

.xh__lang,
.xh__account,
.xh__cart,
.xh__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	padding-inline: 10px;
	border-radius: 12px;
	color: var(--x-deep);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.xh__lang:hover,
.xh__account:hover,
.xh__cart:hover {
	background: var(--x-panel);
	color: var(--x-green-dark);
}

.xh__account[aria-current="page"] {
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.xh__cart {
	position: relative;
	min-inline-size: 44px;
	justify-content: center;
	padding-inline: 8px;
}

.xh__count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--x-gold);
	color: var(--x-deep);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.xh__count[hidden] {
	display: none;
}

/* D-120: the cart counts (header and phone bottom bar) in the brand green with white figures (4.7:1) — yellow is only
   the logo's X (D-100) — and a short pop when a part is added (exvin-fx.js), none with reduced motion. */
.xh__count[data-exvin-cart-count] {
	background: #03806B;
	color: #fff;
}

.xh__count.is-pop {
	animation: xh-count-pop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes xh-count-pop {
	0% { transform: scale(0.6); }
	45% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.xh__count.is-pop {
		animation: none;
	}
}

.xh__cta {
	padding-inline: 16px;
	border-radius: 999px;
	background: var(--x-green-700);
	color: #fff;
}

.xh__cta:hover {
	background: var(--x-deep);
	color: #fff;
}

/* Product search (wide screens in the bar; phones in their own row). */
.xh-search {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-inline-size: 0;
	margin: 0;
}

.xh-search input[type="search"] {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	padding: 0 52px 0 16px;
	border: 1.5px solid var(--x-line);
	border-radius: 999px;
	background: var(--x-panel);
	color: var(--x-deep);
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

[dir="rtl"] .xh-search input[type="search"] {
	padding: 0 16px 0 52px;
}

.xh-search input[type="search"]:focus {
	border-color: var(--x-green);
	background: #fff;
	outline: 3px solid rgba(0, 155, 119, 0.18);
	outline-offset: 0;
}

.xh-search button {
	position: absolute;
	inset-block: 4px;
	inset-inline-end: 4px;
	display: grid;
	place-items: center;
	inline-size: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--x-green-700);
	color: #fff;
	cursor: pointer;
}

.xh-search button:hover {
	background: var(--x-deep);
}

.xh__bar > .xh-search {
	display: none;
}

.xh__search-row {
	box-sizing: border-box;
	padding: 0 var(--x-gutter) 10px;
}

/* Main links row (wide screens). */
.xh__nav {
	display: none;
}

.xh__nav ul {
	box-sizing: border-box;
	display: flex;
	gap: 4px;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	margin: 0 auto;
	padding: 0 calc(var(--x-gutter) - 10px);
	list-style: none;
}

.xh__nav a {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-inline: 10px;
	border-block-end: 2px solid transparent;
	color: var(--x-deep);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
}

.xh__nav a:hover {
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.xh__nav a[aria-current="page"] {
	border-block-end-color: var(--x-green);
	color: var(--wp--preset--color--emerald-dark, #007A5E);
	font-weight: 700;
}

/* Phones: account and cart live in the bottom bar; the waitlist button is on the page. */
@media (max-width: 781px) {
	.xh__account,
	.xh__cart,
	.xh__cta {
		display: none;
	}

	.xh__lang {
		padding-inline: 8px;
		font-size: 0.85rem;
	}
}

@media (min-width: 782px) {
	.xh__logo img {
		block-size: 28px;
	}

	.xh__bar {
		gap: 16px;
		min-block-size: 68px;
	}

	.xh__account-text {
		max-inline-size: 11rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (min-width: 1024px) {
	.xh__menu-btn,
	.xh__search-row {
		display: none;
	}

	.xh__bar {
		padding-inline: var(--x-gutter);
	}

	.xh__bar > .xh-search {
		display: flex;
		max-inline-size: 640px;
		margin-inline: 24px 8px;
	}

	.xh__nav {
		display: block;
		border-block-start: 1px solid var(--x-line);
	}
}

@media (max-width: 1023px) {
	.xh--home .xh__search-row {
		display: none;
	}
}

/* Old header pieces that no longer exist (kept harmless if a cached page still has them). */
.exvin-header__search,
.exvin-progress,
.exvin-to-top {
	display: none !important;
}

/* Phone menu: native popover, slides from the inline start. */
.xh-menu {
	box-sizing: border-box;
	position: fixed;
	inset: 0 auto 0 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	inline-size: min(88vw, 360px);
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 12px 16px 24px;
	overflow-y: auto;
	border: 0;
	background: #fff;
	color: var(--x-deep);
	box-shadow: 0 0 40px rgba(11, 59, 48, 0.25);
}

[dir="rtl"] .xh-menu {
	inset: 0 0 0 auto;
}

.xh-menu::backdrop {
	background: rgba(5, 38, 30, 0.45);
}

.xh-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 8px;
}

.xh-menu__head img {
	inline-size: 120px;
	block-size: auto;
}

.xh-menu__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xh-menu__links a {
	display: flex;
	align-items: center;
	min-block-size: 48px;
	border-block-end: 1px solid var(--x-line);
	color: var(--x-deep);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
}

.xh-menu__links a[aria-current="page"] {
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.xh-menu__account {
	margin-block: 16px;
}

.xh-menu__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	border-radius: 12px;
	background: var(--x-green-700);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.xh-menu__label {
	margin: 16px 0 6px;
	color: var(--x-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.xh-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.xh-langs a {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-inline: 14px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	color: var(--x-deep);
	font-weight: 600;
	text-decoration: none;
}

.xh-langs a[aria-current="true"] {
	border-color: var(--x-green);
	background: var(--x-green-700);
	color: #fff;
}

.xh-menu__support {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 20px;
	color: var(--x-muted);
	font-size: 0.9rem;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Shared home pieces
 * ----------------------------------------------------------------------- */

.xl-head {
	margin-block-end: 16px;
}

.xl-head h2 {
	margin: 0;
	color: var(--x-deep);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.25;
}

.xl-head p {
	margin: 6px 0 0;
	color: var(--x-muted);
	font-size: 1rem;
}

.xl-section {
	padding-block: clamp(40px, 6vw, 72px);
}

.xl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 20px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

[dir="rtl"] .xl-btn svg,
[dir="rtl"] .xd-card__link svg {
	transform: scaleX(-1);
}

.xl-btn--light {
	background: #fff;
	color: var(--x-deep);
}

.xl-btn--light:hover {
	background: var(--x-panel);
	color: var(--x-deep);
}

/* --------------------------------------------------------------------------
 * Visitor home: hero
 * ----------------------------------------------------------------------- */

/* Identity guide v01 (2026-10-06): white main background; the search keeps its own dark emerald card. */
.xl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #fff;
	color: var(--x-deep);
	border-block-end: 1px solid var(--x-line);
}

.xl-hero__inner {
	box-sizing: border-box;
	display: grid;
	gap: 20px;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	margin-inline: auto;
	padding: 28px var(--x-gutter) 28px;
}

.xl-pill {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--x-gold);
	color: var(--x-deep);
	font-size: 0.8rem;
	font-weight: 700;
}

.xl-hero__title {
	margin: 0;
	color: var(--x-deep);
	font-size: clamp(1.9rem, 1.3rem + 3vw, 3.4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

[dir="rtl"] .xl-hero__title {
	letter-spacing: 0;
	line-height: 1.3;
}

.xl-hero__lead {
	max-inline-size: 38em;
	margin: 12px 0 0;
	color: var(--x-muted);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	line-height: 1.6;
}

.xl-hero__points {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xl-hero__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--x-deep);
	font-weight: 600;
}

.xl-hero__points svg {
	flex: 0 0 auto;
	color: var(--x-green);
}

@media (min-width: 1024px) {
	.xl-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-areas:
			"text search"
			"points search";
		column-gap: 56px;
		row-gap: 24px;
		align-items: center;
		padding-block: 64px;
	}

	.xl-hero__text {
		grid-area: text;
		align-self: end;
	}

	.xl-hero__search {
		grid-area: search;
	}

	.xl-hero__points {
		grid-area: points;
		align-self: start;
	}
}

/* White search card on both homes (owner, 2026-10-06): white with the emerald-tint border and a soft flat shadow. */
.xl-hero .exvin-home-search__form {
	border: 1px solid var(--x-line);
	background: #fff;
	box-shadow: var(--x-shadow);
}

.xl-hero .exvin-home-search__title {
	color: var(--x-deep);
	font-size: 1.1rem;
}

/* ---- The VIN answer inside the white home search card --------------------------------------------------------
   exvin-motion.css styles the VIN answer for the dark Catalogue card (white text, some with !important). Inside the
   home search it sits on white, so every line is restyled here for a light background: ink #0B3B30 (12.5:1 on white),
   ink-muted #2F6B5C (6.2:1 on white, 5.7:1 on the #EEF7F4 rows), emerald-dark #007A5E (5.3:1 on white, 4.7:1 on
   #E5F5F1), gold #D4AF37 only as a border or a fill behind ink text (5.9:1), and errors in #ED1117 on white, semibold,
   with an error icon. VIN codes stay left-to-right (set in the markup). */
.exvin-home-search .exvin-vin__type {
	background: var(--wp--preset--color--mint-100, #e5f5f1);
	color: var(--wp--preset--color--emerald-dark, #007a5e);
}

/* The "VIN ✓" tag sits centred in the row as a small tag rather than a full-height block. */
.exvin-home-search__row .exvin-vin__type {
	align-self: center;
}

.exvin-home-search .exvin-vin__count {
	color: var(--x-muted, #2f6b5c);
}

.exvin-home-search .exvin-vin__count.is-full {
	color: var(--wp--preset--color--emerald-dark, #007a5e);
	font-weight: 600;
}

.exvin-home-search .exvin-vin__count.is-over {
	color: #ed1117;
	font-weight: 700;
}

.exvin-home-search .exvin-tool:focus-visible,
.exvin-home-search .exvin-tool:focus-within {
	outline-color: var(--wp--preset--color--emerald-dark, #007a5e);
}

.exvin-home-search .exvin-vin__result {
	color: var(--x-deep);
}

.exvin-home-search .exvin-vin__result p,
.exvin-home-search .exvin-vin__unverified p,
.exvin-home-search .exvin-vin__unverified .exvin-vin__unverified-title,
.exvin-home-search .exvin-vin__result .exvin-vin__ai-title {
	color: var(--x-deep) !important;
}

.exvin-home-search .exvin-vin__code {
	color: var(--x-deep) !important;
	font-weight: 600;
}

/* The hint under the box is also .exvin-vin__hint, which exvin-motion.css colours white with !important. */
.exvin-home-search .exvin-home-search__hint,
.exvin-home-search .exvin-vin__result :is(.exvin-vin__note, .exvin-vin__hint, .exvin-vin__kind, .exvin-vin__source) {
	color: var(--x-muted, #2f6b5c) !important;
}

/* The wrong character in a mistyped VIN: outlined in the error red (bold, not colour alone). */
.exvin-home-search .exvin-vin__code mark {
	padding: 0 0.12em;
	border-radius: 4px;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px #ed1117;
	color: #ed1117;
	font-weight: 700;
}

.exvin-home-search .exvin-vin__result.is-error:not(:empty) {
	border-color: var(--x-line);
	border-inline-start: 4px solid #ed1117;
	background: #fff;
}

/* Error lines: red #ED1117 on white, semibold, with the error icon. The line that only holds "Try again" stays plain. */
.exvin-home-search .exvin-vin__result.is-error > p:not(.exvin-vin__code):not(:has(> .exvin-vin__retry:only-child)),
.exvin-home-search .exvin-vin__result p.exvin-vin__fail {
	color: #ed1117 !important;
	font-weight: 600;
}

.exvin-home-search .exvin-vin__result.is-error > p:not(.exvin-vin__code):not(:has(> .exvin-vin__retry:only-child))::before,
.exvin-home-search .exvin-vin__fail::before {
	content: "";
	display: inline-block;
	inline-size: 1.05em;
	block-size: 1.05em;
	margin-inline-end: 0.4em;
	vertical-align: -0.18em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exvin-home-search .exvin-vin__status::before {
	background: var(--wp--preset--color--mint-100, #e5f5f1);
	color: var(--wp--preset--color--emerald-dark, #007a5e);
}

.exvin-home-search .exvin-vin__status.is-bad::before {
	background: var(--wp--preset--color--accent, #d4af37);
	color: var(--x-deep);
}

/* "Could not verify": a white note with a gold edge (gold as a detail; the text is ink). */
.exvin-home-search .exvin-vin__unverified,
.exvin-home-search .exvin-vin__warn {
	border: 1px solid var(--x-line);
	border-inline-start: 4px solid var(--wp--preset--color--accent, #d4af37);
	background: #fff;
	color: var(--x-deep) !important;
}

.exvin-home-search .exvin-vin__found {
	border-color: var(--wp--preset--color--mint-300, #bfe6dd);
	background: var(--wp--preset--color--mint-100, #e5f5f1);
}

.exvin-home-search .exvin-vin__result .exvin-vin__found-title {
	color: var(--wp--preset--color--emerald-dark, #007a5e) !important;
}

.exvin-home-search .exvin-vin__ai {
	border-color: var(--wp--preset--color--accent, #d4af37);
	background: #fff;
}

.exvin-home-search :is(.exvin-vin__row, .exvin-vin__plain li, .exvin-vin__refs li) {
	background: var(--x-panel, #eef7f4);
}

.exvin-home-search .exvin-vin__row dt,
.exvin-home-search .exvin-vin__row small,
.exvin-home-search .exvin-vin__refs small,
.exvin-home-search .exvin-vin__refs em,
.exvin-home-search .exvin-vin__products span,
.exvin-home-search .exvin-vin__recent-label {
	color: var(--x-muted, #2f6b5c);
}

.exvin-home-search .exvin-vin__level {
	background: var(--wp--preset--color--mint-100, #e5f5f1);
	color: var(--x-deep);
}

.exvin-home-search .exvin-vin__level.is-high {
	background: var(--wp--preset--color--mint-300, #bfe6dd);
}

.exvin-home-search .exvin-vin__products a,
.exvin-home-search .exvin-vin__products div {
	border: 1px solid var(--x-line);
	background: var(--x-panel, #eef7f4);
	color: var(--x-deep) !important;
}

.exvin-home-search .exvin-vin__products a:hover {
	border-color: var(--wp--preset--color--emerald, #009b77);
	background: var(--wp--preset--color--mint-100, #e5f5f1);
}

.exvin-home-search .exvin-vin__products em {
	color: var(--wp--preset--color--emerald-dark, #007a5e);
}

.exvin-home-search .exvin-vin__noimg {
	background: #fff;
}

.exvin-home-search .exvin-vin__chip {
	border-color: var(--x-line);
	background: #fff;
	color: var(--x-deep);
}

.exvin-home-search .exvin-vin__chip:hover {
	border-color: var(--wp--preset--color--emerald, #009b77);
}

.exvin-home-search .exvin-vin__chip:focus-visible,
.exvin-home-search .exvin-vin__retry:focus-visible {
	outline-color: var(--wp--preset--color--emerald-dark, #007a5e);
}

.xd-search .exvin-home-search__form {
	box-shadow: var(--x-shadow);
}

.xd-search .exvin-home-search__title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Sections and products (both homes)
 * ----------------------------------------------------------------------- */

.xl-store.exvin-home {
	padding-block: clamp(28px, 4vw, 56px) clamp(8px, 2vw, 24px);
}

.xl-store .exvin-home-store {
	box-sizing: border-box;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	margin-inline: auto;
	padding-inline: var(--x-gutter);
}

.xl-store .exvin-home-store__sections ul {
	gap: 10px;
	margin-block-start: 0;
}

/* One row of four, the same size: photo on top, label under it (all widths). */
.exvin-home-store__sections a,
.xl-store .exvin-home-store__sections a {
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
	padding: 6px 6px 10px;
	border-radius: var(--x-radius);
	background: #fff;
	font-size: clamp(0.78rem, 0.7rem + 0.35vw, 1.05rem);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.exvin-home-store__sections a:hover {
	box-shadow: var(--x-shadow);
}

.exvin-home-store__sections .exvin-home-store__photo {
	inline-size: 100%;
	max-inline-size: 220px;
	margin-inline: auto;
	border-radius: 12px;
	background: var(--x-panel);
}

/* A tile label wraps only at a space, never inside a word (D-091 text size review: "Accessories", «الإكسسوارات»). */
.exvin-home-store__sections a > span {
	overflow-wrap: normal;
	word-break: normal;
}

@media (min-width: 782px) {
	.exvin-home-store__sections a,
	.xl-store .exvin-home-store__sections a {
		padding: 10px 10px 14px;
	}
}

.xl-store .exvin-home-store__list {
	margin-block-start: clamp(28px, 4vw, 48px);
}

.exvin-home-store__head h2 {
	color: var(--x-deep);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
	font-weight: 700;
}

.exvin-home-store__card {
	transition: border-color 0.15s, box-shadow 0.15s;
}

.exvin-home-store__card:hover {
	border-color: var(--x-green);
	box-shadow: var(--x-shadow);
}

/* A product without a photo: a calm box icon instead of an empty grey square. */
.exvin-home-store__noimg {
	display: block;
	inline-size: 40%;
	aspect-ratio: 1;
	background: currentColor;
	color: #ccebe4;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1024px) {
	.xl-store .exvin-home-store__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
 * Visitor home: why EXVIN, partners
 * ----------------------------------------------------------------------- */

.xl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xl-card {
	padding: 20px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	background: #fff;
}

.xl-card h3 {
	margin: 12px 0 6px;
	color: var(--x-deep);
	font-size: 1.1rem;
	font-weight: 700;
}

.xl-card p {
	margin: 0;
	color: var(--x-muted);
	line-height: 1.6;
}

.xl-card__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 14px;
	background: rgba(0, 155, 119, 0.1);
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.xl-why {
	background: var(--x-panel);
}

.xl-partners__grid {
	display: grid;
	gap: 12px;
}

@media (min-width: 782px) {
	.xl-partners__grid {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

.xl-partner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(20px, 3vw, 36px);
	border-radius: 20px;
	background: var(--x-deep);
	color: #fff;
}

.xl-partner--suppliers {
	background: var(--x-green-700); /* small white text: 5.32:1 */
}

.xl-partner h2 {
	margin: 4px 0 0;
	color: #fff;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 700;
}

.xl-partner p {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.6;
}

.xl-partner .xl-card__icon {
	background: rgba(255, 255, 255, 0.12);
	color: var(--x-gold);
}

/* --------------------------------------------------------------------------
 * Signed-in home
 * ----------------------------------------------------------------------- */

.xd {
	padding-block: 20px 8px;
	background: #fff;
}

.xd-top {
	display: grid;
	gap: 14px;
}

.xd-hello h1 {
	margin: 0;
	color: var(--x-deep);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.25;
}

.xd-hello p {
	margin: 4px 0 0;
	color: var(--x-muted);
}

@media (min-width: 1024px) {
	.xd {
		padding-block-start: 36px;
	}

	.xd-top {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: center;
		gap: 40px;
	}
}

.xd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.xd-card {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 12px;
	row-gap: 2px;
	align-content: start;
	padding: 14px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	background: #fff;
}

.xd-card > :not(.xd-card__icon) {
	grid-column: 2;
}

.xd-card__icon {
	grid-row: 1 / span 4;
}

@media (min-width: 782px) {
	.xd-card {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 16px;
	}
}

.xd-card.is-empty {
	border-style: dashed;
}

.xd-card__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	margin-block-end: 4px;
	border-radius: 12px;
	background: rgba(0, 155, 119, 0.1);
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.xd-card__kicker {
	color: var(--x-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

.xd-card__title {
	color: var(--x-deep);
	font-size: 1.05rem;
	line-height: 1.4;
}

.xd-card__text {
	color: var(--x-muted);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}

.xd-card__link {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 6px;
	margin-block-start: auto;
	padding-block-start: 8px;
	color: var(--wp--preset--color--emerald-dark, #007A5E);
	font-weight: 700;
	text-decoration: none;
}

.xd-card__link:hover {
	color: var(--x-green-dark);
	text-decoration: underline;
}

.xd-quick ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.xd-quick a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding-inline: 14px;
	border: 1px solid var(--x-line);
	border-radius: 999px;
	background: #fff;
	color: var(--x-deep);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.xd-quick a:hover {
	border-color: var(--x-green);
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.xd-quick svg {
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

/* --------------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

.exvin-footer.exvin-footer {
	padding: 0 !important;
}

.xf {
	color: var(--x-muted);
}

.xf__top {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	margin-inline: auto;
	padding: 40px var(--x-gutter) 28px;
}

.xf__brand {
	grid-column: 1 / -1;
}

.xf__contact {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.xf__top {
		grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) 1.3fr;
		padding-block: 56px 36px;
	}

	.xf__brand,
	.xf__contact {
		grid-column: auto;
	}
}

.xf__icon {
	display: block;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
}

.xf__tagline {
	margin: 12px 0 4px;
	color: var(--x-deep);
	font-size: 1.15rem;
	font-weight: 700;
}

.xf__intro {
	margin: 0 0 14px;
	line-height: 1.6;
}

.xf .xh-langs a {
	min-block-size: 36px;
	border-color: var(--x-line);
	color: var(--x-deep);
	font-size: 0.9rem;
}

.xf .xh-langs a[aria-current="true"] {
	border-color: var(--x-gold);
	background: var(--x-gold);
	color: var(--x-deep);
}

.xf__heading {
	margin: 0 0 10px;
	color: var(--x-deep);
	font-size: 1rem;
	font-weight: 700;
}

.xf__col ul:not(.wp-block-social-links) {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xf__col a {
	display: inline-flex;
	align-items: center;
	min-block-size: 36px;
	color: var(--x-deep);
	text-decoration: none;
}

.xf__col a:hover {
	color: var(--x-green-700);
	text-decoration: underline;
}

.xf__contact p {
	display: grid;
	justify-items: start;
	gap: 2px;
	margin: 0 0 12px;
}

.xf__contact .wp-block-social-links {
	gap: 8px;
	margin: 4px 0 0;
}

.xf__label {
	color: var(--x-muted);
	font-size: 0.85rem;
}

.xf__address span {
	display: block;
}

.xf__bottom {
	box-sizing: border-box;
	max-inline-size: calc(var(--x-max) + 2 * var(--x-gutter));
	margin-inline: auto;
	padding: 16px var(--x-gutter) 24px;
	border-block-start: 1px solid var(--x-line);
	font-size: 0.875rem;
}

.xf__bottom p {
	margin: 0;
}

/* Footer is always visible, whatever an older cached script did. */
.exvin-footer .exvin-reveal,
.exvin-reveal {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

/* --------------------------------------------------------------------------
 * Floating assistant button: clear of the bottom bar and of the page edge.
 * ----------------------------------------------------------------------- */

@media (max-width: 781px) {
	body:has(.exvin-bottom-nav) .exvin-ai-launcher {
		inset-block-end: calc(4.25rem + 12px + env(safe-area-inset-bottom));
	}
}

/* --------------------------------------------------------------------------
 * Cart and checkout: the blocks draw their content after the page loads; reserve the space so the footer does not
 * appear and then jump down (measured CLS 0.2–0.3 before).
 * ----------------------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	min-block-size: calc(100vh - 140px);
	min-block-size: calc(100dvh - 140px);
}

/* -----------------------------------------------------------------------
 * Sign-in on wide screens: room for the "Your EXVIN account" panel beside
 * the card (the older 34rem limit was for the card alone and pushed the
 * panel under it). Steps without the panel keep the narrow column.
 * ----------------------------------------------------------------------- */

@media (min-width: 782px) {
	.woocommerce-account:not(.logged-in) .woocommerce:has(.exvin-auth__side):not(:has(.exvin-auth__code, #exvin-auth-name)) {
		max-inline-size: 50rem !important;
	}
}

/* --------------------------------------------------------------------------
 * Web ↔ app parity (D-077): notifications, compare offers, home rows, save vehicle
 * ----------------------------------------------------------------------- */

/* Unread notifications on the account link (header), the Account tab (bottom bar) and the phone menu. */
.xh__account {
	position: relative;
}

.xh__account .xh__count {
	inset-block-start: 2px;
	inset-inline-start: 18px;
	inset-inline-end: auto;
	min-inline-size: 16px;
	block-size: 16px;
	line-height: 16px;
	font-size: 0.68rem;
}

.exvin-bottom-nav a {
	position: relative;
}

.exvin-bottom-nav .xh__count {
	inset-block-start: 2px;
	inset-inline-start: calc(50% + 4px);
	inset-inline-end: auto;
}

.xh-menu__notices {
	position: relative;
	margin-block-start: 8px;
	border: 1.5px solid var(--x-line);
	background: #fff;
	color: var(--x-deep);
}

.xh-menu__notices .xh__count {
	position: static;
}

/* My account → Notifications (the app's inbox). */
.exvin-notices__mark {
	display: flex;
	justify-content: flex-end;
	margin-block-end: 12px;
}

.exvin-notices__mark[hidden] {
	display: none;
}

.exvin-notices__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.exvin-notices__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	align-items: start;
	padding: 14px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-radius);
	background: #fff;
}

.exvin-notices__icon {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--x-panel);
	color: var(--x-muted);
}

.exvin-notices__item.is-unread {
	border-color: var(--wp--preset--color--mint-300, #bfe6dd);
	background: var(--wp--preset--color--mint-100, #e5f5f1);
}

.exvin-notices__item.is-unread .exvin-notices__icon {
	background: var(--x-green);
	color: #fff;
}

.exvin-notices__body p {
	margin: 0;
}

.exvin-notices__title {
	color: var(--x-deep);
	font-weight: 600;
}

.exvin-notices__item.is-unread .exvin-notices__title {
	font-weight: 700;
}

.exvin-notices__text {
	color: var(--x-deep);
	overflow-wrap: anywhere;
}

.exvin-notices__time {
	display: block;
	margin-block-start: 2px;
	color: var(--x-muted);
	font-size: 0.8125rem;
}

.exvin-notices__link {
	grid-column: 2;
	justify-self: start;
	color: var(--x-green-dark);
	font-weight: 700;
	font-size: 0.9rem;
}

.exvin-notices__empty {
	padding: 24px 16px;
	border: 1px dashed var(--x-line);
	border-radius: var(--x-radius);
	background: var(--x-panel);
	color: var(--x-muted);
	text-align: center;
}

.exvin-notices__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	margin-block-start: 14px;
}

.woocommerce-MyAccount-navigation-link--notifications.has-unread > a::after {
	content: "";
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	margin-inline-start: 6px;
	border-radius: 50%;
	background: var(--x-gold);
	vertical-align: middle;
}

/* Compare offers: the real number of offers under the price (the app's "{count} offers"). */
.exvin-home-store__offers {
	color: var(--x-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Home product rows on phones: one horizontal row that snaps card by card, about 2⅓ cards across (the app's
   carousels); wider screens keep the grid. The row scrolls inside itself: the page never scrolls sideways. */
@media (max-width: 781px) {
	.exvin-home-store__grid,
	.xl-store .exvin-home-store__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: clamp(128px, calc((100% - 2 * 10px) / 2.33), 190px);
		gap: 10px;
		margin-inline: calc(-1 * var(--x-gutter));
		padding: 2px var(--x-gutter) 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--x-gutter);
		scrollbar-width: none;
	}

	.exvin-home-store__grid::-webkit-scrollbar {
		display: none;
	}

	.exvin-home-store__grid > li {
		scroll-snap-align: start;
		min-inline-size: 0;
	}

	.exvin-home-store__card {
		padding: 8px;
	}

	.exvin-home-store__name {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.875rem;
	}
}

/* VIN result: "Save to my vehicles" / "Use this vehicle" (signed in; as in the app). */
.exvin-vin__save {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-block: 12px;
}

.exvin-vin__save-btn,
.exvin-vin__use-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	padding: 0 1.1rem;
	border: 1.5px solid var(--wp--preset--color--emerald, #009b77);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--emerald-dark, #007a5e);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.exvin-vin__save-btn::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3Cpath d='M12 7v6M9 10h6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3Cpath d='M12 7v6M9 10h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exvin-vin__use-btn {
	border-color: var(--wp--preset--color--emerald-dark, #007a5e);
	background: var(--wp--preset--color--emerald-dark, #007a5e);
	color: #fff;
}

.exvin-vin__save-btn:disabled,
.exvin-vin__use-btn:disabled {
	cursor: progress;
	opacity: 0.7;
}

.exvin-vin__save-btn:focus-visible,
.exvin-vin__use-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--emerald-dark, #007a5e);
	outline-offset: 2px;
}

.exvin-vin__result .exvin-vin__saved,
.exvin-vin__result .exvin-vin__selected {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--emerald-dark, #007a5e) !important;
	font-weight: 700;
}

.exvin-vin__result .exvin-vin__saved::before {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.exvin-vin__result .exvin-vin__selected {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--mint-100, #e5f5f1);
	font-size: 0.85rem;
}

.exvin-vin__result .exvin-vin__save-err {
	flex-basis: 100%;
	margin: 0;
	color: #ed1117 !important;
	font-weight: 600;
}