@charset 'utf-8';

body {
	--padding-side: 12px;
	--margin-side: 20px;
	--content-width: calc(100% - (var(--padding-side) * 2));
	--content-max-width: 1200px;
	--gap: 12px;
	--radius: 14px;
	--color-dark: #191A1A;
	--color-lite: #fff;
	--color-main: #014F99;
	--color-main-hover: #0063C0;
	--color-main-active: #007AEE;
	--color-accent: #DC0232;
	--color-accent-hover: #FF1E4F;
	--color-accent-active: #7A001B;
	--color-border: #ACAEB1;
	--color-border-hover: #717171;
	--color-border-active: #717171;
	--color-bg-dark: #001B34;
	--color-bg-lite: #FAFAFA;

	@media (min-width: 1024px) {
		--padding-side: 20px;
	}

	@media (min-width: 1200px) {
		--padding-side: 30px;
		--radius: 30px;
	}

	@media (min-width: 1300px) {
		--margin-side: 30px;
	}

}

body {
	display: grid;
	grid-template-columns: 100%;
	gap: var(--gap);
	padding: var(--gap) var(--margin-side);

	& > main,
	& > header,
	& > section {
		background: var(--color-bg-lite);
		border-radius: var(--radius);
	}

	@media (max-width: 1023px) {
		padding-bottom: calc(var(--gap) + 65px);
	}
}

main {
	position: relative;
}

.content {
	width: var(--content-width);
	max-width: var(--content-max-width);
	margin: 0 auto;
}

a,
path,
rect,
button {
	transition: all 300ms ease-in-out;
}

.icon {
	width: 26px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 300ms ease-in-out;

	&.plus {
		width: 28px;
		height: 28px;

		&::before,
		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			background: var(--color-main);
		}
		&::before {
			margin-left: -4px;
			width: 9px;
			height: 1px;
		}
		&::after {
			margin-top: -4px;
			width: 1px;
			height: 9px;
		}
	}
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
img.fit {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* fix bitrix bootstrap css
*******************************************************************************/

.content > .row {
	margin-left: 0 !important;
	margin-right: 0 !important;

	&::before,
	&::after {
		display: none !important;
	}
}

body .bx-soa-sidebar {
	height: auto;
}

/* h, text
*******************************************************************************/

body {
	--h1: 26px;
	--h2: 22px;
	--h3: 18px;
	--h4: 16px;
	font-family: "Zen Kaku Gothic Antique", serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var(--color-dark);

	/*text-wrap: balance;*/

	h1, h2, h3, h4, .h1, .h2 {
		font-weight: 500;
		line-height: 1.2;
		text-transform: uppercase;

		.accent {
			color: var(--color-main);
		}

		@media (min-width: 1024px) {
			line-height: 1.24;
		}

	}

	h1, .h1 {
		font-size: var(--h1);
	}
	h2, .h2 {
		font-size: var(--h2);
	}
	h3 {
		font-size: var(--h3);
	}
	h4 {
		font-size: var(--h4);
	}

	.pretitle {
		margin-bottom: 6px;
		color: var(--color-main);
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
	}

	.text {
		transition: all 300ms linear;
	}
	.text ol,
	.text ul {
		margin-bottom: 1.23em;
		padding-left: 30px;
		line-height: 1.5;
	}
	.text ul {
		list-style: none;
	}
	.text li {
		position: relative;
		margin: 0;
	}
	.text li::before {
		content: '';
		display: block;
		width: 3px;
		height: 3px;
		position: absolute;
		top: 0;
		right: 100%;
		margin: 12px;
		background: currentColor;
	}

	@media (min-width: 1200px) {
		--h1: 50px;
		--h2: 40px;
		--h3: 28px;
		--h4: 17px;
		font-size: 17px;
	}

}

/*
*******************************************************************************/

form {
	position: relative;

	/*&::after {
		content: '';
		display: block;
		width: calc(100% + 20px);
		height: calc(100% + 20px);
		position: absolute;
		top: -10px;
		left: -10px;
		background: rgba(255, 255, 255, .2);
		transition: all 200ms linear;
		border-radius: 5px;
		opacity: 0;
		visibility: hidden;
		cursor: wait;
	}
	&.sending::after {
		opacity: 1;
		visibility: visible;
	}*/

	label {
		cursor: pointer;
		display: block;

		.title {
			margin-bottom: 5px;
			line-height: 1.23;
		}
		.title i {
			color: var(--color-accent);
		}
		.title span {
			color: #717171;
		}
	}
	input:not([type="checkbox"]),
	textarea,
	select {
		width: 100%;
		height: 48px;
		padding: 0 20px;
		background: #fff;
		border-radius: 8px;
		border: 1px solid var(--color-border);
		transition: all 300ms ease-in-out;
	}
	textarea {
		overflow: auto;
		line-height: 1.1;
		min-height: 5.5em;
		resize: vertical;
		vertical-align: top;
	}
	button,
	input[type="file"] {
		cursor: pointer;
	}
	button {
		background: none;
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: var(--color-border-active);
	}
	:disabled {
		cursor: default;
	}

	[placeholder]::-webkit-input-placeholder { color: #717171; }
	[placeholder]:-ms-input-placeholder      { color: #717171; }
	[placeholder]::-moz-placeholder          { color: #717171; }
	[placeholder]:focus::-webkit-input-placeholder { color: transparent; }
	[placeholder]:focus:-ms-input-placeholder      { color: transparent; }
	[placeholder]:focus::-moz-placeholder          { color: transparent; }

	.form-group:has(input[type="checkbox"]) {
		display: flex;
		align-items: center;
		gap: 10px;

		& label {
			order: 2;
		}
		.soa-property-container {
			order: 1;
		}
	}

	@media screen (min-width: 1200px) {
		input {
			padding: 0 30px;
		}
	}

	@media (hover: hover) {
		input[type="number"]::-webkit-outer-spin-button,
		input[type="number"]::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
		input[type='number'],
		input[type="number"]:hover,
		input[type="number"]:focus {
			appearance: none;
			-moz-appearance: textfield;
		}
	}

	/*
	*******************************************************************************/

	.wrong input,
	.wrong textarea,
	.wrong .jq-selectcontent.__select {
		border-color: #f3c0c0;
		background: #ffeaea !important;
	}
	.error {
		padding: 5px 0;
		font-size: 14px;
		color: #c34343;
		transition: all 200ms linear;
		transform: translateY(-50%);
		opacity: 0;
	}
	.error.shown {
		opacity: 1;
		transform: translateY(0);
	}

	.ajax_loader {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60px;
		height: 60px;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	.ajax_loader_svg {
		width: 100%;
		height: 100%;
	}
	.ajax_loader_circle {
		stroke: #00A499;
		transition: 300ms stroke-dashoffset;
	  transform: rotate(-90deg);
	  transform-origin: 50% 50%;
	}
	.ajax_loader_digit {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		text-align: center;
	}

}

.btn {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 28px;
	font-weight: 500;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-dark);
	border: 1px solid var(--color-dark);
	background: none;
	border-radius: 8px;
	transition: all 300ms ease-in-out;

	/*&:active {
		color: var(--color-main-active);
		border-color: var(--color-main-active);
	}*/

	&.main {
		color: var(--color-lite);
		background: var(--color-main);
		border-color: var(--color-main);

		/*&:active {
			background: var(--color-main-active);
			border-color: var(--color-main-active);
		}*/
	}

	@media (hover: hover) {
		&:hover {
			color: var(--color-main-hover);
			border-color: var(--color-main-hover);
		}
		&.main:hover {
			color: var(--color-lite);
			background: var(--color-main-hover) !important;
			border-color: var(--color-main-hover) !important;
		}
	}
}

label:not(.noui) {
	--h: 20px;
	--lh: 20px;

	& div.big {
		--h: 42px;
	}

	input[type="radio"],
	input[type="checkbox"] {
	  display: none;
	}
	input[type="radio"] + span,
	input[type="checkbox"] + span {
	  position: relative;
	  display: block;
	  min-height: var(--h);
	  padding: calc((var(--h) - var(--lh)) / 2) 0 0 calc(var(--h) + 10px);
	  line-height: var(--lh);
	}
	input[type="radio"] + span::before,
	input[type="radio"] + span::after,
	input[type="checkbox"] + span::before,
	input[type="checkbox"] + span::after {
	  content: '';
	  display: block;
	  position: absolute;
	  box-sizing: border-box;
	  transition: all 300ms ease-in-out;
	}
	input[type="radio"] + span::before,
	input[type="checkbox"] + span::before,
	input[type="checkbox"] + span::after {
	  top: 0;
	  left: 0;
	  width: var(--h);
	  height: var(--h);
	}
	input[type="radio"] + span::before,
	input[type="checkbox"] + span::before {
		border: 1px solid var(--color-dark);
	}
	input[type="radio"] + span::after,
	input[type="checkbox"] + span::after {
	  opacity: 0;
	}
	input[type="radio"] + span::before,
	input[type="radio"] + span::after {
		border-radius: 50%;
	}
	input[type="checkbox"] + span::before,
	input[type="checkbox"] + span::after {
		border-radius: 6px;
	}
	input[type="radio"] + span:hover::before,
	input[type="checkbox"] + span:hover::before {
		border-color: var(--color-main-hover);
	}
	input[type="radio"] + span::after {
		top: 4px;
	  left: 4px;
	  width: 12px;
	  height: 12px;
	  background: var(--color-main);
	}
	input[type="checkbox"] + span::after {
		background: url(/_/media/check-white.svg) center center no-repeat;
		background-size: min(80%, 14px);
	}
	input[type="radio"]:checked + span::after,
	input[type="checkbox"]:checked + span::after {
	  opacity: 1;
	}
	input[type="radio"]:checked + span::before {
		border-color: var(--color-main);
	}
	input[type="checkbox"]:checked + span::before {
		border-color: var(--color-main);
		background: var(--color-main);
	}
}

label.toggle {

	& input {
		display: none;

		& + div {
			position: relative;
			padding-right: 60px;
			font-size: 15px;
			font-weight: 500;
			line-height: 26px;
			text-transform: uppercase;

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				transition: all 300ms ease-in-out;
			}
			&::before {
				right: 0;
				margin-top: -13px;
				width: 50px;
				height: 26px;
				border-radius: 13px;
				background: var(--color-border);
			}
			&::after {
				right: 25px;
				width: 24px;
				height: 24px;
				margin-top: -12px;
				border-radius: 50%;
				background: #fff;
			}
		}

		&:checked {
			& + div::before {
				background: var(--color-main);
			}
			& + div::after {
				right: 1px;
			}
		}
	}
}

label.toggleView {
	cursor: pointer;

	& input {
		display: none;

		& + div {
			position: relative;
			display: flex;
			align-items: center;
			gap: 16px;
			height: 38px;
			padding: 0 12px;
			border-radius: 17px;
			background: #E9E4E4;

			& svg {
				position: relative;
				z-index: 1;

				@media (hover: hover) {
					&:hover [stroke] {
						stroke: var(--color-main-hover);
					}
				}
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				transition: all 300ms ease-in-out;
				right: 35px;
				width: 42px;
				height: 36px;
				margin-top: -18px;
				border-radius: 17px;
				background: #fff;
			}
		}

		&:checked {
			& + div::before {
				right: 1px;
			}
		}
	}
}

.count {
	display: grid;
	justify-content: end;
	grid-template-columns: 48px 30px 48px;

	.minus,
	.plus {
		cursor: pointer;
		position: relative;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--color-main);
		border-radius: 8px;
	}
	.minus::before,
	.plus::before,
	.plus::after {
		content: '';
		display: block;
		width: 9px;
		height: 1px;
		position: absolute;
		top: 50%;
		left: 50%;
		background: var(--color-main);
	}
	.plus::before,
	.minus::before {
		margin-left: -4px;
	}
	.plus::after {
		margin-top: -4px;
		width: 1px;
		height: 9px;
	}
	& input:not([type="checkbox"]) {
		width: 30px;
		height: 48px;
		margin: 0;
		padding: 0;
		border: none;
		color: var(--color-dark);
		text-align: center;
	}

	@media (min-width: 1024px) {
		grid-template-columns: 48px 44px 48px;

		& input:not([type="checkbox"]) {
			width: 44px;
			font-size: 18px;
			font-weight: 500;
		}
	}

	@media (min-width: 1200px) {
		& input:not([type="checkbox"]) {
			font-size: 28px;
		}
	}
}

small.agree {
	color: #717171;
	font-size: 14px;

	& a {
		color: var(--color-dark);
		font-size: 15px;
		line-height: 1.23;
		text-decoration: underline;
	}
}

/*
*******************************************************************************/

.crumbs {
	margin: 24px 0 42px;
	position: relative;
	line-height: 1.23;

	& ul {
		list-style: none;
	}
	& li {
		display: inline;

		&:not(:last-child)::after {
			content: '-';
			color: var(--color-border-active);
			display: inline-block;
			line-height: 1;
			margin-top: -2px;
		}
	}
	& a {
		display: inline-block;
		color: var(--color-border-active);

		&:hover {
			color: var(--color-main-hover);
		}
	}

	@media (min-width: 1200px) {
		margin: 46px 0 56px;
	}

	&.scrolling {
		--line-height: 18px;
		line-height: var(--line-height);
		height: var(--line-height);
		white-space: nowrap;
		overflow: hidden;

		&::after {
			content: '';
			display: block;
			width: 30px;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
		}

		.inner {
			position: relative;
			overflow: auto;
		}
		.content {
			height: calc(var(--line-height) + 20px);
		}
		& ul {
			display: grid;
			grid-auto-flow: column;
			height: var(--line-height);
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 var(--padding-side);
		}
		& li {
			display: inline-flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 4px;

			&:last-child {
				padding-right: 20px;
			}
		}

		@media (min-width: var(--content-max-width)) {
			.row {
				padding: 0 calc((100% - var(--content-max-width)) / 2);
			}
		}
	}

}

/*
*******************************************************************************/

.pagination {
	margin-top: 40px;

	.get_offers.btn,
	.get_offers .btn {
		margin-bottom: 48px;
		width: 100%;
	}
	& ul {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	& a,
	& li {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 8px;
	  min-width: 36px;
	  height: 36px;
	  border: 1px solid transparent;
	  border-radius: 8px;

	  &.current {
	  	cursor: default;
	  	border-color: var(--color-main);
	  }
	}
	& li {
		border: none;
	}

	@media (hover: hover) {
		& a:hover {
			color: var(--color-main-hover);
		}
	}

	@media (max-width: 1023px) {
	  .pagi_item._prev {
	    display: none;
	  }
	  .pagi_item._num:nth-child(n+4) {
	    display: none;
	  }
	  .articles + .pagi .pagi_item._prev,
	  .articles + .pagi .pagi_item._next {
	    display: flex;
	    font-size: 0;
	  }
	}

	@media (min-width: 1024px) {
		margin-top: 70px;
	}
}

/* modals
*******************************************************************************/

@media screen {
	.modal {
		display: none;
		margin: 0;
		padding: 20px;
	}
	.fancybox-slide--html {
		padding: 0;
	}
	.modal_close {
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
		width: 30px;
		height: 30px;
		padding: 5px;
		background: none;
	}
}

@media screen (min-width: 1024px) {
	.modal {
		padding: 40px;
		margin: 100px auto;
	}
}

/*
*******************************************************************************/

.btn_prev,
.btn_next {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 45px;
	height: 45px;
	background: var(--color-main);
	border: 1px solid var(--color-main);
	cursor: pointer;

	&.btn_prev {
		padding-right: 2px;
	}
	&.btn_next {
		padding-left: 2px;
	}

	&:disabled,
	&.slick-disabled {
		background: none;
		cursor: default;

		& path {
			stroke: var(--color-main);
		}
	}

	@media (hover: hover) {
		&:not(.slick-disabled):not(:disabled):hover {
			background: var(--color-main-hover);
			border-color: var(--color-main-hover);
		}
	}
}

.slick-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	.btn_prev {
		order: 1;
	}
	.btn_next {
		order: 3;
	}
	.slick-disabled {
		background: none;
		cursor: default;

		& path {
			stroke: var(--color-main);
		}
	}

	.slick-dots {
		order: 2;
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;

		& li {
			width: 11px;
			height: 11px;
			border-radius: 50%;
			border: 1px solid var(--color-main);
			transition: all 300ms ease-in-out;

			&.slick-active {
				background: var(--color-main);
			}
		}

		& button {
			display: none;
		}
	}
}

/*
*******************************************************************************/

.offerLabels {
	z-index: 1;
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;

	.new {
		flex: 0 0 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
		color: var(--color-lite);
		background: var(--color-accent);
		border-radius: 50%;
	}
}

.offerCost {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.24;

	& svg {
		margin-bottom: -2px;
	}
}

.offerAct {
	display: flex;
	align-items: center;
	gap: 12px;

	.buy {
		flex-grow: 1;

		.btn {
			width: 100%;
			padding: 0 16px;
		}
		button[type="submit"] + a.btn {
			border-color: var(--color-main-active);
			background: var(--color-main-active);
		}
	}

	.tools {
		display: flex;
		gap: 8px;

		.btn {
			width: 48px;
			height: 48px;
			padding: 0;
			border-color: var(--color-main);

			& [stroke] {
				stroke: var(--color-main);
			}
			&.active {
				border-color: var(--color-main-active);
				background: var(--color-main-active);

				& [stroke] {
					stroke: var(--color-lite);
				}
			}
		}
	}

	@media (hover: hover) {
		.tools .btn:hover {
			border-color: var(--color-main-hover) !important;

			&:not(.active) [stroke] {
				stroke: var(--color-main-hover);
			}
		}
		.tools .btn.active:hover {
			background: var(--color-main-hover);
		}
	}
}

button[type="submit"].btn:disabled,
button[type="submit"].btn:not(:disabled) + a.btn {
	display: none;
}

/*
*******************************************************************************/

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
	height: 21px;

	.mCSB_dragger .mCSB_dragger_bar {
		height: 3px;
		margin: 9px auto;
		background: var(--color-main);
	}
	.mCSB_draggerRail {
		height: 1px;
		margin: 10px auto;
		background: var(--color-border);
	}
}

/*
*******************************************************************************/

.offerItem {
	position: relative;
	padding: 16px;
	background: var(--color-lite);
	border-radius: 12px;
	overflow: hidden;

	.pic {
		width: 100%;
		aspect-ratio: 1 / 1;

		& img {
			object-fit: contain;
		}
	}

	.offerLabels {
		position: absolute;
		top: 16px;
		right: 16px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 16px;

		.new {
			flex: 0 0 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			font-weight: 500;
			text-transform: uppercase;
			color: var(--color-lite);
			background: var(--color-accent);
			border-radius: 50%;
		}
	}

	.title {
		height: 2.6em;
		margin: 16px 0 26px;
		font-size: 17px;
		line-height: 1.3;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

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

	.have {
		color: var(--color-main);
		font-size: 17px;
		line-height: 1.3;

		&.not {
			color: var(--color-border-active);
		}
	}

	.props {
		display: none;
	}

	.offerAct {
		margin-top: 18px;
	}
}

@media (min-width: 1024px) {
	.list > .offerItem {
		display: grid;
		align-items: center;
		grid-template-columns: 252px 1fr 140px;
		/*grid-template-rows: 2.6em 22px 1fr;*/
		/*grid-template-rows: repeat(3, auto);*/
		grid-template-rows: auto 1fr auto;
		gap: 0 30px;

		.pic {
			grid-column: 1 / 2;
			grid-row: 1 / 4;
		}
		.offerLabels {
			top: 20px;
			left: 20px;
			right: auto;
			justify-content: flex-start;
		}
		.title {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			margin: 0;
			padding-top: 10px;
			height: auto;
		}
		.meta {
			grid-column: 2 / 3;
			grid-row: 2 / 3;

			.offerCost {
				position: absolute;
				right: 20px;
				bottom: 88px;
				font-size: 28px;
			}
		}
		.props {
			grid-column: 2 / 3;
			grid-row: 3 / 4;
			display: block;
			padding-bottom: 10px;
			line-height: 1.3;

			& dl {
				display: grid;
				gap: 8px;
			}
			& dl div {
				display: grid;
				grid-template-columns: 120px auto;
				gap: 10px;
			}
			& dt {
				color: var(--color-border-active);
			}
			& dd {}
		}
		.offerAct {
			grid-column: 3 / 4;
			grid-row: 1 / 4;
			height: 100%;
			display: flex;

			align-items: flex-end;
			flex-direction: column-reverse;
			justify-content: space-between;
			margin: 0;

			.buy {
				flex-grow: 0;
				width: 100%;
			}
		}
	}
}

/*
*******************************************************************************/

.selectLinks {
	position: relative;
	z-index: 10;

	.trig {
		cursor: pointer;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  gap: 12px;
	  height: 44px;
	  padding: 0 30px;
	  background: #fff;
	  border-radius: 8px;
	  transition: all 300ms ease-in-out;
	}
	.list {
		position: absolute;
		top: 100%;
		display: grid;
		justify-content: center;
		gap: 12px;
		list-style: none;
		margin: 6px 0 0;
		padding: 12px;
		background: #E9E4E4;
		border-radius: 8px;
		line-height: 1.3;
		overflow: hidden;
		transition: all 300ms ease-in-out;

		&:not(.shown) {
			opacity: 0;
			visibility: hidden;
		}

		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 6px;
			position: absolute;
			bottom: 100%;
		}

		& a {
			position: relative;

			&:hover {
				color: var(--color-main-hover);
			}

			&::before,
			&::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				height: 100%;
				width: 100%;
			}
			&::before {
				right: 100%;
			}
			&::after {
				left: 100%;
			}
		}
	}

	@media (max-width: 767px) {
		.trig,
		.list {
			width: 100%;
		}
	}

	@media (min-width: 768px) {
		.list {
			min-width: 100%;
		}
	}
}

/*
*******************************************************************************/

form.search {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	display: flex;
	border-radius: 8px;
	background: var(--color-main);
	transition: all 300ms ease-in-out;

	& input {
		flex-grow: 1;
		border-color: var(--color-main);
	}
	& button {
		flex: 0 0 44px;
		display: flex;
		align-items: center;
		justify-content: center;

		& svg {
			margin-bottom: 1px;
		}
		.text {
			display: none;
		}
	}

	&:has(input:focus) {
		background-color: var(--color-main-active);
	}

	&:has(button:hover) {
		background-color: var(--color-main-hover);
	}

	.result {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1;
		margin-top: 14px;
		padding: 0 30px;
		max-height: 490px;
		background: #fff;
		border: 1px solid var(--color-main);
		border-radius: 8px;
		overflow: auto;
		transition: all 300ms ease-in-out;
		opacity: 0;
		visibility: hidden;

		&.shown {
			opacity: 1;
			visibility: visible;
		}

		& ul {
			list-style: none;
			display: grid;
		}

		& li a {
			display: grid;
			align-items: center;
			grid-template-columns: 40px 1fr;
			gap: 14px;
			padding: 8px 0;
			border-bottom: 1px dashed var(--color-border);
			/*text-decoration: underline;
			text-decoration-style: solid;
			text-underline-offset: 3px;
			text-decoration-thickness: 1px;
			text-decoration-color: currentColor;*/

			/*&:hover {
				text-decoration-color: transparent;
			}*/

			li:last-child & {
				border-bottom: none;
			}

		}

		& > a {
			display: none;
		}

	}

}

/*
*******************************************************************************/

header.site {
	position: relative;
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 15px 0 24px;
	transition: all 300ms linear;

	.scrolled & {
		margin: 0 calc(var(--margin-side) * -1);
		padding-left: var(--margin-side);
		padding-right: var(--margin-side);
		border-radius: 0;
		box-shadow: 0 0 5px rgba(0,0,0,.1);
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
	}
	.logo {
		flex-grow: 1;
		height: 23px;
	}
	.tools a {
		position: relative;

		.numb {
			position: absolute;
			height: 22px;
			min-width: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: var(--color-lite);
			background: var(--color-accent);
			border-radius: 11px;
			transition: all 300ms ease-in-out;
		}

		&.empty .numb {
			opacity: 0;
		}

	}

	& nav {
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		text-transform: uppercase;
	}

	@media (max-width: 1023px) {
		.search,
		.tel .text {
			display: none;
		}
		.block {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			padding: 42px var(--padding-side) 50px;
			background: var(--color-bg-lite);
			transition: all 300ms ease-in-out;
			opacity: 0;
			visibility: hidden;

			&.shown {
				opacity: 1;
				visibility: visible;
			}

			.head {
				display: flex;
				align-items: center;
				gap: 20px;
			}

		}

		.tools {
			z-index: 1;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 10px 12px 12px;
			font-size: 12px;
			line-height: 1.2;
			color: var(--color-lite);
			background: var(--color-bg-dark);
			border-radius: var(--radius) var(--radius) 0 0;

			.numb {
				top: -10px;
				left: 50%;
			}

			& a {
				display: grid;
				justify-items: center;
				gap: 2px;
			}

			& path[stroke] {
				stroke: var(--color-lite);
			}

		}

		.menu {

			.block {
				margin-top: -24px;
				border-radius: 0 0 var(--radius) var(--radius);
			}

			nav {
				margin-top: 40px;

				& ul {
					display: grid;
					gap: 16px;
				}

			}
		}

		.categories {
			width: 100%;
			flex-grow: 1;

			& button,
			& nav a {
				display: flex;
				align-items: center;
				width: 100%;
				height: 40px;
				padding: 5px;
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				background: #fff;
				border-radius: 20px;

				.text {
					flex-grow: 1;
				}
				.icon {
					width: 28px;
					border-radius: 50%;
					background: var(--color-main);
					transition: all 300ms ease-in-out;

					button.active & {
						rotate: -180deg;
					}

				}

			}

			.block {
				margin-top: var(--gap);
				border-radius: var(--radius);

				.head {
					justify-content: space-between;
				}

				& nav {
					margin-top: 24px;
				}

				& ul {
					display: grid;
					gap: 16px;
				}

				& a {
					padding-left: 20px;
				}

			}

		}

	}

	@media (min-width: 1024px) {
		padding: 10px 0 12px;

		nav li .icon,
		.menu > button,
		.categories > button,
		.menu li:nth-child(n+6),
		.block .head,
		.tools .home,
		.tools .search,
		.tools .text {
			display: none;
		}

		.row {
			display: grid;
			grid-template-columns: auto 1fr auto;
			gap: 10px 40px;

			> .logo {
				grid-column: 1 / 2;
				grid-row: 2 / 3;
				height: 35px;
			}
			> .tel {
				grid-column: 3 / 4;
				grid-row: 1 / 2;
				display: flex;
				align-items: center;
				font-size: 14px;
			}
			> .menu {
				grid-column: 1 / 3;
				grid-row: 1 / 2;
				color: #717171;

				& nav ul {
					display: flex;
					align-items: center;
					gap: 60px;
				}

			}
			> .tools {
				grid-column: 3 / 4;
				grid-row: 2 / 3;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 26px;

				& a {
					position: relative;
				}
				& a:not(.empty) [stroke] {
					stroke: var(--color-main-active);
				}
				.numb {
					top: -11px;
					right: -11px;
				}


			}
			> .categories {
				grid-column: 1 / 4;
				grid-row: 3 / 4;
				margin-top: 4px;

				& nav {
					position: relative;
					height: 40px;
					background: #fff;
					border-radius: 20px;
					overflow: hidden;

					& ul {
						display: flex;
						align-items: center;
						gap: 100px;
						white-space: nowrap;
						overflow-y: hidden;
						overflow-x: auto;
						padding: 0 60px;

						@media (hover: none) {
							padding-bottom: 10px;
						}

						& li {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 40px;
						}

					}

					& button {
						position: absolute;
						top: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 40px;
						height: 40px;
						background: var(--color-main);
						border: 5px solid #fff;
						border-radius: 50%;

						&.prev {
							left: 0;
						}
						&.next {
							right: 0;
						}

						&:disabled {
							opacity: 0;
						}

						&:active {
							background: var(--color-main-active);
						}

					}

				}

			}
		}
	}

	@media (min-width: 1200px) {
		.row .menu nav ul {
			gap: 110px;
		}
		form.search {
			width: 100%;
			max-width: 790px;
			justify-self: center;
		}
		.row .categories nav ul {
			gap: 150px;
		}
	}

	@media (hover: hover) {
		& a:hover {
			color: var(--color-main-hover);
		}
		.tel:hover path {
			stroke: var(--color-main-hover);
		}
		.tools a:hover [stroke] {
			stroke: var(--color-main-hover);
		}
		.tools a:hover .numb {
			background: var(--color-accent-hover);
		}
		.categories nav button:hover {
			background: var(--color-main-hover);
		}
	}

}

/*
*******************************************************************************/

footer.site {
	font-size: 12px;
	text-transform: uppercase;
	line-height: 1.3;

	@media (max-width: 1023px) {
		.qr,
		.bottom {
			/*display: none;*/
			margin-top:20px;
		}
	}

	@media (min-width: 1024px) {
		line-height: 1.4;

		.qr,
		& nav {
			border-left: 1px dashed var(--color-border-active);
		}

		.bottom .row {
			display: flex;
			justify-content: space-between;
			padding: 16px 0 24px;

			@media (max-width: 1199px) {
				font-size: 11px;
			}
		}
	}

	.main {
		padding: 42px 0 44px;
		color: var(--color-lite);
		background: var(--color-bg-dark);
		border-radius: var(--radius);

		.row {
			position: relative;
			padding: 0 5px 0 15px;

			@media (min-width: 1024px) {
				display: grid;
				align-items: start;
				justify-content: space-between;
				grid-template-columns: repeat(3, 1fr);
				padding: 0;
			}
		}
	}

	.logo {
		height: 30px;

		@media (min-width: 1024px) {
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	& address {
		display: grid;
		align-items: start;
		gap: 10px 20px;
		grid-template-columns: 1fr 1fr;
		margin-top: 20px;

		@media (min-width: 768px) {
			grid-template-columns: repeat(3, auto);
		}

		@media (min-width: 1024px) {
			margin-top: 76px;
			grid-template-columns: 1fr;
			gap: 24px;
		}

		& a {
			display: grid;
			align-items: center;
			grid-template-columns: 26px 1fr;
			gap: 4px;
		}

		.place {
			align-items: start;

			@media (max-width: 767px) {
				grid-column: 1 / -1;
			}
		}
	}

	& nav {

		@media (max-width: 1023px) {
			margin-top: 32px;
		}

		@media (min-width: 1024px) {
			display: flex;
			justify-content: center;
		}

		& ul {

			@media (max-width: 1023px) {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 16px 14px;
			}

			@media (min-width: 1024px) {
				display: grid;
				gap: 22px;
				max-width: 154px;
			}
		}
	}

	.qr {

		@media (min-width: 1024px) {
			display: grid;
			justify-content: end;
		}

		.text {
			margin-top: 7px;
		}
	}

	@media (hover: hover) {
		& a:hover {
			color: var(--color-main-hover);
		}
	}

}

/*
*******************************************************************************/

section.sliderPromo {
	--padding-top: 40px;
	--padding-bottom: 40px;
	padding: 42px 0 50px;

	.content {
		position: relative;
	}

	.row {
		margin: 0 calc(var(--padding-side) * -1);
	}

	.item {
		--height: 170px;
		position: relative;
		padding: 0 var(--padding-side);

		@media (max-width: 767px) {
			padding-bottom: 84px;
		}

		@media (min-width: 768px) {
			--height: 240px;
		}
	}

	.h1 {

		@media (min-width: 768px) {
			position: absolute;
			top: 0;
			left: var(--padding-side);
		}

		@media (min-width: 1024px) {
			top: var(--padding-top);
		}
	}

	.pic {
		margin-top: 26px;
		height: var(--height);

		@media (min-width: 768px) {
			margin-top: 0;
			width: calc(100% - 186px);
		}

		@media (min-width: 1024px) {
			width: 100%;
			height: auto;
		}

		@media (min-width: 1200px) {
			aspect-ratio: 1200 / 520;
		}
	}

	.caption {

		.title {
			color: var(--color-main);
			font-size: 12px;
			font-weight: 500;
			text-transform: uppercase;
			line-height: 1.3;

			@media (max-width: 767px) {
				position: absolute;
				bottom: calc(50px + 34px + var(--height));
				transform: translateY(100%);
			}

			@media (min-width: 1200px) {
				font-size: 15px;
			}
		}

		.btn {
			font-size: 12px;

			@media (max-width: 767px) {
				position: absolute;
				bottom: 0;
				left: var(--padding-side);
				right: var(--padding-side);
			}
		}

		@media (max-width: 767px) {
			.title {
				position: absolute;
			}
			& p {
				display: none;
			}
		}

		@media (min-width: 768px) {
			position: absolute;
			top: 0;
			right: var(--padding-side);
			width: 186px;
			height: 100%;
			padding: var(--padding-top) 0 var(--padding-bottom);
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			& p {
				max-width: 160px;
				margin: 0;
			}
		}
	}

	.slick-nav {
		margin-top: 34px;

		@media (min-width: 1024px) {
			position: absolute;
			bottom: var(--padding-bottom);
			left: 0;
		}
	}

	@media (min-width: 768px) {
		padding: 40px 0;
	}

	@media (min-width: 1024px) {
		padding: 0;
	}

	@media (min-width: 1200px) {
		--padding-top: 40px;
		--padding-bottom: 58px;
	}
}

/*
*******************************************************************************/

section.sliderOffers {
	--margin: calc(var(--margin-side) + var(--padding-side));
	padding: 40px 0 50px;

	.content > .head {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0 34px;
		grid-template-columns: repeat(2, auto);

		.pretitle,
		h2 {
			flex-grow: 1;
		}
		.nav {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		@media (max-width: 767px) {
			h2 {
				margin-bottom: 34px;
			}
			.btn {
				border-radius: 25px;
			}
		}

		@media (min-width: 768px) {
			.pretitle {
				position: absolute;
				left: 0;
				bottom: 100%;
			}
		}
	}

	.content > .main {
		position: relative;
		margin: 40px calc(var(--margin) * -1) 0;
		overflow: auto;
		width: var(--jsw);

		.row {
			--gap: 12px;
			display: flex;
			gap: var(--gap);
			padding: 0 var(--margin);

			.offerItem {
				flex: 0 0 284px;
				width: 284px;
			}

			&::after {
				--w-2: calc(((var(--jsw) - var(--content-max-width)) / 2) - var(--gap));
				--w-max: max(var(--margin-side), var(--w-2));
				content: '';
				display: block;
				flex: 0 0 var(--w-max);
				height: 1px;
			}

			@media (min-width: 1200px) {
				--gap: 20px;
			}
		}

	}

	.mCSB_horizontal.mCSB_inside > .mCSB_container {
		margin-bottom: 50px;

		@media (min-width: 1200px) {
			margin-bottom: 90px;
		}
	}
	.mCSB_scrollTools.mCSB_scrollTools_horizontal {
		width: calc(100% - ((var(--margin-side) + var(--padding-side)) * 2));
		margin: 0 var(--margin);

		@media (min-width: 1300px) {
			width: calc(var(--content-max-width));
			margin: 0 auto;
		}
	}

	@media (min-width: 1300px) {
		--margin: calc((var(--jsw) - var(--content-max-width)) / 2);
	}

	@media (min-width: 768px) {
		padding: 60px 0;
	}

	@media (min-width: 1200px) {
		padding: 110px 0 100px;
	}
}

/*
*******************************************************************************/

section.homeAbout {
	padding: 42px 0 48px;

	.row {
		display: grid;
		gap: 32px;
	}

	.text {
		line-height: 1.23;
	}

	.pic_1,
	.pic_2 {
		border-radius: 12px;
		overflow: hidden;
	}

	@media (max-width: 767px) {
		.pic_1,
		.pic_2 {
			aspect-ratio: 310 / 195;
		}
		.act .btn {
			width: 100%;
		}
	}

	@media (min-width: 768px) {
		.row {
			grid-template-columns: 1fr 1fr;
			gap: 0 22px;
		}
		.head {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}
		.text {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
			margin-top: 30px;
		}
		.act {
			grid-column: 1 / 2;
			grid-row: 3 / 4;
			margin-top: 12px;
			display: flex;
			justify-content: flex-end;
		}
		.pic_2 {
			grid-column: 1 / 2;
			grid-row: 4 / 5;
			margin-top: 30px;
			height: 200px;
		}
		.pic_1 {
			grid-column: 2 / 3;
			grid-row: 1 / 5;
			margin-top: calc(18px + 0.25em);
			font-size: var(--h1);
		}
	}

	@media (min-width: 1200px) {
		padding: 86px 0 100px;

		.row {
			grid-template-rows: auto auto auto 1fr;
		}
		.pic_1,
		.pic_2 {
			border-radius: 20px;
		}
		.text {
			margin-top: 35px;
			max-width: 502px;
		}
		.act {
			max-width: 502px;
			margin-bottom: 35px;
		}
		.pic_1 {
			min-height: 630px;
		}
		.pic_2 {
			height: 285px;
			margin-top: auto;
		}
	}
}

/*
*******************************************************************************/

article.offerCard {
	padding: 0 0 48px;

	& h1 {
		font-size: 22px;
	}

	.media {
		position: relative;

		.pic {
			border-radius: 12px;
			overflow: hidden;
		}

		.main .pic {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			background: #fff;
		}
		.side .pic {
			border: 1px solid transparent;
			transition: all 300ms ease-in-out;
		}
		.side .slick-current .pic {
			border-color: var(--color-main);
		}
	}

	.meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 30px;

		.offerAct {
			flex: 0 0 100%;
			margin-top: 20px;
		}
	}

	.have {
		color: var(--color-main);

		&.not {
			color: var(--color-border-active);
		}
	}

	.props {
		margin-top: 34px;
		line-height: 1.23;

		& dl div {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			/*padding: 8px 0 4px;*/
			line-height: 30px;
			border-bottom: 1px dashed var(--color-border);
		}
		& dt {
			color: var(--color-border-active);
		}
		& dd {
			max-width: 50%;
			text-align: right;
		}
		.btn {
			margin-top: 24px;
			width: 100%;

			&.active div:nth-child(1),
			&:not(.active) div:nth-child(2) {
				display: none;
			}
		}

		@media (max-width: 1199px) {
			& dl div:nth-child(n + 7):not(.shown) {
				display: none;
			}
		}
	}

	.desc {
		margin-top: 34px;

		& h2 {
			margin-bottom: 8px;
		}
	}

	@media (max-width: 767px) {
		.media {
			margin-top: 30px;

			.main {
				margin: 0 calc(var(--padding-side) * -1);

				.slick-track {
					display: grid;
					grid-auto-flow: column;
				}
				.slick-slide {
					float: none;
					padding: 0 var(--padding-side);
				}
				.slick-arrow {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					z-index: 1;

					&.btn_prev {
						left: calc(var(--padding-side) + 10px);
					}
					&.btn_next {
						right: calc(var(--padding-side) + 10px);
					}
				}
			}

			.side {
				margin: 8px -4px 0;

				.slick-slide {
					padding: 0 4px;
				}
			}
		}
	}

	@media (min-width: 768px) {
		.media {
			display: grid;
			grid-template-columns: 100px 450px;
			width: 560px;
			margin-top: 30px;
			gap: 10px;

			.main {
				order: 2;
			}
			.side {
				order: 1;
				padding: 61px 0;

				.slick-slide {
					padding: 5px 0;
				}
			}
			.slick-arrow {
				position: absolute;
				left: 50%;
				transform: translateX(-50%) rotate(90deg);
			}
			.btn_prev {
				top: 0;
			}
			.btn_next {
				bottom: 0;
			}
		}
		.meta {
			gap: 10px 30px;

			.offerCost {
				margin-right: auto;
			}
			.offerAct {
				flex: 0 0 auto;
				margin: 0;
			}
		}
	}

	@media (min-width: 1024px) {
		.row {
			position: relative;
			display: grid;
			align-items: start;
			grid-template-columns: 560px 1fr;
			grid-template-rows: repeat(4, auto);
			gap: 30px;
		}
		.media {
			position: relative;
			grid-column: 1 / 2;
			grid-row: 1 / 4;
			margin: 0;
		}
		.meta,
		.offerAct,
		.props {
			margin: 0;
		}
		.offerLabels {
			top: 20px;
			right: auto;
			left: 130px;
			justify-content: flex-start;
		}
		.desc {
			grid-column: 1 / -1;
			grid-row: 4 / 5;
			margin-top: 12px;

			& h2 {
				margin-bottom: 20px;
			}
		}
		.meta {
			gap: 10px 60px;

			.offerCost {
				margin-right: 0;
				font-size: 40px;
				line-height: 48px;

				& svg {
					width: 23px;
					margin-bottom: -4px;
				}
			}
			.have {
				flex: 0 0 100%;
			}
			.offerAct {
				flex: 1 1;
			}
			.tools {
				position: absolute;
				top: 20px;
				left: 560px;
				transform: translateX(-100%);
				margin-left: -20px;
			}
		}
	}

	@media (min-width: 1200px) {
		padding-bottom: 90px;

		.row {
			align-items: stretch;
			gap: 40px 52px;
			grid-template-rows: 70px 80px 1fr auto;
		}
		& h1 {
			/*height: 70px;*/
			font-size: 28px;
			/*-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;*/
		}
		.media .side {
			padding: 59px 0;

			.btn_next {
				top: 405px;
				bottom: auto;
			}
		}
		.meta .have {
			line-height: 22px;
		}
		.props {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.props dl {
			column-count: 2;

			& div:nth-child(n + 8):not(.shown) {
				display: none;
			}
		}
		.props dd {
			max-width: 60%;
		}
	}

}

/*
*******************************************************************************/

aside.filters {

	.h2 {
		display: flex;
		align-items: center;
		height: 28px;
		gap: 30px;

		& svg {
			margin-bottom: -2px;
		}
	}

	.range {

		.interface {
			margin: 24px 11px 26px;
		}
		.values {
			display: grid;
			align-items: center;
			grid-template-columns: 1fr 10px 1fr;
			gap: 7px;

			hr {
				width: 100%;
				height: 1px;
				background: var(--color-dark);
			}
		}
	}

	.price {
		position: relative;
		margin-top: 28px;

		.title {
			line-height: 1.23;
			text-transform: uppercase;
		}
		.reset {
			display: flex;
			align-items: center;
			gap: 8px;
			position: absolute;
			top: 0;
			right: 0;
			text-decoration: underline;
			transition: all 300ms ease-in-out;
			opacity: 0;
			visibility: hidden;

			&.shown {
				opacity: 1;
				visibility: visible;
			}
		}
	}

	.act {
		margin-top: 40px;
		display: grid;
		gap: 16px;

		.btn.active div:nth-child(1),
		.btn:not(.active) div:nth-child(2) {
			display: none;
		}
	}

	& fieldset {
		position: relative;
		display: grid;
		justify-items: start;
		gap: 16px;
		margin-top: 34px;

		&:not(.shown).extra {
			display: none;
		}

		&:has(legend) {
			&::before {
				content: '';
				display: block;
				width: 100%;
				height: 26px;
			}
		}

		& legend {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 500;
			line-height: 26px;
			text-transform: uppercase;
			border-bottom: 1px dashed var(--color-border);

			& path[stroke] {
				stroke: var(--color-main);
			}
		}
		& label:nth-child(n+6) {
			display: none;
		}

		.toggle {
			padding-bottom: 1px;
			border-bottom: 1px solid currentColor;

			@media (hover: hover) {
				&:hover {
					border-bottom-color: transparent;
				}
			}
		}
		.toggle.active div:nth-child(1),
		.toggle:not(.active) div:nth-child(2) {
			display: none;
		}

		&:not(.opened) {
			& label,
			.toggle {
				display: none;
			}
			& legend .icon {
				rotate: -90deg;
			}
		}
	}

	@media (max-width: 1023px) {
		position: fixed;
		top: calc(var(--gap) + 117px + var(--gap));
		left: var(--margin-side);
		right: var(--margin-side);
		bottom: 64px;
		padding: 48px var(--padding-side) 0;
		z-index: 11;
		background: var(--color-bg-lite);
		border-radius: var(--radius) var(--radius) 0 0;
		transition: all 300ms ease-in-out;
		opacity: 0;
		visibility: hidden;

		&.shown {
			opacity: 1;
			visibility: visible;
		}

		& form.search {
			margin-top: 48px;
		}

		& form.filters {
			height: calc(100% - 38px);
			overflow: auto;
			margin: 10px calc(var(--padding-side) * -1) 0 0;
			padding: 20px var(--padding-side) 54px 0;
		}
		& form.search + form.filters {
			height: calc(100% - 134px);
		}
	}

	@media (min-width: 1024px) {
		padding: 10px 18px 20px;
		background: #fff;
		border-radius: 20px;

		.h2 {
			display: none;
		}

		.range .interface {
			margin: 30px 11px;
		}
	}

	@media (hover: hover) {
		.price .reset:hover {
			color: var(--color-main-hover);

			& path {
				stroke: var(--color-main-hover);
			}
		}
	}
}

/*
*******************************************************************************/

section.linksGroups {
	margin-top: 50px;

	.content {
		padding: 34px;
		background: #fff;
		border-radius: 20px;
	}
	& th {
		font-size: 15px;
		font-weight: 500;
		text-transform: uppercase;
		padding-right: 16px;
	}
	& td {
		width: 100%;
	}
	& a,
	& span {
		display: inline-block;
		margin-right: 12px;
	}
	& a {
		text-decoration: underline;
		text-underline-offset: 2px;
		text-decoration-thickness: 1px;

		@media (hover: hover) {
			&:hover {
				color: var(--color-main-hover);
			}
		}
	}

	@media (max-width: 1023px) {
		display: none;
	}
}

/*
*******************************************************************************/

section.linksBubbles {
	margin: 36px 0 0;

	.content {
	  -ms-overflow-style: none;
	  scrollbar-width: none;
	  overflow-x: scroll;
	}
	.content::-webkit-scrollbar {
	  display: none;
	}
	.row {
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		gap: 6px;

		&::after {
			content: '';
			display: block;
			width: var(--margin-side);
			height: 100%;
		}
	}
	& a {
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 26px;
		border: 1px solid var(--color-dark);
		border-radius: 24px;
		white-space: nowrap;
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
		background: var(--color-bg-lite);

		&.current {
			padding-right: 10px;
			color: var(--color-main);
			border-color: var(--color-main);

			.icon {
				width: 28px;
				height: 28px;
				margin-left: 16px;
				border-radius: 50%;
				background: var(--color-main);

				& svg {
					width: 10px;
					height: 10px;
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.content {
			margin: 0 0 0 calc(var(--margin-side) * -1);
			width: var(--jsw);
			padding: 0 var(--margin-side);
		}
		.row {
			gap: 10px;
			padding: 0 var(--padding-side);
		}
	}

	@media (min-width: 1200px) {
		margin-top: 40px;
	}

	@media (hover: hover) {
		.row {
			display: flex;
			flex-wrap: wrap;
		}
		& a:hover {
			color: var(--color-main-hover);
			border-color: var(--color-main-hover);
			text-decoration: none;

			.icon {
				background: var(--color-main-hover);
			}
		}
	}
}

/*
*******************************************************************************/

section.catalogTools {

	.toggleFilters {
		height: 44px;
		gap: 15px;
		font-size: 15px;
		font-weight: 400;
		text-transform: none;
	}

	@media (max-width: 767px) {
		display: grid;
		gap: 16px;

		.toggleFilters {
			width: 100%;
		}
	}

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

	@media (min-width: 1024px) {
		.toggleFilters {
			display: none;
		}
	}
}

/*
*******************************************************************************/

article.catalog {
	padding: 40px 0;

	& section.offers {
		display: grid;
		margin-top: 40px;
		gap: 20px;
	}

	@media (max-width: 1023px) {
		.toggleView {
			display: none;
		}
	}

	.content:has(aside.filters) {
		@media (max-width: 1199px) {
			.toggleView {
				display: none;
			}
		}
	}

	@media (min-width: 660px) {
		& section.offers {
			grid-template-columns: repeat(2, 1fr);

			& > div {
				grid-column: 1 / -1;
			}
		}
	}

	@media (min-width: 1024px) {

		.content:has(aside.filters) {
			display: grid;
			align-items: start;
			grid-template-columns: 290px 1fr;
			grid-template-rows: auto auto 1fr;
			gap: 0 14px;

			& aside.filters {
				grid-row: 1 / -1;
				/*overflow: hidden;*/
			}
			& section.offers {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		&.hide_filters .content:has(aside.filters) {
			grid-template-columns: 1fr;

			& aside.filters {
				display: none;
			}
			& section.offers {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		& section.offers {
			margin-top: 30px;
			grid-template-columns: repeat(3, 1fr);
		}
		& section.offers.list {
			grid-template-columns: 1fr !important;
		}
	}

	@media (min-width: 1200px) {

		.content:has(aside.filters) {
			& section.offers:not(.list) {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		& section.offers:not(.list),
		&.hide_filters .content:has(aside.filters) section.offers:not(.list) {
			grid-template-columns: repeat(4, 1fr);
		}
	}
}

/*
*******************************************************************************/

section.search {
	padding: 48px 0;

	form.search {
		margin-top: 22px;
	}

	.toggleFilters {
		cursor: pointer;
		display: grid;
		justify-items: center;
		gap: 8px;
		margin: 40px auto 0;

		.icon {
			width: 44px;
			height: 44px;
			background: var(--color-main);
			border-radius: 50%;
			transition: all 300ms ease-in-out;

			& svg {
				width: 15px;
			}
		}
		.text {
			font-size: 17px;
			line-height: 1.3;
			text-decoration: underline;
			text-underline-offset: 2px;
		}

		&.active .icon {
			rotate: 180deg;
		}
		&.active .text div:nth-child(1),
		&:not(.active) .text div:nth-child(2) {
			display: none;
		}

		@media (hover: hover) {
			&:hover {
				color: var(--color-main-hover);
			}
		}
	}

	@media (min-width: 1024px) {

		form.search {
			margin-top: 30px;
			width: 790px;
			gap: 10px;
			background: none;

			& button[type="submit"] {
				flex: 0 0 190px;
				color: var(--color-lite);
				background: var(--color-main);
				border-radius: 8px;

				.icon {
					display: none;
				}
				.text {
					display: block;
				}
			}
		}
	}

	@media (min-width: 1200px) {
		padding: 90px 0;
	}
}

section.search + article.catalog {
	margin-top: -48px;

	@media (min-width: 1200px) {
		margin-top: -90px;
	}
}

/*
*******************************************************************************/

article.cart {
	padding: 0 0 50px;
}

section.cartOffers {
	margin-top: 36px;
	background: #fff;
	border-radius: var(--radius);

	.item {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 20px 28px;

		.title {
			line-height: 1.3;
		}

		.pic {
			width: 84px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.cost {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 5px;
			font-size: 18px;
			font-weight: 500;

			& svg {
				height: 13px;
				margin-top: 3px;
			}
		}
		.del {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	@media (max-width: 1023px) {
		.item .price {
			display: none;
		}
	}

	@media (max-width: 767px) {
		.item .summ .desc,
		.item .count .desc {
			display: none;
		}
		.item .title {
			grid-column: 1 / 3;
			grid-row: 1 / 2;
			padding-right: 20px;
		}
		.item .pic {
			grid-column: 1 / 2;
			grid-row: 2 / 4;
			padding-top: 20px;
		}
		.summ {
			grid-column: 2 / 3;
			grid-row: 2 / 3;

			.cost {
				margin-top: 16px;
			}
		}
		.count {
			grid-column: 2 / 3;
			grid-row: 3 / 4;
			margin-top: 20px;
		}
		.del {
			position: absolute;
			top: 20px;
			right: 20px;
			width: 20px;
			height: 20px;
		}
	}

	@media (min-width: 768px) {
		.item {
			align-items: center;
			grid-template-columns: 84px 1fr 140px auto 20px;
			gap: 20px;

			.desc {
				color: var(--color-border-active);
			}
			.pic {
				grid-column: 1 / 2;
			}
			.title {
				grid-column: 2 / 3;
			}
			.count {
				grid-column: 3 / 4;

				.desc {
					grid-column: 1 / 4;
					grid-row: 2 / 3;
					text-align: center;
				}
			}
			.summ {
				grid-column: 4 / 5;

				.cost {
					height: 48px;
				}
			}
			.del {
				height: 100%;
			}
		}
	}

	@media (min-width: 1024px) {
		.item {
			padding: 30px;
			/*grid-template-columns: 84px 1fr auto 140px auto;*/
			grid-template-columns: repeat(6, auto);

			.pic {
				grid-column: 1 / 2;
			}
			.title {
				grid-column: 2 / 3;
			}
			.price {
				grid-column: 3 / 4;

				.cost {
					height: 48px;
					justify-content: flex-start;
				}
			}
			.count {
				grid-column: 4 / 5;
			}
			.summ {
				grid-column: 5 / 6;
			}
			.del {
				width: 20px;
			}
		}
	}

	@media (min-width: 1200px) {
		.item {
			grid-template-columns: 120px 1fr 170px 160px 170px 20px;

			.title {
				padding-right: 50px;
			}
			.pic {
				width: 120px;
				height: 120px;
			}
			.cost {
				font-size: 28px;

				& svg {
					height: 20px;
				}
			}
			.count {
				justify-content: start;
			}
			.summ {
				display: grid;
				justify-content: center;
			}
		}
	}
}

section.cartTotal {
	margin-top: 12px;
	padding: 18px 28px 24px;
	background: #fff;
	border-radius: var(--radius);

	.desc {
		line-height: 1.3;
		color: var(--color-border-active);
	}

	& form.code {
		position: relative;

		& button {
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 48px;

			.icon {
				width: 28px;
				height: 28px;
				background: var(--color-main);
				border-radius: 50%;
			}
		}
	}

	.info {
		position: relative;
		display: flex;
		align-items: center;
		gap: 4px;

		.cost {
			display: flex;
			align-items: center;
			gap: 4px;

			& svg {
				margin-top: 3px;
				height: 13px;
			}
		}

		.name .text,
		.value .cost {
			font-size: 18px;
			font-weight: 500;
			text-transform: uppercase;
		}
		.name .desc {
			height: 18px;

			& svg {
				margin-top: 3px;
				height: 12px;

				& path {
					stroke-width: 1px;
				}
			}
		}
	}

	@media (max-width: 767px) {
		.info {
			margin-top: 24px;
		}
		.info .value .desc {
			display: none;
		}
		.info .name .desc {
			position: absolute;
			top: 100%;
			left: 0;
			display: flex;
			align-items: center;
			gap: 4px;
			margin-top: 10px;
		}
		.nextStep {
			margin-top: 56px;
			width: 100%;
		}
	}

	@media (min-width: 768px) {
		display: grid;
		grid-template-columns: 2fr 1fr;

		& form.code {
			grid-column: 1 / 3;
			margin-bottom: 20px;
		}
		.info {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.info .desc {
			min-height: 18px;
		}
		.info .name .text,
		.info .value .cost {
			height: 22px;
		}
	}

	@media (min-width: 1024px) {
		padding: 30px;
		gap: 20px;
		align-items: center;
		grid-template-columns: repeat(3, auto);

		& form.code {
			grid-column: 1 / 2;
			margin-right: 40px;
		}
	}

	@media (min-width: 1200px) {
		margin-top: 40px;
		padding-bottom: 58px;
		grid-template-columns: 1fr 380px 170px;

		& > form label .title {
			margin-bottom: 12px;
		}
		.info {
			gap: 20px;
			grid-template-columns: 160px 200px;
		}
		.nextStep {
			padding: 0 20px;
		}
		.info .name .text {
			height: auto;
			font-size: 28px;
			line-height: 50px;
			letter-spacing: 0.02em;
		}
		.info .value .cost {
			height: auto;
			gap: 6px;
			font-size: 40px;
			line-height: 50px;

			& svg {
				height: 28px;
			}
		}
	}
}

/*
*******************************************************************************/

section.compare {
  margin-top: 34px;
	padding-bottom: 50px;

	.head {
	  position: relative;
	  z-index: 2;
	  background: var(--color-bg-lite);
		padding-bottom: 24px;

	  .offerAct {
	  	margin-top: 28px;
	  	display: grid;
	  	gap: 16px;
	  }

	  /*&::after {
	  	content: '';
	  	display: block;
	  	width: 20px;
	  	height: 100%;
	  	position: absolute;
	  	left: 100%;
	  	top: 0;
	  	background: var(--color-bg-lite);
	  }*/
	}
	.body {
	  display: grid;
	  gap: 22px;
	}
	.prop {
		position: relative;
	  display: grid;

	  &._hide {
		  position: absolute;
		  opacity: 0;
		  visibility: hidden;
		}
	}

	.name {
		color: var(--color-border-active);
	}
	.value {
		line-height: 1.23;

		& img {
			width: 100%;
			max-width: 160px;
		}
	}

	.toCatalog {
		margin-top: 28px;
		display: grid;
		align-items: center;
		justify-items: center;
		gap: 10px;
		padding: 28px 0 30px;
		color: var(--color-lite);
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
		line-height: 1.3;
		border-radius: 8px;
		background: var(--color-main);

		.icon {
			position: relative;
			display: flex;
			border-radius: 50%;
			background: #fff;
		}
	}

	@media (max-width: 743px) {
	  .mobCat {
	    font-size: 22px;
	    text-transform: uppercase;
	  }
	  .mobRow {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 20px;
	  }
	  .row,
	  .values {
	    position: relative;
	    width: calc((100vw - ((var(--margin-side) + var(--padding-side)) * 2) - 20px) / 2);
	  }
	  .cat {
	    display: none;
	  }
	  .head {
	  	padding-top: 40px;
	    z-index: 2;
	    transition: all 300ms linear;
	  }
	  .row._clone .head {
	    z-index: 1;
	  }
	  .list {
	    margin: 0 -10px;
	  }
	  .row._clone .prop_name {
	    opacity: 0;
	  }
	  .prop {
	  	padding-top: 26px;
	  }
	  .name {
  		position: absolute;
	  	top: 0;
	  	left: 0;
	  	width: calc(100vw - ((var(--margin-side) + var(--padding-side)) * 2));
	  	height: 20px;
	  	padding-bottom: 4px;
	  	border-bottom: 1px dashed var(--color-border);
  	}
	}

	@media (min-width: 1024px), (orientation: portrait) and (min-height: 150vw) {
		.name {}
	  .head {
	    position: sticky;
	    top: 0px;
	  }
	  /*.row._clone .head::before {
	    content: '';
	    display: block;
	    position: absolute;
	    top: 0;
	    right: calc(var(--padding-side) * -1);
	    width: 100vw;
	    height: 100%;
	    background: #fff;
	    box-shadow: 0 4px 34px 12px rgba(0,0,0,.04);
	    transition: all 300ms linear;
	    opacity: 0;
	  }
	  .row._clone .head._scrolled::before {
	    opacity: 1;
	  }*/

	}

	@media (min-width: 744px) {
	  .compareOffers {
	    font-size: 15px;
	  }
	  .mobCat {
	    display: none;
	  }
	  .head,
	  .prop {
	    display: grid;
	    grid-template-columns: 216px 1fr;
	    padding-bottom: 10px;
	    border-bottom: 1px dashed var(--color-border);
	  }
	  .head {
	    padding: 10px 0 20px;
	  }
	  .value {
	  	padding-left: 20px;

	  	.offerAct {
	  		margin-top: 16px;
	  	}
	  }
	  .slick-arrow {
	  	position: absolute;
	  	bottom: 100%;
	  	margin-bottom: 45px;
	  }
	  .btn_prev {
	  	right: 55px;
	  }
	  .btn_next {
	  	right: 0;
	  }
	  .body {
	  	gap: 10px;
	  	margin-top: 10px;
	  }
	  .body .slick-arrow {
	  	display: none !important;
	  }
	}

	@media (min-width: 1024px) {
	  .head,
	  .prop {
	    grid-template-columns: 285px 1fr;
	  }
	  .cat {
	    font-size: 32px;
	  }
	  .list .offer,
	  .prop_value {
	    width: 305px;
	    border-right-width: 20px;
	  }
	  .body {
	    gap: 0;
	  }
	  .prop {
	    padding: 19px 0;
	  }
	  .offerAct {
			grid-template-columns: 1fr auto;
			padding-right: 1px;
		}
	}

	@media (min-width: 1280px) {
	  .compareOffers {
	    overflow: hidden;
	  }
	  .meta,
	  .prop_name {
	    background: #fff;
	    z-index: 1;
	  }
	  .list > .slick-list,
	  .prop_values > .slick-list {
	    overflow: visible;
	    position: relative;
	  }
	  .list > .slick-list::before,
	  .prop_values > .slick-list::before {
	    content: '';
	    display: block;
	    position: absolute;
	    top: 0;
	    right: 100%;
	    width: 100vw;
	    height: 100%;
	    background: #fff;
	    z-index: 1;
	  }
	}

	@media (hover: hover) {
	  .list .offer {
	    cursor: e-resize;
	  }
	  .list .slick-list {
	    margin: -10px 0;
	    padding: 10px 0;
	  }
	  .list .offer:hover {
	    width: 325px;
	  }
	}
}

/*section.compare .diff {
  position: absolute;
  bottom: 20px;
  left: 0;
  margin: 0;
  white-space: nowrap;
  z-index: 1;
  transition: all 300ms linear;

	input[type="checkbox"] {
	  display: none;
	}
	input[type="checkbox"] + div {
	  padding: 0 52px 0 0;
	  line-height: 24px;
	}
	input[type="checkbox"] + div::after,
	input[type="checkbox"] + div::before {
	  content: '';
	  display: block;
	  border: none;
	  position: absolute;
	  left: auto;
	}
	input[type="checkbox"] + div::after {
	  top: 4px;
	  right: 22px;
	  width: 16px;
	  height: 16px;
	  background: #D6D6D6;
	  border-radius: 50%;
	  z-index: 1;
	  opacity: 1;
	  visibility: visible;
	  transition: all 300ms linear;
	}
	input[type="checkbox"] + div::before {
	  top: 0;
	  right: 0;
	  width: 42px;
	  height: 24px;
	  border-radius: 15px;
	  background: #F1F1F1;
	}
	input[type="checkbox"]:checked + div::after {
	  right: 4px;
	  background: #F398C0;
	}

	@media (max-width: 743px) and (orientation: portrait) and (min-height: 150vw) {
		.head._scrolled & {
	    opacity: 0;
	  }
	}

	@media (min-width: 744px) {
    bottom: 0;
    right: 0;
    left: auto;
	}
}*/

/*
*******************************************************************************/

section.opt {
	padding-bottom: 50px;

	& form {
		display: grid;
		gap: 18px;
		margin-top: 36px;
		padding: 24px;
		background: #fff;
		border-radius: 20px;
	}

	@media (min-width: 1024px) {
		& form {
			padding: 40px 50px;
		}
		.btn {
			margin-top: 30px;
		}
	}
}

/*
*******************************************************************************/

article.events {

	.row {
		display: grid;
		gap: 20px;
		padding: 36px 0;
	}
	.event {
		display: grid;
		gap: 16px;
		padding: 16px;
		border-radius: 20px;
		border: 1px solid #fff;
		background: #fff;

		.pic {
			aspect-ratio: 1 / 1;
			border-radius: 5px;
			overflow: hidden;
		}
		.title {
			height: 40px;
			font-size: 15px;
			font-weight: 500;
			line-height: 20px;
			text-transform: uppercase;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.date {
			color: #717171;
			font-size: 14px;
			line-height: 1.3;
		}
	}

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

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

	@media (min-width: 1200px) {
		.row {
			padding: 42px 0;
			grid-template-columns: repeat(4, 1fr);
		}
	}

	@media (hover: hover) {
		.event:hover {
			border-color: var(--color-main);
		}
	}
}

/*
*******************************************************************************/

section.contacts {
	display: grid;
	gap: 12px;
	margin: 28px 0 24px;
	line-height: 1.3;

	& > a,
	& > div {
		padding: 18px 20px;
		background: #fff;
		border-radius: 10px;
	}
	& > a,
	.time,
	.address,
	.requisites {
		display: grid;
		grid-template-columns: 24px 1fr;
		gap: 8px;

		.icon {
			width: 24px;
		}
	}
	& > a {
		align-items: center;
	}
	.offline {
		display: grid;
		gap: 16px;
	}

	@media (min-width: 1024px) {
		&,
		.offline {
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
		}
		.offline {
			grid-column: 1 / 3;
			padding: 0 !important;

			.address,
			.time {
				padding: 18px 20px;
			}
		}
		.requisites {
			grid-column: 1 / 3;
		}
	}

	@media (min-width: 1600px) {
		margin: 36px 0 32px;

		& > a,
		.offline {
			border-radius: 18px;
		}
		& > a,
		.address,
		.time {
			padding: 18px 46px;
		}
	}
}

/*
*******************************************************************************/

article.return {
	padding-bottom: 50px;

	.row {
		margin-top: 32px;
	}
	& h3 {
		margin-bottom: 22px;
	}
	.side {
		padding: 18px 20px;
		background: #fff;
		border-radius: 10px;
	}
	.requisites {
		display: none;
	}

	@media (min-width: 1024px) {
		.row {
			display: grid;
			gap: 22px;
			grid-template-columns: repeat(2, 1fr);
		}
		.side {
			padding: 28px;
		}
	}

	@media (min-width: 1600px) {
		.row {
			margin-top: 36px;
		}
		& h3 {
			margin-bottom: 36px;
		}
		.side {
			padding: 40px;
			border-radius: 18px;
		}
	}
}

/*
*******************************************************************************/

article.contacts {
	padding-bottom: 50px;

	.row {
		display: grid;
		gap: 46px;
	}
	.main {
		display: flex;
		flex-direction: column;
		gap: 10px;

		section.contacts {
			margin-bottom: 0;
		}
		.map {
			flex-grow: 1;
			border-radius: 10px;
			overflow: hidden;
			border: 1px solid var(--color-main);

			@media (max-width: 1023px) {
				height: 180px;
			}
		}
	}
	.side {
		.inner {
			padding: 30px 24px;
			background: #fff;
			border-radius: 10px;
		}
		& h2 {
			text-align: center;
		}
		& form {
			display: grid;
			gap: 18px;
			margin-top: 20px;
		}
	}

	@media (min-width: 1024px) {
		.row {
			margin-top: 46px;
			grid-template-columns: repeat(2, 1fr);
		}
		section.contacts {
			margin: 0;
		}
		.side form {
			border-radius: 18px;
		}
	}

	@media (min-width: 1200px) {
		padding-bottom: 100px;

		.row {
			grid-template-columns: 590px 1fr;
		}
		.side h2 {
			font-size: 28px;
			text-align: left;
		}
		.side .inner {
			width: 510px;
			margin: 0 auto;
			padding: 30px 30px 40px;
		}
	}
}

/*
*******************************************************************************/

article.delivery {

	.h2 {
		margin-bottom: 30px;
	}
	h3 {
		margin-bottom: 18px;

		&:not(:first-child) {
			margin-top: 32px;
		}
	}
	.city .head {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 50px;
		margin-top: 38px;
		border-radius: 8px;
		color: var(--color-lite);
		background: var(--color-main);
		font-size: 16px;
		text-transform: uppercase;
	}
	.city .body {
		margin-top: 12px;
		padding: 34px 24px;
		border-radius: 20px;
		background: var(--color-lite);
	}
	.price,
	.contacts {
		padding: 24px;
		border: 1px solid var(--color-main);
		border-radius: 10px;
	}
	.price {
		margin-bottom: 24px;

		& thead {
			color: var(--color-border-active);
			font-size: 12px;

			& tr {
				height: auto;
			}
		}

		& tr {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			height: 30px;
			padding-bottom: 2px;
			border-bottom: 1px dashed var(--color-border);
		}

		& th {
			text-align: left;
		}

		& td {
			text-align: right;
		}

		& svg {
			display: inline-block;
			margin-left: 4px;
			height: 11px;

			& path {
				stroke-width: 1px;
			}
		}
	}
	.contacts {
		display: grid;
		gap: 16px;
		line-height: 1.23;

		& a[href^="tel:"] {
			line-height: 26px;
		}

		.string {
			display: grid;
			grid-template-columns: 24px auto;
			gap: 8px;
		}
		.toggle {
			cursor: pointer;
			color: var(--color-main-active);
			text-decoration: underline;
			text-underline-offset: 2px;
			text-decoration-color: var(--color-main-active);

			@media (hover: hover) {
				&:hover {
					text-decoration-color: transparent;
				}
			}
		}
		.toggle:not(.active) div:nth-child(2),
		.toggle.active div:nth-child(1) {
			display: none;
		}
		.map {
			display: none;
			padding-top: 16px;
			height: 160px;

			@media (min-width: 768px) {
				height: 180px;
			}
		}
	}
	.contacts + .contacts {
		margin-top: 12px;
	}

	@media (min-width: 1200px) {
		& h3 {
			font-size: 22px;
		}
		.row {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			margin-top: 34px;
		}
		.city .head {
			margin-top: 0;
			height: 70px;
			font-size: 22px;
		}
		.city .body {
			padding: 28px 20px;
			border-radius: 8px;
		}
		& .price {
    	padding: 20px 30px 12px;

    	& tr {
    		align-items: center;
    		height: 46px;

    		&:last-child:not(:first-child) {
    			border: none;
    		}
    	}
    	& thead tr {
    		height: 20px;
    	}
    }
	}
}
/*
*******************************************************************************/

article.payment {
	padding-bottom: 50px;

	h3 {
		margin-bottom: 18px;

		&:not(:first-child) {
			margin-top: 22px;
		}
	}

	.city h3 {
		margin-bottom: 12px;
	}
	.city > .head {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 50px;
		margin-top: 38px;
		border-radius: 8px;
		color: var(--color-lite);
		background: var(--color-main);
		font-size: 16px;
		text-transform: uppercase;
	}
	.city > .body {
		margin-top: 12px;
		padding: 34px 24px;
		border-radius: 10px;
		background: var(--color-lite);
	}
	.box {
		margin-top: 12px;
		padding: 14px 18px;
		border: 1px solid var(--color-main);
		border-radius: 10px;

		.head {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			margin-bottom: 18px;
		}
	}
	.logos {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 20px;
	}

	@media (min-width: 1024px) {
		padding-bottom: 100px;

		.row {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}
		.city > .body > h3 {
			margin: 28px 0 16px;
			font-size: 22px;
		}
	}
}

/*
*******************************************************************************/

article.about {
	padding-bottom: 50px;

	.row {
		display: grid;
		gap: 30px;
	}
	.pic {
		margin-top: 26px;
	}
	.text {
		margin-top: 24px;

		& p:last-child {
			margin: 0;
		}
	}

	@media (min-width: 1024px) {
		.row {
			grid-template-columns: repeat(12, 1fr);
			gap: 20px;
		}
		.side {
			grid-column: 1 / 6;
			display: grid;
			align-content: start;

			& h2 {
				order: 2;
				margin-top: 36px;
			}
			.pic {
				order: 1;
				margin-top: 0;
			}
			.text {
				order: 3;
			}
		}
		.main {
			grid-column: 7 / 13;
			display: grid;
			align-content: start;

			& h2 {
				order: 1;
			}
			.pic {
				order: 3;
				margin-top: 48px;
			}
			.text {
				order: 2;
			}
		}
	}

	@media (min-width: 1200px) {
		padding-bottom: 100px;
	}
}

/*
*******************************************************************************/

article.order {
	padding: 42px 0 50px;

	.content > .row {
		display: grid;
		gap: 46px;
		margin-top: 36px;
	}
	.main {
		display: grid;
		gap: 12px;
	}
	.box {
		padding: 18px 24px;
		background: #fff;
		border-radius: 10px;
		line-height: 1.23;
	}
	.note {
		display: grid;
		grid-template-columns: 20px 1fr;
		gap: 8px;

		.icon {
			width: 20px;
		}
	}
	.info .btn {
		margin-top: 28px;
	}
	& h3,
	& h4 {
		margin-bottom: 16px;
	}
	& h3 {
		font-size: 22px;
	}
	& h4 {
		font-size: 18px;
	}
	& form {
		display: grid;
		gap: 18px;

		.btn {
			margin-top: 22px;
		}
	}

	@media (min-width: 1024px) {
		.content > .row {
			align-items: start;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
		}
	}

	@media (min-width: 1200px) {
		padding: 100px 0;

		.content > .row {
			grid-template-columns: 1fr 438px;
			gap: 70px;
		}
		.box {
			padding: 30px;
		}
		.note {
			padding: 20px 30px;
		}
		& h3,
		& h4 {
			font-size: 28px;
		}
		.side h3 {
			text-align: center;
		}
	}
}

/*
*******************************************************************************/

article.orders {
	padding: 44px 0 50px;

	.row {
		margin-top: 62px;
		display: grid;
		gap: 48px;
	}
	.status {
		margin-bottom: 5px;
		color: var(--color-main);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		text-transform: uppercase;
	}
	.box {
		margin-bottom: 12px;
		padding: 18px 24px;
		background: #fff;
		border-radius: 20px;
	}
	.order {
		position: relative;

		& b {
			font-size: 16px;
			font-weight: 500;
		}
		& button .icon {
			width: 30px;
			height: 30px;
			border: 1px solid var(--color-main);
			border-radius: 50%;
			transition: all 300ms linear;
		}
		& button.active .icon {
			rotate: 180deg;
		}

		@media (max-width: 1023px) {
			padding-bottom: 22px;

			& b {
				display: block;
				margin-bottom: 18px;
				line-height: 30px;
			}
			& button {
				position: absolute;
				top: 18px;
				right: 24px;
			}
			& button .text {
				display: none;
			}
		}
	}
	.persone {
		display: grid;
		gap: 22px;

		& dl {
			display: grid;
			gap: 7px;
		}
		& dt {
			font-size: 16px;
			font-weight: 500;
			line-height: 1.2;
		}
	}
	.offer {
		.pic {
			width: 120px;
			aspect-ratio: 1 / 1;
		}
		& table {
			margin-top: 16px;
		}
		& table tr {
			border-bottom: 1px dashed var(--color-border);
		}
		& table th,
		& table td {
			height: 30px;
			padding-bottom: 3px;
			vertical-align: bottom;
		}
		& table th {
			color: #717171;
			text-align: left;
		}
		& table td {
			text-align: right;
		}
		& table td svg {
			display: inline-block;
			height: 11px;
		}
		.total {
			margin-top: 18px;
			font-size: 18px;
			font-weight: 500;
			line-height: 1.2;
		}
		.total svg {
			display: inline-block;
			height: 13px;
		}

		@media (max-width: 1023px) {
			.cost,
			.count,
			.summ {
				display: none;
			}
			.title {
				margin-top: 10px;
			}
			.total {
				display: flex;
			}
			.total i {
				font-style: normal;
			}
			.total big {
				order: 2;
			}
			.total small {
				order: 1;
				margin-right: 5px;
				text-transform: uppercase;
			}
		}

		@media (min-width: 1024px) {
			.total i {
				display: none;
			}
		}
	}
	.delpay {
		.item {
			position: relative;
		}
		& p {
			margin-bottom: 8px;
		}
		.title {
			margin-bottom: 22px;
			font-size: 16px;
			font-weight: 500;
			text-transform: uppercase;
		}
		.status {
			position: absolute;
			top: 18px;
			right: 24px;
		}
		.btn {
			margin-top: 36px;
			display: flex;
		}

		@media (max-width: 1023px) {
			display: grid;
			gap: 12px;
			padding: 0;
			background: none;

			.item {
				padding: 18px 24px;
				background: #fff;
				border-radius: 20px;
			}
		}
	}
	.actions {
		display: flex;
		align-items: center;
		justify-content: space-between;

		& a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}
		.red {
			color: var(--color-accent);
		}
	}

	@media (min-width: 1024px) {
		.row {
			margin-top: 30px;
		}
		.status {
			margin-bottom: 10px;
			font-size: 15px;
		}
		.box {
			padding: 26px 50px;
		}
		.order {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-weight: 500;

				& b {
					font-size: inherit;
				}
			}
			& button {
				display: flex;
				align-items: center;
				gap: 28px;

				.icon {
					width: 38px;
					height: 38px;
				}
				.text {
					font-size: 17px;
					text-decoration: underline;
					text-underline-offset: 3px;
				}
			}
		}
		.persone {
			gap: 30px;
			grid-template-columns: repeat(3, auto);

			& dt {
				text-transform: uppercase;
			}
			& dl:nth-child(4) {
				grid-column: 1 / 4;
			}
			& dl:nth-child(5) {
				grid-row: 2 / 3;
				grid-column: 1 / 3;
			}
		}
		.offer {
			display: grid;
			align-items: center;
			grid-template-columns: repeat(5, auto);
			gap: 20px;

			.count {
				display: grid;
				gap: 0;
				grid-template-columns: 1fr;
				width: 100px;
				text-align: center;
			}
			.summ,
			.total {
				display: grid;
				justify-content: end;
				width: 160px;
			}
			.total {
				align-self: end;

				& small {
					font-size: 15px;
					font-weight: 400;
				}
			}
			& table {
				grid-column: 1 / 5;
				margin: 0;

				& tr:nth-child(1),
				& tr:nth-child(2) {
					display: none;
				}
			}
			& big {
				display: block;
				font-size: 18px;
				font-weight: 500;

				& svg {
					display: inline-block;
					height: 13px;
				}
			}
			& small {
				display: block;
				margin-top: 6px;
				color: #717171;
			}
		}
		.delpay {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			padding: 50px;

			.item {
				padding: 24px 30px;
				border: 1px solid var(--color-main);
				border-radius: 10px;

				.title {
					line-height: 50px;
				}
				.status {
					top: 24px;
					display: flex;
					align-items: center;
					height: 50px;
					padding: 0 26px;
					font-size: 12px;
					border-radius: 30px;
					line-height: 1.4;
					border: 1px solid var(--color-main);
				}
			}
		}
	}

	@media (min-width: 1200px) {
		padding: 80px 0 60px;

		.order .title,
		.persone dt {
			font-size: 22px;
		}
		.offer {
			grid-template-columns: 120px 1fr 200px 50px 230px;

			big {
				font-size: 28px;

				& svg {
					height: 20px;
				}
			}
			.count,
			.summ,
			.total {
				width: auto;
			}
			.total big {
				font-size: 40px;

				& svg {
					height: 28px;
				}
			}
			.total small {
				margin: 0;
			}
		}
		.delpay .title {
			font-size: 22px;
		}
	}

	@media (hover: hover) {
		.order button {
			cursor: pointer;
		}
		.actions a<?= var; ?>:hover,
		.order button:hover .text {
			text-decoration-color: transparent;
		}
	}
}

/*
*******************************************************************************/

article.agreement {
	padding: 0 0 50px;

	& h1 {
		margin-bottom: 22px;
	}

	@media (min-width: 1200px) {
		padding: 0 0 100px;

		& h1 {
			margin-bottom: 34px;
		}
	}
}

/*
*******************************************************************************/