/**
 * EXVIN — foundation (redesign P1, SPEC §2–§4): design tokens, motion tokens, shared fx-* components, page transitions.
 *
 * Loaded after exvin-shell.css on every front-end page. It adds no element styles: only :root tokens, fx-* classes,
 * the view-transition rules and the reduced-motion and print guards, so pages that do not use fx-* classes look as
 * before. Never-hide rules (SPEC §3.1): the static CSS is the final state; motion is layered on only inside
 * prefers-reduced-motion: no-preference (and @supports for new features). No raw colour outside the token block.
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens (SPEC §2). Palette-backed tokens read the theme.json presets, so they match exvin-shell.css exactly.
 * ------------------------------------------------------------------------ */

:root {
	--x-green: var(--wp--preset--color--emerald, #009B77);
	--x-green-700: var(--wp--preset--color--emerald-dark, #007A5E);
	--x-mint: var(--wp--preset--color--mint, #80CDBB);
	--x-mint-300: var(--wp--preset--color--mint-300, #BFE6DD);
	--x-mint-100: var(--wp--preset--color--mint-100, #E5F5F1);
	--x-deep: var(--wp--preset--color--emerald-deep, #0B3B30);
	--x-stage-0: var(--wp--preset--color--stage-0, #05261E);
	--x-stage-2: var(--wp--preset--color--stage-2, #0B5A47);
	--x-gold: var(--wp--preset--color--accent, #D4AF37);
	--x-gold-600: var(--wp--preset--color--gold-600, #BF9E32);
	--x-gold-100: var(--wp--preset--color--gold-100, #F6EFD7);
	--x-gold-ink: var(--wp--preset--color--gold-ink, #0B3B30);
	--x-panel: var(--wp--preset--color--surface-alt, #EEF7F4);
	--x-line: var(--wp--preset--color--border, #D3EAE3);
	--x-white: #FFFFFF;
	--x-ink: var(--wp--preset--color--ink, #0B3B30);
	--x-ink-2: var(--wp--preset--color--ink-muted, #2F6B5C);
	--x-on-dark: rgb(211 234 227 / .82);
	--x-line-dark: rgb(211 234 227 / .14);
	--x-alert: var(--wp--preset--color--alert, #ED1117);
	--x-grid-minor: rgb(211 234 227 / .55);
	--x-grid-minor-dark: rgb(255 255 255 / .04);
	--x-grid-major-dark: rgb(255 255 255 / .07);
	--x-spot: rgb(128 205 187 / .14);
	--x-sheen: rgb(255 255 255 / .16);
	--x-shimmer: rgb(255 255 255 / .75);
	--x-shade: rgb(5 38 30 / .10);
	--x-scrim: rgb(5 38 30 / .45);

	--x-font-latin: 'Google Sans', system-ui, sans-serif;
	--x-font-arabic: 'Alyamama', 'Noto Sans Arabic Kurdish', 'Google Sans', system-ui, sans-serif;
	--x-font: var(--x-font-latin);
	--x-w-strong: 600;
	--x-display-1: 700 clamp(2.25rem, 1.35rem + 3.9vw, 4.75rem)/1.04 var(--x-font);
	--x-display-2: 700 clamp(2rem, 1.2rem + 3.2vw, 4rem)/1.08 var(--x-font);
	--x-display-ls: -.02em;
	--x-h2: 700 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/1.12 var(--x-font);
	--x-h3: 700 1.25rem/1.3 var(--x-font);
	--x-lead: 400 1.125rem/1.6 var(--x-font);
	--x-body: 400 1rem/1.6 var(--x-font);
	--x-small: 400 .875rem/1.5 var(--x-font);
	--x-label: 600 .75rem/1.4 var(--x-font);
	--x-label-ls: .08em;
	--x-label-tt: uppercase;
	--x-plate: 600 1rem/1.2 var(--x-font-latin);

	--x-s-1: 4px; --x-s-2: 8px; --x-s-3: 12px; --x-s-4: 16px; --x-s-5: 20px; --x-s-6: 24px;
	--x-s-7: 32px; --x-s-8: 40px; --x-s-9: 48px; --x-s-10: 64px; --x-s-11: 96px; --x-s-12: 128px;
	--x-wrap: 1240px;

	--x-r-xs: 6px; --x-r-sm: 8px; --x-r-md: 12px; --x-r-lg: 16px; --x-r-xl: 20px; --x-r-2xl: 28px; --x-r-pill: 999px;

	--x-sh-1: 0 1px 2px rgb(11 59 48 / .06), 0 2px 6px rgb(11 59 48 / .06);
	--x-sh-2: 0 1px 2px rgb(11 59 48 / .06), 0 10px 28px -8px rgb(11 59 48 / .16);
	--x-sh-3: 0 2px 4px rgb(11 59 48 / .06), 0 26px 52px -14px rgb(11 59 48 / .24);
	--x-sh-inst: 0 24px 60px rgb(5 38 30 / .28), inset 0 1px 0 rgb(255 255 255 / .6);

	--x-z-header: 100; --x-z-bar: 100; --x-z-buy: 90; --x-z-toast: 1100;

	--m-dur-1: 120ms; --m-dur-2: 200ms; --m-dur-3: 320ms; --m-dur-4: 600ms; --m-dur-5: 700ms;
	--m-dur-page-out: 180ms; --m-dur-page: 300ms; --m-stagger: 70ms; --m-intro-max: 900ms;
	--m-ease-out: cubic-bezier(.22, 1, .36, 1);
	--m-ease-in: cubic-bezier(.55, 0, 1, .45);
	--m-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--m-spring: linear(0, .034, .117, .227, .348, .467, .579, .678, .763, .834, .89, .934, .966, .989, 1.005, 1.015, 1.021, 1.023, 1.023, 1.022, 1.019, 1.017, 1.014, 1.011, 1.009, 1.006, 1.005, 1.003, 1);
	--m-dist-1: 2px; --m-dist-2: 4px; --m-dist-3: 16px; --m-dist-4: 24px; --m-reveal-len: 120px;
	--m-dir: 1;
}

[dir="rtl"] {
	--m-dir: -1;
}

/* Arabic-script languages (Arabic, Persian, Kurdish, Urdu; D-136): Alyamama first, no letter-spacing, no case change
   (SPEC §2.2). Only elements carrying a lang attribute. */
:root:lang(ar), :root:lang(fa), :root:lang(ckb), :root:lang(ur),
[lang]:lang(ar), [lang]:lang(fa), [lang]:lang(ckb), [lang]:lang(ur) {
	--x-font: var(--x-font-arabic);
	--x-w-strong: 700;
	--x-display-1: 700 clamp(2.125rem, 1.3rem + 3.4vw, 4.25rem)/1.3 var(--x-font-arabic);
	--x-display-2: 700 clamp(1.875rem, 1.1rem + 2.9vw, 3.5rem)/1.35 var(--x-font-arabic);
	--x-display-ls: 0;
	--x-h2: 700 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/1.4 var(--x-font-arabic);
	--x-h3: 700 1.25rem/1.5 var(--x-font-arabic);
	--x-lead: 500 1.125rem/1.8 var(--x-font-arabic);
	--x-body: 500 1.0625rem/1.8 var(--x-font-arabic);
	--x-small: 500 .9375rem/1.7 var(--x-font-arabic);
	--x-label: 700 .8125rem/1.5 var(--x-font-arabic);
	--x-label-ls: 0;
	--x-label-tt: none;
}

:root:lang(ur), [lang]:lang(ur) {
	--x-display-1: 700 calc(.92 * clamp(2.125rem, 1.3rem + 3.4vw, 4.25rem))/1.5 var(--x-font-arabic);
	--x-display-2: 700 calc(.92 * clamp(1.875rem, 1.1rem + 2.9vw, 3.5rem))/1.55 var(--x-font-arabic);
	--x-h2: 700 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/1.6 var(--x-font-arabic);
	--x-h3: 700 1.25rem/1.6 var(--x-font-arabic);
	--x-lead: 500 1.125rem/1.9 var(--x-font-arabic);
	--x-body: 500 1.0625rem/1.9 var(--x-font-arabic);
	--x-small: 500 .9375rem/1.8 var(--x-font-arabic);
	--x-label: 700 .8125rem/1.8 var(--x-font-arabic);
}

[lang]:lang(en) {
	--x-font: var(--x-font-latin);
	--x-w-strong: 600;
	--x-display-1: 700 clamp(2.25rem, 1.35rem + 3.9vw, 4.75rem)/1.04 var(--x-font-latin);
	--x-display-2: 700 clamp(2rem, 1.2rem + 3.2vw, 4rem)/1.08 var(--x-font-latin);
	--x-display-ls: -.02em;
	--x-h2: 700 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/1.12 var(--x-font-latin);
	--x-h3: 700 1.25rem/1.3 var(--x-font-latin);
	--x-lead: 400 1.125rem/1.6 var(--x-font-latin);
	--x-body: 400 1rem/1.6 var(--x-font-latin);
	--x-small: 400 .875rem/1.5 var(--x-font-latin);
	--x-label: 600 .75rem/1.4 var(--x-font-latin);
	--x-label-ls: .08em;
	--x-label-tt: uppercase;
}

/* ---------------------------------------------------------------------------
 * 2. Utilities
 * ------------------------------------------------------------------------ */

.fx-sr {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fx-icon {
	flex: none;
	vertical-align: middle;
}

[dir="rtl"] .fx-flip {
	scale: -1 1;
}

/* Header shadow tied to scroll (R6): a pre-drawn layer fades in over the first 64 px. The element must be positioned. */
.fx-scroll-shadow::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	block-size: 12px;
	background: linear-gradient(var(--x-shade), transparent);
	opacity: 0;
	pointer-events: none;
}

@supports (animation-timeline: scroll()) {
	.fx-scroll-shadow::after {
		animation: m-fade-in linear both;
		animation-timeline: scroll(root block);
		animation-range: 0px 64px;
	}
}

html.exvin-scrolled .fx-scroll-shadow::after {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 3. Components (SPEC §4)
 * ------------------------------------------------------------------------ */

/* 4.1 Buttons */
.fx-btn {
	--fx-bg: var(--x-green-700); /* small white labels: emerald-700 (5.32:1); #009B77 is only 3.53:1 */
	--fx-bg-h: var(--x-deep);
	--fx-fg: var(--x-white);
	--fx-bd: transparent;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--x-s-2);
	min-block-size: 48px;
	padding: 0 var(--x-s-6);
	overflow: hidden;
	border: 1px solid var(--fx-bd);
	border-radius: var(--x-r-md);
	background: var(--fx-bg);
	color: var(--fx-fg);
	font: var(--x-w-strong) 1rem/1.2 var(--x-font);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.fx-btn:hover {
	background: var(--fx-bg-h);
	color: var(--fx-fg);
}

.fx-btn--green { --fx-bg: var(--x-green-700); --fx-bg-h: var(--x-deep); --fx-fg: var(--x-white); }
.fx-btn--gold { --fx-bg: var(--x-gold); --fx-bg-h: var(--x-gold-600); --fx-fg: var(--x-deep); }
.fx-btn--ghost { --fx-bg: transparent; --fx-bg-h: var(--x-mint-100); --fx-fg: var(--x-green-700); --fx-bd: var(--x-line); }
.fx-btn--ghost-dark { --fx-bg: transparent; --fx-bg-h: var(--x-line-dark); --fx-fg: var(--x-white); --fx-bd: var(--x-line-dark); }
.fx-btn--sm { min-block-size: 44px; padding-inline: var(--x-s-4); font-size: .9375rem; }
.fx-btn--block { display: flex; inline-size: 100%; }

.fx-btn__arrow {
	display: inline-flex;
}

[dir="rtl"] .fx-btn__arrow {
	scale: -1 1;
}

.fx-btn[aria-busy="true"] {
	color: transparent;
	pointer-events: none;
}

.fx-btn[aria-busy="true"]::before {
	content: "";
	position: absolute;
	inset: 0;
	inline-size: 20px;
	block-size: 20px;
	margin: auto;
	border: 2px solid var(--fx-fg);
	border-inline-end-color: transparent;
	border-radius: 50%;
}

:is(.fx-btn, .fx-chip, .fx-seg__item, .fx-pause, .fx-shelf__btn, .fx-case__link, .fx-plate__copy, .fx-acc > summary):focus-visible {
	outline: 2px solid var(--x-green);
	outline-offset: 2px;
}

.fx-sheet--dark :is(.fx-btn, .fx-chip, .fx-seg__item, .fx-pause, .fx-shelf__btn, .fx-case__link, .fx-plate__copy, .fx-acc > summary):focus-visible {
	outline-color: var(--x-gold);
	outline-offset: 3px;
}

/* 4.2 Sheets: paper and dark drafting grids (no images) */
.fx-sheet--paper,
.fx-sheet--dark,
.fx-grid {
	position: relative;
	isolation: isolate;
}

.fx-sheet--paper {
	--fx-gm: var(--x-grid-minor);
	--fx-gM: var(--x-line);
	background-color: var(--x-panel);
	color: var(--x-ink);
}

.fx-sheet--dark {
	--fx-gm: var(--x-grid-minor-dark);
	--fx-gM: var(--x-grid-major-dark);
	background-color: var(--x-deep);
	color: var(--x-white);
	color-scheme: dark;
}

.fx-sheet--dark :is(h1, h2, h3, h4) {
	color: inherit;
}

.fx-sheet--stage {
	background-color: var(--x-stage-0);
}

.fx-grid {
	--fx-gm: var(--x-grid-minor);
	--fx-gM: var(--x-line);
}

.fx-sheet--paper::before,
.fx-sheet--dark::before,
.fx-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, var(--fx-gM) 0 1px, transparent 1px 96px),
		repeating-linear-gradient(0deg, var(--fx-gM) 0 1px, transparent 1px 96px),
		repeating-linear-gradient(90deg, var(--fx-gm) 0 1px, transparent 1px 24px),
		repeating-linear-gradient(0deg, var(--fx-gm) 0 1px, transparent 1px 24px);
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 20%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 20%, transparent 100%);
}

.fx-sheet--dark :is(input, select, textarea) {
	color-scheme: light;
}

.fx-spot {
	background-image: none;
}

/* 4.3 Crop marks: four 16 px gold L-marks on one layer */
.fx-crop {
	position: relative;
}

.fx-crop::before {
	--c: var(--x-gold);
	content: "";
	position: absolute;
	inset: -8px;
	pointer-events: none;
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 16px 2px,
		linear-gradient(var(--c), var(--c)) 0 0 / 2px 16px,
		linear-gradient(var(--c), var(--c)) 100% 0 / 16px 2px,
		linear-gradient(var(--c), var(--c)) 100% 0 / 2px 16px,
		linear-gradient(var(--c), var(--c)) 0 100% / 16px 2px,
		linear-gradient(var(--c), var(--c)) 0 100% / 2px 16px,
		linear-gradient(var(--c), var(--c)) 100% 100% / 16px 2px,
		linear-gradient(var(--c), var(--c)) 100% 100% / 2px 16px;
	background-repeat: no-repeat;
}

/* 4.4 Technical label and status */
.fx-label {
	font: var(--x-label);
	letter-spacing: var(--x-label-ls);
	text-transform: var(--x-label-tt);
	color: var(--x-ink-2);
}

.fx-sheet--dark .fx-label {
	color: var(--x-mint);
}

.fx-status {
	display: inline-flex;
	align-items: center;
	gap: var(--x-s-2);
	font: var(--x-label);
	letter-spacing: var(--x-label-ls);
	text-transform: var(--x-label-tt);
}

.fx-status::before {
	content: "";
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--x-gold);
}

/* 4.5 Plate (OEM, SKU, part numbers): always LTR, tabular figures, two rivets */
.fx-plate {
	display: inline-flex;
	align-items: center;
	gap: var(--x-s-2);
	min-block-size: 32px;
	padding: 2px var(--x-s-2);
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-sm);
	background: var(--x-white);
	color: var(--x-ink);
	font: var(--x-plate);
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	white-space: nowrap;
	direction: ltr;
	unicode-bidi: isolate;
	vertical-align: middle;
}

.fx-plate::before,
.fx-plate::after {
	content: "";
	flex: none;
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--x-mint-300);
}

.fx-plate--sm { min-block-size: 26px; font-size: .8125rem; }
.fx-plate--lg { min-block-size: 44px; padding-inline: var(--x-s-3); font-size: 1.25rem; }
.fx-plate--dark { border-color: var(--x-line-dark); background: var(--x-stage-2); color: var(--x-white); }
.fx-plate--dark::before, .fx-plate--dark::after { background: var(--x-line-dark); }

.fx-plate__copy {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	margin-block: -4px;
	padding: 0;
	border: 0;
	border-radius: var(--x-r-xs);
	background: none;
	color: inherit;
	cursor: pointer;
}

.fx-plate__copy::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.fx-plate__copy .fx-i-done,
.fx-plate__copy.is-done .fx-i-copy {
	display: none;
}

.fx-plate__copy.is-done .fx-i-done {
	display: block;
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.fx-plate--dark .fx-plate__copy.is-done .fx-i-done {
	color: var(--x-mint);
}

/* 4.6 VIN slots: 17 cells in an LTR row with group brackets */
.fx-vin,
.fx-slots {
	--fx-sw: clamp(16px, 4.2vw, 28px);
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--x-s-2);
	direction: ltr;
	unicode-bidi: isolate;
	vertical-align: middle;
}

.fx-vin--sm { --fx-sw: clamp(14px, 3.6vw, 20px); }
.fx-vin--lg { --fx-sw: clamp(16px, 4.2vw, 36px); }

.fx-vin__row {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--fx-sw) * .3);
}

.fx-slots {
	gap: 2px;
}

.fx-vin__grp {
	position: relative;
	display: flex;
	align-items: flex-start;
}

/* Captions never widen a group: centred under it; the single-cell groups step down like drawing callouts. */
.fx-vin__grp:has(.fx-vin__cap) {
	padding-block-end: 1.4em;
}

.fx-vin__grp--year:has(.fx-vin__cap) {
	padding-block-end: 2.8em;
}

.fx-vin__cells {
	position: relative;
	display: flex;
	gap: 2px;
	padding-block-end: 6px;
}

.fx-vin__cells::after {
	content: "";
	position: absolute;
	inset: auto 1px 0;
	block-size: 4px;
	border: 1px solid var(--x-mint);
	border-block-start: 0;
	border-radius: 0 0 2px 2px;
}

.fx-slot {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	inline-size: var(--fx-sw);
	block-size: calc(var(--fx-sw) * 1.3);
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-xs);
	background: var(--x-white);
	color: var(--x-ink);
	font: var(--x-plate);
	font-size: calc(var(--fx-sw) * .62);
	font-variant-numeric: tabular-nums;
}

.fx-slot.is-empty {
	background: var(--x-panel);
}

.fx-sheet--dark .fx-slot {
	border-color: var(--x-line-dark);
	background: var(--x-stage-2);
	color: var(--x-white);
}

.fx-vin__cap {
	position: absolute;
	inset-block-start: calc(100% - 1.3em);
	inset-inline-start: 50%;
	translate: -50% 0;
	font: var(--x-label);
	font-size: .6875rem;
	letter-spacing: var(--x-label-ls);
	text-transform: var(--x-label-tt);
	color: var(--x-ink-2);
	text-align: center;
	white-space: nowrap;
}

.fx-vin__grp--year:has(.fx-vin__cap) .fx-vin__cells::before {
	content: "";
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	block-size: 1.3em;
	border-inline-start: 1px solid var(--x-mint);
}

.fx-vin__cap:lang(ar),
.fx-vin__cap:lang(fa),
.fx-vin__cap:lang(ckb),
.fx-vin__cap:lang(ur) {
	font-size: .75rem;
}

.fx-sheet--dark .fx-vin__cap {
	color: var(--x-mint);
}

/* 4.7 Segmented control: without JS the active item has its own background; with JS one indicator glides (M5) */
.fx-seg {
	position: relative;
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-md);
	background: var(--x-panel);
}

.fx-seg__item {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 40px;
	padding: 0 var(--x-s-4);
	border: 0;
	border-radius: var(--x-r-sm);
	background: none;
	color: var(--x-ink-2);
	font: var(--x-w-strong) .9375rem/1.2 var(--x-font);
	white-space: nowrap;
	cursor: pointer;
}

.fx-seg__item input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fx-seg__item:has(:focus-visible) {
	outline: 2px solid var(--x-green);
	outline-offset: 2px;
}

.fx-seg__item:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), .is-active, :has(:checked)) {
	background: var(--x-white);
	color: var(--x-ink);
	box-shadow: var(--x-sh-1);
}

.fx-seg.is-ready .fx-seg__item {
	background: none;
	box-shadow: none;
}

.fx-seg__ind {
	position: absolute;
	inset-block: 4px;
	inset-inline-start: 0;
	inline-size: var(--fx-seg-w, 0px);
	translate: calc(var(--fx-seg-x, 0px) * var(--m-dir)) 0;
	border-radius: var(--x-r-sm);
	background: var(--x-white);
	box-shadow: var(--x-sh-1);
	opacity: 0;
	pointer-events: none;
}

.fx-seg.is-ready .fx-seg__ind {
	opacity: 1;
}

/* 4.8 Chips */
.fx-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	padding: 0 14px;
	border: 1px solid var(--x-line);
	border-radius: var(--x-r-pill);
	background: var(--x-white);
	color: var(--x-ink);
	font: 500 .9375rem/1.2 var(--x-font);
	text-decoration: none;
	white-space: nowrap;
	hyphens: none;
	overflow-wrap: normal;
}

@media (pointer: fine) {
	.fx-chip { min-block-size: 36px; }
}

.fx-chip--mint { border-color: transparent; background: var(--x-mint-100); color: var(--x-deep); }
.fx-chip--gold { border-color: transparent; background: var(--x-gold-100); color: var(--x-gold-ink); }
.fx-chip--dark { border-color: var(--x-line-dark); background: var(--x-stage-2); color: var(--x-white); }

/* 4.9 Section cases (D-068: always the four sections) */
.fx-cases {
	--fx-ph: 112px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--x-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-cases--xs,
.fx-cases--sm { --fx-ph: 64px; gap: var(--x-s-2); }
.fx-cases--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 900px) {
	.fx-cases--md,
	.fx-cases--lg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--x-s-6); }
	.fx-cases--lg { --fx-ph: 168px; }
}

.fx-case {
	--fx-acc: var(--x-green);
	min-inline-size: 0;
}

.fx-case[data-s="accessories"] { --fx-acc: var(--x-gold); }
.fx-case[data-s="tyres_batteries"] { --fx-acc: var(--x-deep); }
.fx-case[data-s="oils_greases"] { --fx-acc: var(--x-mint); }

.fx-case__link,
.fx-card {
	position: relative;
	border: 1px solid var(--x-line);
	box-shadow: var(--x-sh-1);
}

.fx-case__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--x-s-2);
	block-size: 100%;
	box-sizing: border-box;
	padding: var(--x-s-6) var(--x-s-3) var(--x-s-4);
	border-radius: var(--x-r-xl);
	background: var(--x-white);
	box-shadow: inset 0 4px 0 var(--fx-acc), var(--x-sh-1);
	color: var(--x-ink);
	text-align: center;
	text-decoration: none;
}

.fx-cases--xs .fx-case__link,
.fx-cases--sm .fx-case__link {
	padding: var(--x-s-4) var(--x-s-1) var(--x-s-3);
	border-radius: var(--x-r-lg);
}

.fx-case__media {
	display: grid;
	place-items: center;
	inline-size: var(--fx-ph);
	block-size: var(--fx-ph);
	overflow: hidden;
	color: var(--wp--preset--color--emerald-dark, #007A5E);
}

.fx-case__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0;
	background: none;
	mix-blend-mode: multiply;
}

.fx-case__media svg {
	inline-size: 55%;
	block-size: 55%;
}

.fx-case__num {
	position: absolute;
	inset-block-start: var(--x-s-3);
	inset-inline-start: var(--x-s-3);
	font: var(--x-label);
	letter-spacing: .08em;
	color: var(--x-ink-2);
	font-variant-numeric: tabular-nums;
}

.fx-case__name {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font: var(--x-h3);
	font-size: 1rem;
	color: var(--x-ink);
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}

.fx-cases--xs .fx-case__name,
.fx-cases--sm .fx-case__name {
	font-size: .8125rem;
}

.fx-cases--lg .fx-case__name {
	font-size: 1.125rem;
}

.fx-case__text {
	font: var(--x-small);
	color: var(--x-ink-2);
	text-wrap: pretty;
}

.fx-case__go {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	margin-block-start: auto;
	border-radius: 50%;
	background: var(--x-mint-100);
	color: var(--x-green-700);
}

.fx-cases--xs :is(.fx-case__go, .fx-case__text, .fx-case__num),
.fx-cases--sm :is(.fx-case__go, .fx-case__text, .fx-case__num) {
	display: none;
}

[dir="rtl"] .fx-case__go svg {
	scale: -1 1;
}

/* 4.10 Cards: a pre-drawn hover shadow on ::after (box-shadow is never transitioned) */
.fx-card {
	border-radius: var(--x-r-lg);
	background: var(--x-white);
}

.fx-card::after,
.fx-case__link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	box-shadow: var(--x-sh-3);
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.fx-card:hover::after,
	.fx-case__link:hover::after {
		opacity: 1;
	}
}

/* 4.11 Pause button (WCAG 2.2.2) */
.fx-pause {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--x-line);
	border-radius: 50%;
	background: var(--x-white);
	color: var(--x-ink);
	cursor: pointer;
}

.fx-sheet--dark .fx-pause {
	border-color: var(--x-line-dark);
	background: transparent;
	color: var(--x-white);
}

.fx-pause .fx-i-play,
.fx-pause[aria-pressed="true"] .fx-i-pause {
	display: none;
}

.fx-pause[aria-pressed="true"] .fx-i-play {
	display: block;
}

/* 4.12 Accordion on native <details>; the height snaps */
.fx-acc {
	border-block-end: 1px solid var(--x-line);
}

.fx-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--x-s-4);
	min-block-size: 56px;
	padding-block: var(--x-s-3);
	font: var(--x-w-strong) 1.0625rem/1.4 var(--x-font);
	list-style: none;
	cursor: pointer;
}

.fx-acc > summary::-webkit-details-marker {
	display: none;
}

.fx-acc > summary::after {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}

.fx-acc[open] > summary::after {
	rotate: 45deg;
}

.fx-acc__body {
	padding-block-end: var(--x-s-4);
}

/* 4.13 Popover sheets (top layer, no z-index) */
.fx-pop {
	position: fixed;
	inset: 0;
	inset-inline-end: auto;
	box-sizing: border-box;
	inline-size: min(88vw, 400px);
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: var(--x-s-4);
	overflow: auto;
	border: 0;
	background: var(--x-white);
	color: var(--x-ink);
	box-shadow: var(--x-sh-2);
}

.fx-pop--end {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.fx-pop--bottom {
	inset: auto 0 0;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 85dvh;
	border-radius: var(--x-r-2xl) var(--x-r-2xl) 0 0;
}

.fx-pop::backdrop {
	background: var(--x-scrim);
}

/* 4.14 Skeleton: reserves the exact size of what replaces it */
.fx-skel {
	position: relative;
	overflow: hidden;
	border-radius: var(--x-r-sm);
	background: var(--x-mint-100);
}

.fx-skel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: none;
	translate: -100% 0;
}

/* 4.15 Tape (marquee): two equal lists, the second aria-hidden */
.fx-tape {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent);
}

.fx-tape__track {
	display: flex;
	inline-size: max-content;
}

.fx-tape__track > ul {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--x-s-8);
	margin: 0;
	padding: 0;
	padding-inline-end: var(--x-s-8);
	list-style: none;
}

/* 4.17 Draw: complete without JS and under reduced motion */
.fx-draw [pathLength] {
	stroke-dasharray: 1;
}

/* 4.18 Sweep (M2): one soft band, once per trigger */
.fx-sweep {
	position: relative;
	overflow: hidden;
}

.fx-sweep::after,
.fx-btn--gold::after {
	content: "";
	position: absolute;
	inset: 0;
	background: none;
	transform: skewX(-30deg);
	translate: calc(-120% * var(--m-dir)) 0;
	pointer-events: none;
}

/* 4.19 Shelf: scroll-snap row, edge fades, arrows at >= 900 px */
.fx-shelf {
	position: relative;
}

.fx-shelf__track {
	display: grid;
	grid-auto-columns: var(--fx-shelf-w, min(72%, 260px));
	grid-auto-flow: column;
	gap: var(--x-s-3);
	margin: 0;
	padding: 4px 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent);
}

.fx-shelf__track::-webkit-scrollbar {
	display: none;
}

.fx-shelf__track > * {
	scroll-snap-align: start;
}

.fx-shelf__btn {
	display: none;
}

@media (min-width: 900px) {
	.fx-shelf__btn {
		position: absolute;
		inset-block-start: 50%;
		z-index: 2;
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		padding: 0;
		border: 1px solid var(--x-line);
		border-radius: 50%;
		background: var(--x-white);
		color: var(--x-ink);
		box-shadow: var(--x-sh-2);
		cursor: pointer;
		translate: 0 -50%;
	}

	.fx-shelf__btn--prev { inset-inline-start: -16px; }
	.fx-shelf__btn--next { inset-inline-end: -16px; }
	.fx-shelf__btn[hidden] { display: none; }
}

.fx-shelf__btn--prev svg,
[dir="rtl"] .fx-shelf__btn--next svg {
	scale: -1 1;
}

[dir="rtl"] .fx-shelf__btn--prev svg {
	scale: 1 1;
}

/* Toast (exvinFx.toast) */
.fx-toast {
	position: fixed;
	inset-inline: var(--x-s-4);
	inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
	z-index: var(--x-z-toast);
	box-sizing: border-box;
	max-inline-size: 420px;
	margin-inline: auto;
	padding: var(--x-s-3) var(--x-s-4);
	border-radius: var(--x-r-md);
	background: var(--x-deep);
	color: var(--x-white);
	font: var(--x-small);
	box-shadow: var(--x-sh-2);
	opacity: 0;
	translate: 0 12px;
	pointer-events: none;
}

.fx-toast.is-on {
	opacity: 1;
	translate: 0 0;
}

@media (min-width: 900px) {
	.fx-toast { inset-block-end: var(--x-s-6); }
}

/* ---------------------------------------------------------------------------
 * 4. Motion layer (only with no-preference; SPEC §3)
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	/* Buttons, cases and cards: press scale, spring release (M7) */
	.fx-btn,
	.fx-case__link,
	.fx-chip,
	.fx-pause {
		transition: transform var(--m-dur-4) var(--m-spring);
	}

	.fx-btn:active,
	.fx-case__link:active,
	.fx-chip:active,
	.fx-pause:active {
		transform: scale(.97);
		transition-duration: var(--m-dur-1);
		transition-timing-function: var(--m-ease-out);
	}

	.fx-btn:active { transform: scale(.96); }

	.fx-btn__arrow,
	.fx-case__go,
	.fx-case__media img {
		transition: translate var(--m-dur-3) var(--m-ease-out), scale var(--m-dur-3) var(--m-ease-out);
	}

	.fx-card::after,
	.fx-case__link::after {
		transition: opacity var(--m-dur-2) var(--m-ease-out);
	}

	.fx-btn[aria-busy="true"]::before {
		animation: m-spin .8s linear infinite;
	}

	.fx-crop::before {
		transition: scale var(--m-dur-3) var(--m-ease-out);
	}

	/* Segmented indicator (M5) */
	.fx-seg.is-ready .fx-seg__ind {
		transition: translate 220ms var(--m-spring), inline-size 220ms var(--m-spring);
	}

	/* Accordion: content fades and rises 6 px; + turns into x */
	.fx-acc > summary::after {
		transition: rotate var(--m-dur-3) var(--m-spring);
	}

	@supports selector(::details-content) {
		.fx-acc::details-content {
			opacity: 0;
			translate: 0 6px;
			transition: content-visibility var(--m-dur-3) allow-discrete, opacity var(--m-dur-3) var(--m-ease-out), translate var(--m-dur-3) var(--m-ease-out);
		}

		.fx-acc[open]::details-content {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* Popover sheets: slide from the inline start/end or the bottom (enter 320 ms, exit 220 ms) */
	.fx-pop {
		--fx-from: calc(-100% * var(--m-dir)) 0;
		translate: var(--fx-from);
		transition: translate 220ms var(--m-ease-in), overlay 220ms allow-discrete, display 220ms allow-discrete;
	}

	.fx-pop--end { --fx-from: calc(100% * var(--m-dir)) 0; }
	.fx-pop--bottom { --fx-from: 0 100%; }

	.fx-pop:popover-open {
		translate: 0 0;
		transition-duration: var(--m-dur-3);
		transition-timing-function: var(--m-ease-out);
	}

	.fx-pop::backdrop {
		opacity: 0;
		transition: opacity 220ms, overlay 220ms allow-discrete, display 220ms allow-discrete;
	}

	.fx-pop:popover-open::backdrop {
		opacity: 1;
		transition-duration: var(--m-dur-3);
	}

	@starting-style {
		.fx-pop:popover-open { translate: var(--fx-from); }
		.fx-pop:popover-open::backdrop { opacity: 0; }
	}

	.fx-pop:popover-open .fx-pop__item {
		animation: m-rise var(--m-dur-3) var(--m-ease-out) calc(80ms + var(--i, 0) * 40ms) both;
	}

	/* Skeleton shimmer in the reading direction */
	.fx-skel::after {
		animation: m-shimmer 1.3s var(--m-ease-in-out) infinite;
	}

	/* Tape: 38 s per loop; pauses on hover, focus, the pause button and off-screen (R9) */
	.fx-tape__track {
		animation: m-tape 38s linear infinite;
	}

	.fx-tape:is(:hover, :focus-within, .is-paused, .is-off) .fx-tape__track,
	:is(.is-paused, .is-off) .fx-tape__track,
	:is(.is-paused, .is-off) .fx-loop,
	.fx-loop:is(.is-paused, .is-off) {
		animation-play-state: paused;
	}

	/* Draw (M1): once, on .is-in (from data-fx-once) or at load */
	html.exvin-js .fx-draw[data-fx-once]:not(.is-in) [pathLength] {
		stroke-dashoffset: 1;
	}

	.fx-draw.is-in [pathLength],
	.fx-draw--load [pathLength] {
		animation: m-draw 1s var(--m-ease-in-out) calc(var(--d, 0) * 60ms) both;
	}

	/* Sweep (M2): once per trigger, never looped */
	.fx-sweep.is-in::after,
	.fx-sweep--load::after {
		animation: m-sweep 900ms var(--m-ease-out) both;
	}

	/* Load intro (R3): above the fold, once, settled by 900 ms; skipped after a page transition */
	.fx-intro {
		animation: m-rise-fade var(--m-dur-5) var(--m-ease-out) calc(var(--i, 0) * var(--m-stagger)) both;
	}

	.fx-intro--rise {
		animation-name: m-rise;
	}

	.fx-unveil {
		animation: m-unveil 650ms var(--m-ease-out) calc(var(--i, 0) * var(--m-stagger)) both;
	}

	html.m-arrived :is(.fx-intro, .fx-unveil) {
		animation: none;
	}

	/* Toast */
	.fx-toast {
		transition: opacity 154ms var(--m-ease-in), translate 154ms var(--m-ease-in);
	}

	.fx-toast.is-on {
		transition-duration: 220ms;
		transition-timing-function: var(--m-ease-out);
	}

	/* Scroll reveal (R2): view timeline only, .6 -> 1 opacity, finished 120 px into view; Firefox shows static content */
	@supports (animation-timeline: view()) {
		.fx-reveal {
			animation: m-reveal linear both;
			animation-timeline: view();
			animation-range: entry calc(var(--col, 0) * 16px) entry calc(var(--m-reveal-len) + var(--col, 0) * 16px);
		}
	}

	/* Cross-document page transitions (SPEC §3.3). Checkout switches them off (inc/fx.php). */
	@view-transition {
		navigation: auto;
	}

	::view-transition-group(*) {
		animation-duration: var(--m-dur-page);
		animation-timing-function: var(--m-ease-out);
	}

	::view-transition-old(root) {
		animation: var(--m-dur-page-out) var(--m-ease-in) both m-vt-out;
	}

	::view-transition-new(root) {
		animation: var(--m-dur-page) var(--m-ease-out) both m-vt-in;
	}

	html:active-view-transition-type(back)::view-transition-old(root) {
		animation-name: m-vt-out-back;
	}

	html:active-view-transition-type(back)::view-transition-new(root) {
		animation-name: m-vt-in-back;
	}
}

/* Hover (fine pointer only, R8) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.fx-btn:hover { transform: translateY(-1px); }
	.fx-btn:hover .fx-btn__arrow { translate: calc(3px * var(--m-dir)) 0; }
	.fx-btn--gold:hover::after,
	.fx-sweep:hover::after { animation: m-sweep 900ms var(--m-ease-out) both; }
	.fx-case__link:hover,
	.fx-card--lift:hover { transform: translateY(-4px); }
	.fx-card--lift { transition: transform var(--m-dur-4) var(--m-spring); }
	.fx-case__link:hover .fx-case__media img { scale: 1.04; }
	.fx-case__link:hover .fx-case__go { translate: calc(3px * var(--m-dir)) 0; }
	.fx-crop:hover::before { scale: 1.03; }
	.fx-btn:active { transform: scale(.96); }
	.fx-case__link:active,
	.fx-card--lift:active { transform: scale(.97); }
}

/* Tape under reduced motion: a static, wrapped chip row (the duplicate list is hidden) */
@media (prefers-reduced-motion: reduce) {
	.fx-tape { -webkit-mask-image: none; mask-image: none; }
	.fx-tape__track { inline-size: auto; }
	.fx-tape__track > ul { flex: 1 1 auto; flex-wrap: wrap; min-inline-size: 0; gap: var(--x-s-2) var(--x-s-6); padding: 0; }
	.fx-tape__track > ul[aria-hidden="true"],
	.fx-pause { display: none; }
}

@keyframes m-fade-in { to { opacity: 1; } }
@keyframes m-rise { from { translate: 0 var(--m-dist-3); } }
@keyframes m-rise-fade { from { opacity: 0; translate: 0 var(--m-dist-3); } }
@keyframes m-unveil { from { clip-path: inset(0 0 100% 0); translate: 0 var(--m-dist-3); } }
@keyframes m-reveal { from { opacity: .6; translate: 0 var(--m-dist-4); } }
@keyframes m-spin { to { rotate: 1turn; } }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-sweep { from { translate: calc(-120% * var(--m-dir)) 0; } to { translate: calc(120% * var(--m-dir)) 0; } }
@keyframes m-shimmer { from { translate: calc(-100% * var(--m-dir)) 0; } to { translate: calc(100% * var(--m-dir)) 0; } }
@keyframes m-tape { to { translate: calc(-50% * var(--m-dir)) 0; } }
@keyframes m-vt-in { from { opacity: 0; translate: calc(var(--m-dist-3) * var(--m-dir)) 0; } }
@keyframes m-vt-out { to { opacity: 0; translate: calc(var(--m-dist-3) * -1 * var(--m-dir)) 0; } }
@keyframes m-vt-in-back { from { opacity: 0; translate: calc(var(--m-dist-3) * -1 * var(--m-dir)) 0; } }
@keyframes m-vt-out-back { to { opacity: 0; translate: calc(var(--m-dist-3) * var(--m-dir)) 0; } }

/* ---------------------------------------------------------------------------
 * 5. Guards: reduced motion (R11) and print (R12). Only the scroll-linked header shadow stays under reduced motion.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	:is([class^="fx-"], [class*=" fx-"]),
	:is([class^="fx-"], [class*=" fx-"])::before,
	:is([class^="fx-"], [class*=" fx-"]):not(.fx-scroll-shadow)::after,
	.fx-draw [pathLength] {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}