/* ============================================================
   АДАПТИВ — мобильные устройства (до 600px)
   ============================================================ */

iframe {
	max-width: 100%;
}

@media (max-width: 600px) {

	.container {
		width: 100%;
	}

	/* --- Заголовки --- */

	h1 {
		font-size: 26px;
	}

	h2 {
		font-size: 24px;
	}

	h3 {
		font-size: 20px;
	}

	h4 {
		font-size: 20px;
	}


	/* ============================================================
	   ШАПКА
	   ============================================================ */

	header {
		justify-content: space-between;
		padding: 0px 24px;
		position: sticky;
		top: 0;
		z-index: 1;
	}

	/* Липкая панель с эффектом матового стекла */
	.mobile-fixed {
		padding: 10px 10px 1px;
		margin: -10px;
		position: sticky;
		top: 0;
		z-index: 1;
		backdrop-filter: blur(8px) saturate(200%) brightness(1.1);
		-webkit-backdrop-filter: blur(8px) saturate(200%) brightness(1.1);
		background: rgb(176 196 222 / 13%);
		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='1' height='1' fill='rgba(255,255,255,0.1)'/></svg>");
		box-shadow: 0 8px 6px -6px rgb(32 45 63 / 30%);
		border-radius: 0 0 20px 20px;
	}

	/* Скрытые элементы шапки на мобильных */
	.mod-breadcrumbs__wrapper,
	.messengers-icons__header,
	.main-menu-container,
	.header-column-text,
	.header-column-time,
	.header-column-phone {
		display: none;
	}

	/* --- Логотип --- */

	.animated-logo {
		width: 90px;
	}

	.header-column.header-column-logo a {
		margin-top: -7px;
		display: inline-block;
		vertical-align: middle;
	}

	/* --- Кнопки мобильной шапки --- */

	.header-mobile-button {
		display: inline-block;
		vertical-align: middle;
		width: 52px;
		height: 52px;
		margin-bottom: 6px;
	}

	.header-menu-button-show {
		background-image: url('../images/bars.svg');
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.header-menu-button-hide {
		background-image: url('../images/basic-close.svg');
		background-size: contain;
		width: 36px;
		height: 36px;
		display: none;
		position: fixed;
		z-index: 999999;
		right: 16px;
		top: 16px;
	}

	/* --- Телефон в шапке --- */

	.header-mobile-phone {
		display: block;
	}

	.header-mobile-phone a {
		background-image: url(../images/phone-volume.svg);
		width: 50px;
		height: 50px;
		background-size: cover;
		display: block;
		overflow: hidden;
		text-indent: 100px;
		white-space: nowrap;
		margin-left: 2px;
	}


	/* ============================================================
	   МОБИЛЬНОЕ МЕНЮ
	   ============================================================ */

	/* Контейнер — перекрывает весь экран */
	.main-menu-container {
		display: none;
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 0;
		padding: 20px 30px 34px;
		background-color: #f9f9f9;
		overflow-y: scroll;
	}

	.main-menu {
		border: 0;
		width: 100%;
		display: block;
		border-radius: 0;
		box-shadow: none;
	}

	.main-menu a {
		margin-bottom: 26px;
		padding-left: 25px;
		margin-right: 40px;
	}

	.main-menu a.feedback {
		background-position: 0 3px;
	}

	.main-menu span.l-menu-h {
		padding-left: 25px;
		margin: 0 0 13px 0;
		display: block;
	}

	/* Подменю — выезжает справа поверх основного */
	.menu-sub {
		display: block;
		position: fixed;
		background: white;
		z-index: 5;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 68px 30px 34px;
		overflow: hidden;
		overflow-y: scroll;
		margin-left: 100%;
		transition: 0.2s ease-in-out;
	}

	.menu-sub.open {
		margin-left: 0;
	}

	.main-menu .menu-sub a {
		font-size: 18px;
	}

	.main-menu-item {
		position: relative;
	}

	/* Кнопки открытия/закрытия подменю */
	.menu-sub-button-open {
		position: absolute;
		right: 40%;
		top: 1%;
		height: 36px;
		width: 36px;
		background-image: url(../images/chevron-right.svg);
		z-index: 1;
		background-position: center;
		background-size: 41%;
		background-position-x: 10px;
		background-repeat: no-repeat;
		background-color: #ececec;
		border-radius: 3px;
	}

	.menu-sub-button-close {
		position: absolute;
		top: 16px;
		left: 16px;
		width: 36px;
		height: 36px;
		background-image: url(../images/chevron-left.svg);
		z-index: 1;
		background-position: center;
		background-size: 41%;
		background-position-x: 10px;
		background-repeat: no-repeat;
		background-color: #ececec;
		border-radius: 3px;
	}

	/* Контактная форма внутри меню */
	.main-menu-container .contact-form {
		border: 1px solid #666;
		border-radius: 10px;
		padding: 20px 40px;
		margin: 0 0 25px 0;
		box-shadow: 3px 3px 1px #292929;
	}

	.contact-form input,
	.contact-form button {
		width: 100%;
	}


	/* ============================================================
	   СЛАЙДЕР БАННЕР
	   ============================================================ */

	.slider {
		width: auto;
		box-shadow: none;
		border: 0;
		margin-left: -10px;
		margin-right: -10px;
		height: 0;
		padding-top: 42%;
		position: relative;
		overflow: hidden;
	}

	/* Картинка и видео центрируются по горизонтали */
	.slider img,
	.slider video {
		width: auto;
		height: 100%;
		display: block;
		position: absolute;
		right: -2000px;
		left: -2000px;
		top: 0;
		margin: auto;
	}



	/* ============================================================
	   HERO VIDEO
	   ============================================================ */

	.hero-video-container {
		width: auto;
		box-shadow: none;
		border: 0;
		margin-left: -10px;
		margin-right: -10px;
		/* высота растёт вместе с шириной: на 360-414 px прежние 200,
		   к 600 px - 288, иначе кадр превращается в узкую полосу (09.09.2026) */
		height: clamp(200px, 48vw, 300px);
		/* padding-top: 24%; */
		position: relative;
		overflow: hidden;
	}

	/* Кадр заполняет блок целиком и обрезается по краям.
	   Было: width:auto + height:125% - видео масштабировалось по ВЫСОТЕ и
	   всегда получалось 444 px шириной. На телефоне 375 px это шире экрана
	   (обрезалось, выглядело правильно), а с ~470 px - уже экрана, и по бокам
	   появлялись пустые поля. object-fit: cover решает оба случая. */
	.hero-video-container img,
	.hero-video-container video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
		position: absolute;
		inset: 0;
		margin: 0;
	}


	/* ============================================================
	   КОНТЕНТ
	   ============================================================ */

	/* Скрытые боковые панели */
	.aside1,
	.aside2,
	.aside3,
	.aside4,
	.aside5 {
		display: none;
	}

	article,
	.rubricator {
		width: 100%;
		float: none;
	}

	video {
		width: 100%;
	}

	/* --- Рубрикатор — 2 колонки --- */

	.rubricator-container {
		font-size: 0;
		text-align: center;
	}

	.rubricator img,
	.links img,
	.furniture-rubricator img,
	.svg-rubricator img {
		width: 80%;
		margin: 0 auto 18px;
		display: block;
	}

	.rubricator figcaption,
	.links figcaption,
	.rubricator figure,
	.furniture-rubricator figure,
	.svg-rubricator figure {
		width: auto;
		float: none;
		margin: 0;
		padding: 0 4px;
	}

	main .rubricator-container>* {
		display: inline-block;
		width: 47%;
		font-size: initial;
		margin: 0 0 20px 0;
		float: none;
		vertical-align: top;
		padding: 0;
	}

	/* --- Карточки преимуществ — 2 колонки --- */

	.advantages-cards {
		margin: 40px 0;
		font-size: 0;
		text-align: center;
	}

	.advantages-cards-container>a {
		display: inline-block;
		width: 48%;
		margin: 0 0 20px 0;
		font-size: 14px;
	}

	.advantages-cards-container>a:nth-child(2n+1) {
		margin-right: 2%;
	}

	.advantages-cards-container>a:nth-child(2n) {
		margin-left: 2%;
	}

	.advantages-cards-container div {
		width: 100%;
		font-size: 17px;
		padding: 14px 10px 10px 10px;
		margin: 0;
	}

	.advantages-cards span {
		font-size: 26px;
		margin-right: 4px;
	}

	/* --- Статья --- */

	article dd {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 20px;
		text-align: left;
	}

	article dt {
		margin-left: 2px;
	}

	article p {
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}

	article li {
		text-align: left;
	}

	article figure {
		padding-bottom: 10px;
	}

	article img {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	article table {
		width: 100%;
		font-size: 14px;
		margin-bottom: 20px;
	}

	article table img {
		min-width: 60px;
	}

	/* --- Прочие элементы контента --- */

	.yandex-widget {
		width: 100%;
	}

	.highlight {
		width: auto;
	}

	.map-card {
		display: block;
		width: auto;
		float: none;
		margin: 0 0 20px 0;
	}

	img.download-gost {
		width: 40px;
		margin: 0 10px 0 0;
	}

	a[download] {
		display: block;
	}

	/* Горизонтальный скролл для широких таблиц */
	.table-container {
		overflow: hidden;
		overflow-x: scroll;
		position: relative;
	}

	img.payment-logo {
		width: 15%;
		margin: 10px 1px;
	}


	/* ============================================================
	   ПОДВАЛ
	   ============================================================ */

	.footer-container {
		width: 100%;
		display: block;
	}

	footer {
		width: 100%;
	}

	.footer-column {
		width: auto;
		margin: 0 20px 20px;
	}

	/* Ссылки подвала — 2 колонки */
	.footer-column ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 8px 20px;
		margin-bottom: 20px;
	}

	.delivery-man__footer {
		position: relative;
		margin: 0 auto;
		width: 197px;
		margin-bottom: -22px;
	}

	/* Иконки соцсетей */
	.vkontakte-color,
	.youtube-color,
	.instagram-color,
	.viber-color,
	.whatsapp-color,
	.telegram-color,
	.max-messenger-color {
		width: 66px;
		height: 66px;
	}

	.telephone__footer {
		font-size: 30px;
		margin: 20px auto;
	}

	#we-will-call {
		width: 270px;
		text-align: center;
		font-size: 25px;
	}

	footer input,
	footer button {
		width: 264px;
		height: 44px;
	}

	footer input {
		font-size: 24px;
	}

	footer button {
		font-size: 22px;
		margin-bottom: 26px;
	}

	#yandex-rating {
		width: 264px;
	}

}

/* /media */


/* ============================================================
   ВЫЕЗЖАЮЩАЯ ФОРМА 
   ============================================================ */

/* Обёртка — прячется за левым краем, выезжает по .open */
.form-fixed {
	position: fixed;
	top: 25%;
	bottom: 0;
	left: -300px;
	height: 235px;
	margin: auto;
	transition: 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	z-index: 9999;
}

.form-fixed.open {
	left: 0;
}

/* Контейнер формы — матовое стекло с преломляющей рамкой */
.form-fixed-container {
	padding: 25px 22px;
	width: 294px;
	border-radius: 0 6px 6px 0;
	position: relative;
	/* нужно для псевдоэлемента ::before */
	z-index: 1;

	/* Матовое стекло */
	backdrop-filter: blur(8px) saturate(200%) brightness(1.1);
	-webkit-backdrop-filter: blur(8px) saturate(200%) brightness(1.1);
	background: rgb(176 196 222 / 12%);

	/* Шум-текстура — добавляет зернистость как у настоящего стекла */
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='1' height='1' fill='rgba(255,255,255,0.08)'/></svg>");

	/* Тени: внешняя + блик сверху + затемнение снизу */
	box-shadow:
		0 8px 32px -4px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.form-fixed-container input {
	background: rgb(255 255 255 / 62%);
}


/* Преломляющая градиентная рамка (трюк с mask) */
.form-fixed-container::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	/* толщина рамки */
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.4) 0%,
			/* светлый угол — имитация блика */
			rgba(255, 255, 255, 0.05) 50%,
			rgba(0, 0, 0, 0.1) 100%
			/* тёмный угол — тень */
		);
	/* маска вырезает заливку внутри, оставляя только 1px рамку */
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	pointer-events: none;
}

/* Кнопки-триггеры (шеврон) снаружи формы */
/* .form-fixed-buttons {
	position: absolute;
	width: 40px;
	height: 80px;
	background: white;
	top: 0;
	bottom: 0;
	margin: auto;
	left: -1px;
	margin-left: 100%;
	border-radius: 0 6px 6px 0;
	box-shadow: 0 8px 6px -6px #696969;
	z-index: 1;
} */

.form-fixed-buttons {
	position: absolute;
	width: 40px;
	height: 80px;
	top: 0;
	bottom: 0;
	margin: auto;
	left: -1px;
	margin-left: 100%;
	border-radius: 0 6px 6px 0;
	box-shadow: 0 8px 6px -6px #696969;
	backdrop-filter: blur(8px) saturate(200%) brightness(1.1);
	-webkit-backdrop-filter: blur(8px) saturate(200%) brightness(1.1);
	background: rgb(176 196 222 / 13%);
	background-image: url(data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='1' height='1' fill='rgba(255,255,255,0.1)'/></svg>);
 z-index: 0;
}



/* Декоративный хвостик справа от блока кнопок */
.form-fixed::after {
	content: '';
	display: block;
	width: 10px;
	height: 200px;
	position: absolute;
	z-index: 5;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

/* Кнопка «открыть» — иконка из двух линий (шеврон вправо) */
.form-fixed-button-show {
	position: absolute;
	width: 100%;
	height: 100%;
	box-shadow: 0 8px 6px -6px #696969;
}

.form-fixed-button-show::after,
.form-fixed-button-show::before {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: black;
	border-radius: 2px;
	position: absolute;
	left: 7px;
	right: 0;
	margin: auto;
}

.form-fixed-button-show::after {
	bottom: 15px;
	top: 0;
	transform: rotate(55deg);
}

.form-fixed-button-show::before {
	top: 15px;
	bottom: 0;
	transform: rotate(-55deg);
}

/* Кнопка «закрыть» — те же линии, зеркально (шеврон влево) */
.form-fixed-button-hide {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
}

.form-fixed-button-hide::after,
.form-fixed-button-hide::before {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: black;
	border-radius: 2px;
	position: absolute;
	left: 7px;
	right: 0;
	margin: auto;
}

.form-fixed-button-hide::after {
	bottom: 15px;
	top: 0;
	transform: rotate(-55deg);
}

.form-fixed-button-hide::before {
	top: 15px;
	bottom: 0;
	transform: rotate(55deg);
}

/* Переключение видимости кнопок при открытой форме */
.form-fixed.open .form-fixed-button-show {
	display: none;
}

.form-fixed.open .form-fixed-button-hide {
	display: block;
}

/* Сбрасываем z-index стороннего виджета чтобы не перекрывал форму */
#sw-app-5f977779180df5b3d9e97e9254ade884 {
	z-index: 0;
}

#contact-heading {
	background: #222222;
	border-radius: 5px;
	color: #ffffff;
	padding: 7px 0;
	font-variant: all-small-caps;
	margin: 0px 0 15px 0;
	letter-spacing: 1px;
}