/* JetBrains Mono */

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 100;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-100.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 200;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-200.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 300;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-300.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-regular.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-500.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 600;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-600.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 700;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-700.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 800;
	src: url(/wp-content/themes/maina-vira/assets/fonts/JetBrainsMono/jetbrains-mono-v20-cyrillic_latin-800.woff2) format("woff2");
}

/* Saar SP Demo */

@font-face {
	font-display: swap;
	font-family: "Saar SP Demo";
	font-style: normal;
	font-weight: 400;
	src: url(/wp-content/themes/maina-vira/assets/fonts/SaarSPDemo/SaarSPDemoRegular.woff2) format("woff2");
}

@layer global-styles {
:root {
	/* Цветовая палитра */
	--clr-accent-400: #da5729; /* Основной акцентный цвет (кнопки, ссылки, активные элементы) */
	--clr-accent-500: #b13e15; /* Акцентный цвет при наведении или нажатии */

	--clr-neutral-100: #363533; /* Цвет основного текста на светлом фоне (самый темный из темной темы) */
	--clr-neutral-400: #7b7974; /* Светлый оттенок для границ, разделителей или фона (светлее, чем 500) */
	--clr-neutral-500: #898682; /* Оттенок для границ, теней или фона */
	--clr-neutral-500-a: #89868280;
	--clr-neutral-700: #c3bfbc;
	--clr-neutral-800: #d0ccc8; /* Светлый фон — для карточек, панелей и т.д. (соответствует темному 1b1b1b) */
	--clr-neutral-900: #e4dfd9; /* Базовый светлый фон — основной фон страницы (соответствует темному 0f0f0f) */
	--clr-neutral-999: #ffffff;

	--clr-white: #ffffff;
	--clr-white-100: #f2f1f0;

	/* Шрифты */
	--ff-primary: "JetBrains Mono", sans-serif;
	--ff-heading: "Saar SP Demo", sans-serif;

	/* Размеры шрифтов */
	--fs-body-sm: clamp(0.75rem, 0.25vi + 0.7rem, 1rem);
	--fs-body-md: clamp(0.875rem, 0.375vi + 0.8rem, 1.25rem);
	--fs-heading-sm: clamp(1rem, 2.27vi + 0.43rem, 2.25rem);
	--fs-heading-md: clamp(1.25rem, 1.875vi + 0.875rem, 3.125rem);
	--fs-heading-lg: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);

	/* Жирность шрифтов */
	--fw-sm: 400;
	--fw-md: 500;

	/* Межстрочные интервалы */
	--lh-sm: 1.1;
	--lh-md: 1.2;

	/* Переходы */
	--transition-ease-sm: 0.2s ease;
	--transition-ease-md: 0.4s ease;
	--transition-ease-lg: 0.6s ease;
}

html.dark-theme {
	--clr-neutral-100: #f2f1f0; /* Цвет основного текста на тёмном фоне */
	--clr-neutral-400: #414141; /* Светлый оттенок для границ, разделителей или фона */
	--clr-neutral-500: #393939;
	--clr-neutral-500-a: #39393980; /* Тёмный оттенок для границ, теней или фона */
	--clr-neutral-700: #272525;
	--clr-neutral-800: #1b1b1b; /* Светлый тёмный фон — для карточек, панелей и т.д. */
	--clr-neutral-900: #0f0f0f; /* Базовый тёмный фон — основной фон страницы */
	--clr-neutral-999: #000000;
}

}
@layer global-styles {
/* Global styles */

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

html,
body {
	height: 100%;
	scrollbar-gutter: stable;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: hidden;
	background-color: var(--clr-neutral-900);
	color: var(--clr-neutral-100);
	font-family: var(--ff-primary);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-md);
	line-height: var(--lh-md);
}

body.is-menu-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
}

h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
	color: currentColor;
}

img,
picture {
	display: block;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

.city-label {
	transform: translate(10px, -6px);
}

}
/* Heading styles */

.heading-sm,
.heading-md,
.heading-lg {
	margin-block-start: 0;
	font-family: var(--ff-heading);
	font-weight: var(--fw-sm);
	line-height: var(--lh-sm);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.heading-sm {
	font-size: var(--fs-heading-sm);
}

.heading-md {
	font-size: var(--fs-heading-md);
}

.heading-lg {
	font-size: var(--fs-heading-lg);
}

/* Button styles */

.button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: flex-end;
	gap: 0.75em;
	padding: 0.5em 2em;
	border: 1px solid var(--clr-accent-400);
	border-radius: 999em;
	background-color: var(--clr-accent-400);
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.button--blur {
	border: 1px solid var(--clr-neutral-400);
	background-color: rgb(211, 210, 210, 0.1);
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
}

.button:hover,
.button:focus {
	border-color: var(--clr-accent-500);
	background-color: var(--clr-accent-500);
}

.button--blur:hover,
.button--blur:focus {
	color: var(--clr-white);
}

.button:active {
	transform: scale(0.95);
}

.button__text {
	color: var(--clr-white);
	line-height: var(--lh-sm);
}

.button--blur .button__text {
	color: inherit;
}

.button__icon {
	width: 1.1em;
	height: 1.1em;
	transform: translateY(-0.02em);
	fill: var(--clr-white);
}

.button--blur .button__icon {
	fill: currentColor;
}

@media (max-width: 36em) {
	.button {
		padding-inline: 1em;
	}
}

.js-order-cart-button {
	position: relative;
}

.js-order-cart-button.is-active::before {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: var(--clr-accent-400);
	content: "";
	transform: translate(50%, 50%);
}

.link {
	display: flex;
	align-items: center;
	gap: 0.75em;
	color: inherit;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.link:focus,
.link:hover {
	color: var(--clr-accent-400);
}

.link__icon {
	width: 1.1em;
	height: 1.1em;
	transform: translateY(-0.02em);
	fill: currentColor;
}

/* Button icon styles */

.button-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-999);
	cursor: pointer;
}

.button-icon:focus,
.button-icon:hover {
	background-color: var(--clr-neutral-800);
}

.button-icon__icon {
	width: 1.1em;
	height: 1.1em;
	fill: var(--clr-neutral-100);
}

/* Checkbox styles */

.checkbox {
	position: relative;
	display: flex;
	gap: 0.25em;
	padding-inline-start: 1.5rem;
	font-size: 0.75rem;
	line-height: 1.5;
}

.checkbox::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-900);
}

.checkbox::before:hover {
	/* stylelint-disable-next-line declaration-no-important */
	border-color: var(--clr-accent-500) !important;
}

.checkbox:has(input:checked)::before {
	border-color: var(--clr-accent-400);
}

.checkbox.is-error::before {
	outline: 2px solid #ff0000;
}

.checkbox::after {
	content: '';
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 0.75rem;
	height: 0.75rem;
	background-color: transparent;
}

.checkbox::after:hover {
	/* stylelint-disable-next-line declaration-no-important */
	background-color: var(--clr-accent-500) !important;
}

.checkbox:has(input:checked)::after {
	background-color: var(--clr-accent-400);
}

.checkbox__input {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.checkbox__label {
	flex-grow: 1;
	opacity: 0.75;
}

.checkbox__label a {
	color: var(--clr-accent-400);
	-webkit-text-decoration: none;
	text-decoration: none;
}

.checkbox__label a:hover {
	color: var(--clr-accent-500);
	-webkit-text-decoration: underline;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Logo styles */

.logo {
	flex: 0 0 auto;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.logo__image {
	aspect-ratio: 136/48;
	width: 8.5rem;
}

@media (max-width:48em) {
	.logo__image {
		width: 6rem;
	}
}

/* Menu styles */

.menu {
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.menu__button {
	position: relative;
	padding: 0.5em 1em;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-800);
	cursor: pointer;
}

.menu__button-text {
	color: var(--clr-neutral-100);
	text-transform: uppercase;
}

.menu__button:is(.is-open) .menu__button-text-open {
	display: none;
}

.menu__button:not(.is-open) .menu__button-text-close {
	display: none;
}

/* Theme styles */

.theme {
	--clip: polygon(calc(100% - 0.625em) 0, 100% 0.625em, 100% 100%, 0.625em 100%, 0 calc(100% - 0.625em), 0 0);

	position: relative;
}

.theme::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.theme__inner {
	position: relative;
	display: flex;
	align-items: center;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-999);
}

.theme__button {
	padding: 0.5em 1em;
	border: none;
	background: none;
	opacity: 0.5;
	color: var(--clr-neutral-100);
	cursor: pointer;
}

.theme__button:focus,
.theme__button:hover {
	opacity: 1;
	color: var(--clr-accent-500);
}

.theme__button.is-active {
	opacity: 1;
	color: var(--clr-neutral-100);
	pointer-events: none;
}

.theme__button-icon {
	display: block;
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

@media (max-width: 48em) {
	.theme__button {
		padding: 0.5em;
	}
}

.dark-theme [data-theme="light"] {
	display: none;
}

.light-theme [data-theme="dark"] {
	display: none;
}

/* Banner styles */

.banner {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip-banner: polygon(
		calc(80% - var(--size)) 0,
		80% var(--size),
		100% var(--size),
		100% 100%,
		calc(20% + var(--size)) 100%,
		20% calc(100% - var(--size)),
		0 calc(100% - var(--size)),
		0 0
	);

	position: relative;
	display: flex;
}

.banner::after {
	content: "";
	padding-bottom: 50%;
}

.banner::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip-banner);
	background-color: var(--clr-neutral-500);
}

.banner__inner {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 1.875rem;
	width: 100%;
	clip-path: var(--clip-banner);
}

.banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	clip-path: var(--clip-banner);
}

.banner__body {
	--clip: polygon(
		2rem 0%,
		calc(100% - 2rem) 0%,
		100% 2rem,
		100% calc(100% - 2rem),
		calc(100% - 2rem) 100%,
		2rem 100%,
		0% calc(100% - 2rem),
		0% 2rem
	);

	position: relative;
	width: min(48rem, 100%);
	color: var(--clr-white);
}

.banner__body::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background: rgb(57, 57, 57, 0.8);
}

.banner__body-inner {
	padding: 1.875rem;
	clip-path: var(--clip);
	background-color: rgb(0, 0, 0, 0.6);
}

.banner__body-text {
	color: var(--clr-white-100) !important;
	text-transform: uppercase;
}

@media (max-width: 48em) {
	.banner__inner {
		padding: 1.25rem 0.625rem;
	}

	.banner__body-inner {
		padding: 1.25rem 1.875rem;
	}
}

/* Card category styles */

.card-category {
	--size: clamp(1.25rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(
		var(--size) 0,
		calc(100% - var(--size) * 4) 0%,
		calc(100% - var(--size) * 3) var(--size),
		calc(100% - var(--size)) var(--size),
		100% calc(var(--size) * 2),
		100% calc(100% - var(--size)),
		calc(100% - var(--size)) 100%,
		var(--size) 100%,
		0 calc(100% - var(--size)),
		0 var(--size)
	);

	position: relative;
	display: flex;
}

.card-category::after {
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--size) * 1.5);
	width: calc(var(--size) * 0.75);
	height: calc(var(--size) * 0.75);
	background: url(/wp-content/themes/maina-vira/assets/images/icons/icon-star.svg) center/contain no-repeat;
	filter: grayscale(1);
	transition: all var(--transition-ease-sm) 0s;
}

.card-category:focus-within::after,
.card-category:hover::after {
	filter: grayscale(0);
}

.card-category::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-category__inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 1.875rem;
	min-height: 15rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-category__col {
	display: flex;
	flex: 1 1 calc(50% - 0.625rem);
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
}

.card-category__img {
	width: 100%;
	height: 12.5rem;
	object-fit: contain;
	object-position: center;
}

.card-category__heading {
	margin-block-start: 0;
}

@media (max-width:48em) {
	.card-category__inner,
	.card-category__col {
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		text-align: center;
	}

	.card-category__col {
		flex: 1 1 auto;
		gap: 1.25rem;
	}

	.card-category__heading {
		width: auto;
	}

	.card-category__img {
		width: min(20rem, 100%);
	}
}

/* Card clip styles */

.card-clip {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(
		var(--size) 0,
		calc(80% - var(--size)) 0%,
		80% var(--size),
		calc(100% - var(--size)) var(--size),
		100% calc(var(--size) * 2),
		100% calc(100% - var(--size)),
		calc(100% - var(--size)) 100%,
		var(--size) 100%,
		0 calc(100% - var(--size)),
		0 var(--size)
	);

	position: relative;
	display: flex;
}

.card-clip::before {
	content: "";
	float: left;
	padding-bottom: 55%;
}

.card-clip::after {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-clip__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	clip-path: var(--clip);
}

.card-clip__image {
	aspect-ratio: 10/7;
	width: 100%;
	min-width: auto;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.card-clip__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.875rem;
	background-color: var(--clr-neutral-800);
}

.card-clip__body-heading {
	position: relative;
	z-index: 1;
	width: 50%;
}

.card-clip__body-image {
	position: absolute;
	top: 50%;
	right: 0;
	width: 50%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
	transform: translate(2rem, -45%);
}

.card-clip__body-text {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	width: 50%;
}

@media (max-width:64em) {
	.card-clip__image {
		aspect-ratio: 10/5;
	}

	.card-clip::before {
		padding-bottom: 40%;
	}
}

@media (max-width:48em) {
	.card-clip__body-image {
		width: 40%;
	}

	.card-clip__body-heading,
	.card-clip__body-text {
		width: 70%;
	}
}

@media (max-width:36em) {
	.card-clip__body {
		padding: 1.25rem 0.625rem;
	}

	.card-clip__body-image {
		width: 30%;
	}

	.card-clip__body-heading,
	.card-clip__body-text {
		width: 80%;
	}
}

/* Card counter styles */

.card-counter {
	--size: 0.625rem;
	--clip: polygon(var(--size) 0,
			calc(80% - var(--size)) 0%,
			80% var(--size),
			calc(100% - var(--size)) var(--size),
			100% calc(var(--size) * 2),
			100% calc(100% - var(--size)),
			calc(100% - var(--size)) 100%,
			var(--size) 100%,
			0 calc(100% - var(--size)),
			0 var(--size));

	position: relative;
}

.card-counter::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-counter__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	min-height: 12.5rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-counter__label {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block-start: 0;
}

.card-counter__label--clr-accent {
	color: var(--clr-accent-400);
}

.card-counter__counter {
	margin-block-start: auto;
}

/* Counter */

.counter {
	--accent: var(--clr-accent-400);
	--digit-h: 44px;

	position: relative;
	display: inline-flex;
	flex-direction: column;
	background: transparent;
}

/* SVG-обводка снаружи (абсолютная, 0/0, 100%/100%) */
.counter__svg-border {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.counter__svg-border .ring-track {
	fill: none;
	stroke: var(--clr-neutral-500);
	stroke-width: 1;
}

.counter__svg-border .ring-progress {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.5;
	stroke-linecap: butt;
	transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Внутренний враппер */
.counter-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 1rem 1.25rem;
}

.counter-wrapper > *+* {
	margin-block-start: 0.2em;
}

/* ── Барабанная лента ── */
.counter__drums-wrap {
	display: flex;
	align-items: flex-start;
	height: var(--digit-h);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
			mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.counter__drum {
	display: flex;
	flex-direction: column;
	will-change: transform;
	flex-shrink: 0;
}

.counter__drum-digit {
	display: block;
	height: var(--digit-h);
	line-height: var(--digit-h);
	font-size: 2.4rem;
	text-align: end;
	min-width: 1.25rem;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

.counter__label {
	opacity: 0.75;
	line-height: 1;
}

/* OLD COUNTER

	.counter {
		display: flex;
		flex-direction: column;
		text-align: right;
	}

	.counter>*+* {
		margin-block-start: 0.2em;
	}

	.counter__value {
		font-size: 2.5rem;
		line-height: 1;
	}

	.counter__label {
		opacity: 0.75;
		line-height: 1;
	}
*/

/* Card box styles */

.card-cover {
	--offset: 1.875rem;

	position: relative;
	display: flex;
	padding: var(--offset);
	overflow: hidden;
	border: 1px solid var(--clr-neutral-400);
	color: var(--clr-white);
}

.card-cover::before {
	content: "";
	padding-bottom: 80%;
	width: 0;
}

.card-cover__wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.card-cover__image {
	position: absolute;
	inset: var(--offset);
	width: calc(100% - var(--offset) * 2);
	height: calc(100% - var(--offset) * 2);
	object-fit: cover;
	object-position: center;
}

.card-cover__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--offset);
	width: 100%;
	height: 100%;
	background: rgb(0, 0, 0, 0.2) linear-gradient(106deg, rgb(0, 0, 0, 0.2) 0%, rgb(0, 0, 0, 0.2) 70%);
	color: var(--clr-white);
	text-align: center;
}

.card-cover__body > * + * {
	margin-top: 0.875em;
}

@media (max-width: 64em) {
	.card-cover {
		--offset: 1.25rem;
	}

	.card-cover::before {
		padding-bottom: 50%;
	}
}

@media (max-width: 48em) {
	.card-cover {
		--offset: 0.625rem;
	}
}

/* Card docs styles */

.card-docs-group {
	display: flex;
	flex-direction: column;
}

.card-docs-group > * + * {
	margin-top: 1em;
}

.card-docs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
	gap: 1.25rem;
}

.card-docs {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
	padding: 0.625rem;
	overflow: hidden;
	border: 1px solid var(--clr-neutral-500);
	background-color: var(--clr-neutral-800);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.card-docs:hover {
	background-color: var(--clr-accent-500);
}

.card-docs__icon {
	align-self: flex-end;
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--clr-neutral-100);
}

.card-docs__heading {
	align-self: flex-start;
	margin-block-start: auto;
	opacity: 0.8;
	color: var(--clr-neutral-100);
	font-size: 0.9em;
	text-transform: uppercase;
}

/* Card order styles */

.card-order {
	display: flex;
	gap: 1.25rem;
	padding-block-start: 1rem;
	border-top: 1px solid var(--clr-neutral-500);
}

.card-order__head {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	padding: 0.625rem;
	border: 1px solid var(--clr-neutral-500);
}

.card-order__image {
	flex: 0 0 auto;
	width: 8.75rem;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.card-order__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.25rem;
}

.card-order__name {
	margin-block-start: 0;
	color: inherit;
}

.card-order__counter {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.card-order__counter-button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--clr-neutral-500);
	background: transparent;
	color: inherit;
	line-height: 0.5;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.card-order__counter-button:focus,
.card-order__counter-button:hover {
	background-color: var(--clr-accent-400);
	color: var(--clr-white);
}

.card-order__counter-button:active {
	background-color: var(--clr-accent-500);
}

.card-order__counter-count {
	color: inherit;
}

@media (max-width: 36em) {
	.card-order {
		flex-direction: column;
	}

	.card-order__image {
		margin-inline: auto;
	}
}

/* Card product styles */

.card-product {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(
		var(--size) 0,
		calc(80% - var(--size)) 0%,
		80% var(--size),
		calc(100% - var(--size)) var(--size),
		100% calc(var(--size) * 2),
		100% calc(100% - var(--size)),
		calc(100% - var(--size)) 100%,
		var(--size) 100%,
		0 calc(100% - var(--size)),
		0 var(--size)
	);

	position: relative;
	display: flex;
}

.card-product::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-product__inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 1.875rem;
	min-height: 12rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-product__heading {
	margin-block-end: auto;
}

.card-product__img {
	flex: 0 0 auto;
	margin-inline: auto;
	width: min(80%, 54em);
}

@media (max-width: 48em) {
	.card-product__inner {
		align-items: center;
	}

	.card-product__img {
		width: 100%;
	}
}

.card-branches {
	--size: 1.25rem;
	--clip: polygon(
		var(--size) 0,
		calc(80% - var(--size)) 0%,
		80% var(--size),
		calc(100% - var(--size)) var(--size),
		100% calc(var(--size) * 2),
		100% calc(100% - var(--size)),
		calc(100% - var(--size)) 100%,
		var(--size) 100%,
		0 calc(100% - var(--size)),
		0 var(--size)
	);

	position: relative;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0 9px 7px rgb(0, 0, 0, 0.1));
	transition: all var(--transition-ease-sm);
}

.card-branches::after {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.card-branches__wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	row-gap: 1.25rem;
	padding: 1.25rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.card-branches__heading {
	font-family: var(--ff-heading);
	font-size: var(--fs-heading-sm);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.card-branches__body {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--clr-neutral-500);
}

.card-branches__item {
	display: flex;
}

.card-branches__label {
	flex: 0 0 auto;
	width: 7em;
	color: var(--clr-accent-400);
}

.card-branches__value {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
}

.card-branches__value > * + * {
	margin-block-start: 0.25em;
}

.card-branches__link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.card-branches__link:hover {
	color: var(--clr-accent-500);
}

.card-branches__addr {
	color: inherit;
}

/* Contact card styles */

.card-contact {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--clr-neutral-500);
	background-color: var(--clr-neutral-800);
	filter: drop-shadow(0 9px 7px rgb(0, 0, 0, 0.1));
	transition: all var(--transition-ease-sm);
}

@media (max-width: 47.999em) {
	.card-contact {
		row-gap: 0.625rem;
		padding-inline: 0.625rem;
	}
}

.card-contact__head {
	display: flex;
	gap: 0.625rem;
}

.card-contact__heading {
	margin-block-start: 0;
	font-family: var(--ff-heading);
	font-size: var(--fs-heading-md);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.card-contact__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 63.999em) {
	.card-contact__body {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

@media (max-width: 47.999em) {
	.card-contact {
		gap: 0.625rem;
	}
}

.card-contact__item {
	display: flex;
	flex-direction: column;
}

.card-contact__item > * + * {
	margin-block-start: 0.5em;
}

.card-contact__item-head {
	flex: 0 0 auto;
	margin-block-start: 0;
	color: var(--clr-accent-400);
}

.card-contact__item-addr {
	margin-block-start: 0.625rem;
	color: inherit;
}

.card-contact__item-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	margin-block: 0.625rem 0;
}

.card-contact__item-list > * + * {
	margin-block-start: 0.5em;
}

.card-contact__item-link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.card-contact__item-link:hover {
	color: var(--clr-accent-500);
}

.product-counter {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.product-counter__button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--clr-neutral-500);
	background: transparent;
	color: inherit;
	line-height: 0.5;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.product-counter__button:focus,
.product-counter__button:hover {
	background-color: var(--clr-accent-400);
	color: var(--clr-white);
}

.product-counter__button:active {
	background-color: var(--clr-accent-500);
}

.product-counter__count {
	color: inherit;
}

/* Form styles */

.form {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(
		calc(70% - var(--size)) 0,
		calc(100% - var(--size)) 0,
		100% var(--size),
		100% calc(100% - var(--size)),
		calc(100% - var(--size)) 100%,
		var(--size) 100%,
		0 calc(100% - var(--size)),
		0 calc(var(--size) * 2),
		var(--size) var(--size),
		calc(70% - var(--size) * 2) var(--size)
	);

	position: relative;
}

.form:is(.is-loading) {
	opacity: 0.75;
	pointer-events: none;
}

.form::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.form__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-block: calc(var(--size) * 2) var(--size);
	padding-inline: var(--size);
	height: 100%;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-999);
}

.form__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--clr-neutral-500);
}

.form__label {
	opacity: 0.8;
	text-transform: uppercase;
}

.form__contacts-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.form__contacts-list > * + * {
	margin-block-start: 0.4em;
}

.form__contacts-item {
	color: var(--clr-accent-400);
	text-transform: uppercase;
	transition: all var(--transition-ease-sm) 0s;
}

.form__contacts-item:focus-within,
.form__contacts-item:hover {
	color: var(--clr-accent-500);
}

.form__contacts-item > a {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.form__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block-start: 1.25rem;
}
.form__policy,
.modal__policy {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.875rem;
	line-height: 1.3;
	opacity: 0.85;
	text-transform: none;
}

.form__policy-checkbox,
.modal__policy-checkbox {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.form__policy-link,
.modal__policy-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.form__policy-link:hover,
.modal__policy-link:hover {
	color: var(--clr-accent-500);
}


.form__input {
	padding-block: 0.5em;
	width: 100%;
	outline: none;
	border: none;
	border-block-end: 1px solid var(--clr-neutral-500);
	background: none;
	color: inherit;
	text-transform: uppercase;
}

.form__input--no-border-bottom {
	border-block-end: none;
}

.form__input:focus {
	border-block-end-color: var(--clr-accent-500);
}

.form__select {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--clr-neutral-500);
}

.form__select:focus-within {
	border-block-end-color: var(--clr-accent-500);
}

.form__select-button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	background: none;
}

.form__select-button-icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--clr-neutral-500);
}

.form__select-data-list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	display: none; /* flex */
	flex-direction: column;
	padding: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	width: 100%;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-999);
	list-style: none;
}

.form__select-data-list > * + * {
	margin-block-start: 0.75em;
}

.form__select-data-item {
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	text-transform: uppercase;
	transition: all var(--transition-ease-sm);
	cursor: pointer;
}

.form__select-data-item:focus,
.form__select-data-item:hover {
	color: var(--clr-accent-500);
}

.form__foot {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-block-start: auto;
}

.form__foot-loader {
	width: 2.2em;
	height: 2.2em;
	fill: var(--clr-accent-400);
}

.form__foot-button:is(.is-loading),
.form__foot-loader:not(.is-loading) {
	display: none;
}

.form__foot-button:disabled {
	filter: grayscale(1);
	pointer-events: none;
}

@media (max-width: 36em) {
	.form__foot {
		justify-content: center;
	}
}

/* Modal styles */

.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
	transition: all var(--transition-ease-sm) 0s;
}

.modal-backdrop:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.modal-backdrop:is(.is-active) {
	opacity: 1;
	visibility: visible;
}

.modal-backdrop::before {
	content: "";
	position: fixed;
	inset: 0;
	background-color: var(--clr-neutral-400);
	opacity: 0.5;
}

.modal {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0.625rem;
	width: 100%;
	height: 100%;
	overflow: hidden scroll;
	transition: all var(--transition-ease-sm);
	pointer-events: none;
}

.modal:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}

.modal:is(.is-active) {
	opacity: 1;
	visibility: visible;
}

.modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3.125rem;
	padding: 3.125rem;
	width: min(100%, 64rem);
	border: 1px solid var(--clr-neutral-400);
	background-color: var(--clr-neutral-800);
	pointer-events: all;
}

.modal__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.25rem;
}

.modal__heading {
	line-height: 1;
}

.modal__close {
	flex: 0 0 auto;
	margin-block-start: 0.5em;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-family: var(--ff-heading);
	text-transform: uppercase;
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.modal__close:hover,
.modal__close:focus {
	color: var(--clr-accent-400);
}

.modal__close:active {
	color: var(--clr-accent-500);
}

.modal__body {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.modal__order {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.modal__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.modal__order:is(.is-loading),
.modal__form:is(.is-loading) {
	opacity: 0.75;
	pointer-events: none;
}

.modal__form-row {
	display: flex;
	gap: 1.25rem;
}

.modal__form-row > * {
	flex: 1 1 100%;
}

.modal__textarea {
	resize: vertical;
}

.modal__input,
.modal__textarea {
	padding: 0.5em;
	width: 100%;
	outline: none;
	border: none;
	border: 1px solid var(--clr-neutral-500);
	background: var(--clr-neutral-900);
	color: inherit;
	text-transform: uppercase;
}

.modal__input:focus,
.modal__textarea:focus {
	border-color: var(--clr-accent-500);
}

.modal__text > *:first-child {
	margin-block-start: 0;
}

.modal__foot {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 1rem;
}

.modal__foot-loader {
	width: 2.2em;
	height: 2.2em;
	fill: var(--clr-accent-400);
}

.modal__foot-button:is(.is-loading),
.modal__foot-loader:not(.is-loading) {
	display: none;
}

.modal__foot-button:disabled {
	filter: grayscale(1);
	pointer-events: none;
}

@media (max-width: 64em) {
	.modal__dialog {
		gap: 1.875rem;
		padding: 1.875rem;
	}
}

@media (max-width: 48em) {
	.modal__dialog {
		padding: 1.25rem;
	}

	.modal__form,
	.modal__form-row {
		gap: 0.625rem;
	}

	.modal__form-row {
		flex-direction: column;
	}
}

@media (max-width: 36em) {
	.modal__foot {
		flex-direction: column;
	}
}

/* Wrapper styles */

.wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100vh;
}

.wrapper > header,
.wrapper > footer {
	flex: 0 0 auto;
}

.wrapper > main {
	position: relative;
	flex: 1 1 auto;
}

.wrapper__bg-line-page-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	width: 100dvw;
	height: max(100vh, 100%);
	height: max(100dvh, 100%);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000000ff, #00000000);
	        mask-image: linear-gradient(to bottom, #000000ff, #00000000);
}

.wrapper__bg-line-page {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	object-fit: cover;
	object-position: center top;
	max-width: none;
}

/* Header styles */

.header {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid transparent;
	transition: background-color var(--transition-ease-sm) 0s;
}

.header.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 2000;
}

.header.scrolled,
.header.is-menu-open {
	border-color: var(--clr-neutral-400);
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
}

.header__container {
	display: flex;
	flex-direction: column;
}

.header__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	padding-block: 1.25rem;
}

.header__coll {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.header__coll:nth-child(1) {
	justify-content: flex-start;
}

.header__coll:nth-child(2) {
	justify-content: center;
}

.header__coll:nth-child(3) {
	justify-content: flex-end;
}

.header__logo,
.header__theme {
	z-index: 1001;
}

.header__buttons {
	z-index: 1001;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.header__menu-list {
	position: relative;
	margin: 0;
	margin-bottom: 1.25rem;
	padding: 1.25rem;
	width: -moz-max-content;
	width: max-content;
	border: 1px solid var(--clr-neutral-400);
	background: var(--clr-neutral-800);
	list-style: none;
}

.header:not(.is-menu-open) .header__menu-list {
	display: none;
}

.header:is(.is-menu-open) .header__menu-list {
	display: block;
}

.header__menu-list > * + * {
	margin-block-start: 0.5em;
}

.header__menu-link {
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.header__menu-link:hover,
.header__menu-link:focus {
	color: var(--clr-accent-500);
}

@media (max-width:48em) {
	.header__row {
		display: flex;
		justify-content: space-between;
		padding-block: 1.25rem;
	}

	.header__coll:nth-child(2) {
		display: none;
	}

	.header__menu-list {
		width: 100%;
		max-height: 85vh;
		max-height: 85dvh;
		overflow: hidden auto;
	}

	.header__menu-list > * + * {
		margin-block-start: 0.75em;
	}

	.header__menu-link {
		font-size: 1.25rem;
	}
}

/* Footer styles */

.footer {
	position: relative;
	padding-block: clamp(1.875rem, 8.125vi + 0.25rem, 10rem) 1.875rem;
}

.footer__bg-line {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
}

.footer__bg-line-image {
	position: relative;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center bottom;
}

.footer__container {
	display: grid;
	grid-template-columns: 1fr 57.1875rem;
	gap: 1.875rem;
}

.footer__col {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.footer__contact {
	display: flex;
	flex-direction: column;
}

.footer__contact > * + * {
	margin-block-start: 0.5em;
}

.footer__contact-link {
	display: flex;
	align-items: center;
	-moz-column-gap: 0.5em;
	     column-gap: 0.5em;
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__contact-link:focus,
.footer__contact-link:hover {
	color: var(--clr-accent-400);
}

.footer__contact-link::after,
.footer__contact-link::before {
	color: var(--clr-neutral-400);
}

.footer__contact-link::after {
	content: "}";
}

.footer__contact-link::before {
	content: "{";
}

.footer__social {
	display: flex;
	gap: 0.625rem;
	margin-block-start: auto;
}

.footer__social-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background-color: var(--clr-neutral-400);
	color: var(--clr-neutral-100);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__social-link:focus,
.footer__social-link:hover {
	background-color: var(--clr-accent-400);
}

.footer__social-link:active {
	transform: scale(0.95);
}

.footer__menu {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-moz-column-gap: 1.25rem;
	     column-gap: 1.25rem;
}

.footer__menu-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer__menu-col > * + * {
	margin-block-start: 0.5em;
}

.footer__menu-link {
	color: inherit;
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__menu-link:focus,
.footer__menu-link:hover {
	color: var(--clr-accent-400);
}

.footer__info {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	-moz-column-gap: 1.25rem;
	     column-gap: 1.25rem;
}

.footer__info-text {
	margin-block-start: 0;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
}

.footer__info-link {
	color: inherit;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.footer__info-link:focus,
.footer__info-link:hover {
	color: var(--clr-accent-400);
}

@media (max-width: 90em) {
	.footer__container {
		grid-template-columns: 1fr 2fr;
	}

	.footer__info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

@media (max-width: 64em) {
	.footer__bg-line-image {
		left: -10%;
		width: 120%;
		max-width: none;
	}

	.footer__container {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.footer__col {
		gap: 2.5rem;
	}

	.footer__col:nth-child(1) {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.footer__menu-col {
		align-items: center;
		text-align: center;
	}
}

@media (max-width:48em) {
	.footer__bg-line-image {
		left: -120%;
		width: 240%;
	}

	.footer__container,
	.footer__col {
		gap: 1.875rem;
	}

	.footer__col,
	.footer__col:nth-child(1),
	.footer__contact,
	.footer__menu,
	.footer__info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer__info > * + *,
	.footer__menu-col > *:first-child {
		margin-block-start: 0.5em;
	}
}

/* Section styles */

.section {
	padding-block: clamp(1.875rem, 8.125vi + 0.25rem, 10rem);
}

.section--no-padding-top {
	padding-block-start: 0;
}

.section--padding-top-small {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section--no-padding-bottom {
	padding-block-end: 0;
}

.section--padding-bottom-small {
	padding-block-end: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section__head {
	display: flex;
	flex-direction: column;
}

.section__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
}

@media (max-width: 64em) {
	.section__body {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* Section 404 styles */

.section-404 {
	flex: 1 1 auto;
}

.section-404__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.section-404__heading span:nth-child(1) {
	color: var(--clr-accent-400);
	font-weight: 700;
}

.section-404__text {
	text-wrap: balance;
}

.section-404__link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.section-404__link:hover {
	color: var(--clr-accent-500);
}

/* Section about styles */

.section-about {
	position: relative;
}

.section-about__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-about__head {
	display: flex;
}

.section-about__body {
	display: grid;
	grid-template-columns: 1fr minmax(37.5rem, 1fr);
	gap: 1.875rem;
}

.section-about__image {
	height: 100%;
}

.section-about__col {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-about__col-button {
	align-self: flex-start;
}

.section-about__text > *:first-child {
	margin-block-start: 0;
}

.section-about__col-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem;
	margin-block-start: auto;
}

@media (max-width: 64em) {
	.section-about__body {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.section-about__col-row {
		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	}
}

/* Section advantages styles */

/* section-callback styles */

.section-callback {
	position: relative;
}

.section-callback__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-callback__body {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.25rem;
}

@media (max-width: 48em) {
	.section-callback__body {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Section category styles */

.section-categories {
	padding-block: clamp(1.875rem, 3.125vi + 1.25rem, 5rem) clamp(1.875rem, 8.125vi + 0.25rem, 10rem);
}

.section-categories__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-categories__head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	gap: 1.875rem;
}

.section-categories__head-col {
	display: flex;
	flex-direction: column;
}

.section-categories__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	gap: 1.875rem;
	width: 100%;
}

@media (max-width:90em) {
	.section-categories__head,
	.section-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	}
}

@media (max-width:48em) {
	.section-categories__head {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.section-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 1.25rem;
	}
}

/* Section consultation styles */

.section-consultation {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-consultation__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-consultation__body {
	display: flex;
	gap: 1.875rem;
}

.section-consultation__col {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 1.875rem;
	margin-inline: auto;
	padding-block-end: 2.5rem;
	width: min(48em, 100%);
}

.section-consultation__image-wrapper {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(
		calc(60% - var(--size)) 0,
		60% var(--size),
		100% var(--size),
		100% 100%,
		calc(40% + var(--size)) 100%,
		40% calc(100% - var(--size)),
		0 calc(100% - var(--size)),
		0 0
	);

	position: relative;
	flex: 1 1 auto;
}

.section-consultation__image-wrapper::before {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.section-consultation__image {
	height: 100%;
	clip-path: var(--clip);
	object-fit: cover;
	object-position: center;
}

.section-consultation__expert {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-block-start: 0.25em;
	text-transform: uppercase;
}

.section-consultation__expert::before {
	content: "";
	width: 1em;
	height: 1em;
	background: url(/wp-content/themes/maina-vira/assets/images/icons/icon-star.svg) 100% center/cover no-repeat;
}

.section-consultation__form {
	flex: 1 1 auto;
}

@media (max-width: 64em) {
	.section-consultation__body {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Section development styles */

.section-development {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-development__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-development__head {
	display: flex;
}

.section-development__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.875rem, 8.125vi + 0.25rem, 10rem) 1.875rem;
	overflow: hidden;
	border: 1px solid var(--clr-neutral-500);
	background: rgb(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
}

.section-development__image {
	position: absolute;
	top: 50%;
	right: -5%;
	width: 70%;
	transform: translateY(-45%);
	object-fit: contain;
	object-position: center;
}

.section-development__heading {
	width: 35%;
}

.section-development__button {
	margin-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

@media (max-width:48em) {
	.section-development__body {
		align-items: center;
	}

	.section-development__image {
		position: static;
		width: 100%;
		transform: translateY(0%);
	}

	.section-development__heading {
		width: auto;
		text-align: center;
	}
}

/* Section docs styles */

.section-docs {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-docs__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-docs__head {
	display: flex;
}

.section-docs__body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.875rem;
}

.section-docs__main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-docs__image-wrap {
	display: flex;
	flex-direction: column;
}

.section-docs__image {
	width: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.section-docs__text > *:first-child {
	margin-block-start: 0;
}

.section-docs__grid {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-docs__row {
	display: flex;
	gap: 1.25rem;
}

.section-docs__card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: calc(50% - 0.625rem);
	border: 1px solid var(--clr-neutral-500);
	background-color: var(--clr-neutral-800);
	opacity: 0;
	transition: all var(--transition-ease-sm);
}

.section-docs__card--large {
	max-width: 70%;
}

.section-docs__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.625rem;
}

.section-docs__card-label {
	color: var(--clr-accent-400);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.section-docs__card-heading {
	text-wrap: balance;
	margin-block-start: 0.5em;
}

.section-docs__card-foot {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.section-docs__card-foot::before {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--clr-neutral-500);
}

.section-docs__card-more {
	display: flex;
	align-items: center;
	padding: 0;
	border: none;
	background: none;
	color: var(--clr-neutral-100);
	transition: all var(--transition-ease-sm);
	cursor: pointer;
}

.section-docs__card-more:focus,
.section-docs__card-more:hover {
	color: var(--clr-accent-500);
}

.section-docs__card-more-text {
	margin-inline-end: 0.5em;
	text-transform: uppercase;
}

.section-docs__card-more-icon {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
}

.section-docs__close {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.section-docs__close:not(.is-active) {
	display: none;
}

.section-docs__close-icon {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--clr-neutral-100);
}

.section-docs__info {
	margin-block-start: auto;
	padding-block-start: 2.5rem;
}

.section-docs__docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.625rem;
}

.section-docs__docs-link {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
	padding: 0.625rem;
	overflow: hidden;
	border: 1px solid var(--clr-neutral-500);
	background: transparent;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.section-docs__docs-link:not([style]) {
	display: none;
}

.section-docs__docs-link:focus,
.section-docs__docs-link:hover {
	background: var(--clr-accent-500);
}

.section-docs__docs-link-icon {
	align-self: flex-end;
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--clr-neutral-100);
}

.section-docs__docs-link-text {
	align-self: flex-start;
	margin-block-start: auto;
	opacity: 0.8;
	color: var(--clr-neutral-100);
	font-size: 0.9em;
	text-transform: uppercase;
}

@media (max-width:75em) {
	.section-docs__body {
		grid-template-columns: 1fr;
	}

	.section-docs__main {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 64em) {
	.section-docs__row {
		flex-direction: column;
	}

	.section-docs__card {
		width: 100% !important;
		max-width: none !important;
	}
}

@media (max-width:48em) {
	.section-docs__main {
		grid-template-columns: 1fr;
	}

	.section-docs__grid {
		flex-direction: column;
	}

	.section-docs__card,
	.section-docs__card--small,
	.section-docs__card--large {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Section history — 3D globe */

.section-history {
	position: relative;
}

.section-history__container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	-webkit-mask: linear-gradient(0deg, #000000ff 95%, #00000000);
	        mask: linear-gradient(0deg, #000000ff 95%, #00000000);
}

.section-history__head {
	position: absolute;
	top: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
	left: clamp(1.25rem, 2vi + 0.8rem, 1.875rem);
	z-index: 2;
	padding-block-start: 1.25rem;
}

/* Three.js canvas container */

.mv-h__canvas {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.mv-h__canvas canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* Bottom panel: slider + progress */

.mv-h__bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

/* Horizontal slider */

.mv-h__slider {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	margin: 0 clamp(1.25rem, 2vi + 0.8rem, 1.875rem);
}

.mv-h__slider::-webkit-scrollbar {
	display: none;
}

.mv-h__slide {
	flex: 0 0 25%; /* ≥1280px — 4 слайда */
	min-width: 150px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.mv-h__slide-year {
	opacity: 0;
	color: var(--clr-accent-400, #da5729);
	text-transform: uppercase;
	font-size: var(--fs-body-sm, clamp(0.75rem, 0.25vi + 0.7rem, 1rem));
	font-weight: 500;
	transition: opacity 0.2s ease;
}

.mv-h__slide-line {
	display: flex;
	width: 100%;
	height: 1.25rem;
	overflow: hidden;
	align-items: center;
}

.mv-h__slide-line::after {
	content: '';
	flex: 1 1 auto;
	margin-left: 1.25rem;
	margin-right: 1.125rem;
	background: repeating-linear-gradient(
		to right,
		var(--clr-accent-400, #da5729),
		var(--clr-accent-400, #da5729) 0.125rem,
		transparent 0.125rem,
		transparent 1.25rem
	);
	height: 75%;
}

.mv-h__slide-x {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	stroke: var(--clr-accent-400, #da5729);
	stroke-width: 1.5;
	fill: none;
}

.mv-h__slide-name {
	opacity: 0;
	font-size: var(--fs-body-sm, clamp(0.75rem, 0.25vi + 0.7rem, 1rem));
	font-weight: 600;
	text-transform: uppercase;
	color: var(--clr-neutral-100, #f2f1f0);
	transition: opacity 0.2s ease;
	padding-right: 1.25rem;
}

.mv-h__slide-text {
	opacity: 0;
	font-size: var(--fs-body-sm, clamp(0.75rem, 0.25vi + 0.7rem, 1rem));
	font-weight: 400;
	color: var(--clr-neutral-100, #f2f1f0);
	transition: opacity 0.2s ease;
	padding-right: 1.25rem;
}

.mv-h__slide.is-visible .mv-h__slide-year,
.mv-h__slide.is-visible .mv-h__slide-name,
.mv-h__slide.is-visible .mv-h__slide-text {
	opacity: 1;
}

/* Progress bar */

.mv-h__progress-wrap {
	padding: 1rem clamp(1.25rem, 2vi + 0.8rem, 1.875rem) 1.5rem;
}

.mv-h__progress {
	position: relative;
	width: 100%;
	height: 4px;
	background: var(--clr-neutral-500-a, #39393980);
	border-radius: 2px;
	cursor: pointer;
	-moz-user-select: none;
	     user-select: none;
	-webkit-user-select: none;
}

.mv-h__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: var(--clr-accent-400, #da5729);
	border-radius: 3px;
	pointer-events: none;
}

.mv-h__progress-tick {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1px;
	height: 6px;
	background: var(--clr-accent-400, #da5729);
	opacity: 75%;
	pointer-events: none;
	z-index: 1;
}

.mv-h__progress-thumb {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	background: var(--clr-neutral-100, #f2f1f0);
	border: 3px solid var(--clr-accent-400, #da5729);
	border-radius: 50%;
	cursor: grab;
	z-index: 3;
	transition: transform 0.15s;
}

.mv-h__progress-thumb:hover {
	transform: translate(-50%, -50%) scale(1.15);
}

.mv-h__progress-thumb:active {
	cursor: grabbing;
}

/* Nav arrows (desktop: hidden) */

.mv-h__arrows {
	display: none;
}

/* Responsive slides */

@media (max-width: 80em) {
	.mv-h__slide {
		flex: 0 0 33.333%; /* <1280px — 3 слайда */
	}
}

@media (max-width: 64em) {
	.mv-h__slide {
		flex: 0 0 50%; /* <1024px — 2 слайда */
	}
}

/* Mobile: скрываем глобус */

@media (max-width: 48em) {
	.section-history__container {
		aspect-ratio: auto;
		height: auto;
		-webkit-mask: none;
		        mask: none;
	}

	.section-history__head {
		position: static;
		padding: 1.25rem clamp(1.25rem, 2vi + 0.8rem, 1.875rem) 0;
	}

	.mv-h__canvas {
		display: none;
	}

	.mv-h__bottom {
		position: static;
	}

	.mv-h__slide {
		flex: 0 0 100%; /* <768px — 1 слайд */
	}

	.mv-h__slide-year,
	.mv-h__slide-name,
	.mv-h__slide-text {
		opacity: 1;
	}

	.mv-h__progress-wrap {
		display: none;
	}

	.mv-h__slider {
		padding-top: 1.5rem;
	}

	.mv-h__arrows {
		display: flex;
		justify-content: flex-end;
		gap: 0.75rem;
		padding: 1.25rem clamp(1.25rem, 2vi + 0.8rem, 1.875rem) 1.5rem;
	}

	.mv-h__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 1.5px solid var(--clr-accent-400, #da5729);
		border-radius: 50%;
		background: none;
		color: var(--clr-accent-400, #da5729);
		cursor: pointer;
		transition: background 0.2s, color 0.2s;
	}

	.mv-h__arrow:hover {
		background: var(--clr-accent-400, #da5729);
		color: var(--clr-neutral-100, #f2f1f0);
	}

	.mv-h__arrow svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.mv-h__arrow:disabled {
		opacity: 0.3;
		cursor: default;
		pointer-events: none;
	}
}

/* Section map styles */

.section-map {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-block-start: -5%;
	padding-block-end: 0;
}

.section-map__lines {
	position: absolute;
	top: calc(50% - 5px);
	width: 100vw;
	opacity: 0.625;
}

@media (max-width: 64em) {
	.section-map {
		margin-block-start: 0;
	}
}

.main-map {
	aspect-ratio: 16/9;
	width: 100%;
	height: auto;
}

.main-map__region {
	fill: var(--clr-neutral-700);
	stroke: var(--clr-neutral-900);
	stroke-width: 1px;
}

.main-map__railway {
	stroke: var(--clr-neutral-100);
	stroke-width: 1px;
	stroke-dasharray: 5px;
	opacity: 0.25;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.section-map__button-wrap {
	display: none;
}

@media (max-width: 63.999em) {
	.section-map__button-wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: block;
		transform: translate(-50%, -40%);
	}
}

.main-map__root {
	transform: translate(calc(-0.625rem / 2), -50%);
}

.main-map__root:hover {
	z-index: 300 !important;
}

.main-map__city {
	display: flex;
	align-items: center;
	-moz-column-gap: 0.25rem;
	     column-gap: 0.25rem;
	padding-block: 0.5rem;
	cursor: default;
}

@media (max-width: 63.999em) {
	.main-map__city,
	.main-map__railway {
		display: none;
	}
}

.main-map__city-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: var(--clr-accent-400);
}

.main-map__city-dot--dim {
	background-color: var(--clr-neutral-500);
	opacity: 0.75;
}

.main-map__city-name {
	display: flex;
	align-items: center;
	-moz-column-gap: 0.25em;
	     column-gap: 0.25em;
	font-size: var(--fs-body-sm);
	text-transform: uppercase;
}

@media (max-width: 79.999em) {
	.main-map__city-name {
		font-size: var(--fs-body-sm);
	}
}

.main-map__city-name::before {
	content: "{";
	opacity: 0.5;
}

.main-map__city-name::after {
	content: "}";
	opacity: 0.5;
}

.main-map__card {
	--size: 1.25rem;
	--clip: polygon(
		var(--size) 0,
		calc(80% - var(--size)) 0%,
		80% var(--size),
		calc(100% - var(--size)) var(--size),
		100% calc(var(--size) * 2),
		100% calc(100% - var(--size)),
		calc(100% - var(--size)) 100%,
		var(--size) 100%,
		0 calc(100% - var(--size)),
		0 var(--size)
	);

	position: absolute;
	top: 0;
	left: 0;
	z-index: 1500;
	display: flex;
	flex-direction: column;
	width: -moz-max-content;
	width: max-content;
	max-width: 32rem;
	opacity: 0;
	visibility: hidden;
	filter: drop-shadow(0 9px 7px rgb(0, 0, 0, 0.1));
	transition: all var(--transition-ease-sm);
}

.main-map__root:hover > .main-map__card {
	z-index: 1000;
	opacity: 1;
	visibility: visible;
}

.main-map__wrap:hover .main-map__card {
	opacity: 1;
}

.main-map__card::after {
	content: "";
	position: absolute;
	inset: -1px;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.main-map__card-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	row-gap: 1.25rem;
	padding: 1.25rem;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-800);
}

.main-map__card-heading {
	font-family: var(--ff-heading);
	font-size: var(--fs-heading-sm);
	line-height: var(--lh-sm);
	text-transform: uppercase;
}

.main-map__card-body {
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--clr-neutral-500);
}

.main-map__card-item {
	display: flex;
}

.main-map__card-label {
	flex: 0 0 auto;
	width: 7em;
	color: var(--clr-accent-400);
}

.main-map__card-value {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
}

.main-map__card-value > * + * {
	margin-block-start: 0.25em;
}

.main-map__card-link {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: all var(--transition-ease-sm) 0s;
}

.main-map__card-link:hover {
	color: var(--clr-accent-500);
}

.main-map__card-addr {
	color: inherit;
}

/* Section-product styles */

.section-product {
	display: flex;
	flex-direction: column;
	padding-block-start: 0;
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5.5rem);
}

.section-product__container {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.section-product__head {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.section-product__body {
	position: relative;
	display: flex;
	align-items: center;
}

.section-product__icon {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(4rem, 10vw);
	height: auto;
}

.section-product__lines {
	position: absolute;
	top: 50%;
	width: 100%;
	height: auto;
	transform: translateY(-40%);
}

.section-product__model {
	position: relative;
	margin-inline: auto;
	width: 100%;
}

.section-product__model-wrapper {
	position: relative;
	aspect-ratio: 4/1;
	width: 100%;
}

.section-product__model-container {
	width: 100%;
	height: 100%;
}

.section-product__model-container.is-load {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}

.section-product__model-container > canvas {
	cursor: grab;
}

.section-product__model-container > canvas:active {
	cursor: grabbing;
}

.section-product__foot {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
	margin-block-start: auto;
}

.section-product__col:nth-child(1) {
	display: flex;
	align-items: flex-end;
	gap: 1.25rem;
}

.section-product__col:nth-child(2) {
	display: grid;
	grid-template-columns: 1fr auto;
	justify-content: flex-end;
	gap: 1.25rem;
}

.section-product__video {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.25rem;
	padding: 1.25rem;
	min-width: 16.5rem;
	border: 1px solid var(--clr-neutral-500);
	background-color: rgb(0, 0, 0, 0);
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
}

.section-product__video-label {
	opacity: 0.8;
	text-transform: uppercase;
}

.section-product__video-play {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	border: none;
	border-radius: 50%;
	background: var(--clr-accent-400);
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.section-product__video-play:focus,
.section-product__video-play:hover {
	background: var(--clr-accent-500);
}

.section-product__video-play > svg {
	width: 1.5rem;
	height: 1.5rem;
}

.section-product__link {
	color: var(--clr-neutral-100);
	text-transform: uppercase;
	-webkit-text-decoration: none;
	text-decoration: none;
}

.section-product__link-text {
	color: var(--clr-neutral-100);
	text-wrap: balance;
}

.section-product__link-icon {
	margin-block-end: -0.2em;
	width: 1.125em;
	height: 1.125em;
	fill: currentColor;
}

.section-product__sub-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.25rem;
}

.section-product__label {
	margin-block-start: 0;
	opacity: 0.8;
}

.section-product__chars {
	-moz-column-count: 2;
	     column-count: 2;
	-moz-column-gap: 2.5rem;
	     column-gap: 2.5rem;
	opacity: 0.8;
}

.section-product__chars > * + * {
	margin-block-start: 0.375em;
}

.section-product__chars > *:first-child {
	margin-block-start: 0;
}

@media (max-width: 80em) {
	.section-product__col:nth-child(1) {
		flex-direction: column;
		align-items: flex-start;
	}

	.section-product__col:nth-child(2) {
		grid-template-columns: 1fr;
	}

	.section-product__label {
		text-align: right;
	}
}

@media (max-width: 48em) {
	.section-product__foot {
		grid-template-columns: 1fr;
	}

	.section-product__col:nth-child(1) {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.section-product__video-play {
		padding: 0.75rem;
	}

	.section-product__video-play > svg {
		width: 1rem;
		height: 1rem;
	}

	.section-product__sub-col {
		align-items: center;
	}

	.section-product__label {
		text-align: center;
	}
}

/* Section product banner styles */

.section-product-banner {
	position: relative;
	padding-block-end: 0;
}

.section-product-banner__container {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-product-banner__head {
	display: flex;
	align-items: flex-end;
}

.section-product-banner__body {
	display: flex;
	align-items: center;
	gap: 1.875rem;
	min-height: 50vh;
}

.section-product-banner__body-line {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: -1;
	width: 100%;
	height: auto;
	transform: translateY(-5%);
}

.section-product-banner__image {
	position: relative;
	margin-inline: auto;
	width: min(90rem, 85%);
}

/* Section product details styles */

.section-product-details {
	position: relative;
}

.section-product-details__container {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.section-product-details__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.875rem;
}

.section-product-details__body-lines {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 45%;
	transform: translateY(-50%);
	pointer-events: none;
}

.section-product-details__col {
	display: flex;
	flex-direction: column;
}

.section-product-details__models {
	width: min(100%, 36rem);
	color: var(--clr-accent-400);
}

.section-product-details__table {
	border-collapse: collapse;
}

/* stylelint-disable-next-line no-descending-specificity */
.section-product-details__table td > *,
/* stylelint-disable-next-line no-descending-specificity */
.section-product-details__table th > * {
	margin-block-start: 0.25em;
}

.section-product-details__table td,
.section-product-details__table th {
	padding: 0.5rem 0.25rem;
	text-align: left;
	vertical-align: top;
}

.section-product-details__table tr {
	border-bottom: 1px solid currentColor;
}

@media (max-width: 80em) {
	.section-product-details__body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 48em) {
	.section-product__model-wrapper {
		aspect-ratio: 2/1;
	}

	.section-product-details__table {
		font-size: 0.875rem;
	}
}

@media (max-width: 36em) {
	.section-product-details__table {
		font-size: 0.625rem;
	}
}

/* Section products styles */

.section-products {
	padding-block-start: clamp(1.875rem, 3.125vi + 1.25rem, 5rem);
}

.section-products__container {
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-products__head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
	gap: 1.875rem;
}

.section-products__head-col {
	display: flex;
	flex-direction: column;
}

.section-products__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 1.25rem;
}

@media (max-width:90em) {
	.section-products__head {
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	}
}

@media (max-width:48em) {
	.section-products__head {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.section-products__grid {
		grid-template-columns: 1fr;
	}
}

/* Section video styles */

.section-video {
	overflow: hidden;
	color: var(--clr-white);
}

.section-video__container {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: clamp(1.25rem, 3.75vi + 0.5rem, 5rem);
}

.section-video__head {
	position: absolute;
	top: 0;
	z-index: 1;
	padding-block-start: 1.25rem;
	width: 100%;
	text-shadow: 2px 2px 8px rgb(0, 0, 0, 0.75);
}

.section-video__body {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}

.section-video__player {
	--size: clamp(0.625rem, 1.25vi + 0.375rem, 1.875rem);
	--clip: polygon(
		calc(80% - var(--size)) 0,
		80% var(--size),
		100% var(--size),
		100% 100%,
		calc(20% + var(--size)) 100%,
		20% calc(100% - var(--size)),
		0 calc(100% - var(--size)),
		0 0
	);

	position: relative;
	display: flex;
	aspect-ratio: 16/7;
}

.section-video__player::before {
	content: "";
	position: absolute;
	inset: -2px 0;
	clip-path: var(--clip);
	background-color: var(--clr-neutral-500);
}

.section-video__player-button {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	width: 5rem;
	height: 5rem;
	border: 1px solid var(--clr-neutral-400);
	border-radius: 50%;
	background-color: var(--clr-neutral-500-a);
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
	transform: translate(-50%, -50%);
	transition: all var(--transition-ease-sm) 0s;
	cursor: pointer;
}

.section-video__player-button:hover {
	border-color: var(--clr-accent-400);
	background-color: var(--clr-accent-400);
}

.section-video__player-button-icon {
	width: 2.5rem;
	height: 2.5rem;
	fill: var(--clr-accent-400);
	transition: all var(--transition-ease-sm) 0s;
}

.section-video__player-button:hover .section-video__player-button-icon {
	fill: var(--clr-white);
}

.section-video__player-inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	height: 100%;
	clip-path: var(--clip);
}

.section-video__player-video {
	aspect-ratio: 16 / 7;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width:64em) {
	.section-video__head {
		position: static;
		margin-block-start: 0;
	}
}

@layer utilities {
/* Animation styles */

.split-line,
.split-char {
	transform: translateZ(0); /* форсит hardware acceleration */
	will-change: transform;
	backface-visibility: hidden;
}

.split-line p {
	margin-block-start: 0;
}

.split-line + .split-line {
	margin-block-start: 0;
}

.anim-lines svg,
.anim-lines path {
	contain: strict;
	backface-visibility: hidden;
}

.anim-slide-top {
	opacity: 0;
}

.anim-text-typing p:first-child {
	margin-block-start: 0;
}

.anim-heading,
.anim-text-typing,
.anim-list-typing {
	opacity: 0;
}

.anim-text-typing .split-word {
	display: inline-flex !important;
}

}
@layer utilities {
/* Color utilities */

}
@layer utilities {
/* Typography utilities */

.text {
	opacity: 0.75;
	line-height: var(--lh-md);
	text-transform: uppercase;
}

.text > * + *,
.list > * + *,
.anim-text-typing ul > * + * {
	margin-block-start: 0.67em;
}

.text > *:first-child {
	margin-block-start: 0;
}

.list,
.anim-text-typing ul {
	margin-inline: 0;
	padding-inline-start: 0;
	list-style: none;
}

.list > li,
.anim-text-typing ul > li {
	position: relative;
	padding-inline-start: 1.5em;
}

.list > li::before,
.anim-text-typing ul > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	flex: 0 0 auto;
	margin-block-start: 0.2em;
	width: 1em;
	height: 1em;
	background: url(/wp-content/themes/maina-vira/assets/images/icons/icon-star.svg) 100% center/contain no-repeat;
}

}
@layer utilities {
/* Container utilities */

.container {
	--offset: 1.875rem;

	margin-inline: auto;
	width: min(120rem, 100% - 2 * var(--offset));
}

@media (max-width: 62em) {
	.container {
		--offset: 1.25rem;
	}
}

@media (max-width: 48em) {
	.container {
		--offset: 1.25rem;
	}
}

}
/* Vendors */



/* Globals */




/* Components */





















/* Layouts */


















/* Utils */