/**
 * EMOBILITY FOR ALL - storefront design system.
 *
 * Registered (not auto-enqueued) by public/class-frontend.php; later phases
 * (homepage, product archive/single, cart, checkout, account, ...)
 * wp_enqueue_style( Frontend::STYLE_HANDLE ) only on the templates that
 * need it, per the performance requirement.
 *
 * Organized as:
 *   1. Design tokens (custom properties)
 *   2. Reset / base element styles
 *   3. Layout primitives (container, grid, section)
 *   4. Typography utilities
 *   5. Components (buttons, forms, cards, badges, price, alerts,
 *      breadcrumbs, pagination, tabs, spinner)
 *   6. Utility classes
 *   7. Icons
 *   8. Header & navigation (incl. mobile off-canvas menu)
 *   9. Footer
 *
 * Breakpoints are documented here (custom properties can't be read inside
 * @media conditions) and used consistently in every media query below:
 *   sm: 576px   md: 768px   lg: 992px   xl: 1200px
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */

:root {
	/* Primary - "charged blue". 500 is the base brand color. */
	--emobility-primary-50: #eff6ff;
	--emobility-primary-100: #dbeafe;
	--emobility-primary-200: #bfdbfe;
	--emobility-primary-300: #93c5fd;
	--emobility-primary-400: #60a5fa;
	--emobility-primary-500: #2f6fed;
	--emobility-primary-600: #1d4ed8;
	--emobility-primary-700: #1e3a8a;
	--emobility-primary-800: #172554;
	--emobility-primary-900: #0f172a;

	/* Accent - "volt green". Used sparingly for energy/CTA moments. */
	--emobility-accent-50: #f3fce8;
	--emobility-accent-100: #e3f9c5;
	--emobility-accent-200: #cdf391;
	--emobility-accent-300: #aee85a;
	--emobility-accent-400: #92db2e;
	--emobility-accent-500: #7bc71b;
	--emobility-accent-600: #5fa112;
	--emobility-accent-700: #497c10;
	--emobility-accent-800: #3b6212;
	--emobility-accent-900: #325213;

	/* Neutrals. */
	--emobility-gray-50: #f8fafc;
	--emobility-gray-100: #f1f5f9;
	--emobility-gray-200: #e2e8f0;
	--emobility-gray-300: #cbd5e1;
	--emobility-gray-400: #94a3b8;
	--emobility-gray-500: #64748b;
	--emobility-gray-600: #475569;
	--emobility-gray-700: #334155;
	--emobility-gray-800: #1e293b;
	--emobility-gray-900: #0f172a;
	--emobility-white: #ffffff;

	/* Semantic colors - distinct from the brand accent so status meaning
	   never gets confused with "on sale"/"featured" merchandising. */
	--emobility-success: #16a34a;
	--emobility-success-bg: #f0fdf4;
	--emobility-danger: #dc2626;
	--emobility-danger-bg: #fef2f2;
	--emobility-warning: #d97706;
	--emobility-warning-bg: #fffbeb;
	--emobility-info: #2563eb;
	--emobility-info-bg: #eff6ff;

	/* Header-only brand accents - the storefront header's dark bars, sale
	   pills, logo icon cluster, and "My Portal" button use a distinct
	   palette from the rest of the design system on purpose (it matches the
	   reference storefront's chrome), so they're kept separate from the
	   tokens above rather than reusing --emobility-primary-900 (a navy, not
	   the near-black this header needs) or --emobility-gray-*. */
	--emobility-header-bg: #1a1a1a;
	--emobility-header-border: #2e2e2e;
	--emobility-header-text-muted: #a3a3a3;
	--emobility-sale-bar-bg: #5a8f2e;
	--emobility-portal-bg: #14a3a0;
	--emobility-portal-bg-hover: #0d8a87;
	--emobility-category-icon-orange: #f2892f;
	--emobility-category-icon-dark: #3a3a3a;
	--emobility-category-icon-blue: #2fa9cf;
	--emobility-category-icon-green: #5a8f2e;
	--emobility-search-focus: #29b6d8;

	/* Surface / text roles - one indirection so a future theming pass
	   only has to change these, not every component. */
	--emobility-color-text: var(--emobility-gray-800);
	--emobility-color-text-muted: var(--emobility-gray-500);
	--emobility-color-text-on-primary: var(--emobility-white);
	--emobility-color-heading: var(--emobility-gray-900);
	--emobility-color-border: var(--emobility-gray-200);
	--emobility-color-surface: var(--emobility-white);
	--emobility-color-surface-muted: var(--emobility-gray-50);
	--emobility-color-link: var(--emobility-primary-600);
	--emobility-color-link-hover: var(--emobility-primary-700);
	--emobility-color-focus-ring: var(--emobility-primary-400);

	/* Product card border - a light cyan/teal outline distinct from the
	   neutral --emobility-color-border used elsewhere, matching the
	   storefront's product-grid design reference. */
	--emobility-card-border-accent: #a3e4ea;
	--emobility-card-border-accent-hover: #6fcdd6;

	/* Typography. System font stack: zero network requests, matches
	   admin.css, keeps storefront pages fast on first paint. */
	--emobility-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--emobility-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--emobility-text-xs: 0.75rem;
	--emobility-text-sm: 0.875rem;
	--emobility-text-base: 1rem;
	--emobility-text-lg: 1.125rem;
	--emobility-text-xl: 1.25rem;
	--emobility-text-2xl: 1.5rem;
	--emobility-text-3xl: 1.875rem;
	--emobility-text-4xl: 2.25rem;

	--emobility-leading-tight: 1.2;
	--emobility-leading-normal: 1.5;
	--emobility-leading-relaxed: 1.7;

	--emobility-font-weight-normal: 400;
	--emobility-font-weight-medium: 500;
	--emobility-font-weight-semibold: 600;
	--emobility-font-weight-bold: 700;

	/* Spacing scale (4px base unit). */
	--emobility-space-1: 0.25rem;
	--emobility-space-2: 0.5rem;
	--emobility-space-3: 0.75rem;
	--emobility-space-4: 1rem;
	--emobility-space-5: 1.25rem;
	--emobility-space-6: 1.5rem;
	--emobility-space-8: 2rem;
	--emobility-space-10: 2.5rem;
	--emobility-space-12: 3rem;
	--emobility-space-16: 4rem;

	/* Radii, shadows, borders, transitions. */
	--emobility-radius-sm: 4px;
	--emobility-radius-md: 8px;
	--emobility-radius-lg: 12px;
	--emobility-radius-full: 9999px;

	--emobility-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--emobility-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--emobility-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

	--emobility-border-width: 1px;
	--emobility-transition-fast: 120ms ease;
	--emobility-transition-base: 200ms ease;

	/* Layout. */
	--emobility-container-max: 1200px;
	--emobility-container-padding: var(--emobility-space-4);

	/* Z-index scale - named layers so later phases never guess a number. */
	--emobility-z-dropdown: 1000;
	--emobility-z-sticky: 1010;
	--emobility-z-modal: 1050;
	--emobility-z-toast: 1080;
}

/* ------------------------------------------------------------------ */
/* 2. Reset / base element styles                                      */
/*    Scoped under .emobility-for-all-root so the plugin never resets  */
/*    the surrounding theme's global element styles.                   */
/* ------------------------------------------------------------------ */

.emobility-for-all-root {
	font-family: var(--emobility-font-sans);
	font-size: var(--emobility-text-base);
	line-height: var(--emobility-leading-normal);
	color: var(--emobility-color-text);
}

.emobility-for-all-root *,
.emobility-for-all-root *::before,
.emobility-for-all-root *::after {
	box-sizing: border-box;
}

.emobility-for-all-root img,
.emobility-for-all-root svg,
.emobility-for-all-root video {
	max-width: 100%;
	height: auto;
	display: block;
}

.emobility-for-all-root h1,
.emobility-for-all-root h2,
.emobility-for-all-root h3,
.emobility-for-all-root h4,
.emobility-for-all-root h5,
.emobility-for-all-root h6 {
	color: var(--emobility-color-heading);
	font-weight: var(--emobility-font-weight-semibold);
	line-height: var(--emobility-leading-tight);
	margin: 0 0 var(--emobility-space-4);
}

.emobility-for-all-root h1 {
	font-size: var(--emobility-text-4xl);
}

.emobility-for-all-root h2 {
	font-size: var(--emobility-text-3xl);
}

.emobility-for-all-root h3 {
	font-size: var(--emobility-text-2xl);
}

.emobility-for-all-root h4 {
	font-size: var(--emobility-text-xl);
}

.emobility-for-all-root h5 {
	font-size: var(--emobility-text-lg);
}

.emobility-for-all-root h6 {
	font-size: var(--emobility-text-base);
}

.emobility-for-all-root p {
	margin: 0 0 var(--emobility-space-4);
}

.emobility-for-all-root a {
	color: var(--emobility-color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* `.emobility-btn` is also used on <a> elements (CTAs styled as buttons,
   e.g. the homepage hero/section actions) - the generic anchor rule above
   has higher specificity (.emobility-for-all-root a) than `.emobility-btn`'s
   own color rules (a single class), so without this override every anchor
   button would render in link-blue/underlined instead of its variant's
   actual color regardless of source order. */
.emobility-for-all-root a.emobility-btn {
	text-decoration: none;
}

.emobility-for-all-root a.emobility-btn--primary {
	color: var(--emobility-color-text-on-primary);
}

.emobility-for-all-root a.emobility-btn--accent {
	color: var(--emobility-primary-900);
}

.emobility-for-all-root a.emobility-btn--outline,
.emobility-for-all-root a.emobility-btn--ghost {
	color: var(--emobility-color-text);
}

.emobility-for-all-root a.emobility-btn--danger {
	color: var(--emobility-color-text-on-primary);
}

.emobility-for-all-root a:hover {
	color: var(--emobility-color-link-hover);
}

.emobility-for-all-root :focus-visible {
	outline: 2px solid var(--emobility-color-focus-ring);
	outline-offset: 2px;
}

.emobility-for-all-root hr {
	border: none;
	border-top: var(--emobility-border-width) solid var(--emobility-color-border);
	margin: var(--emobility-space-8) 0;
}

/* ------------------------------------------------------------------ */
/* 3. Layout primitives                                                 */
/* ------------------------------------------------------------------ */

.emobility-container {
	max-width: var(--emobility-container-max);
	margin-inline: auto;
	padding-inline: var(--emobility-container-padding);
}

.emobility-section {
	padding-block: var(--emobility-space-8);
}

@media (min-width: 768px) {
	.emobility-section {
		padding-block: var(--emobility-space-12);
	}
}

.emobility-grid {
	display: grid;
	gap: var(--emobility-space-6);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 576px) {
	.emobility-grid--2-up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.emobility-grid--3-up {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 576px) {
	.emobility-grid--4-up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.emobility-grid--4-up {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.emobility-flex {
	display: flex;
}

.emobility-flex--center {
	align-items: center;
}

.emobility-flex--between {
	justify-content: space-between;
}

.emobility-flex--wrap {
	flex-wrap: wrap;
}

.emobility-flex--gap-2 {
	gap: var(--emobility-space-2);
}

.emobility-flex--gap-4 {
	gap: var(--emobility-space-4);
}

/* ------------------------------------------------------------------ */
/* 4. Typography utilities                                              */
/* ------------------------------------------------------------------ */

.emobility-text-xs { font-size: var(--emobility-text-xs); }
.emobility-text-sm { font-size: var(--emobility-text-sm); }
.emobility-text-lg { font-size: var(--emobility-text-lg); }
.emobility-text-xl { font-size: var(--emobility-text-xl); }

.emobility-text-muted {
	color: var(--emobility-color-text-muted);
}

.emobility-text-bold {
	font-weight: var(--emobility-font-weight-bold);
}

.emobility-eyebrow {
	display: block;
	font-size: var(--emobility-text-xs);
	font-weight: var(--emobility-font-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--emobility-primary-600);
	margin-bottom: var(--emobility-space-2);
}

/* ------------------------------------------------------------------ */
/* 5. Components                                                       */
/* ------------------------------------------------------------------ */

/* --- Buttons -------------------------------------------------------- */

.emobility-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--emobility-space-2);
	font-family: inherit;
	font-size: var(--emobility-text-sm);
	font-weight: var(--emobility-font-weight-semibold);
	line-height: 1;
	white-space: nowrap;
	padding: var(--emobility-space-3) var(--emobility-space-5);
	border-radius: var(--emobility-radius-md);
	border: var(--emobility-border-width) solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--emobility-transition-fast), border-color var(--emobility-transition-fast), color var(--emobility-transition-fast);
}

.emobility-btn:hover {
	text-decoration: none;
}

.emobility-btn:disabled,
.emobility-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.emobility-btn--primary {
	background: var(--emobility-primary-600);
	border-color: var(--emobility-primary-600);
	color: var(--emobility-color-text-on-primary);
}

.emobility-btn--primary:hover {
	background: var(--emobility-primary-700);
	border-color: var(--emobility-primary-700);
	color: var(--emobility-color-text-on-primary);
}

.emobility-btn--accent {
	background: var(--emobility-accent-500);
	border-color: var(--emobility-accent-500);
	color: var(--emobility-primary-900);
}

.emobility-btn--accent:hover {
	background: var(--emobility-accent-600);
	border-color: var(--emobility-accent-600);
	color: var(--emobility-primary-900);
}

.emobility-btn--outline {
	background: transparent;
	border-color: var(--emobility-gray-300);
	color: var(--emobility-color-text);
}

.emobility-btn--outline:hover {
	background: var(--emobility-gray-50);
	border-color: var(--emobility-gray-400);
	color: var(--emobility-color-text);
}

.emobility-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--emobility-primary-600);
}

.emobility-btn--ghost:hover {
	background: var(--emobility-primary-50);
	color: var(--emobility-primary-700);
}

.emobility-btn--danger {
	background: var(--emobility-danger);
	border-color: var(--emobility-danger);
	color: var(--emobility-color-text-on-primary);
}

.emobility-btn--sm {
	padding: var(--emobility-space-2) var(--emobility-space-3);
	font-size: var(--emobility-text-xs);
}

.emobility-btn--lg {
	padding: var(--emobility-space-4) var(--emobility-space-6);
	font-size: var(--emobility-text-base);
}

.emobility-btn--block {
	display: flex;
	width: 100%;
}

/* --- Forms ------------------------------------------------------------ */

.emobility-field {
	margin-bottom: var(--emobility-space-4);
}

.emobility-label {
	display: block;
	font-size: var(--emobility-text-sm);
	font-weight: var(--emobility-font-weight-medium);
	color: var(--emobility-color-text);
	margin-bottom: var(--emobility-space-2);
}

.emobility-label__optional {
	color: var(--emobility-color-text-muted);
	font-weight: var(--emobility-font-weight-normal);
}

.emobility-input,
.emobility-select,
.emobility-textarea {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: var(--emobility-text-sm);
	color: var(--emobility-color-text);
	background: var(--emobility-color-surface);
	border: var(--emobility-border-width) solid var(--emobility-gray-300);
	border-radius: var(--emobility-radius-md);
	padding: var(--emobility-space-3) var(--emobility-space-4);
	transition: border-color var(--emobility-transition-fast), box-shadow var(--emobility-transition-fast);
}

.emobility-textarea {
	min-height: 8rem;
	resize: vertical;
}

.emobility-input:focus,
.emobility-select:focus,
.emobility-textarea:focus {
	outline: none;
	border-color: var(--emobility-primary-500);
	box-shadow: 0 0 0 3px var(--emobility-primary-100);
}

.emobility-input.is-invalid,
.emobility-select.is-invalid,
.emobility-textarea.is-invalid {
	border-color: var(--emobility-danger);
}

.emobility-field-error {
	display: block;
	margin-top: var(--emobility-space-2);
	font-size: var(--emobility-text-xs);
	color: var(--emobility-danger);
}

.emobility-field-hint {
	display: block;
	margin-top: var(--emobility-space-2);
	font-size: var(--emobility-text-xs);
	color: var(--emobility-color-text-muted);
}

.emobility-checkbox,
.emobility-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--emobility-space-2);
	font-size: var(--emobility-text-sm);
	cursor: pointer;
}

.emobility-checkbox input,
.emobility-radio input {
	width: 1rem;
	height: 1rem;
	accent-color: var(--emobility-primary-600);
}

/* Quantity stepper - static markup below, +/- behavior wired by
   initQuantityStepper() in public.js. */

.emobility-qty {
	display: inline-flex;
	align-items: stretch;
	border: var(--emobility-border-width) solid var(--emobility-gray-300);
	border-radius: var(--emobility-radius-md);
	overflow: hidden;
	width: fit-content;
}

.emobility-qty__btn {
	background: var(--emobility-gray-50);
	border: none;
	width: 2.25rem;
	font-size: var(--emobility-text-lg);
	line-height: 1;
	cursor: pointer;
	color: var(--emobility-color-text);
}

.emobility-qty__btn:hover {
	background: var(--emobility-gray-100);
}

.emobility-qty__input {
	width: 3rem;
	border: none;
	border-inline: var(--emobility-border-width) solid var(--emobility-gray-300);
	text-align: center;
	font-size: var(--emobility-text-sm);
	-moz-appearance: textfield;
}

.emobility-qty__input::-webkit-outer-spin-button,
.emobility-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* --- Cards -------------------------------------------------------------- */

.emobility-card {
	background: var(--emobility-color-surface);
	border: var(--emobility-border-width) solid var(--emobility-color-border);
	border-radius: var(--emobility-radius-lg);
	padding: var(--emobility-space-6);
}

.emobility-card--shadow {
	border-color: transparent;
	box-shadow: var(--emobility-shadow-md);
}

/* Product card - the unit later phases (homepage, archive, search
   results) repeat inside .emobility-grid. */

.emobility-product-card {
	display: flex;
	flex-direction: column;
	background: var(--emobility-color-surface);
	border: 1px solid var(--emobility-card-border-accent);
	border-radius: var(--emobility-radius-lg);
	overflow: hidden;
	transition: box-shadow var(--emobility-transition-base), border-color var(--emobility-transition-base);
	position: relative;
}

.emobility-product-card:hover {
	box-shadow: var(--emobility-shadow-md);
	border-color: var(--emobility-card-border-accent-hover);
}

.emobility-product-card__media {
	display: block;
	position: relative;
	margin: var(--emobility-space-4) var(--emobility-space-4) 0;
	aspect-ratio: 6 / 5;
	border-radius: var(--emobility-radius-md);
	overflow: hidden;
	background: var(--emobility-white);
}

.emobility-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.emobility-product-card__badges {
	position: absolute;
	top: var(--emobility-space-3);
	left: var(--emobility-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--emobility-space-2);
}

.emobility-product-card__body {
	padding: var(--emobility-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--emobility-space-1);
	flex: 1;
}

.emobility-product-card__category {
	font-size: 10px;
	color: var(--emobility-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Specificity note: `.emobility-for-all-root h3` (Typography section)
   is a class+element selector (0,1,1) which would otherwise beat this
   single-class selector (0,1,0) regardless of source order - prefixed
   with the root wrapper class here so the card's own title size always
   wins over the generic heading default. */
.emobility-for-all-root .emobility-product-card__title {
	font-size: 17px;
	font-weight: var(--emobility-font-weight-semibold);
	color: var(--emobility-color-heading);
	margin: 0;
}

.emobility-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.emobility-product-card__title a:hover {
	color: var(--emobility-primary-600);
}

.emobility-star-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--emobility-space-1);
}

.emobility-star-rating__stars {
	position: relative;
	display: inline-block;
	font-size: var(--emobility-text-sm);
	line-height: 1;
	letter-spacing: 2px;
	color: var(--emobility-gray-300);
	white-space: nowrap;
}

.emobility-star-rating__stars::before {
	content: "★★★★★";
}

.emobility-star-rating__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--emobility-accent-600);
}

.emobility-star-rating__count {
	font-size: var(--emobility-text-xs);
	color: var(--emobility-color-text-muted);
}

.emobility-product-card__stock {
	display: flex;
	align-items: center;
	gap: var(--emobility-space-2);
	font-size: var(--emobility-text-xs);
	font-weight: var(--emobility-font-weight-medium);
	margin: var(--emobility-space-1) 0;
}

.emobility-product-card__stock::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.emobility-product-card__stock--in {
	color: var(--emobility-success);
}

.emobility-product-card__stock--out {
	color: var(--emobility-gray-400);
}

.emobility-product-card__footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--emobility-space-3);
	padding-top: var(--emobility-space-1);
}

.emobility-product-card__footer .emobility-btn--outline {
	border-radius: var(--emobility-radius-sm);
	border-color: var(--emobility-color-heading);
	color: var(--emobility-color-heading);
}

.emobility-product-card__footer .emobility-btn--outline:not(:disabled):hover {
	background: var(--emobility-gray-50);
	border-color: var(--emobility-color-heading);
}

.emobility-product-card__footer .emobility-btn--outline:disabled {
	border-color: var(--emobility-gray-300);
	color: var(--emobility-gray-400);
}

/* --- Badges --------------------------------------------------------- */

.emobility-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--emobility-text-xs);
	font-weight: var(--emobility-font-weight-semibold);
	line-height: 1;
	padding: var(--emobility-space-2) var(--emobility-space-3);
	border-radius: var(--emobility-radius-full);
	white-space: nowrap;
}

.emobility-badge--sale {
	background: var(--emobility-danger-bg);
	color: var(--emobility-danger);
}

.emobility-badge--featured {
	background: var(--emobility-primary-50);
	color: var(--emobility-primary-700);
}

.emobility-badge--new {
	background: var(--emobility-accent-100);
	color: var(--emobility-accent-800);
}

.emobility-badge--out-of-stock {
	background: var(--emobility-gray-100);
	color: var(--emobility-gray-600);
}

.emobility-badge--in-stock {
	background: var(--emobility-accent-100);
	color: var(--emobility-accent-800);
}

/* --- Price ------------------------------------------------------------ */

.emobility-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--emobility-space-1) var(--emobility-space-2);
	font-weight: var(--emobility-font-weight-bold);
	color: var(--emobility-color-heading);
}

.emobility-price__regular {
	font-weight: var(--emobility-font-weight-normal);
	color: var(--emobility-color-text-muted);
	text-decoration: line-through;
}

.emobility-price--on-sale .emobility-price__sale {
	color: var(--emobility-danger);
}

.emobility-price__from {
	font-size: var(--emobility-text-xs);
	font-weight: var(--emobility-font-weight-normal);
	color: var(--emobility-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --- Empty states ---------------------------------------------------- */
/* Shared by every route with a "nothing here yet" state (Sale_Page,
   Faq_Page, Team_Page, Support_Page, ...) - lives here rather than in any
   one page-specific stylesheet so it always renders styled regardless of
   which page-specific CSS is (or isn't) also loaded. */

.emobility-empty-state {
	padding: var(--emobility-space-8);
	text-align: center;
	color: var(--emobility-color-text-muted);
	background: var(--emobility-color-surface-muted);
	border-radius: var(--emobility-radius-lg);
}

/* --- Alerts / notices --------------------------------------------------- */

.emobility-alert {
	display: flex;
	gap: var(--emobility-space-3);
	padding: var(--emobility-space-4);
	border-radius: var(--emobility-radius-md);
	border: var(--emobility-border-width) solid transparent;
	font-size: var(--emobility-text-sm);
}

.emobility-alert--success {
	background: var(--emobility-success-bg);
	color: var(--emobility-success);
	border-color: currentColor;
}

.emobility-alert--danger {
	background: var(--emobility-danger-bg);
	color: var(--emobility-danger);
	border-color: currentColor;
}

.emobility-alert--warning {
	background: var(--emobility-warning-bg);
	color: var(--emobility-warning);
	border-color: currentColor;
}

.emobility-alert--info {
	background: var(--emobility-info-bg);
	color: var(--emobility-info);
	border-color: currentColor;
}

/* --- Breadcrumbs --------------------------------------------------- */

.emobility-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emobility-space-2);
	font-size: var(--emobility-text-sm);
	color: var(--emobility-color-text-muted);
	margin-bottom: var(--emobility-space-6);
	list-style: none;
	padding: 0;
}

.emobility-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--emobility-space-2);
}

.emobility-breadcrumbs li:not(:last-child)::after {
	content: "/";
	color: var(--emobility-gray-300);
}

.emobility-breadcrumbs a {
	color: var(--emobility-color-text-muted);
	text-decoration: none;
}

.emobility-breadcrumbs a:hover {
	color: var(--emobility-primary-600);
}

.emobility-breadcrumbs [aria-current="page"] {
	color: var(--emobility-color-text);
	font-weight: var(--emobility-font-weight-medium);
}

/* --- Pagination ---------------------------------------------------- */

.emobility-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emobility-space-2);
	list-style: none;
	padding: 0;
	margin: var(--emobility-space-8) 0 0;
}

.emobility-pagination a,
.emobility-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--emobility-space-2);
	border-radius: var(--emobility-radius-md);
	border: var(--emobility-border-width) solid var(--emobility-color-border);
	font-size: var(--emobility-text-sm);
	text-decoration: none;
	color: var(--emobility-color-text);
}

.emobility-pagination a:hover {
	border-color: var(--emobility-primary-400);
	color: var(--emobility-primary-600);
}

.emobility-pagination .is-current {
	background: var(--emobility-primary-600);
	border-color: var(--emobility-primary-600);
	color: var(--emobility-color-text-on-primary);
}

.emobility-pagination .is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* --- Tabs ------------------------------------------------------------ */
/* Structure + [hidden] toggling wired by initTabs() in public.js. */

.emobility-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emobility-space-2);
	border-bottom: var(--emobility-border-width) solid var(--emobility-color-border);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--emobility-space-6);
}

.emobility-tabs__tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: var(--emobility-space-3) var(--emobility-space-4);
	margin-bottom: -1px;
	font: inherit;
	font-weight: var(--emobility-font-weight-medium);
	color: var(--emobility-color-text-muted);
	cursor: pointer;
}

.emobility-tabs__tab:hover {
	color: var(--emobility-color-text);
}

.emobility-tabs__tab[aria-selected="true"] {
	color: var(--emobility-primary-600);
	border-bottom-color: var(--emobility-primary-600);
}

/* --- Spinner --------------------------------------------------------- */

.emobility-spinner {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--emobility-gray-200);
	border-top-color: var(--emobility-primary-600);
	border-radius: 50%;
	animation: emobility-spin 700ms linear infinite;
}

@keyframes emobility-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.emobility-spinner {
		animation-duration: 1500ms;
	}
}

/* --- Toast (Add to Cart feedback) -------------------------------------- */
/* Not scoped under .emobility-for-all-root: appended straight to <body> by
   public.js's announce() so it works from any page a product card renders
   on, independent of which storefront template owns the surrounding markup. */

.emobility-toast {
	position: fixed;
	left: 50%;
	bottom: var(--emobility-space-6);
	transform: translate(-50%, 1rem);
	z-index: var(--emobility-z-toast);
	max-width: calc(100vw - 2 * var(--emobility-space-4));
	padding: var(--emobility-space-3) var(--emobility-space-5);
	background: var(--emobility-gray-900);
	color: var(--emobility-white);
	font-family: var(--emobility-font-sans);
	font-size: var(--emobility-text-sm);
	border-radius: var(--emobility-radius-md);
	box-shadow: var(--emobility-shadow-lg);
	opacity: 0;
	transition: opacity var(--emobility-transition-base), transform var(--emobility-transition-base);
	pointer-events: none;
}

.emobility-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.emobility-toast {
		transition: opacity var(--emobility-transition-fast);
		transform: translate(-50%, 0);
	}
}

/* ------------------------------------------------------------------ */
/* 6. Utility classes                                                   */
/* ------------------------------------------------------------------ */

/* Locks background scroll behind a full-screen overlay - the archive's
   mobile filter drawer and the product page's image lightbox both use it.
   Unconditional at every width: the drawer's own toggle button is already
   hidden by archive.css at its lg+ breakpoint (the sidebar is static there),
   so this can never fire while the drawer itself isn't reachable, and the
   lightbox needs the lock at every breakpoint. */
body.emobility-no-scroll {
	overflow: hidden;
}

.emobility-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 7. Icons                                                             */
/*    CSS-masked inline SVGs so icons inherit currentColor and cost no */
/*    extra network request or icon-font dependency.                   */
/* ------------------------------------------------------------------ */

.emobility-icon {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	flex-shrink: 0;
}

.emobility-icon--search {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

.emobility-icon--account {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='4'%3E%3C/circle%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='4'%3E%3C/circle%3E%3Cpath d='M4.5 21a7.5 7.5 0 0 1 15 0'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--cart {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--phone {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}

/* Social platform icons (top bar) - filled/simplified pictograms so they
   read clearly at a small size against the dark top bar. */

.emobility-icon--facebook {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--instagram {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'%3E%3C/line%3E%3C/svg%3E");
}

.emobility-icon--tiktok {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.5 2c.3 2.1 1.7 3.7 4 4v3c-1.4 0-2.8-.4-4-1.2v6.7a5.5 5.5 0 1 1-5.5-5.5c.2 0 .5 0 .7.1v3.1a2.4 2.4 0 1 0 1.8 2.3V2h3z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.5 2c.3 2.1 1.7 3.7 4 4v3c-1.4 0-2.8-.4-4-1.2v6.7a5.5 5.5 0 1 1-5.5-5.5c.2 0 .5 0 .7.1v3.1a2.4 2.4 0 1 0 1.8 2.3V2h3z'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--youtube {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='4'%3E%3C/rect%3E%3Cpolygon points='10 9 16 12 10 15 10 9' fill='%23000' stroke='none'%3E%3C/polygon%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='4'%3E%3C/rect%3E%3Cpolygon points='10 9 16 12 10 15 10 9' fill='%23000' stroke='none'%3E%3C/polygon%3E%3C/svg%3E");
}

.emobility-icon--twitter {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 2H22l-7.6 8.7L23.3 22h-7.1l-5.6-6.7L4.2 22H1l8.1-9.3L0.9 2H8.2l5 6.2L18.9 2zm-1.2 18h1.9L6.4 3.9H4.4L17.7 20z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 2H22l-7.6 8.7L23.3 22h-7.1l-5.6-6.7L4.2 22H1l8.1-9.3L0.9 2H8.2l5 6.2L18.9 2zm-1.2 18h1.9L6.4 3.9H4.4L17.7 20z'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--linkedin {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05C20.86 8.65 22 11 22 14.1V21h-4v-6.1c0-1.46-.03-3.33-2.03-3.33-2.03 0-2.34 1.59-2.34 3.23V21H9z'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05C20.86 8.65 22 11 22 14.1V21h-4v-6.1c0-1.46-.03-3.33-2.03-3.33-2.03 0-2.34 1.59-2.34 3.23V21H9z'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--chevron-down {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Vehicle pictograms making up the logo's icon cluster. */

.emobility-icon--scooter {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'%3E%3C/circle%3E%3Ccircle cx='18' cy='18' r='2.5'%3E%3C/circle%3E%3Cpath d='M6 18h9l3-9h2M12 9h4'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'%3E%3C/circle%3E%3Ccircle cx='18' cy='18' r='2.5'%3E%3C/circle%3E%3Cpath d='M6 18h9l3-9h2M12 9h4'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--motorcycle {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='3'%3E%3C/circle%3E%3Ccircle cx='19' cy='17' r='3'%3E%3C/circle%3E%3Cpath d='M5 17h6l2-5h4l2 3M11 12L9 8H6'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='17' r='3'%3E%3C/circle%3E%3Ccircle cx='19' cy='17' r='3'%3E%3C/circle%3E%3Cpath d='M5 17h6l2-5h4l2 3M11 12L9 8H6'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--bicycle {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17.5' r='3.5'%3E%3C/circle%3E%3Ccircle cx='18.5' cy='17.5' r='3.5'%3E%3C/circle%3E%3Cpath d='M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM12 17.5V14l-3-3 4-3 2 3h2'%3E%3C/path%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17.5' r='3.5'%3E%3C/circle%3E%3Ccircle cx='18.5' cy='17.5' r='3.5'%3E%3C/circle%3E%3Cpath d='M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM12 17.5V14l-3-3 4-3 2 3h2'%3E%3C/path%3E%3C/svg%3E");
}

.emobility-icon--car {
	mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1.5-4.5A2 2 0 0 1 6.4 7h11.2a2 2 0 0 1 1.9 1.5L21 13v5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'%3E%3C/path%3E%3Ccircle cx='7' cy='18' r='1.5'%3E%3C/circle%3E%3Ccircle cx='17' cy='18' r='1.5'%3E%3C/circle%3E%3C/svg%3E");
	-webkit-mask-image: 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-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1.5-4.5A2 2 0 0 1 6.4 7h11.2a2 2 0 0 1 1.9 1.5L21 13v5a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H6v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'%3E%3C/path%3E%3Ccircle cx='7' cy='18' r='1.5'%3E%3C/circle%3E%3Ccircle cx='17' cy='18' r='1.5'%3E%3C/circle%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* 8. Header & navigation                                              */
/* ------------------------------------------------------------------ */

.emobility-top-bar {
	background: var(--emobility-header-bg);
	color: var(--emobility-gray-300);
	font-size: var(--emobility-text-xs);
}

.emobility-top-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--emobility-space-2) var(--emobility-space-4);
	padding-block: var(--emobility-space-2);
	text-align: center;
}

@media (min-width: 768px) {
	.emobility-top-bar__inner {
		justify-content: space-between;
	}
}

.emobility-top-bar__welcome {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.emobility-top-bar__social {
	display: flex;
	align-items: center;
	gap: var(--emobility-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.emobility-top-bar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--emobility-white);
	text-decoration: none;
}

.emobility-top-bar__social .emobility-icon {
	width: 1rem;
	height: 1rem;
}

.emobility-top-bar__social a:hover {
	color: var(--emobility-accent-400);
}

/* Full-width sale announcement strip, its own bar beneath the welcome/
   social top bar (rather than sharing that bar, per the reference design's
   two visually distinct strips). */

.emobility-announcement-bar {
	background: var(--emobility-sale-bar-bg);
	color: var(--emobility-white);
	text-align: center;
}

.emobility-announcement-bar__text {
	display: inline-block;
	padding-block: var(--emobility-space-2);
	font-size: var(--emobility-text-sm);
	font-weight: var(--emobility-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Fixed wrapper for the whole header stack (welcome/social top bar, sale
   announcement bar, branding row, and primary nav) - kept as one shared
   container rather than fixing .emobility-header alone, so every part of
   the header stays visible together while scrolling.

   `position: fixed` (not `sticky`) is deliberate: this markup renders
   straight into a full HTML document (see front-page.php and friends) whose
   <head> still pulls in the active theme's stylesheet via wp_head(), and
   themes/page builders very commonly set `overflow` (e.g. to clip
   horizontal scroll) on `html`/`body` - which silently turns `position:
   sticky` back into `static` for every descendant, however deep, with no
   way for this stylesheet to detect or override it. `position: fixed` only
   breaks under an ancestor `transform`/`filter`/`perspective`/`will-change`,
   none of which this plugin's own markup sets between the header and the
   viewport, so it stays anchored regardless of the active theme's overflow
   rules - fixing the "header scrolls away with the page" symptom that
   `sticky` couldn't reliably avoid here.

   Fixing it removes the header from normal flow entirely (not just once
   scrolled, like sticky did), so `body` below gets padding-top equal to its
   real rendered height to avoid the very first bit of page content starting
   out hidden underneath it.

   `--emobility-header-offset` is kept in sync with this element's rendered
   height by initStickyHeader() (public.js) via ResizeObserver, since the top
   bar/announcement bar are conditionally rendered and the primary nav row
   only appears at the lg breakpoint - the `body` padding below, `html`'s
   scroll-padding-top (so in-page anchor links, e.g. shipping-returns.php's
   jump nav, don't land under the header) and the mobile off-canvas panel's
   own sizing all rely on the real, current value rather than a guessed
   constant. */

:root {
	--emobility-header-offset: 0px;
}

body {
	padding-top: var(--emobility-header-offset);
}

html {
	scroll-padding-top: var(--emobility-header-offset);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.emobility-header-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--emobility-z-sticky);
}

/* The WordPress admin toolbar is also `position: fixed; top: 0`, fixed to
   the viewport the same way - without this, it would sit directly behind
   (or in front of, depending on markup order) the header instead of above
   it. hide_admin_bar_for_customers() (class-frontend.php) already hides the
   toolbar for logged-in non-admins, so this only ever matters for admins/
   staff browsing the storefront while logged in. */
body.admin-bar .emobility-header-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .emobility-header-sticky {
		top: 46px;
	}
}

/* Shadow cue (toggled by initStickyHeader() once the page is scrolled) that
   the header is now floating above page content rather than sitting inline
   with it. */
.emobility-header-sticky.is-scrolled {
	box-shadow: var(--emobility-shadow-md);
}

.emobility-header {
	background: var(--emobility-color-surface);
	border-bottom: var(--emobility-border-width) solid var(--emobility-color-border);
}

.emobility-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--emobility-space-4) var(--emobility-space-6);
	padding-block: var(--emobility-space-4);
}

/* Branding-row site logo: the four colored vehicle pictograms clustered
   together as one mark, wrapped in a single home link (not four separate
   links to different category pages). */

.emobility-header__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

a.emobility-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.emobility-logo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--emobility-radius-full);
	color: var(--emobility-white);
	flex-shrink: 0;
	margin-left: -0.5rem;
	border: 2px solid var(--emobility-color-surface);
}

.emobility-logo-icon:first-child {
	margin-left: 0;
}

.emobility-logo-icon .emobility-icon {
	width: 1.4rem;
	height: 1.4rem;
}

.emobility-logo-icon--orange {
	background: var(--emobility-category-icon-orange);
}

.emobility-logo-icon--dark {
	background: var(--emobility-category-icon-dark);
}

.emobility-logo-icon--blue {
	background: var(--emobility-category-icon-blue);
}

.emobility-logo-icon--green {
	background: var(--emobility-category-icon-green);
}

/* Primary nav bar: full-width dark strip wrapping .emobility-nav so the
   bar's background always spans the viewport while the links themselves
   stay aligned to the same container as the rest of the header. */

.emobility-nav-bar {
	display: none;
	background: var(--emobility-header-bg);
	border-top: var(--emobility-border-width) solid var(--emobility-header-border);
}

@media (min-width: 992px) {
	.emobility-nav-bar {
		display: block;
	}
}

.emobility-nav {
	display: none;
}

.emobility-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--emobility-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.emobility-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

a.emobility-nav__link {
	display: inline-flex;
	align-items: center;
	padding-block: var(--emobility-space-3);
	font-size: var(--emobility-text-sm);
	font-weight: var(--emobility-font-weight-semibold);
	color: var(--emobility-gray-100);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.emobility-nav__link:hover {
	color: var(--emobility-accent-400);
}

/* "Sale" / "Summer Sale!" colored pill links (leading nav items). */

a.emobility-nav__link--pill {
	padding: var(--emobility-space-1) var(--emobility-space-3);
	border-radius: var(--emobility-radius-sm);
	color: var(--emobility-white);
}

.emobility-nav__link--pill:hover {
	color: var(--emobility-white);
	opacity: 0.9;
}

.emobility-nav__link--pill-orange {
	background: var(--emobility-category-icon-orange);
}

/* "My Portal" - pinned to the end of the nav row as a solid button. */

.emobility-nav__item--portal {
	margin-left: auto;
}

a.emobility-nav__link--portal {
	padding: var(--emobility-space-2) var(--emobility-space-5);
	background: var(--emobility-portal-bg);
	color: var(--emobility-white);
}

.emobility-nav__link--portal:hover {
	background: var(--emobility-portal-bg-hover);
	color: var(--emobility-white);
}

.emobility-nav__toggle {
	display: none;
}

.emobility-nav .emobility-nav__submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	background: var(--emobility-color-surface);
	border: var(--emobility-border-width) solid var(--emobility-color-border);
	border-radius: var(--emobility-radius-md);
	box-shadow: var(--emobility-shadow-md);
	padding: var(--emobility-space-2);
	margin: 0;
	list-style: none;
	z-index: var(--emobility-z-dropdown);
}

.emobility-nav .emobility-nav__item--has-children:hover > .emobility-nav__submenu,
.emobility-nav .emobility-nav__item--has-children:focus-within > .emobility-nav__submenu,
.emobility-nav .emobility-nav__item--has-children.is-open > .emobility-nav__submenu {
	display: block;
}

.emobility-nav .emobility-nav__submenu .emobility-nav__item {
	position: static;
	display: block;
}

.emobility-nav .emobility-nav__submenu .emobility-nav__link {
	display: block;
	padding: var(--emobility-space-2) var(--emobility-space-3);
	border-radius: var(--emobility-radius-sm);
	color: var(--emobility-color-text);
	font-weight: var(--emobility-font-weight-medium);
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
}

.emobility-nav .emobility-nav__submenu .emobility-nav__link:hover {
	background: var(--emobility-color-surface-muted);
	color: var(--emobility-color-text);
}

.emobility-nav .emobility-nav__submenu .emobility-nav__submenu {
	top: 0;
	left: 100%;
}

@media (min-width: 992px) {
	.emobility-nav {
		display: block;
	}
}

/* Header utility icons (search / account / cart / menu toggle). */

.emobility-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--emobility-space-4);
}

/* Below the search breakpoint, .emobility-search (which normally supplies
   the margin-left: auto that pushes everything after it to the right) is
   display: none and drops out of the flex layout entirely, so its auto
   margin no longer does anything - without this, the account/cart/menu
   icons sit flush against the logo instead of the row's right edge. */
@media (max-width: 767.98px) {
	.emobility-header__actions {
		margin-left: auto;
	}
}

.emobility-search {
	position: relative;
	display: none;
	align-items: stretch;
	flex: 0 1 34rem;
	margin-left: auto;
	border: var(--emobility-border-width) solid var(--emobility-search-focus);
	border-radius: var(--emobility-radius-sm);
	overflow: hidden;
	background: var(--emobility-color-surface);
}

@media (min-width: 768px) {
	.emobility-search {
		display: flex;
	}
}

.emobility-search--mobile {
	display: flex;
	margin-bottom: var(--emobility-space-4);
	max-width: none;
}

.emobility-search__type {
	flex-shrink: 0;
	max-width: 9.5rem;
	font-family: inherit;
	font-size: var(--emobility-text-sm);
	color: var(--emobility-color-text);
	background: var(--emobility-color-surface-muted);
	border: none;
	border-right: var(--emobility-border-width) solid var(--emobility-color-border);
	padding: 0 var(--emobility-space-3);
}

.emobility-search__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: var(--emobility-text-sm);
	color: var(--emobility-color-text);
	background: var(--emobility-color-surface);
	border: none;
	padding: var(--emobility-space-2) var(--emobility-space-4);
}

.emobility-search__input:focus {
	outline: none;
}

.emobility-search:focus-within {
	box-shadow: 0 0 0 3px rgba(41, 182, 216, 0.25);
}

.emobility-search__submit {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--emobility-space-2);
	padding: 0 var(--emobility-space-5);
	background: var(--emobility-header-bg);
	border: none;
	color: var(--emobility-white);
	font-size: var(--emobility-text-sm);
	font-weight: var(--emobility-font-weight-semibold);
	cursor: pointer;
}

.emobility-search__submit .emobility-icon {
	background-color: var(--emobility-white);
}

.emobility-search__submit:hover {
	background: var(--emobility-header-border);
}

/* Phone/email stack. */

.emobility-header__contact {
	display: none;
	flex-direction: column;
	line-height: 1.35;
	flex-shrink: 0;
}

@media (min-width: 1200px) {
	.emobility-header__contact {
		display: flex;
	}
}

a.emobility-header__contact-line {
	font-size: var(--emobility-text-sm);
	color: var(--emobility-color-text);
	text-decoration: none;
	white-space: nowrap;
}

.emobility-header__contact-line--phone {
	font-weight: var(--emobility-font-weight-semibold);
}

a.emobility-header__contact-line--email {
	color: var(--emobility-color-text-muted);
}

.emobility-header__contact-line:hover {
	color: var(--emobility-primary-600);
}

a.emobility-header__icon-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--emobility-space-2);
	color: var(--emobility-color-text);
	text-decoration: none;
}

.emobility-header__icon-link .emobility-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.emobility-header__icon-link:hover {
	color: var(--emobility-primary-600);
}

.emobility-header__cart {
	position: relative;
}

.emobility-header__cart-count {
	position: absolute;
	top: -0.5rem;
	left: 0.75rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 var(--emobility-space-1);
	background: var(--emobility-accent-500);
	color: var(--emobility-primary-900);
	font-size: 0.65rem;
	line-height: 1.1rem;
	text-align: center;
}

.emobility-header__cart-count.is-empty {
	display: none;
}

/* Mobile menu toggle: three bars drawn with box-shadow, no SVG needed. */

.emobility-header__menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--emobility-color-text);
}

@media (min-width: 992px) {
	.emobility-header__menu-toggle {
		display: none;
	}
}

.emobility-header__menu-icon,
.emobility-header__menu-icon::before,
.emobility-header__menu-icon::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--emobility-transition-fast), opacity var(--emobility-transition-fast);
}

.emobility-header__menu-icon {
	position: relative;
}

.emobility-header__menu-icon::before,
.emobility-header__menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.emobility-header__menu-icon::before {
	top: -6px;
}

.emobility-header__menu-icon::after {
	top: 6px;
}

.emobility-header__menu-toggle[aria-expanded="true"] .emobility-header__menu-icon {
	background: transparent;
}

.emobility-header__menu-toggle[aria-expanded="true"] .emobility-header__menu-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.emobility-header__menu-toggle[aria-expanded="true"] .emobility-header__menu-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Mobile off-canvas nav panel. Lives in normal flow inside the fixed
   header stack rather than as its own full-screen overlay, so once open on
   a short viewport its own height can push the fixed box taller than the
   screen - and since a fixed element can't be "scrolled into" to reveal
   more of itself (it's already removed from the page's flow), anything
   below the fold would be unreachable. initHeaderNav() (public.js) sets
   max-height/overflow-y inline to the viewport space actually left below
   the panel's own top offset whenever it opens (and on resize while open),
   so the panel scrolls internally instead. */

.emobility-mobile-nav {
	border-top: var(--emobility-border-width) solid var(--emobility-color-border);
	padding: var(--emobility-space-4) var(--emobility-container-padding);
	background: var(--emobility-color-surface);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
	.emobility-mobile-nav {
		display: none !important;
	}
}

.emobility-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.emobility-mobile-nav__list .emobility-nav__item {
	border-bottom: var(--emobility-border-width) solid var(--emobility-color-border);
}

.emobility-mobile-nav__list .emobility-nav__link {
	display: flex;
	align-items: center;
	padding: var(--emobility-space-3) 0;
	font-size: var(--emobility-text-base);
	color: var(--emobility-color-text);
	font-weight: var(--emobility-font-weight-medium);
	text-transform: none;
	letter-spacing: normal;
}

.emobility-mobile-nav__list .emobility-nav__link--pill,
.emobility-mobile-nav__list .emobility-nav__link--portal {
	display: inline-flex;
	padding: var(--emobility-space-2) var(--emobility-space-3);
	margin-block: var(--emobility-space-1);
}

.emobility-mobile-nav__list .emobility-nav__item--has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.emobility-mobile-nav__list .emobility-nav__item--has-children .emobility-nav__link {
	flex: 1;
}

.emobility-mobile-nav__list .emobility-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--emobility-color-text-muted);
}

.emobility-mobile-nav__list .emobility-nav__toggle-icon {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--emobility-transition-fast);
}

.emobility-mobile-nav__list .emobility-nav__toggle[aria-expanded="true"] .emobility-nav__toggle-icon {
	transform: rotate(-135deg);
}

.emobility-mobile-nav__list .emobility-nav__submenu {
	display: none;
	list-style: none;
	margin: 0 0 var(--emobility-space-2);
	padding-left: var(--emobility-space-4);
	width: 100%;
}

.emobility-mobile-nav__list .emobility-nav__item.is-open > .emobility-nav__submenu {
	display: block;
}

.emobility-mobile-nav__actions {
	display: flex;
	flex-direction: column;
	gap: var(--emobility-space-2);
	margin-top: var(--emobility-space-4);
	padding-top: var(--emobility-space-4);
	border-top: var(--emobility-border-width) solid var(--emobility-color-border);
}

a.emobility-mobile-nav__action {
	font-size: var(--emobility-text-sm);
	font-weight: var(--emobility-font-weight-medium);
	color: var(--emobility-color-text);
	text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* 9. Footer                                                            */
/* ------------------------------------------------------------------ */

.emobility-footer {
	background: var(--emobility-gray-900);
	color: var(--emobility-gray-300);
	padding-block: 0 var(--emobility-space-6);
}

.emobility-footer__newsletter-bar {
	background: var(--emobility-primary-800);
	border-bottom: var(--emobility-border-width) solid var(--emobility-gray-800);
}

.emobility-footer__newsletter-bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--emobility-space-6);
	padding-block: var(--emobility-space-8);
	position: relative;
}

.emobility-footer__newsletter-bar-inner h2 {
	color: var(--emobility-white);
	margin: 0 0 var(--emobility-space-1);
}

.emobility-footer__newsletter-bar-inner p {
	margin: 0;
	color: rgb(255 255 255 / 0.85);
}

.emobility-footer__newsletter-bar-inner .emobility-newsletter-form {
	display: flex;
	flex: 1 1 360px;
	gap: var(--emobility-space-3);
	align-items: flex-start;
}

.emobility-footer__newsletter-bar-inner .emobility-newsletter-form__field {
	flex: 1;
	margin-bottom: 0;
}

.emobility-footer__newsletter-bar-inner .emobility-input {
	background: var(--emobility-white);
}

.emobility-footer__newsletter-bar-inner .emobility-newsletter-form__status {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--emobility-text-sm);
}

.emobility-footer__newsletter-bar-inner .emobility-newsletter-form__status.is-success {
	color: var(--emobility-accent-300);
}

.emobility-footer__newsletter-bar-inner .emobility-newsletter-form__status.is-error {
	color: #fca5a5;
}

@media (max-width: 575px) {
	.emobility-footer__newsletter-bar-inner .emobility-newsletter-form {
		flex-direction: column;
		width: 100%;
	}

	.emobility-footer__newsletter-bar-inner .emobility-newsletter-form button {
		width: 100%;
	}
}

.emobility-footer__grid {
	display: grid;
	gap: var(--emobility-space-8);
	grid-template-columns: repeat(1, minmax(0, 1fr));
	padding-block: var(--emobility-space-12) var(--emobility-space-8);
}

@media (min-width: 576px) {
	.emobility-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.emobility-footer__grid {
		/* Brand gets a fixed wider first track; every other column (Shop,
		   Company, Customer Service, Newsletter, ...) shares the remaining
		   space evenly regardless of how many are actually rendered - both
		   Shop and Company are conditionally omitted when there's nothing
		   to link to. */
		grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
	}
}

.emobility-footer__logo {
	display: block;
	font-size: var(--emobility-text-xl);
	font-weight: var(--emobility-font-weight-bold);
	color: var(--emobility-white);
	margin-bottom: var(--emobility-space-3);
}

.emobility-footer__brand p {
	color: var(--emobility-gray-400);
}

.emobility-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emobility-space-3);
	list-style: none;
	margin: var(--emobility-space-4) 0 0;
	padding: 0;
}

.emobility-footer__social a {
	color: var(--emobility-gray-300);
	font-size: var(--emobility-text-sm);
	text-decoration: none;
}

.emobility-footer__social a:hover {
	color: var(--emobility-white);
}

h4.emobility-footer__heading {
	color: var(--emobility-white);
	font-size: var(--emobility-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--emobility-space-4);
}

.emobility-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--emobility-space-3);
}

.emobility-footer__links a {
	color: var(--emobility-gray-400);
	font-size: var(--emobility-text-sm);
	text-decoration: none;
}

.emobility-footer__links a:hover {
	color: var(--emobility-white);
}

.emobility-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--emobility-space-4);
	padding-top: var(--emobility-space-6);
	border-top: var(--emobility-border-width) solid var(--emobility-gray-800);
	font-size: var(--emobility-text-xs);
	color: var(--emobility-gray-500);
}

.emobility-footer__copyright {
	margin: 0;
}

.emobility-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--emobility-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.emobility-footer__legal a {
	color: var(--emobility-gray-500);
	text-decoration: none;
}

.emobility-footer__legal a:hover {
	color: var(--emobility-white);
}