@charset "UTF-8";
/**
 * common.css - Общие стили для всех страниц сайта
 * Содержит: reset, fonts, header, footer, navigation, promo-bar
 */

/* =====================================================
   KEYFRAMES
   ===================================================== */
@-webkit-keyframes smallbig {
	0,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}
}

@keyframes smallbig {
	0,
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(0);
		transform: scale(0)
	}
}

@-webkit-keyframes rotate {
	0 {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes rotate {
	0 {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes rotator {
	0 {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
}

@keyframes rotator {
	0 {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg)
	}
}

@-webkit-keyframes colors {
	0,
	to {
		stroke: #4285f4
	}
	25% {
		stroke: #de3e35
	}
	50% {
		stroke: #f7c223
	}
	75% {
		stroke: #1b9a59
	}
}

@keyframes colors {
	0,
	to {
		stroke: #4285f4
	}
	25% {
		stroke: #de3e35
	}
	50% {
		stroke: #f7c223
	}
	75% {
		stroke: #1b9a59
	}
}

@-webkit-keyframes dash {
	0 {
		stroke-dashoffset: 187
	}
	50% {
		stroke-dashoffset: 46.75;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg)
	}
	to {
		stroke-dashoffset: 187;
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg)
	}
}

@keyframes dash {
	0 {
		stroke-dashoffset: 187
	}
	50% {
		stroke-dashoffset: 46.75;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg)
	}
	to {
		stroke-dashoffset: 187;
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg)
	}
}

@keyframes twinkle {
	0 {
		transform: scale(1)
	}
	40% {
		transform: scale(1.18)
	}
	70% {
		transform: scale(0.96)
	}
	100% {
		transform: scale(1)
	}
}

/* =====================================================
   FONTS
   ===================================================== */
@font-face {
	font-family: "Inter";
	src: local("Inter Light"), local("Inter-Light"), url(/bitrix/templates/furniture_gray/assets/fonts/Inter/Inter-Light.ttf) format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Inter";
	src: local("Inter Regular"), local("Inter-Regular"), url(/bitrix/templates/furniture_gray/assets/fonts/Inter/Inter-Regular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Inter";
	src: local("Inter Medium"), local("Inter-Medium"), url(/bitrix/templates/furniture_gray/assets/fonts/Inter/Inter-Medium.ttf) format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Inter";
	src: local("Inter SemiBold"), local("Inter-SemiBold"), url(/bitrix/templates/furniture_gray/assets/fonts/Inter/Inter-SemiBold.ttf) format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Inter";
	src: local("Inter Bold"), local("Inter-Bold"), url(/bitrix/templates/furniture_gray/assets/fonts/Inter/Inter-Bold.ttf) format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Inter";
	src: local("Inter ExtraBold"), local("Inter-ExtraBold"), url(/bitrix/templates/furniture_gray/assets/fonts/Inter/Inter-ExtraBold.ttf) format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap
}

/* =====================================================
   RESET
   ===================================================== */
a,
abbr,
address,
applet,
article,
aside,
audio,
b,
big,
canvas,
caption,
center,
code,
dd,
del,
details,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
header,
hgroup,
html,
i,
iframe,
img,
ins,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
s,
section,
span,
strong,
sub,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline
}

body,
html {
	font-size: 16px
}

body {
	border: 0;
	font: inherit;
	vertical-align: baseline;
	overflow: initial;
	line-height: 20px;
	padding: 0;
	margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
footer .footer-socials a img,
header,
hgroup,
menu,
nav,
section {
	display: block
}

.new-main .sticky-menu #mobile-menu li,
ol,
ul {
	list-style: none
}

q {
	quotes: none
}

q:after,
q:before {
	content: none
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth
}

body {
	font-size: 16px;
	font-family: "Inter", sans-serif;
	line-height: 20px;
	overflow-x: hidden
}

* {
	box-sizing: border-box
}

/* =====================================================
   CSS VARIABLES
   ===================================================== */
:root {
	--nav-h: 4rem;
	--topbar-h: 4rem;
	--cl-magenta: #8039f4;
	--cl-blue: #008bf0;
	--cl-peach: #ffcaab;
	--cl-yellow: #ffd600;
	--cl-pink: #EE4EB2;
	--cl-green: #03c0b0;
	--cl-mint: #93FC8F;
	--cl-orange: #fc7c6b;
	--cl-red: #C61504;
	--cl-fox: #FF5309;
	--cl-ice: #BDE9FF;
}

/* =====================================================
   BASE STYLES
   ===================================================== */
html {
	height: 100%;
	font-family: "Inter", sans-serif
}

body {
	min-height: 100%;
	min-height: 100svh;
	min-height: 100dvh
}

@media(max-width:1600px) {
	html {
		font-size: 14px
	}
}

@media(max-width:1280px) {
	html {
		font-size: 12px
	}
}

@media(-webkit-max-device-pixel-ratio:1.5) and (max-width:1366px),
(max-width:1024px) {
	html {
		font-size: 12px
	}
}

@media(max-width:768px) {
	html {
		font-size: 14px
	}
}

@media(max-width:320px) {
	html {
		font-size: 12px
	}
}

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

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	overflow-y: auto;
	background-color: rgba(21, 21, 21, .8);
	opacity: 1;
	display: flex;
	align-items: center
}

.container {
	padding: 25px 15px;
	margin: 0 0 0 auto
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
	padding: .875em 1.215em;
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	line-height: .875;
	white-space: nowrap;
	text-decoration: none;
	color: #fff;
	background-color: var(--cl-blue);
	border-radius: 10rem;
	cursor: pointer
}

.btn--green {
	background: linear-gradient(99.75deg, #94d3f7 -16.25%, #00b0a1 47.41%), var(--cl-green)
}

.btn--mint {
	color: #1E1E1E;
	background-color: var(--cl-mint)
}

.btn--peach {
	color: #1b0341;
	background-color: var(--cl-peach)
}

.btn--yellow {
	color: #000;
	background-color: var(--cl-yellow)
}

.btn--pink {
	color: #fff;
	background-color: var(--cl-pink)
}

.btn--outline {
	color: var(--cl-blue);
	background-color: transparent;
	border: 1.5px solid var(--cl-blue)
}

.text--pink {
	color: var(--cl-pink)
}

.text--mint {
	color: var(--cl-mint)
}

/* =====================================================
   OLD HEADER (legacy)
   ===================================================== */
.header {
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%
}

.footer-container:after,
.footer-container:before {
	display: none
}

.header a {
	color: #000;
	text-decoration: none
}

.header-line__menu {
	display: flex;
	align-items: center
}

.header-line__menu {
	list-style-type: none;
	padding: 0 40px;
	margin-bottom: 0;
	margin-top: 0
}

.header-line__menu li {
	margin: 0 20px
}

.header-line__menu li a {
	font-size: 14px
}

.header-toggler {
	background-color: #fff;
	position: fixed;
	top: 0;
	right: 0;
	padding: 18px;
	display: none;
	-webkit-transform: scale(.7);
	transform: scale(.7);
	-webkit-transform-origin: right top;
	transform-origin: right top;
	z-index: 12
}

.hamburger .line {
	width: 50px;
	height: 5px;
	background-color: #2a281c;
	display: block;
	margin: 8px auto;
	transition: all .3s ease-in-out
}

.hamburger:hover {
	cursor: pointer
}

#hamburger {
	transition: all .3s ease-in-out
}

#hamburger.is-active {
	-webkit-animation: smallbig .6s forwards;
	animation: smallbig .6s forwards
}

#hamburger.is-active .line:nth-child(1),
#hamburger.is-active .line:nth-child(2),
#hamburger.is-active .line:nth-child(3) {
	transition-delay: .2s
}

#hamburger.is-active .line:nth-child(2) {
	opacity: 0
}

#hamburger.is-active .line:nth-child(1) {
	-webkit-transform: translateY(13px) rotate(45deg);
	transform: translateY(13px) rotate(45deg)
}

#hamburger.is-active .line:nth-child(3) {
	-webkit-transform: translateY(-13px) rotate(-45deg);
	transform: translateY(-13px) rotate(-45deg)
}

/* =====================================================
   NEW HEADER
   ===================================================== */
.head {
	position: sticky;
	top: 0;
	background-color: #fff;
	z-index: 10
}

.promo-bar+head {
	top: var(--topbar-h)
}

.head__inner {
	height: var(--nav-h);
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	position: relative
}

.head__logo {
	display: flex;
	position: relative;
}

.head__logo svg {
	width: auto;
	height: 2.5rem
}

.head__logo-decor {
	position: absolute;
	top: -1.2rem;
	left: -0.4rem;
}

.head__nav {
	height: 100%;
	display: flex;
	flex: 1;
	justify-content: center
}

.nav__list {
	display: flex;
	align-items: stretch
}

.nav__item {
	display: flex;
	align-items: stretch
}

.nav__link {
	padding: .875em .675em;
	display: flex;
	gap: .215em;
	align-items: center;
	color: #000;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: color .25s ease
}

.nav__link:hover {
	color: var(--cl-blue)
}

.nav__link svg {
	width: 1.215em;
	height: 1.215em;
	fill: var(--cl-blue)
}

.nav__link:hover svg {
	animation: twinkle .55s ease-out
}

.nav__link--orange,
.nav__link--orange:hover,
.nav__link--orange svg {
	color: var(--cl-orange);
	fill: var(--cl-orange);
}

.nav__link--red,
.nav__link--red:hover {
	color: var(--cl-red);
}

.header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end
}

.actions__link {
	transition: opacity .15s ease
}

.actions__link+.actions__link {
	margin-left: .5em
}

.actions__link:hover {
	opacity: .9
}

.head__burger {
	cursor: pointer;
	width: 20px;
	height: 20px;
	display: none;
	cursor: pointer;
	align-content: center;
	position: absolute;
	right: 2rem
}

.head__burger span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .25s ease, top .25s ease, opacity .2s
}

.head__burger span:nth-child(1) {
	top: 4px
}

.head__burger span:nth-child(2) {
	top: 50%
}

.head__burger span:nth-child(3) {
	top: 16px
}

#menu-toggle:checked+.head__burger span {
	top: 50%
}

#menu-toggle:checked+.head__burger span:nth-child(1) {
	transform: translateY(-50%) rotate(45deg)
}

#menu-toggle:checked+.head__burger span:nth-child(2) {
	opacity: 0
}

#menu-toggle:checked+.head__burger span:nth-child(3) {
	transform: translateY(-50%) rotate(-45deg)
}

@media(max-width:1024px) {
	.head__inner {
		padding: 0 1.215rem
	}

	.head__nav {
		width: 100%;
		height: auto;
		padding: 2rem 0;
		flex-direction: column;
		position: absolute;
		top: var(--nav-h);
		left: 0;
		flex-direction: column;
		background-color: #fff;
		z-index: 10
	}

	.nav__list {
		flex-direction: column
	}

	.nav__item {
		justify-content: center
	}

	.header__actions {
		flex: 1;
		margin-right: 2.5rem
	}

	.head__burger {
		display: inline-block;
		right: 1.215rem
	}

	.head__nav {
		display: none
	}

	#menu-toggle:checked~.head__nav {
		display: block
	}
}

@media(max-width:575px) {
	.head__logo svg {
		height: 2rem
	}

	.head__logo-decor {
		top: -1.1rem;
		left: -0.35rem;
	}

	.actions__link--reg {
		display: none
	}
}

/* =====================================================
   PROMO BAR
   ===================================================== */
.promo-bar {
	position: relative;
	overflow: hidden
}

.promo-bar__inner {
	height: var(--topbar-h);
	max-width: 1600px;
	margin: 0 auto;
	position: relative
}

.promo-bar__content {
	min-height: 100%;
	padding: 0 4rem 0 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit
}

.promo-bar--theme-blue {
	background: linear-gradient(88.84deg, #3d4eec 0, #2fa1f4 100%);
	color: #fff
}

.promo-bar--new-year {
	width: 100%;
	color: #fff;
	min-height: 3rem;
	background-image: url(/local/templates/furniture_gray/images/topbar-new-year-bg.png);
	background-color: #3F0000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.promo-bar--pro-discount50 {
	width: 100%;
	color: #fff;
	min-height: 3rem;
	background-image: url(/local/templates/furniture_gray/images/topbar-pro-discount50-bg.png);
	background-color: #08005B;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.promo-bar--money {
	width: 100%;
	color: #fff;
	min-height: 3rem;
	background-color: #08005B;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.promo-bar__text {
	padding-right: 2em;
	font-size: 1.125rem
}

.promo-bar__label {
	font-weight: 600
}

.promo-bar__close {
	height: 100%;
	padding: .5rem;
	border: 0;
	cursor: pointer;
	color: inherit;
	font-size: 1.125rem;
	background: 0;
	position: absolute;
	right: 2rem;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition:
		opacity 0.2s ease,
		color 0.2s ease;
}

.promo-bar__close:hover,
.promo-bar__close:focus-visible {
	opacity: 0.7;
}

.promo-bar__close:active {
	opacity: 0.5;
}

@media(max-width:575px) {
	.promo-bar {
		position: fixed;
		bottom: 0;
		z-index: 10
	}

	.promo-bar__inner {
		height: auto
	}

	.promo-bar__content {
		padding: 1rem 3rem 1rem 1rem
	}

	.promo-bar__text {
		padding-right: 1em;
		font-size: 1rem
	}

	.promo-bar__close {
		right: 1rem
	}

	.promo-bar--money {
		width: 100%;
		min-width: 100%;
		min-height: 117px;
		background-size: cover;
		background-position: center;
		aspect-ratio: 393 / 117;
	}

	@supports not (aspect-ratio: 1) {
		.promo-bar--money {
			position: relative;
			padding-top: 0.89%;
		}
	}
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
	background-color: #0f0910;
	padding-top: 34px;
	color: #fff;
	font-size: 16px;
	margin-top: 120px
}

.footer .logo {
	display: block
}

.footer-container {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 15px
}

.footer svg {
	width: 184px;
	height: auto
}

.footer-menu {
	justify-content: flex-end;
	margin-bottom: 8px
}

.footer-menu__line {
	padding: 0;
	list-style-type: none;
	display: flex;
	margin: 0 0 8px;
	justify-content: flex-end
}

.footer-menu__line li {
	margin-left: 56px
}

.footer-menu__line a {
	color: inherit;
	text-decoration: none
}

.footer-menu__line .mail {
	color: #fff
}

.footer-menu__line:last-child {
	color: rgba(196, 196, 196, .8)
}

.footer.mod {
	background-color: #222;
	padding: 50px 0
}

.footer.mod .footer-container {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
	max-width: 1366px;
	box-sizing: border-box
}

@media(max-width:800px) {
	.footer.mod .footer-container {
		flex-direction: column
	}
}

.footer.mod .footer-item {
	display: flex;
	flex-direction: column;
	width: 100%
}

@media(min-width:800px) {
	.footer.mod .footer-item:nth-child(3) {
		display: none
	}
}

.footer.mod .footer-item:last-child {
	max-width: 312px
}

@media(max-width:800px) {
	.footer.mod .footer-item:last-child {
		max-width: 335px;
		margin: 0 auto
	}
}

.footer.mod .footer-link {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	margin: 0 0 10px;
	color: #fff;
	text-decoration: none
}

@media(max-width:800px) {
	.footer.mod .footer-link {
		display: none
	}
}

.footer.mod .footer-link--mob {
	display: block;
	font-size: 18px;
	line-height: 21px
}

@media(min-width:800px) {
	.footer.mod .footer-link--mob {
		display: none
	}
}

.footer.mod .footer-title {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	color: #fff
}

.footer.mod .footer-sg-link {
	font-family: 'Roboto', sans-serif;
	margin: 0 0 40px;
	font-size: 12px;
	line-height: 14px;
	color: #aaa
}

.footer.mod .footer-sg-link a {
	font-weight: 400;
	color: #aaa;
	text-decoration: none
}

.footer.mod .footer-links-block,
.footer.mod .footer-mob-links {
	display: flex;
	flex-direction: column;
	margin: 0 0 35px
}

.footer.mod .footer-mob-links {
	margin: 0 0 25px
}

@media(min-width:800px) {
	.footer.mod .footer-mob-links {
		display: none
	}
}

.footer.mod .footer-mob-links a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #aaa;
	text-decoration: none;
	margin: 0 0 10px
}

.footer.mod .footer-site-map {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #aaa;
	text-decoration: none;
	margin: auto 0 0
}

@media(max-width:800px) {
	.footer.mod .footer-site-map {
		display: none
	}
}

.footer.mod .footer-socials {
	margin: 20px 0 15px;
	display: flex;
	align-items: center
}

.footer.mod .footer-socials span {
	margin-right: 10px
}

.footer.mod .footer-socials a {
	margin-left: 10px
}

@media(max-width:800px) {
	.footer.mod .footer-email {
		margin: 0 0 35px
	}
}

.footer.mod .footer-email span,
.footer.mod .footer-socials span {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #fff
}

.footer.mod .footer-agreement,
.footer.mod .footer-email a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	text-decoration: none
}

.footer.mod .footer-email a {
	margin-left: 40px;
	font-size: 16px;
	line-height: 19px;
	color: #fff
}

.footer.mod .footer-agreement {
	font-size: 14px;
	line-height: 16px;
	color: #aaa;
	margin: auto 0 0
}

@media(max-width:800px) {
	.footer.mod .footer-agreement {
		display: none
	}
}

.footer.mod .footer-payment {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #aaa;
	text-decoration: none;
	margin: 10px 0 0
}

@media(max-width:800px) {
	.footer.mod .footer-payment {
		display: none
	}
}

.footer.mod .footer-form {
	width: 100%;
	margin: 15px 0
}

.footer.mod .footer-form input::-webkit-input-placeholder {
	color: #fff
}

.footer.mod .footer-form input::-moz-placeholder {
	color: #fff
}

.footer.mod .footer-form input::-ms-input-placeholder {
	color: #fff
}

.footer.mod .footer-form input::placeholder {
	color: #fff
}

.footer.mod .footer-form input[type=submit],
.footer.mod .footer-form input[type=text] {
	width: 100%;
	height: 46px;
	border-radius: 30px;
	font-family: 'Roboto', sans-serif;
	color: #fff;
	box-sizing: border-box
}

.footer.mod .footer-form input[type=text] {
	background: rgba(255, 255, 255, .25);
	outline: 0;
	margin: 0 0 12px;
	border: 1px solid #fff;
	font-size: 16px;
	line-height: 1
}

.footer.mod .footer-form input[type=submit] {
	background: #ba68c8;
	border: 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	text-align: center;
	cursor: pointer
}

.footer.mod .footer-policy {
	font-family: 'Roboto', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #aaa;
	text-decoration: none;
	margin: auto 0 0
}

@media(max-width:800px) {
	.footer.mod .footer-policy {
		display: none
	}
}