@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-LightItalic.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-LightItalic.woff) format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Italic.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Italic.woff) format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-MediumItalic.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-MediumItalic.woff) format("woff");
	font-weight: 500;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-BoldItalic.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-BoldItalic.woff) format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-BlackItalic.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-BlackItalic.woff) format("woff");
	font-weight: 900;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Light.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Light.woff) format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Regular.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Regular.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Medium.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Medium.woff) format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Bold.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Bold.woff) format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Lato;
	src: url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Black.woff2) format("woff2"), url(/local/templates/asd-lighting-new/fonts/Lato/subset-Lato-Black.woff) format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap
}

:root {
	--font-family: "Lato", sans-serif;
	--primary: #74aa2a;
	--accent1: #74aa2a;
	--accent2: #eb0e16;
	--accent3: #0071b8;
	--accent4: #f39800;
	--accent: var(--accent1);
	--scrollbar-width: .5rem;
	--scrollbar-color: var(--primary);
	--header-height: 88px;
	--container-gutter-x: 20px
}

@media (min-width: 768px) {
	:root {
		--container-gutter-x: 40px
	}
}

*::-webkit-scrollbar {
	width: var(--scrollbar-width, .5rem);
	height: var(--scrollbar-width, .5rem)
}

*::-webkit-scrollbar-button {
	display: none
}

*::-webkit-scrollbar-corner {
	background: transparent
}

*::-webkit-scrollbar-track {
	background-color: #0e0b13
}

*::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-color)
}

*::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-color)
}

*::-webkit-resizer {
	display: none
}

*,
*:before,
*:after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent
}

*:before,
*:after {
	pointer-events: none
}

body {
	overflow-x: hidden
}

@media (min-width: 1024px) {
	.layout {
		display: grid;
		min-height: 100vh;
		min-height: 100dvh;
		grid-template-columns: 100%;
		grid-template-rows: auto 1fr auto
	}
}

.accent-color-1 {
	--accent: var(--accent1)
}

.accent-color-2 {
	--accent: var(--accent2)
}

.accent-color-3 {
	--accent: var(--accent3)
}

.accent-color-4 {
	--accent: var(--accent4)
}

.x-container,
.x-container-fluid,
.x-container-xxl {
	width: 100%;
	padding-right: calc(var(--container-gutter-x, 20px) * .5);
	padding-left: calc(var(--container-gutter-x, 20px) * .5);
	margin-right: auto;
	margin-left: auto
}

@media (min-width: 1408px) {

	.x-container-xxl,
	.x-container-xl,
	.x-container-lg,
	.x-container-md,
	.x-container-sm,
	.x-container {
		max-width: 1400px
	}
}

.icon {
	display: inline-block;
	vertical-align: middle
}

.icon_point {
	width: 18px;
	height: 24px;
	background: url(/local/templates/asd-lighting-new/images/icons/marker.png)
}

.icon_clock {
	width: 24px;
	height: 24px;
	background: url(/local/templates/asd-lighting-new/images/icons/clock.png)
}

.icon_phone {
	width: 24px;
	height: 24px;
	background: url(/local/templates/asd-lighting-new/images/icons/phone.png)
}

.icon_mail {
	width: 24px;
	height: 18px;
	background: url(/local/templates/asd-lighting-new/images/icons/mail.png)
}

.breadcrumb {
	font-family: var(--font-family);
	font-size: 16px;
	font-weight: 300;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-block: 40px;
	gap: 3px 10px
}

.breadcrumb__item {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #666;
	gap: 10px
}

.breadcrumb__item:not(:first-child):before {
	position: relative;
	top: -1px;
	display: block;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	content: "";
	background: url(/local/templates/asd-lighting-new/images/icons/leaf.svg) center no-repeat;
	background-size: contain
}

.breadcrumb__item.active,
.breadcrumb__item:hover {
	color: var(--accent)
}

@media (min-width: 768px) {
	.breadcrumb {
		font-size: 18px
	}
}

.burger-button {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 48px;
	height: 40px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: none;
	background: none
}

.burger-button span {
	width: var(--header-menu-button-width);
	height: 8px;
	background: #74aa2a
}

.button {
	font-family: var(--font-family);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	display: inline-block;
	width: var(--button-width, auto);
	max-width: 100%;
	padding: 15px 40px 13px;
	cursor: pointer;
	transition: all .5s ease;
	text-align: center;
	text-transform: uppercase;
	color: var(--button-color, #fff);
	border: 1px solid var(--button-border, var(--primary));
	border-radius: 0;
	outline: 0;
	background: var(--button-bg, var(--primary))
}

.button-accent {
	--button-color: #fff;
	--button-border: var(--accent);
	--button-bg: var(--accent)
}

.accent-color-1 .button-accent {
	box-shadow: 0 16px 32px #74aa2a54
}

.accent-color-2 .button-accent {
	box-shadow: 0 16px 32px #eb0e1654
}

.accent-color-3 .button-accent {
	box-shadow: 0 16px 32px #0071b854
}

.accent-color-4 .button-accent {
	box-shadow: 0 16px 32px #f3980054
}

.button-primary {
	box-shadow: 0 16px 32px #74aa2a54;
	--button-color: #fff;
	--button-border: var(--primary);
	--button-bg: var(--primary)
}

.c-item {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.17;
	display: flex;
	align-items: center;
	color: #444;
	gap: 20px
}

.c-item__icon {
	flex-shrink: 0;
	width: 30px
}

.c-item__label {
	flex-shrink: 0;
	color: #aaa
}

.c-item__value {
	text-decoration: none;
	color: inherit
}

@media (min-width: 768px) {
	.c-item {
		font-size: 24px
	}

	.c-item__icon {
		width: 40px
	}
}

.color-selector {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px
}

.color-selector__item {
	width: 48px;
	height: 48px;
	cursor: pointer;
	border: 1px solid var(--border, var(--color, #ccc));
	border-radius: 100%;
	background: var(--color, #fff)
}

.color-selector__item_white {
	border-color: #ccc;
	background: #fff
}

.color-selector__item_black {
	border-color: #000;
	background: #000
}

.custom-select {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	position: relative;
	z-index: 1;
	width: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	white-space: nowrap;
	background-color: #fff;
	--select-height: 44px
}

.custom-select.is-open {
	z-index: 200
}

.custom-select__selected {
	position: relative;
	z-index: 1;
	display: flex;
	overflow: hidden;
	align-items: center;
	width: 100%;
	height: var(--select-height);
	padding-inline: 20px;
	padding-top: 3px;
	cursor: pointer;
	text-transform: uppercase;
	border: 1px solid rgb(204, 204, 204);
	border-radius: 20px;
	background: #fff url(/local/templates/asd-lighting-new/images/icons/triangle-down.svg) no-repeat right 20px center
}

.custom-select__list {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	padding-top: var(--select-height);
	border-radius: 20px 20px 0 0;
	background: #fff;
	box-shadow: 0 12px 24px #00000029
}

.custom-select.is-open .custom-select__list {
	display: block
}

.custom-select__item {
	display: flex;
	align-items: center;
	height: var(--select-height);
	padding-inline: 20px;
	border-top: 1px solid #cdcdcd
}

.custom-select__item:first-child {
	border: none
}

.custom-select__item:hover {
	color: #fff;
	background: var(--primary)
}

.form-input {
	font-weight: 400;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0
}

.form-input-static {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	display: block;
	width: 100%;
	height: 31px;
	margin: 0;
	padding: 0
}

@media (min-width: 768px) {
	.form-input-static {
		font-size: 24px;
		height: 38px
	}
}

.form-group {
	display: flex;
	align-items: flex-end;
	gap: 1rem
}

.form-group-inputs {
	display: grid;
	align-content: start;
	gap: 33px;
	grid-template-columns: 100%
}

.input-select,
.input-textarea,
.input-text {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	display: block;
	width: 100%;
	padding: 4px 0;
	border: none;
	border-bottom: 1px solid #bcbcbc;
	background: none
}

.input-select:focus-visible,
.input-textarea:focus-visible,
.input-text:focus-visible {
	border-bottom-color: var(--accent);
	outline: none
}

@media (min-width: 768px) {

	.input-select,
	.input-textarea,
	.input-text {
		font-size: 24px
	}
}

.input-textarea {
	width: 100% !important;
	resize: vertical
}

.input-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.form-input:has(.input-select),
.form-input-select {
	position: relative
}

.form-input:has(.input-select) svg,
.form-input-select svg {
	position: absolute;
	right: 0;
	bottom: 50%;
	transform: translateY(50%);
	pointer-events: none;
	color: var(--accent)
}

.input-file-wrapper {
	cursor: pointer
}

.input-file-wrapper .input-file {
	position: absolute;
	left: -9999px
}

.input-file-wrapper span {
	font-family: var(--font-family);
	font-size: 24px;
	font-weight: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	text-align: center;
	color: var(--accent);
	border: 1px solid var(--accent)
}

.input-checkbox,
.input-radio {
	width: 1.4em;
	height: 1.4em;
	margin: 0;
	padding: .2rem;
	border: 1px solid var(--accent);
	background-clip: content-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.input-checkbox:checked,
.input-radio:checked {
	background-color: var(--accent)
}

.input-radio {
	border-radius: 10rem
}

.input-checkbox-label,
.input-radio-label {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300
}

@media (min-width: 768px) {

	.input-checkbox-label,
	.input-radio-label {
		font-size: 24px
	}
}

.form-checkbox,
.form-radio {
	display: flex;
	align-items: center;
	gap: 1rem
}

.header-search {
	position: relative;
	z-index: 10;
	width: 134px;
	height: 43px;
	transition: var(--transition);
	border-radius: 100px;
	background: #fff;
	box-shadow: var(--search-box-shadow, none);
	--transition: .25s ease;
	--ggw: var(--container-gutter-x, 20px)
}

.header-search__input {
	font-family: var(--font-family);
	font-size: 16px;
	font-weight: 300;
	display: block;
	width: 100%;
	height: 100%;
	padding-inline: 10px;
	transition: var(--transition);
	pointer-events: var(--input-pointer-events, none);
	opacity: var(--input-opacity, 0);
	border: none;
	outline: none;
	background: none
}

.header-search__input::-moz-placeholder {
	opacity: 1;
	color: #aaa
}

.header-search__input::placeholder {
	opacity: 1;
	color: #aaa
}

.header-search__button {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	height: 35px;
	margin: 0;
	padding: 0 20px 0 10px;
	cursor: pointer;
	transition: var(--transition);
	color: var(--search-button-color, #000);
	border: none;
	border-radius: 100px;
	background: var(--search-button-bg, transparent);
	gap: 10px
}

.header-search__icon {
	width: 20px;
	height: 20px;
	transition: var(--transition);
	border: 3px solid var(--search-icon-color, #74aa2a);
	border-radius: 100px
}

.header-search__icon+span {
	position: relative;
	top: 1px
}

@media (max-width: 1280px) {
	.header-search {
		--private: var(--header-private-width, 0)
	}

	.header-search.is-active {
		width: calc(100vw - var(--scrollbar-width) - var(--header-gap) - var(--header-logo-size) - var(--ggw) - var(--private));
		width: calc(100vw - var(--scrollbar-width) - var(--header-gap) - var(--header-logo-size) - var(--ggw));
		margin-right: calc((var(--header-gap) * 2 + var(--header-menu-button-width) + var(--private)) * -1);
		--search-box-shadow: inset 0 4px 8px rgba(0, 0, 0, .32);
		--input-opacity: 1;
		--input-pointer-events: all;
		--search-button-color: #fff;
		--search-button-bg: #74aa2a;
		--search-icon-color: #fff
	}
}

@media (max-width: 1280px) and (min-width: 640px) {
	.header-search.is-active {
		width: calc(100vw - var(--scrollbar-width) - var(--header-gap) * 2 - var(--header-menu-button-width) - var(--header-logo-size) - var(--ggw));
		margin-right: 0
	}
}

@media (min-width: 1280px) {
	.header-search {
		display: flex;
		align-items: center
	}

	.header-search__input {
		position: absolute;
		top: 0;
		right: 0
	}

	.header-search__button {
		position: relative;
		top: auto;
		right: auto
	}

	.header-search.is-active {
		--input-opacity: 1;
		--input-pointer-events: all;
		--search-button-color: #fff;
		--search-button-bg: #74aa2a;
		--search-icon-color: #fff
	}

	.header-search.is-active .header-search__input {
		width: calc(var(--container-width) - var(--header-gap) * 2 - var(--header-logo-size) - var(--container-gutter-x) - var(--ggw) - var(--private));
		max-width: calc(var(--container-width) - var(--header-gap) * 2 - var(--header-logo-size) - var(--container-gutter-x) - var(--ggw) - var(--private));
		border-radius: 100px;
		background: #fff;
		box-shadow: inset 0 4px 8px #00000052;
		--container-width: 1400px;
		--private: var(--header-private-width, 0)
	}
}

.leaf-list {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #444
}

.leaf-list li {
	line-height: 20px;
	display: flex;
	gap: 20px
}

.leaf-list li:before {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	content: "";
	background: url(/local/templates/asd-lighting-new/images/icons/leaf.svg) no-repeat center;
	background-size: contain
}

.leaf-list li+li {
	margin-top: 20px
}

@media (min-width: 1024px) {
	.leaf-list {
		font-size: 24px
	}

	.leaf-list li {
		line-height: 24px
	}

	.leaf-list li+li {
		margin-top: 30px
	}
}

.mainmenu {
	--mainmenu-active-color: var(--primary)
}

.mainmenu__list {
	font-family: var(--font-family);
	font-weight: 300;
	margin: 0;
	padding: 0;
	list-style: none
}

.mainmenu__link {
	display: flex;
	align-items: center;
	transition: none;
	text-decoration: none;
	color: #444
}

@media (max-width: 1280px) {
	.mainmenu__list {
		font-size: 24px
	}

	.mainmenu__item {
		border-bottom: 1px solid #cdcdcd
	}

	.mainmenu__link {
		padding: 17px 20px;
		gap: 22px
	}

	.mainmenu__link img {
		position: relative;
		top: -1px
	}

	.mainmenu__link:hover {
		text-decoration: none;
		color: #fff;
		background: var(--primary)
	}

	.mainmenu__link.is-active {
		color: #fff;
		background: var(--primary)
	}
}

@media (min-width: 1280px) {
	.mainmenu {
		--mainmenu-active-color: var(--accent)
	}

	.mainmenu__list {
		font-size: 16px;
		display: flex;
		align-items: center;
		text-transform: uppercase
	}

	.mainmenu__link {
		padding-block: 34px;
		padding-inline: 10px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		gap: 10px
	}

	.mainmenu__link:hover,
	.mainmenu__link.is-active {
		color: var(--mainmenu-active-color);
		border-top-color: var(--mainmenu-active-color)
	}
}

.modal {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%
}

.modal.show {
	display: block
}

.modal-backdrop {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffffe6
}

.modal-close {
	font-size: 0;
	line-height: 0;
	position: fixed;
	z-index: 3;
	top: 1rem;
	right: 1rem;
	width: 30px;
	height: 30px;
	cursor: pointer;
	color: transparent;
	border: none;
	background: none
}

.modal-close:before,
.modal-close:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 2px;
	margin-top: -1px;
	margin-left: -15px;
	content: "";
	background: #000
}

.modal-close:before {
	transform: rotate(45deg)
}

.modal-close:after {
	transform: rotate(-45deg)
}

.modal-wrapper {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%
}

@media (min-width: 768px) {
	.modal-wrapper {
		padding-block: 3rem
	}
}

.modal-content {
	max-width: 745px;
	margin: auto;
	padding: 1rem;
	border: 1px solid #000;
	background: #fff
}

@media (min-width: 768px) {
	.modal-content {
		padding: 2rem;
		border-radius: .5rem
	}
}

body.modal-is-shown,
body:has(.modal.show) {
	overflow: hidden
}

.office {
	font-family: var(--font-family);
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
	color: #fff;
	background: #000 var(--photo) no-repeat center center;
	background-size: cover;
	aspect-ratio: 46/60
}

.office:before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 80%)
}

.office__title {
	font-size: 24px;
	font-weight: 900;
	line-height: 30px;
	text-transform: uppercase
}

.office__address {
	font-size: 18px;
	font-weight: 300;
	line-height: 30px;
	margin-top: 10px
}

.office__link {
	font-size: 24px;
	font-weight: 300;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 15px;
	text-transform: uppercase;
	color: var(--accent1);
	gap: 16px
}

.office__link:before {
	flex-shrink: 0;
	width: 25px;
	height: 32px;
	content: "";
	background: url(/local/templates/asd-lighting-new/images/icons/point-green.png)
}

.office__link a {
	color: currentColor
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0;
	gap: .25rem
}

.pagination .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	text-decoration: none;
	color: var(--accent);
	border: 1px solid var(--accent)
}

.pagination .page-item.active .page-link {
	color: #fff;
	background-color: var(--accent)
}

.pagination .page-link.dots {
	border-color: transparent
}

.pagination-center {
	justify-content: center
}

.product-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px
}

.product-badge {
	display: flex;
	gap: 8px
}

.product-badge__icon {
	display: flex;
	width: 50px;
	height: 50px;
	border: 1px solid #cdcdcd;
	border-radius: 4px
}

.product-badge__icon img {
	width: 36px;
	height: 36px;
	margin: auto;
	-o-object-fit: contain;
	object-fit: contain
}

.product-badge__content {
	font-size: 12px;
	line-height: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-block: 5px;
	color: #444
}

.product-badge__text {
	opacity: .5
}

.product-card {
	font-family: var(--font-family);
	font-weight: 300;
	display: flex;
	align-items: flex-end;
	height: 285px;
	padding: 15px 20px;
	text-decoration: none !important;
	color: #000;
	border-radius: 20px;
	background: #fff var(--sm-image) no-repeat top center;
	background-size: auto 80%;
	box-shadow: 0 8px 20px #0000003d
}

.product-card:hover {
	box-shadow: 0 8px 10px #0000001a
}

.product-card__title {
	font-size: 25px;
	line-height: 1;
	width: 100%;
	text-align: center;
	text-transform: uppercase
}

@media (min-width: 1280px) {
	.product-card {
		background-image: var(--lg-image)
	}

	.product-card__title {
		text-align: var(--align, center)
	}
}

.product-description {
	font-family: var(--font-family);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.25;
	color: #444
}

.product-description>:first-child {
	margin-top: 0
}

.product-description>:last-child {
	margin-bottom: 0
}

@media (min-width: 768px) {
	.product-description {
		font-size: 18px
	}
}

@media (min-width: 1024px) {
	.product-description {
		font-size: 24px
	}
}

.product-link {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	display: flex;
	align-items: center;
	color: #444;
	gap: 30px
}

.product-link__link {
	display: flex;
	align-items: center;
	gap: 10px
}

.product-link__link a {
	color: var(--primary)
}

@media (min-width: 768px) {
	.product-link {
		font-size: 24px
	}
}

.product-photo__main {
	width: 100%;
	background: #fff;
	aspect-ratio: 1
}

.product-photo__main img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain
}

.product-photo__thumbs {
	display: grid;
	margin-top: 15px;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
}

.product-photo__thumb img {
	display: block;
	width: 100%;
	height: 105px;
	border-radius: 10px;
	box-shadow: 0 16px 20px #00000029;
	-o-object-fit: contain;
	object-fit: contain
}

@media (min-width: 1024px) {
	.product-photo__thumbs {
		grid-template-columns: repeat(auto-fill, minmax(90px, 1fr))
	}

	.product-photo__thumb img {
		height: 90px
	}
}

.sign-in {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	display: flex;
	align-items: center;
	color: currentColor;
	gap: 8px
}

.sign-in__icon {
	width: 20px;
	height: 20px
}

.sign-in__content {
	position: relative;
	top: 2px
}

@media (max-width: 640px) {
	.sign-in__content {
		display: none
	}
}

.social-links {
	display: flex;
	gap: 30px
}

.footer-text+.social-links {
	margin-top: 30px
}

.social-link {
	width: 36px;
	height: 36px;
	text-decoration: none;
	background: var(--icon) no-repeat center/contain
}

.social-link_facebook {
	--icon: url(/local/templates/asd-lighting-new/images/icons/facebook.png)
}

.social-link_linkedin {
	--icon: url(/local/templates/asd-lighting-new/images/icons/linkedin.png)
}

.social-link_youtube {
	--icon: url(/local/templates/asd-lighting-new/images/icons/youtube.png)
}

.title {
	font-family: var(--font-family);
	font-size: 24px;
	font-weight: 900;
	line-height: var(--square-size);
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	height: var(--square-size);
	padding-top: .25em;
	padding-left: 10px;
	text-transform: uppercase;
	--square-size: 45px
}

.title:before {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	width: var(--square-size);
	height: var(--square-size);
	content: "";
	transform: translateY(-50%);
	background: var(--accent)
}

.title-h1 {
	font-size: 36px;
	padding-top: .1em;
	padding-left: 12px;
	--square-size: 48px
}

@media (min-width: 768px) {
	.title-h1 {
		font-size: 48px;
		padding-top: .15em;
		padding-left: 20px;
		--square-size: 70px
	}
}

@media (min-width: 1024px) {
	.title-h1 {
		font-size: 70px;
		--square-size: 90px
	}
}

.variants {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	line-height: 20px;
	display: flex;
	align-items: flex-start;
	gap: 20px 40px
}

.variants__title {
	padding-top: 14px;
	text-transform: uppercase;
	color: #444
}

@media (min-width: 768px) {
	.variants {
		font-size: 24px;
		line-height: 30px
	}

	.variants__title {
		padding-top: 9px
	}
}

.about-block {
	font-family: var(--font-family);
	display: flex;
	gap: 20px
}

.about-block__image {
	position: relative;
	flex-shrink: 0;
	width: 180px
}

.about-block__image img {
	display: block;
	width: 100%;
	box-shadow: 0 20px 24px #0003;
	aspect-ratio: 1;
	-o-object-fit: cover;
	object-fit: cover
}

.about-block__text {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.22
}

.about-block__text p {
	margin: 22px 0
}

.about-block__text p:first-child {
	margin-top: 0
}

.about-block__text p:last-child {
	margin-bottom: 0
}

.about-group__b1 .about-block__text p:first-child {
	font-size: 24px
}

@media (max-width: 768px) {
	.about-block__image {
		display: none
	}

	.about-group__b1 .about-block__text p:not(:first-child) {
		font-size: 16px
	}
}

@media (min-width: 1024px) {
	.about-block__image {
		width: 230px
	}
}

@media (min-width: 1280px) {
	.about-block {
		gap: 30px
	}

	.about-block__image {
		width: 330px
	}

	.about-block__image img {
		position: absolute;
		top: 0;
		left: 0
	}

	.about-group__b2 .about-block__image img {
		position: static
	}

	.about-block__text {
		font-size: 24px
	}
}

.about-group__image {
	overflow: hidden;
	height: 140px
}

.about-group__image img {
	display: block;
	width: auto;
	max-width: none;
	height: 100%
}

.about-group__b1,
.about-group__b2 {
	margin-top: 22px
}

@media (min-width: 768px) {
	.about-group__image {
		display: none
	}

	.about-group__b1 {
		margin-top: 0
	}

	.about-group__b2 {
		margin-top: 30px;
		margin-left: 80px
	}
}

@media (min-width: 1024px) {
	.about-group__b2 {
		margin-left: 125px
	}
}

@media (min-width: 1280px) {
	.about-group {
		margin-block: 50px
	}
}

.catalog {
	display: grid;
	margin-top: 20px;
	grid-template-columns: 100%;
	gap: 20px;
	--size: 1
}

.catalog__item {
	min-width: 0
}

@media (min-width: 768px) {
	.catalog {
		margin-top: 30px;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 20px
	}

	.catalog__item:last-child {
		grid-column: span 2
	}
}

@media (min-width: 1280px) {
	.catalog {
		margin-top: 50px;
		grid-template-columns: repeat(4, 1fr);
		gap: 30px 20px
	}

	.catalog__item {
		grid-column: span var(--size)
	}
}

.contacts {
	display: grid;
	padding: 40px 0;
	grid-template-columns: 100%;
	gap: 70px
}

.contacts__title {
	margin-bottom: 40px
}

.contacts__items {
	display: grid;
	gap: 40px
}

.contacts__text {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.22;
	margin-bottom: 40px;
	color: #999
}

.contacts__form .form-input:not(:first-child) {
	margin-top: 50px
}

.contacts__submit {
	margin-top: 30px;
	--button-width: 100%
}

.contacts__map {
	display: none
}

@media (min-width: 768px) {
	.contacts {
		padding-block: 50px
	}

	.contacts__items {
		gap: 30px
	}

	.contacts__text {
		font-size: 24px
	}
}

@media (min-width: 1024px) {
	.contacts {
		padding-block: 60px;
		grid-template-columns: 4fr 3fr
	}

	.contacts__col:first-child {
		display: flex;
		flex-direction: column;
		justify-content: flex-start
	}

	.contacts__map {
		display: block;
		flex-grow: 1;
		margin-top: 54px;
		background: #000
	}

	.contacts__map .map-container,
	.contacts__map img {
		display: block;
		width: 100%;
		height: 100%
	}
}

.first-section {
	--pagination-size: 28px
}

.first-section .swiper-pagination {
	bottom: 70px;
	display: flex;
	justify-content: center;
	gap: 40px
}

.first-section .swiper-pagination-bullet {
	width: var(--pagination-size);
	height: var(--pagination-size);
	margin: 0 !important;
	opacity: 1;
	border-radius: 6px 0;
	background: #fff
}

.first-section .swiper-pagination-bullet-active {
	background: #fff url(/local/templates/asd-lighting-new/images/bullet.svg) no-repeat center
}

@media (max-width: 768px) {
	.first-section {
		--pagination-size: 20px
	}

	.first-section .swiper-pagination {
		bottom: 20px;
		gap: 15px
	}

	.first-section .swiper-pagination-bullet-active {
		background-size: 70% 70%
	}

	.first-section .slider-nav__button {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%)
	}
}

.slider-nav__button {
	position: absolute;
	z-index: 20;
	bottom: 144px;
	width: 63px;
	height: 85px;
	cursor: pointer;
	background: no-repeat center;
	background-size: contain
}

.slider-nav__button_prev {
	left: 0;
	background-image: url(/local/templates/asd-lighting-new/images/slider-nav-prev.svg)
}

.slider-nav__button_next {
	right: 0;
	background-image: url(/local/templates/asd-lighting-new/images/slider-nav-next.svg)
}

.footer {
	font-family: var(--font-family);
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 20px 0;
	color: #444;
	--red-size: 410px;
	--yellow-size: 270px
}

.footer:before {
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 0;
	width: var(--yellow-size);
	height: var(--yellow-size);
	content: "";
	transform: translate(50%, 68%);
	pointer-events: none;
	background: url(/local/templates/asd-lighting-new/images/footer-1.webp);
	background-size: 100% 100%
}

.footer__inner {
	position: relative;
	z-index: 0
}

@media (max-width: 768px) {
	.footer__inner:before {
		position: absolute;
		z-index: -1;
		right: 0;
		bottom: 0;
		width: var(--red-size);
		height: var(--red-size);
		content: "";
		transform: translate(63%);
		pointer-events: none;
		background: url(/local/templates/asd-lighting-new/images/footer-2.webp);
		background-size: 100% 100%
	}
}

.footer__logo {
	display: flex;
	justify-content: center
}

.footer__logo img {
	display: block;
	width: 70px;
	height: 70px
}

.footer__title {
	font-size: 18px;
	font-weight: 900;
	margin-top: 40px;
	text-align: center;
	text-transform: uppercase
}

.footer__address,
.footer__times,
.footer__contacts {
	margin-top: 36px
}

.footer__bottom {
	font-size: 16px;
	line-height: 20px;
	margin-top: 50px;
	padding-top: 32px;
	color: #999;
	border-top: 1px solid #cdcdcd
}

.footer__bottom .f-line:not(:first-child) {
	margin-top: 14px
}

@media (max-width: 768px) {
	.footer__main {
		display: grid;
		align-items: center;
		grid-template-columns: auto 1fr;
		gap: 16px
	}

	.footer__title {
		margin-top: 0;
		text-align: left
	}

	.footer__address,
	.footer__times,
	.footer__contacts {
		margin-top: 0;
		grid-column: span 2
	}
}

@media (min-width: 768px) {
	.footer:before {
		right: auto;
		left: 0;
		transform: translate(-64px, 185px)
	}

	.footer:after {
		position: absolute;
		z-index: -1;
		right: 0;
		bottom: 0;
		width: var(--red-size);
		height: var(--red-size);
		content: "";
		transform: translate(272px, 170px);
		pointer-events: none;
		background: url(/local/templates/asd-lighting-new/images/footer-2.webp);
		background-size: 100% 100%
	}

	.footer__main {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		-moz-column-gap: 1rem;
		column-gap: 1rem
	}

	.footer__logo,
	.footer__title {
		grid-column: span 3
	}

	.footer__bottom {
		text-align: center
	}
}

@media (min-width: 1310px) {
	.footer {
		border-top: 1px solid #dedede
	}

	.footer:before {
		top: 0;
		bottom: auto;
		left: 0;
		transform: translate(-120px, -120px)
	}

	.footer:after {
		content: none
	}

	.footer__main {
		grid-template-columns: 2fr 4fr 3fr 3fr;
		row-gap: 10px
	}

	.footer__logo {
		justify-content: flex-start;
		grid-column: span 1;
		grid-row: span 2
	}

	.footer__title {
		margin: 0;
		text-align: left
	}

	.footer__address,
	.footer__times,
	.footer__contacts {
		margin-top: 0
	}

	.footer__bottom {
		position: relative
	}

	.footer__bottom:before {
		position: absolute;
		right: 0;
		bottom: 0;
		width: var(--red-size);
		height: var(--red-size);
		content: "";
		transform: translate(50%, 50%);
		pointer-events: none;
		background: url(/local/templates/asd-lighting-new/images/footer-2.webp);
		background-size: 100% 100%
	}

	.footer__bottom .x-container {
		position: relative;
		display: flex;
		justify-content: space-between;
		gap: 1rem
	}

	.footer__bottom .x-container .f-line:not(:first-child) {
		margin-top: 0
	}
}

@media (min-width: 1408px) {
	.footer__main {
		grid-template-columns: 2fr 3fr 3fr 4fr
	}
}

.footer-text {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 10px
}

.footer-text:not(:first-child) {
	margin-top: 16px
}

.footer-text .icon {
	position: relative;
	align-self: flex-start;
	flex-shrink: 0
}

.footer-text .icon_mail {
	top: 3px
}

.form-filter-buy {
	display: grid;
	padding: 30px 0;
	grid-template-columns: 100%;
	gap: 36px;
	--button-width: 100%
}

@media (min-width: 768px) {
	.form-filter-buy {
		align-content: start;
		align-items: end;
		padding-top: 40px;
		gap: 25px 20px;
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (min-width: 1280px) {
	.form-filter-buy {
		grid-template-columns: repeat(4, 1fr);
		gap: 25px 30px
	}
}

.form-partners {
	display: grid;
	padding: 50px 0;
	grid-template-columns: 100%;
	gap: 33px;
	--button-width: 100%
}

@media (min-width: 768px) {
	.form-partners {
		--button-width: 480px
	}

	.form-partners__submit {
		text-align: center
	}
}

@media (min-width: 1024px) {
	.form-partners {
		-moz-column-gap: 75px;
		column-gap: 75px;
		grid-template-columns: 1fr 1fr
	}

	.form-partners__full {
		grid-column: span 2
	}
}

@media (min-width: 1280px) {
	.form-partners {
		-moz-column-gap: 150px;
		column-gap: 150px
	}
}

.login-form {
	padding-block: 50px
}

.login-form p:first-child {
	margin-top: 0
}

.login-form p:last-child {
	margin-bottom: 0
}

@media (min-width: 768px) {
	.login-form {
		max-width: 75%
	}
}

@media (min-width: 1024px) {
	.login-form {
		max-width: 50%
	}
}

.header {
	z-index: 300;
	padding: 0;
	--header-gap: 15px;
	--header-logo-size: 70px;
	--header-menu-button-width: 48px
}

.header__container {
	display: flex;
	align-items: center;
	gap: var(--header-gap)
}

.header__logo {
	z-index: 301;
	margin-right: auto
}

@media (max-width: 1310px) {
	.header__container {
		padding-block: 10px
	}

	.header__main {
		position: fixed;
		z-index: 301;
		top: 0;
		right: 0;
		display: none;
		overflow: auto;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		background: #0000004d
	}

	.is-open-mainmenu .header__main {
		display: block
	}

	.is-open-search .header__private,
	.is-open-search .header__button {
		z-index: -1;
		pointer-events: none;
		opacity: 0
	}
}

@media (min-width: 1310px) {
	.header__button {
		display: none
	}

	.header__search {
		order: 2
	}

	.header__private {
		order: 3
	}
}

.header-logo {
	display: flex;
	width: var(--header-logo-size);
	height: var(--header-logo-size)
}

.home-card {
	position: relative
}

.home-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 1920/1084;
	-o-object-fit: cover;
	object-fit: cover
}

.home-card__content,
.home-card__label,
.home-card__object {
	display: none
}

.map-section img {
	display: block;
	width: 100%
}

@media (max-width: 1310px) {
	.mobile-panel {
		position: absolute;
		top: 0;
		right: 0;
		width: 380px;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 20px;
		background: #fff
	}

	.mobile-panel__header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-block: 5px
	}

	.mobile-panel__nav {
		margin-top: 10px;
		border-top: 1px solid #cdcdcd
	}
}

@media (min-width: 1280px) {
	.mobile-panel__header {
		display: none
	}
}

.offices {
	display: grid;
	margin: 50px 0;
	grid-template-columns: 100%;
	gap: 40px
}

@media (min-width: 768px) {
	.offices {
		grid-template-columns: repeat(2, 1fr);
		gap: 50px 20px
	}
}

@media (min-width: 1024px) {
	.offices {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media (min-width: 1280px) {
	.offices {
		gap: 80px 30px
	}
}

.p-card {
	font-family: var(--font-family);
	font-size: 18px;
	font-weight: 300;
	display: flex;
	flex-direction: column;
	width: 390px;
	max-width: calc(100vw - var(--container-gutter-x) - var(--scrollbar-width));
	color: #444;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: 0 12px 24px #00000029;
	--card-padding: 20px
}

.p-card__photo {
	height: 220px;
	padding: 10px;
	border-bottom: 1px solid #cdcdcd
}

.p-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	object-fit: contain
}

.p-card__title {
	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	margin-top: 30px;
	padding-inline: var(--card-padding);
	text-transform: uppercase;
	color: var(--primary)
}

.p-card__title a {
	text-decoration: none;
	color: currentColor
}

.p-card__title a:hover {
	text-decoration: underline
}

.p-card__attributes {
	display: grid;
	margin: 30px 0 0;
	padding: 0;
	padding-inline: var(--card-padding);
	grid-template-columns: max-content 1fr;
	gap: 15px 30px
}

.p-card__attributes dt,
.p-card__attributes dd {
	margin: 0;
	padding: 0
}

.p-card__footer {
	display: flex;
	justify-content: center;
	margin-top: auto
}

.p-card__button {
	width: 80%;
	transform: translateY(50%);
	border-radius: 16px
}

.p-filter {
	display: grid;
	margin-block: 40px;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 12px
}

@media (min-width: 768px) {
	.p-filter {
		margin-block: 60px;
		grid-template-columns: repeat(4, 1fr);
		-moz-column-gap: 30px;
		column-gap: 30px
	}
}

.p-info {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr
}

.p-info__photo {
	display: flex;
	justify-content: center;
	grid-column: span 2
}

.p-info__photo img {
	max-width: 100%
}

.p-info__title {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	grid-column: span 2
}

.p-info__characteristics {
	font-size: 12px;
	line-height: 1.4;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none
}

.p-info__characteristics li {
	margin-top: .5rem
}

.p-info__characteristics span {
	display: block
}

.p-info__characteristics span:last-child {
	opacity: .5
}

@media (min-width: 768px) {
	.p-info__characteristics+.p-info__characteristics:before {
		position: absolute;
		top: 0;
		left: -1rem;
		width: 1px;
		height: 100%;
		content: "";
		opacity: .1;
		background: #000
	}

	.p-info__characteristics li {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem
	}
}

.p-info__footer {
	font-size: 12px;
	line-height: 1.4;
	padding-top: 1rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
	grid-column: span 2
}

.p-info__footer a {
	color: #000000b3
}

.p-info__footer a:hover {
	color: #85a83a
}

@media (min-width: 640px) {
	.p-info__footer {
		display: flex;
		align-items: center;
		justify-content: space-between
	}
}

@media (min-width: 768px) {
	.p-info {
		-moz-column-gap: 2rem;
		column-gap: 2rem
	}
}

.p-info-col-title {
	font-weight: 500
}

.p-info-col+.p-info-col {
	margin-top: .5rem
}

@media (min-width: 640px) {
	.p-info-col+.p-info-col {
		margin-top: 0
	}
}

.i-dl {
	position: relative
}

.i-dl:after {
	position: absolute;
	top: 2px;
	right: -15px;
	width: 11px;
	height: 11px;
	content: "";
	background: url(/local/templates/asd-lighting-new/images/icons/dl2.svg)
}

.i-grid {
	position: relative;
	padding-left: 25px
}

.i-grid:before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	content: "";
	background: url(/local/templates/asd-lighting-new/images/icons/grid.svg)
}

.i-controls {
	position: relative;
	padding-left: 25px
}

.i-controls:before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	content: "";
	background: url(/local/templates/asd-lighting-new/images/icons/controls.svg)
}

.product-info__list {
	margin-top: 30px
}

.product-info__badges,
.product-info__link {
	margin-top: 50px
}

@media (min-width: 1024px) {
	.product-info__list {
		margin-top: 40px
	}
}

.product-layout {
	font-size: 18px;
	display: grid;
	grid-template-columns: 100%
}

.product-layout__photo {
	margin-top: 20px
}

.product-layout__info {
	margin-top: 70px
}

@media (min-width: 768px) {
	.product-layout {
		align-content: start;
		align-items: start;
		grid-template-rows: auto 1fr;
		grid-template-columns: 1fr 1fr;
		gap: 30px 20px
	}

	.product-layout__photo {
		order: -3;
		margin: 0;
		grid-row: span 2
	}

	.product-layout__title {
		order: -2
	}

	.product-layout__main {
		order: -1
	}

	.product-layout__info {
		margin-top: 30px;
		grid-column: span 2
	}
}

@media (min-width: 1024px) {
	.product-layout {
		row-gap: 50px
	}
}

.related {
	overflow: hidden;
	margin-block: 40px;
	margin-right: calc(var(--shadow-size) * -1);
	margin-left: calc(var(--shadow-size) * -1);
	padding-right: var(--shadow-size);
	padding-left: var(--shadow-size);
	--shadow-size: 24px
}

.related .swiper {
	overflow: visible;
	padding-bottom: 30px
}

.related .swiper .swiper-slide {
	height: auto
}

@media (min-width: 768px) {
	.related {
		margin-block: 50px
	}
}

.search-page hr {
	margin: 1rem 0;
	border: none;
	border-top: 1px solid var(--accent)
}

.search-page a {
	color: var(--accent)
}

.search-page small {
	color: #0009
}

.search-page>a {
	font-family: var(--font-family);
	font-size: 24px;
	font-weight: 300;
	line-height: 1.2;
	text-decoration-thickness: 1px
}

.search-page>a:hover {
	text-decoration: underline
}

@media (min-width: 768px) {
	.search-page>a {
		font-size: 28px
	}
}

.tabs {
	margin: 10px 0
}

@media (min-width: 768px) {
	.tabs {
		margin: 50px 0
	}
}

.tabs-wrapper {
	overflow: hidden;
	border-bottom: 1px solid #bcbcbc;
	--scrollbar-width: 0
}

.tabs-buttons {
	display: flex;
	gap: 22px
}

@media (min-width: 768px) {
	.tabs-buttons {
		gap: 70px
	}
}

.tab {
	font-family: var(--font-family);
	font-size: 16px;
	margin-bottom: -1px;
	padding: 20px 0;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	text-transform: uppercase;
	color: #bcbcbc;
	border: none;
	border-bottom: 3px solid transparent;
	background: none
}

.tab:hover {
	color: var(--accent)
}

.tab.active {
	color: var(--accent);
	border-bottom-color: var(--accent)
}

@media (min-width: 768px) {
	.tab {
		font-size: 24px;
		padding: 15px 0
	}
}

.tab-panel {
	display: none
}

.tab-panel.active {
	display: block
}

.slider-navs,
.tabs-navigator {
	display: none;
	align-items: center;
	max-width: 460px;
	margin-top: 20px;
	margin-left: auto;
	gap: 36px
}

.slider-navs.tabs-nav-show,
.tabs-navigator.tabs-nav-show {
	display: flex
}

.slider-navs {
	display: flex;
	margin-right: auto;
	margin-left: 0
}

.slider-nav-prev,
.slider-nav-next,
.tabs-prev,
.tabs-next {
	position: relative;
	overflow: hidden;
	flex-grow: 1;
	height: 40px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: none;
	background: none;
	--arrow-color: #cdcdcd
}

.slider-nav-prev:hover,
.slider-nav-next:hover,
.tabs-prev:hover,
.tabs-next:hover {
	--arrow-color: var(--accent)
}

.slider-nav-prev:before,
.slider-nav-next:before,
.tabs-prev:before,
.tabs-next:before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	content: "";
	background-color: var(--arrow-color)
}

.slider-nav-prev:after,
.slider-nav-next:after,
.tabs-prev:after,
.tabs-next:after {
	position: absolute;
	top: 10px;
	width: 0;
	height: 0;
	content: "";
	border-style: solid;
	border-color: transparent
}

.slider-nav-prev:after,
.tabs-prev:after {
	left: 0;
	border-width: 10px 32px 10px 0;
	border-right-color: var(--arrow-color)
}

.slider-nav-next:after,
.tabs-next:after {
	right: 0;
	border-width: 10px 0 10px 32px;
	border-left-color: var(--arrow-color)
}

.top-section {
	font-family: var(--font-family)
}

.top-section__main {
	padding-block: 50px;
	background: #999 var(--bg-image) no-repeat center center/cover
}

.top-section__title {
	font-size: 36px;
	font-weight: 900;
	line-height: var(--title-height);
	position: relative;
	z-index: 0;
	width: -moz-fit-content;
	width: fit-content;
	height: var(--title-height);
	padding-top: 3px;
	padding-left: 12px;
	text-transform: uppercase;
	background: #ff0;
	--square-size: 48px;
	--title-height: 60px
}

.top-section__title:before {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	width: var(--square-size);
	height: var(--square-size);
	margin-top: calc(var(--square-size) / -2);
	content: "";
	background: var(--accent)
}

.top-section__title:after {
	position: absolute;
	z-index: -2;
	top: 0;
	right: -100px;
	width: 100vw;
	height: var(--title-height);
	content: "";
	background: #fff
}

.top-section__aside {
	padding-block: 30px
}

.top-section__text {
	font-size: 18px;
	font-weight: 300;
	line-height: 22px;
	position: relative;
	z-index: 0;
	padding: 20px 0;
	color: #fff
}

.top-section__text:before {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100%;
	content: "";
	background: #4b4b4b
}

@media (min-width: 768px) {
	.top-section__main {
		padding-bottom: 60px
	}

	.top-section__title {
		font-size: 48px;
		--square-size: 72px;
		--title-height: 100px
	}

	.top-section__aside {
		padding-block: 50px
	}

	.top-section__text {
		font-size: 32px;
		line-height: 1.22;
		width: -moz-fit-content;
		width: fit-content;
		padding-block: 25px;
		padding-right: 90px
	}
}

@media (min-width: 1024px) {
	.top-section__text {
		font-size: 36px
	}
}

@media (min-width: 1280px) {
	.top-section {
		background: #999 var(--bg-image) no-repeat center center/cover
	}

	.top-section__main {
		padding-top: 64px;
		padding-bottom: 126px;
		background: none
	}

	.top-section__title {
		font-size: 72px;
		padding-top: 5px;
		padding-left: 22px;
		--square-size: 90px;
		--title-height: 148px
	}

	.top-section__aside {
		margin-top: -130px;
		padding-bottom: 75px
	}

	.top-section__text {
		padding-inline: 90px;
		background: #000000b3
	}

	.top-section__text:before {
		content: none
	}
}

.nobr {
	white-space: nowrap
}

.sign-out {
	display: flex;
}