/*
Name: Nowe motocykle Barton: style
Slug: nowe-motocykle-style
Version: 1.1.0
Description: Wygląd podstrony z nowymi motocyklami i banera na stronę główną: ciemne karty modeli na jasnej scenie, filtr grup, tabela porównawcza, kontakt.
Module: nowe-motocykle
Scope: front
Load: manual
Media: all

1.1.0: baner na stronę główną z jednym kaflem, hero, kontakt i baner na całą szerokość okna, reset wygrywa z marginesami motywu.
1.0.0: pierwsza wersja.
*/

/* ==========================================================================
   Tokeny: aliasy lokalne na kontrakt --ft-*, z wartościami obecnej strony
   ========================================================================== */

.mnm {
	--mnm-accent: var(--ft-accent, #8B0000);
	--mnm-accent-hover: var(--ft-accent-hover, #A30000);
	--mnm-accent-deep: var(--ft-accent-deep, #5A0000);
	--mnm-accent-bright: var(--ft-accent-bright, #E5484D);
	--mnm-accent-soft: var(--ft-accent-soft, #F7ECEC);
	--mnm-ink: var(--ft-ink, #000000);
	--mnm-text: var(--ft-text, #333333);
	--mnm-muted: var(--ft-muted, #6B6B6B);
	--mnm-surface: var(--ft-surface, #FFFFFF);
	--mnm-surface-alt: var(--ft-surface-alt, #F7F7F7);
	--mnm-border: var(--ft-border, #E5E5E5);
	--mnm-border-strong: var(--ft-border-strong, #D4D4D4);
	--mnm-success: var(--ft-success, #1E7B34);

	--mnm-dark: var(--ft-surface-dark, #0E0E10);
	--mnm-dark-2: var(--ft-surface-dark-2, #16161A);
	--mnm-dark-3: var(--ft-surface-dark-3, #202026);
	--mnm-dark-line: var(--ft-dark-line, rgba(255, 255, 255, 0.1));
	--mnm-on-dark: var(--ft-on-dark, #FFFFFF);
	--mnm-on-dark-muted: var(--ft-on-dark-muted, #B4B4BC);
	--mnm-on-dark-soft: var(--ft-on-dark-soft, rgba(255, 255, 255, 0.08));
	--mnm-stage: var(--ft-stage, #F3F3F1);
	--mnm-stage-edge: var(--ft-stage-edge, #E4E4E0);
	--mnm-stage-ink: var(--ft-stage-ink, rgba(0, 0, 0, 0.09));
	--mnm-glow: var(--ft-glow, rgba(139, 0, 0, 0.45));

	--mnm-font-display: var(--ft-font-display, 'Montserrat', system-ui, sans-serif);
	--mnm-font-body: var(--ft-font-body, 'Roboto', system-ui, sans-serif);
	--mnm-fs-hero: var(--ft-fs-h1, clamp(2rem, 4.6vw, 3.25rem));
	--mnm-fs-h2: var(--ft-fs-h2, clamp(1.5rem, 2.8vw, 2.125rem));
	--mnm-fs-h3: var(--ft-fs-h3, clamp(1.25rem, 2vw, 1.5rem));
	--mnm-fs-lead: var(--ft-fs-lead, clamp(1rem, 1.5vw, 1.125rem));
	--mnm-fs-price: var(--ft-fs-price, 1.625rem);
	--mnm-fs-body: var(--ft-fs-body, 1rem);
	--mnm-fs-sm: var(--ft-fs-sm, 0.875rem);
	--mnm-fs-xs: var(--ft-fs-xs, 0.8125rem);
	--mnm-fs-number: clamp(6rem, 16vw, 11rem);
	--mnm-fs-number-hero: clamp(8rem, 24vw, 17rem);
	--mnm-fw-medium: 500;
	--mnm-fw-semibold: 600;
	--mnm-fw-bold: 700;
	--mnm-fw-black: 800;
	--mnm-lh-tight: var(--ft-lh-tight, 1.15);
	--mnm-lh-snug: var(--ft-lh-snug, 1.35);
	--mnm-lh-body: var(--ft-lh-body, 1.6);
	--mnm-track-tight: var(--ft-track-tight, -0.02em);
	--mnm-track-caps: var(--ft-track-caps, 0.08em);

	--mnm-s1: var(--ft-space-1, 0.25rem);
	--mnm-s2: var(--ft-space-2, 0.5rem);
	--mnm-s3: var(--ft-space-3, 0.75rem);
	--mnm-s4: var(--ft-space-4, 1rem);
	--mnm-s5: var(--ft-space-5, 1.5rem);
	--mnm-s6: var(--ft-space-6, 2rem);
	--mnm-s7: var(--ft-space-7, 3rem);
	--mnm-s8: var(--ft-space-8, 4rem);
	--mnm-s9: var(--ft-space-9, 6rem);

	--mnm-radius-sm: var(--ft-radius-sm, 6px);
	--mnm-radius-md: var(--ft-radius-md, 10px);
	--mnm-radius-lg: var(--ft-radius-lg, 16px);
	--mnm-radius-pill: var(--ft-radius-pill, 999px);

	--mnm-shadow-1: var(--ft-shadow-1, 0 1px 3px rgba(0, 0, 0, 0.06));
	--mnm-shadow-2: var(--ft-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.12));
	--mnm-shadow-3: var(--ft-shadow-3, 0 22px 48px rgba(0, 0, 0, 0.22));
	--mnm-ring: var(--ft-ring, 0 0 0 3px rgba(229, 72, 77, 0.35));

	--mnm-dur-fast: var(--ft-dur-fast, 180ms);
	--mnm-dur: var(--ft-dur, 300ms);
	--mnm-dur-slow: var(--ft-dur-slow, 650ms);
	--mnm-ease: var(--ft-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--mnm-ease-out: var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	--mnm-stagger: 80ms;

	--mnm-scroll-offset: var(--ft-scroll-offset, 7.5rem);
	--mnm-touch: 44px;
	--mnm-icon: 1.25rem;
	--mnm-icon-sm: 1rem;
	--mnm-icon-lg: 1.75rem;
	--mnm-icon-box: 3.25rem;
	--mnm-lift: -6px;
	--mnm-lift-sm: -2px;
	--mnm-reveal-shift: 28px;
	--mnm-skew: -8deg;
	--mnm-number-stroke: 2px;
	--mnm-table-min: 46rem;
	--mnm-underline-offset: 3px;
	--mnm-measure: 62ch;
	--mnm-container: var(--ft-container-wide, 1400px);
	--mnm-gutter: var(--ft-gutter, clamp(1.25rem, 4vw, 2rem));
	--mnm-measure-sm: 54ch;
	--mnm-nophoto-max: 14rem;
	--mnm-tilt: -12deg;

	display: flex;
	flex-direction: column;
	gap: var(--mnm-s8);
	font-family: var(--mnm-font-body);
	font-size: var(--mnm-fs-body);
	line-height: var(--mnm-lh-body);
	color: var(--mnm-text);
}

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

.mnm :is(h1, h2, h3, p, ul, dl, dd, figure) {
	margin: 0;
	padding: 0;
}

.mnm :is(ul) {
	list-style: none;
}

.mnm [hidden],
.mnm[hidden] {
	display: none !important;
}

.mnm .mnm-icon {
	width: var(--mnm-icon);
	height: var(--mnm-icon);
	flex: 0 0 auto;
}

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

/* ==========================================================================
   Przyciski i linki
   ========================================================================== */

.mnm .mnm-btn,
.mnm a.mnm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mnm-s2);
	min-height: var(--mnm-touch);
	padding: var(--mnm-s3) var(--mnm-s5);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-sm);
	font-weight: var(--mnm-fw-bold);
	line-height: 1;
	letter-spacing: var(--mnm-track-caps);
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--mnm-radius-sm);
	cursor: pointer;
	transition: background-color var(--mnm-dur) var(--mnm-ease),
		border-color var(--mnm-dur) var(--mnm-ease),
		color var(--mnm-dur) var(--mnm-ease),
		box-shadow var(--mnm-dur) var(--mnm-ease),
		transform var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-btn .mnm-icon {
	width: var(--mnm-icon-sm);
	height: var(--mnm-icon-sm);
	transition: transform var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-btn:hover {
	transform: translateY(var(--mnm-lift-sm));
}

.mnm .mnm-btn:active {
	transform: translateY(0);
}

.mnm .mnm-btn:focus-visible {
	outline: 2px solid var(--mnm-accent-bright);
	outline-offset: 3px;
}

.mnm .mnm-btn--primary,
.mnm a.mnm-btn--primary {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-accent);
}

.mnm .mnm-btn--primary:hover,
.mnm a.mnm-btn--primary:hover {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-accent-hover);
	box-shadow: var(--mnm-shadow-2);
}

.mnm .mnm-btn--primary:hover .mnm-icon {
	transform: rotate(var(--mnm-tilt));
}

.mnm .mnm-btn--ghost-light,
.mnm a.mnm-btn--ghost-light {
	color: var(--mnm-on-dark);
	background-color: transparent;
	border-color: var(--mnm-dark-line);
}

.mnm .mnm-btn--ghost-light:hover,
.mnm a.mnm-btn--ghost-light:hover {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-on-dark-soft);
	border-color: var(--mnm-on-dark-muted);
}

.mnm .mnm-btn--lg,
.mnm a.mnm-btn--lg {
	min-height: calc(var(--mnm-touch) + var(--mnm-s2));
	padding-inline: var(--mnm-s6);
}

.mnm .mnm-link,
.mnm a.mnm-link {
	font-weight: var(--mnm-fw-semibold);
	color: var(--mnm-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--mnm-underline-offset);
	transition: color var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-link:hover {
	color: var(--mnm-accent-hover);
}

.mnm .mnm-link:focus-visible {
	outline: 2px solid var(--mnm-accent);
	outline-offset: 2px;
	border-radius: var(--mnm-radius-sm);
}

.mnm .mnm-link--light,
.mnm a.mnm-link--light {
	color: var(--mnm-on-dark);
}

.mnm .mnm-link--light:hover {
	color: var(--mnm-on-dark-muted);
}

/* ==========================================================================
   Nagłówki sekcji
   ========================================================================== */

.mnm .mnm-section-title {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-h2);
	font-weight: var(--mnm-fw-bold);
	line-height: var(--mnm-lh-tight);
	letter-spacing: var(--mnm-track-tight);
	color: var(--mnm-ink);
	text-wrap: balance;
}

.mnm .mnm-section-lead {
	max-width: var(--mnm-measure);
	margin-top: var(--mnm-s3);
	color: var(--mnm-muted);
	text-wrap: pretty;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Sekcje na całą szerokość okna: szerokość okna bez paska przewijania liczy skrypt (--mnm-vw na html) */
.mnm .mnm-bleed {
	position: relative;
	width: var(--mnm-vw, 100vw);
	max-width: none;
	margin-inline: calc(50% - var(--mnm-vw, 100vw) / 2);
	border-radius: 0;
}

.mnm-bleed__inner,
.mnm-hero__inner,
.mnm-visit__inner,
.mnm-banner__inner {
	position: relative;
	width: 100%;
	max-width: var(--mnm-container);
	margin-inline: auto;
	padding-inline: var(--mnm-gutter);
}

.mnm-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mnm-s6);
}

.mnm-hero {
	position: relative;
	padding-block: var(--mnm-s7);
	overflow: hidden;
	color: var(--mnm-on-dark);
	background:
		radial-gradient(circle at 92% 8%, var(--mnm-glow) 0%, transparent 42%),
		radial-gradient(circle at 0% 100%, var(--mnm-dark-3) 0%, transparent 55%),
		linear-gradient(160deg, var(--mnm-dark-2) 0%, var(--mnm-dark) 100%);
	isolation: isolate;
}

.mnm-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s4);
	animation: mnm-rise var(--mnm-dur-slow) var(--mnm-ease-out) both;
}

.mnm-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mnm-s2);
	font-size: var(--mnm-fs-xs);
	color: var(--mnm-on-dark-muted);
}

.mnm .mnm-crumbs a {
	color: var(--mnm-on-dark-muted);
	text-decoration: none;
	transition: color var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-crumbs a:hover {
	color: var(--mnm-on-dark);
}

.mnm .mnm-crumbs a:focus-visible {
	outline: 2px solid var(--mnm-accent-bright);
	outline-offset: 2px;
}

.mnm-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mnm-s2);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-xs);
	font-weight: var(--mnm-fw-bold);
	letter-spacing: var(--mnm-track-caps);
	text-transform: uppercase;
	color: var(--mnm-accent-bright);
}

.mnm-hero__eyebrow::before {
	content: '';
	width: var(--mnm-s6);
	height: 2px;
	background-color: var(--mnm-accent-bright);
}

.mnm .mnm-hero__title {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-hero);
	font-weight: var(--mnm-fw-black);
	line-height: var(--mnm-lh-tight);
	letter-spacing: var(--mnm-track-tight);
	color: var(--mnm-on-dark);
	text-wrap: balance;
}

.mnm-hero__lead {
	max-width: var(--mnm-measure-sm);
	font-size: var(--mnm-fs-lead);
	color: var(--mnm-on-dark-muted);
	text-wrap: pretty;
}

.mnm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnm-s3);
	margin-top: var(--mnm-s2);
}

.mnm .mnm-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnm-s4) var(--mnm-s6);
	margin-top: var(--mnm-s4);
	padding-top: var(--mnm-s5);
	border-top: 1px solid var(--mnm-dark-line);
}

.mnm-hero__facts li {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s1);
}

.mnm-hero__facts strong {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-h3);
	font-weight: var(--mnm-fw-black);
	line-height: 1;
	color: var(--mnm-on-dark);
	white-space: nowrap;
}

.mnm-hero__facts span {
	font-size: var(--mnm-fs-sm);
	color: var(--mnm-on-dark-muted);
}

.mnm-hero__stage {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: var(--mnm-s5);
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 85%, var(--mnm-surface) 0%, var(--mnm-stage) 62%, var(--mnm-stage-edge) 100%);
	border-radius: var(--mnm-radius-md);
	box-shadow: var(--mnm-shadow-3);
	animation: mnm-rise var(--mnm-dur-slow) var(--mnm-ease-out) both;
	animation-delay: var(--mnm-stagger);
}

.mnm-hero__number {
	position: absolute;
	left: var(--mnm-s3);
	bottom: calc(var(--mnm-s2) * -1);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-number-hero);
	font-weight: var(--mnm-fw-black);
	line-height: 0.8;
	letter-spacing: var(--mnm-track-tight);
	color: transparent;
	-webkit-text-stroke: var(--mnm-number-stroke) var(--mnm-stage-ink);
	transform: skewX(var(--mnm-skew));
	pointer-events: none;
	user-select: none;
}

.mnm .mnm-hero__img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mnm .mnm-hero__tag {
	position: absolute;
	right: var(--mnm-s3);
	bottom: var(--mnm-s3);
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-sm);
	font-weight: var(--mnm-fw-bold);
	line-height: 1;
	text-decoration: none;
	border-radius: var(--mnm-radius-sm);
	box-shadow: var(--mnm-shadow-2);
	transition: transform var(--mnm-dur) var(--mnm-ease), box-shadow var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-hero__tag:hover {
	transform: translateY(var(--mnm-lift-sm));
	box-shadow: var(--mnm-shadow-3);
}

.mnm .mnm-hero__tag:focus-visible {
	outline: 2px solid var(--mnm-accent);
	outline-offset: 3px;
}

.mnm-hero__tag-name,
.mnm-hero__tag-price {
	display: inline-flex;
	align-items: center;
	padding: var(--mnm-s3) var(--mnm-s4);
}

.mnm-hero__tag-name {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-dark);
}

.mnm-hero__tag-price {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-accent);
	white-space: nowrap;
}

/* ==========================================================================
   Modele: nagłówek i filtr
   ========================================================================== */

.mnm-models {
	scroll-margin-top: var(--mnm-scroll-offset);
}

.mnm-models__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mnm-s5);
	margin-bottom: var(--mnm-s6);
}

.mnm-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnm-s2);
}

.mnm .mnm-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--mnm-s2);
	min-height: var(--mnm-touch);
	margin: 0;
	padding: var(--mnm-s2) var(--mnm-s3) var(--mnm-s2) var(--mnm-s4);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-sm);
	font-weight: var(--mnm-fw-semibold);
	line-height: 1;
	color: var(--mnm-text);
	background-color: var(--mnm-surface);
	border: 1px solid var(--mnm-border-strong);
	border-radius: var(--mnm-radius-pill);
	cursor: pointer;
	transition: background-color var(--mnm-dur) var(--mnm-ease),
		border-color var(--mnm-dur) var(--mnm-ease),
		color var(--mnm-dur) var(--mnm-ease),
		transform var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-filter__btn:hover {
	color: var(--mnm-accent);
	background-color: var(--mnm-surface);
	border-color: var(--mnm-accent);
	transform: translateY(var(--mnm-lift-sm));
}

.mnm .mnm-filter__btn:focus-visible {
	outline: 2px solid var(--mnm-accent);
	outline-offset: 2px;
}

.mnm .mnm-filter__btn[aria-pressed="true"] {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-dark);
	border-color: var(--mnm-dark);
}

.mnm-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mnm-icon);
	height: var(--mnm-icon);
	padding-inline: var(--mnm-s1);
	font-size: var(--mnm-fs-xs);
	font-weight: var(--mnm-fw-bold);
	color: var(--mnm-muted);
	background-color: var(--mnm-surface-alt);
	border-radius: var(--mnm-radius-pill);
	transition: background-color var(--mnm-dur) var(--mnm-ease), color var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-filter__btn[aria-pressed="true"] .mnm-filter__count {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-accent);
}

/* ==========================================================================
   Karta modelu
   ========================================================================== */

.mnm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mnm-s5);
}

.mnm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	color: var(--mnm-on-dark-muted);
	background-color: var(--mnm-dark-2);
	border: 1px solid var(--mnm-dark-line);
	border-radius: var(--mnm-radius-md);
	box-shadow: var(--mnm-shadow-1);
	scroll-margin-top: var(--mnm-scroll-offset);
	transition: transform var(--mnm-dur) var(--mnm-ease),
		box-shadow var(--mnm-dur) var(--mnm-ease),
		border-color var(--mnm-dur) var(--mnm-ease);
}

.mnm-card:hover {
	border-color: var(--mnm-accent);
	box-shadow: var(--mnm-shadow-3);
	transform: translateY(var(--mnm-lift));
}

.mnm-card:target {
	border-color: var(--mnm-accent-bright);
	box-shadow: var(--mnm-ring), var(--mnm-shadow-3);
}

.mnm-card__stage {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 90%, var(--mnm-surface) 0%, var(--mnm-stage) 60%, var(--mnm-stage-edge) 100%);
}

.mnm-card__number {
	position: absolute;
	top: var(--mnm-s2);
	right: var(--mnm-s3);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-number);
	font-weight: var(--mnm-fw-black);
	line-height: 0.85;
	letter-spacing: var(--mnm-track-tight);
	color: transparent;
	-webkit-text-stroke: var(--mnm-number-stroke) var(--mnm-stage-ink);
	transform: skewX(var(--mnm-skew));
	transition: transform var(--mnm-dur-slow) var(--mnm-ease-out), -webkit-text-stroke-color var(--mnm-dur) var(--mnm-ease);
	pointer-events: none;
	user-select: none;
}

.mnm-card:hover .mnm-card__number {
	transform: skewX(var(--mnm-skew)) translateX(calc(var(--mnm-s3) * -1));
}

.mnm-card__badge {
	position: absolute;
	top: var(--mnm-s3);
	left: var(--mnm-s3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--mnm-s1);
	padding: var(--mnm-s1) var(--mnm-s3) var(--mnm-s1) var(--mnm-s2);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-xs);
	font-weight: var(--mnm-fw-semibold);
	line-height: var(--mnm-lh-snug);
	color: var(--mnm-success);
	background-color: var(--mnm-surface);
	border-radius: var(--mnm-radius-pill);
	box-shadow: var(--mnm-shadow-1);
}

.mnm-card__badge .mnm-icon {
	width: var(--mnm-icon-sm);
	height: var(--mnm-icon-sm);
}

.mnm-card__media {
	position: absolute;
	inset: var(--mnm-s6) var(--mnm-s4) var(--mnm-s3);
}

.mnm .mnm-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mnm-dur-slow) var(--mnm-ease-out), opacity var(--mnm-dur) var(--mnm-ease);
}

.mnm-card:hover .mnm-card__img {
	transform: scale(1.05);
}

.mnm .mnm-card__img--alt {
	opacity: 0;
}

.mnm-card--swap:hover .mnm-card__img:not(.mnm-card__img--alt) {
	opacity: 0;
}

.mnm-card--swap:hover .mnm-card__img--alt {
	opacity: 1;
}

.mnm-card__nophoto {
	position: absolute;
	left: var(--mnm-s4);
	bottom: var(--mnm-s4);
	max-width: var(--mnm-nophoto-max);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-sm);
	font-weight: var(--mnm-fw-semibold);
	line-height: var(--mnm-lh-snug);
	color: var(--mnm-muted);
}

.mnm-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--mnm-s3);
	padding: var(--mnm-s5);
}

.mnm-card__eyebrow {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-xs);
	font-weight: var(--mnm-fw-bold);
	letter-spacing: var(--mnm-track-caps);
	text-transform: uppercase;
	color: var(--mnm-accent-bright);
}

.mnm .mnm-card__title {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-h3);
	font-weight: var(--mnm-fw-black);
	line-height: var(--mnm-lh-tight);
	letter-spacing: var(--mnm-track-tight);
	color: var(--mnm-on-dark);
}

.mnm-card__lead {
	font-size: var(--mnm-fs-sm);
	color: var(--mnm-on-dark-muted);
	text-wrap: pretty;
}

.mnm .mnm-card__keys {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mnm-s2);
	margin-top: var(--mnm-s1);
}

.mnm-card__key {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s1);
	min-width: 0;
	padding: var(--mnm-s2) var(--mnm-s3);
	background-color: var(--mnm-dark-3);
	border-radius: var(--mnm-radius-sm);
}

.mnm-card__key dt {
	font-size: var(--mnm-fs-xs);
	font-weight: var(--mnm-fw-medium);
	color: var(--mnm-on-dark-muted);
}

.mnm-card__key dd {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-sm);
	font-weight: var(--mnm-fw-bold);
	line-height: var(--mnm-lh-snug);
	color: var(--mnm-on-dark);
}

.mnm .mnm-card__note {
	padding-left: var(--mnm-s3);
	font-size: var(--mnm-fs-xs);
	color: var(--mnm-on-dark-muted);
	border-left: 2px solid var(--mnm-accent-bright);
}

.mnm-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mnm-s3) var(--mnm-s4);
	margin-top: auto;
	padding-top: var(--mnm-s4);
	border-top: 1px solid var(--mnm-dark-line);
}

.mnm-card__price {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s1);
}

.mnm-card__price-label {
	font-size: var(--mnm-fs-xs);
	color: var(--mnm-on-dark-muted);
}

.mnm-card__price strong {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-price);
	font-weight: var(--mnm-fw-black);
	line-height: 1;
	color: var(--mnm-on-dark);
	white-space: nowrap;
}

.mnm-card__price--ask strong {
	font-size: var(--mnm-fs-body);
	color: var(--mnm-accent-bright);
}

.mnm .mnm-card__cta {
	flex: 1 1 auto;
	max-width: 100%;
}

.mnm-card__specs {
	border-top: 1px solid var(--mnm-dark-line);
}

.mnm .mnm-card__specs summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mnm-s2);
	min-height: var(--mnm-touch);
	padding-top: var(--mnm-s2);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-sm);
	font-weight: var(--mnm-fw-semibold);
	color: var(--mnm-on-dark);
	list-style: none;
	cursor: pointer;
	transition: color var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-card__specs summary::-webkit-details-marker {
	display: none;
}

.mnm .mnm-card__specs summary:hover {
	color: var(--mnm-accent-bright);
}

.mnm .mnm-card__specs summary:focus-visible {
	outline: 2px solid var(--mnm-accent-bright);
	outline-offset: 2px;
	border-radius: var(--mnm-radius-sm);
}

.mnm-card__specs summary .mnm-icon {
	transition: transform var(--mnm-dur) var(--mnm-ease);
}

.mnm-card__specs[open] summary .mnm-icon {
	transform: rotate(180deg);
}

.mnm .mnm-card__spec-list {
	display: flex;
	flex-direction: column;
	padding-top: var(--mnm-s2);
}

.mnm-card__specs[open] .mnm-card__spec-list {
	animation: mnm-fade-down var(--mnm-dur) var(--mnm-ease-out) both;
}

.mnm-card__spec {
	display: flex;
	justify-content: space-between;
	gap: var(--mnm-s4);
	padding-block: var(--mnm-s2);
	font-size: var(--mnm-fs-sm);
	border-bottom: 1px solid var(--mnm-dark-line);
}

.mnm-card__spec:last-child {
	border-bottom: 0;
}

.mnm-card__spec dt {
	color: var(--mnm-on-dark-muted);
}

.mnm-card__spec dd {
	font-weight: var(--mnm-fw-semibold);
	color: var(--mnm-on-dark);
	text-align: right;
}

/* ==========================================================================
   Poradnik i tabela porównawcza
   ========================================================================== */

.mnm-guide {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s5);
	padding: var(--mnm-s6) var(--mnm-s5);
	background-color: var(--mnm-surface-alt);
	border-radius: var(--mnm-radius-lg);
}

.mnm-table {
	overflow-x: auto;
	background-color: var(--mnm-surface);
	border: 1px solid var(--mnm-border);
	border-radius: var(--mnm-radius-md);
	-webkit-overflow-scrolling: touch;
}

.mnm-table:focus-visible {
	outline: 2px solid var(--mnm-accent);
	outline-offset: 2px;
}

.mnm .mnm-table table {
	width: 100%;
	min-width: var(--mnm-table-min);
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--mnm-fs-sm);
}

.mnm .mnm-table th,
.mnm .mnm-table td {
	padding: var(--mnm-s3) var(--mnm-s4);
	text-align: left;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--mnm-border);
}

.mnm .mnm-table tbody tr:last-child th,
.mnm .mnm-table tbody tr:last-child td {
	border-bottom: 0;
}

.mnm .mnm-table thead th {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-xs);
	font-weight: var(--mnm-fw-bold);
	letter-spacing: var(--mnm-track-caps);
	text-transform: uppercase;
	color: var(--mnm-muted);
	background-color: var(--mnm-surface);
	white-space: nowrap;
}

.mnm .mnm-table tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	background-color: var(--mnm-surface);
	white-space: nowrap;
}

.mnm .mnm-table tbody tr {
	transition: background-color var(--mnm-dur-fast) var(--mnm-ease);
}

.mnm .mnm-table tbody tr:hover,
.mnm .mnm-table tbody tr:hover th {
	background-color: var(--mnm-accent-soft);
}

.mnm .mnm-table tbody th a {
	font-family: var(--mnm-font-display);
	font-weight: var(--mnm-fw-bold);
	color: var(--mnm-ink);
	text-decoration: none;
	transition: color var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-table tbody th a:hover {
	color: var(--mnm-accent);
}

.mnm .mnm-table tbody th a:focus-visible {
	outline: 2px solid var(--mnm-accent);
	outline-offset: 2px;
}

.mnm .mnm-table td {
	color: var(--mnm-text);
}

.mnm .mnm-table td.mnm-table__na {
	color: var(--mnm-muted);
}

.mnm .mnm-table td.mnm-table__price {
	font-family: var(--mnm-font-display);
	font-weight: var(--mnm-fw-bold);
	color: var(--mnm-accent);
	white-space: nowrap;
}

/* ==========================================================================
   Dlaczego motorKA
   ========================================================================== */

.mnm-why__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mnm-s5);
}

.mnm-why__item {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s3);
	padding: var(--mnm-s5);
	background-color: var(--mnm-surface);
	border: 1px solid var(--mnm-border);
	border-radius: var(--mnm-radius-md);
	transition: border-color var(--mnm-dur) var(--mnm-ease), box-shadow var(--mnm-dur) var(--mnm-ease), transform var(--mnm-dur) var(--mnm-ease);
}

.mnm-why__item:hover {
	border-color: var(--mnm-accent);
	box-shadow: var(--mnm-shadow-2);
	transform: translateY(var(--mnm-lift-sm));
}

.mnm .mnm-why__item > .mnm-icon {
	width: var(--mnm-icon-box);
	height: var(--mnm-icon-box);
	padding: var(--mnm-s3);
	color: var(--mnm-accent);
	background-color: var(--mnm-accent-soft);
	border-radius: var(--mnm-radius-md);
}

.mnm .mnm-why__title {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-body);
	font-weight: var(--mnm-fw-bold);
	line-height: var(--mnm-lh-snug);
	color: var(--mnm-ink);
}

.mnm-why__text {
	font-size: var(--mnm-fs-sm);
	color: var(--mnm-muted);
}

.mnm-why__text .mnm-link {
	display: inline-block;
	margin-top: var(--mnm-s2);
}

/* ==========================================================================
   Wizyta w sklepie
   ========================================================================== */

.mnm-visit__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mnm-s5);
}

.mnm-visit {
	padding-block: var(--mnm-s7);
	overflow: hidden;
	color: var(--mnm-on-dark);
	background:
		radial-gradient(circle at 100% 0%, var(--mnm-accent-hover) 0%, transparent 45%),
		linear-gradient(135deg, var(--mnm-accent) 0%, var(--mnm-accent-deep) 100%);
}

.mnm-visit__text {
	display: flex;
	flex-direction: column;
	gap: var(--mnm-s3);
}

.mnm .mnm-visit__title {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-h2);
	font-weight: var(--mnm-fw-black);
	line-height: var(--mnm-lh-tight);
	letter-spacing: var(--mnm-track-tight);
	color: var(--mnm-on-dark);
	text-wrap: balance;
}

.mnm-visit__address {
	display: flex;
	align-items: center;
	gap: var(--mnm-s2);
	font-family: var(--mnm-font-display);
	font-weight: var(--mnm-fw-semibold);
	color: var(--mnm-on-dark);
}

.mnm-visit__lead {
	max-width: var(--mnm-measure-sm);
	color: var(--mnm-on-dark-muted);
	text-wrap: pretty;
}

.mnm-visit__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mnm-s3);
}

.mnm-visit .mnm-btn--primary,
.mnm-visit a.mnm-btn--primary {
	color: var(--mnm-accent);
	background-color: var(--mnm-surface);
}

.mnm-visit .mnm-btn--primary:hover,
.mnm-visit a.mnm-btn--primary:hover {
	color: var(--mnm-on-dark);
	background-color: var(--mnm-dark);
}

.mnm-visit .mnm-btn--ghost-light,
.mnm-visit a.mnm-btn--ghost-light {
	border-color: var(--mnm-on-dark-muted);
}

.mnm-visit .mnm-link--light {
	align-self: center;
	margin-top: var(--mnm-s1);
	font-size: var(--mnm-fs-sm);
}

/* ==========================================================================
   Baner na stronę główną: jeden duży kafel, zwarta wysokość
   ========================================================================== */

.mnm--banner {
	margin-block: 0 var(--mnm-s6);
}

.mnm-banner__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mnm-s5);
}

.mnm-banner {
	padding-block: var(--mnm-s6);
	overflow: hidden;
	color: var(--mnm-on-dark);
	background:
		radial-gradient(circle at 100% 0%, var(--mnm-glow) 0%, transparent 45%),
		radial-gradient(circle at 0% 100%, var(--mnm-dark-3) 0%, transparent 55%),
		linear-gradient(160deg, var(--mnm-dark-2) 0%, var(--mnm-dark) 100%);
	isolation: isolate;
}

.mnm-banner__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mnm-s3);
}

.mnm .mnm-banner__title {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-h2);
	font-weight: var(--mnm-fw-black);
	line-height: var(--mnm-lh-tight);
	letter-spacing: var(--mnm-track-tight);
	color: var(--mnm-on-dark);
	text-wrap: balance;
}

.mnm-banner__lead {
	max-width: var(--mnm-measure-sm);
	color: var(--mnm-on-dark-muted);
	text-wrap: pretty;
}

.mnm .mnm-banner__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnm-s2) var(--mnm-s6);
	margin-top: var(--mnm-s1);
}

.mnm-banner__facts li {
	display: flex;
	align-items: baseline;
	gap: var(--mnm-s2);
}

.mnm-banner__facts strong {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-lead);
	font-weight: var(--mnm-fw-black);
	line-height: 1;
	color: var(--mnm-on-dark);
	white-space: nowrap;
}

.mnm-banner__facts span {
	font-size: var(--mnm-fs-sm);
	color: var(--mnm-on-dark-muted);
}

.mnm-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mnm-s3);
	margin-top: var(--mnm-s2);
}

.mnm .mnm-banner__tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-decoration: none;
	background-color: var(--mnm-stage);
	border: 1px solid var(--mnm-dark-line);
	border-radius: var(--mnm-radius-md);
	box-shadow: var(--mnm-shadow-3);
	transition: transform var(--mnm-dur) var(--mnm-ease),
		box-shadow var(--mnm-dur) var(--mnm-ease),
		border-color var(--mnm-dur) var(--mnm-ease);
}

.mnm .mnm-banner__tile:hover {
	border-color: var(--mnm-accent-bright);
	transform: translateY(var(--mnm-lift-sm));
}

.mnm .mnm-banner__tile:focus-visible {
	outline: 2px solid var(--mnm-accent-bright);
	outline-offset: 3px;
}

.mnm-banner__stage {
	position: relative;
	display: block;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 88%, var(--mnm-surface) 0%, var(--mnm-stage) 60%, var(--mnm-stage-edge) 100%);
}

.mnm-banner__number {
	position: absolute;
	top: var(--mnm-s1);
	right: var(--mnm-s3);
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-number);
	font-weight: var(--mnm-fw-black);
	line-height: 0.85;
	letter-spacing: var(--mnm-track-tight);
	color: transparent;
	-webkit-text-stroke: var(--mnm-number-stroke) var(--mnm-stage-ink);
	transform: skewX(var(--mnm-skew));
	transition: transform var(--mnm-dur-slow) var(--mnm-ease-out);
	pointer-events: none;
	user-select: none;
}

.mnm .mnm-banner__tile:hover .mnm-banner__number {
	transform: skewX(var(--mnm-skew)) translateX(calc(var(--mnm-s3) * -1));
}

.mnm .mnm-banner__img {
	position: absolute;
	inset: var(--mnm-s3) var(--mnm-s4) var(--mnm-s2);
	display: block;
	width: calc(100% - var(--mnm-s4) * 2);
	height: calc(100% - var(--mnm-s3) - var(--mnm-s2));
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mnm-dur-slow) var(--mnm-ease-out);
}

.mnm .mnm-banner__tile:hover .mnm-banner__img {
	transform: scale(1.04);
}

.mnm-banner__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mnm-s1) var(--mnm-s3);
	padding: var(--mnm-s3) var(--mnm-s4);
	background-color: var(--mnm-dark-3);
}

.mnm-banner__name {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-body);
	font-weight: var(--mnm-fw-bold);
	color: var(--mnm-on-dark);
}

.mnm-banner__price {
	font-family: var(--mnm-font-display);
	font-size: var(--mnm-fs-body);
	font-weight: var(--mnm-fw-black);
	color: var(--mnm-accent-bright);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.mnm--banner {
		margin-bottom: var(--mnm-s7);
	}

	.mnm-banner {
		padding-block: var(--mnm-s6);
	}

	.mnm-banner__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--mnm-s7);
	}

	.mnm-banner__inner--text {
		grid-template-columns: minmax(0, 1fr);
	}

	.mnm-banner__stage {
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 479px) {
	.mnm-banner__actions {
		align-self: stretch;
	}

	.mnm-banner__actions .mnm-btn {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Ruch
   ========================================================================== */

.mnm.is-js [data-reveal] {
	opacity: 0;
	translate: 0 var(--mnm-reveal-shift);
	transition: opacity var(--mnm-dur-slow) var(--mnm-ease-out),
		translate var(--mnm-dur-slow) var(--mnm-ease-out),
		transform var(--mnm-dur) var(--mnm-ease),
		box-shadow var(--mnm-dur) var(--mnm-ease),
		border-color var(--mnm-dur) var(--mnm-ease);
	transition-delay: calc(var(--mnm-i, 0) * var(--mnm-stagger)), calc(var(--mnm-i, 0) * var(--mnm-stagger)), 0s, 0s, 0s;
}

.mnm.is-js [data-reveal].is-visible {
	opacity: 1;
	translate: 0 0;
}

@keyframes mnm-rise {
	from {
		opacity: 0;
		transform: translateY(var(--mnm-reveal-shift));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes mnm-fade-down {
	from {
		opacity: 0;
		transform: translateY(calc(var(--mnm-s2) * -1));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Responsywność
   ========================================================================== */

@media (min-width: 640px) {
	.mnm-guide {
		padding: var(--mnm-s7) var(--mnm-s6);
	}

	.mnm-why__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (min-width: 1024px) {
	.mnm {
		gap: var(--mnm-s9);
	}

	.mnm-hero {
		padding-block: var(--mnm-s9);
	}

	.mnm-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: center;
		gap: var(--mnm-s8);
	}

	.mnm-visit {
		padding-block: var(--mnm-s8);
	}

	.mnm-visit__inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--mnm-s8);
	}
}

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

@media (max-width: 479px) {
	.mnm-hero__actions .mnm-btn {
		flex: 1 1 100%;
	}

	.mnm .mnm-card__cta {
		flex-basis: 100%;
	}

	.mnm-filter {
		flex-wrap: nowrap;
		width: 100%;
		margin-inline: calc(var(--mnm-s1) * -1);
		padding: var(--mnm-s1);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.mnm-filter::-webkit-scrollbar {
		display: none;
	}

	.mnm .mnm-filter__btn {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Ograniczony ruch
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mnm.is-js [data-reveal] {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.mnm-card:hover,
	.mnm-why__item:hover,
	.mnm .mnm-btn:hover,
	.mnm .mnm-filter__btn:hover,
	.mnm .mnm-hero__tag:hover,
	.mnm-card:hover .mnm-card__img {
		transform: none;
	}

	.mnm-card:hover .mnm-card__number {
		transform: skewX(var(--mnm-skew));
	}

	.mnm .mnm-banner__tile:hover,
	.mnm .mnm-banner__tile:hover .mnm-banner__img {
		transform: none;
	}

	.mnm .mnm-banner__tile:hover .mnm-banner__number {
		transform: skewX(var(--mnm-skew));
	}

	.mnm * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}