/* PROPERTY TABLE IN THE PRODUCT PAGE */ div.switcher_cap{ padding: 0; font-size: 18px; color: #c4010c; line-height: 34px; margin-bottom: 8px; } .prop_table_cont{ margin: -5px 0 0 0; } .prop_table_cont tr, .prop_table_cont td, .prop_table_cont table { border: 0 !important; } .prop_table_cont tr td:first-child { color: #777; display: block; margin-right: 15px; background-color: #FFF; } .prop_table_cont tr td:first-child:after { content: " "; border-bottom: 1px dotted #CCC; display: block; width: calc(100% + 15px); } /* END PROPERTY TABLE IN THE PRODUCT PAGE */ /* CATEGORIES IN THE CATALOG PAGE*/ .section.in_catalog .psection{ /*display: none;*/ } .section.in_catalog a.parent { display: block; font-size: 12px; color: #01509a; /* text-decoration: underline; */ padding: 3px 10px; /* border: 1px solid rgba(76,101,146,.3); border-radius: 13px; background: rgba(195,211,239,.25);*/ text-align: center; min-height: 54px; } .section.in_catalog { padding: 5px 10px 5px 0px !important; display: inline-block !important; float: left !important; /*width: auto !important;*/ font-size: 12px; min-height: auto !important; } .section.in_catalog:last-child { margin-bottom: 20px; } .section.in_catalog span{ padding: 6px 0 0 0; /* font-weight: 600; */ display: inline-block; } /* END CATEGORIES IN THE CATALOG PAGE*/ /* simple seo styles */ .btn-green { color: white; background: #3ed083; } /* 2017-08-23 */ .inbasket.btn2:before { display: block; content: "В корзине"; } /* 24.08.2026. Правило было глобальным (.add2compare) и задумывалось для витрины каталога, где ссылка сравнения — пустая иконка 33x22. На карточке товара тот же класс несёт текстовую подпись «Сравнить», из-за width:33px подпись не помещалась и вылезала поверх блока «Избранное». Правило ограничено витриной — так же, как сделано ниже у соседнего .view_showcase .add2favorite. */ .view_showcase .add2compare { display: block; width: 33px; height: 22px; background: url(assets/img/new-icons-compare.png) bottom left no-repeat; margin-bottom: 7px; } .view_showcase .add2compare.in { background: url(assets/img/new-icons-compare.png) top left no-repeat; } .view_showcase .add2favorite { display: block; width: 24px; height: 22px; background: url(assets/img/new-icons-favorite.png) bottom left no-repeat; margin-bottom: 7px; } .view_showcase .add2favorite.in { background: url(assets/img/new-icons-favorite.png) top left no-repeat; } .view_showcase .buy { width: 100%; } .view_showcase .favorishare { margin-left: 40px !important; } /* 24.08.2026. На карточке товара «Сравнить» и «Избранное» показываются иконками из спрайта темы (как соседнее «Нашли дешевле»), а не пустыми квадратами-чекбоксами. Размеры иконок тема уже задаёт правилами .add2compare .svg-icon и .add2favorite .svg-icon; здесь только состояние «добавлено» для сравнения — у избранного такое правило в теме уже есть. */ .add2compare.in .svg-icon { fill: #c4010c; } /* 24.08.2026. Размер иконки удаления тема задаёт только внутри попапа корзины (#rs_easycart). На отдельной странице /include/easycart/compare.php тот же шаблон выводится вне попапа, и SVG без размеров разворачивался в 300x150 — на странице висел гигантский чёрный крест. Правило без #rs_easycart, поэтому оно слабее и вида в попапе не меняет. */ .rsec_delete .svg-icon { width: 10px; height: 10px; } /* =================================================================== Вертикальный фильтр укрывных материалов. Этап 1.2, 24.08.2026. Только тестовый шаблон prostroy_new (виден по ?tpl=new). =================================================================== */ /* --- двухколоночная раскладка раздела: слева фильтр, справа товары --- */ @media (min-width: 992px) { .catalog { display: grid; grid-template-columns: 272px minmax(0, 1fr); column-gap: 28px; align-items: start; } .catalog > .categoryTeaser, .catalog > .sections { grid-column: 1 / -1; } /* Сайдбар едет вместе со страницей: ни внутреннего скролла, ни прилипания — и то и другое на длинном фильтре мешает больше, чем помогает. */ .catalog > .sidebar { grid-column: 1; } .catalog > .prods, .catalog > .clear, .catalog > .row { grid-column: 2; } } /* --- сам фильтр --- */ .ukf { font-size: 13px; color: #23282f; border: 1px solid #e4e8ee; border-radius: 8px; background: #fff; overflow: hidden; } .ukf__head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eef1f5; } .ukf__title { font-size: 16px; font-weight: 600; } .ukf__found { font-size: 12px; color: #7b8798; } .ukf__chosen { padding: 12px 16px; background: #f7f9fc; border-bottom: 1px solid #eef1f5; } .ukf__chosen-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7b8798; margin-bottom: 8px; } .ukf__chosen-list { display: flex; flex-wrap: wrap; gap: 6px; } .ukf__reset { display: inline-block; margin-top: 10px; font-size: 12px; color: #c4010c; border-bottom: 1px dashed rgba(196,1,12,.4); text-decoration: none; } .ukf__reset:hover { color: #c4010c; border-bottom-color: #c4010c; } .ukf__group { border-bottom: 1px solid #eef1f5; } .ukf__group:last-child { border-bottom: 0; } .ukf__group-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: #23282f; text-align: left; } .ukf__arrow { width: 8px; height: 8px; border-right: 1.5px solid #9aa4b2; border-bottom: 1.5px solid #9aa4b2; transform: rotate(45deg); transition: transform .15s; margin-top: -3px; } .ukf__group.is-open .ukf__arrow { transform: rotate(-135deg); margin-top: 3px; } .ukf__group-body { display: none; padding: 0 16px 14px; } .ukf__group.is-open .ukf__group-body { display: flex; flex-wrap: wrap; gap: 6px; } /* --- чипы вместо чекбоксов --- */ .ukf__chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid #dfe4ec; border-radius: 14px; background: #fff; color: #23282f; text-decoration: none; line-height: 1.15; transition: border-color .12s, background .12s; } .ukf__chip:hover { border-color: #0c4da2; color: #0c4da2; text-decoration: none; } .ukf__chip.is-on { background: #0c4da2; border-color: #0c4da2; color: #fff; } .ukf__chip.is-on:hover { color: #fff; } /* Количество товаров рисуется из data-атрибута, а не текстом: в исходном коде страницы этих чисел быть не должно. */ .ukf__chip[data-count]::after { content: attr(data-count); margin-left: 5px; font-size: 11px; color: #9aa4b2; } .ukf__chip.is-on[data-count]::after { color: rgba(255, 255, 255, .75); } .ukf__chip--chosen[data-count]::after { content: none; } .ukf__chip--chosen { background: #fff; border-color: #c9d2df; padding-right: 7px; } .ukf__chip-x { font-size: 14px; line-height: 1; color: #9aa4b2; } .ukf__chip--chosen:hover .ukf__chip-x { color: #c4010c; } /* --- цена --- */ .ukf__price { display: flex; align-items: center; gap: 6px; width: 100%; } .ukf__price input[type="text"] { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #dfe4ec; border-radius: 6px; font-size: 13px; height: auto; } .ukf__dash { color: #9aa4b2; } .ukf__price-go { padding: 7px 12px; border: 0; border-radius: 6px; background: #0c4da2; color: #fff; font-size: 12px; cursor: pointer; } .ukf__empty { padding: 14px 16px; font-size: 12px; color: #7b8798; } /* длинные списки значений (размеры) показываются частично */ .ukf__chip.is-hidden { display: none; } .ukf__group-body.is-expanded .ukf__chip.is-hidden { display: inline-flex; } .ukf__more { padding: 6px 10px; border: 1px dashed #c9d2df; border-radius: 14px; background: none; color: #0c4da2; font-size: 12px; cursor: pointer; line-height: 1.15; } .ukf__more:hover { border-color: #0c4da2; } /* Числовые значения (плотность, площадь, размер) — ровной сеткой одинаковых чипов: порядок по возрастанию читается только если колонки выровнены. */ .ukf__group.is-open .ukf__group-body--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ukf__group-body--grid .ukf__chip { justify-content: center; padding: 6px 4px; gap: 4px; white-space: nowrap; } .ukf__group-body--grid .ukf__more { grid-column: 1 / -1; justify-self: start; } /* поля «Сторона А / Сторона B» — быстрый поиск по длинному списку размеров */ .ukf__sides { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; max-width: 100%; } .ukf__side { position: relative; flex: 1 1 0; min-width: 0; } /* Селектор с типом обязателен: у темы свои правила для input[type=text], и более слабое `.ukf__sides input` они перебивали — поля держали дефолтные 190px при доступных 240 и вылезали за край сайдбара. */ .ukf__sides .ukf__side input[type="text"] { width: 100%; min-width: 0; padding: 7px 22px 7px 8px; height: auto; border: 1px solid #dfe4ec; border-radius: 6px; font-size: 13px; box-sizing: border-box; } .ukf__side-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #eef1f5; color: #7b8798; font-size: 13px; line-height: 16px; cursor: pointer; } .ukf__side-clear:hover { background: #e2e7ef; color: #c4010c; } .ukf__side.has-value .ukf__side-clear { display: block; } .ukf__sides .ukf__side input[type="text"]:focus { border-color: #0c4da2; outline: none; } .ukf__sides-x { color: #9aa4b2; } /* Скрытие по поиску должно перебивать «показать все» (.is-expanded), иначе при вводе вылезают чипы, не подходящие под введённые стороны. Отсюда парный селектор. */ .ukf__chip.is-filtered-out, .ukf__group-body.is-expanded .ukf__chip.is-filtered-out { display: none; } .ukf__group-body.is-searching .ukf__more { display: none; } .ukf__sides-empty { display: none; grid-column: 1 / -1; font-size: 12px; color: #7b8798; } .ukf__group-body.is-nothing .ukf__sides-empty { display: block; } /* двуручковый слайдер площади: шаги по существующим значениям */ .ukf__slider { grid-column: 1 / -1; position: relative; height: 26px; margin: 2px 0 0; } .ukf__slider-track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: #eef1f5; border-radius: 2px; } .ukf__slider-fill { position: absolute; top: 0; bottom: 0; background: #0c4da2; border-radius: 2px; } .ukf__slider input[type="range"] { position: absolute; left: 0; width: 100%; top: 0; height: 26px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; } .ukf__slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #0c4da2; cursor: pointer; } .ukf__slider input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #0c4da2; cursor: pointer; } .ukf__slider-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 11px; color: #9aa4b2; margin: -2px 0 4px; } /* подразделы в сайдбаре вместо блока больших картинок над каталогом */ .ukf__chip--section { border-color: #d7e0ee; } .ukf__chip--section:hover { border-color: #0c4da2; background: #f5f8fd; } /* Плитки подразделов над каталогом не показываем — их заменила секция «Разделы» в сайдбаре. Компонент при этом продолжает работать: он наполняет текст под каталогом. */ .catalog > .sections { display: none; } /* =================================================================== МОБИЛЬНАЯ ВЕРСИЯ: шапка, бургер-меню, свёрнутый фильтр. 27.08.2026. Только тестовый шаблон prostroy_new (виден по ?tpl=new). =================================================================== */ /* Бургер живёт в верхней панели и существует только на мобильной: на десктопе полоса «Каталог товаров» с выпадающим меню остаётся как была. */ .mxburger { display: none; } .mxdrawer { display: none; } .mxaccount { display: none; } /* Кнопка «…» существует только на мобильной. Специфичность повышена намеренно: у темы есть правило `.rsbreadcrumb li{display:inline}`, и простого `.rsbc-more` не хватало — на десктопе кнопка вылезала и растягивала строку крошек. */ #title .rsbreadcrumb .rsbc-more { display: none; } @media (max-width: 767px) { /* --- верхняя панель: бургер | город | telegram | вход --- */ .tpanel { height: auto; } #tpanel .centering, #tpanel .centeringin { height: auto; } #tpanel .centeringin { display: flex; align-items: center; gap: 10px; min-height: 44px; } /* Подписи у бургера нет намеренно: за ним не только каталог, но и сервисные страницы — слово «Каталог» вводило в заблуждение. */ .mxburger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; background: none; border: 0; cursor: pointer; } .mxburger__ico, .mxburger__ico::before, .mxburger__ico::after { display: block; width: 18px; height: 2px; background: #c4010c; border-radius: 2px; } .mxburger__ico { position: relative; } .mxburger__ico::before, .mxburger__ico::after { content: ""; position: absolute; left: 0; } .mxburger__ico::before { top: -6px; } .mxburger__ico::after { top: 6px; } /* Город прижат к бургеру слева, телеграм и кабинет — к правому краю. Разводит их не space-between, а `margin-left:auto` у города: между городом и иконками лежит ещё из инклуда, и с space-between он получил бы собственную позицию посередине. */ #tpanel .authandlocation { display: flex; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; float: none; height: auto; line-height: 1; } #tpanel .location, #tpanel .location form { display: flex; align-items: center; float: none; padding: 0; height: auto; line-height: 1; } #tpanel .location form { margin: 0; } /* Правым margin:auto город расталкивает себя и иконки по краям панели. ВАЖНО: задавать его надо здесь, после общего сброса — отдельным правилом выше он гасился более поздним `margin: 0` и иконки уезжали влево к городу. */ #tpanel .location { margin: 0 auto 0 0; } /* Подпись «Ваш город:» и служебные поля формы не должны влиять на высоту строки — из-за них кнопка города съезжала вниз относительно бургера. */ #tpanel .location > form > span, #tpanel .location input { display: none; } /* Выбранный город — отдельная кнопка с меткой, а не строчка текста. */ #tpanel .location a { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 25px; border: 1px solid #dfe4ec; border-radius: 15px; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4010c'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat 8px 50% / 11px 11px; color: #23282f; font-size: 13px; line-height: 1; text-decoration: none; } #tpanel .location a .svg-icon { width: 7px; height: 7px; margin: 0; fill: #9aa4b2; } /* Телеграм и кабинет — в одной строке, одинакового кегля, по центру панели. В инклуде auth.php блок обёрнут в , поэтому .authinhead не является прямым ребёнком верхней панели: раскладывать во flex надо каждый уровень, иначе иконки встают друг под друга. Обёртку вокруг них в разметку НЕ добавлять — она ломает раскладку верхней панели на десктопе (проверено 27.08.2026). */ #tpanel .authandlocation > * { flex: 0 0 auto; } #tpanel .authandlocation noindex, #tpanel .authinhead { display: flex; align-items: center; float: none; margin: 0; padding: 0; height: auto; line-height: 1; } #tpanel .header-telegram-icon { display: flex; align-items: center; width: auto; margin: 0; padding: 0; } #tpanel .header-telegram-icon img { display: block; width: 21px !important; height: 21px; } /* Текстовая пара «Вход | Регистрация» на телефоне заменена иконкой кабинета: два слова с разделителем занимали четверть строки. */ #tpanel .authinheadinner { display: none !important; } /* Зазор задан отступом, а не gap: между иконками лежит из инклуда, и gap на нём не отрабатывает. */ .mxaccount { display: flex; align-items: center; margin-left: 14px; } .mxaccount .svg-icon { display: block; width: 19px; height: 19px; fill: #5a6472; } /* информационное меню верхней панели переехало внутрь бургера */ #tpanel .tpanel_menu { display: none !important; } /* --- строка логотипа: логотип слева, телефоны справа --- Тема раскладывала эту строку блоками .column1 с жёсткими height:50px и line-height, из-за чего телефоны налезали на «Избранное» и «Мою корзину». Здесь строка переведена во flex и высота считается по содержимому. */ #header .centering:first-child .centeringin { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; } #header .column1 { width: auto; height: auto; float: none; line-height: 1.3; text-align: left; padding: 0; } #header .column1 .column1inner { display: block; line-height: 1.3; vertical-align: baseline; } #header .logo { flex: 0 0 auto; width: 148px; } #header .logo a img { float: none; width: 100%; height: auto; } #header .phone { flex: 1 1 auto; text-align: right; } #header .phone .svg-icon { display: none; } #header .phone .block_tel a { display: block; font-size: 15px; line-height: 1.35; white-space: nowrap; } #header .phone .block_tel span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; color: #7b8798; } /* «Избранное» и «Моя корзина» продублированы нижней фиксированной панелью (#rs_easycart со счётчиками), а в шапке занимали целую строку. */ #header .favorite, #header .basket, #header .callback { display: none !important; } /* --- строка поиска --- */ #header .b-mmenu { margin: 0 0 10px; } /* полоса «Каталог товаров» с бургером — бургер переехал в верхнюю панель */ .b-mmenu .catalogmenusmall { display: none !important; } /* Тема раскладывает строку поиска флоатами под десктопные ширины: на телефоне поле уезжало из рамки и вставало отдельной строкой. Здесь — обычный flex. */ #header .searchinhead { display: flex; align-items: center; min-height: 44px; margin: 0; border: 1px solid #dfe4ec; border-radius: 6px; background: #fff; overflow: hidden; } #header .searchinhead form { display: flex; align-items: center; width: 100%; } #header .searchinhead .enter { order: 0; flex: 0 0 auto; float: none; padding: 0 10px 0 12px; } #header .searchinhead .aroundtext { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; } #header .searchinhead .zoom { order: 2; flex: 0 0 auto; float: none; padding: 0 12px 0 10px; } #header .searchinhead .svg-icon { display: block; } #header .searchinhead .aroundtext .text { width: 100%; box-sizing: border-box; padding: 12px 0; border: 0; background: none; font-size: 14px; line-height: 1.3; /* Тема ставит полям outline-style:auto — Chrome рисует такую рамку всегда, а не только по фокусу, и вокруг поля висел оранжевый прямоугольник. */ outline: none; } #header .searchinhead:focus-within { border-color: #EE8131; } /* --- выдвижное меню --- */ .mxdrawer { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10050; } .mxdrawer[hidden] { display: none; } .mxdrawer__ovl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 20, 28, .45); opacity: 0; transition: opacity .2s; } .mxdrawer.is-open .mxdrawer__ovl { opacity: 1; } .mxdrawer__panel { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 86%; max-width: 340px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .25); transform: translateX(-100%); transition: transform .22s ease; } .mxdrawer.is-open .mxdrawer__panel { transform: none; } .mxdrawer__head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 13px 16px; border-bottom: 1px solid #eef1f5; } .mxdrawer__title { font-size: 15px; font-weight: 600; color: #23282f; } .mxdrawer__close { padding: 0 4px; border: 0; background: none; font-size: 26px; line-height: 1; color: #9aa4b2; cursor: pointer; } .mxdrawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Список разделов перенесён из .catalogmenusmall, у него остались классы темы — сбрасываем всё, что тема задавала для выпадашки. */ .mxdrawer__list { position: static !important; display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none; background: #fff !important; border: 0 !important; box-shadow: none !important; } .mxdrawer__list li { float: none !important; width: auto !important; border-bottom: 1px solid #f2f4f7; background: none !important; } .mxdrawer__list a { display: block !important; padding: 13px 16px !important; font-size: 14px; line-height: 1.3; color: #23282f; text-decoration: none; } .mxdrawer__list a.selected { color: #c4010c; font-weight: 600; } .mxdrawer__panel, .mxdrawer__list, .mxdrawer__info { text-align: left; } .mxdrawer__info { padding: 6px 0 28px; background: #f7f9fc; } .mxdrawer__info .tpanel_menu { display: block !important; height: auto !important; overflow: visible !important; } .mxdrawer__info .tpanel_menu a { display: block; float: none; margin: 0; padding: 11px 16px; font-size: 13px; line-height: 1.3; color: #4a5462; text-align: left; text-transform: none; text-decoration: none; } html.mx-drawer-open, html.mx-drawer-open body { overflow: hidden; } /* Виджеты обратного звонка и чата сидят на z-index 2147483647 — перебить их нельзя, поэтому на время открытой шторки они и нижняя панель просто убираются. */ html.mx-drawer-open #rs_easycart, html.mx-drawer-open .ws-chat-btn-el-container, html.mx-drawer-open .ws-chat-container, html.mx-drawer-open .callbackkiller { display: none !important; } } /* =================================================================== Фильтр на мобильной: по умолчанию свёрнут в одну строку. =================================================================== */ .ukf__head-arrow { display: none; } .ukf__switch { display: none; } .ukf__apply { display: none; } @media (max-width: 991px) { /* Свёрнутой панель прячет только фасеты. Группа «Разделы» остаётся видимой всегда: плитки подразделов над каталогом скрыты ещё на этапе 1.2, и внутри свёрнутого фильтра ссылки на подразделы пропали бы со страницы совсем. */ .ukf { display: flex; flex-direction: column; } .ukf__head { order: 1; cursor: pointer; user-select: none; background: #f7f9fc; } .ukf__chosen { order: 2; } .ukf__group { order: 3; } .ukf__empty { order: 4; } .ukf__apply { order: 5; } /* Стрелка сама по себе не читалась как «тут можно развернуть», поэтому справа в строке стоит кнопка со словом: «Фильтр» / «Свернуть». */ .ukf__head { align-items: center; gap: 7px; padding: 11px 12px 11px 16px; } .ukf__title { font-size: 15px; } .ukf__found::before { content: "· "; } .ukf__switch { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 11px; border: 1px solid #0c4da2; border-radius: 16px; color: #0c4da2; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; } .ukf__head-arrow { display: block; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid #0c4da2; border-bottom: 1.5px solid #0c4da2; transform: rotate(45deg); transition: transform .15s; } .ukf.is-open .ukf__head-arrow { margin-top: 3px; transform: rotate(-135deg); } /* «Выбрано» занимало три строки: подпись, чипы, сброс. На телефоне это верхняя треть экрана — сжато в одну строку, подпись убрана (чипы с крестиком и так читаются как выбранное). */ .ukf__chosen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 16px; } .ukf__chosen-title { display: none; } .ukf__reset { margin-top: 0; } .ukf:not(.is-open) .ukf__group:not(.ukf__group--sections), .ukf:not(.is-open) .ukf__empty { display: none; } .ukf.is-open .ukf__apply { display: block; } .ukf__apply { width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid #eef1f5; background: #0c4da2; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; } /* Числовые фасеты в две колонки: на 360–390px три чипа «1000х1500» не влезают. */ .ukf__group.is-open .ukf__group-body--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* =================================================================== Строка сортировки в одну линию и сетка товаров 2 в ряд на мобильной. 27.08.2026. =================================================================== */ @media (max-width: 767px) { /* --- сортировка + переключатель вида одной строкой --- Тема раскладывает их флоатами (переключатель float:right, сортировка float:left), и на телефоне они разъезжались на две-три строки. Здесь flex: слева кнопки сортировки, справа переключатель вида. Кнопки сортировки при нехватке ширины прокручиваются по горизонтали, а не переносятся — строка остаётся одной. */ .mix .catalogsorter { display: flex; align-items: center; gap: 6px; padding-left: 0; } .mix .catalogsorter .sortaou { order: 0; flex: 1 1 auto; min-width: 0; float: none; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mix .catalogsorter .sortaou::-webkit-scrollbar { display: none; } .mix .catalogsorter .shortsort { display: flex; align-items: center; float: none; margin: 0; } .mix .catalogsorter .shortsort > .cool { display: flex; align-items: center; } /* подпись «Сортировать:» — на телефоне лишнее слово, кнопки и так очевидны */ .mix .catalogsorter .title { display: none !important; } .mix .catalogsorter .shortsort .drop { display: none; } .mix .catalogsorter .shortsort a { flex: 0 0 auto; float: none; margin: 0 0 0 2px; padding: 6px 6px; font-size: 11px; white-space: nowrap; } .mix .catalogsorter .shortsort .svg-icon { margin-left: 3px; } .mix .catalogsorter .shortsort .cool a:first-of-type { margin-left: 0; } .mix .catalogsorter .template { order: 1; flex: 0 0 auto; display: flex; gap: 2px; float: none; margin: 0; } .mix .catalogsorter .template a { float: none; margin: 0; padding: 6px 5px; } .mix .catalogsorter .clear { display: none; } /* --- витрина: два товара в ряд --- Тема ставит карточкам float + фиксированную высоту 319px, а .inner внутри — position:absolute. При двух колонках такая конструкция цепляется соседями, поэтому список переведён в grid, .inner сделан обычным блоком, высота — по содержимому. Псевдоэлемент .clearfix::after в grid стал бы лишней ячейкой. */ body.adaptive .view_showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* и ::before, и ::after: bootstrap-овский clearfix даёт оба, каждый стал бы ячейкой сетки — из-за ::before первый товар уезжал во вторую колонку. */ body.adaptive .view_showcase::before, body.adaptive .view_showcase::after { content: none; } body.adaptive .view_showcase .js-element, body.adaptive .view_showcase.columns5 .js-element { float: none; width: auto; height: auto; } body.adaptive .view_showcase .js-element .inner { position: static; min-height: 0; height: 100%; border-radius: 4px; } /* Карточка темы рассчитана на широкую колонку: картинке задана высота 170px (при узкой колонке она становится узкой полосой с воздухом по бокам), названию — фиксированные 55px. В двух колонках это давало 300px карточку с пустотами. Картинка масштабируется по ширине, цена прижата к низу — так ряд остаётся ровным независимо от длины названия. */ body.adaptive .view_showcase .js-element .inner { display: flex; flex-direction: column; } body.adaptive .view_showcase .js-element .padd { flex: 0 0 auto; padding: 10px 8px 4px; } body.adaptive .view_showcase .js-element .name { height: auto; min-height: 2.6em; font-size: 12px; line-height: 1.3; } body.adaptive .view_showcase .js-element .pic, body.adaptive .view_showcase .js-element .pic a { height: auto; } body.adaptive .view_showcase .js-element .pic img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; } body.adaptive .view_showcase .js-element .soloprice { margin-top: auto; padding: 6px 8px 10px; text-align: center; } body.adaptive .view_showcase .js-element .price { margin: 0; font-size: 15px; } } /* =================================================================== Хлебные крошки на мобильной: одна строка вместо двух, отступы ужаты. 27.08.2026. =================================================================== */ @media (max-width: 767px) { /* Цепочка не переносится, а прокручивается по горизонтали: обрезать или прятать звенья нельзя — это разметка BreadcrumbList, она должна оставаться видимой. Начало строки («Главная / Каталог») видно всегда, за край уходит последний пункт — он и так продублирован заголовком H1 прямо под крошками. */ #title .rsbreadcrumb { display: flex; flex-wrap: nowrap; align-items: center; margin: 0 0 4px; padding: 5px 0; font-size: 12px; line-height: 1.25; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); } #title .rsbreadcrumb::-webkit-scrollbar { display: none; } #title .rsbreadcrumb li, #title .rsbreadcrumb .rsbc-more { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; } #title .rsbreadcrumb li::after { margin: 0 5px; } /* Распорка в конце строки, чтобы последний пункт не утыкался в затухание. Именно распоркой, а не padding'ом у li:last-child: на карточках товара последний пункт пустой (баг темы — название товара в цепочку не подставляется), и отступ висел бы у невидимого элемента. */ #title .rsbreadcrumb::after { content: ""; flex: 0 0 22px; height: 1px; } /* Начало пути свёрнуто в «…»: конец цепочки — самое полезное, он должен быть виден целиком, а не уезжать за край. Скрытые звенья остаются в DOM (это BreadcrumbList) и разворачиваются по тапу. */ #title .rsbreadcrumb.rsbc-collapsed .rsbc-hidden { display: none; } #title .rsbreadcrumb .rsbc-more__btn { padding: 0 7px; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; color: #7b8798; font-size: 13px; line-height: 18px; cursor: pointer; } #title .rsbreadcrumb .rsbc-more__btn:hover { border-color: #0c4da2; color: #0c4da2; } /* пустой пункт цепочки не должен добавлять разделитель и ширину */ #title .rsbreadcrumb li:empty, #title .rsbreadcrumb li:has(> span[itemprop="name"]:empty) { display: none; } #title .pagetitle { margin: 2px 0 10px; } } /* =================================================================== Строка поиска на десктопе и планшете — тем же видом, что на мобильной. 27.08.2026. Тема раскладывает её флоатами, поле было без оформления, а чёрную рамку вокруг него рисовал `outline-style:auto` (Chrome рисует такую рамку всегда, а не по фокусу — та же грабля, что и в мобильной версии). =================================================================== */ @media (min-width: 768px) { #header .searchinhead { display: flex; align-items: center; min-height: 40px; border: 1px solid #dfe4ec; border-radius: 6px; background: #fff; overflow: hidden; } #header .searchinhead form { display: flex; align-items: center; width: 100%; } #header .searchinhead .enter { order: 0; flex: 0 0 auto; float: none; padding: 0 10px 0 14px; } #header .searchinhead .aroundtext { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; } #header .searchinhead .zoom { order: 2; flex: 0 0 auto; float: none; padding: 0 14px 0 10px; } #header .searchinhead .svg-icon { display: block; } #header .searchinhead .aroundtext .text { width: 100%; box-sizing: border-box; padding: 10px 0; border: 0; background: none; font-size: 14px; line-height: 1.3; outline: none; } #header .searchinhead:focus-within { border-color: #EE8131; } } /* =================================================================== Кнопка «В корзину» в витрине на мобильной. 09.09.2026. Тема держит нижнюю часть карточки (.popup) скрытой и раскрывает её только по :hover. На телефоне наведения нет, поэтому кнопки заказа в списке товаров не видел никто, а с мобильных приходит 61% визитов. Показываем блок всегда, но в урезанном виде: количество, «сравнить» и «избранное» в колонке шириной около 160px не помещаются и не нужны — на карточке товара они остаются на месте. Поле количества скрыто, а не удалено: оно уходит в форму со значением 1, как и на десктопе. =================================================================== */ @media (max-width: 767px) { body.adaptive .view_showcase .js-element .popup { display: block; flex: 0 0 auto; padding: 0 8px 10px; } body.adaptive .view_showcase .js-element .popup .quantity, body.adaptive .view_showcase .js-element .popup .compare_and_stores, body.adaptive .view_showcase .js-element .popup .favorishare { display: none !important; } body.adaptive .view_showcase .js-element .popup .add2basketform { display: flex; align-items: center; gap: 6px; } body.adaptive .view_showcase .js-element .popup .add2basket { flex: 1 1 auto; padding: 9px 6px; font-size: 13px; line-height: 1.2; text-align: center; white-space: nowrap; } body.adaptive .view_showcase .js-element .popup .inbasket { flex: 0 0 auto; } /* Кнопка живёт в форме, а форма — в скрытом раньше блоке: у темы для неё есть float-раскладка под десктоп, здесь она мешает. */ body.adaptive .view_showcase .js-element .popup .buy { float: none; } } /* =================================================================== Блок «Каталог товаров» слева от строки поиска. 09.09.2026. После правки поиска 27.08 поле стало скруглённым и с рамкой, а кнопка каталога рядом осталась серым прямоугольником во всю высоту — на десктопе пара выглядела собранной из двух разных сайтов. Приводим к тому же виду: те же рамка, радиус и высота 40px. Padding кнопки уменьшен на 1px, чтобы добавленная рамка не сделала её на 2px выше строки поиска. =================================================================== */ @media (min-width: 768px) { #header .b-mmenu .catalogmenucolumn .catalogmenu > li.parent { box-sizing: border-box; border: 1px solid #dfe4ec; border-radius: 6px; background: #f3f3f3; } #header .b-mmenu .catalogmenucolumn .catalogmenu > li.parent > a.parent { /* высоту держим строкой, а не паддингами: с рамкой кнопка иначе получается на 1px выше поля поиска и ряд едет. */ padding: 0 12px; line-height: 38px; } #header .b-mmenu .catalogmenucolumn .catalogmenu > li.parent:hover { border-color: #EE8131; } } /* =================================================================== Состояние «идёт пересчёт» для AJAX-фильтра. 09.09.2026. Ответ приходит за 1–2 секунды, и без этого признака клик выглядит как «ничего не произошло»: человек жмёт второй раз по тому же чипу и снимает только что выбранное условие. =================================================================== */ .ukf-prods--busy { opacity: .45; transition: opacity .12s ease; pointer-events: none; } .ukf--busy .ukf__found, .ukf--busy .ukf__apply { opacity: .45; transition: opacity .12s ease; } /* =================================================================== Товар в корзине: состояние карточки и окно после добавления. 09.09.2026. Цвета взяты у темы: кнопка #C4010C, скругление 3px, шрифт наследуется. =================================================================== */ /* --- карточка в витрине: только мобильная, десктоп не трогаем --- */ .mxcart { display: none; } @media (max-width: 767px) { body.adaptive .view_showcase .js-element .buy.mx-has-cart .add2basketform { display: none; } body.adaptive .view_showcase .js-element .buy.mx-has-cart .mxcart { display: block; } .mxcart__label { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; line-height: 1.2; color: #2ea44f; } .mxcart__check { display: block; flex: 0 0 auto; width: 16px; height: 16px; } .mxcart__step { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px; border: 1px solid #C4010C; border-radius: 4px; } .mxcart__btn { flex: 0 0 auto; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 3px; background: #C4010C; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .mxcart__num { flex: 1 1 auto; text-align: center; font-size: 13px; white-space: nowrap; } } /* --- окно «товар добавлен»: и на мобильной, и на десктопе --- */ .mxadded[hidden] { display: none !important; } html.mx-modal-open { overflow: hidden; } .mxadded { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; } .mxadded__back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .45); } .mxadded__win { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 20px 18px 16px; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); /* тема центрирует текст внутри карточек товара, окно это наследовало */ text-align: left; } .mxadded__x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: #8a94a2; font-size: 26px; line-height: 1; cursor: pointer; } .mxadded__x:hover { color: #333; } .mxadded__top { display: flex; gap: 14px; align-items: flex-start; } .mxadded__pic { flex: 0 0 auto; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f5f6f8; overflow: hidden; } .mxadded__pic[hidden] { display: none; } .mxadded__pic img { max-width: 100%; max-height: 100%; } .mxadded__info { flex: 1 1 auto; min-width: 0; padding-right: 26px; } .mxadded__title { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; font-weight: 700; line-height: 1.25; color: #1b2430; } .mxadded__check { display: block; flex: 0 0 auto; margin-top: 1px; width: 23px; height: 23px; } .mxadded__name { margin-top: 8px; font-size: 13px; line-height: 1.35; color: #3a4452; } .mxadded__price { margin-top: 6px; font-size: 18px; font-weight: 700; color: #1b2430; } .mxadded__qty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #f5f6f8; } .mxadded__qty-label { font-size: 14px; color: #3a4452; } .mxadded__step { display: flex; align-items: center; gap: 6px; } .mxadded__btn { width: 38px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: #fff; color: #C4010C; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .mxadded__btn:hover { background: #C4010C; color: #fff; } .mxadded__num { min-width: 26px; text-align: center; font-size: 15px; font-weight: 700; } .mxadded__go { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 16px; border-radius: 8px; background: #C4010C; color: #fff; font-size: 15px; text-decoration: none; } .mxadded__go:hover { background: #910109; color: #fff; text-decoration: none; } .mxadded__more { display: block; width: 100%; height: 46px; margin-top: 8px; border: 1px solid #C4010C; border-radius: 8px; background: #fff; color: #C4010C; font-size: 15px; cursor: pointer; } .mxadded__more:hover { background: #fff5f5; } /* =================================================================== Онлайн-чат Envybox скрыт. 09.09.2026. Клиент подтвердил перепиской: чат у них не подключен, сообщения из него никто не читает, работает только обратный звонок. То есть посетитель писал в пустоту. Вдобавок на мобильной кнопка чата перекрывала кнопки заказа у нижнего ряда товаров — проверено измерением, две карточки из шести. Скрываем ТОЛЬКО чат (.ws-*), обратный звонок (.callbackkiller / .cbk-*) остаётся на месте. Это временная мера: правильное решение — выключить модуль чата в кабинете Envybox, тогда перестанут грузиться и его скрипты (сейчас это три лишних домена на каждой странице). =================================================================== */ .ws-chat, .ws-chat-btn-container, .ws-chat-btn-el-container { display: none !important; } /* =================================================================== Мобильная шапка: логотип наверх, бургер в правый угол. 09.09.2026. Было: верхняя панель с бургером слева и выбором города, а под ней ещё один ряд с логотипом и двумя телефонами текстом — две полосы на экране в 390px. Стало: один ряд «логотип … трубка, телеграм, кабинет, бургер» и строка поиска под ним. Выбор города убран из разметки (поддомены склеены 301, выбирать нечего), телефоны текстом заменены иконкой: номер подставляется по домену и звонится тапом. Десктоп не трогаем — новые элементы скрыты вне медиазапроса. =================================================================== */ .mxlogo, .mxphone { display: none; } @media (max-width: 767px) { .mxlogo { display: block; order: 0; flex: 0 0 auto; width: 116px; margin-right: 10px; } .mxlogo img { display: block; width: 100%; height: auto; } /* Бургер уезжает в правый край порядком, а не переносом в разметке: в DOM он остаётся первым, и клавиатурный обход шапки не меняется. */ #tpanel .centeringin .mxburger { order: 9; margin-left: 12px; } /* Прижимает иконки к правому краю теперь сам блок: раньше это делал город через margin-left:auto, а его больше нет. */ #tpanel .authandlocation { order: 5; flex: 0 0 auto; margin-left: auto; } .mxphone { display: flex; align-items: center; margin-right: 12px; } .mxphone .svg-icon { display: block; width: 21px; height: 21px; fill: #5a6472; } /* Нижний ряд прежней шапки: логотип уехал наверх, телефоны стали иконкой. */ #header .logo, #header .phone { display: none; } /* Ряд, в котором они лежали, остаётся пустой полосой в 24px — схлопываем. Только первый ряд: во втором живут «Каталог товаров» и поиск. */ #header > .centering:first-child { display: none; } #tpanel .centeringin { padding-top: 6px; padding-bottom: 6px; } } /* =================================================================== Баннеры и блок «фичи» на мобильной. 09.09.2026. =================================================================== */ @media (max-width: 767px) { /* --- баннеры: нативная прокрутка с прилипанием вместо Owl --- Разметку в этот режим переводит custom/script.js: он гасит Owl и вешает класс mxsnap. Стрелки Owl на телефоне не нужны — палец есть. */ #owlGoProBanners.mxsnap { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #owlGoProBanners.mxsnap::-webkit-scrollbar { display: none; } #owlGoProBanners.mxsnap > .js-item { flex: 0 0 100%; max-width: 100%; scroll-snap-align: start; } .gopro-banners .owl-nav { display: none !important; } .mxsnap__dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 2px; } .mxsnap__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d3d7de; cursor: pointer; transition: background .15s, transform .15s; } .mxsnap__dot.is-on { background: #C4010C; transform: scale(1.25); } /* --- фичи: пять пунктов в столбик, иконка слева --- Было: сетка по два, пятый пункт болтался один во всю ширину. Иконки нарисованы спрайтом, поэтому размер 44px не трогаем — при масштабировании съедет фон и вылезут соседние картинки. */ .fichi .row { display: flex; flex-direction: column; /* у бутстрапа строка вынесена на -15px и это компенсируется отступами колонок; в один столбец проще снять и то и другое, иначе иконки вылезают за левый край экрана */ margin-left: 0; margin-right: 0; } .fichi .row > div[class*="col-"] { width: 100%; max-width: none; float: none; padding-left: 0; padding-right: 0; } .fichi .row > div[class*="col-"] + div[class*="col-"] { border-top: 1px solid #eceef1; } .fichi__link { display: flex; align-items: center; gap: 14px; /* у темы ссылка inline-block со своей шириной и центрируется родителем — без max-width строка вставала посередине, а не по левому краю */ width: 100%; max-width: none; padding: 6px 0; text-align: left; } .fichi__img { flex: 0 0 44px; margin: 0; } .fichi__name { flex: 1 1 auto; /* тема держит подпись в жёстких 32px с overflow:hidden — в две строки «Быстрая отгрузка и доставка» теряла последнее слово */ height: auto; overflow: visible; font-size: 13px; line-height: 1.3; } } /* =================================================================== ПОДВАЛ, версия 3. 12.09.2026, тестовый контур. Контакты ушли в карточку офиса, здесь только бренд и две колонки ссылок. Разметка своя (.mxft), теминские .block/.contacts больше не используются. =================================================================== */ .footer { background: #1d232b; color: #aeb7c2; margin-top: 0; } /* у темы margin-top: 50px — белая полоса между карточкой офиса и подвалом */ .footer a { color: #dfe4ea; text-decoration: none; } .footer a:hover { color: #fff; text-decoration: none; } .footer .line1, .footer .line2 { border: 0; } .mxft { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding: 40px 0 34px; } .mxft::before, .mxft::after { content: none; } .mxft__logo { display: inline-block; margin-bottom: 14px; } .mxft__logo img { display: block; max-width: 170px; height: auto; filter: brightness(0) invert(1); opacity: .92; } .mxft__about { margin: 0 0 16px; max-width: 320px; font-size: 13px; line-height: 1.5; color: #aeb7c2; } .mxft__vk { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; background: rgba(255,255,255,.07); color: #dfe4ea !important; font-size: 13px; } .mxft__vk:hover { background: rgba(255,255,255,.14); } .mxft__vk svg { width: 20px; height: 20px; color: #7aa7e8; } .mxft__title { margin: 6px 0 14px; color: #8a94a2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .mxft__list { list-style: none; margin: 0; padding: 0; } .mxft__list li { margin: 0 0 9px; padding: 0; line-height: 1.35; } .mxft__list a { font-size: 14px; } .mxft__all { color: #fff !important; } .mxft__bottom { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; line-height: 1.4; color: #78828f; } .mxft__bottom::before, .mxft__bottom::after { content: none; } .mxft__bottom .sitecopy { padding: 0; margin: 0; flex: 1 1 auto; color: #78828f; font-size: 12px; } .mxft__policy { color: #9aa4b1 !important; white-space: nowrap; } .mxft__policy:hover { color: #fff !important; } .mxft__bottom .developercopy { color: #5f6975; font-size: 11px; } .mxft__bottom .developercopy a { color: #7b8593; } /* Тёмная подложка: на мобильной её перебивает правило темы с body.adaptive */ body .footer, body.adaptive .footer, body .footer .line1, body .footer .line2 { background-color: #1d232b; } body .footer .centering, body .footer .centeringin { background: transparent; } @media (max-width: 767px) { .mxft { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 28px 0 24px; } .mxft__brand { grid-column: 1 / -1; } .mxft__logo img { max-width: 140px; } .mxft__about { max-width: none; } .mxft__title { margin: 0 0 10px; font-size: 11px; } .mxft__list li { margin-bottom: 8px; } .mxft__list a { font-size: 13px; } .mxft__bottom { padding: 14px 0 18px; } } /* =================================================================== Предфутер: призыв и карточка салона с картой. 10.09.2026, тест. =================================================================== */ .mxpre { background: #f4f6f8; padding: 34px 0 40px; } .mxpre__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; margin-bottom: 20px; border-radius: 14px; background: #1d232b; color: #fff; } .mxpre__cta-title { font-size: 22px; font-weight: 700; line-height: 1.2; } .mxpre__cta-sub { margin-top: 6px; color: #aeb7c2; font-size: 14px; line-height: 1.4; } .mxpre__cta-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* перенос перед «Расчёт в течение рабочего дня» — только на ПК (перед
пробел) */ .mxpre__cta-br { display: inline; } @media (max-width: 767px) { .mxpre__cta-br { display: none; } } /* В призыве на ПК номер телефона текстом, кнопка «Позвонить» — только на телефоне. 14.09.2026. */ .mxpre__phone { display: inline-flex; align-items: center; margin-right: 8px; color: #fff !important; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-weight: 700; font-size: 22px; white-space: nowrap; text-decoration: none; } .mxpre__phone:hover { color: #fff; } .mxpre__cta-actions .mxpre__btn--call { display: none; } @media (max-width: 767px) { .mxpre__phone { display: none; } .mxpre__cta-actions .mxpre__btn--call { display: inline-flex; } } .mxpre__btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 10px; font-size: 15px; text-decoration: none; white-space: nowrap; } .mxpre__btn--main { background: #C4010C; color: #fff !important; } .mxpre__btn--main:hover { background: #a80009; } .mxpre__btn--ghost { border: 1px solid rgba(255,255,255,.25); color: #fff !important; } .mxpre__btn--ghost:hover { border-color: #fff; } .mxpre__msg { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff !important; font-size: 12px; letter-spacing: .02em; } .mxpre__msg:hover { background: rgba(255,255,255,.2); } .mxpre__salon { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #e6e9ee; } .mxpre__salon-info { padding: 26px 28px; } .mxpre__label { color: #8a94a2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .mxpre__addr { margin: 8px 0 18px; font-size: 24px; font-weight: 700; line-height: 1.25; color: #1b2430; } .mxpre__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .mxpre__fact { padding: 12px 14px; border-radius: 10px; background: #f4f6f8; } .mxpre__fact span { display: block; color: #8a94a2; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .mxpre__fact b { display: block; margin-top: 4px; font-size: 15px; color: #1b2430; } .mxpre__fact i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #7b8593; } .mxpre__route { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; background: #C4010C; color: #fff !important; font-size: 15px; text-decoration: none; } .mxpre__route:hover { background: #a80009; } .mxpre__map { min-height: 300px; } .mxpre__map iframe { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 767px) { .mxpre { padding: 20px 0 24px; } .mxpre__cta { display: block; padding: 18px; margin-bottom: 14px; } .mxpre__cta-title { font-size: 19px; } .mxpre__cta-actions { margin-top: 16px; flex-wrap: wrap; } .mxpre__btn { flex: 1 1 100%; } .mxpre__salon { grid-template-columns: 1fr; } .mxpre__salon-info { padding: 18px; } .mxpre__addr { font-size: 19px; margin-bottom: 14px; } .mxpre__facts { grid-template-columns: 1fr; gap: 8px; } .mxpre__route { width: 100%; justify-content: center; } .mxpre__map { min-height: 220px; order: -1; } } /* Карта картинкой вместо виджета. 10.09.2026. */ .mxpre__map { display: block; overflow: hidden; background: #eef1f4; } .mxpre__map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { /* На телефоне картинка с ПК-версии мелковата — подрезаем и укрупняем. */ .mxpre__map { min-height: 200px; } .mxpre__map img { transform: scale(1.45); transform-origin: 50% 45%; } } /* Кнопка «Каталог товаров» в шапке ПК: три полоски были прижаты к верху (float:right + margin-top:3px при строке 38px). Центрируем по высоте. 14.09.2026. */ .catalogmenucolumn .catalogmenu > li.parent > a.parent { padding-right: 30px; } .catalogmenucolumn .catalogmenu > li.parent > a.parent .svg-icon.menu { float: none; position: absolute; top: 50%; right: 10px; margin: -6px 0 0; } /* =================================================================== Карточка офиса по макету клиента. Переписано 11.09.2026 одним блоком: до этого было пять слоёв правок друг на друге, и мобильная версия разошлась с макетом (иконки, подпись «Мессенджеры», факты в строку). Макет — телефон, поэтому базовые правила = мобильные; десктоп только слегка крупнее. =================================================================== */ .mxpre__salon, .mxpre__salon * { box-sizing: border-box; } .mxpre__salon { display: block; padding: 20px; border: 1px solid #e6e9ee; border-radius: 16px; background: #fff; } /* подпись → адрес → карта плотнее: старое правило .mxpre__addr { margin } гасим */ .mxpre__head { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 10px; } .mxpre__addr { margin: 0; } /* адрес в две строки везде (11.09.2026: на ПК тоже, колонка стала узкой) */ .mxpre__addr-br { display: inline; } /* Настоящий жирный. На странице подключён только регулярный Open Sans (Bitrix UI), жирный везде синтезированный, а тема ещё и переводит в Arial. Файл bold лежит в /bitrix/js/ui/fonts/opensans/ — объявляем его сами; если не загрузится, останется обычный синтезированный жирный. */ @font-face { font-family: 'MxOpenSans'; font-weight: 700; font-style: normal; font-display: swap; src: local('Open Sans Bold'), url('/bitrix/js/ui/fonts/opensans/opensans-bold.woff') format('woff'); } .mxpre__addr, .mxrow__val { font-family: MxOpenSans, Opensans, Arial, sans-serif; font-weight: 700; } .mxpre__addr { font-size: 19px; line-height: 1.3; color: #1b2430; } /* Карта: 14.09.2026 — картинка клиента (1043×627). На ПК map-desktop.jpg по ширине колонки, верх/низ подрезаются под 780×305 (object-fit: cover); на телефоне map-mobile.jpg — фрагмент 640×400 вокруг метки. */ .mxpre__map { display: block; height: auto; min-height: 0; aspect-ratio: 780 / 305; border-radius: 12px; overflow: hidden; background: #eef1f4; } .mxpre__map picture { display: block; height: 100%; overflow: hidden; } .mxpre__map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; } /* кнопки под картой: красная с самолётиком и серая с картой, в одну линию */ .mxpre__acts { display: flex; gap: 10px; margin: 12px 0 14px; } .mxpre__acts .mxpre__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; width: auto; height: auto; min-height: 48px; padding: 6px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; text-decoration: none; text-align: center; line-height: 1.2; white-space: normal; } .mxpre__acts .mxpre__btn svg { flex: 0 0 auto; width: 20px; height: 20px; } .mxpre__acts .mxpre__btn--main { background: #C4010C; color: #fff !important; } .mxpre__acts .mxpre__btn--main:hover { background: #a80009; } .mxpre__acts .mxpre__btn--soft { background: #f1f3f6; color: #1b2430 !important; } .mxpre__acts .mxpre__btn--soft:hover { background: #e7eaef; } /* строки: иконка в кружке, подпись капителью, значение, справа действие */ .mxrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: #f6f7f9; } .mxrow__ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #eceff3; color: #3d4652; } .mxrow__ico svg { width: 20px; height: 20px; } .mxrow__body { flex: 1 1 auto; min-width: 0; overflow: hidden; } .mxrow__label { display: block; color: #8a94a2; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; } .mxrow__val { display: block; margin-top: 2px; font-size: 16px; color: #1b2430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mxrow__val a { color: #1b2430; } .mxrow__val--link a { color: #1b4fd8; } .mxrow__sub { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: #7b8593; } .mxrow__sub a { color: #7b8593; } .mxrow__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 10px; white-space: nowrap; background: #fdeaea; color: #C4010C !important; font-size: 14px; text-decoration: none; } .mxrow__btn svg { flex: 0 0 auto; width: 18px; height: 18px; } .mxrow__btn:hover { background: #f8d9d9; } /* мессенджеры: подпись и мобильный номер слева, кнопки с логотипами справа (14.09.2026: номер +7 985 здесь, стрелки «›» убраны — иначе не помещается) */ .mxrow--msg { flex-wrap: nowrap; } .mxrow__msgs { display: flex; gap: 8px; flex: 0 0 auto; } .mxrow__msg { flex: 0 0 auto; justify-content: center; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid #e3e7ec; color: #1b2430 !important; font-size: 14px; text-decoration: none; white-space: nowrap; } .mxrow__msg:hover { border-color: #c9cfd7; } .mxrow__msg-logo { flex: 0 0 auto; width: 20px; height: 20px; } /* нижняя полоса: три факта в строку с вертикальными разделителями */ .mxfacts { display: flex; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e9ecf1; } .mxfact { flex: 1 1 33%; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; color: #7b8593; font-size: 13px; line-height: 1.3; } .mxfact:first-child { padding-left: 0; } .mxfact:last-child { padding-right: 0; } .mxfact + .mxfact { border-left: 1px solid #e9ecf1; } .mxfact svg { flex: 0 0 auto; width: 26px; height: 26px; } @media (max-width: 767px) { .mxpre__salon { padding: 16px; border-radius: 14px; } .mxpre__addr { font-size: 17px; } .mxpre__map { height: 190px; min-height: 0; aspect-ratio: auto; } /* 14.09.2026: карта клиента, для телефона отдельный фрагмент map-mobile.jpg — без масштабирования */ .mxpre__map img { transform: none; } /* текст кнопок всегда в одну строку: на 390px (iPhone) 12px не влезали и переносились */ .mxpre__acts .mxpre__btn { flex: 1 1 auto; font-size: 12px; padding: 6px 6px; gap: 5px; white-space: nowrap; } .mxpre__acts .mxpre__btn svg { width: 16px; height: 16px; } .mxrow { padding: 10px; gap: 10px; } .mxrow__ico { width: 34px; height: 34px; } .mxrow__ico svg { width: 18px; height: 18px; } .mxrow__val { font-size: 15px; } .mxrow__sub { font-size: 11px; } .mxrow__btn { height: 36px; padding: 0 8px; font-size: 12px; gap: 4px; } .mxrow__btn svg { width: 15px; height: 15px; } /* Мессенджеры на телефоне (14.09.2026, по решению клиента): кружок, подпись с номером, справа три логотипа БЕЗ обводки и фона — так всё помещается в одну строку и стоит по центру. */ .mxrow--msg { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .mxrow--msg .mxrow__body { flex: 1 1 auto; min-width: 0; } .mxrow--msg .mxrow__msgs { flex: 0 0 auto; gap: 4px; } .mxrow__msg { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; justify-content: center; border: 0; background: transparent; } .mxrow__msg-text { display: none; } .mxrow__msg-logo { width: 24px; height: 24px; } .mxfacts { padding-top: 12px; } .mxfact { gap: 5px; padding: 0 6px; font-size: 10px; line-height: 1.25; } .mxfact svg { width: 20px; height: 20px; } .mxfact br { display: none; } /* в разметке перед
стоит пробел — слова не слипаются */ } /* Узкие телефоны (360px): номер и почта не должны обрезаться многоточием — ужимаем значение и кнопку действия ещё на шаг. */ @media (max-width: 380px) { .mxrow__val { font-size: 14px; } .mxrow__btn { padding: 0 7px; gap: 3px; font-size: 11px; } .mxrow__btn svg { width: 14px; height: 14px; } } /* ПК: две колонки сверху (слева подпись, адрес, кнопки столбиком; справа карта), строки контактов сеткой 2×2, факты на всю ширину. Телефон — как был. 11.09.2026. */ @media (min-width: 768px) { .mxpre__salon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* текст ⅓, карта ⅔ */ grid-template-areas: "label map" "head map" "facts map" "acts map" "rows rows"; grid-template-rows: auto auto auto 1fr auto; column-gap: 28px; align-items: start; } .mxpre__label { grid-area: label; } .mxpre__head { grid-area: head; margin: 6px 0 16px; } .mxpre__acts { grid-area: acts; flex-direction: column; margin: 0; align-self: end; } .mxpre__map { grid-area: map; align-self: stretch; height: 100%; aspect-ratio: auto; } /* по высоте левой колонки, картинка снята в её пропорции */ .mxpre__rows { grid-area: rows; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .mxrow { margin-bottom: 0; } /* три факта — столбиком в левой колонке под адресом, без разделителей */ .mxfacts { grid-area: facts; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; border-top: 0; } .mxfact { padding: 0; font-size: 13px; } .mxfact + .mxfact { border-left: 0; } .mxfact br { display: none; } /* кнопки «Позвонить»/«Написать» нужны только на телефоне */ .mxrow__btn { display: none; } } /* Узкие телефоны: кнопки маршрута ужимаем, на ≤380px ставим одна под другой — рядом они не помещаются даже в 11px, а перенос текста внутри кнопки запрещён. */ @media (max-width: 400px) { .mxpre__acts .mxpre__btn { font-size: 11px; padding: 6px 5px; gap: 4px; } .mxpre__acts .mxpre__btn svg { width: 15px; height: 15px; } } @media (max-width: 380px) { .mxpre__acts { flex-direction: column; gap: 8px; } .mxpre__acts .mxpre__btn { font-size: 13px; min-height: 44px; } } /* Телефон на мобильной: «8 (800) … — бесплатно» не влезает рядом с кнопкой «Позвонить» ни на 390, ни тем более на 375/360. Строка режима/телефона/почты становится сеткой: иконка | подпись+значение | кнопка, а третья строка (sub) идёт под кнопкой на всю ширину. 12.09.2026. */ @media (max-width: 767px) { .mxrow:not(.mxrow--msg) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico label btn" "ico val btn" "ico sub sub"; column-gap: 10px; row-gap: 0; /* flex-овый gap иначе становится и вертикальным */ align-items: center; } .mxrow:not(.mxrow--msg) .mxrow__body { display: contents; } .mxrow:not(.mxrow--msg) .mxrow__ico { grid-area: ico; } .mxrow:not(.mxrow--msg) .mxrow__label { grid-area: label; align-self: end; } .mxrow:not(.mxrow--msg) .mxrow__val { grid-area: val; } .mxrow:not(.mxrow--msg) .mxrow__sub { grid-area: sub; white-space: nowrap; } .mxrow:not(.mxrow--msg) .mxrow__btn { grid-area: btn; } } @media (max-width: 380px) { .mxrow--msg { gap: 8px; } .mxrow--msg .mxrow__msgs { gap: 3px; } .mxrow__msg { width: 26px; height: 26px; } .mxrow__msg-logo { width: 22px; height: 22px; } } /* =================================================================== МОБИЛЬНАЯ КАРТОЧКА ТОВАРА. 14.09.2026, тестовый контур. Галерея свайпом с точками вместо ленты миниатюр со стрелками; цена крупно без «Цена…..»; счётчик и «В корзину» в одну строку, «Купить в 1 клик» второй кнопкой; сравнить/избранное чипами; доставка — свёрнутый аккордеон; вкладки — спокойные аккордеоны с шевроном; похожие товары — сетка 2 в ряд. Десктоп не трогаем. =================================================================== */ @media (max-width: 767px) { body.adaptive h1.pagetitle { text-transform: none; font-size: 21px; line-height: 1.25; margin: 4px 0 10px; } /* --- галерея --- */ .mxgal { position: relative; margin: 0 0 14px; } .mxgal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 12px; background: #fff; } .mxgal__track::-webkit-scrollbar { display: none; } .mxgal__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; height: 300px; } .mxgal__slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .mxgal__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .mxgal__dot { width: 7px; height: 7px; border-radius: 4px; background: #d5dae1; transition: width .15s; } .mxgal__dot.is-active { width: 20px; background: #C4010C; } .mxgal__count { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 12px; background: rgba(27,36,48,.6); color: #fff; font-size: 12px; pointer-events: none; } body.adaptive .elementdetail.mx-gal-on .pictures .pic, body.adaptive .elementdetail.mx-gal-on .pictures .zoom, body.adaptive .elementdetail.mx-gal-on .pictures .picslider { display: none !important; } /* окно просмотра фото темы (fancybox .rs-gopro-product-gallery) свёрстано под ПК: таблица «большая картинка + вертикальная лента». На телефоне — только картинка по ширине экрана, лента прячется. */ .fancybox-container.rs-gopro-product-gallery .fancygallery table, .fancybox-container.rs-gopro-product-gallery .fancygallery tbody, .fancybox-container.rs-gopro-product-gallery .fancygallery tr, .fancybox-container.rs-gopro-product-gallery .fancygallery td { display: block; width: auto !important; padding: 0; } .fancybox-container.rs-gopro-product-gallery .fancygallery img.genimage, .fancybox-container.rs-gopro-product-gallery .fancygallery td > img { display: block; max-width: 100%; width: auto; height: auto; max-height: 70vh; margin: 0 auto; object-fit: contain; } .fancybox-container.rs-gopro-product-gallery .fancygallery .picslider.vertical { display: none !important; } .fancybox-container.rs-gopro-product-gallery .fancybox-content { max-width: 100vw; overflow: hidden; } /* --- артикул, наличие, цена --- */ body.adaptive .elementdetail .articleandstores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; } body.adaptive .elementdetail .articleandstores .article { order: 2; margin: 0; color: #8a94a2; font-size: 13px; } body.adaptive .elementdetail .articleandstores .stores { order: 1; margin: 0; } body.adaptive .elementdetail .stores > span { display: inline-flex; align-items: center; gap: 6px; color: #7b8593; font-size: 13px; } body.adaptive .elementdetail .stores .genamount { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; background: #f1f3f6; font-size: 13px; text-decoration: none; } body.adaptive .elementdetail .soloprice table, body.adaptive .elementdetail .soloprice tbody, body.adaptive .elementdetail .soloprice tr, body.adaptive .elementdetail .soloprice td { display: block; padding: 0; border: 0; } body.adaptive .elementdetail .soloprice .line .name { display: none; } body.adaptive .elementdetail .soloprice .price.gen { display: block; margin: 0 0 12px; padding: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; color: #1b2430; } /* --- кнопки покупки --- */ body.adaptive .elementdetail .buy { margin: 0; } body.adaptive .elementdetail .buy form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body.adaptive .elementdetail .buy .quantity { flex: 0 0 auto; margin: 0; } body.adaptive .elementdetail .buy .quantitytitle { display: none; } body.adaptive .elementdetail .buy .quantity_inner { display: inline-flex; align-items: center; height: 48px; margin: 0; border: 1px solid #dfe3e8; border-radius: 10px; overflow: hidden; background: #fff; } body.adaptive .elementdetail .buy .quantity_inner .minus, body.adaptive .elementdetail .buy .quantity_inner .plus { display: flex; align-items: center; justify-content: center; width: 40px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: #f6f7f9; color: #1b2430; font-size: 20px; text-decoration: none; } body.adaptive .elementdetail .buy .quantity_inner input.js-quantity { width: 40px; height: 48px; margin: 0; padding: 0; border: 0; outline: none; text-align: center; font-size: 16px; font-weight: 700; color: #1b2430; } body.adaptive .elementdetail .buy .quantity_inner .js-measurename { padding-right: 4px; color: #8a94a2; font-size: 13px; } body.adaptive .elementdetail .buy .add2basket.btn1, body.adaptive .elementdetail .buy .inbasket.btn2 { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin: 0; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; } body.adaptive .elementdetail .buy .add2basket.btn1 { background: #C4010C; color: #fff !important; } /* состояние «в корзине» переключает тема классом .in на форме — не перебиваем */ body.adaptive .elementdetail .buy .add2basketform:not(.in) .inbasket.btn2, body.adaptive .elementdetail .buy .add2basketform.in .add2basket.btn1 { display: none; } body.adaptive .elementdetail .buy .go2basket { flex: 1 1 100%; text-align: center; font-size: 14px; } body.adaptive .elementdetail .buy .buy1click.btn3 { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; height: 46px; margin: 0; padding: 0; border-radius: 10px; border: 1.5px solid #C4010C; background: #fff !important; color: #C4010C !important; font-size: 15px; font-weight: 600; text-decoration: none; } body.adaptive .elementdetail .buy .js-product-subscribe { flex: 1 1 100%; text-align: center; } /* --- сравнить, избранное, дешевле — чипы --- */ body.adaptive .elementdetail .threeblock { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } body.adaptive .elementdetail .threeblock .compare, body.adaptive .elementdetail .threeblock .favoriteandcheaper, body.adaptive .elementdetail .threeblock .favorite, body.adaptive .elementdetail .threeblock .cheaper { display: contents; } body.adaptive .elementdetail .threeblock .compare a, body.adaptive .elementdetail .threeblock .favoriteandcheaper .favorite a, body.adaptive .elementdetail .threeblock .favoriteandcheaper .cheaper a { position: static; margin: 0; padding: 0 12px; border: 0; background: #f1f3f6; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px; background: #f1f3f6; color: #1b2430 !important; font-size: 13px; text-decoration: none; line-height: 1.2; } body.adaptive .elementdetail .threeblock a svg, body.adaptive .elementdetail .threeblock a img, body.adaptive .elementdetail .favoriteandcheaper .cheaper .svg-icon { position: static; width: 16px; height: 16px; margin: 0; flex: 0 0 auto; } body.adaptive .elementdetail .share { display: none; } /* --- доставка: аккордеон (сворачивает JS) --- */ body.adaptive .elementdetail .previewtext { margin: 14px 0 0; padding: 0; border-top: 1px solid #e6e9ee; font-size: 14px; line-height: 1.45; } body.adaptive .elementdetail .previewtext > b:first-child { display: none; } .mxacc__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin: 0; font-size: 16px; font-weight: 700; color: #1b2430; cursor: pointer; } .mxacc__head::after, body.adaptive .detailtabs .contents .content > a.switcher::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid #8a94a2; border-bottom: 2px solid #8a94a2; transform: rotate(45deg); transition: transform .15s; flex: 0 0 auto; } .mxacc.is-open .mxacc__head::after { transform: rotate(-135deg); } .mxacc__body { display: none; padding: 0 0 14px; color: #3d4652; } .mxacc.is-open .mxacc__body { display: block; } .mxacc__body br + br { display: none; } /* перелинковка «Смотрите также»: свёрнута, плашки компактнее */ body.adaptive .mxseek { margin: 10px 0 0; border-top: 1px solid #e6e9ee; border-bottom: 1px solid #e6e9ee; } body.adaptive .mxseek .catalog-seek { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; } body.adaptive .mxseek .catalog-seek__link { margin: 0; padding: 5px 10px; font-size: 13px; line-height: 1.2; border: 1px solid #e6e9ee; border-radius: 8px; color: #3d4652; text-decoration: none; } body.adaptive .elementdetail .previewtext .go2detailfrompreview { display: inline-block; margin-top: 6px; } /* --- вкладки как аккордеоны --- */ body.adaptive .detailtabs { margin-top: 0; } body.adaptive .detailtabs .headers { display: none !important; } body.adaptive .detailtabs .contents .content { margin: 0; padding: 0; border: 0; } body.adaptive .detailtabs .contents .content > a.switcher, body.adaptive .detailtabs .content.selected .switcher { display: flex !important; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; border: 0; border-top: 1px solid #e6e9ee; border-radius: 0; background: transparent !important; color: #1b2430 !important; font-size: 16px; font-weight: 700; text-decoration: none; } body.adaptive .detailtabs .content.selected > a.switcher::after { transform: rotate(-135deg); } body.adaptive .detailtabs .contents .contentbody { padding: 0 0 14px; margin: 0; font-size: 14px; line-height: 1.5; } body.adaptive .detailtabs .contents .contentbody ul { padding-left: 18px; } body.adaptive .groupedprops { width: 100%; border-collapse: collapse; } body.adaptive .groupedprops td { display: table-cell; padding: 9px 0; border-bottom: 1px solid #eef1f4; vertical-align: top; font-size: 14px; } body.adaptive .groupedprops td:first-child { width: 45%; color: #7b8593; padding-right: 10px; } body.adaptive .groupedprops .line { display: none; } body.adaptive .groupedprops .val { font-weight: 600; color: #1b2430; } /* --- похожие товары: 2 в ряд --- */ body.adaptive h3.title2 { font-size: 18px; margin: 20px 0 12px; } body.adaptive .light.clearfix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.adaptive .light.clearfix::before, body.adaptive .light.clearfix::after { content: none; } /* телефон: сетка 2 в ряд — показываем 4 похожих, пятый не висит один (17.09.2026); на ПК по-прежнему 5 */ body.adaptive .light.clearfix > .js-element:nth-child(n+5) { display: none; } body.adaptive .light > .js-element { float: none; width: auto; min-width: 0; margin: 0; padding: 10px; display: flex; flex-direction: column; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; } body.adaptive .light > .js-element .pic { order: 1; width: auto; max-width: 100%; height: auto; margin: 0 0 8px; } body.adaptive .light > .js-element .pic a { display: block; width: auto; height: auto; } body.adaptive .light > .js-element .pic img { display: block; width: 100%; max-width: 100%; height: 140px; object-fit: contain; } body.adaptive .light > .js-element .name { order: 2; height: auto; margin: 0 0 6px; text-align: left; font-size: 13px; line-height: 1.3; } body.adaptive .light > .js-element .name a { color: #1b2430; } body.adaptive .light > .js-element .prices { order: 3; margin: auto 0 8px; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 16px; font-weight: 700; color: #1b2430; } body.adaptive .light > .js-element > noindex { order: 4; display: block; margin: 0; } body.adaptive .light > .js-element .buy { margin: 0; } body.adaptive .light > .js-element .buy .add2basket, body.adaptive .light > .js-element .buy .add2basketform.in .inbasket { display: flex; align-items: center; justify-content: center; float: none; width: 100%; height: 38px; margin: 0; padding: 0; border-radius: 9px; font-size: 13px; text-decoration: none; box-sizing: border-box; } body.adaptive .light > .js-element .buy .add2basketform:not(.in) .inbasket, body.adaptive .light > .js-element .buy .add2basketform.in .add2basket { display: none; } body.adaptive .light > .js-element .buy .btn3 { display: none; } body.adaptive .mods .catalogsorter { display: none; } } /* =================================================================== КАРТОЧКА ТОВАРА, ПК. 15.09.2026, тестовый контур. Правая колонка — панель покупки: цена крупно без «Цена…..», наличие чипом, счётчик + «В корзину» + «Купить в 1 клик» в одну строку, чипы сравнить/избранное/дешевле, доставка отдельной плашкой. Вкладки — подчёркиванием вместо красных плашек, дубль заголовка внутри вкладки скрыт. =================================================================== */ @media (min-width: 768px) { /* ПК: перелинковка под описанием скрыта (17.09.2026, решение Дениса — места много, пользы для конверсии нет) */ .detailtabs .catalog-seek, .catalog-seek { display: none; } h1.pagetitle { text-transform: none; font-size: 26px; line-height: 1.25; margin: 6px 0 18px; } /* одно фото — лента из одной миниатюры скрыта (класс ставит JS) */ .elementdetail.mx-one-photo .pictures .picslider.horizontal { display: none !important; } /* фото: подпись про лупу тише */ .elementdetail .pictures .zoom { color: #8a94a2; font-size: 12px; } .elementdetail .pictures .picslider.horizontal { margin-top: 10px; } /* панель покупки */ .elementdetail .detail-product__info { box-sizing: border-box; max-width: 620px; padding: 22px 24px 20px; border: 1px solid #e6e9ee; border-radius: 16px; background: #fff; } .elementdetail .detail-product__info .articleandstores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 10px; } .elementdetail .detail-product__info .articleandstores .article { order: 2; margin: 0; color: #8a94a2; font-size: 13px; } .elementdetail .detail-product__info .articleandstores .stores { order: 1; margin: 0; } .elementdetail .detail-product__info .stores > span { display: inline-flex; align-items: center; gap: 6px; color: #7b8593; font-size: 13px; } .elementdetail .detail-product__info .stores .genamount { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 13px; background: #f1f3f6; font-size: 13px; text-decoration: none; } .elementdetail .detail-product__info .soloprice { margin: 0 0 16px; } .elementdetail .detail-product__info .soloprice table, .elementdetail .detail-product__info .soloprice tbody, .elementdetail .detail-product__info .soloprice tr, .elementdetail .detail-product__info .soloprice td { display: block; padding: 0; border: 0; } .elementdetail .detail-product__info .soloprice .line .name { display: none; } .elementdetail .detail-product__info .soloprice .price.gen { display: block; margin: 0; padding: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.1; color: #1b2430; } .elementdetail .detail-product__info .buy { margin: 0; } .elementdetail .detail-product__info .buy form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .elementdetail .detail-product__info .buy .quantity { flex: 0 0 auto; margin: 0; } .elementdetail .detail-product__info .buy .quantitytitle { display: none; } .elementdetail .detail-product__info .buy .quantity_inner { display: inline-flex; align-items: center; height: 48px; margin: 0; border: 1px solid #dfe3e8; border-radius: 10px; overflow: hidden; background: #fff; } .elementdetail .detail-product__info .buy .quantity_inner .minus, .elementdetail .detail-product__info .buy .quantity_inner .plus { display: flex; align-items: center; justify-content: center; width: 42px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: #f6f7f9; color: #1b2430; font-size: 20px; text-decoration: none; cursor: pointer; } .elementdetail .detail-product__info .buy .quantity_inner input.js-quantity { width: 44px; height: 48px; margin: 0; padding: 0; border: 0; outline: none; text-align: center; font-size: 16px; font-weight: 700; color: #1b2430; } .elementdetail .detail-product__info .buy .quantity_inner .js-measurename { padding-right: 6px; color: #8a94a2; font-size: 13px; } .elementdetail .detail-product__info .buy .add2basket.btn1, .elementdetail .detail-product__info .buy .add2basketform.in .inbasket.btn2 { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin: 0; padding: 0 26px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; } .elementdetail .detail-product__info .buy .add2basket.btn1 { background: #C4010C; color: #fff !important; } .elementdetail .detail-product__info .buy .add2basket.btn1:hover { background: #a80009; } .elementdetail .detail-product__info .buy .add2basketform:not(.in) .inbasket.btn2, .elementdetail .detail-product__info .buy .add2basketform.in .add2basket.btn1 { display: none; } .elementdetail .detail-product__info .buy .buy1click.btn3 { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 48px; margin: 0; padding: 0 22px; border-radius: 10px; border: 1.5px solid #C4010C; background: #fff !important; color: #C4010C !important; font-size: 15px; font-weight: 600; text-decoration: none; } .elementdetail .detail-product__info .buy .buy1click.btn3:hover { background: #fdeaea !important; } .elementdetail .detail-product__info .threeblock { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .elementdetail .detail-product__info .threeblock .compare, .elementdetail .detail-product__info .threeblock .favoriteandcheaper, .elementdetail .detail-product__info .threeblock .favorite, .elementdetail .detail-product__info .threeblock .cheaper { display: contents; } .elementdetail .detail-product__info .threeblock .compare a, .elementdetail .detail-product__info .threeblock .favoriteandcheaper .favorite a, .elementdetail .detail-product__info .threeblock .favoriteandcheaper .cheaper a { position: static; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 18px; background: #f1f3f6; color: #1b2430 !important; font-size: 13px; text-decoration: none; line-height: 1.2; } .elementdetail .detail-product__info .threeblock a:hover { background: #e7eaef; } .elementdetail .detail-product__info .threeblock a svg, .elementdetail .detail-product__info .threeblock a img, .elementdetail .detail-product__info .favoriteandcheaper .cheaper .svg-icon { position: static; width: 16px; height: 16px; margin: 0; flex: 0 0 auto; } .elementdetail .detail-product__info .share { margin: 14px 0 0; } .elementdetail .detail-product__info .share .ya-share2__item_service_facebook { display: none; } /* доставка — плашка внизу панели */ .elementdetail .detail-product__info .previewtext { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; background: #f6f7f9; font-size: 13px; line-height: 1.5; color: #3d4652; } .elementdetail .detail-product__info .previewtext > b:first-child { display: block; margin-bottom: 4px; font-size: 14px; color: #1b2430; } .elementdetail .detail-product__info .previewtext br + br { display: none; } .elementdetail .detail-product__info .previewtext .go2detailfrompreview { display: inline-block; margin-top: 6px; } /* вкладки: подчёркивание вместо красных плашек */ .detailtabs { margin-top: 30px; } .detailtabs .headers { display: flex; gap: 0; margin: 0; padding: 0; border-bottom: 1px solid #e6e9ee; background: transparent; } .detailtabs .headers a.switcher, .detailtabs .headers a.switcher.selected { display: inline-flex; align-items: center; height: 44px; margin: 0 28px -1px 0; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent !important; color: #5a6472 !important; font-size: 15px; font-weight: 600; text-decoration: none; } .detailtabs .headers a.switcher:hover { color: #1b2430 !important; } .detailtabs .headers a.switcher.selected { color: #1b2430 !important; border-bottom-color: #C4010C; } .detailtabs .contents .content > a.switcher { display: none !important; } .detailtabs .contents .contentbody { padding: 22px 0 0; font-size: 15px; line-height: 1.55; } .groupedprops { width: 60%; min-width: 480px; border-collapse: collapse; } .groupedprops td { padding: 8px 24px 8px 0; border-bottom: 1px solid #eef1f4; vertical-align: top; } .groupedprops td:first-child { color: #7b8593; } .groupedprops .line { display: none; } .groupedprops .val { font-weight: 600; color: #1b2430; } } /* Окно «Наличие» по складам убрано (15.09.2026, решение клиента): складской учёт выключен, остатки по складам не ведутся, окно показывало «Нет» при общем остатке 11. «Есть/Мало/Нет» остаётся текстом без клика и стрелки. */ .elementdetail .stores .genamount { pointer-events: none; cursor: default; } .elementdetail .stores .genamount svg { display: none !important; } .elementdetail .stores .popupstores { display: none !important; } /* Карточка товара, состояние «в корзине» (16.09.2026): вместо кнопки темы «В корзине» — счётчик как в витрине (.mxcart из custom/script.js), минус на единице убирает товар. Обе ширины экрана. */ .elementdetail .buy.mx-has-cart .add2basketform .quantity, .elementdetail .buy.mx-has-cart .add2basketform .inbasket.btn2, .elementdetail .buy.mx-has-cart .add2basketform .add2basket.btn1 { display: none !important; } .elementdetail .buy .mxcart { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 420px; min-height: 48px; padding: 4px 6px 4px 14px; margin: 0 0 10px; border-radius: 10px; background: #eaf7ec; box-sizing: border-box; } .elementdetail .buy .mxcart__label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1a8f3c; } .elementdetail .buy .mxcart__check { width: 18px; height: 18px; } .elementdetail .buy .mxcart__step { display: inline-flex; align-items: center; gap: 4px; border: 0 !important; background: transparent !important; padding: 0 !important; } .elementdetail .buy .mxcart__btn { width: 40px; height: 40px; border: 0; border-radius: 8px; background: #fff; color: #1b2430; font-size: 20px; line-height: 1; cursor: pointer; } .elementdetail .buy .mxcart__num { min-width: 64px; text-align: center; font-size: 15px; font-weight: 700; color: #1b2430; } .elementdetail .buy.mx-has-cart .go2basket { flex: 1 1 100%; margin: 0 0 6px; text-align: left; font-size: 14px; } @media (max-width: 767px) { .elementdetail .buy .mxcart { max-width: none; } .elementdetail .buy.mx-has-cart .go2basket { text-align: center; } } /* Правки по замечаниям Дениса 16.09.2026 (телефон) */ @media (max-width: 767px) { /* ссылка «Перейти в корзину» в карточке лишняя — корзина есть в нижней панели */ body.adaptive .elementdetail .buy .go2basket { display: none !important; } /* блок наличие + артикул + цена компактнее: слово «Наличие» убрано, чип и артикул в одну строку */ body.adaptive .elementdetail .articleandstores { gap: 6px 12px; margin: 0 0 4px; } body.adaptive .elementdetail .stores > span { font-size: 0; gap: 0; } body.adaptive .elementdetail .stores .genamount { font-size: 13px; height: 24px; padding: 0 9px; } body.adaptive .elementdetail .articleandstores .article { font-size: 12px; } body.adaptive .elementdetail .articleandstores .article, body.adaptive .elementdetail .articleandstores .stores { flex: 0 0 auto; width: auto; float: none; } body.adaptive .elementdetail .soloprice { margin: 0; } body.adaptive .elementdetail .soloprice .price.gen { margin: 4px 0 10px; font-size: 26px; } /* нижняя фиксированная панель темы: 40px мало для пальца — 56px */ body.adaptive #rs_easycart .rsec_headers, body.adaptive #rs_easycart .rsec_in, body.adaptive #rs_easycart .rsec_body { height: 56px !important; line-height: 56px !important; } body.adaptive #rs_easycart .rsec_body svg { width: 26px; height: 26px; vertical-align: middle; } /* тема задаёт .rsec_in ширину скриптом (411px при экране 390) — корзина уезжала за край */ body.adaptive #rs_easycart, body.adaptive #rs_easycart .rsec_headers, body.adaptive #rs_easycart .rsec_headers .rsec_in { width: 100% !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; margin: 0 !important; box-sizing: border-box; } body.adaptive #rs_easycart .rsec_headers .rsec_body > * { width: auto !important; } body.adaptive #rs_easycart .rsec_headers .rsec_body { display: flex !important; width: 100%; } body.adaptive #rs_easycart .rsec_headers .rsec_body > * { flex: 1 1 0; min-width: 0; } /* панель: счётчики переносились под панель (узкий пункт,   + span) — в одну строку */ body.adaptive #rs_easycart .rsec_headers .rsec_orlink > a, body.adaptive #rs_easycart .rsec_headers .rsec_body > * > a { display: inline-flex !important; align-items: center; justify-content: center; gap: 3px; width: 100%; white-space: nowrap; } body.adaptive #rs_easycart .rsec_headers .rsec_cnt { display: inline-block; font-size: 13px; font-weight: 700; line-height: 1; } /* «Помощь» (знак вопроса) — без функции, убрана */ body.adaptive #rs_easycart .rsec_headers .rsec_online { display: none !important; } /* кнопка обратного звонка Envybox: сам якорь фиксируем над панелью в правом углу (внутренние части виджета не трогаем — иначе разъезжаются); на первом экране скрыта */ body.adaptive a.callbackkiller.cbk-phone { display: none !important; } .mxcall { position: fixed; right: 12px; bottom: 70px; z-index: 2000000001; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #22a44a; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; } .mxcall svg { width: 26px; height: 26px; } html.mx-scrolled .mxcall { opacity: 1; transform: none; pointer-events: auto; } html.mx-drawer-open .mxcall { display: none; } body.adaptive:has(#rs_easycart.addbodypadding) { padding-bottom: 56px !important; } } /* Телефон: наличие + артикул + цена в одну строку (обёртку .mxtop ставит JS). 16.09.2026 */ @media (max-width: 767px) { .mxtop { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; } .mxtop .articleandstores { margin: 0 !important; flex: 1 1 auto; } .mxtop [itemprop="offers"] { flex: 0 0 auto; margin-left: auto; } body.adaptive .elementdetail .mxtop .soloprice .price.gen { margin: 0; font-size: 24px; line-height: 1.15; height: auto; white-space: nowrap; } body.adaptive .elementdetail .mxtop .soloprice table, body.adaptive .elementdetail .mxtop .soloprice tbody, body.adaptive .elementdetail .mxtop .soloprice tr, body.adaptive .elementdetail .mxtop .soloprice td { display: block; height: auto !important; line-height: normal; } body.adaptive .elementdetail .mxtop .soloprice::before, body.adaptive .elementdetail .mxtop .soloprice::after, body.adaptive .elementdetail .mxtop [itemprop="offers"]::before, body.adaptive .elementdetail .mxtop [itemprop="offers"]::after { display: none !important; content: none !important; } body.adaptive .elementdetail .mxtop .soloprice, body.adaptive .elementdetail .mxtop [itemprop="offers"] { min-height: 0 !important; height: auto !important; } body.adaptive .elementdetail .mxtop .soloprice td:first-child { display: none; } body.adaptive .elementdetail .mxtop .soloprice, body.adaptive .elementdetail .mxtop .soloprice table, body.adaptive .elementdetail .mxtop .soloprice td { margin: 0 !important; padding: 0 !important; border: 0 !important; } body.adaptive .elementdetail .mxtop .articleandstores { border: 0 !important; padding: 0 !important; } } /* Телефон: «Нашли дешевле? Снизим цену!» — мелкой ссылкой под ценой, справа (переносит JS). 16.09.2026 */ @media (max-width: 767px) { .mxtop [itemprop="offers"] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } body.adaptive .elementdetail .mxtop .cheaper { display: block; } body.adaptive .elementdetail .mxtop .cheaper a { display: inline-flex; align-items: center; gap: 4px; height: auto; padding: 0; margin: 0; background: transparent !important; color: #1b4fd8 !important; font-size: 12px; line-height: 1.2; border-bottom: 1px dashed rgba(27,79,216,.5); border-radius: 0; text-decoration: none; } /* короткий текст: полная фраза не помещается в строку с чипом и артикулом */ body.adaptive .elementdetail .mxtop .cheaper a { font-size: 0; } body.adaptive .elementdetail .mxtop .cheaper a::after { content: "Нашли дешевле? Снизим цену"; font-size: 12px; } body.adaptive .elementdetail .mxtop .cheaper a svg { display: none; } @media (max-width: 400px) { body.adaptive .elementdetail .mxtop .cheaper a::after { content: "Нашли дешевле?"; } } } /* Телефон, 16.09.2026: карточка как у крупных магазинов — фото первым, заголовок под ним, избранное/сравнение иконками на фото; строка поиска в шапке спрятана за лупу. */ @media (max-width: 767px) { html.mx-search-hidden:not(.mx-search-open) #header.header { display: none !important; } .mxsearchbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 6px; border: 0; background: transparent; color: #5a6472; padding: 0; cursor: pointer; } .mxsearchbtn svg { width: 22px; height: 22px; } html.mx-search-open .mxsearchbtn { color: #C4010C; } body.adaptive h1.pagetitle.mx-h1-moved { margin: 14px 0 10px; font-size: 19px; } .mxgal__count { right: auto; left: 10px; } .mxgal__acts { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 8px; z-index: 2; } body.adaptive .elementdetail .mxgal__acts a.mxgal__act { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(27,36,48,.15); color: #3d4652 !important; font-size: 0; text-decoration: none; } body.adaptive .elementdetail .mxgal__acts a.mxgal__act svg { position: static; width: 20px; height: 20px; margin: 0; } body.adaptive .elementdetail .mxgal__acts a.mxgal__act.added, body.adaptive .elementdetail .mxgal__acts a.mxgal__act.selected, body.adaptive .elementdetail .mxgal__acts a.mxgal__act.active { color: #C4010C !important; } body.adaptive .elementdetail .threeblock.mx-empty { display: none; } } /* Телефон, 16.09.2026, вариант «А»: цена первой строкой (слева) + «Нашли дешевле?» справа, под ней мелкая строка: зелёная точка «В наличии» · «Артикул 249». */ @media (max-width: 767px) { .mxtop { flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid #eef1f4; } .mxtop [itemprop="offers"] { order: 1; flex-direction: row; align-items: baseline; justify-content: space-between; margin: 0; } body.adaptive .elementdetail .mxtop .soloprice .price.gen { font-size: 28px; } } /* Телефон, 17.09.2026: артикул + наличие — полоской над фото (референс dveri-tut): артикул слева, наличие справа */ @media (max-width: 767px) { body.adaptive .elementdetail .articleandstores.mxmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: nowrap; margin: 0 0 12px; padding: 0 0 10px; border: 0; border-bottom: 1px solid #eef1f4; font-size: 13px; color: #7b8593; } /* clearfix-псевдоэлементы темы становятся flex-элементами и сбивают space-between */ body.adaptive .elementdetail .mxmeta::before, body.adaptive .elementdetail .mxmeta::after { display: none !important; content: none !important; } body.adaptive .elementdetail .mxmeta .article { order: 1; margin: 0; font-size: 13px; color: #7b8593; } body.adaptive .elementdetail .mxmeta .article .offer_article { color: #1b2430; font-weight: 700; } body.adaptive .elementdetail .mxmeta .stores { order: 2; margin: 0; } body.adaptive .elementdetail .mxmeta .stores .genamount { height: auto; padding: 0; border-radius: 0; background: transparent; font-size: 13px; color: #1a8f3c; gap: 6px; } body.adaptive .elementdetail .mxmeta .stores .genamount::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22a44a; flex: 0 0 auto; } body.adaptive .elementdetail .mxmeta .stores .genamount span[style*="ff0000"] { color: #c26a00 !important; } body.adaptive .elementdetail .mxmeta .stores .genamount span[style*="ff0000"]::before { background: #e39a2e; } } /* Акционные товары (16.09.2026): тема показывает строки «Старая цена» и «Скидка» только при действующем правиле корзины (140 активных). Наши правила их не прячут: старая цена зачёркнута серым, скидка — «Экономия N руб.» зелёным. Подписи-ячейки слева скрыты. */ .elementdetail .soloprice tr.hideifzero td { display: block; padding: 0; } .elementdetail .soloprice tr.hideifzero td:first-child { display: none; } .elementdetail .soloprice .price.old { display: inline-block; margin: 2px 8px 0 0; font-size: 15px; color: #8a94a2; text-decoration: line-through; font-weight: 400; } .elementdetail .soloprice .discount { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #1a8f3c; } .elementdetail .soloprice .discount::before { content: "Экономия "; } @media (max-width: 767px) { .mxtop [itemprop="offers"] { flex-wrap: wrap; } body.adaptive .elementdetail .mxtop .soloprice tr.hideifzero { display: block !important; } body.adaptive .elementdetail .mxtop .soloprice tr.hideifzero[style*="display: none"], body.adaptive .elementdetail .mxtop .soloprice tr.hideifzero[style*="display:none"] { display: none !important; } } /* Телефон, 16.09.2026: цена по референсу (две строки, максимально компактно). Собирает JS buildPriceBlock(). */ @media (max-width: 767px) { .mxtop [itemprop="offers"].mx-has-price { display: block; } .mxprice__r1, .mxprice__r2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mxprice__r1 { justify-content: space-between; min-height: 18px; } .mxprice__r2 { justify-content: flex-start; } .mxprice__r2 .cheaper { margin-left: auto; } body.adaptive .elementdetail .mxprice .price.old { display: inline; margin: 0; font-size: 14px; line-height: 1.2; color: #8a94a2; text-decoration: line-through; } body.adaptive .elementdetail .mxprice .price.gen { display: inline; margin: 0; padding: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-weight: 700; font-size: 28px; line-height: 1.1; color: #1b2430 !important; } .mxprice__pct { display: inline-block; padding: 2px 8px; border-radius: 12px; background: #ffd233; color: #1b2430; font-size: 14px; font-weight: 700; line-height: 1.2; } body.adaptive .elementdetail .mxprice .discount { display: inline; margin: 0; font-size: 13px; font-weight: 400; color: #7b8593; } body.adaptive .elementdetail .mxprice .discount::before { content: "Вы экономите: "; } body.adaptive .elementdetail .mxprice .cheaper { display: inline-block; } } /* Без скидки: плашка «Гарантия лучшей цены» справа от цены, в одну строку (17.09.2026) */ @media (max-width: 767px) { .mxprice__r2 .cheaper.mxprice__chip { margin-left: auto; align-self: center; white-space: nowrap; } /* пустая строка старой цены не должна давать отступ; тема даёт панели padding-top 25px — на телефоне лишнее */ .mxprice__r1:empty { display: none; } body.adaptive .elementdetail .detail-product__info { padding-top: 8px; } body.adaptive .elementdetail .mxprice .mxprice__chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: #f1f3f6; color: #3d4652 !important; font-size: 12px; line-height: 1; text-decoration: none; border: 0; } body.adaptive .elementdetail .mxprice .mxprice__chip--guard { background: #eaf7ec; color: #1a8f3c !important; font-weight: 600; } body.adaptive .elementdetail .mxtop .cheaper.mxprice__chip--guard a, body.adaptive .elementdetail .mxtop .cheaper.mxprice__chip--guard span.cheaper { display: inline-flex; align-items: center; gap: 5px; border: 0; color: #1a8f3c !important; font-size: 0; } body.adaptive .elementdetail .mxtop .cheaper.mxprice__chip--guard a::before, body.adaptive .elementdetail .mxtop .cheaper.mxprice__chip--guard span.cheaper::before { content: "✓"; font-size: 12px; } body.adaptive .elementdetail .mxtop .cheaper.mxprice__chip--guard a::after, body.adaptive .elementdetail .mxtop .cheaper.mxprice__chip--guard span.cheaper::after { content: "Гарантия лучшей цены"; font-size: 12px; } } /* 17.09.2026, идея Дениса: пока товара нет в корзине, счётчик «1 шт» не нужен — на его месте «Купить в 1 клик» (второстепенная), справа «В корзину». После добавления — зелёный счётчик, «1 клик» прячется. Обе ширины экрана. */ .elementdetail .buy:not(.mx-has-cart) .add2basketform .quantity { display: none !important; } .elementdetail .buy:not(.mx-has-cart) .add2basketform .buy1click.btn3 { order: -1; } .elementdetail .buy.mx-has-cart .add2basketform .buy1click.btn3 { display: none !important; } @media (max-width: 767px) { body.adaptive .elementdetail .buy:not(.mx-has-cart) .add2basketform .buy1click.btn3 { flex: 1 1 0; height: 48px; padding: 0 8px; white-space: nowrap; } body.adaptive .elementdetail .buy:not(.mx-has-cart) .add2basketform .add2basket.btn1 { flex: 1.15 1 0; padding: 0 8px; white-space: nowrap; } } /* ПК, 17.09.2026: шапка карточки по референсу dveri-tut (собирает JS buildPcHead) */ @media (min-width: 768px) { .mxpchead { margin: 0 0 22px; } .mxpchead__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; } .mxpchead__top h1.pagetitle { margin: 0; } .mxpchead .stores { display: flex; align-items: center; margin: 0; line-height: 0; } .mxpchead .stores > span { display: inline-flex; font-size: 0; } .mxpchead .stores .genamount { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 14px; background: #eaf7ec; color: #1a8f3c; font-size: 13px; font-weight: 600; text-decoration: none; pointer-events: none; } .mxpchead .stores .genamount::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22a44a; flex: 0 0 auto; } .mxpchead .stores .genamount span[style*="ff0000"] { color: #c26a00 !important; } .mxpchead .stores .genamount:has(span[style*="ff0000"]) { background: #fff4e5; } .mxpchead .stores .genamount:has(span[style*="ff0000"])::before { background: #e39a2e; } .mxpchead .stores .genamount svg, .mxpchead .stores .popupstores { display: none !important; } .mxpchead__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; font-size: 14px; color: #7b8593; } .mxpchead__meta .article { margin: 0; font-size: 14px; color: #7b8593; } .mxpchead__meta .article .offer_article { color: #1b2430; font-weight: 700; } .mxpchead__meta .cheaper.mxchip { margin: 0; } .mxpchead__meta .cheaper.mxchip a { position: static; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 12px; border: 0; border-radius: 15px; background: #f1f3f6; color: #3d4652 !important; font-size: 13px; line-height: 1; text-decoration: none; } .mxpchead__meta .cheaper.mxchip a:hover { background: #e7eaef; } .mxpchead__meta .cheaper.mxchip a .svg-icon { position: static; width: 15px; height: 15px; margin: 0; } .mxpchead__right { display: flex; align-items: center; gap: 22px; margin-left: auto; } .mxpchead__right a { position: static; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; background: transparent; color: #3d4652 !important; font-size: 14px; text-decoration: none; } .mxpchead__right a:hover { color: #C4010C !important; } .mxpchead__right a svg { position: static; width: 17px; height: 17px; margin: 0; } .elementdetail .detail-product__info .threeblock.mx-empty { display: none; } .elementdetail .detail-product__info .share { display: none; } /* Яндекс.Поделиться не рендерится, оставлял пустой отступ */ .elementdetail .detail-product__info .buy .go2basket { display: none !important; } .elementdetail .pictures .zoom { display: none; } .elementdetail .picslider .d_jscrollpane { outline: none !important; } /* ПК: блок цены как на телефоне — старая цена мелко, новая крупно + жёлтый процент + «Вы экономите» */ .elementdetail .detail-product__info [itemprop="offers"].mx-has-price { display: block; margin: 0 0 18px; } .mxprice__r1:empty { display: none; } .elementdetail .detail-product__info .mxprice__r1, .elementdetail .detail-product__info .mxprice__r2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .elementdetail .detail-product__info .mxprice__r1 { margin-bottom: 2px; } .elementdetail .detail-product__info .mxprice .price.old { display: inline; margin: 0; font-size: 15px; line-height: 1.2; color: #8a94a2; text-decoration: line-through; } .elementdetail .detail-product__info .mxprice .price.gen { display: inline; margin: 0; padding: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.1; color: #1b2430 !important; } .elementdetail .detail-product__info .mxprice__pct { display: inline-block; padding: 3px 9px; border-radius: 12px; background: #ffd233; color: #1b2430; font-size: 14px; font-weight: 700; line-height: 1.2; } .elementdetail .detail-product__info .mxprice .discount { display: inline; margin: 0; font-size: 13px; font-weight: 400; color: #7b8593; } .elementdetail .detail-product__info .mxprice .discount::before { content: "Вы экономите: "; } } /* 17.09.2026: в «Похожих товарах» после добавления — тот же счётчик .mxcart (MX_CART_UI), кнопки темы спрятаны. Глобально .mxcart скрыт (styles_base), тут включаем. По просьбе Дениса: цена слева, справа либо «В корзину», либо компактный счётчик «✓ − 1 шт. +» в той же строке; на нуле возвращается кнопка. */ .light > .js-element .buy.mx-has-cart .add2basketform { display: none !important; } .light > .js-element .buy.mx-has-cart .mxcart { display: inline-flex; align-items: center; gap: 2px; float: right; width: auto; max-width: none; box-sizing: border-box; margin: -3px 0 0; padding: 2px 2px 2px 8px; border-radius: 9px; background: #eaf7ec; } .light > .js-element .buy .mxcart__label { display: inline-flex; align-items: center; margin: 0 4px 0 0; font-size: 0; color: #1a8f3c; } .light > .js-element .buy .mxcart__check { width: 16px; height: 16px; flex: 0 0 auto; } .light > .js-element .buy .mxcart__step { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; background: transparent; } .light > .js-element .buy .mxcart__btn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: #fff; color: #1b2430; font-size: 17px; line-height: 1; cursor: pointer; } .light > .js-element .buy .mxcart__num { min-width: 40px; text-align: center; font-size: 13px; font-weight: 700; color: #1b2430; white-space: nowrap; } @media (max-width: 767px) { /* телефон: карточка узкая, цена над кнопкой — счётчик на всю ширину, по центру */ .light > .js-element .buy.mx-has-cart .mxcart { display: flex; float: none; width: 100%; justify-content: center; margin: 0; padding: 4px 6px; } } /* ПК, 17.09.2026: миниатюры столбиком слева от фото (референс Ozon), собирает JS buildPcThumbs */ @media (min-width: 768px) { .elementdetail .pictures.mx-thumbs-left { display: flex; align-items: flex-start; gap: 14px; } .elementdetail .pictures.mx-thumbs-left .picslider.horizontal { display: none !important; } .elementdetail .pictures.mx-thumbs-left .pic { flex: 1 1 auto; min-width: 0; margin: 0; } .elementdetail .mxthumbs-wrap { position: relative; flex: 0 0 68px; width: 68px; } .elementdetail .mxthumbs { display: flex; flex-direction: column; gap: 7px; max-height: 350px; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y proximity; } .elementdetail .mxthumbs::-webkit-scrollbar { display: none; } .elementdetail .mxthumbs__item { width: 64px; height: 64px; flex: 0 0 64px; padding: 0; border: 1px solid #e6e9ee; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; scroll-snap-align: start; } .elementdetail .mxthumbs__item img { display: block; width: 100%; height: 100%; object-fit: contain; } .elementdetail .mxthumbs__item:hover { border-color: #b9c0c9; } .elementdetail .mxthumbs__item.is-active { border-color: #C4010C; } .elementdetail .mxthumbs__more { position: absolute; left: 0; width: 64px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: #fff; cursor: pointer; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .elementdetail .mxthumbs__more::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 2px solid #3d4652; border-bottom: 2px solid #3d4652; transform: rotate(45deg); } .elementdetail .mxthumbs__more--up { top: -4px; } .elementdetail .mxthumbs__more--up::before { margin-top: -2px; transform: rotate(-135deg); } .elementdetail .mxthumbs__more--down { bottom: -4px; } .elementdetail .mxthumbs__more[hidden] { display: none; } } /* 17.09.2026: «Помощь» в нижней панели убрана и на ПК (на телефоне была скрыта раньше) — пункт без функции */ #rs_easycart .rsec_headers .rsec_online { display: none !important; } /* =================================================================== 17.09.2026, этап 2: цена за м², «другие размеры этой модели», блок доверия. Обе ширины. =================================================================== */ .elementdetail .mxm2 { display: inline-block; margin: 0 0 0 4px; font-size: 13px; font-weight: 400; color: #7b8593; white-space: nowrap; } .elementdetail .mxprice__r2 .mxm2 { align-self: baseline; } .elementdetail .mxsizes { position: relative; margin: 0 0 16px; } .elementdetail .mxsizes__title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #3d4652; } /* одна строка-слайдер: в разметке все размеры, видна часть; текущий JS ставит в центр */ .elementdetail .mxsizes__list { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 2px; } .elementdetail .mxsizes__list::-webkit-scrollbar { display: none; } .elementdetail .mxsizes__item { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 5px 9px; border: 1px solid #e6e9ee; border-radius: 8px; background: #fff; text-decoration: none; color: #1b2430; line-height: 1.2; box-sizing: border-box; scroll-snap-align: center; } .elementdetail .mxsizes__item b { font-size: 13px; font-weight: 700; white-space: nowrap; } .elementdetail .mxsizes__item i { font-style: normal; font-size: 11px; color: #7b8593; white-space: nowrap; } .elementdetail a.mxsizes__item:hover { border-color: #b9c0c9; } .elementdetail .mxsizes__item.is-current { border-color: #C4010C; background: #fdeaea; cursor: default; } .elementdetail .mxsizes__arr { display: none; } @media (min-width: 768px) { /* ПК: стрелки по краям строки, растушёвка краёв */ .elementdetail .mxsizes__list { padding: 0 2px 2px; mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } .elementdetail .mxsizes__arr { display: block; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: 3px; padding: 0; border: 1px solid #e6e9ee; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; z-index: 2; } .elementdetail .mxsizes__arr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid #3d4652; border-bottom: 2px solid #3d4652; } .elementdetail .mxsizes__arr--prev { left: -10px; } .elementdetail .mxsizes__arr--prev::before { margin: -4px 0 0 -2px; transform: rotate(135deg); } .elementdetail .mxsizes__arr--next { right: -10px; } .elementdetail .mxsizes__arr--next::before { margin: -4px 0 0 -6px; transform: rotate(-45deg); } .elementdetail .mxsizes__arr[hidden] { display: none; } } .elementdetail .mxtrust__list { list-style: none; margin: 0 0 10px; padding: 0; } .elementdetail .mxtrust__list li { position: relative; margin: 0 0 8px; padding: 0 0 0 20px; font-size: 13px; line-height: 1.45; color: #3d4652; } .elementdetail .mxtrust__list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 4px; border-left: 2px solid #22a44a; border-bottom: 2px solid #22a44a; transform: rotate(-45deg); } .elementdetail .mxtrust__list li strong { color: #1b2430; font-weight: 700; } .elementdetail .mxtrust__list li a { color: #C4010C; } @media (max-width: 767px) { /* телефон: строка размеров навылет до краёв экрана */ body.adaptive .elementdetail .mxsizes { margin: 0 -15px 14px; padding: 0 15px; } body.adaptive .elementdetail .mxtrust .mxacc__body { padding-top: 4px; } } /* сопутствующие (крепёж для штор) */ .elementdetail .mxacc-goods { margin: 0 0 16px; } .elementdetail .mxacc-goods__list { display: flex; flex-wrap: wrap; gap: 8px; } .elementdetail .mxacc-goods__item { display: flex; align-items: center; gap: 10px; flex: 1 1 calc(50% - 4px); min-width: 200px; padding: 6px 10px 6px 6px; border: 1px solid #e6e9ee; border-radius: 10px; text-decoration: none; color: #1b2430; box-sizing: border-box; } .elementdetail .mxacc-goods__item:hover { border-color: #b9c0c9; } .elementdetail .mxacc-goods__item img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; border-radius: 6px; background: #f6f7f9; } .elementdetail .mxacc-goods__name { flex: 1 1 auto; font-size: 12px; line-height: 1.3; color: #1b2430; } .elementdetail .mxacc-goods__price { flex: 0 0 auto; font-size: 13px; font-weight: 700; white-space: nowrap; } /* =================================================================== ВИТРИНА КАТАЛОГА, 17.09.2026, тестовый контур (собирает MX_LIST в custom/script.js). Иконки избранного/сравнения на фото; «Купить» на всю ширину без счётчика; после добавления — счётчик .mxcart (MX_CART_UI). ПК: карточка статичная, без раскрытия по наведению. =================================================================== */ .view_showcase .js-element .pic { position: relative; } .view_showcase .js-element .mxacts { position: absolute; top: 0; right: 0; z-index: 3; display: flex; flex-direction: column; gap: 6px; } .view_showcase .js-element a.mxacts__btn, .view_showcase .js-element a.mxacts__btn.in { display: flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.18); color: #8a94a2; text-decoration: none; /* !important: у темы свои размеры под спрайт (.add2compare 33x22, .add2favorite 24x22) и они перебивали — иконки были таблетками */ } .view_showcase .js-element a.mxacts__btn svg { width: 18px; height: 18px; display: block; } .view_showcase .js-element a.mxacts__btn:hover { color: #1b2430; } .view_showcase .js-element a.add2favorite.mxacts__btn.in { color: #C4010C; } .view_showcase .js-element a.add2favorite.mxacts__btn.in svg path { fill: currentColor; } .view_showcase .js-element a.add2compare.mxacts__btn.in { color: #1a8f3c; } .view_showcase .js-element .compare_and_stores, .view_showcase .js-element .favorishare { display: none !important; } /* счётчик после добавления — обе ширины */ .view_showcase .js-element .buy.mx-has-cart .add2basketform { display: none !important; } .view_showcase .js-element .buy.mx-has-cart .mxcart { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px 8px; min-height: 38px; width: 100%; box-sizing: border-box; margin: 0; padding: 4px 4px 4px 10px; border-radius: 9px; background: #eaf7ec; } .view_showcase .js-element .buy .mxcart__label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 0; font-weight: 600; color: #1a8f3c; } /* только галочка — в узкой карточке текст переносил строку */ .view_showcase .js-element .buy .mxcart__check { width: 16px; height: 16px; flex: 0 0 auto; } .view_showcase .js-element .buy .mxcart__step { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; background: transparent; } .view_showcase .js-element .buy .mxcart__btn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: #fff; color: #1b2430; font-size: 18px; line-height: 1; cursor: pointer; } .view_showcase .js-element .buy .mxcart__num { min-width: 40px; text-align: center; font-size: 13px; font-weight: 700; color: #1b2430; } @media (max-width: 767px) { body.adaptive .view_showcase .js-element .buy.mx-has-cart .mxcart { padding: 4px 6px; } } @media (min-width: 768px) { .view_showcase, .view_showcase.columns5 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .view_showcase::before, .view_showcase::after { content: none; } .view_showcase .js-element, .view_showcase.columns5 .js-element { float: none; width: auto; height: auto; margin: 0; } .view_showcase .js-element .inner { position: static; display: flex; flex-direction: column; height: 100%; min-height: 0; box-sizing: border-box; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; box-shadow: none; } .view_showcase .js-element:hover .inner { box-shadow: 0 4px 16px rgba(0,0,0,.08); } .view_showcase .js-element .padd { flex: 0 0 auto; height: auto; padding: 10px 10px 4px; } .view_showcase .js-element .name { height: auto; min-height: 2.6em; margin: 0 0 6px; font-size: 13px; line-height: 1.3; text-align: center; } .view_showcase .js-element .pic, .view_showcase .js-element .pic a { height: auto; } .view_showcase .js-element .pic img { display: block; width: auto; max-width: 100%; height: 150px; margin: 0 auto; object-fit: contain; } .view_showcase .js-element .soloprice { margin-top: auto; padding: 8px 10px 6px; text-align: center; } .view_showcase .js-element .price { margin: 0; font-size: 16px; font-weight: 700; color: #1b2430; } .view_showcase .js-element .popup { position: static; display: block !important; flex: 0 0 auto; width: auto; padding: 0 10px 10px; box-shadow: none; } .view_showcase .js-element .popup .buy { float: none; width: 100%; margin: 0; } .view_showcase .js-element .popup .quantity { display: none !important; } .view_showcase .js-element .popup .add2basketform { display: flex; } .view_showcase .js-element .popup .add2basket { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; float: none; height: 38px; margin: 0; padding: 0; border-radius: 9px; background: #C4010C; color: #fff; font-size: 13px; text-decoration: none; box-sizing: border-box; } .view_showcase .js-element .popup .add2basket:hover { background: #a80009; } .view_showcase .js-element .popup .inbasket { display: none !important; } } /* 17.09.2026: одна страница — тема всё равно рисует «1» со стрелками; прячем */ #paginator .navigation:not(:has(a:not(.arrow))) { display: none; } /* =================================================================== Быстрый просмотр (MX_QV), ПК, 17.09.2026 =================================================================== */ @media (min-width: 768px) { .view_showcase .js-element .mxqv-btn { position: absolute; left: 50%; bottom: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: rgba(27,36,48,.82); color: #fff; font-size: 12px; white-space: nowrap; cursor: pointer; transform: translateX(-50%); opacity: 0; transition: opacity .15s; } .view_showcase .js-element .mxqv-btn svg { width: 16px; height: 16px; } .view_showcase .js-element:hover .mxqv-btn, .view_showcase .js-element .mxqv-btn:focus { opacity: 1; } } .mxqv[hidden] { display: none !important; } .mxqv { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10040; display: flex; align-items: center; justify-content: center; padding: 20px; } .mxqv__back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); } .mxqv__box { position: relative; width: 100%; max-width: 940px; text-align: left; max-height: calc(100vh - 40px); overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .mxqv__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f3f6; color: #1b2430; font-size: 24px; line-height: 1; cursor: pointer; } .mxqv__close:hover { background: #e7eaef; } .mxqv__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 28px; } .mxqv__gal, .mxqv__info { min-width: 0; } .mxqv__loading { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #8a94a2; } .mxqv__main { display: flex; align-items: center; justify-content: center; height: min(360px, 45vh); border-radius: 12px; background: #fff; } .mxqv__main img { max-width: 100%; max-height: 100%; object-fit: contain; } .mxqv__thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .mxqv__thumb { width: 56px; height: 56px; padding: 0; border: 1px solid #e6e9ee; border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; } .mxqv__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .mxqv__thumb.is-active { border-color: #C4010C; } .mxqv__title { margin: 0 30px 10px 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: #1b2430; } .mxqv__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-size: 13px; color: #7b8593; } .mxqv__stock { display: inline-flex; align-items: center; gap: 6px; color: #1a8f3c; font-weight: 600; } .mxqv__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22a44a; } .mxqv__art b { color: #1b2430; } .mxqv__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; } .mxqv__price s { font-size: 14px; color: #8a94a2; } .mxqv__price b { font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 28px; font-weight: 700; color: #1b2430; } .mxqv__price i { font-style: normal; font-size: 13px; color: #7b8593; } .mxqv__sizes .mxsizes { margin: 0 0 14px; } .mxqv__sizes .mxsizes__title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #3d4652; } .mxqv__sizes .mxsizes__list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .mxqv__sizes .mxsizes__list::-webkit-scrollbar { display: none; } .mxqv__sizes .mxsizes__item { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; min-width: 60px; padding: 5px 8px; border: 1px solid #e6e9ee; border-radius: 8px; color: #1b2430; text-decoration: none; line-height: 1.2; } .mxqv__sizes .mxsizes__item b { font-size: 13px; } .mxqv__sizes .mxsizes__item i { font-style: normal; font-size: 11px; color: #7b8593; } .mxqv__sizes .mxsizes__item.is-current { border-color: #C4010C; background: #fdeaea; } .mxqv__sizes .mxsizes__arr { display: none; } .mxqv__buy { margin: 0 0 14px; } .mxqv__buy .add2basketform { display: flex; gap: 10px; } .mxqv__buy .quantity, .mxqv__buy .inbasket, .mxqv__buy .go2basket, .mxqv__buy .buy1click, .mxqv__buy .js-product-subscribe { display: none !important; } .mxqv__buy .add2basket { display: inline-flex !important; align-items: center; justify-content: center; height: 46px; padding: 0 28px; border-radius: 10px; background: #C4010C; color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none; } .mxqv__buy .add2basket:hover { background: #a80009; } .mxqv__buy .add2basket svg { display: none; } .mxqv__buy.mx-has-cart .add2basketform { display: none !important; } .mxqv__buy.mx-has-cart .mxcart { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; border-radius: 10px; background: #eaf7ec; } .mxqv__buy .mxcart__label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1a8f3c; } .mxqv__buy .mxcart__check { width: 18px; height: 18px; } .mxqv__buy .mxcart__step { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; } .mxqv__buy .mxcart__btn { width: 38px; height: 38px; border: 0; border-radius: 8px; background: #fff; color: #1b2430; font-size: 20px; cursor: pointer; } .mxqv__buy .mxcart__num { min-width: 56px; text-align: center; font-size: 15px; font-weight: 700; } .mxqv__more { display: inline-block; font-size: 14px; color: #C4010C; } body.mxqv-open { overflow: hidden; } /* 17.09.2026: «Разделы» в фильтре на телефоне — компактнее (имена чипов укорочены в filter.php) */ @media (max-width: 767px) { body.adaptive .ukf__group--sections .ukf__group-body { gap: 6px; } body.adaptive .ukf__group--sections .ukf__chip { padding: 5px 9px; font-size: 13px; } body.adaptive .ukf__group--sections .ukf__chip[data-count]::after { font-size: 11px; } } /* текст над каталогом на телефоне — свёрнут до двух строк (17.09.2026) */ @media (max-width: 767px) { body.adaptive .catalog .categoryTeaser.mxteaser { position: relative; max-height: 3.1em; overflow: hidden; margin: 0 0 12px; padding: 10px 52px 10px 14px; box-sizing: content-box; border-radius: 12px; background: #f6f7f9; font-size: 14px; line-height: 1.45; color: #3d4652; } body.adaptive .catalog .categoryTeaser.mxteaser p { margin: 0 0 8px; } body.adaptive .catalog .categoryTeaser.mxteaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(246,247,249,0), #f6f7f9); pointer-events: none; } body.adaptive .catalog .categoryTeaser.mxteaser.is-open { max-height: none; } body.adaptive .catalog .categoryTeaser.mxteaser.is-open::after, body.adaptive .catalog .categoryTeaser.mxteaser.is-short::after { display: none; } body.adaptive .catalog .categoryTeaser.mxteaser.is-short { max-height: none; padding-right: 14px; } body.adaptive .catalog .mxteaser__btn { position: absolute; right: 10px; top: 10px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #e7eaef; cursor: pointer; } body.adaptive .catalog .mxteaser__btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px; border-right: 2px solid #3d4652; border-bottom: 2px solid #3d4652; transform: rotate(45deg); transition: transform .15s; } body.adaptive .catalog .categoryTeaser.mxteaser.is-open .mxteaser__btn::before { margin-top: -2px; transform: rotate(-135deg); } } /* 17.09.2026, Денис: на телефоне «Разделы» тоже прячем, пока фильтр не раскрыт */ @media (max-width: 767px) { body.adaptive .ukf:not(.is-open) .ukf__group--sections { display: none; } } /* =================================================================== ГЛАВНАЯ, редизайн 17.09.2026 (этап 3). Разметка — template_ext/home/home.php. =================================================================== */ .mxhome { padding: 8px 0 10px; } .mxhome .mxh2 { margin: 0 0 18px; font-size: 24px; line-height: 1.2; font-weight: 700; color: #1b2430; text-transform: none; } .mxhome section { margin: 0 0 44px; } .mxbtn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; box-sizing: border-box; } .mxbtn--red { background: #C4010C; color: #fff !important; } .mxbtn--red:hover { background: #a80009; } .mxbtn--ghost { border: 1.5px solid #C4010C; background: #fff; color: #C4010C !important; } .mxbtn--ghost:hover { background: #fdeaea; } /* на главной тема держит выпадающее меню каталога раскрытым (rs-show) — оно накрывает первый экран; по наведению работает как везде */ body.mx-home #header .catalogmenucolumn .catalogmenu > li.parent:not(:hover) > ul.lvl1.rs-show { display: none !important; } /* первый экран */ .mxhero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding: 34px 40px; border-radius: 18px; background: linear-gradient(135deg, #f6f7f9 0%, #eef1f5 100%); } .mxhero__title { margin: 0 0 12px; font-size: 38px; line-height: 1.12; font-weight: 700; color: #1b2430; text-transform: none; } .mxhero__lead { margin: 0 0 18px; font-size: 17px; line-height: 1.45; color: #3d4652; } .mxhero__list { list-style: none; margin: 0 0 24px; padding: 0; } .mxhero__list li { position: relative; margin: 0 0 8px; padding: 0 0 0 26px; font-size: 15px; line-height: 1.4; color: #1b2430; } .mxhero__list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 2.5px solid #22a44a; border-bottom: 2.5px solid #22a44a; transform: rotate(-45deg); } .mxhero__btns { display: flex; flex-wrap: wrap; gap: 10px; } .mxhero__media img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; border-radius: 14px; } /* Первый экран: два баннера справа вместо картинки — 08.10.2026 */ .mxhero__promo { display: grid; gap: 14px; align-self: stretch; align-content: center; } .mxpromo { display: block; border-radius: 14px; text-decoration: none; } .mxpromo__title { display: block; margin: 0 0 8px; font-size: 21px; line-height: 1.25; font-weight: 700; } .mxpromo__text { display: block; margin: 0 0 16px; font-size: 15px; line-height: 1.45; } .mxpromo .mxbtn { height: 42px; padding: 0 20px; font-size: 14px; } .mxpromo--kp { padding: 22px 24px; background: #1b2430; color: #fff; } .mxpromo--kp .mxpromo__title { color: #fff; } .mxpromo--kp .mxpromo__text { color: #c5ccd5; } .mxpromo__note { margin: 10px 0 0; font-size: 13px; color: #9aa4b1; } .mxpromo__note a { color: #fff; } /* Баннер расчёта: мессенджеры и почта вместо формы; без подчёркивания ссылок темы — 08.10.2026 */ .mxpromo, .mxpromo:hover, .mxpromo *, .mxpromo *:hover { text-decoration: none !important; } .mxpromo__send { display: flex; flex-wrap: wrap; gap: 8px; } .mxpromo__ch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff !important; font-size: 14px; font-weight: 600; } .mxpromo__ch svg { width: 24px; height: 24px; flex: 0 0 24px; } .mxpromo__ch:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); } .mxpromo__ch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (min-width: 768px) and (max-width: 1100px) { .mxpromo--kp { padding: 20px; } .mxpromo__send { gap: 6px; } .mxpromo__ch { gap: 6px; height: 38px; padding: 0 10px 0 6px; font-size: 13px; } .mxpromo__ch svg { width: 22px; height: 22px; flex-basis: 22px; } } @media (min-width: 768px) and (max-width: 1060px) { .mxpromo__send { display: grid; grid-template-columns: 1fr 1fr; } .mxpromo__ch { justify-content: center; } } .mxpromo--season { display: grid; grid-template-columns: 1fr 40%; grid-template-rows: 1fr auto; overflow: hidden; border: 1px solid #e1e5ea; background: #fff; color: #1b2430; } .mxpromo--season .mxpromo__body { display: block; grid-column: 1; grid-row: 1; padding: 22px 18px 0 24px; } .mxpromo__cta { display: block; grid-column: 1; grid-row: 2; padding: 0 18px 22px 24px; } .mxpromo--season .mxpromo__title { color: #1b2430; } .mxpromo--season .mxpromo__text { color: #3d4652; } .mxpromo--season:hover { border-color: #c9cfd6; } .mxpromo--season:hover .mxbtn--ghost { background: #fdeaea; } /* фото — в обёртке на всю высоту ячейки: Safari иначе считал высоту в сетке и фото наезжало на кнопку (08.10.2026) */ .mxpromo__media { position: relative; display: block; grid-column: 2; grid-row: 1 / 3; overflow: hidden; } .mxpromo__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .mxpromo .mxbtn:focus-visible, .mxpromo--season:focus-visible { outline: 2px solid #C4010C; outline-offset: 2px; } /* направления */ .mxdirs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .mxdirs__item { display: flex; flex-direction: column; padding: 10px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; text-decoration: none; color: #1b2430; transition: box-shadow .15s; } .mxdirs__item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); } .mxdirs__pic { display: block; height: 150px; margin: 0 0 10px; border-radius: 8px; overflow: hidden; background: #f6f7f9; } .mxdirs__pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .mxdirs__name { font-size: 15px; font-weight: 600; line-height: 1.3; } .mxdirs__cnt { margin-top: 4px; font-size: 13px; color: #8a94a2; } /* популярные */ .mxpop__list { display: flex; flex-wrap: wrap; gap: 8px; } .mxpop__chip { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 19px; background: #f1f3f6; color: #1b2430; font-size: 14px; text-decoration: none; } .mxpop__chip:hover { background: #e7eaef; } /* лучшие товары — заголовок темы в наш стиль */ .mxbest .sorter_and_name { margin: 0 0 14px; } .mxbest .sorter_and_name h3.name { margin: 0; font-size: 24px; font-weight: 700; color: #1b2430; text-transform: none; } /* почему */ .mxwhy__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .mxwhy__item { position: relative; padding: 18px 18px 18px 60px; border-radius: 12px; background: #f6f7f9; } .mxwhy__item::before { content: ""; position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: #eaf7ec; } .mxwhy__item::after { content: ""; position: absolute; left: 28px; top: 27px; width: 10px; height: 5px; border-left: 2.5px solid #22a44a; border-bottom: 2.5px solid #22a44a; transform: rotate(-45deg); } .mxwhy__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1b2430; } .mxwhy__text { font-size: 13px; line-height: 1.45; color: #3d4652; } /* производство */ .mxprod { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 30px 40px; border-radius: 18px; background: #1b2430; color: #fff; } .mxprod .mxh2 { color: #fff; } .mxprod p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #d5dbe3; } .mxprod .mxhero__btns { margin-top: 20px; } .mxprod .mxbtn--ghost { border-color: #fff; background: transparent; color: #fff !important; } .mxprod .mxbtn--ghost:hover { background: rgba(255,255,255,.1); } .mxprod__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mxprod__pics img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 10px; } .mxprod__pics img:first-child { grid-column: 1 / -1; height: 200px; } /* о компании — коротко */ .mxabout__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .mxabout__cols p { margin: 0; font-size: 14px; line-height: 1.6; color: #3d4652; } @media (max-width: 767px) { .mxhome section { margin: 0 0 30px; } .mxhome .mxh2 { font-size: 20px; margin-bottom: 12px; } .mxhero { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; margin: 0 -15px; border-radius: 0; } .mxhero__title { font-size: 26px; } .mxhero__lead { font-size: 15px; } .mxhero__media { order: -1; } .mxhero__media img { max-width: 260px; } .mxhero__promo { gap: 12px; } .mxpromo__title { font-size: 18px; } .mxpromo__text { font-size: 14px; margin-bottom: 14px; } .mxpromo--kp { padding: 18px 16px; } .mxpromo--season { grid-template-columns: 1fr 34%; } .mxpromo--season .mxpromo__body { padding: 18px 12px 14px 16px; } .mxpromo__cta { grid-column: 1 / 3; padding: 0 16px 18px; } .mxpromo__media { grid-row: 1; } .mxpromo .mxbtn { width: 100%; padding: 0 12px; } .mxpromo__send { display: grid; grid-template-columns: 1fr 1fr; } .mxpromo__ch { justify-content: center; padding: 0 10px; } .mxhero__btns .mxbtn { flex: 1 1 auto; padding: 0 14px; } .mxdirs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mxdirs__item { padding: 8px; } .mxdirs__pic { height: 110px; } .mxdirs__name { font-size: 13px; } .mxpop__list { flex-wrap: nowrap; overflow-x: auto; margin: 0 -15px; padding: 0 15px 4px; scrollbar-width: none; } .mxpop__list::-webkit-scrollbar { display: none; } .mxpop__chip { flex: 0 0 auto; } .mxbest .sorter_and_name .sorter { display: none; } /* переключатель вида на телефоне ни к чему */ .mxbest .sorter_and_name h3.name { font-size: 20px; } .mxwhy__grid { grid-template-columns: 1fr; gap: 10px; } .mxprod { grid-template-columns: 1fr; gap: 18px; padding: 22px 16px; margin: 0 -15px; border-radius: 0; } .mxprod__pics { grid-template-columns: 1fr 1fr; } .mxprod__pics img { height: 110px; } .mxprod__pics img:first-child { height: 150px; } .mxabout__cols { grid-template-columns: 1fr; gap: 10px; } } /* =================================================================== КОРЗИНА (/personal/cart/), редизайн 18.09.2026. Разметка — sale.basket.basket/gopro/basket_items.php =================================================================== */ .mxcart-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .mxcart-page__list { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mxcart-row.js-element { float: none !important; width: auto !important; height: auto !important; margin: 0 !important; } .mxcart-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 14px 18px; align-items: center; padding: 14px 44px 14px 14px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; } .mxcart-row__pic { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #f6f7f9; } .mxcart-row__pic img { display: block; width: 100%; height: 100%; object-fit: contain; } .mxcart-row__name { display: block; margin: 0 0 6px; font-size: 15px; line-height: 1.3; font-weight: 600; color: #1b2430; text-decoration: none; } .mxcart-row__name:hover { color: #C4010C; } .mxcart-row__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #7b8593; } .mxcart-row__meta s { color: #b0b8c2; margin-left: 4px; } .mxcart-row__meta em { font-style: normal; display: inline-block; padding: 1px 6px; border-radius: 8px; background: #ffd233; color: #1b2430; font-size: 11px; font-weight: 700; margin-left: 4px; } .mxcart-row__check { display: none; } .mxcart-row__qty .quantity { display: inline-block; } .mxcart-row__qty .quantity_inner { width: auto !important; overflow: visible !important; display: inline-flex !important; position: static !important; align-items: center; height: 40px; border: 1px solid #dfe3e8; border-radius: 10px; overflow: hidden; background: #fff; } .mxcart-row__qty .quantity_inner .minus, .mxcart-row__qty .quantity_inner .plus { position: static !important; left: auto !important; right: auto !important; opacity: 1 !important; visibility: visible !important; display: flex !important; align-items: center; justify-content: center; width: 36px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: #f6f7f9; color: #1b2430; font-size: 18px; text-decoration: none; cursor: pointer; } .mxcart-row__qty .quantity_inner input.js-quantity { position: static !important; display: inline-block !important; width: 44px !important; height: 40px; margin: 0; padding: 0; border: 0; outline: none; text-align: center; font-size: 15px; font-weight: 700; color: #1b2430; } .mxcart-row__qty .quantity_inner .js-measurename { padding-right: 6px; color: #8a94a2; font-size: 12px; } .mxcart-row__sum { min-width: 96px; text-align: right; } .mxcart-row__sum b { display: block; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 17px; font-weight: 700; color: #1b2430; white-space: nowrap; } .mxcart-row__sum s { font-size: 12px; color: #b0b8c2; } .mxcart-row__del { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f6; color: #7b8593; font-size: 18px; line-height: 28px; text-align: center; text-decoration: none; } .mxcart-row__del:hover { background: #fdeaea; color: #C4010C; } .mxcart-total { grid-column: 2; grid-row: 1; position: sticky; top: 16px; padding: 20px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; } .mxcart-total__row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 14px; color: #7b8593; } .mxcart-total__row b { color: #1b2430; font-weight: 600; } .mxcart-total__row s { color: #b0b8c2; } .mxcart-total__row--disc b { color: #1a8f3c; } .mxcart-total__sum { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid #eef1f4; font-size: 15px; color: #1b2430; } .mxcart-total__sum b { font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 26px; font-weight: 700; } .mxcart-total .mxbtn { width: 100%; margin: 0 0 8px; } input.mxcart-total__order { border: 0; cursor: pointer; font-family: inherit; } .mxcart-total__clear { display: block; width: 100%; margin: 4px 0 12px; padding: 6px 0; border: 0; background: none; color: #8a94a2; font-size: 13px; cursor: pointer; } .mxcart-total__clear:hover { color: #C4010C; } .mxcart-total__note { font-size: 12px; line-height: 1.45; color: #7b8593; } .basket .basket__empty-cart { padding: 30px 0 10px; text-align: center; } .basket .basket__empty-cart .btn1 { display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: 10px; background: #C4010C; color: #fff; font-weight: 600; text-decoration: none; } @media (max-width: 767px) { .mxcart-page { grid-template-columns: 1fr; gap: 14px; } .mxcart-page__list { grid-column: 1; grid-row: 1; } .mxcart-total { grid-column: 1; grid-row: 2; } .mxcart-row { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 12px; padding: 12px 40px 12px 12px; } .mxcart-row__pic { width: 76px; height: 76px; } .mxcart-row__name { font-size: 14px; } .mxcart-row__qty { grid-column: 1 / 2; grid-row: 2; } .mxcart-row__sum { grid-column: 2 / 3; grid-row: 2; text-align: right; align-self: center; } .mxcart-row__qty .quantity_inner { height: 36px; } .mxcart-row__qty .quantity_inner .minus, .mxcart-row__qty .quantity_inner .plus { width: 32px; height: 36px; } .mxcart-row__qty .quantity_inner input.js-quantity { width: 36px; height: 36px; font-size: 14px; } .mxcart-total { position: static; padding: 16px; } } /* корзина без отвлекающих блоков (Денис, 18.09.2026): предфутер «Не нашли…», карточка офиса, Envybox, старый текст про доставку */ body.mx-cart-page .mxpre, body.mx-cart-page .mxpre__salon, body.mx-cart-page .mxcall, body.mx-cart-page a.callbackkiller, body.mx-cart-page [class*="cbk-phone"], body.mx-cart-page .content p[style*="font-size: medium"], body.mx-cart-page .content p[style*="font-size: large"], body.mx-cart-page .content p:has(> a[href*="downloadImg"]), body.mx-cart-page .content p:has(> noindex > a[href*="downloadImg"]) { display: none !important; } .mxcart-total__phone { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f4; font-size: 13px; color: #7b8593; } .mxcart-total__phone a { color: #1b2430; font-weight: 700; text-decoration: none; } /* =================================================================== ОФОРМЛЕНИЕ ЗАКАЗА (/personal/order/make/), редизайн 18.09.2026. Разметка — sale.order.ajax/gopro/template.php + confirm.php =================================================================== */ .mxo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .mxo__main { grid-column: 1; grid-row: 1; min-width: 0; } .mxo-total { grid-column: 2; grid-row: 1; position: sticky; top: 16px; padding: 20px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; } .mxo-sec { margin: 0 0 16px; padding: 20px 22px 22px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; } .mxo-sec__title { margin: 0 0 16px; font-size: 18px; line-height: 1.25; font-weight: 700; color: #1b2430; } .mxo-sec__title small { margin-left: 8px; font-size: 13px; font-weight: 400; color: #8a94a2; } .mxo-alert { margin: 0 0 16px; padding: 14px 18px; border: 1px solid #f3c2c2; border-radius: 12px; background: #fdeaea; color: #8c1b1b; font-size: 14px; } .mxo-alert b { display: block; margin-bottom: 6px; } .mxo-alert ul { margin: 0; padding-left: 18px; } .mxo-alert li { margin: 2px 0; } /* переключатель физ/юр */ .mxo-seg { display: inline-flex; margin: 0 0 18px; padding: 3px; border-radius: 10px; background: #f1f3f6; } .mxo-seg__item { position: relative; margin: 0; cursor: pointer; } .mxo-seg__item input { position: absolute; opacity: 0; width: 0; height: 0; } .mxo-seg__item span { display: block; padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #4d5866; transition: background .15s, color .15s; } .mxo-seg__item input:checked + span { background: #fff; color: #1b2430; box-shadow: 0 1px 3px rgba(27,36,48,.12); } .mxo-seg__item input:focus-visible + span { outline: 2px solid #C4010C; outline-offset: 1px; } /* поля */ .mxo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .mxo-grid + .mxo-grid { margin-top: 14px; } .mxo-field { grid-column: 1 / -1; min-width: 0; } .mxo-field--half { grid-column: auto; } .mxo-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #4d5866; } .mxo-label i { font-style: normal; color: #C4010C; } .mxo .mxo-input, .body .mxo .mxo-input { display: block; width: 100%; height: 46px; margin: 0; padding: 0 14px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; box-sizing: border-box; font: inherit; font-size: 15px; color: #1b2430; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .mxo-input::placeholder { color: #aab2bd; } .mxo-input:focus { border-color: #1b2430; box-shadow: 0 0 0 3px rgba(27,36,48,.08); } .mxo .mxo-input--area, .body .mxo .mxo-input--area { height: auto; min-height: 46px; padding: 12px 14px; line-height: 1.4; resize: vertical; } .mxo-field.is-error .mxo-input { border-color: #C4010C; box-shadow: 0 0 0 3px rgba(196,1,12,.1); } .mxo-err { margin: 5px 0 0; font-size: 12px; line-height: 1.3; color: #C4010C; } .mxo-pt[hidden] { display: none !important; } .mxo-address { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef1f4; } /* варианты доставки и оплаты */ .mxo-opts { display: flex; flex-direction: column; gap: 10px; } .mxo-opt { position: relative; display: block; margin: 0; cursor: pointer; } .mxo-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .mxo-opt__box { position: relative; display: block; padding: 13px 16px 13px 46px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; transition: border-color .15s, background .15s; } .mxo-opt__box::before { content: ""; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border: 2px solid #c5ccd5; border-radius: 50%; background: #fff; box-sizing: border-box; transition: border-color .15s; } .mxo-opt input:checked + .mxo-opt__box { border-color: #C4010C; background: #fff7f7; } .mxo-opt input:checked + .mxo-opt__box::before { border: 6px solid #C4010C; } .mxo-opt input:focus-visible + .mxo-opt__box { outline: 2px solid #C4010C; outline-offset: 1px; } .mxo-opt:hover .mxo-opt__box { border-color: #b8c0ca; } .mxo-opt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .mxo-opt__name { font-size: 15px; font-weight: 600; color: #1b2430; } .mxo-opt__price { flex-shrink: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 15px; font-weight: 700; color: #1b2430; white-space: nowrap; } .mxo-opt__price--free { color: #1a8f3c; } .mxo-opt__note { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: #7b8593; } /* итог справа */ .mxo-total__items { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow: auto; margin: 0 0 10px; } .mxo-item { display: flex; align-items: center; gap: 10px; } .mxo-item__pic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: #f6f7f9; } .mxo-item__body { flex: 1 1 auto; min-width: 0; } .mxo-item__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.3; color: #1b2430; text-decoration: none; } .mxo-item__name:hover { color: #C4010C; } .mxo-item__meta { display: block; margin-top: 2px; font-size: 12px; color: #8a94a2; white-space: nowrap; } .mxo-item__sum { flex-shrink: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #1b2430; white-space: nowrap; } .mxo-total__edit { display: inline-block; margin: 0 0 14px; font-size: 13px; color: #7b8593; text-decoration: underline; } .mxo-total__edit:hover { color: #C4010C; } .mxo-total__row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; font-size: 14px; color: #7b8593; } .mxo-total__row b { color: #1b2430; font-weight: 600; } .mxo-total__row--disc b { color: #1a8f3c; } .mxo-total__sum { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid #eef1f4; font-size: 15px; color: #1b2430; } .mxo-total__sum b { font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 26px; font-weight: 700; } button.mxo-total__submit { width: 100%; margin: 0 0 12px; border: 0; cursor: pointer; font-family: inherit; } .mxo-total__agree { font-size: 12px; line-height: 1.45; color: #8a94a2; } .mxo-total__agree a { color: #8a94a2; text-decoration: underline; } .mxo-total__phone { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f4; font-size: 13px; color: #7b8593; } .mxo-total__phone a { color: #1b2430; font-weight: 700; text-decoration: none; } /* заказ принят */ .mxo-done { max-width: 560px; margin: 8px 0 24px; padding: 32px 28px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; text-align: center; } .mxo-done__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: #1a8f3c; } .mxo-done__title { margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-weight: 700; color: #1b2430; } .mxo-done__text { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #4d5866; } .mxo-done__pay { margin: 0 0 18px; padding: 16px; border-radius: 10px; background: #f6f7f9; font-size: 14px; color: #1b2430; } .mxo-done__pay b { display: block; margin-bottom: 10px; } .mxo-done__pay .mxbtn { height: 42px; } .mxo-done__pdf { display: block; margin-top: 8px; font-size: 13px; color: #7b8593; } .mxo-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .mxo-done__phone { margin-top: 18px; font-size: 13px; color: #7b8593; } .mxo-done__phone a { color: #1b2430; font-weight: 700; text-decoration: none; } @media (max-width: 767px) { .mxo { grid-template-columns: 1fr; gap: 14px; } .mxo__main { grid-column: 1; grid-row: 1; } .mxo-total { grid-column: 1; grid-row: 2; position: static; padding: 16px; } .mxo-sec { padding: 16px; margin-bottom: 12px; } .mxo-sec__title { font-size: 17px; margin-bottom: 12px; } .mxo-grid { grid-template-columns: 1fr; gap: 12px; } .mxo-field--half { grid-column: 1 / -1; } .mxo-seg { display: flex; } .mxo-seg__item { flex: 1 1 0; } .mxo-seg__item span { text-align: center; padding: 9px 8px; } .mxo .mxo-input { font-size: 16px; } /* iOS не зумит поле при 16px */ .mxo-opt__head { flex-wrap: wrap; } .mxo-total__items { max-height: none; } .mxo-done { padding: 24px 18px; } .mxo-done__actions .mxbtn { width: 100%; } } /* =================================================================== ЭТАП 5 — СЛУЖЕБНЫЕ СТРАНИЦЫ (21.09.2026) Класс body.mx-page ставит header.php тестового шаблона на всех страницах, кроме главной, каталога, поиска и личного раздела. Правила ниже действуют только там: типографика текста, контакты, оплата и доставка, статьи. =================================================================== */ /* --- шрифты: у Bitrix-объявления 'Open Sans' нет font-display — текст невидим до загрузки woff (до 3 с). Переобъявляем ту же гарнитуру с swap; preload двух woff — в header.php тестового шаблона. --- */ @font-face { font-family: 'Open Sans'; src: local('Open Sans'), url('/bitrix/js/ui/fonts/opensans/opensans-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* --- читальная типографика --------------------------------------- */ body.mx-page .content .centeringin { padding-bottom: 8px; } body.mx-page .mxpg { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 0 48px; align-items: start; } body.mx-page .mxpg--wide { grid-template-columns: minmax(0, 1fr); } body.mx-page .mxpg__text { grid-column: 1; min-width: 0; } body.mx-page .mxpg__rail { grid-column: 2; position: sticky; top: 24px; max-width: 280px; padding-left: 20px; border-left: 1px solid #e6e9ee; } body.mx-page .mxpg__rail:empty { display: none; } body.mx-page .mxpg__rail b { display: block; margin: 0 0 8px; font-size: 13px; color: #7b8593; font-weight: 600; } body.mx-page .mxpg__rail a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.35; color: #3d4652; text-decoration: none; } body.mx-page .mxpg__rail a:hover, body.mx-page .mxpg__rail a.is-active { color: #C4010C; } body.mx-page .mxpg__text, body.mx-page .mxpg__text p, body.mx-page .mxpg__text li, body.mx-page .mxpg__text td, body.mx-page .mxpg__text div { font-size: 16px; line-height: 1.65; color: #3d4652; } body.mx-page .mxpg__text p { margin: 0 0 16px; } body.mx-page .mxpg__text p:empty, body.mx-page .mxpg__text p > br:only-child { display: none; } body.mx-page .mxpg__text h2, body.mx-page .mxpg__text h3, body.mx-page .mxpg__text h4 { margin: 40px 0 14px; color: #1b2430; font-weight: 700; line-height: 1.25; text-transform: none; letter-spacing: 0; } body.mx-page .mxpg__text h2 { font-size: 22px; } body.mx-page .mxpg__text h3 { font-size: 18px; margin-top: 28px; } body.mx-page .mxpg__text h4 { font-size: 16px; margin-top: 22px; } body.mx-page .mxpg__text h2:first-child, body.mx-page .mxpg__text h3:first-child { margin-top: 0; } body.mx-page .mxpg__text ul, body.mx-page .mxpg__text ol { margin: 0 0 18px; padding-left: 22px; } body.mx-page .mxpg__text ul { list-style: disc; } body.mx-page .mxpg__text ol { list-style: decimal; } body.mx-page .mxpg__text li { margin: 0 0 6px; } body.mx-page .mxpg__text ol > li::before, body.mx-page .mxpg__text ul > li::before { content: none; } /* тема рисует свой номер через ::before — получалось «1. 1Договор» */ body.mx-page .mxpg__text a { color: #1b5fb4; text-decoration: underline; text-decoration-color: rgba(27,95,180,.35); text-underline-offset: 2px; } body.mx-page .mxpg__text a:hover { color: #C4010C; text-decoration-color: currentColor; } body.mx-page .mxpg__text b, body.mx-page .mxpg__text strong { color: #1b2430; } body.mx-page .mxpg__text img { display: block; max-width: 100%; height: auto; margin: 8px 0 20px; border-radius: 8px; } body.mx-page .mxpg__text img[align="left"], body.mx-page .mxpg__text img[style*="float: left"], body.mx-page .mxpg__text img[style*="float:left"] { float: left; margin: 4px 20px 12px 0; max-width: 46%; } body.mx-page .mxpg__text img[align="right"], body.mx-page .mxpg__text img[style*="float: right"], body.mx-page .mxpg__text img[style*="float:right"] { float: right; margin: 4px 0 12px 20px; max-width: 46%; } body.mx-page .mxpg__text table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 15px; } body.mx-page .mxpg__text td, body.mx-page .mxpg__text th { padding: 8px 12px; border-bottom: 1px solid #e6e9ee; vertical-align: top; text-align: left; } body.mx-page .mxpg__text th { color: #1b2430; font-weight: 600; } body.mx-page .mxpg__text hr { margin: 28px 0; border: 0; border-top: 1px solid #e6e9ee; } /* инлайновые стили старых текстов (Georgia, 12px, красный) — гасим, чтобы страница читалась одним голосом */ body.mx-page .mxpg__text [style*="font-family"], body.mx-page .mxpg__text [style*="font-size"] { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; } body.mx-page .mxpg__text [style*="color: #ff0000"], body.mx-page .mxpg__text [style*="color:#ff0000"] { color: #1b2430 !important; font-weight: 700; } body.mx-page .mxpg__text > h2:first-child:empty, body.mx-page .mxpg__text > h2[style*="Georgia"]:empty { display: none; } /* статьи: тема плавает .clauses_img вправо шириной 500px — в колонке 720 текст сжимался до 9 слов в строке */ body.mx-page .mxpg__text .clauses .clauses_img { float: right; width: 46%; max-width: 46%; margin: 4px 0 12px 20px; } body.mx-page .mxpg__text .clauses .clauses_img_center { float: none; width: auto; max-width: 100%; margin: 8px auto 20px; } /* блок «Скачать схему проезда» и прочие кнопки темы внутри текста */ body.mx-page .mxpg__text .btn { display: inline-block; padding: 10px 18px; border-radius: 10px; background: #f1f3f6; color: #1b2430; font-weight: 600; text-decoration: none; } /* --- контакты ------------------------------------------------------ */ .mxc { --gap: 28px; } .mxc__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin: 0 0 44px; } .mxc__addr { margin: 0 0 6px; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 22px; line-height: 1.25; font-weight: 700; color: #1b2430; } .mxc__hours { margin: 0 0 22px; font-size: 15px; color: #7b8593; } .mxc__hours b { color: #1b2430; font-weight: 600; } .mxc__phones { margin: 0 0 22px; padding: 0; list-style: none; } .mxc__phones li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid #e6e9ee; } .mxc__phones li:last-child { border-bottom: 1px solid #e6e9ee; } .mxc__phones a { font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 26px; line-height: 1.1; font-weight: 700; color: #1b2430; text-decoration: none; letter-spacing: -.01em; } .mxc__phones a:hover { color: #C4010C; } .mxc__phones small { font-size: 14px; color: #7b8593; text-align: right; } .mxc__ways { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .mxc__way { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #e6e9ee; border-radius: 10px; background: #fff; color: #1b2430; font-size: 14px; font-weight: 600; text-decoration: none; } .mxc__way svg { width: 18px; height: 18px; } .mxc__way:hover { border-color: #b0b8c2; } .mxc__mail { margin: 14px 0 0; font-size: 15px; color: #7b8593; } .mxc__mail a { font-weight: 600; color: #1b2430; text-decoration: none; } .mxc__mail a:hover { color: #C4010C; } .mxc__map { display: block; position: relative; border-radius: 12px; overflow: hidden; background: #eef1f4; aspect-ratio: 4 / 3; } .mxc__map img { width: 100%; height: 100%; object-fit: cover; display: block; } .mxc__map span { position: absolute; left: 12px; bottom: 12px; padding: 8px 14px; border-radius: 10px; background: #C4010C; color: #fff; font-size: 14px; font-weight: 600; } .mxc__map:hover span { background: #a30109; } .mxc h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.25; font-weight: 700; color: #1b2430; text-transform: none; } .mxc__sec { margin: 0 0 44px; } .mxc__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; } .mxc__photos::-webkit-scrollbar { display: none; } .mxc__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #eef1f4; } .mxc__transit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin: 0; padding: 0; list-style: none; } .mxc__transit li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid #e6e9ee; font-size: 15px; line-height: 1.4; color: #3d4652; } .mxc__transit li svg { width: 20px; height: 20px; margin-top: 1px; color: #7b8593; } .mxc__transit b { color: #1b2430; font-weight: 600; } .mxc__stop { margin: 14px 0 0; font-size: 15px; color: #7b8593; } .mxc__stop b { color: #1b2430; font-weight: 600; } /* Карусель «Как нас найти»: счётчик кадров (только телефон) — 08.10.2026 */ .mxc__gal { position: relative; } .mxc__count { display: none; } /* Реквизиты: вкладки (только телефон) — 08.10.2026 */ .mxc__req-tabs { display: none; } .mxc__req { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .mxc__req-col { padding: 20px 22px; border: 1px solid #e6e9ee; border-radius: 12px; background: #fff; } .mxc__req-col h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #1b2430; } .mxc__req dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 14px; line-height: 1.45; } .mxc__req dt { color: #7b8593; } .mxc__req dd { margin: 0; color: #1b2430; font-weight: 500; word-break: break-word; } .mxc__copy { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; color: #1b2430; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .mxc__copy svg { width: 16px; height: 16px; } .mxc__copy:hover { border-color: #b0b8c2; } .mxc__copy.is-done { border-color: #1a8f3c; color: #1a8f3c; } body.mx-contacts .mxpre__salon { display: none; } /* --- оплата и доставка -------------------------------------------- */ .mxd { display: grid; grid-template-columns: minmax(0, 760px); } .mxd__lead { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: #3d4652; } .mxd h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.25; font-weight: 700; color: #1b2430; text-transform: none; } .mxd__sec { margin: 0 0 40px; } .mxd__opts { display: grid; gap: 10px; margin: 0 0 16px; } .mxd__opt { display: block; padding: 14px 18px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; } .mxd__opt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .mxd__opt-name { font-size: 16px; font-weight: 700; color: #1b2430; } .mxd__opt-price { flex-shrink: 0; font-family: MxOpenSans, Opensans, Arial, sans-serif; font-size: 16px; font-weight: 700; color: #1b2430; white-space: nowrap; } .mxd__opt-price--free { color: #1a8f3c; } .mxd__opt-price--muted { color: #7b8593; font-weight: 600; font-family: inherit; font-size: 14px; } .mxd__opt-note { display: block; margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: #7b8593; } .mxd__opt-note b { color: #3d4652; font-weight: 600; } .mxd__note { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #3d4652; } .mxd__note b { color: #1b2430; font-weight: 600; } .mxd__tk { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; padding: 0; list-style: none; } .mxd__tk a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid #e6e9ee; border-radius: 10px; background: #fff; color: #1b2430; font-size: 14px; font-weight: 600; text-decoration: none; } .mxd__tk a:hover { border-color: #b0b8c2; } .mxd__warn { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 16px; border-radius: 10px; background: #f6f7f9; font-size: 15px; line-height: 1.55; color: #3d4652; } .mxd__warn svg { width: 22px; height: 22px; color: #C4010C; } .mxd__warn b { color: #1b2430; font-weight: 600; } /* --- статьи и новости --------------------------------------------- */ .mxnl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 0 0 24px; } .mxnl__item { display: grid; grid-template-columns: 1fr; gap: 0; padding: 18px 0; border-top: 1px solid #e6e9ee; text-decoration: none; color: inherit; } .mxnl__item--pic { grid-template-columns: 128px 1fr; gap: 16px; } .mxnl__pic { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f6f7f9; } .mxnl__pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .mxnl__name { display: block; margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 700; color: #1b2430; } .mxnl__item:hover .mxnl__name { color: #C4010C; } .mxnl__text { font-size: 14px; line-height: 1.5; color: #7b8593; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mxnl__text p { margin: 0; display: inline; } .mxnl__date { display: block; margin: 8px 0 0; font-size: 13px; color: #8a94a2; } .mxnd__pic { margin: 0 0 22px; } .mxnd__pic img { display: block; max-width: 100%; height: auto; border-radius: 10px; } .mxnd__bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid #e6e9ee; font-size: 14px; color: #7b8593; } .mxnd__bot a { color: #1b2430; font-weight: 600; text-decoration: none; } .mxnd__bot a:hover { color: #C4010C; } /* пагинация темы под списком — компактнее */ body.mx-page .mxnl + .navigation, body.mx-page .mxnl + div .navigation { margin-top: 0; } @media (max-width: 1100px) { body.mx-page .mxpg { grid-template-columns: minmax(0, 1fr); } body.mx-page .mxpg__rail { display: none; } } @media (max-width: 767px) { body.mx-page .mxpg__text, body.mx-page .mxpg__text p, body.mx-page .mxpg__text li, body.mx-page .mxpg__text td, body.mx-page .mxpg__text div { font-size: 15px; line-height: 1.6; } body.mx-page .mxpg__text h2 { font-size: 20px; margin-top: 30px; } body.mx-page .mxpg__text h3 { font-size: 17px; } body.mx-page .mxpg__text img[align="left"], body.mx-page .mxpg__text img[align="right"], body.mx-page .mxpg__text img[style*="float"] { float: none; max-width: 100%; margin: 8px 0 16px; } body.mx-page .mxpg__text table { display: block; overflow-x: auto; } body.mx-page .mxpg__text .clauses .clauses_img { float: none; width: 100%; max-width: 100%; margin: 8px 0 16px; } .mxc__top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; } .mxc__addr { font-size: 19px; } .mxc__phones a { font-size: 22px; } .mxc__phones li { grid-template-columns: 1fr; gap: 2px; } .mxc__phones small { text-align: left; } .mxc__map { aspect-ratio: 16 / 10; } .mxc__sec { margin-bottom: 32px; } .mxc h2, .mxd h2 { font-size: 20px; } .mxc__photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px; } .mxc__photos::-webkit-scrollbar { display: none; } .mxc__photos img { flex: 0 0 auto; width: 72%; scroll-snap-align: start; } .mxc__transit { grid-template-columns: 1fr; gap: 0; } .mxc__req { grid-template-columns: 1fr; gap: 14px; } .mxc__count { display: block; position: absolute; top: 10px; left: 22px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: rgba(27, 36, 48, .72); color: #fff; font-size: 13px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; pointer-events: none; } .mxc__req-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0; border-radius: 12px; background: #eef1f4; } .mxc__req-tab { height: 40px; border: 0; border-radius: 9px; background: transparent; color: #3d4652; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .mxc__req-tab[aria-selected="true"] { background: #fff; color: #1b2430; box-shadow: 0 1px 2px rgba(27, 36, 48, .12); } .mxc__req-tab:focus-visible { outline: 2px solid #C4010C; outline-offset: 1px; } .mxc__req-col h3 { display: none; } .mxc__req-col[hidden] { display: none; } .mxc__req dl { grid-template-columns: 1fr; gap: 2px 0; } .mxc__req dt { margin-top: 8px; font-size: 13px; } .mxc__req dl > dt:first-child { margin-top: 0; } .mxd__sec { margin-bottom: 30px; } .mxd__opt-head { flex-wrap: wrap; gap: 4px 12px; } .mxnl { grid-template-columns: 1fr; gap: 0; } .mxnl__item--pic { grid-template-columns: 96px 1fr; gap: 12px; } .mxnl__name { font-size: 16px; } } /* Быстрый просмотр только для ПК: скрипт ставит кнопки при загрузке на широком экране, при сужении окна их прячем — 08.10.2026 */ @media (max-width: 767px) { .mxqv-btn { display: none !important; } } /* Список статей: при наведении ничего не подчёркиваем (тема подчёркивает все ссылки) — 08.10.2026 */ .mxnl__item, .mxnl__item:hover, .mxnl__item *, .mxnl__item:hover * { text-decoration: none !important; } /* =================================================================== НИЖНЕЕ МЕНЮ НА ТЕЛЕФОНЕ (этап 1.4 КП, 08.10.2026) — разметку строит custom/script.js =================================================================== */ @media (max-width: 767px) { html.mx-has-nav #rs_easycart { display: none !important; } html.mx-has-nav body { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; } html.mx-drawer-open .mxnav { display: none; } .mxnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; background: #fff; border-top: 1px solid #e1e5ea; } .mxnav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 0; padding: 0; border: 0; background: none; color: #3d4652 !important; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mxnav__item svg { width: 24px; height: 24px; } .mxnav__item.is-active { color: #C4010C !important; } .mxnav__item:active { background: #f3f5f7; } .mxnav__item:focus-visible { outline: 2px solid #C4010C; outline-offset: -4px; } .mxnav__cnt { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #C4010C; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .mxnav__cnt[hidden] { display: none; } } /* Разделённое меню на телефоне (08.10.2026): экран каталога на всю ширину + кнопка «Каталог товаров» в «Меню» */ @media (max-width: 767px) { .mxdrawer--catalog .mxdrawer__panel { width: 100%; max-width: none; box-shadow: none; } .mxdrawer__catbtn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 15px 16px; border: 0; border-bottom: 1px solid #eef1f5; background: #fff; color: #1b2430; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; } .mxdrawer__catbtn svg { width: 22px; height: 22px; flex: 0 0 22px; color: #C4010C; } .mxdrawer__catbtn::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-top: 2px solid #9aa4b2; border-right: 2px solid #9aa4b2; transform: rotate(45deg); } .mxdrawer__catbtn:active { background: #f3f5f7; } #mxdrawer .mxdrawer__body:has(.mxdrawer__catbtn) { background: #f7f9fc; } } /* Липкая шапка на телефоне (08.10.2026): шапка и раньше стояла поверх отступа .body (его считает header_type1.php), теперь она фиксирована у верхнего края. Слой 1000: над нижним меню (900), под окнами (быстрый просмотр 10040, fancybox). */ @media (max-width: 767px) { #header-wrapper { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; } html.mx-search-open.mx-scrolled #header-wrapper { box-shadow: 0 1px 0 #e1e5ea; } html.mx-scrolled #header-wrapper .tpanel { box-shadow: 0 1px 0 #e1e5ea; } } /* Панель «Связаться» вместо плавающей кнопки звонка (08.10.2026) */ @media (max-width: 767px) { html.mx-has-nav .mxcall { display: none !important; } .mxsheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100; } .mxsheet[hidden] { display: none; } .mxsheet__back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 20, 28, .45); opacity: 0; transition: opacity .2s; } .mxsheet.is-open .mxsheet__back { opacity: 1; } .mxsheet__box { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0 calc(10px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: #fff; transform: translateY(100%); transition: transform .22s ease; } .mxsheet.is-open .mxsheet__box { transform: none; } .mxsheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; } .mxsheet__head b { font-size: 16px; color: #1b2430; } .mxsheet__close { padding: 0 4px; border: 0; background: none; font-size: 28px; line-height: 1; color: #9aa4b2; cursor: pointer; } .mxsheet__row { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 10px 16px; border: 0; background: none; color: #1b2430 !important; font: inherit; text-align: left; text-decoration: none !important; cursor: pointer; } .mxsheet__row:active { background: #f3f5f7; } .mxsheet__row b { display: block; font-size: 15px; font-weight: 600; } .mxsheet__row small { display: block; margin-top: 2px; font-size: 13px; color: #7b8593; } .mxsheet__ico { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; } .mxsheet__ico svg { width: 22px; height: 22px; } } /* Пресеты цены в фильтре (09.10.2026) */ .ukf__presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }