/* ============================================================
RU-FONTAN — адаптивный слой (QA 2026-09)
Не меняет десктоп: все правила внутри media-запросов.
Цель: сайт пригоден для телефона без пинч-зума.
============================================================ */
/* Картинки не рвут вёрстку ни на одном экране */
img { max-width: 100%; height: auto; }
@media (max-width: 1100px) {
#content, #content_up { width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 860px) {
html, body { overflow-x: hidden !important; max-width: 100% !important; }
/* --- контейнеры становятся резиновыми --- */
#content, #content_up, #container1, #container3, #inheader, #header {
width: 100% !important; min-width: 0 !important;
background-image: none !important; /* фоны свёрстаны под 1080px */
}
#header, #inheader { position: relative !important; height: auto !important; }
/* --- шапка: снимаем абсолютное позиционирование --- */
.absoluter {
position: static !important;
top: auto !important; left: auto !important; right: auto !important;
width: auto !important; max-width: 100% !important;
margin: 0 0 10px 0 !important;
}
.abshmenu { margin: 0 !important; }
/* --- табличная раскладка -> блоки --- */
#tabcontent, #tabcontent > tbody, #tabcontent > tbody > tr,
#tabcontent > tbody > tr > td, #ct0, #ct0 > tbody, #ct0 > tbody > tr, #ct00 {
display: block !important; width: 100% !important; height: auto !important;
}
#left, #center {
display: block !important; width: 100% !important;
padding: 0 14px !important; box-sizing: border-box !important;
vertical-align: top !important; float: none !important;
}
#left { margin-bottom: 18px; }
#incen { width: auto !important; }
/* --- горизонтальное меню --- */
#inhmenu, #inhmenu table, #inhmenu tbody, #inhmenu tr { display: block !important; width: 100% !important; }
#inhmenu td, .hmenu_first_td {
display: block !important; width: 100% !important;
border: 0 !important; text-align: left !important;
}
#inhmenu a, .umenu a {
display: block !important;
min-height: 44px !important; line-height: 44px !important; /* тап-таргет */
padding: 0 12px !important; box-sizing: border-box !important;
}
/* --- карточки категорий в одну колонку --- */
#kartochka_kategorii, .kartochka_kategorii {
width: 100% !important; max-width: 100% !important;
margin: 0 0 14px 0 !important; float: none !important;
}
#kartochka_kategorii img, .kartochka_kategorii img { width: 100% !important; }
/* --- читаемость --- */
body, td, p, li { font-size: 16px !important; line-height: 1.5 !important; }
h1, .name_kategorii { font-size: 22px !important; line-height: 1.3 !important; }
/* --- формы: 16px чтобы iOS не зумил, 44px высота --- */
input[type=text], input[type=tel], input[type=email], input[type=password], textarea, select {
font-size: 16px !important; min-height: 44px !important;
width: 100% !important; box-sizing: border-box !important;
}
input[type=submit], button, .outotpravit {
min-height: 44px !important; font-size: 16px !important;
}
table.inlineform, table.inlineform tbody, table.inlineform tr, table.inlineform td,
.inlinetd { display: block !important; width: 100% !important; }
/* --- корзина и телефон в шапке --- */
#cartmini { position: static !important; margin: 8px 0 !important; }
.telefon { font-size: 20px !important; }
/* --- отключаем декоративную анимацию появления --- */
.animated { animation: none !important; }
/* --- широкие таблицы контента скроллим, а не ломаем страницу --- */
#center table { max-width: 100% !important; }
}
@media (max-width: 480px) {
#left, #center { padding: 0 10px !important; }
.telefon { font-size: 18px !important; }
}
/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
.animated, * { animation: none !important; transition: none !important; }
}
/* ============================================================
v2 — порядок и подача шапки на мобильном
Блоки .absoluter — соседи внутри #inheader, поэтому flex-order
выстраивает их в осмысленную последовательность:
логотип → телефон → обратный звонок → корзина → меню
============================================================ */
@media (max-width: 860px) {
#header { height: auto !important; min-height: 0 !important; background-image: none !important; }
#inheader {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
height: auto !important; min-height: 0 !important;
padding: 12px 14px !important;
box-sizing: border-box !important;
}
#inheader > .absoluter { margin: 0 0 12px 0 !important; }
.abs22 { order: 1 !important; text-align: center !important; } /* логотип */
.abs11 { order: 2 !important; text-align: center !important; } /* телефон */
.abs15 { order: 3 !important; } /* обратный звонок */
.abs16 { order: 4 !important; } /* корзина */
.abs40 { order: 5 !important; text-align: center !important; } /* перейти в корзину */
.abs9399 { order: 6 !important; } /* меню */
.abs21, .abs6905 { display: none !important; } /* декор и пустой враппер */
/* Телефон — главный элемент конверсии, делаем крупным и кликабельным */
.abs11, .abs11 a, .telefon, .telefon a {
font-size: 24px !important; font-weight: 700 !important;
line-height: 1.2 !important; letter-spacing: .5px !important;
display: block !important; padding: 6px 0 !important;
text-decoration: none !important;
}
/* Логотип не растягиваем сверх натуральной ширины */
.abs22 img { max-width: 260px !important; height: auto !important; margin: 0 auto !important; display: block !important; }
/* Кнопка «Перейти в корзину» — нормальный тап-таргет */
.abs40 img { max-width: 100% !important; height: auto !important; }
/* Поиск по сайту на всю ширину */
#header input[type=text], #inheader input[type=text] {
width: 100% !important; box-sizing: border-box !important;
min-height: 44px !important; font-size: 16px !important;
}
/* Меню: убираем фоновые картинки, свёрстанные под десктоп */
.abs9399, .abshmenu, #inhmenu { background-image: none !important; width: 100% !important; }
#inhmenu a { border-bottom: 1px solid rgba(0,0,0,.12) !important; }
}
/* ============================================================
v3 — исправления после визуальной проверки
============================================================ */
@media (max-width: 860px) {
/* Фоновые картинки контейнеров рисовали белую подложку контента.
Убрав их, мы обнажили коричневый фон body — возвращаем цветом. */
#content, #content_up, #container1, #container3 {
background-color: #ffffff !important;
}
/* --- меню: ul > li > table > tr > td > a --- */
#inhmenu ul, #inhmenu li,
#inhmenu li table, #inhmenu li tbody, #inhmenu li tr {
display: block !important; width: 100% !important;
height: auto !important; margin: 0 !important; padding: 0 !important;
float: none !important; background-image: none !important;
}
#inhmenu li td { display: block !important; width: 100% !important; height: auto !important; }
/* декоративные распорки и разделители в мобильном не нужны */
#inhmenu td.hmset1-ls, #inhmenu td.hmset1-s, #inhmenu li.separator { display: none !important; }
#inhmenu a, #inhmenu a.hmset1-a {
display: block !important; width: 100% !important;
min-height: 46px !important; line-height: 46px !important;
padding: 0 14px !important; box-sizing: border-box !important;
text-align: left !important; font-size: 17px !important;
border-bottom: 1px solid rgba(0,0,0,.10) !important;
background-image: none !important;
}
.abs9399, .abshmenu { height: auto !important; }
/* Подпись под логотипом не должна наезжать на сам логотип */
.abs22 * { position: static !important; }
.abs22 p, .abs22 div, .abs22 span {
display: block !important; text-align: center !important;
margin: 4px 0 0 0 !important; line-height: 1.3 !important;
}
/* Тултипы категорий рассчитаны на hover — на тач-экране только мешают */
.tooltip_kategorii { display: none !important; }
/* Карточка категории: подпись всегда видна */
.name_kategorii {
position: static !important; display: block !important;
padding: 8px 10px !important; font-size: 17px !important;
}
}
/* ============================================================
v4 — контраст меню, фон-текстура, логотип
============================================================ */
@media (max-width: 860px) {
/* Текстура #ct0 просвечивала между шапкой и белым #content */
#ct0, #ct6 { background-image: none !important; background-color: #ffffff !important; }
/* Пункты меню заданы белым (рассчитаны на тёмную плашку десктопа).
Возвращаем тёмную подложку — и контраст, и исходный вид бренда. */
#inhmenu { background: #2f2d2b !important; border-radius: 3px !important; overflow: hidden !important; }
#inhmenu a, #inhmenu a.hmset1-a { color: #ffffff !important; }
#inhmenu a:hover, #inhmenu a:focus { background: rgba(255,255,255,.08) !important; }
#inhmenu li.act > table a, #inhmenu a.act { background: #a8252a !important; font-weight: 600 !important; }
#inhmenu a { border-bottom: 1px solid rgba(255,255,255,.12) !important; }
#inhmenu li:last-child a { border-bottom: 0 !important; }
/* Выпадающие подменю в мобильном не раскрываем — иначе меню
разрастается на сотни пунктов. Полный каталог есть в сайдбаре. */
#inhmenu ul ul { display: none !important; }
/* Логотип и подпись — строго друг под другом, по центру */
.abs22 {
display: flex !important; flex-direction: column !important;
align-items: center !important; text-align: center !important;
}
.abs22 > * { position: static !important; float: none !important;
width: auto !important; max-width: 100% !important; margin: 0 !important; }
.abs22 p, .abs22 address { margin: 6px 0 0 0 !important; line-height: 1.35 !important;
font-size: 13px !important; letter-spacing: .4px !important; }
/* Видимый фокус для доступности (клавиатура / screen reader) */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 2px solid #a8252a !important; outline-offset: 2px !important;
}
}
/* ============================================================
v5 — мёртвый отступ и контраст текста шапки
============================================================ */
@media (max-width: 860px) {
/* margin-top:151px отодвигал контент под абсолютную шапку.
В мобильном потоке шапка занимает место сама — отступ лишний. */
#content, #content_up { margin-top: 0 !important; }
/* Подписи шапки заданы почти белым под тёмный десктопный фон.
На светлой мобильной шапке это нечитаемо — затемняем. */
.abs22 p, .abs22 address, .abs22 span, .abs22 div,
.abs40, .abs40 span, .abs40 div, .abs40 address,
.abs15 a, .abs15 span, .abs15 div, .abs16, .abs16 span {
color: #3a3634 !important; text-shadow: none !important;
}
.abs11, .abs11 a, .abs11 span { color: #a8252a !important; text-shadow: none !important; }
.abs40 { font-style: normal !important; }
}
/* ============================================================
v6 — по замечаниям с реального телефона
Проблемы: телефон переносился на две строки; сайдбар занимал
~57% ширины; шапка съедала полтора экрана до первого товара;
подпись под логотипом была разноцветной.
============================================================ */
@media (max-width: 860px) {
/* --- телефон строго в одну строку --- */
.abs11, .abs11 a, .abs11 span, .abs11 div, .telefon, .telefon a {
font-size: 21px !important;
white-space: nowrap !important;
padding: 2px 0 !important;
}
/* --- сайдбар и его содержимое на всю ширину --- */
#left, #left > *, .umenu, .umenu > *,
.umenu div, .umenu table, .umenu tbody, .umenu tr, .umenu td, .umenu ul, .umenu li {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
float: none !important;
}
.umenu a {
display: block !important;
padding: 11px 12px 11px 22px !important; /* место под стрелку слева */
box-sizing: border-box !important;
min-height: 44px !important;
line-height: 1.3 !important;
}
/* --- шапка компактнее: товар должен быть виден раньше --- */
#inheader { padding: 10px 12px 6px !important; }
#inheader > .absoluter { margin: 0 0 7px 0 !important; }
.abs22 img { max-width: 200px !important; }
.abs22 p, .abs22 address { font-size: 12px !important; margin-top: 3px !important; }
.abs40 { margin-top: 2px !important; }
#inhmenu a, #inhmenu a.hmset1-a { min-height: 42px !important; line-height: 42px !important; }
/* --- подпись под логотипом одним цветом (часть слов была белой) --- */
.abs22 p, .abs22 p *, .abs22 address, .abs22 address * {
color: #6f6862 !important; text-shadow: none !important;
}
/* --- убираем пустой зазор перед контентом --- */
#ct0, #ct6 { padding-top: 0 !important; }
#left { margin-bottom: 14px !important; }
}
/* ============================================================
v7 — раскрытие вложенной цепочки таблиц-обёрток
Между и контентом вложено шесть таблиц #ct1…#ct6,
каждая фиксирована на 1080px. Из-за этого width:100% у
потомков считался от 1080px, и сайдбар занимал ~57% экрана.
============================================================ */
@media (max-width: 860px) {
#ct0, #ct00, #ct1, #ct11, #ct2, #ct3, #ct4, #ct5, #ct6,
#ct1 > tbody, #ct2 > tbody, #ct3 > tbody, #ct4 > tbody, #ct5 > tbody,
#ct1 > tbody > tr, #ct2 > tbody > tr, #ct3 > tbody > tr,
#ct4 > tbody > tr, #ct5 > tbody > tr,
table.rez, table.rez > tbody, table.rez > tbody > tr {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Меню каталога: каждый пункт — отдельная таблица m2-L */
.umenu table.mm2, .umenu table.m2-L,
.umenu table.mm2 > tbody, .umenu table.m2-L > tbody,
.umenu table.mm2 > tbody > tr, .umenu table.m2-L > tbody > tr,
.umenu td.mm2-1, .umenu td.mm2-2, .umenu td.m2-s {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.umenu a.m2-a {
display: block !important;
width: 100% !important;
padding: 12px 12px 12px 24px !important;
box-sizing: border-box !important;
min-height: 44px !important;
line-height: 1.35 !important;
}
.umenu .bname { padding: 10px 12px !important; font-size: 17px !important; }
/* Карточки категорий — на всю ширину, в одну колонку */
#kartochka_kategorii, .kartochka_kategorii,
#center table, #incen table { max-width: 100% !important; }
}
/* ============================================================
v8 — каталог в сайдбаре
Пункты оформлены фоновыми PNG фиксированной ширины (~236px)
с no-repeat: на широком экране телефона фон обрывался, и меню
выглядело обрезанным. Заменяем заливкой в тех же цветах.
============================================================ */
@media (max-width: 860px) {
/* заголовок раздела */
.umenu td.mm2-1, .umenu .bname {
background-image: none !important;
background-color: #211f1e !important;
color: #fff !important;
border-radius: 3px 3px 0 0 !important;
}
.umenu .bname { color: #fff !important; font-weight: 600 !important; }
/* строки пунктов */
.umenu table.m2-L, .umenu td.m2-s, .umenu a.m2-a, .umenu table.mm2, .umenu td.mm2-2 {
background-image: none !important;
}
.umenu table.m2-L { background-color: #e3e1df !important; border-bottom: 1px solid #cfcccA !important; }
.umenu table.m2-L:last-child { border-bottom: 0 !important; }
.umenu a.m2-a {
color: #2b2725 !important;
position: relative !important;
text-decoration: none !important;
}
/* стрелка рисуется стилями, а не картинкой — не съезжает */
.umenu a.m2-a::before {
content: "›";
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%);
color: #a8252a; font-size: 17px; line-height: 1;
}
.umenu a.m2-a:hover, .umenu a.m2-a:focus { background-color: #d5d2cf !important; }
/* блок каталога целиком */
.umenu { border-radius: 3px !important; overflow: hidden !important; margin-bottom: 14px !important; }
.umenu table.mm2 { background-color: transparent !important; }
}
/* ============================================================
v9 — ИСПРАВЛЕНИЕ РЕГРЕССИИ: страница не прокручивалась
В исходном CSS у html/body стоит height:100%. Вместе с
добавленным overflow-x:hidden это сделало их контейнером
прокрутки: контент высотой ~5800px оказался заперт внутри
экрана. Возвращаем автоматическую высоту.
============================================================ */
@media (max-width: 860px) {
html, body {
height: auto !important;
min-height: 100% !important;
overflow-y: visible !important;
overflow-x: clip !important; /* clip не создаёт scroll-контейнер */
}
}
/* ============================================================
v10 — сетка карточек категорий
Карточки свёрстаны ячейками таблицы по 241px (3 в ряд на
десктопе). На телефоне это давало узкую колонку с пустотой
справа. Переводим ряды во flex: получается 2 карточки в ряд.
============================================================ */
@media (max-width: 860px) {
#cmenu, #cmenu > table, #cmenu > table > tbody,
#incen > table, #incen > table > tbody {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
#cmenu tr, #incen > table > tbody > tr {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
width: 100% !important;
}
#cmenu td[class*="blockcat"], td[class*="blockcat"] {
display: block !important;
flex: 1 1 calc(50% - 5px) !important;
max-width: calc(50% - 5px) !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
vertical-align: top !important;
}
#kartochka_kategorii, .kartochka_kategorii {
width: 100% !important; max-width: 100% !important;
margin: 0 0 4px 0 !important;
}
#kartochka_kategorii img, .kartochka_kategorii img {
width: 100% !important; height: auto !important; display: block !important;
}
.name_kategorii {
font-size: 15px !important; line-height: 1.25 !important;
padding: 7px 8px !important; height: auto !important;
}
/* лишний вертикальный воздух между блоками */
#center p:empty, #incen p:empty, #incen br + br { display: none !important; }
}
/* На узких телефонах — одна колонка, иначе картинки слишком мелкие */
@media (max-width: 400px) {
#cmenu td[class*="blockcat"], td[class*="blockcat"] {
flex: 1 1 100% !important; max-width: 100% !important;
}
}
/* ============================================================
v11 — ИСПРАВЛЕНИЕ РЕГРЕССИИ: пропали картинки категорий
В v3 блок .tooltip_kategorii был скрыт как hover-подсказка,
но он ОБОРАЧИВАЕТ ![]()
карточки. В результате на телефоне
вместо витрины оставались одни подписи.
Возвращаем показ, отключая только всплывающую подсказку.
============================================================ */
@media (max-width: 860px) {
.tooltip_kategorii {
display: block !important;
width: 100% !important;
position: relative !important;
}
.tooltip_kategorii img {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* сама подсказка "Посмотреть" на тач-экране не нужна */
.tooltip_kategorii::before, .tooltip_kategorii::after,
.tooltip_kategorii [class*="hint"] { display: none !important; content: none !important; }
/* каждая карточка — своя таблица .blockcat; ставим их в сетку */
#cmenu { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
#cmenu table.blockcat {
display: block !important;
flex: 1 1 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
width: auto !important;
margin: 0 !important;
}
#cmenu table.blockcat > tbody,
#cmenu table.blockcat > tbody > tr,
#cmenu table.blockcat td { display: block !important; width: 100% !important; }
/* пустые технические ячейки убираем, чтобы не давали высоту */
#cmenu td.blockcat-1:empty, #cmenu td.blockcat-3:empty { display: none !important; }
}
@media (max-width: 400px) {
#cmenu table.blockcat { flex: 1 1 100% !important; max-width: 100% !important; }
}
/* ============================================================
v12 — читаемость текста
Выключка по формату без переносов даёт «реки» пробелов
на узком экране.
============================================================ */
@media (max-width: 860px) {
#center p, #incen p, #center li, #incen li, #center td, .text {
text-align: left !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
line-height: 1.6 !important;
}
h1, h2, h3, .bname, .name_kategorii { text-align: left !important; }
}
/* ============================================================
v13 — отмена двойного деления ширины карточки
В v10 flex-контейнером был , и td.blockcat-2 получал 50%.
В v11 контейнером стал #cmenu, а элементами — table.blockcat,
поэтому старое правило делило уже половину: 430 -> 189 -> 90px.
Внутри карточки ячейка должна занимать всю ширину.
============================================================ */
@media (max-width: 860px) {
#cmenu td[class*="blockcat"], td[class*="blockcat"] {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
}
#cmenu table.blockcat > tbody > tr { display: block !important; width: 100% !important; }
#kartochka_kategorii, .kartochka_kategorii { width: 100% !important; }
#kartochka_kategorii img { width: 100% !important; }
}
/* ============================================================
v14 — ровная сетка витрины
Между группами по 3 карточки стоит технический div.clear
(распорка для float-раскладки десктопа). Во flex он рвёт
ряд, давая 2-1-2-1. В мобильной раскладке он не нужен.
============================================================ */
@media (max-width: 860px) {
#cmenu > .clear, #incen .clear { display: none !important; }
#cmenu { align-items: stretch !important; }
#cmenu table.blockcat { margin-bottom: 0 !important; }
}
/* ============================================================
v15 — форма оформления заказа на телефоне
У полей корзины (fname, email, phone, адрес) не задан
атрибут type, поэтому селектор input[type=text] их не ловил:
поля рендерились шириной 710px при экране 430px.
============================================================ */
@media (max-width: 860px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
textarea, select {
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 16px !important; /* iOS не зумит поле при фокусе */
min-height: 44px !important;
}
/* поля контактов — на всю ширину */
input[name="fname"], input[name="email"], input[name="phone"],
input[name="adres"], input[name="address"], textarea[name="comment"] {
width: 100% !important;
}
/* количество товара остаётся компактным */
input[name^="num_tov"] { width: 64px !important; min-width: 64px !important; text-align: center !important; }
/* таблица корзины в один столбец */
.cartline, table.cart, #cart table { max-width: 100% !important; }
#center table, #incen table { table-layout: auto !important; }
/* кнопка заказа — крупная и во всю ширину */
input[name="web_form_submit"], .outotpravit input, .outotpravit {
width: 100% !important; min-height: 50px !important; font-size: 17px !important;
}
}
/* ============================================================
v17 — согласование с премиальным слоем
============================================================ */
@media (max-width: 860px) {
/* заголовки разделов каталога обрезались: у .bname в исходном
CSS фиксированная высота, а увеличенный padding выдавливал текст */
.umenu .bname, .umenu td.mm2-1{
height:auto !important; min-height:0 !important;
line-height:1.35 !important;
padding:13px 14px !important;
display:block !important;
font-size:16px !important;
}
/* активный пункт меню снова выделен фирменным красным */
#inhmenu li.act > table a.hmset1-a,
#inhmenu a.act,
#inhmenu li.act a{
background:#A8252A !important; color:#fff !important; font-weight:600 !important;
}
#inhmenu a.hmset1-a{ color:#fff !important; }
}