/* ================================================================
   mobile-site.css v2 — мобильная версия faksimily.ru
   ================================================================ */

/* По умолчанию (десктоп) — мобильный блок скрыт целиком */
.mobile-site { display: none; }

/* ================== МОБИЛЬНАЯ ВЕРСИЯ ≤ 768px ================== */
@media screen and (max-width: 768px) {

	/* --- Прячем старый десктопный HTML ---
	   Скрываем по конкретным элементам, не по center
	   (он в оригинале обёрнут вокруг body — ошибка FrontPage). */
	table.frame,
	table#Table_01 {
		display: none !important;
	}

	/* body — чистый лист */
	html, body {
		margin: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		background: #FCF9F0 !important;
		width: 100% !important;
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
		             Roboto, "Helvetica Neue", Arial, sans-serif !important;
		font-size: 16px !important;
		line-height: 1.6 !important;
		color: #2a2a2a !important;
	}

	/* --- Показываем мобильный блок --- */
	.mobile-site {
		display: block !important;
	}

	/* Скрытый чекбокс-переключатель меню */
	.m-toggle {
		position: absolute;
		left: -9999px;
		opacity: 0;
	}

	/* ================== ШАПКА ================== */
	.m-header {
		position: fixed;
		top: 0; left: 0; right: 0;
		height: 68px;
		background: #fffdf7;
		border-bottom: 1px solid #e4d3a0;
		box-shadow: 0 2px 8px rgba(89, 62, 10, 0.08);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.m-logo {
		display: flex;
		align-items: center;
		height: 100%;
		text-decoration: none;
	}
	.m-logo img {
		max-height: 52px;
		width: auto;
		display: block;
	}

	/* Бургер */
	.m-burger {
		width: 44px;
		height: 44px;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
	}
	.m-burger span {
		display: block;
		width: 26px;
		height: 3px;
		background: #593e0a;
		border-radius: 2px;
		transition: transform 0.25s, opacity 0.2s;
	}

	/* Крестик при открытом */
	.m-toggle:checked ~ .m-header .m-burger span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	.m-toggle:checked ~ .m-header .m-burger span:nth-child(2) {
		opacity: 0;
	}
	.m-toggle:checked ~ .m-header .m-burger span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* ================== МЕНЮ ================== */
	.m-menu {
		position: fixed;
		top: 68px; left: 0; right: 0;
		background: #fffdf7;
		box-shadow: 0 4px 12px rgba(89, 62, 10, 0.12);
		z-index: 999;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.m-toggle:checked ~ .m-menu {
		max-height: 600px;
		border-bottom: 1px solid #e4d3a0;
	}

	.m-menu a {
		display: block;
		padding: 15px 20px;
		font-size: 17px;
		color: #593e0a;
		text-decoration: none;
		border-bottom: 1px solid #f0e4c4;
		font-family: Georgia, "Times New Roman", serif;
	}
	.m-menu a:last-child { border-bottom: none; }
	.m-menu a:active { background: #f4da9d; }
	.m-menu a.m-active {
		background: #f4da9d;
		color: #b50d0b;
		font-weight: 600;
	}

	/* Затемнение */
	.m-overlay {
		position: fixed;
		top: 68px; left: 0; right: 0; bottom: 0;
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s, visibility 0.25s;
		z-index: 998;
		cursor: pointer;
	}
	.m-toggle:checked ~ .m-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* ================== ОСНОВНОЙ КОНТЕНТ ================== */
	.m-main {
		padding: 84px 18px 30px;
		max-width: 640px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.m-h1 {
		font-size: 24px;
		line-height: 1.3;
		color: #593e0a;
		margin: 0 0 14px;
		font-weight: 600;
		font-family: Georgia, "Times New Roman", serif;
	}

	.m-lead {
		font-size: 17px;
		color: #4a3a1a;
		margin: 0 0 20px;
		line-height: 1.55;
	}

	.m-main p {
		margin: 0 0 16px;
		font-size: 16px;
		line-height: 1.65;
		color: #2a2a2a;
	}

	.m-main a {
		color: #000 !important;
		text-decoration: underline;
		font-size: inherit;
		font-weight: inherit;
	}

	.m-main b { color: #1a1a1a; }

	/* Иллюстрации */
	.m-figure {
		margin: 18px 0;
		text-align: center;
	}
	.m-figure img {
		max-width: 100%;
		height: auto;
		border-radius: 10px;
		box-shadow: 0 3px 10px rgba(89, 62, 10, 0.12);
	}
	.m-figure--small img {
		max-width: 160px;
	}

	/* Карточки */
	.m-card {
		background: #fffdf7;
		border: 1px solid #e4d3a0;
		border-radius: 10px;
		padding: 16px 18px;
		margin: 18px 0;
	}
	.m-card--accent {
		background: linear-gradient(135deg, #fef6dc 0%, #f4da9d 100%);
		border-color: #d9b96a;
	}
	.m-card__title {
		font-weight: 600;
		font-size: 15px;
		color: #593e0a;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 8px;
	}
	.m-card__text {
		font-size: 16px;
		line-height: 1.55;
		color: #2a2a2a;
	}
	.m-card__text a {
		color: #000;
		text-decoration: underline;
	}
	.m-card__text + .m-card__text { margin-top: 8px; }

	/* CTA-кнопки */
	.m-cta {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 24px 0;
	}
	.m-cta__btn {
		display: block;
		padding: 14px 20px;
		background: #b50d0b;
		color: #fff !important;
		text-align: center;
		text-decoration: none !important;
		border-radius: 8px;
		font-size: 17px;
		font-weight: 600;
		box-shadow: 0 2px 6px rgba(181, 13, 11, 0.25);
	}
	.m-cta__btn--secondary {
		background: #fffdf7;
		color: #b50d0b !important;
		border: 2px solid #b50d0b;
		box-shadow: none;
	}

	/* Подвал */
	.m-footer {
		background: #f4da9d;
		padding: 20px 18px 30px;
		text-align: center;
	}
	.m-footer a {
		color: #593e0a;
		text-decoration: underline;
		font-size: 15px;
	}
	.m-copy {
		margin-top: 10px;
		font-size: 12px;
		color: #7a5a20;
		line-height: 1.4;
	}

	/* Адаптация оригинальных кнопок мессенджеров (.btn-messenger) на мобильном */
	a.btn-messenger {
		width: 44px !important;
		padding: 8px !important;
		right: 12px !important;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
	}
	a.btn-whatsapp { bottom: 12px !important; }
	a.btn-telegram { bottom: 72px !important; }   /* 12 + 60 */
	a.btn-email    { bottom: 132px !important; }  /* 12 + 120 */
	a.btn-call     { bottom: 192px !important; }  /* 12 + 180 */
}

/* Узкие экраны — компактнее */
@media screen and (max-width: 380px) {
	.m-logo img { max-height: 44px; }
	.m-h1 { font-size: 21px; }
	.m-main { padding: 80px 14px 24px; }
}