/* ============ Root ============ */
:root {
	--em-950: #21624D;
	--em-900: #0E3A2F;
	--em-800: #14493C;
	--em-700: #1C5C4B;
	--green: #78FAAE;
	--green-press: #5BE394;
	--ink: #101412;
	--g-50: #F3F5F4;
	--g-100: #E6EAE8;
	--g-300: #B7C0BC;
	--g-600: #5C6863;
	--white: #fff;
	--err: #B3261E;

	--font: Bricolage Grotesque, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gap: clamp(1rem, 2vw, 1.75rem);
	--pad: clamp(1rem, 4vw, 3rem);
	--hh: 56px;
	--radius: 0px;
}
@media (min-width: 960px) {
	:root {
		--hh: 64px;
	}
}

/* ============ Base ============ */
*, *::before, *::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}
body.menu-open {
	overflow: hidden;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
a {
	color: inherit;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
p {
	margin: 0 0 1em;
}
h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-weight: 600;
	font-stretch: 108%;
	letter-spacing: -.02em;
	line-height: 1.08;
}
h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 700;
}
h2 {
	font-size: clamp(1.5rem, 2.5vw, 2.125rem);
}
h3 {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	letter-spacing: -.01em;
}
.lead {
	color: var(--g-600);
	max-width: 64ch;
}
.container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--pad);
}
.section {
	padding-block: clamp(2.5rem, 5vw, 5rem);
}
.section.alt {
	background: var(--g-50);
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.skip {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 200;
}
.skip:focus {
	left: 1rem;
	top: 1rem;
	background: var(--green);
	padding: .6rem 1rem;
}
:focus-visible {
	outline: 3px solid var(--em-700);
	outline-offset: 3px;
}
.on-light :focus-visible, .section :focus-visible, .mega :focus-visible, .page-head :focus-visible {
	outline-color: var(--em-700);
}
.hero :focus-visible, .media-block :focus-visible, .result :focus-visible,
.catalog-download :focus-visible, .cat-card.dark :focus-visible {
	outline-color: var(--green);
}
.site-main {
	flex: 1;
	padding-top: var(--hh);
	outline: none;
}
.page-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 201;
	height: 3px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .16s ease;
}
.page-progress.is-active {
	opacity: 1;
}
.page-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--em-900);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
.page-progress.is-loading span {
	transform: scaleX(.82);
}
.page-progress.is-complete span {
	transform: scaleX(1);
	transition-duration: .2s;
}
.page-progress.is-finished {
	opacity: 0;
}
body[data-page="home"] .site-main {
	padding-top: 0;
}

/* ============ Buttons & Links ============ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .95rem 1.7rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: 600 1rem/1 var(--font);
	font-stretch: 105%;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn-green {
	background: var(--green);
	color: var(--em-950);
}
.btn-green:hover {
	background: var(--green-press);
}
.btn-dark {
	background: var(--em-900);
	color: var(--white);
}
.btn-dark:hover {
	background: var(--em-700);
}
.btn-line {
	border-color: var(--ink);
	color: var(--ink);
	background: transparent;
}
.btn-line:hover {
	background: var(--ink);
	color: var(--white);
}
.btn-line-light {
	border-color: var(--white);
	color: var(--white);
	background: transparent;
}
.btn-line-light:hover {
	background: var(--white);
	color: var(--em-900);
}
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 600;
	text-decoration: none;
}
.link-arrow::after {
	content: "";
	width: .5em;
	height: .5em;
	flex: none;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* ============ Header ============ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--hh);
	color: var(--ink);
	background: var(--white);
	box-shadow: 0 1px 0 var(--g-100);
}
.header-in {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.brand {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.45rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -.01em;
	text-decoration: none;
}
.brand img {
	display: block;
	width: auto;
	height: 34px;
	filter: none;
}
.brand b {
	font-weight: 800;
	color: var(--green);
}
.brand-mark {
	width: 22px;
	height: 22px;
	background: var(--green);
	flex: none;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}
.nav-toggle span {
	display: block;
	height: 2px;
	background: currentColor;
	transition: transform .25s, opacity .2s;
}
body.menu-open .nav-toggle span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) {
	opacity: 0;
}
body.menu-open .nav-toggle span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.nav-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: 1rem 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--g-100);
	font: 600 1.15rem/1.2 var(--font);
	font-stretch: 105%;
	color: var(--ink);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	transition: color .2s ease;
}
.chev {
	width: .50em;
	height: .50em;
	flex: none;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s, translate .2s;
	margin-left: auto;
}
.has-mega.open .chev {
	transform: rotate(-135deg);
	translate: 0 1px;
}

/* Mobile: full-screen navigation panel */
.primary-nav {
	position: fixed;
	inset: var(--hh) 0 0 0;
	background: var(--white);
	color: var(--ink);
	overflow-y: auto;
	padding: .5rem var(--pad) 2rem;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s, visibility 0s .3s;
}
body.menu-open .primary-nav {
	transform: none;
	visibility: visible;
	transition: transform .3s;
}
.nav-cta {
	margin-top: 1.5rem;
}
.nav-cta .btn {
	width: 100%;
}
.nav-link[aria-current="page"] {
	color: var(--em-700);
}

/* ============ Mega Menu ============ */
.mega {
	display: none;
}
.has-mega.open .mega {
	display: block;
	padding: .5rem 0 1rem;
}
.mega-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	padding-bottom: .75rem;
}
.mega-cat {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: .55rem .65rem;
	border: 1px solid var(--g-300);
	border-radius: var(--radius);
	background: var(--white);
	font: 500 1rem/1 var(--font);
	color: var(--ink);
	cursor: pointer;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
}
@media (max-width: 959px) {
	.mega-cats > li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		display: flex;
		justify-content: center;
	}
	.mega-cats > li:last-child:nth-child(odd) .mega-cat {
		width: calc(50% - .25rem);
	}
}
.mega-cat small {
	display: none;
}
.mega-cat[aria-selected="true"] {
	background: var(--em-900);
	border-color: var(--em-900);
	color: var(--white);
}
.mega-all {
	display: inline-flex;
	margin-top: .5rem;
}
.mega-panel {
	display: none;
}
.mega-panel.is-active {
	display: block;
	animation: mega-panel-enter .24s ease both;
}
@keyframes mega-panel-enter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.mega-panel-title {
	display: none;
}
.mega-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-items > * {
	grid-column: auto;
}
.mega-item {
	display: grid;
	gap: .35rem;
	text-decoration: none;
}
.mega-img {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
}
.mega-img img {
	display: block;
	width: 100%;
	height: auto;
}
.mega-item strong {
	font-weight: 600;
	font-stretch: 105%;
	line-height: 1.2;
}
.mega-item span.spec {
	color: var(--g-600);
}

@media (max-width: 959px) {
	.mega > .container {
		padding-inline: 0;
	}
	.mega > .container > .col-md-3 {
		display: none;
	}
	.mega > .container > .col-md-9 {
		grid-column: 1 / -1;
	}
	.mega-panel {
		display: block;
	}
	.mega-panel-title {
		display: flex;
		align-items: baseline;
		gap: .5rem;
		margin: 1rem 0 .65rem;
		font-size: 1rem;
	}
	.mega-panel-title span {
		color: var(--g-600);
		font-size: .8rem;
		font-weight: 400;
		letter-spacing: 0;
	}
}

.backdrop {
	display: none;
}

/* Desktop */
@media (min-width: 960px) {
	.nav-toggle {
		display: none;
	}
	.primary-nav {
		position: absolute;
		inset: 0;
		background: none;
		color: inherit;
		overflow: visible;
		padding: 0;
		transform: none;
		visibility: visible;
		transition: none;
		height: 100%;
	}
	.nav-list {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.nav-list > li {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.has-mega {
		position: static;
	}
	.nav-link {
		width: auto;
		height: 100%;
		padding: 0 0.5rem;
		border: 0;
		font-size: 1rem;
		font-weight: 500;
		font-stretch: 100%;
		color: inherit;
		position: relative;
	}
	.nav-link[aria-current="page"] {
		color: inherit;
	}
	.chev {
		margin-left: .15rem;
	}
	.nav-cta {
		position: absolute;
		top: 50%;
		right: var(--pad);
		margin: 0;
		transform: translateY(-50%);
	}
	.nav-cta .btn {
		width: auto;
		padding: .75rem 1.3rem;
		font-size: .95rem;
	}

	.mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--white);
		color: var(--ink);
		border-top: 1px solid var(--g-100);
		box-shadow: 0 40px 60px -20px color-mix(in srgb, var(--em-900) 40%, transparent);
		padding: 2.25rem 0 2.75rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .32s cubic-bezier(.22, 1, .36, 1),
			transform .32s cubic-bezier(.22, 1, .36, 1),
			visibility 0s .32s;
	}
	.has-mega.open .mega {
		padding: 2.25rem 0 2.75rem;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .32s cubic-bezier(.22, 1, .36, 1),
			transform .32s cubic-bezier(.22, 1, .36, 1);
	}
	.mega-cats {
		display: block;
		overflow: visible;
		padding: 0;
	}
	.mega-cat {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
		padding: .9rem 0;
		border: 0;
		border-bottom: 1px solid var(--g-100);
		border-radius: var(--radius);
		background: none;
		font-weight: 600;
		font-stretch: 105%;
		text-align: left;
		color: var(--ink);
		line-height: 1;
		white-space: nowrap;
	}
	.mega-cat small {
		display: inline;
		font-weight: 400;
		color: var(--g-600);
	}
	.mega-cat[aria-selected="true"] {
		background: none;
		color: var(--em-700);
		border-bottom: 1px solid var(--em-700);
	}
	.mega-all {
		margin-top: 1.25rem;
	}
	.mega-items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	#nav-sparepart .mega-sparepart-items {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.mega-img {
		background: transparent;
	}
	.mega-img img {
		transition: opacity .2s;
	}
	.mega-item:hover .mega-img img,
	.mega-item:focus-visible .mega-img img {
		opacity: .75;
	}
	.mega-item strong {
		margin-top: .4rem;
	}

	.backdrop {
		display: block;
		position: fixed;
		inset: var(--hh) 0 0 0;
		z-index: 90;
		background: rgba(8, 39, 31, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .32s cubic-bezier(.22, 1, .36, 1),
			visibility 0s .32s;
	}
	.site-header.mega-open ~ .backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity .32s cubic-bezier(.22, 1, .36, 1);
	}
}

.nav-link:hover {
	color: var(--em-900);
}

/* ============ Hero ============ */
.hero {
	position: relative;
	overflow: hidden;
	color: var(--ink);
	background: var(--white);
	padding-top: var(--hh);
	--hero-height: clamp(26rem, 38vw, 32rem);
}
.hero-visual {
	position: absolute;
	inset: var(--hh) 0 auto;
	width: 100%;
	height: var(--hero-height);
	overflow: hidden;
}
.hero-visual::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.739), transparent 80%);
	content: "";
	pointer-events: none;
}

.hero-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}
.hero-grid {
	align-items: end;
	position: relative;
	z-index: 1;
	min-height: var(--hero-height);
	padding-block: 3rem;
}
.hero-copy h1 {
	max-width: 12ch;
	margin-bottom: .35em;
	color: var(--white);
	line-height: 1.15;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
}
.hero-copy .lead {
	color: var(--white);
	line-height: 1.5;
	margin-bottom: .75rem;
	max-width: 48ch;
}
.hero-copy .actions {
	margin-top: 1rem;
}
.hero-copy .actions .btn {
	min-height: 44px;
	padding: .8rem 1.5rem;
	font-size: 1rem;
}

@media (max-width: 639px) {
	.hero {
		--hero-height: clamp(26rem, 110vw, 30rem);
	}
	.hero-grid {
		padding-block: 3rem 1.5rem;
	}
	.hero-copy h1 {
		font-size: 1.7rem;
		line-height: 1.5;
	}
	.hero-copy .actions .btn {
		width: 100%;
	}
}

@media (min-width: 640px) and (max-width: 959px) {
	.hero {
		--hero-height: clamp(28rem, 60vw, 32rem);
	}
}

@media (min-width: 960px) {
	.hero {
		--hero-height: clamp(28rem, 36.5vw, 32rem);
	}
	.hero-visual {
		position: absolute;
		inset: var(--hh) 0 auto;
		height: var(--hero-height);
		aspect-ratio: auto;
	}

	.hero-grid {
		min-height: var(--hero-height);
		padding-block: 3rem;
	}
}

.strip {
	position: relative;
	padding-block: 2.5rem 3.5rem;
}
.strip-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.strip-head h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	margin: 0;
}
.strip-btns {
	display: flex;
	gap: .5rem;
}
.icon-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .5);
	background: transparent;
	color: var(--white);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color .2s, color .2s;
}
.icon-btn:hover {
	background: var(--white);
	color: var(--em-900);
}
.icon-btn i {
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}
.icon-btn.prev i {
	transform: rotate(-135deg);
	margin-left: 4px;
}
.icon-btn.next i {
	transform: rotate(45deg);
	margin-right: 4px;
}
.strip-track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: .75rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.strip-card {
	flex: 0 0 min(72vw, 280px);
	scroll-snap-align: start;
	text-decoration: none;
	background: var(--em-800);
	border-radius: var(--radius);
	padding: 1rem 1rem 1.25rem;
	display: grid;
	gap: .25rem;
	transition: background-color .2s;
}
.strip-card:hover {
	background: var(--em-700);
}
.strip-card img {
	object-fit: contain;
	width: 100%;
}
.strip-card strong {
	font-weight: 600;
	font-stretch: 105%;
	margin-top: .4rem;
}
.strip-card span {
	font-size: .9rem;
	color: var(--white);
}

/* ============ Categories ============ */
.section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;
	gap: 1rem;
	margin-bottom: .5rem;
}
.client-trust {
	background: var(--white);
}
.catalog-section {
	padding-top: 0;
	padding-bottom: 0;
}
.catalog-download {
	align-items: center;
	gap: .75rem 1rem;
	padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--em-900);
	color: var(--white);
}
.catalog-download h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.catalog-action {
	display: flex;
	justify-content: flex-end;
}
.catalog-action .btn {
	min-width: 8rem;
}
.client-logos li {
	display: grid;
	min-height: 100px;
	place-items: center;
	padding: .5rem;
	background: var(--white);
	border: 1px solid var(--g-300);
}
.client-logos img {
	width: 100%;
	height: 140px;
	object-fit: contain;
	filter: grayscale(1);
	transition: filter .25s ease;
}
.client-logos li:hover img {
	filter: grayscale(0);
}
.feature-image {
	position: relative;
	width: 100%;
}
.feature-image img {
	width: 100%;
	height: auto;
}
.info-badge {
	position: absolute;
	bottom: 0rem;
	right: 0rem;
	display: grid;
	min-width: 6.7rem;
	padding: 1rem;
	place-items: center;
	background: var(--em-900);
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
}
.info-badge span {
	font-size: .85rem;
	letter-spacing: .12em;
}
.info-badge strong {
	font-size: 1.5rem;
	line-height: 1.15;
}
@media (max-width: 639px) {
	.catalog-download h2 {
		text-align: center;
	}
	.catalog-action {
		justify-content: center;
	}
}
@media (max-width: 959px) {
	.info-badge {
		top: auto;
		right: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}
.cat-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--g-50);
	border-radius: var(--radius);
	text-decoration: none;
	overflow: hidden;
	transition: background-color .2s;
}
.cat-card:hover {
	background: var(--g-100);
}
.cat-card.dark {
	background: var(--em-900);
	color: var(--white);
}
.cat-card.dark:hover {
	background: var(--em-800);
}
.cat-card.light {
	background: var(--green);
	color: var(--white);
}
.cat-card.light:hover {
	background: var(--em-800);
}
.cat-card .text {
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) 0;
}
.cat-card h3 {
	margin: 0 0 .35rem;
}
.cat-card p {
	margin: 0 0 1rem;
	color: var(--g-600);
	max-width: 34ch;
}
.cat-card.dark p {
	color: var(--white);
}
.cat-card .link-arrow {
	margin-bottom: 0;
}
.cat-card .cat-img {
	margin-top: auto;
	padding: 1rem clamp(1rem, 2vw, 1.75rem) clamp(1rem, 2vw, 1.75rem);
}
.cat-card .cat-img img {
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
	object-fit: contain;
}
[hidden] {
	display: none !important;
}

/* ============ Product Finder ============ */
.finder-form {
	display: grid;
	gap: 1.1rem;
	margin-top: 1.5rem;
	max-width: 420px;
}
.field {
	display: grid;
	gap: .35rem;
}
.field label {
	font-weight: 600;
	font-size: .95rem;
}
.field input, .field select, .field textarea {
	width: 100%;
	font: 400 1rem var(--font);
	color: var(--ink);
	padding: .8rem .9rem;
	border: 1.5px solid var(--g-300);
	border-radius: var(--radius);
	background: var(--white);
}
.field input:hover, .field select:hover, .field textarea:hover {
	border-color: var(--g-600);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
	outline: 3px solid var(--em-700);
	outline-offset: 0;
	border-color: var(--em-700);
}
.field textarea {
	resize: vertical;
}
.field [aria-invalid="true"] {
	border-color: var(--err);
}
.field-error {
	margin: 0;
	color: var(--err);
	font-size: .9rem;
}
.field-error:empty {
	display: none;
}

.result {
	display: grid;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: var(--em-900);
	color: var(--white);
	border-radius: var(--radius);
	height: 100%;
	align-content: center;
}
.result img {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}
.result h3 {
	margin: 0;
}
.result p {
	color: var(--white);
	margin: 0;
}
.result .actions {
	margin-top: .25rem;
}
.official-store-brand,
.official-store-contact {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-width: 0;
}
.official-store-brand .feature-icon-box {
	flex: 0 0 3.4rem;
}
.official-store-contact img {
	flex: 0 0 1.4rem;
	width: 1.4rem;
	height: 1.4rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.official-store-brand > div,
.official-store-contact > span:last-of-type {
	min-width: 0;
	overflow-wrap: anywhere;
}
.official-store-brand p {
	margin: 0 0 .25rem;
}
.official-store-contact {
	width: fit-content;
	max-width: 100%;
}

/* ============ Split Features ============ */
.feature {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: 1rem;
	padding-block: 1.4rem;
	border-top: 1px solid var(--g-300);
}
.feature:first-child {
	border-top: 0;
}
.feature:last-child {
	border-bottom: 0;
}
.feature-icon-box {
	display: grid;
	width: 3.4rem;
	height: 3.4rem;
	place-items: center;
	background: var(--em-700);
}
.feature-icon-box img {
	width: 1.5rem;
	height: 1.5rem;
	filter: brightness(0) invert(1);
}
.feature h3 {
	margin: 0 0 .25rem;
}
.feature p {
	margin: 0;
	color: var(--ink);
}
.home-features .feature {
	grid-template-columns: 1fr;
}
.media-block {
	background: linear-gradient(160deg, var(--em-800), var(--em-950));
	border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 2.5rem);
}

/* ============ Call to Action ============ */
.cta {
	background: var(--em-950);
	color: var(--white);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.cta h2 {
	margin: 0;
	max-width: 20ch;
}
.cta .grid {
	align-items: center;
}
.cta .actions {
	margin: 0;
	justify-content: flex-start;
}
@media (min-width: 960px) {
	.cta .actions {
		justify-content: flex-end;
	}
}

/* ============ Inner Pages ============ */
.page-head > .container:not(.grid):not([style]) {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.page-head h1 {
	order: 1;
	margin: 0 0 .35rem;
}
.page-head .lead {
	order: 2;
	margin: 0;
}
.page-head > .container:not(.grid):not([style]) > .crumb {
	order: 3;
	justify-content: center;
	margin: 1rem 0 0;
}
.page-head {
	background: var(--g-50);
	padding-block: clamp(2rem, 5.5vw, 4rem);
}
.crumb {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	color: var(--g-600);
	margin-bottom: 1rem;
}
.crumb a {
	text-decoration: none;
}
.crumb a:hover {
	text-decoration: underline;
}

/* Product Listing */
.filters-toggle {
	width: 100%;
	margin-bottom: 1rem;
}
.filters-body {
	display: none;
}
.filters-body.open {
	display: block;
	margin-bottom: 1.5rem;
}
.filter-group {
	border: 0;
	padding: 0 0 1.5rem;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--g-100);
}
.filter-group legend {
	font-weight: 600;
	font-stretch: 105%;
	padding: 0;
	margin-bottom: .75rem;
	font-size: 1.05rem;
}
.opt {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .4rem 0;
	cursor: pointer;
}
.opt input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--em-700);
	margin: 0;
}
.opt em {
	margin-left: auto;
	font-style: normal;
	font-size: .85rem;
	color: var(--g-600);
}
.range {
	width: 100%;
	accent-color: var(--em-700);
}
.range-out {
	display: flex;
	justify-content: space-between;
	font-size: .9rem;
	color: var(--g-600);
}
.toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: 1.25rem;
}
.toolbar .count {
	margin: 0;
	font-weight: 600;
}
.toolbar-tools {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}
.toolbar-tools input, .toolbar-tools select {
	font: 400 .95rem var(--font);
	padding: .65rem .8rem;
	border: 1.5px solid var(--g-300);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
}
.toolbar-tools input:focus-visible, .toolbar-tools select:focus-visible {
	outline: 3px solid var(--em-700);
	outline-offset: 0;
	border-color: var(--em-700);
}
.empty {
	padding: 3rem 1rem;
	text-align: center;
	background: var(--g-50);
	border-radius: 6px;
}
.empty h3 {
	font-size: 1.5rem;
}
.empty p {
	color: var(--g-600);
}

.pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--g-50);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
}
.pcard-media {
	display: block;
	overflow: hidden;
}
.pcard-media img {
	width: 100%;
	object-fit: contain;
	transition: transform .35s;
}
body[data-page="home"] .pcard-media,
body[data-page="list"] .pcard-media {
	aspect-ratio: 1;
}
body[data-page="home"] .pcard-media img,
body[data-page="list"] .pcard-media img {
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
body[data-page="sparepart"] .pcard-media img {
	height: auto;
	aspect-ratio: auto;
	object-fit: initial;
}
.pcard:hover .pcard-media img {
	transform: scale(1.04);
}
.pcard-body {
	padding: 1.5rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.pcard-cat {
	font-size: .85rem;
	color: var(--g-600);
	margin: 0 0 .15rem;
}
.pcard h3 {
	margin: 0;
}
.pcard h3 a {
	text-decoration: none;
}
.pcard h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.pcard {
	position: relative;
}
.sparepart-item {
	scroll-margin-top: calc(var(--hh) + 1rem);
}
.pcard-spec {
	color: var(--g-600);
	font-size: .95rem;
	margin-bottom: 1rem;
}
.pcard .link-arrow {
	margin-top: auto;
	color: var(--em-700);
}

@media (min-width: 960px) {
	.filters-toggle {
		display: none;
	}
	.filters-body {
		display: block;
		margin-bottom: 0;
		position: sticky;
		top: calc(var(--hh) + 1.5rem);
	}
}

/* Product Details */
.pd-hero {
	color: var(--white);
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem);
	background: radial-gradient(60% 80% at 75% 50%, var(--em-700), rgba(28, 92, 75, 0) 70%), linear-gradient(180deg, var(--em-900), var(--em-950));
}
.pd-hero .crumb {
	color: var(--white);
}
.pd-hero h1 {
	margin-bottom: .6rem;
}
.pd-hero .lead {
	color: var(--white);
}
.pd-hero img {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}
.pd-detail-layout > :first-child {
	order: 2;
}
.pd-detail-layout > :last-child {
	order: 1;
}
@media (min-width: 1200px) {
	.pd-detail-layout > :first-child {
		order: 1;
	}
	.pd-detail-layout > :last-child {
		order: 2;
	}
}
.figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .25);
}
.figures dt {
	font-size: .85rem;
	color: var(--white);
	order: 2;
}
.figures dd {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-weight: 600;
	font-stretch: 108%;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.figures div {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.spec-table {
	width: 100%;
	border-collapse: collapse;
}
.spec-table th, .spec-table td {
	text-align: left;
	padding: 1rem 0;
	border-bottom: 1px solid var(--g-100);
	vertical-align: top;
}
.spec-table th {
	width: 42%;
	font-weight: 400;
	color: var(--g-600);
	padding-right: 1rem;
	font-size: .95rem;
}
.spec-table td {
	font-weight: 600;
}
.grid.spec-grid {
	align-items: stretch;
}
.spec-table-stacked {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.spec-table-stacked tbody {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.spec-table-stacked tr {
	display: flex;
	flex: 1;
	flex-direction: column;
	position: relative;
	padding-bottom: .5rem;
}
.spec-table-stacked tr::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid var(--g-300);
	content: "";
}
.spec-table-stacked th,
.spec-table-stacked td {
	display: block;
	width: 100%;
	padding-right: 0;
	border-bottom: 0;
}
.spec-table-stacked th {
	padding-bottom: .35rem;
	color: var(--em-900);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.spec-table-stacked td {
	padding-top: 0;
}
.check-list li {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: .75rem;
	padding: .85rem 0;
}
.check-list li::before {
	content: "";
	width: .5rem;
	height: .9rem;
	margin: .15rem .4rem 0 .3rem;
	border-right: 2.5px solid var(--em-700);
	border-bottom: 2.5px solid var(--em-700);
	transform: rotate(45deg);
}

/* About */
.steps > * {
	border-top: 3px solid var(--em-900);
	padding-top: 1.1rem;
}
.steps .num {
	font-size: 2.6rem;
	font-weight: 600;
	font-stretch: 112%;
	color: var(--em-700);
	line-height: 1;
	margin-bottom: .75rem;
}
.steps p {
	color: var(--g-600);
	margin: 0;
}
.about-visual {
	position: relative;
}
.about-visual .pcard-media img {
	filter: grayscale(1);
	transition: filter .3s ease;
}
.about-visual:hover .pcard-media img {
	filter: grayscale(0);
}
@media (min-width: 1200px) {
	.about-story > :nth-child(2) {
		padding-left: clamp(1rem, 2.5vw, 2.5rem);
	}
}
.values h3 {
	margin-bottom: .3rem;
}
.values p {
	color: var(--g-600);
	margin: 0;
}
.about-values .feature {
	width: 100%;
	margin-inline: 0;
	grid-template-columns: 1fr;
}
.about-values .pcard-principles {
	background: var(--em-900);
	color: var(--white);
}
.about-values .pcard-principles .feature {
	border-color: rgba(255, 255, 255, .25);
}
.about-values .pcard-principles p {
	color: var(--white);
}
.about-values .pcard-principles .check-list li::before {
	border-color: var(--green);
}
.big-statement {
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	font-weight: 500;
	font-stretch: 105%;
	letter-spacing: -.015em;
	line-height: 1.5;
	max-width: 26ch;
	margin: 0;
}
.big-statement + p {
	color: var(--g-600);
}

/* Contact */
.form {
	display: grid;
	gap: 1.25rem;
}
.form .btn {
	justify-self: start;
}
.form-status {
	margin: 0;
	font-weight: 600;
	color: var(--em-700);
}
.info-block {
	padding-block: 1.25rem;
	border-top: 1px solid var(--g-100);
}
.info-block h3 {
	font-size: 1.1rem;
	margin-bottom: .35rem;
}
.info-block p {
	margin: 0;
	color: var(--g-600);
}
.info-block a {
	color: var(--ink);
}

/* ============ Footer ============ */
.site-footer {
	background: var(--em-900);
	color: var(--white);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	font-size: 1rem;
}
.footer-grid {
	padding-bottom: 3rem;
}
.footer-brand {
	color: var(--white);
  	font-weight: 600;
  	margin-bottom: .9rem;
}
.footer-brand p {
	margin: 0;
}
.footer-social {
	display: flex;
	gap: .75rem;
	margin-top: 1.25rem;
}
.footer-social a {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .35);
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
	background: var(--em-800);
}
.footer-social img {
	width: 20px;
	height: 20px;
	filter: invert(1);
}
.footer-title {
	color: var(--white);
	font-weight: 600;
	margin-bottom: .9rem;
}
.site-footer li {
	margin-bottom: .5rem;
}
.site-footer a {
	text-decoration: none;
}
.site-footer a:hover {
	text-decoration: underline;
}
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	border-top: 1px solid #1E4A3E;
	padding-block: 1.25rem 2rem;
}
.footer-bottom p {
	margin: 0;
	font-size: .85rem;
}

/* ============ Warranty and Privacy Information ============ */
.warranty-card-title{
	padding: 0 0 .75rem;
}
.warranty-shipping {
	margin-top: var(--gap);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.warranty-shipping h3 {
	padding: 0 0 .75rem;
}
.warranty-shipping p:last-child {
	margin-bottom: 0;
}
.warranty-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	padding-top: 2rem;
	text-align: center;
}
.warranty-cta p {
	margin: 0;
	font-weight: 600;
}
.policy-content {
	max-width: 900px;
}
.policy-updated {
	color: var(--g-600);
}
.policy-divider {
	height: 1px;
	margin-block: 1.5rem;
	background: var(--g-100);
}
.policy-prose h2 {
	margin-top: 1.75rem;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.policy-prose h2:first-child {
	margin-top: 0;
}
.policy-prose ul {
	list-style: disc;
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}
.policy-prose li {
	margin-bottom: .65rem;
}
.policy-prose a {
	color: var(--em-700);
}
.not-found-head .error-code {
	order: 1;
	margin: 0 0 .75rem;
	color: var(--em-700);
	font-size: clamp(5rem, 14vw, 9rem);
	font-weight: 700;
	letter-spacing: -.06em;
	line-height: .9;
}
.not-found-head .not-found-title {
	order: 2;
}
.not-found-head .not-found-lead {
	order: 3;
}
.not-found-head .not-found-actions {
	order: 4;
	width: 100%;
	justify-content: center;
	margin-top: 1.75rem;
}

/* ============ Floating Action Buttons ============ */
.floating-action-wrapper {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	z-index: 1050;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	pointer-events: none;
}
.floating-btn {
	display: grid;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	place-items: center;
	border: 0;
	color: var(--white);
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition: opacity .25s, visibility .25s, transform .25s, background-color .2s;
}
.floating-btn.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.floating-btn img {
	width: 1.5rem;
	height: 1.5rem;
	filter: brightness(0) invert(1);
}
.btn-whatsapp {
	position: relative;
	background: #25D366;
}
.btn-whatsapp:hover {
	background: #20BA5A;
}
.btn-whatsapp::after {
	position: absolute;
	right: calc(100% + .75rem);
	top: 50%;
	padding: .45rem .8rem;
	background: #25D366;
	color: var(--white);
	content: "Chat WhatsApp";
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate( .5rem, -50%);
	transition: opacity .2s, visibility .2s, transform .2s;
	pointer-events: none;
}
.btn-whatsapp:hover::after,
.btn-whatsapp:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}
.btn-back-to-top {
	background: var(--em-700);
}
.btn-back-to-top:hover {
	background: var(--em-900);
}
@media (max-width: 768px) {
	.floating-action-wrapper {
		right: 1.25rem;
		bottom: 5rem;
	}
}

/* ============ Motion ============ */
.hero-copy {
	animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}