/* Theme Name: Astra Child - Soltis Template: astra Version: 1.0.0 Description: Дочерняя тема для доработок rusoltis.ru. Кастомный код сайта живёт здесь, а не в родительской Astra. */ /* Сайдбар каталога: ссылки РАЗВЕРНУТЬ выглядели синими кнопками. Причина не в теме и не в коде подрядчика (оба ставят background:none), а в глобальных стилях Elementor: правило ".elementor-kit-4 button" имеет специфичность выше одиночного класса и перебивает обоих. Поэтому селектор здесь из двух классов - этого достаточно, !important не нужен. Проверено 28.08.2026 в браузере. */ .soltis-cat-list .soltis-cat-list__toggle { background: none; border: 0; box-shadow: none; padding: 5px 0 0; color: #8a94a6; } .soltis-cat-list .soltis-cat-list__toggle:hover, .soltis-cat-list .soltis-cat-list__toggle:focus { background: none; box-shadow: none; color: #2b3a67; } /* Каталог: карточки одной высоты. Товары сняты в разных пропорциях, высота миниатюры гуляла от 120 до 220 px, поэтому названия и кнопки в одном ряду стояли на разных уровнях, а у товаров без фото карточка была вдвое ниже соседней. Фиксируем высоту изображения, object-fit: contain не режет и не растягивает картинку. Кнопка прижата вниз. */ ul.products li.product .astra-shop-thumbnail-wrap { height: 200px; overflow: hidden; } ul.products li.product .astra-shop-thumbnail-wrap .woocommerce-LoopProduct-link { display: flex; align-items: center; justify-content: center; height: 100%; } /* Высоту держит контейнер, а не сама картинка: height на img проигрывает правилу img { height: auto } из темы, а max-height внутри флекс-бокса отрабатывает независимо от него. Наложенная кнопка на карточке позиционирована абсолютно, флекс её не двигает. */ /* 31.08: max-height в процентах внутри флекс-ссылки картинку не удерживал - она рисовалась высотой 213 px в блоке 200 px и наезжала на подпись категории под собой, заметно в блоке "Сопутствующие товары". Предел задан в пикселях, остаток подрезает overflow у обёртки выше. */ ul.products li.product .astra-shop-thumbnail-wrap img { max-height: 200px; width: auto; object-fit: contain; } ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; } ul.products li.product .astra-shop-summary-wrap .button { margin-top: auto; align-self: flex-start; } /* Кнопка поиска в шапке: по умолчанию серая, приводим к синему кнопок каталога. */ .elementor-search-form .elementor-search-form__submit { background-color: #0170B9; } /* Псевдоссылки без адреса не должны притворяться кликабельными. На трёх юридических страницах текст "https://солтис.рф" оформлен как ссылка, но атрибута href у него нет: курсор менялся на палец, клик не делал ничего. */ a:not([href]) { cursor: text; } /* Иконка корзины на карточке товара спрятана 30.08. По ссылке она ведёт на ту же страницу товара, что и кнопка "Подробнее", то есть дублирует её, но нарисована сумкой для покупок. На сайте нет ни цен, ни корзины, поэтому значок обещает то, чего нет. */ ul.products li.product .ast-on-card-button { display: none; } /* Кнопки Elementor без адреса (href="#") спрятаны 30.08. На странице Скидок так висели "Перейти на WB" и "Перейти на OZON": адреса магазинов в них не подставили, клик не делал ничего. Правило самоочищающееся - как только в кнопке появится адрес, она вернётся сама. Проверено: других кнопок-заглушек на сайте нет, а переключатели вкладок на главной используют свой класс, их правило не трогает. */ a.elementor-button[href="#"] { display: none; } /* Блок "Мы на маркетплейсах" на главной спрятан 30.08. Обе кнопки вели на буквальные заглушки /ССЫЛКА_WB и /ССЫЛКА_OZON, то есть посетитель с главной попадал на 404. Адреса магазинов запрошены у заказчика. Как придут - удалить это правило и подставить их в HTML-виджет на главной, блок вернётся сам. */ .soltis-premium-section { display: none; } /* Карточка товара: главное фото выводилось во всю высоту исходника. У вертикальных снимков это 725 px при колонке текста в 250 px, из-за чего справа от названия зияла пустота почти в пол-экрана. Ограничиваем высоту, пропорции сохраняет object-fit. */ .woocommerce-product-gallery .woocommerce-product-gallery__image img { height: 460px; max-height: 460px; width: 100%; object-fit: contain; } .woocommerce-product-gallery .flex-viewport { max-height: 460px; } /* Каталожный режим: спрятать элементы покупки, если решим включить (пара к фильтру woocommerce_is_purchasable в functions.php) */ /* .add_to_cart_button, .single_add_to_cart_button, .cart, .woocommerce-cart-form { display: none !important; } */ /* Шрифты Шрифтовой библиотеки WordPress. WordPress подключает их через глобальные стили, а те хранятся ОТДЕЛЬНО для каждой темы. При переходе на дочернюю тему запись оказалась пустой, 18 объявлений @font-face пропали со страниц, и Roboto подменился системным шрифтом. Проверено 28.08.2026: в document.fonts Roboto не было. Объявления перенесены сюда как есть, снято с главной до переключения темы. */ @font-face{font-family:Roboto;font-style:normal;font-weight:100;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwubebgmwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:200;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwuzebwmwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:300;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwuaabwmwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwubebwmwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwub2bwmwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwuyaammwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwuyjammwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:800;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwuzeammwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfomcnqeu92fr1me7ksn66agldtyluamqxc89ymc2dpnwuztammwggvwl0qn.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:100;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlohriar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:200;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlghqiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:300;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlt_qiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:400;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlohqiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:500;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlrpqiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:600;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmll_xiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:700;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlmbxiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:800;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlghxiar0klqnx24.woff2') format('woff2');} @font-face{font-family:Roboto;font-style:italic;font-weight:900;font-display:fallback;src:url('https://rusoltis.ru/wp-content/uploads/fonts/kfokcnqeu92fr1mu53zec9_vu3r1gihoszmoclhrs6ljxfmmlijxiar0klqnx24.woff2') format('woff2');} /* ==================== Мобильная вёрстка, до 767 px ==================== Разобрано 30.08.2026. Все правила ниже действуют только на телефонах, десктоп ими не затронут. Селекторы намеренно тяжёлые: исходные значения заданы Elementor'ом через три класса, правило из одного класса их не перебивает. */ /* Плитки категорий на главной подняты на 60 px, чтобы на десктопе заходить на нижний край баннера. На телефоне баннер сжимается до 230 px, и эти же 60 px закрывают последнюю строку заголовка "Работаем по всей РФ". Замерено: перекрытие ровно 60 px. */ @media (max-width: 767px) { body .elementor-1317 .elementor-element.elementor-element-7035cb9 { margin-top: 0; } } /* Подвал: колонки заданы в процентах (53%, 50%, 50%) и на узком экране остаются шириной 145 px вместо того, чтобы встать друг под друга. Адрес рвётся на пять строк, а строка "Медицинское оборудование и сервисное обслуживание" наезжает на список правовых ссылок. Переменную --width Elementor подставляет в своё же width: var(--width), поэтому достаточно переопределить её, разметку не трогаем. */ @media (max-width: 767px) { body [data-elementor-type="footer"] .e-con-inner > .e-con { --width: 100%; } } /* Круглая кнопка "Назад" висит фиксированно у правого края по центру экрана, z-index 9999. На широком мониторе она попадает в пустое поле сбоку от текста, а на телефоне ложится прямо на контент: закрывает названия товаров в каталоге, ссылки категорий, заголовок страницы 404 и пункты открытого меню. На телефоне она не нужна, там есть системная кнопка и жест "назад". */ @media (max-width: 767px) { body a.floating-back-btn { display: none; } } /* Карточка товара: у контейнера хлебных крошек ширина 100% и при этом поля по 10 px с боков, из-за чего страница на 10 px шире экрана и её можно сдвинуть пальцем вбок. Вычитаем поля из ширины. */ @media (max-width: 767px) { } /* Тот же баннер на главной: высота слайда на телефоне задана жёстко, 230 px, и текст в неё не помещается - пункт "Сертифицированное оборудование" срезался нижним краем. Раньше этого не было видно, потому что сверху лежали плитки категорий. Содержимое слайда позиционировано абсолютно и на высоту не влияет, поэтому авто-высота не работает, нужна явная. Замерено: слайд вместе с кнопкой "Каталог" занимает 345 px, ставим 360 px с запасом на перенос строки. Замер сделан на экране 330 px, что уже любого реального телефона. */ @media (max-width: 767px) { body .elementor-1317 .elementor-element.elementor-element-cfa6f07 .swiper-slide { height: 360px; } } /* Контакты: кнопка "Получить коммерческое предложение" стояла на 23 px левее абзаца над ней. У текстового блока внутреннее поле 23 px, у кнопки его нет. Расхождение одинаковое и на телефоне, и на мониторе, поэтому правило без медиазапроса. */ .elementor .elementor-element.elementor-element-so1kpb2 > .elementor-widget-container { padding-left: 23px; padding-right: 23px; } @media (max-width: 767px) { /* Главная, секция с формой заявки: фоновая картинка 1774x887 выводилась в натуральную величину с повтором, а секция на телефоне высотой 1025 px. Картинка укладывалась дважды, и на стыке шёл горизонтальный шов - он читался как обрыв светлой подложки под полем "Что вас интересует". Растягиваем фон вместо тиражирования. */ body .elementor .elementor-element.elementor-element-2a9af8f { background-size: cover; background-repeat: no-repeat; background-position: center top; } /* Страница Сервиса: картинкам заданы отрицательные отступы вида -280px -120px - приём вёрстки под широкий экран. На телефоне правый отрицательный отступ уводил страницу на 300 px за край экрана, её можно было сдвинуть пальцем вбок, а верхний накрывал картинками текст. Возвращаем картинки в обычный поток. */ body .elementor .elementor-element.elementor-widget-image > .elementor-widget-container { margin: 0; max-width: 100%; } body .elementor .elementor-element.elementor-widget-image img { max-width: 100%; height: auto; } } /* Стандарты оснащения: три контейнера заданы колонкой с переносом (flex-direction: column + flex-wrap: wrap) и фиксированной высотой. На широком экране это неважно, а на телефоне высота не вмещает содержимое, и перенос уводит элементы во ВТОРОЙ столбец справа - картинки оказывались целиком за краем экрана, страница тянулась на 600 px при экране 330. Отключаем перенос, элементы встают друг под друга. Проверено: содержимое помещается в контейнер, ничего не обрезается. */ @media (max-width: 767px) { body .elementor .elementor-element.elementor-element-1b7c397, body .elementor .elementor-element.elementor-element-47ef870, body .elementor .elementor-element.elementor-element-7ff0153 { flex-wrap: nowrap; height: auto; } } @media (max-width: 767px) { /* Стандарты оснащения: верхний блок - слайдер с жёсткой высотой слайда 400 px. На телефоне текст в неё не помещается и вылезал на заголовок следующей секции "СТАНДАРТ ОСНАЩЕНИЯ", перекрытие 59 px. Замерено: содержимому нужно 484 px, ставим 530 px с запасом. Тот же случай, что и с баннером на главной. */ body .elementor .elementor-element.elementor-element-a4f871a .swiper-slide { height: 530px; } /* Скидки: заголовок разбит на два виджета, у первого задан отступ снизу -80 px, чтобы строки шли вплотную. На телефоне первая строка переносится и занимает две строки, поэтому вторая, "маркетплейсах", наезжала на неё на 37 px. На телефоне отрицательный отступ убираем. */ body .elementor .elementor-element.elementor-element-2df0d58 > .elementor-widget-container { margin-bottom: 0; } } /* Главная, "Популярное в каталоге" на телефоне: карточки переключались плавным затуханием за 1 секунду, а класс is-active, который делает карточку кликабельной, переставлялся мгновенно. Целую секунду из трёх кликабельной была следующая карточка, которой ещё не видно: посетитель видел один товар, а по нажатию уходил на другой. Задержать переключение через transition нельзя - проверено опытом 31.08, браузер применяет pointer-events сразу, задержку для него не соблюдает. Поэтому убираем само затухание: прозрачность и кликабельность меняются в один момент. Заодно пропадает кадр, где два названия наложены друг на друга. После правки: 10 замеров из 10 - кликабельна ровно та карточка, которая показана. */ @media (max-width: 600px) { .soltis-leaders-grid .soltis-leader-card { transition: none; } } /* ==================== Планшет, до 1024 px ==================== Разобрано 31.08. До этого проверяли только телефон (330 px) и монитор (1572 px), промежуточную ширину не смотрели ни разу. Нашлось, что часть сеток не перестраивается и страницы уезжают вбок. */ /* Плитки категорий на главной и блок услуг: сетка задана repeat(3, 1fr), а 1fr не даёт колонке сжаться уже содержимого. Длинные слова вроде "Анестезиологическое" распирали колонки до 269+202+255 px при доступных 708, и страницу можно было сдвинуть вбок на 13 px. На планшете строим в две колонки, minmax(0,1fr) разрешает колонке сжиматься. Селектор с body намеренно: стили блока лежат в теле страницы и идут позже всего, что подключено в шапке. */ @media (max-width: 1024px) { body .soltis-categories-grid, body .soltis-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Сервис: четыре карточки услуг стоят сеткой в четыре колонки на любой ширине. На планшете это по 185 px на колонку, и слово "ОБСЛУЖИВАНИЕ" в неё не помещается, вылезая за край экрана. Строим в две колонки. */ @media (max-width: 1024px) { body .elementor .elementor-element.elementor-element-b8f9b2c, body .elementor .elementor-element.elementor-element-b8f9b2c > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Три правки ниже уже сделаны для телефона, но дефект есть и на планшете, а правила стояли до 767 px. Повторяем для промежуточной ширины. */ @media (min-width: 768px) and (max-width: 1024px) { /* кнопка "Назад" перекрывает текст и на планшете */ body a.floating-back-btn { display: none; } /* карточка товара шире экрана на 10 px из-за полей у контейнера крошек */ /* на Скидках вторая строка заголовка наезжает на первую */ body .elementor .elementor-element.elementor-element-2df0d58 > .elementor-widget-container { margin-bottom: 0; } } /* Поиск по каталогу на телефоне только в каталоге. На информационных страницах строка поиска занимала отдельную строку шапки и отодвигала содержимое вниз на 60 px. Решение заказчика работ 01.09: оставить поиск там, где он по делу - в каталоге, категориях, карточках товара и на выдаче поиска. Признак этих страниц - класс woocommerce у тега body, он есть у всех четырёх и нет у главной, Контактов, Сервиса, Скидок и Стандартов. Прячем и саму строку-контейнер, иначе от неё осталась бы пустая полоса. Замерено: шапка со 112 px до 52 px. */ @media (max-width: 767px) { body:not(.woocommerce) .elementor-2142 .elementor-element.elementor-element-so1srch1, body:not(.woocommerce) .elementor-2142 .elementor-element.elementor-element-so1nav01 { display: none; } } /* Согласие на обработку данных в одну строку. Форма выводила подпись "Даю согласие на обработку моих персональных данных" отдельной строкой, а флажок под ней, потому что группа поля построена колонкой. Разворачиваем в строку: row-reverse ставит флажок первым, подпись за ним, так как в разметке они идут в обратном порядке. Подгруппу с флажком ужимаем по содержимому, иначе она занимает всю ширину и отталкивает подпись. Замерено: высота блока 55 px -> 27 на мониторе, 67 -> 28 на телефоне, подпись встаёт справа от флажка. */ .ehp-form__field-group.is-field-type-ehp-acceptance { flex-direction: row-reverse; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 10px; } .ehp-form__field-group.is-field-type-ehp-acceptance .elementor-field-subgroup { flex: 0 0 auto; width: auto; } /* Шапка закреплена при прокрутке. Просьба заказчика от 08.09: чтобы навигация не уходила из поля зрения при листании каталога. Закрепляем именно #masthead, а не внутренний блок .elementor-2142: у того родитель ровно той же высоты, и sticky некуда двигаться, проверено 09.09. Нужен !important: тема Astra задаёт #masthead position: relative. Смещение сверху под панелью управления WordPress. Панель ведёт себя по-разному: шире 782 px она закреплена и занимает 32 px, на 601-782 px закреплена и занимает 46 px, уже 600 px уезжает вместе со страницей и смещение не нужно. Для обычного посетителя панели нет и смещение нулевое. */ body #masthead { position: sticky !important; top: 0; z-index: 100; background: #fff; } body.admin-bar #masthead { top: 32px; } @media (max-width: 782px) { body.admin-bar #masthead { top: 46px; } } @media (max-width: 600px) { body.admin-bar #masthead { top: 0; } } /* Разделительная линия под шапкой убрана по просьбе заказчика от 08.09. Это была рамка снизу у строки меню, цвет 230 233 239. */ body #masthead .elementor-element.elementor-element-so1nav01 { border-bottom: 0; } /* Верхняя строка шапки не помещалась на ноутбуках. Сумма блоков в строке - 1305 px, а сама строка 1140 px, поэтому поиск (285 px, фиксированная ширина) вылезал за правый край экрана: на 1440 px на 15 px, на 1280 px на 95 px, и появлялась горизонтальная прокрутка. Разрешаем трём текстовым блокам (почта, часы работы, телефон) сжиматься - в них есть запас по ширине. Без медиазапроса: сжатие срабатывает только тогда, когда места действительно не хватает, на широких экранах ничего не меняется. */ body #masthead .elementor-element.elementor-element-4689e96, body #masthead .elementor-element.elementor-element-2638a6a, body #masthead .elementor-element.elementor-element-0bd56fb { flex-shrink: 1; min-width: 0; } /* Секция заявки на главной, приведена к макету Вари от 08.09. На главной было три формы: рабочая на виджете Hello Plus, нерабочая копия в HTML-блоке (тег form без action, данные никуда не уходили) и форма в попапе. Нерабочую копию убрали, её оформление перенесли на рабочий виджет. Часть значений задана в самом виджете (цвета, размеры заголовка), здесь то, что через настройки виджета не выставляется. Исходник макета лежит в prep/varya-forma-zayavki.html. */ body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__img { display: block; width: 100%; max-width: 500px; height: auto; max-height: 500px; margin: 0 auto; object-fit: contain; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__field-label { font-size: 11px; font-weight: 400; line-height: 1.3; margin-bottom: 6px; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 input.ehp-form__field, body .elementor-1317 .elementor-element.elementor-element-c7d1f90 textarea.ehp-form__field { min-height: 46px; padding: 11px 18px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .96); border-radius: 999px; font-size: 12px; font-weight: 300; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 10px rgba(49, 94, 174, .025); } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 textarea.ehp-form__field { min-height: 92px; padding: 14px 18px; border-radius: 24px; resize: vertical; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__field::placeholder { color: #929DB0; opacity: 1; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .is-field-type-ehp-acceptance .ehp-form__field-label { font-size: 10px; font-weight: 300; line-height: 1.45; color: #68758B; margin-bottom: 0; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 input.elementor-acceptance-field { width: 14px; height: 14px; min-height: 0; padding: 0; border-radius: 3px; box-shadow: none; accent-color: #315EAE; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__wrapper { row-gap: 13px; column-gap: 12px; } /* Имя и телефон стоят по 50 процентов, но зазор между ними плагин в ширину не закладывает: 50 плюс 50 плюс зазор больше строки, и телефон срывался на следующую строку. Вычитаем половину зазора из каждого поля. Только для монитора: на планшете и телефоне поля и так во всю ширину. */ @media (min-width: 1025px) { body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__field-group.has-width-50 { width: calc(50% - 6px); } } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__submit-group { justify-content: flex-start; align-items: flex-start; margin-top: 5px; } /* Плагин задаёт кнопке ширину 100% через !important, иначе не перебить. */ body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__button { width: auto !important; flex: 0 0 auto; min-width: 190px; min-height: 44px; padding: 11px 24px; border-radius: 999px; font-size: 12px; font-weight: 400; box-shadow: 0 7px 16px rgba(49, 94, 174, .15); } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__button-text::after { content: ' \2192'; font-size: 17px; font-weight: 300; } /* Строка со ссылками на документы под кнопкой. Метка чекбокса ссылки не поддерживает, разметка в ней экранируется, поэтому ссылки вынесены сюда. */ body .elementor-1317 .soltis-legal-note { max-width: 530px; margin-left: auto; font-size: 9px; font-weight: 300; line-height: 1.5; color: #7B879A; } body .elementor-1317 .soltis-legal-note a { color: #5B6F9E; text-decoration: underline; text-underline-offset: 2px; } /* Таблицы параметров в описании категории каталога. Заливаются в описание категории WooCommerce, оно выводится шорткодом [soltis_desc] над сеткой товаров. Сама таблица уже оформлена классом soltis-table из шаблона архива, здесь только заголовки разделов и отступы между блоками. Первый заход: дыхательные контуры GGM, 9 таблиц, данные со старого сайта, prep/data/kontury-ggm.md. */ body .soltis-catalog__desc .soltis-kontury__title { margin: 26px 0 10px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #173a6b; } body .soltis-catalog__desc .soltis-kontury__title:first-child { margin-top: 0; } /* Колонок много (до 13), в колонку каталога таблица не влезает и рвёт ячейки по словам: "VA-4012-05" разъезжался на две строки. Прокрутку даём не самой таблице, а обёртке вокруг неё. Через display:block у таблицы получалось хуже: рамка таблицы рисовалась во всю ширину блока, а содержимое было уже, и над каждой таблицей висела лишняя линия. Плюс узкие таблицы на 4 колонки не растягивались и оставляли пустое место. */ body .soltis-catalog__desc .soltis-table-scroll { overflow-x: auto; margin: 0 0 18px; } body .soltis-catalog__desc .soltis-table-scroll > table.soltis-table { width: 100%; min-width: 100%; margin: 0; border-top: 0; } body .soltis-catalog__desc table.soltis-table th, body .soltis-catalog__desc table.soltis-table td { white-space: nowrap; padding-left: 6px; padding-right: 6px; } /* Отступы в ячейках ужаты с 12 до 6 px намеренно: на 12 px семь таблиц из девяти не влезали в колонку и требовали прокрутки вбок, хотя не хватало всего 3-48 px. На 6 px влезают все девять целиком, прокрутка на мониторе не нужна вовсе. */ /* При прокрутке вправо уезжал артикул, а без него строка не читается. Держим первую колонку на месте. Рамку ей рисуем тенью: у ячеек с position sticky обычная граница при border-collapse не рисуется. */ body .soltis-catalog__desc table.soltis-table th:first-child, body .soltis-catalog__desc table.soltis-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: inset -1px 0 0 #e6e6e6; } /* Заголовок категории с описанием сидел в сетке из двух колонок по 350 px: слева текст, справа была картинка превью, которую убрали 09.09 по просьбе заказчика. Колонка осталась пустой, а описание так и осталось шириной 350 px, из-за чего таблицы параметров ужимались до 318 px. Делаем одну колонку на всю ширину. */ body .elementor-element.elementor-element-9bfdb0b { grid-template-columns: 1fr; } /* На ширине до 900 px шаблон архива сам делает таблицу блоком с прокруткой. Внутри описания категории это мешает: прокрутку уже даёт обёртка, а из-за второго прокрутчика возвращалась та самая лишняя линия во всю ширину. Оставляем таблицу таблицей, листает обёртка. */ @media (max-width: 900px) { body .soltis-catalog__desc .soltis-table-scroll > table.soltis-table { display: table; overflow-x: visible; } } /* Пустые вкладки аккордеона на карточке товара не показываем: посетитель нажимал на "Состав и комплектация" или "Характеристики" и видел пустоту, потому что атрибуты у товаров не заполнены. Фильтр в functions.php приводит пустой вывод шорткода к действительно пустому блоку, дальше вкладка прячется целиком. Заполнят атрибуты - вкладки вернутся сами. */ body .e-n-accordion-item:has(.elementor-shortcode:empty) { display: none; } /* Хлебные крошки на карточке товара выезжали вбок на 10 px: у контейнера ширина 100 процентов и при этом поля по 10 px с каждой стороны. Раньше правилось только для телефона и планшета, хотя расхождение есть на любой ширине - на мониторе 1499 px документ был 1509 px. */ body .elementor-3361 .elementor-element.elementor-element-ffa1702 { max-width: calc(100% - 20px); } /* Вкладка "О продукте" на товарах без описания тоже открывалась пустой. */ body .e-n-accordion-item:has(.woocommerce_product_description:empty) { display: none; } /* Если показывать нечего вовсе, убираем и сам аккордеон: пустая коробка занимала 58 px. Условие честное - описание пустое И нет ни одного непустого шорткода, так что при появлении атрибутов аккордеон вернётся. */ body .elementor-widget-n-accordion:has(.woocommerce_product_description:empty):not(:has(.elementor-shortcode:not(:empty))) { display: none; } /* Галерея товара разъезжалась на всех карточках, где больше одной фотографии. Проверено 10.09: таких 24 из 182, у остальных по одному фото и потому заметно не было. Причина не в теме и не в этом файле. В настройках темы, поле "Дополнительные стили", лежит правило для центрирования фотографии: .single-product .woocommerce-product-gallery__image { width: 100% !important } Галерея WooCommerce это карусель: все фотографии выкладываются в одну ленту, и каждому слайду карусель сама проставляет ширину окна, 550 px. Правило выше перебивает её через !important, и слайд получает 100% от ленты, то есть 4400 px при четырёх фотографиях. Первый слайд растягивается на всю ленту, а сама фотография уезжает за правый край экрана на отметку 2122 px. Здесь возвращаем слайду ширину по содержимому. Селектор длиннее исходного, поэтому побеждает при равном !important. Центрирование сохраняется, его задают остальные строки того правила. Правильнее убрать строку width из "Дополнительных стилей" совсем, это записано в prep/CHECKLIST.md. Пока правило там живёт, снимать эту заплатку нельзя. */ body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image { width: auto !important; } /* Телефон: размеры в формах и область нажатия кнопки меню. Макет формы от 08.09 рассчитан на монитор, на телефоне часть размеров мешает. Safari на iPhone увеличивает страницу, когда посетитель касается поля со шрифтом меньше 16px, и дальше форма заполняется в увеличенном виде с уехавшей вбок вёрсткой. В форме на главной шрифт поля 12px, в форме всплывающего окна 15px, увеличение срабатывает в обеих. Текст согласий 9-10px на телефоне не читается. На мониторе макет остаётся как есть, правки только до 767px. */ @media (max-width: 767px) { body .elementor-1317 .elementor-element.elementor-element-c7d1f90 input.ehp-form__field, body .elementor-1317 .elementor-element.elementor-element-c7d1f90 textarea.ehp-form__field, body .elementor-2355 input.elementor-field, body .elementor-2355 textarea.elementor-field { font-size: 16px; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__field-label { font-size: 13px; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .is-field-type-ehp-acceptance .ehp-form__field-label { font-size: 12px; } body .elementor-1317 .elementor-element.elementor-element-c7d1f90 .ehp-form__button { font-size: 14px; } body .elementor-1317 .soltis-legal-note { font-size: 11px; } /* Кнопка меню 33 на 33 точки, для пальца мало, рекомендуемый минимум 44. Значок 22 точки, поэтому отступ 11 с каждой стороны даёт ровно 44. Отрицательное поле оставляет значок на прежнем месте. */ body .elementor-menu-toggle { padding: 11px; margin: -11px; } }