/* Serikov Coffee 2026 — каталог в стиле главной. Разметку компонентов не трогаем: и список товаров, и детальная карточка продолжают работать на своих шаблонах со всей логикой предложений, цен и корзины. Меняется только внешний вид. Переменные и шрифты приходят из site-hf.css, он подключён во всём шаблоне. */ /* ---------- Общая колонка страницы ---------- */ .container:has(.catalog-sc2026), body:not(.sc2026-home) main.page-wrapper > .container{max-width:calc(1440 * var(--d) + 80px); padding-left:calc(40 * var(--d));padding-right:calc(40 * var(--d))} /* ---------- Заголовок раздела ---------- */ main.page-wrapper h1{font-family:var(--font);font-weight:900;text-transform:uppercase; font-size:calc(48 * var(--u));line-height:1.02;letter-spacing:-.01em;color:var(--ink)} /* ---------- Карточка товара в списке ---------- Тема рисует её как .card-hover с серым фоном и мелким скруглением. Приводим к виду карточек с главной: белая, скруглённая, с цветной рамкой. */ .card-hover{background:#fff !important;border:1px solid var(--tile-line);box-shadow:var(--tile-shadow);border-radius:calc(36 * var(--u)) !important; transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease} .card-hover:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(20,40,20,.13)} /* Обводка — в цвет кнопки «В корзину», одна на все карточки. Раньше здесь были четыре акцента по кругу (4n+1..4n+4). */ .row > .col .card-hover{border-color:var(--tile-line)} /* Название товара */ .card-hover + div a, .col > a[href^="/catalog/"]{font-family:var(--font);font-weight:700;color:var(--ink);text-decoration:none} .col > a[href^="/catalog/"]:hover{color:var(--green-brand)} /* Цена */ .col .h5, .col .h6, .col .fw-bold{font-family:var(--font)} /* ---------- Кнопки ---------- */ main.page-wrapper .btn-primary{background:var(--green-brand);border-color:var(--green-brand); font-family:var(--font);font-weight:700;border-radius:999px} main.page-wrapper .btn-primary:hover{background:var(--green-deep-2);border-color:var(--green-deep-2)} main.page-wrapper .btn-outline-primary{color:var(--green-brand);border-color:var(--green-brand); font-family:var(--font);font-weight:700;border-radius:999px} main.page-wrapper .btn-outline-primary:hover{background:var(--green-brand);border-color:var(--green-brand)} /* ---------- Умный фильтр ---------- Внешний вид приводим к общему, но ни одной структурной правки: поля, чекбоксы и скрипты фильтра остаются как есть. */ .smart-filter .accordion-button, [class*="smart-filter"] .accordion-button{font-family:var(--font);font-weight:700;color:var(--ink)} .accordion-item{border-radius:calc(20 * var(--u));border-color:var(--line)} main.page-wrapper .form-check-label{font-family:var(--font)} /* ---------- Хлебные крошки ---------- */ main.page-wrapper .breadcrumb, main.page-wrapper [class*="breadcrumb"]{font-family:var(--font);font-size:calc(15 * var(--u))} main.page-wrapper [class*="breadcrumb"] a{color:var(--ink-soft);text-decoration:none} main.page-wrapper [class*="breadcrumb"] a:hover{color:var(--green-brand)} /* ---------- Детальная карточка товара ---------- Разметку компонента не меняем: выбор веса, цены и добавление в корзину работают на его собственных скриптах. Приводим только внешний вид к макету — как в прототипе product.html. */ /* Метка «Хит продаж» — как ярлычки на карточках главной */ main.page-wrapper .badge.bg-faded-danger{background:#ffe9d6 !important;color:#c2410c !important; font-family:var(--font);font-weight:700;font-size:calc(14 * var(--u)); border-radius:999px;padding:calc(7 * var(--u)) calc(16 * var(--u))} /* Выбор веса: вместо чёрных прямоугольников — пилюли в фирменном зелёном */ .product-detail-scu-item-text-block{border:none !important;background:none !important} .product-detail-scu-item-text{font-family:var(--font) !important;font-weight:700 !important; border:2px solid var(--line) !important;border-radius:999px !important; padding:calc(9 * var(--u)) calc(22 * var(--u)) !important;background:#fff !important;color:var(--ink) !important; transition:border-color .2s ease,color .2s ease} .product-detail-scu-item-text:hover{border-color:var(--green-brand) !important;color:var(--green-brand) !important} li.selected .product-detail-scu-item-text, .selected > .product-detail-scu-item-text-block .product-detail-scu-item-text{ background:var(--green-brand) !important;border-color:var(--green-brand) !important;color:#fff !important} /* Цена */ main.page-wrapper .product-item-detail-price-current, main.page-wrapper .h3.mb-0{font-family:var(--font);font-weight:900;color:var(--green-deep-2)} /* Количество */ main.page-wrapper .product-item-amount-field-block, main.page-wrapper .product-item-detail-info-container .input-group{border-radius:999px;overflow:hidden} /* Заголовки блоков описания и характеристик */ /* Только заголовки, которым никто не задал размер сам. Раньше правило било по любому h2 внутри страницы — в том числе по «Хитам обжарки» на главной, и заголовок секции выходил 27 px вместо сорока. */ /* Только внутри каталога, детальной и документов. Раньше правило било по любому h2/h3 страницы — в том числе по заголовку секции на главной и по названиям плиток, и держало их на 27 и 21 px вместо 40 и 24. */ .catalog-sc2026 h2, .catalog-sc2026 h3, .pdp h2, .pdp h3, main.page-wrapper .doc h2, main.page-wrapper .doc h3{font-family:var(--font);font-weight:900; text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)} .catalog-sc2026 h2,.pdp h2,main.page-wrapper .doc h2{font-size:calc(34 * var(--u))} .catalog-sc2026 h3,.pdp h3,main.page-wrapper .doc h3{font-size:calc(26 * var(--u))} /* Свойства товара */ main.page-wrapper .product-item-detail-properties dt{font-family:var(--font);color:var(--ink-soft);font-weight:500} main.page-wrapper .product-item-detail-properties dd{font-family:var(--font);font-weight:700} /* ---------- Состояние загрузки списка товаров ---------- Класс вешает newdesign/filter.js на [data-sc-catalog-result] (колонка с чипсами активного фильтра и списком товаров) на время запроса и снимает после перерисовки. Здесь только приглушение и запрет кликов, чтобы не нажать по старым карточкам; анимацию загрузки заказчик добавит сюда же. Высоту на время запроса держит сам filter.js (инлайновый min-height), чтобы при коротком результате страница не схлопывалась рывком — в CSS её не задавайте, иначе колонка застынет растянутой. */ [data-sc-catalog-result].sc-catalog-loading{opacity:.45;pointer-events:none; transition:opacity .15s ease} /* ========================================================================== ФИЛЬТР И ПАГИНАЦИЯ ПО НАБОРУ ИЗ МАКЕТА (Frame 639) Размеры и цвета — из docs/DESIGN-SYSTEM-FIGMA.md, картинки — из newdesign/img/kit/. Ничего не подбираем на глаз: если числа нет в справочнике, оно взято из самого SVG (в файлах проставлены width/height). Файл подключён на всех страницах (header.php), поэтому селекторы здесь привязаны к формам фильтра, к блоку пагинации и к модалке города — мимо них правила не выходят. ========================================================================== */ /* ---------- 1. Значок подсказки у заголовка свойства ---------- Был серый «i» иконочного шрифта (ai-circle-info). По набору это жёлтый круглый знак вопроса, и стоит он верхним индексом вплотную к слову, а не отдельной иконкой на строке. Размер знака в этом месте макета не задан — поэтому он привязан к кеглю заголовка (0.62em), а не к абсолютным 18,972×19,003 из строки значков: рядом с «Страна» полноразмерный кружок был бы выше самой буквы. */ .smart-filter-form .accordion-button .sc-fhint{ display:inline-block;width:.62em;height:.62em;margin-left:.12em; /* Reboot задаёт тегу sup сразу три вещи: font-size:.75em, position:relative и top:-.5em. Кегль там множился бы на наш .62em — вышло бы .47em от заголовка, около 9px вместо 12; а top поднимал бы значок вторым слоем поверх флексового выравнивания. Гасим обе помехи: специфичность (0,3,0) против (0,0,1) у Reboot — без !important. */ font-size:1em;position:static;top:auto; vertical-align:super;line-height:0; /* .accordion-button у Бутстрапа — display:flex с align-items:center, и в нём vertical-align молчит: значок встал бы серединой на середину строки. Единственный подъём — этот margin-top; align-self:flex-start убран, он прижимал значок к верху всей строки (1,5em) и тот отрывался от слова. Откуда −.18em: у центрированного флекс-элемента отрицательный верхний отступ поднимает его на половину своей величины. Базовая линия текста всегда на .30em ниже середины строки (от межстрочного не зависит), верх заглавных — ещё на .70em выше, то есть на .40em выше середины. Значок высотой .62em центром стоит на .31em ниже своего верха, поднять его надо на .09em → margin-top −.18em. Тогда верх кружка вровень с заглавной буквой, как в макете. В обычном (не флексовом) потоке отступ почти не виден, и верхний индекс держит vertical-align. */ margin-top:-.18em; background:url(img/kit/icon-question.svg) center/contain no-repeat; cursor:help} /* ---------- 2. Список значений: галочка в квадрате ---------- По набору отмеченный пункт — зелёная галочка в квадрате (checkbox-on.svg, 15×14: галочка выступает за квадрат вправо вверх), неотмеченный — пустой квадрат (checkbox-off.svg, 12×12). Поэтому поле всегда 15×14, а пустой квадрат рисуется в его левом нижнем углу — тогда обводка у обоих состояний стоит на одном месте и строка не дёргается. Круги, которые были у неотмеченных, — это скругление .form-check-input из темы; гасим его вместе с рамкой и своей заливкой. */ /* РАЗМЕР ГАЛОЧКИ — одной переменной. Герман 22.09.2026: «галочки надо сделать крупнее». По набору поле 15×14 единиц макета, на ноутбуке это около 11 пикселей рядом с подписью в 16 (её подняли в тот же день). Теперь ширина поля --cb-w: не меньше 20px, на широком экране 22 единицы; высота и пустой квадрат считаются от неё в тех же пропорциях набора (15:14 и 12 из 15), поэтому обе картинки по-прежнему встают на одно место. Отступ строки слева и сдвиг поля тоже от неё — раньше это были три разных числа, и поменять одно без других значило сдвинуть галочку с края. Сенсорные экраны переопределяют только --cb-w и --cb-gap (ниже, блок pointer:coarse), выравнивание двухстрочных пунктов в filter-ui.css берёт высоту из --cb-h. */ .smart-filter-form .form-check{ --cb-w:max(20px, calc(22 * var(--u))); --cb-h:calc(var(--cb-w) * 14 / 15); --cb-gap:max(9px, calc(10 * var(--u))); display:flex;align-items:center; min-height:calc(30 * var(--u));margin-bottom:calc(4 * var(--u)); padding-left:calc(var(--cb-w) + var(--cb-gap))} .smart-filter-form .form-check .form-check-input[type=checkbox]{ flex:none;float:none; width:var(--cb-w);height:var(--cb-h); /* Справа — тот же зазор --cb-gap. Строка — флекс, и отрицательный сдвиг слева уменьшает место, которое поле занимает в ряду: без правого отступа подпись вставала вплотную к галочке (так было и с полем 15×14, просто на мелкой галочке это меньше бросалось в глаза). */ margin:0 var(--cb-gap) 0 calc(-1 * (var(--cb-w) + var(--cb-gap))); -webkit-appearance:none;appearance:none; border:0;border-radius:0;box-shadow:none;background-color:transparent; background-image:url(img/kit/checkbox-off.svg); background-repeat:no-repeat; background-size:calc(var(--cb-w) * 12 / 15) calc(var(--cb-w) * 12 / 15); background-position:left bottom; cursor:pointer} .smart-filter-form .form-check .form-check-input[type=checkbox]:checked{ background-color:transparent; background-image:url(img/kit/checkbox-on.svg); background-size:100% 100%; background-position:center} .smart-filter-form .form-check .form-check-input[type=checkbox]:disabled{opacity:.4} /* Фокус с клавиатуры — свечение по силуэту галочки из набора, без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2). */ .smart-filter-form .form-check .form-check-input[type=checkbox]:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Тап-цель строки на сенсорных экранах. Спрашиваем не про ширину окна, а про способ ввода: на планшете строку уже поднимает mobile/tablet.css, а на телефоне правил для фильтра нет вовсе — здесь они и появляются. */ @media (pointer:coarse){ .smart-filter-form .form-check{min-height:44px} } /* Подпись пункта — Regular 15 / 130 % по справочнику. Утилиты темы .text-nav .fw-medium с подписи сняты в самой разметке (.default/template.php): они собираются с !important, и перебить их специфичностью нельзя — подпись оставалась бы Medium. Теперь вес и цвет задаются отсюда обычно. Вес селектора нарочно (0,2,0): в мобильном слое подпись задана как main.page-wrapper .form-check-label — (0,2,1), и там она в пикселях. Если написать здесь три класса, мобильные размеры перестанут работать. */ .smart-filter-form .form-check-label{ display:flex;align-items:center;width:100%;cursor:pointer; font-family:var(--font);font-weight:400; font-size:max(16px, calc(18 * var(--u)));line-height:1.3;color:var(--ink)} /* Кегль выше справочника (там 15). Герман 22.09.2026: «сделаем текст крупнее в фильтрах, именно текст раскрывающегося выбора». На ноутбуке --u около 0,8, и 15 единиц давали 12 пикселей рядом с заголовками групп вдвое крупнее. Пол 16px держит подпись читаемой на любом экране, на широком она растёт до 18 единиц макета. */ /* .sc-fval — наша обёртка вокруг названия значения (бывшие утилиты темы). Кегль ей не задаём: он наследуется от подписи, и мобильные пиксели доходят вниз без отдельного правила. */ .smart-filter-form .form-check-label > .sc-fval{ font-weight:400;color:inherit} /* ---------- 3. Чипсы активного фильтра и «Сбросить фильтр» ---------- Из набора: белая кнопка с зелёной обводкой обычного размера — высота 40, колпачки 22,506×40 (kit-12/kit-18, копии в img/kit/cap40-line-*.svg), подпись Medium 17 / 115 %. Середина между колпачками — две линии 2px сверху и снизу, как у контурной кнопки в наборе: 2/40 = 0.05 высоты. Всё описано полностью, без опоры на .pbtn-line из site.css, — у той другие колпачки (под высоту 54) и подъём при наведении. */ .smart-filter-form .sc-fchip, .smart-filter-form .sc-freset{ --btn-h:calc(40 * var(--u)); --cap:calc(var(--btn-h) * 0.56265); /* 22,506 / 40 */ --line-h:calc(var(--btn-h) * 0.05); /* обводка 2 при высоте 40 */ display:inline-flex;align-items:center;justify-content:center; gap:calc(8 * var(--u)); min-height:var(--btn-h);padding:0 calc(20 * var(--u)); /* Уже двух колпачков (2 × 22,506) кнопка быть не может: середина считается как 100% − 2 × --cap и на меньшей ширине ушла бы в минус. */ min-width:calc(56 * var(--u)); border:0;border-radius:0;cursor:default;text-decoration:none;white-space:nowrap; font-family:var(--font);font-weight:500; font-size:calc(17 * var(--u));line-height:1.15; color:var(--green-deep-2);background-color:transparent; background-repeat:no-repeat; /* Белая середина — пятым слоем только между колпачками (+2px на их белые полоски), а не background-color на всю коробку: с заливкой коробки углы за дугами оставались белым прямоугольником, и свечение фокуса у «Сбросить» шло по нему, а не по скосу (правило «без обводки», BRAND-RULES §3.2). Слой последний — лежит под остальными. */ background-image:url(img/kit/cap40-line-l.svg),url(img/kit/cap40-line-r.svg), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(#fff,#fff); background-position:left center, right center, center top, center bottom, center; background-size:auto 100%, auto 100%, calc(100% - 2 * var(--cap)) var(--line-h), calc(100% - 2 * var(--cap)) var(--line-h), calc(100% - 2 * var(--cap) + 2px) 100%} .smart-filter-form .sc-freset{cursor:pointer;transition:color .2s} .smart-filter-form .sc-freset:hover{color:var(--green-brand)} /* Фокус с клавиатуры — свечение по скошенному контуру, без прямоугольной обводки (правило «без обводки», §3.2). */ .smart-filter-form .sc-freset:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Ряд чипсов: раньше отступы задавали классы me-2 mb-2 у бутстраповской пилюли, теперь их нет — расстояние держит сам ряд. */ .smart-filter-form:has(.sc-fchip){ display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--u))} .smart-filter-form .sc-fchip-t{white-space:nowrap} /* Крестик — настоящая кнопка с подписью для читалки. Сам кружок мелкий, и поверх него лежит прозрачный слой: по высоте 44px, вширь всего на 6px за край. Растянуть слой до 44px и вширь нельзя — он вылез бы за чипс и перехватывал нажатия у соседнего. */ .smart-filter-form .sc-fchip-x{ position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center; width:calc(18 * var(--u));height:calc(18 * var(--u)); padding:0;border:0;background:none;cursor:pointer; color:var(--green-brand);font-size:calc(18 * var(--u));line-height:1; transition:color .2s} .smart-filter-form .sc-fchip-x:hover{color:var(--cart)} .smart-filter-form .sc-fchip-x::after{ content:"";position:absolute;top:50%;left:-6px;right:-6px; height:44px;transform:translateY(-50%)} /* Фокус с клавиатуры — свечение по кружку крестика, без обводки (правило «без обводки», §3.2); тап-цель ::after прозрачная и не светится. */ .smart-filter-form .sc-fchip-x:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* ---------- 4. Пагинация ---------- Разметку рисует штатный bitrix:system.pagenavigation (.default) — она лежит на сервере, в репозитории её нет. Классы у него постоянные: .modern-page-navigation, .modern-page-current, .modern-page-previous, .modern-page-next, .modern-page-dots. Оформляем по ним. font-size:0 у контейнера гасит текстовые узлы, которые между ссылками пишет сам компонент («Страницы:», разделители «|»), — до них селектором не дотянуться, а обнулённый кегль их прячет. Каждый потомок кегль возвращает себе сам. */ .modern-page-navigation{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:calc(8 * var(--u));margin:calc(28 * var(--u)) 0; font-family:var(--font);font-size:0} /* Страховка: обнулённый кегль наследуется вглубь. Если компонент вдруг вернёт ссылки завёрнутыми (список, обёртки), содержимое всё равно останется видимым — прячутся только текстовые узлы самого контейнера. */ .modern-page-navigation *{font-size:calc(19 * var(--u))} .modern-page-navigation .modern-page-title, .modern-page-navigation > b{display:none} /* ВНИМАНИЕ: имена файлов квадратов не совпадают с их содержимым — их перепутали при выгрузке из макета. Смотрите внутрь, а не на имя: img/kit/page-active.svg (= kit-4) — ДВА подконтура, дырка внутри, то есть НЕзалитый квадрат-обводка; img/kit/page-plain.svg (= kit-17) — ОДИН контур, сплошная заливка цветом бренда. По набору активная страница залита брендом с белой цифрой, остальные — обводка с зелёной цифрой, поэтому адреса здесь стоят «наперекрёст». Переименовывать файлы не стал: они за пределами этой правки, ссылок на них больше нигде нет — переименование и правка docs вынесены в отчёт. */ /* Квадрат страницы: рукотворная обводка 29,005×27,949, цифра Black 19, межстрочный 85 %. */ .modern-page-navigation > a, .modern-page-navigation > span{ position:relative; display:inline-flex;align-items:center;justify-content:center; width:calc(29.005 * var(--u));height:calc(27.949 * var(--u)); font-weight:900;font-size:calc(19 * var(--u));line-height:.85; color:var(--green-brand);text-decoration:none; /* обводка без заливки — зелёная цифра остаётся читаемой */ background:url(img/kit/page-active.svg) center/100% 100% no-repeat} /* Тап-цель поверх квадрата: по высоте до 44px, по ширине — почти вровень. Вширь слой не растим: промежуток между квадратами 8, и слои соседей начали бы перехватывать нажатия друг у друга. */ .modern-page-navigation > a::after{ content:"";position:absolute;top:50%;left:-2px;right:-2px; height:44px;transform:translateY(-50%)} /* Фокус с клавиатуры — свечение по рукотворному квадрату, без прямоугольной обводки (правило «без обводки», §3.2). Это ссылки, без правила им досталось бы кольцо a:focus-visible из site.css. */ .modern-page-navigation > a:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Текущая страница — залита брендом, цифра белая. Заливка лежит в page-plain.svg (см. предупреждение об именах выше). */ .modern-page-navigation > span.modern-page-current, .modern-page-navigation > a.modern-page-current{ color:#fff;background-image:url(img/kit/page-plain.svg)} /* Многоточие между группами — без квадрата. */ .modern-page-navigation > span.modern-page-dots{ width:auto;height:auto;background:none; color:var(--green-brand);font-size:calc(19 * var(--u))} /* Стрелки по краям. Подписи «Пред.»/«След.» компонент пишет текстом внутри ссылки — гасим их кеглем, а стрелку рисуем фоном нужного размера: влево 13,652×15,482, вправо 12,132×10,455. */ .modern-page-navigation > a.modern-page-previous, .modern-page-navigation > a.modern-page-next, .modern-page-navigation > a.modern-page-first, .modern-page-navigation > a.modern-page-last{ width:calc(28 * var(--u));height:calc(28 * var(--u)); font-size:0;color:transparent;background-image:none} /* Если подпись стрелки завёрнута в тег, кегль ей вернула бы страховка выше — гасим и вложенное. */ .modern-page-navigation > a.modern-page-previous *, .modern-page-navigation > a.modern-page-next *, .modern-page-navigation > a.modern-page-first *, .modern-page-navigation > a.modern-page-last *{font-size:0;color:transparent} .modern-page-navigation > a.modern-page-previous::before, .modern-page-navigation > a.modern-page-next::before, .modern-page-navigation > a.modern-page-first::before, .modern-page-navigation > a.modern-page-last::before{ content:"";display:block} .modern-page-navigation > a.modern-page-previous::before, .modern-page-navigation > a.modern-page-first::before{ width:calc(13.652 * var(--u));height:calc(15.482 * var(--u)); background:url(img/kit/page-prev.svg) center/100% 100% no-repeat} .modern-page-navigation > a.modern-page-next::before, .modern-page-navigation > a.modern-page-last::before{ width:calc(12.132 * var(--u));height:calc(10.455 * var(--u)); background:url(img/kit/page-next.svg) center/100% 100% no-repeat} /* ---------- 5. Города в модалке выбора города — НЕ ВОСПРОИЗВЁЛ ---------- Заказчик обвёл красным светло-зелёную заливку у «Караганды» и «Астаны» при чистой «Алматы». Правила отсюда убраны: они дословно повторяли site.css («.sc-city-major button» — border 1.5px var(--green-brand), background #fff, color var(--green-deep-2)), то есть ничего не меняли, а только запутывали каскад. Источник светлой заливки грепом не нашёлся: var(--green-pale) на этих кнопках не задаёт ни site.css, ни mobile/header.css, ни mobile/tablet.css, ни mobile/landscape.css; наведение в site.css даёт ТЁМНО-зелёную заливку, так что версия «залипший hover» тоже не сходится. Крючок под выбранный город тоже убран: header.php выводит кнопки без aria-pressed и ни один скрипт (newdesign/city.js) его не ставит — правило было мёртвым. Что нужно, чтобы доделать, — в отчёте. */ /* ========================================================================== 5б. «−0 %» НА КАРТОЧКЕ БЕЗ СКИДКИ Что было. Блок прежней цены (.price-old) печатается в карточке всегда, а когда скидки нет — с атрибутом hidden. Прятать его должно было браузерное правило [hidden]{display:none}, но в site.css у него стоит `.pcard .price-old{display:inline-flex}` весом (0,2,0) — оно перебивает и браузерное правило, и любое правило в один класс. Из-за этого на КАЖДОЙ карточке висело «−0 %» и пустое место от зачёркнутой цены. Почему правило, а не только правка шаблона. Шаблон (newdesign/ product-card.php) теперь вовсе не печатает узел, если скидки нет ни у одной фасовки, — это основная починка. Но узел остаётся у товаров, где скидка есть хотя бы у одного веса: там он приходит скрытым, а показывает его packs.js при переключении фасовки (oldBox.hidden = false/true). Без этого правила такой узел был бы виден всегда, и «−0 %» вернулось бы на части карточек. Вес селектора (0,3,0) — на один атрибут больше, чем у правила в site.css; !important не нужен. Файл грузится после site.css (header.php). ========================================================================== */ .pcard .price-old[hidden]{display:none} /* ========================================================================== 6. СЕНСОРНЫЕ ЭКРАНЫ: размеры фильтра и пагинации в пикселях Почему вообще нужен этот блок. Все размеры выше считаются от --u, а он в site.css объявлен как clamp(.70px, min(.0576vw,.1005vh), 1.085px). На телефоне (ширина 360–430) min(...) уходит в сотые доли и --u упирается в нижнюю границу .70px. Тогда подпись 15*--u = 10,5px, поле чекбокса 10,5×9,8px, чипс и «Сбросить фильтр» 40*--u = 28px, квадрат страницы 20×19,5px — и читаемость, и тап-цели (правило проекта: ≥44px) уходят. Почему @media (pointer:coarse), а не диапазоны ширины. Такой блок уже есть в этом файле выше (строка про .form-check) — продолжаем его логику, чтобы не заводить в одном файле два разных механизма. Спрашиваем про способ ввода: десктоп с мышью сюда не попадает вовсе, а планшет и телефон — попадают оба, включая альбомную ориентацию. Соседство с мобильным слоем: mobile/tablet.css грузится позже и держит .form-check/.form-check-label весом (0,2,1) — там те же 44px и 16px, поэтому расхождения нет; остального (чекбокс, чипсы, пагинация) в мобильном слое нет вообще, и эти правила там единственные. По-хорошему всё это место — newdesign/mobile/filter.css; вынести туда попросил в отчёте, тогда отсюда блок можно удалить целиком. ========================================================================== */ @media (pointer:coarse){ /* Строка значения: отступ слева и отрицательный сдвиг поля обязаны совпадать по модулю, иначе галочка съедет с края строки. */ /* Палец: поле 22px (было 15). Отступ, сдвиг и пустой квадрат пересчитываются от переменных сами — правило выше. */ .smart-filter-form .form-check{margin-bottom:4px;--cb-w:22px;--cb-gap:10px} .smart-filter-form .form-check-label{font-size:16px} /* Кнопка из набора: высота 44 вместо 40 — тап-цель. Ширина колпачка и толщина линий считаются от --btn-h, поэтому меняем только её. min-width задаём формулой: уже двух колпачков кнопка быть не может, середина считается как 100% − 2 × --cap и ушла бы в минус. */ .smart-filter-form .sc-fchip, .smart-filter-form .sc-freset{ --btn-h:44px; gap:8px;padding:0 16px; min-width:calc(2 * var(--cap) + 16px); font-size:17px} .smart-filter-form:has(.sc-fchip){gap:10px} /* Крестик: сам кружок 18 по набору, прозрачный слой поверх него (::after выше) уже даёт 44px по высоте и +6px по бокам — вширь не растим, иначе слой соседнего чипса начнёт перехватывать нажатия. */ .smart-filter-form .sc-fchip-x{width:18px;height:18px;font-size:18px} /* Пагинация: квадрат 29,005×27,949 и цифра Black 19 — как в наборе. Высоту тап-цели поверх квадрата держит ::after (44px), он в пикселях задан изначально и здесь не нужен. */ .modern-page-navigation{gap:8px;margin:28px 0} .modern-page-navigation *{font-size:19px} .modern-page-navigation > a, .modern-page-navigation > span{ width:29.005px;height:27.949px;font-size:19px} .modern-page-navigation > span.modern-page-dots{font-size:19px} .modern-page-navigation > a.modern-page-previous, .modern-page-navigation > a.modern-page-next, .modern-page-navigation > a.modern-page-first, .modern-page-navigation > a.modern-page-last{width:28px;height:28px} .modern-page-navigation > a.modern-page-previous::before, .modern-page-navigation > a.modern-page-first::before{ width:13.652px;height:15.482px} .modern-page-navigation > a.modern-page-next::before, .modern-page-navigation > a.modern-page-last::before{ width:12.132px;height:10.455px} } /* ========================================================================== ВЫБОР ПОРЯДКА ВЫДАЧИ — ОДНА СТРАХОВОЧНАЯ СТРОКА Разметку ряда сортировки печатает section.php комплексного компонента каталога, а всё её оформление живёт в отдельном файле newdesign/catalog-sort.css (и переход по списку — в catalog-sort.js). Пока эти два файла не подключены в header.php/footer.php, на КАЖДОЙ странице раздела было бы видно сразу два органа управления: ряд ссылок (он работает и без стилей, и без скрипта) и рядом голый системный список