/* ===========================================================
   responsive.css — мобильная адаптация сайта faksimily.ru
   Десктоп (>768px) остаётся БЕЗ изменений — это видно из того,
   что все правила обёрнуты в @media (max-width: 768px).
   =========================================================== */

/* ---- Общее: убираем горизонтальную прокрутку ---- */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* ==== МОБИЛЬНЫЕ ПРАВИЛА (телефоны и планшеты до 768px) ==== */
@media (max-width: 768px) {

	body {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Главная таблица-каркас: снимаем фиксированную ширину 1130px */
	table.frame,
	table#Table_01 {
		width: 100% !important;
		height: auto !important;
		border: none !important;
		display: block !important;
	}

	/* Внутренние таблицы тоже резиновые */
	table {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* Все ячейки превращаем в блоки и растягиваем */
	table.frame > tbody,
	table#Table_01 > tbody {
		display: block !important;
		width: 100% !important;
	}

	table.frame tr,
	table#Table_01 tr {
		display: block !important;
		width: 100% !important;
		height: auto !important;
	}

	table.frame td,
	table#Table_01 td {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
	}

	/* Боковые "колонны" с фоновыми картинками (f14.jpg, main-04.jpg) — скрываем */
	table.frame > tbody > tr > td[rowspan="12"],
	table#Table_01 > tbody > tr > td[rowspan="12"] {
		display: none !important;
	}

	/* Прозрачные spacer-картинки тоже не нужны */
	img[src*="spacer"] {
		display: none !important;
	}

	/* Строки-распорки из spacer'ов могут оставаться пустыми блоками — прячем их */
	table.frame tr:has(> td > img[src*="spacer"]:only-child),
	table#Table_01 tr:has(> td > img[src*="spacer"]:only-child) {
		display: none !important;
	}

	/* Шапка сайта */
	img[src*="fon_verh"] {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	/* ---- НАВИГАЦИЯ ---- */
	/* Оборачивающая ячейка навигации */
	td[colspan="15"] {
		text-align: center !important;
		padding: 0 !important;
	}

	td[colspan="15"] > p[align="center"] {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Картинки-кнопки меню: 50% ширины = 2 в ряд */
	td[colspan="15"] > p > a > img,
	td[colspan="15"] > a > img {
		width: 50% !important;
		max-width: 50% !important;
		height: auto !important;
		display: inline-block !important;
		vertical-align: top !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Декоративная картинка в конце меню (main-13.jpg) — скрываем, она не является ссылкой */
	td[colspan="15"] > p > img[src*="main-13"] {
		display: none !important;
	}

	/* Рекламные поля снизу и "карта сайта" — делаем фоном не картинку, а нейтральный */
	td[background*="b_links"] {
		background-image: none !important;
		background-color: #F4DA9D !important;
		padding: 15px 10px !important;
		height: auto !important;
	}

	/* ---- ОСНОВНОЙ КОНТЕНТ ---- */
	td[background*="fonn"] {
		background-size: cover !important;
		background-position: top center !important;
		padding: 10px !important;
		height: auto !important;
	}

	/* Внутренняя таблица контента */
	table#table1 {
		width: 100% !important;
	}

	table#table1 td {
		padding: 5px !important;
	}

	/* Читаемый шрифт вместо 12px */
	body, td, p, font, span, li {
		font-size: 15px !important;
		line-height: 1.5 !important;
	}

	h1, h1 font {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}

	h2, h3 {
		font-size: 17px !important;
		line-height: 1.3 !important;
	}

	/* Все картинки в контенте — не вылезают за экран */
	img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Сохраняем обтекание, но на очень узких экранах убираем */
	img[align="left"],
	img[align="right"] {
		max-width: 40% !important;
		height: auto !important;
	}

	/* Отступы параграфов */
	p.MsoNormal,
	p[style*="text-indent"] {
		text-indent: 0 !important;
		padding: 0 10px !important;
		margin: 10px 0 !important;
	}

	/* ---- ПЛАВАЮЩИЕ КНОПКИ МЕССЕНДЖЕРОВ ---- */
	a.btn-messenger {
		width: 44px !important;
		padding: 8px !important;
		right: 10px !important;
	}
	a.btn-whatsapp { bottom: 10px !important; }
	a.btn-telegram { bottom: 70px !important; }
	a.btn-email    { bottom: 130px !important; }
	a.btn-call     { bottom: 190px !important; }
}

/* ==== Очень узкие экраны (до 420px) — навигация в 1 колонку ==== */
@media (max-width: 420px) {
	td[colspan="15"] > p > a > img,
	td[colspan="15"] > a > img {
		width: 100% !important;
		max-width: 100% !important;
	}

	img[align="left"],
	img[align="right"] {
		float: none !important;
		display: block !important;
		margin: 10px auto !important;
		max-width: 80% !important;
	}
}