/* ========================================================================== Мобильная адаптация aquaoptim -------------------------------------------------------------------------- Файл подключается ПОСЛЕ main.css и form.css и только перекрывает их. Все правила заперты в медиа-запросы, поэтому десктоп (шире 1000px) не затрагивается вообще. Исходные файлы не изменяются — откат = снять одну строку в layouts/main.php. ========================================================================== */ /* ========================================================================== 0. Лоадер на время загрузки страницы Разметка лежит в начале , класс is-loading вешает и снимает инлайновый скрипт там же. По умолчанию заглушка скрыта — показывается только пока класс висит, и только на телефоне: там медленная сеть, ради которой всё и затевалось. Десктоп не трогаем. Чтобы включить и на десктопе, достаточно вынести правило .is-loading .page-loader из медиа-запроса. ========================================================================== */ /* Стилей здесь нет намеренно: они заданы инлайном в шаблона. Весь CSS сайта подключается в конце , и до его загрузки страница показывается неоформленной — то самое моргание, ради которого заглушка и нужна. Лежи её стили в этом файле, она бы включалась уже после того, как всё отрисовалось, то есть бесполезно поздно. */ /* ========================================================================== 1. Резиновый контейнер вместо жёстких 980px ========================================================================== */ @media (max-width: 1000px) { /* Раньше здесь стоял html, body { overflow-x: hidden } как страховка от бокового скролла. Он ломает position: sticky у шапки, а нужды в нём больше нет: все источники переполнения устранены по месту — слайдер, таблицы, шапка, карточка товара. Если где-то всплывёт боковой скролл, лечить надо причину, а не прятать её этим правилом. */ #page { width: auto; max-width: 100%; margin-bottom: 30px; box-shadow: none; } #content, .content { padding: 0 12px; } /* Картинки перестают распирать макет */ #page img { max-width: 100%; height: auto; } /* Сайдбар из правой колонки — вниз, на всю ширину */ #sidebar { float: none; max-width: 100%; padding-right: 0; margin-bottom: 20px; } /* --- Поиск в шапке --- Кнопка-лупа .sbutton стоит абсолютом от формы с top:32px — это рассчитано на десктопный padding-top:26px. На мобильном отступы другие, и кнопка съезжала с поля. Задаём метрики явно, чтобы её позиция не зависела от того, как перенесётся подпись. */ .header-search { padding: 10px 12px 12px; box-sizing: border-box; } .header-search label { display: block; margin: 0 0 6px; font-size: 15px; line-height: 20px; } .header-search #q { display: block; width: 100%; box-sizing: border-box; height: 42px; padding: 0 48px 0 12px; font-size: 16px; } .sbutton { top: 36px; /* 10 padding + 20 подпись + 6 отступ */ right: 12px; width: 44px; height: 42px; padding: 0; background-position: center; } /* Слайдер на главной. bxSlider инлайном ставит .bx-wrapper отрицательные поля -27px — чтобы слайдер перекрывал padding #content и шёл во всю ширину. Padding выше уменьшен до 12px, поэтому и вылет надо уменьшить, иначе слайдер торчит за экран ровно на 15px с каждой стороны. Стиль инлайновый — перекрыть можно только через !important. */ .bx-wrapper { margin-left: -12px !important; margin-right: -12px !important; } /* Слайд свёрстан как композиция под 980px: картинка-баннер (.special, 450x230, абсолютом слева) и промо-текст (.special-text, 370px, справа). Рядом на узком экране они не помещаются, а поставленные в столбик дают слайды высотой 350–890px — их обрезает вьюпорт, которому bxSlider задаёт фиксированную высоту инлайном. Пока показываем только баннер: он самодостаточен, ничего не обрезается и не занимает весь экран. Промо-текст скрыт — вернуть его можно, но это решение по содержанию, не по вёрстке. */ .special { position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; background-image: none !important; text-align: center; } /* Картинки баннеров вертикальные (618x682), в разметке им инлайном задан размер 360x270 — то есть на десктопе они сплющены. Оставляем ту же высоту, но через object-fit: пропорции сохраняются, слайды получают одинаковую высоту и ничего не обрезается. */ .special img { position: static !important; width: 100% !important; max-width: 340px !important; height: 250px !important; object-fit: contain; margin: 0 auto !important; display: block; } .special-text { display: none; } .bxslider li { text-align: center; } /* --- Верхняя плавающая панель --- Свёрстана как 980px с четырьмя float-колонками по 25%: на телефоне её содержимое имело ширину 1000px, и три блока из четырёх уезжали за экран. Прошлый flex-wrap не помогал — контейнер не был flex. Переводим в переносящийся flex и снимаем жёсткую ширину. */ .fixed-header { padding: 6px 0; } .fixed-header__wrapper { width: auto; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; padding: 0 10px; overflow: visible; } .fixed-header__item { float: none; width: auto; } .fixed-header__phone { font-size: 19px; } .fixed-header__mail { font-size: 14px; } } /* ========================================================================== 1b. Шапка: логотип, контакты, рейтинг Контакты и рейтинг заданы через float:right внутри #header. На узком экране они выстраивались вразнобой с логотипом, а главное — floats не учитывались в высоте #header, из-за чего блок рейтинга залезал под полосу меню. Выключаем float, центрируем и закрываем floats. ========================================================================== */ @media (max-width: 760px) { /* Старая плавающая панель (телефон, почта, корзина) на телефоне не нужна: её роль берёт на себя сама шапка, закреплённая сверху. Показывается она через slideDown, то есть инлайновым display — отсюда !important. */ .fixed-header { display: none !important; } /* Отступ сверху был зарезервирован под ту самую панель */ #page { margin-top: 0; } /* Одна компактная строка: слева логотип, справа МАКС и телефон. Меню переносится под них на всю ширину. Закрепляем сверху — вместе с кнопкой меню и корзиной. */ #header { position: sticky; top: 0; z-index: 500; background: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; text-align: left; /* ширина задана как 100%, и без border-box боковые отступы добавились бы сверху — шапка вылезала за экран на 24px */ box-sizing: border-box; } /* Логотип лежит в безклассовом div с инлайновым float:left — блок приходит из базы, править его там не нужно. Флоат внутри flex и так не работает, но снимаем явно, чтобы не зависеть от порядка правил. Высота 78px задана инлайном, поэтому !important. */ #header > div:first-child { float: none !important; flex: 0 1 auto; min-width: 0; line-height: 0; /* ссылка строчная — гасим лишнюю высоту строки */ } /* Ссылка вокруг логотипа строчная, а картинка внутри блочная — из-за этого слева появлялся отступ, а высота блока была больше самой картинки. Делаем ссылку блочной. */ #header > div:first-child a { display: block; } /* У картинки логотипа собственные поля (margin: 21px 0 7px 15px) — они смещали её вправо и раздували высоту блока до 72px при картинке в 44px. */ #header .logo { height: 44px !important; width: auto !important; display: block; margin: 0; } /* В шапке из базы есть завершающий пустой div. Он остаётся flex-элементом и отъедает один интервал справа от иконок. */ #header > div:empty { display: none; } /* --- Контакты: только МАКС и телефон, в строку --- */ /* Прижимаем автоотступом, а не justify-content: space-between. В шапке из базы есть пустой div, он тоже flex-элемент, и space-between раздавал бы место с его учётом — иконки вставали посередине, а не у правого края. */ .site-header__contacts { float: none; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 0; min-width: 0; margin-left: auto; } /* Сюда mobile.js кладёт корзину и кнопку меню — получается один ряд: телефон · МАКС · корзина · меню */ .site-header__phone-row { display: flex; align-items: center; gap: 6px; } /* Номер телефона превращается в иконку: текст гасим размером шрифта, сама ссылка остаётся tel: и работает по тапу. Значок — фоном, чтобы не заводить лишний файл. */ .site-header__phone { display: block; width: 38px; height: 38px; border-radius: 50%; background: #eaf4fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327779b'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / 20px 20px no-repeat; font-size: 0; color: transparent; text-decoration: none; flex: 0 0 auto; } /* Иконка МАКС — тем же размером, что и остальные */ .site-header__messenger { display: block; width: 38px; height: 38px; flex: 0 0 auto; } .site-header__messenger img { width: 38px !important; height: 38px !important; display: block; } /* --- Корзина --- Отдельная ссылка, которую создаёт mobile.js. Счётчик выводится только когда в корзине что-то есть. Селектор начинается с #header намеренно: правило, прячущее иконку на десктопе, стоит ниже по файлу, и при равной специфичности побеждало бы оно. */ #header .header-cart { display: block; position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #eaf4fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327779b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.6h7.5a2 2 0 0 0 2-1.5L20.5 8H6'/%3E%3Ccircle cx='10' cy='19.5' r='1.3'/%3E%3Ccircle cx='17.5' cy='19.5' r='1.3'/%3E%3C/svg%3E") center / 21px 21px no-repeat; text-decoration: none; } .header-cart__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #2b89af; color: #fff; font-size: 11px; font-weight: bold; line-height: 18px; text-align: center; } /* --- Убираем с телефона: почта, режим работы, рейтинг --- */ .site-header__meta, .header_rating { display: none; } /* Раскрытое меню — отдельной строкой во всю ширину под шапкой. Отрицательные поля гасят боковой padding #header. Пока меню закрыто, блок не должен занимать ничего: кнопка переехала в шапку, и прежняя полоса «Меню» с фоном и min-height:43px стала бы пустой полосой. */ #mainmenu { flex: 1 0 100%; order: 10; margin: 0 -12px -8px; min-height: 0; background: none; border: 0; box-shadow: none; } #mainmenu.is-open { margin-top: 8px; } /* Шапка закреплена, поэтому раскрытое меню не должно занимать больше экрана — иначе нижние пункты становятся недоступны. Длинный список прокручивается внутри себя. */ #mainmenu.is-open > ul#yw0 { max-height: calc(100vh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ========================================================================== 2. Таблицы — горизонтальный скролл вместо разрыва вёрстки Обёртку .tbl-scroll навешивает mobile.js. На десктопе это просто инертный div: правила ниже действуют только на узких экранах. ========================================================================== */ @media (max-width: 1000px) { .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; /* Тень у правого края — подсказка, что таблица прокручивается */ background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center, linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left center, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right center; background-repeat: no-repeat; background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%; background-attachment: local, local, scroll, scroll; } } /* Планшеты: товарная таблица ещё читается целиком, оставляем её таблицей с прокруткой. Диапазон начинается с 761px намеренно — ниже включается раскладка карточками, и правила ширины/переносов там только мешали бы. */ @media (min-width: 761px) and (max-width: 1000px) { /* table-layout:fixed + ужимают «Наименование» в кашу. Отдаём ширину контенту и разрешаем таблице быть шире экрана. */ .tbl-scroll > table.product-table { table-layout: auto; min-width: 620px; } .tbl-scroll > table.product-table th, .tbl-scroll > table.product-table td { white-space: nowrap; padding: 7px 8px; } /* Колонка «Наименование» — единственная, где перенос нужен */ .tbl-scroll > table.product-table td[rowspan] { white-space: normal; min-width: 240px; } } /* ========================================================================== 2b. Товарные таблицы → карточки (телефон) Семь колонок в 360–430px не помещаются, и «Кол-во» уезжает за правый край: чтобы заказать, нужно было листать таблицу вбок. Догадаться до этого сложно, поэтому на телефоне строка превращается в карточку, где цена и поле количества видны сразу. Разметка не меняется — только display и расстановка по сетке. Ячейки остаются на своих местах в DOM, поэтому оформление заказа (openD), которое ищет ячейки по порядку, продолжает работать. Номера колонок pt-cN и подписи data-label проставляет mobile.js: 0 Код · 1 Наименование · 2 Ед · 3 Ду · 4 Ру · 5 Цена · 6 Кол-во ========================================================================== */ @media (max-width: 760px) { /* Прокручивать больше нечего — снимаем тень-подсказку */ .tbl-scroll--product { overflow-x: visible; background: none; } .tbl-scroll > table.product-table, table.product-table { display: block; width: auto; min-width: 0; table-layout: auto; } /* Заголовки столбцов переезжают в подписи ячеек */ .product-table thead { display: none; } .product-table tbody { display: block; } .product-table tbody tr { display: grid; grid-template-columns: auto auto auto 1fr; gap: 1px 10px; align-items: baseline; margin: 0 0 8px; padding: 9px 11px; border: 1px solid #dae5ea; border-radius: 7px; background: #fff; } .product-table tbody td { display: block; padding: 0; border: 0; white-space: normal; /* в разметке у ячеек инлайновый text-align:center */ text-align: left !important; } .product-table tbody td::before { content: attr(data-label) ' '; color: #7b8a99; font-size: 12px; } /* --- Наименование: первой строкой, во всю ширину, без подписи --- */ .product-table tbody td.pt-c1, .product-table tbody td[rowspan] { grid-column: 1 / -1; grid-row: 1; min-width: 0; margin-bottom: 5px; font-weight: 600; line-height: 1.3; } .product-table tbody td.pt-c1::before { content: none; } /* --- Характеристики: одной строкой, порядком управляет сетка --- */ .product-table tbody td.pt-c3 { grid-column: 1; grid-row: 2; } /* Ду */ .product-table tbody td.pt-c4 { grid-column: 2; grid-row: 2; } /* Ру */ .product-table tbody td.pt-c2 { grid-column: 3; grid-row: 2; } /* Ед */ .product-table tbody td.pt-c0 { grid-column: 4; grid-row: 2; } /* Код */ .product-table tbody td.pt-c0, .product-table tbody td.pt-c2, .product-table tbody td.pt-c3, .product-table tbody td.pt-c4 { font-size: 14px; white-space: nowrap; } .product-table tbody td.pt-c0 { text-align: right !important; color: #7b8a99; } /* --- Цена и количество: нижней строкой, всегда на виду --- */ .product-table tbody td.pt-c5 { grid-column: 1 / 4; grid-row: 3; align-self: center; margin-top: 4px; font-size: 17px; font-weight: 700; } .product-table tbody td.pt-c5::before { display: block; font-weight: normal; } .product-table tbody td.pt-c6 { grid-column: 4; grid-row: 3; justify-self: end; align-self: center; margin-top: 4px; display: flex; align-items: center; gap: 3px; } /* Кнопки +/− заданы как position:absolute со смещениями (screen.css) и висят по краям поля. В карточке они должны стоять в строке, поэтому возвращаем их в поток. Позиционирование самой ячейки при этом НЕ трогаем: сбросив ей position:relative, мы бы лишили кнопки точки отсчёта, и они разлетелись бы по карточке. */ .product-table tbody td.pt-c6 .typeClisks { position: static; left: auto; right: auto; top: auto; bottom: auto; padding: 0; } .product-table tbody td.pt-c6::before { content: none; } /* В разметке порядок «+ поле −». Привычнее «− поле +»; переставляем через order,DOM при этом не меняется, поэтому обработчики кнопок продолжают находить поле как раньше. */ .product-table tbody td.pt-c6 .minusItemFunc { order: 1; } .product-table tbody td.pt-c6 input { order: 2; } .product-table tbody td.pt-c6 .plusItemFunc { order: 3; } .product-table tbody td.pt-c6 .typeClisks { width: 34px; height: 34px; line-height: 32px; border: 1px solid #cbd8e2; border-radius: 5px; background: #f2f7fb; color: #27779b; font-size: 19px; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; } .product-table tbody td.pt-c6 input[type="text"] { width: 46px !important; height: 34px; box-sizing: border-box; margin: 0; font-size: 16px; text-align: center !important; } } /* ========================================================================== 3. Плитки каталога — сетка карточек вместо ручной таблицы Разметку карточек строит mobile.js из существующих строк таблицы, ничего не меняя в базе. Сама таблица прячется. ========================================================================== */ /* Вне мобильной ширины сетка скрыта, а таблица остаётся видимой. Правило нужно на верхнем уровне: сетка может быть построена на узком экране, а потом окно расширят обратно — тогда без этого показались бы сразу и таблица, и карточки. */ .cat-grid { display: none; } @media (max-width: 760px) { table.catalog--replaced { display: none; } .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 18px; } .cat-grid__item { display: flex; flex-direction: column; border: 1px solid #dae5ea; border-radius: 6px; padding: 10px 8px; background: #fff; } .cat-grid__pic { text-align: center; margin-bottom: 8px; } /* Картинки плиток в базе разного размера — приводим к общей высоте, иначе карточки в сетке скачут. object-fit не режет, а вписывает. Селектор начинается с #page намеренно: правило `#page img {height:auto}` выше содержит id и по специфичности перебило бы простой класс. */ #page .cat-grid__pic img { max-width: 100%; height: 120px; object-fit: contain; margin: 0 auto; float: none !important; } .cat-grid__cap { margin-top: auto; text-align: center; line-height: 1.3; } .cat-grid__cap a { font-size: 15px; text-decoration: none; color: #27779b; } .cat-grid__cap br { display: none; } } /* Одна колонка — только на совсем узких экранах. Порог намеренно низкий: 360–430px это обычные телефоны, там две колонки читаются нормально и дают вдвое меньше прокрутки. */ @media (max-width: 330px) { .cat-grid { grid-template-columns: 1fr; } } /* ========================================================================== 3b. Карусели новостей и полезных статей Слайд содержит 4 карточки .novost_aquaop с float:left по 195px. На узком экране они встают в две колонки по ~180px — заголовки рвутся по слогам, — а сам слайд вырастает до ~890px при вьюпорте, которому жёстко задана высота 400px, и низ карточек просто срезается. На телефоне карусель не нужна: показываем первый слайд обычным вертикальным списком, стрелки убираем. Вьюпорт отпускаем по высоте — для этого слайд надо вернуть в поток (bxSlider в режиме fade держит его абсолютом и правит inline-стили, отсюда !important). ========================================================================== */ @media (max-width: 760px) { .novost_aquaop_vnesh .bx-viewport { height: auto !important; } .novost_aquaop_vnesh ul.bxslider { width: auto !important; } .novost_aquaop_vnesh ul.bxslider > li { position: relative !important; left: auto !important; top: auto !important; width: auto !important; display: none !important; opacity: 1 !important; z-index: auto !important; } .novost_aquaop_vnesh ul.bxslider > li:first-child { display: block !important; } .novost_aquaop { float: none !important; width: auto !important; margin: 0 0 20px !important; text-align: center; } .novost_aquaop a { width: auto !important; } /* Стрелки листания без карусели только мешают */ .novost_aquaop_vnesh .bx-controls { display: none !important; } } /* ========================================================================== 3e. Карточка товара Блок .product-links (картинка, «В корзину», «Купить», паспорт) выведен во float:left, а .product-info с таблицей обтекает его справа. На телефоне правой колонке достаётся ~170px, и таблица шириной 620px внутри превращается в бесполезную щель: видно только «Код» и обрезанное «Наименование». Ставим блоки друг под друга — тогда таблица получает всю ширину экрана и прокручивается по горизонтали как остальные товарные таблицы. ========================================================================== */ @media (max-width: 760px) { .product-links { float: none; align-items: center; margin: 0 0 14px; } .product-info { margin-right: 0; } /* Кнопки под палец и одинаковой ширины. Для «Купить» селектор из двух классов — иначе правило .button.product__buy-button с шириной 170px оказывается специфичнее и перебивает. */ .add_item_basket_button, .button.product__buy-button { width: 100%; max-width: 260px; box-sizing: border-box; } /* Иконка корзины задана как background-size:17% — процент считается от ширины кнопки, а её мы расширили. Икона раздувалась до 44px при высоте кнопки 40px и обрезалась. Фиксируем размер в пикселях. */ .add_item_basket_button { background-size: 28px auto; } } /* ========================================================================== 3d. Аккордеон «Часто задаваемые вопросы» .accordion__button — это flex со space-between: подпись и стрелка. Подпись как flex-элемент при одной строке сжимается по тексту, и унаследованное выравнивание по центру не видно — вопрос выглядит прижатым влево. Как только вопрос переносится на две строки, подпись занимает всю ширину и строки встают по центру. Отсюда ощущение «то слева, то по центру». Фиксируем левый край. ========================================================================== */ @media (max-width: 760px) { .accordion__button, .accordion__caption { text-align: left; } } /* ========================================================================== 3c. Форма обратной связи Согласие на обработку данных: подпись выводится блочной ссылкой внутри label, из-за чего на узком экране текст разъезжается относительно галочки. Возвращаем ссылку в строку и выравниваем по верху. ========================================================================== */ @media (max-width: 760px) { .form-privacy { align-items: flex-start; } .form-privacy label { display: block !important; line-height: 1.4; font-size: 14px; } .form-privacy label a { display: inline !important; width: auto !important; } } /* ========================================================================== 3f. Диалоги jQuery UI: оформление заказа, обратный звонок Окно оформления заказа (CJuiDialog #mycart) на телефоне разворачивалось до 701px при экране 425px: поля формы заданы через size=60 и cols=50, ширина окна считается по содержимому, и половина формы уходила за края. Прижимаем окно к экрану, поля делаем резиновыми. Правила общие для всех .ui-dialog, поэтому лечится заодно и обратный звонок. ВАЖНО: свойство display у .ui-dialog не трогаем. jQuery UI открывает и закрывает окно, выставляя display инлайном, и любой !important на нём оставил бы диалог видимым навсегда. Поэтому раскладка без flex — прокручивается само окно. ========================================================================== */ @media (max-width: 760px) { .ui-dialog { position: fixed !important; left: 8px !important; right: 8px !important; top: 8px !important; width: auto !important; max-width: none !important; max-height: calc(100vh - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; /* jQuery UI ставит диалогу z-index 1002, а верхней плавающей панели задан 99999. При прокрутке панель появляется и накрывает шапку окна вместе с крестиком — закрыть модалку становится нечем. Поднимаем окно и подложку над панелью. */ z-index: 100001 !important; } .ui-dialog .ui-dialog-content { width: auto !important; height: auto !important; max-height: none !important; padding: 12px; box-sizing: border-box; } .ui-dialog .ui-dialog-titlebar { padding: 10px 12px; } /* Затемнение фона должно закрывать экран, а не длину документа, и лежать выше плавающей панели, кнопки «наверх» и кнопки звонка — иначе они висят поверх открытой модалки. */ .ui-widget-overlay { position: fixed !important; z-index: 100000 !important; } /* Поля формы — по ширине окна. Шрифт 16px, иначе iOS зумит при фокусе */ .ui-dialog input[type="text"], .ui-dialog input[type="email"], .ui-dialog input[type="tel"], .ui-dialog input[type="password"], .ui-dialog input[type="number"], .ui-dialog textarea, .ui-dialog select { width: 100% !important; box-sizing: border-box; font-size: 16px; } .ui-dialog textarea { min-height: 110px; } .ui-dialog input[type="file"] { max-width: 100%; } .ui-dialog .row { margin-bottom: 12px; } /* Согласие на обработку данных. Флекс здесь не годится: внутри label лежат текстовый узел «Я соглашаюсь на» и ссылка, и как flex-элементы они встают отдельными колонками — текст рвётся пополам. Поэтому обычный блок с отступом слева, а галочка выводится абсолютом в этот отступ: текст со ссылкой при этом течёт одной строкой. */ .ui-dialog .consent label { display: block; position: relative; padding-left: 26px; line-height: 1.4; } .ui-dialog .consent input[type="checkbox"] { position: absolute; left: 0; top: 3px; margin: 0; } .ui-dialog .buttons input[type="submit"], .ui-dialog .buttons button { width: 100%; min-height: 44px; font-size: 16px; } } /* ========================================================================== 4. Бургер-меню Кнопку и переключатели подменю вставляет mobile.js. ========================================================================== */ .mobile-nav-toggle, .submenu-toggle, .header-cart { display: none; } @media (max-width: 760px) { /* --- Кнопка меню: иконка в строке шапки --- */ .mobile-nav-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #eaf4fe; color: #27779b; cursor: pointer; /* ниже по файлу всем button задан min-height:40px «под палец» — круглую иконку это вытягивало в овал */ min-height: 0; } .mobile-nav-toggle__bars, .mobile-nav-toggle__bars::before, .mobile-nav-toggle__bars::after { display: block; width: 22px; height: 2px; background: #27779b; border-radius: 2px; } .mobile-nav-toggle__bars { position: relative; } .mobile-nav-toggle__bars::before, .mobile-nav-toggle__bars::after { content: ''; position: absolute; left: 0; } .mobile-nav-toggle__bars::before { top: -7px; } .mobile-nav-toggle__bars::after { top: 7px; } /* Меню лежит внутри #header, которому выше задано выравнивание по центру — ради логотипа и контактов. Пункты меню это наследовали, и длинные названия, переносящиеся на две строки, вставали по центру вразнобой с короткими. Возвращаем левый край. */ #mainmenu, #mainmenu ul, #mainmenu ul li, #mainmenu ul li a, #yw0 li ul, #yw0 li ul li, #yw0 li ul li a { text-align: left; } /* --- Список пунктов --- */ #mainmenu > ul#yw0 { display: none; padding: 0 0 6px; margin: 0; } #mainmenu.is-open > ul#yw0 { display: block; } #mainmenu ul li { display: block; position: relative; line-height: normal; border-top: 1px solid rgba(39, 119, 155, .15); } /* Разделители-картинки между пунктами не нужны в столбце */ #mainmenu ul li:before, #yw0 li ul li:before { content: none !important; } /* Корзина прижималась вправо флоатом */ #mainmenu ul li:last-child { float: none; } /* Пункт «Корзина» вынесен иконкой в шапку — в списке он лишний. У элемента инлайновый display:block, поэтому !important. */ #mainmenu ul li#cart { display: none !important; } #mainmenu ul li a { display: block; padding: 13px 52px 13px 14px; font-size: 17px; } /* --- Подменю «Продукция»: раскрытие по тапу, а не по наведению --- */ /* Гасим десктопное :hover-раскрытие, иначе на тач-экранах оно залипает после первого касания */ #yw0 li:hover ul { display: none; width: auto; background: none; } #yw0 li ul { position: static; display: none; width: auto !important; padding: 0; margin: 0; background: #eaf4fe !important; border-radius: 0; } #yw0 li.is-open > ul { display: block !important; background: #eaf4fe !important; } #yw0 li ul li a { font-size: 15px !important; line-height: 1.35 !important; display: block; padding: 12px 14px 12px 26px; } /* Кнопка-стрелка, раскрывающая подменю. Отдельная от ссылки, чтобы сама ссылка продолжала работать. */ .submenu-toggle { display: block; position: absolute; top: 0; right: 0; width: 52px; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer; /* Ссылке пункта задан position:relative (правило .parent>a), и в DOM она идёт после кнопки — без z-index она перекрывала бы стрелку, и тап по ней уводил бы на /product вместо раскрытия подменю. */ z-index: 5; } .submenu-toggle::before { content: ''; display: block; width: 9px; height: 9px; margin: 0 auto; border-right: 2px solid #27779b; border-bottom: 2px solid #27779b; transform: rotate(45deg); transition: transform .15s ease; } #yw0 li.is-open > .submenu-toggle::before { transform: rotate(-135deg); } /* Десктопная стрелка у «Продукции» дублировала бы кнопку */ .parent > a::after { display: none; } } /* ========================================================================== 5. Формы и элементы управления под палец ========================================================================== */ @media (max-width: 760px) { /* Шрифт мельче 16px заставляет iOS зумить страницу при фокусе */ input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="password"], select, textarea { font-size: 16px; } /* Поле количества внутри товарной таблицы — исключение: ему заданы ширина и центрирование инлайн-стилем */ .product-table input[type="text"] { font-size: 14px; } input[type="submit"], input[type="button"], button { min-height: 40px; } /* Кнопки +/- у количества */ .typeClisks { display: inline-block; min-width: 22px; text-align: center; } }