/* ==========================================================================
   Serikov Coffee 2026 — ФИЛЬТР КАТАЛОГА: цена, кнопки, длинные списки

   Что здесь и почему отдельным файлом. В catalog.css уже лежит оформление
   фильтра (галочки, подписи, чипсы, подсказка) — оно не меняется. Этот файл
   добавляет то, чего там не было вовсе: шкалу диапазона цены, поля «от/до»,
   кнопки «Показать»/«Сбросить» фирменной формы и сворачивание длинных
   списков значений. Отдельный файл — правило проекта: новый блок = новый
   файл, чужие не трогаем.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ. Файл должен идти ПОСЛЕ catalog.css и ПОСЛЕ site.css:
   часть правил здесь перебивает их равной специфичностью и порядком (об
   этом сказано у каждого такого правила). Мобильный слой newdesign/mobile/*
   грузится ещё позже, но пересечений имён с ним нет — ни .sc-price-f, ни
   .sc-flist, ни .smart-filter-slider-* там не встречаются.

   ЧТО ПЕРЕБИВАЕМ ИЗ КОРОБКИ. Разметку ползунка печатает штатный шаблон, а
   красит её style.css самого компонента (components/bitrix/
   catalog.smart.filter/.default/style.css): серая полоса, синие полоски
   темы и ручки-треугольники из border. Порядок подключения коробочного
   style.css нам не подконтролен (его добавляет ядро), поэтому селекторы
   ниже нарочно на класс длиннее коробочных — побеждаем специфичностью, а
   не порядком.

   Размеры — в единицах проекта calc(N * var(--u)); в мобильных и планшетных
   блоках, как во всём слое newdesign/mobile/, — в пикселях.
   ========================================================================== */

/* ==========================================================================
   1. РАЗДЕЛ БЕЗ КОЛОНКИ ФИЛЬТРА — СПИСОК ВО ВСЮ ШИРИНУ, СЕТКА В ЧЕТЫРЕ

   Когда шаблон фильтра не печатает колонку (в разделе нет ни блоков
   свойств, ни подразделов — см. раздел 5 его template.php), соседняя
   колонка товаров — .col-lg-9 из section.php (чужой файл, не правим) —
   осталась бы на 75% ширины с пустой четвертью слева. Отдаём ей всю
   ширину. Специфичность (0,3,1) против (0,1,0) у .col-lg-9, поэтому
   ширина перебивается без !important.

   ПРИЗНАК КОЛОНКИ (16.09.2026) — сама <aside> фильтра, а не форма внутри
   неё: с этого дня колонка бывает и без формы (одни подразделы, как в
   «Аксессуарах»), и по форме её больше не узнать. Смотрим на оба признака:
   data-sc-filter-col печатает новый шаблон, а aside.col-lg-3 — и старый, и
   новый, так что правило верно при любом порядке выкладки файлов.

   ПОЧЕМУ ЕЩЁ И ЧЕТЫРЕ КОЛОНКИ (16.09.2026). Заказчик: «в аксессуарах очень
   большие карточки». Причина была здесь: колонка товаров становилась на
   треть шире (100% вместо 75%), а сетка карточек — бутстраповский
   row-cols-md-3 из шаблона списка — оставалась трёхколоночной. Ячейка
   выходила 445 px вместо 334 (окно 1440), а карточка меряет всё от ячейки
   (site.css: .pgrid-cell > .pcard{--cp:100cqw/325}) — росли заголовок,
   фото, кнопки. Лечим причину: без колонки фильтра в ту же ширину встают
   четыре ячейки, и каждая выходит РОВНО той же ширины, что три в 75%
   (100/4 = 75/3). Только от 992 px — ниже колонка фильтра и так выдвижная,
   и список всегда во всю ширину в обоих случаях. Вес (0,4,1) против
   (0,1,0) у .row-cols-md-3 > *.
   ========================================================================== */
.row:not(:has(> [data-sc-filter-col], > aside.col-lg-3)) > [data-sc-catalog-result]{
  flex:0 0 100%;max-width:100%;width:100%}
@media (min-width:992px){
  .row:not(:has(> [data-sc-filter-col], > aside.col-lg-3)) > [data-sc-catalog-result] .row-cols-md-3 > .pgrid-cell{
    width:25%}
}

/* ==========================================================================
   2. КНОПКИ «ПОКАЗАТЬ» И «СБРОСИТЬ»

   Форма кнопок — из site.css: .pbtn-green (заливка брендом) и .pbtn-line
   (белая с зелёным контуром). Своих фигур не рисуем, здесь только раскладка
   и то, что нужно полю <input type="submit">: у него нет внутреннего блока,
   поэтому центрирование текста задаём явно, а системный вид кнопки снимаем.

   Почему столбиком, а не в строку. Колонка фильтра — 25% от 1440, около
   330px. Две кнопки фирменной формы рядом (у каждой скошенные концы по
   0,74 высоты и поля 28) в неё не помещаются: середина ушла бы в минус и
   концы налезли друг на друга. Столбиком обе получают полную ширину и
   одинаковый силуэт.
   ========================================================================== */
.smart-filter-form .sc-facts{
  display:flex;flex-direction:column;align-items:stretch;
  gap:calc(10 * var(--u));margin-top:calc(6 * var(--u))}
.smart-filter-form .sc-fapply,
.smart-filter-form .sc-fclear{
  width:100%;text-align:center;
  /* Сафари рисует у input[type=submit] свою рамку и градиент поверх фона —
     фирменная фигура под ними не видна. */
  -webkit-appearance:none;appearance:none}

/* Контур «Сбросить» — боковины cap-fat-green, той же толщины, что рамка
   полей «от/до» ниже (те с 16.09 рисуются одной картинкой, см. раздел 3).
   Замер на окне 1440 × 900 до правки: у кнопки ростом 43,1 линия выходила 1,24 px,
   а у поля ростом 36,5 — 1,68. То есть элемент КРУПНЕЕ был обведён
   ТОНЬШЕ соседнего, и колонка фильтра читалась неровной. Причина в
   боковинах: .pbtn-line берёт cap-lgreen (обводка 1,6 при высоте
   картинки 55,6 — это 0,0288 высоты), а поля сайта — cap-fat-green
   (2,6 при 56,6 — 0,0459). Силуэт у файлов один, отличается только
   толщина линии, поэтому подменяем боковины, а не форму.
   Толщину линий середины берём тем же числом, иначе на стыке ступенька
   (site.css, «ПОЛЯ ВВОДА — одно правило на весь сайт»).
   Вес (0,2,0) против (0,1,0) у .pbtn-line — перебиваем специфичностью.
   Заливную «Показать» не трогаем: у заливных боковин обводки нет. */
.smart-filter-form .sc-fclear{
  --cap-stroke:0.0459;
  background-image:url(img/cap-fat-green-l.svg),url(img/cap-fat-green-r.svg),
    linear-gradient(var(--green-brand),var(--green-brand)),
    linear-gradient(var(--green-brand),var(--green-brand));
  background-position:left center, right center, center top, center bottom;
  background-size:auto 100%, auto 100%,
    calc(100% - 2 * var(--cap)) calc(var(--btn-h) * var(--cap-stroke)),
    calc(100% - 2 * var(--cap)) calc(var(--btn-h) * var(--cap-stroke))}

/* ==========================================================================
   3. ПОЛЯ «ОТ» И «ДО»

   Фигура — общая для всех полей сайта, и с 16.09 рисуется так же, как они:
   одной картинкой через border-image (BRAND-RULES §3.2, site.css «РАМКА
   ПОЛЯ — ОДНОЙ КАРТИНКОЙ»). До этого здесь оставался старый набор из
   четырёх слоёв — две боковины cap-fat-green и две линии между ними, — и
   на стыке линии с боковиной на ретине читалась ступенька: именно её
   Герман и увидел («полоса не красивая»). Боковины из краёв картинки
   берутся неискажёнными, середина тянется, вертикальный масштаб общий —
   контур ровный по построению, никакого border-radius.
   К общему селектору site.css не дописываемся (чужой файл) — повторяем
   его набор здесь. Отличия только в размерах: высота 44 вместо 52 — два
   поля должны встать рядом в узкой колонке; --frame-cap считается от
   --btn-h тем же коэффициентом 0,4947, что в site.css.

   Пути к картинкам относительные и совпадают с site.css: файл лежит в той
   же папке newdesign/, значит img/field-frame-green.svg разрешается так же.
   ========================================================================== */
.smart-filter-form .sc-range-nums{
  display:flex;align-items:center;gap:calc(8 * var(--u))}
.smart-filter-form .sc-price-f{flex:1 1 0;min-width:0}
.smart-filter-form .sc-range-dash{
  flex:none;color:var(--ink-soft);font-family:var(--font);
  font-size:calc(14 * var(--u));line-height:1}

.smart-filter-form .sc-price-f input{
  --btn-h:calc(44 * var(--u));
  --frame-cap:calc(var(--btn-h) * 0.4947);
  width:100%;height:var(--btn-h);min-height:var(--btn-h);
  /* Отступ текста — от внутреннего края рамки: боковину уже занял border.
     Число в поле стоит по центру, поэтому отступ маленький. */
  padding:0 calc(4 * var(--u));
  border-style:solid!important;
  border-width:0 var(--frame-cap)!important;
  border-color:transparent!important;
  border-radius:0!important;box-shadow:none!important;
  border-image-source:url(img/field-frame-green.svg)!important;
  border-image-slice:0 28 fill!important;
  border-image-width:0 var(--frame-cap)!important;
  border-image-repeat:stretch!important;
  border-image-outset:0!important;
  font-family:var(--font-ui);font-weight:400;
  font-size:calc(15 * var(--u));color:#000;text-align:center;
  background:transparent!important}

/* Стрелки-крутилки type=number ломают фигуру: браузер рисует их в правом
   конце, ровно на скошенной боковине. Убираем — значение набирают руками
   или тянут ручку. */
.smart-filter-form .sc-price-f input::-webkit-outer-spin-button,
.smart-filter-form .sc-price-f input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.smart-filter-form .sc-price-f input[type=number]{
  -moz-appearance:textfield;appearance:textfield}

/* Фокус — тон, а не вторая рамка: прямоугольный outline лёг бы поверх
   скоса и поле читалось бы как двойное. Приём и значения — из site.css,
   чтобы поля фильтра вели себя как все поля сайта. */
.smart-filter-form .sc-price-f input:focus,
.smart-filter-form .sc-price-f input:focus-visible{
  outline:none!important;box-shadow:none!important;
  filter:brightness(.78) saturate(1.2)}
.smart-filter-form .sc-price-f input::placeholder{color:#9a9a9a}

/* ==========================================================================
   4. ШКАЛА ДИАПАЗОНА

   Тянет ручки штатный BX.Iblock.SmartFilter (script.js шаблона компонента),
   поэтому все id и структура остались коробочными — меняем только вид.
   Слои у коробки такие:
     -track  серая полоса на всю ширину;
     -vd     отрезок МЕЖДУ ручками (в коробке серый);
     -vn     отрезок, где товары есть (в коробке светлый цвет темы);
     -v      их пересечение — «выбрано и товары есть» (цвет темы).
   Красим так, чтобы читался ровно один смысл: выбранный отрезок зелёный
   брендом, его часть без товаров — бледно-зелёная, остальное — серый фон.
   Поэтому -vn делаем прозрачным: без этого «есть товары» подсвечивалось бы
   и ЗА пределами выбора, и отрезок между ручками переставал читаться.
   ========================================================================== */
.smart-filter-form .smart-filter-slider-track-container{
  /* overflow:hidden из коробки срезал бы ручку у самого края и кольцо
     фокуса; вместо этого держим поля, в которые ручка вписывается
     (с 17.09 — и увеличенная при захвате: 24 × 1,16 / 2 < 14). */
  overflow:visible;
  padding:calc(20 * var(--u)) calc(14 * var(--u)) calc(30 * var(--u))}
/* Полоса — тонкая линия, 3 единицы (Герман 16.09: «шкала по цене полоса
   не красивая» — было 6, с квадратными ручками читалось как брусок).
   Скруглений нет: концы всё равно под ручками. */
.smart-filter-form .smart-filter-slider-track{
  height:calc(3 * var(--u));background:#dfe4de;border-radius:0}

/* Выбранный отрезок — --green, тот же, что у чипсов и кнопки «Показать»
   в этом же фильтре; часть отрезка без товаров — бледная. */
.smart-filter-form .smart-filter-slider-price-bar-vd{background:var(--green-pale)}
.smart-filter-form .smart-filter-slider-price-bar-vn{background:transparent}
.smart-filter-form .smart-filter-slider-price-bar-v{background:var(--green)}

/* РИСОВАННАЯ ПОЛОСА (17.09.2026). Заказчик: «мне не нравится, как
   выглядит полоска, давай её тоже сделаем не ровной, как все карточки».
   Исключение из правила «ровно» (BRAND-RULES §3.2) — записано там же.
   Линию рисует newdesign/filter-ui.js (раздел 4в) генератором из wavy.js
   и ставит на полосу класс is-drawn. Только тогда ровная полоса и
   коробочные отрезки становятся прозрачными: сами отрезки остаются на
   месте — по ним скрипт вырезает выбранную часть линии. Без скрипта
   видна ровная полоса выше, фильтр от этого не страдает.
   Полотно выше полосы (16 px) и стоит по её середине: размах линии ±2,
   штрих до 4. Под ручками (z-index у -range 50), клики не перехватывает.
   Прозрачные отрезки не перехватывают их тоже: они лежат ВЫШЕ ручек
   (z-index 60–80 против 50), и нажатие в середину ручки, на полоску
   высотой 2–3 px, уходило отрезку — левая ручка не бралась за центр. */
.smart-filter-form .smart-filter-slider-track.is-drawn{background:transparent}
.smart-filter-form .smart-filter-slider-track.is-drawn .smart-filter-slider-price-bar-vd,
.smart-filter-form .smart-filter-slider-track.is-drawn .smart-filter-slider-price-bar-vn,
.smart-filter-form .smart-filter-slider-track.is-drawn .smart-filter-slider-price-bar-v{
  background:transparent;pointer-events:none}
.smart-filter-form .smart-filter-slider-track > svg.sc-track-line{
  position:absolute;left:0;top:50%;z-index:1;
  display:block;height:16px;margin-top:-8px;
  overflow:visible;pointer-events:none}
/* Штрих: вся шкала — светлая линия 3; выбранный отрезок (между ручками) —
   фирменный цвет контура карточек (#00723b) и та же толщина 4, что у их
   обводки (wavy.js, stroke 4). Отрезок «где есть товары» отдельно не
   красим — почему, сказано в filter-ui.js, раздел 4в. Концы круглые —
   как у живого штриха. Толщины в пикселях: полотно 1:1 с экраном. */
.smart-filter-form svg.sc-track-line path{
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.smart-filter-form svg.sc-track-line .sc-tl-base{stroke:#c9ddce;stroke-width:3px}
.smart-filter-form svg.sc-track-line .sc-tl-on{stroke:var(--green-brand);stroke-width:4px}

/* Засечки. В колонке 330px пять подписей вида «12 500» налезают друг на
   друга, а точные числа и так стоят в полях над шкалой. Оставляем только
   края — они говорят границы диапазона; сами палочки убираем, подписи
   переносим под полосу. */
.smart-filter-form .smart-filter-slider-ruler{display:none}
.smart-filter-form .smart-filter-slider-ruler.p1,
.smart-filter-form .smart-filter-slider-ruler.p5{
  display:block;top:100%;width:auto;height:auto;background:none}
.smart-filter-form .smart-filter-slider-ruler.p1{left:0;text-align:left}
.smart-filter-form .smart-filter-slider-ruler.p5{left:auto;right:0;text-align:right}
/* Коробка ставит подпись абсолютом шириной 100px с margin-left:-50px —
   у крайних засечек она уезжала за край колонки. Возвращаем в поток. */
.smart-filter-form .smart-filter-slider-ruler.p1 span,
.smart-filter-form .smart-filter-slider-ruler.p5 span{
  position:static;display:block;margin:0;width:auto;
  /* 12, а не 9: с 17.09 ручка крупнее (24) и не должна наезжать на число. */
  padding-top:calc(12 * var(--u));
  font-family:var(--font);font-size:calc(12 * var(--u));
  color:var(--ink-soft);text-align:inherit;white-space:nowrap}

/* Ручки. В коробке это треугольники из border высотой 0 и с полем −14px,
   привязанные к низу полосы (top:100%). 16.09 стали белым кругом с
   ровной обводкой; 17.09 заказчик попросил «ползунок покрасивее» вместе
   с рисованной полосой — теперь это фирменная фигура: залитое зелёное
   «зерно» (неровный круг из набора, kit/btn-round-green.svg) с белым
   кантом и бороздкой — img/kit/slider-knob.svg. Кант отделяет ручку от
   линии, лёгкая тень — от белого фона. Рисунок — одна картинка на всю
   коробку: пропорции 1:1 у файла и у ручки, поэтому кант не толстеет.
   Размер 24 единицы (на окне 1440 — 19 px), не меньше 18 px.
   Селекторы на класс длиннее коробочных .smart-filter-slider-handle.left/
   .right (0,3,0 против 0,2,0), иначе их поля и border остались бы.
   touch-action:none — иначе палец на телефоне тянет не ручку, а страницу:
   браузер отдаёт жест прокрутке раньше, чем скрипт успевает его получить. */
.smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle{
  --knob-s:1;
  top:50%;width:max(18px, calc(24 * var(--u)));height:max(18px, calc(24 * var(--u)));
  box-sizing:border-box;
  border:0;border-radius:0;box-shadow:none;
  background:url(img/kit/slider-knob.svg) center/100% 100% no-repeat;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28));
  transition:transform .15s ease;
  touch-action:none;cursor:grab}
.smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle.left{
  left:0;margin-left:0;transform:translate(-50%,-50%) scale(var(--knob-s))}
.smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle.right{
  right:0;margin-right:0;transform:translate(50%,-50%) scale(var(--knob-s))}
/* Наведение — чуть крупнее; захват (класс is-grab ставит filter-ui.js на
   время нажатия, :active — запасной) — ещё крупнее. Меняется только
   множитель, сдвиг на половину ручки остаётся в правилах выше. */
@media (hover:hover){
  .smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle:hover{--knob-s:1.08}
}
.smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle:active,
.smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle.is-grab{--knob-s:1.16}
.smart-filter-form .smart-filter-slider-handle:active,
.smart-filter-form .smart-filter-slider-handle.is-grab{cursor:grabbing}
/* Фокус с клавиатуры — свечение по кругу ручки, прямоугольной обводки нет
   (правило «без обводки», BRAND-RULES §3.2). Тап-цель ::after прозрачная,
   в свечение не попадает. */
.smart-filter-form .smart-filter-slider-handle:focus-visible{
  outline:none;filter:drop-shadow(0 0 3px var(--green-brand))}

/* Тап-цель ручки: сама она 20, палец требует 44. Прозрачный слой поверх —
   в пикселях всегда (это размер пальца, а не размер макета). */
.smart-filter-form .smart-filter-slider-handle::after{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}

/* ==========================================================================
   5. ДЛИННЫЕ СПИСКИ ЗНАЧЕНИЙ

   Даже после отбора «Обработка» — 12 пунктов, «Кислотность» и «Сладость» —
   по 17. Показываем первые восемь, остальные — под кнопкой «Показать ещё N».
   Класс .is-collapsed вешает newdesign/filter-ui.js: если скрипт не
   выполнился, список остаётся полным, а кнопки нет (она напечатана с
   hidden) — фильтр не теряется.

   Кнопка нарочно НЕ фирменной формы: по BRAND-RULES §3.1 служебные
   элементы фильтра (заголовки аккордеона и т.п.) под правило кнопок не
   попадают, а вторая кнопка-фигура в блоке спорила бы с «Показать» внизу.
   Скругления здесь нет тоже — только текст.
   ========================================================================== */
.smart-filter-form .sc-flist.is-collapsed .sc-fitem-extra{display:none}

.smart-filter-form .sc-fmore{
  display:inline-flex;align-items:center;
  margin:calc(2 * var(--u)) 0 calc(6 * var(--u));padding:calc(4 * var(--u)) 0;
  border:0;border-radius:0;background:none;cursor:pointer;
  font-family:var(--font);font-weight:500;
  font-size:calc(15 * var(--u));line-height:1.3;
  color:var(--green-brand);text-decoration:underline;text-underline-offset:.2em}
.smart-filter-form .sc-fmore:hover{color:var(--green-deep-2)}
/* Фокус с клавиатуры — свечение по буквам, без прямоугольной обводки
   (правило «без обводки», §3.2): фигуры у кнопки нет, силуэт — сам текст. */
.smart-filter-form .sc-fmore:focus-visible{
  outline:none;filter:drop-shadow(0 0 3px var(--green-brand))}

/* Скрытые поля-дубли (одинаковая подпись, разные значения свойства) стоят
   рядом с видимой галочкой и отмечаются вместе с ней. В раскладке их быть
   не должно, но из формы убирать нельзя — они и есть потерянные значения. */
.smart-filter-form .sc-fdup{display:none}

/* ==========================================================================
   6. ТЕЛЕФОН (диапазон — дословно как во всём слое newdesign/mobile/)

   Здесь пиксели: --u на телефоне упирается в нижнюю границу .70px, и
   44*--u дало бы 31px — ни поле, ни ручка под палец не годятся.
   ========================================================================== */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){

  /* Кнопки внизу панели должны быть под рукой, а не в конце длинной
     прокрутки.

     ПОЧЕМУ ЛИПКИЙ НЕ САМ .sc-facts. У sticky ход ограничен его контейнером,
     а контейнер .sc-facts — это .smart-filter-block, у которого .sc-facts
     единственный ребёнок: высота контейнера в точности равна высоте ряда,
     запас хода нулевой, и элемент ведёт себя как static (подложка и тень
     при этом тоже ничего не значат). Липким делаем внешний .row — он прямой
     ребёнок формы, а над ним стоит весь аккордеон, вот и запас хода.
     Прокручиваемый предок, к низу которого прилипаем, — .offcanvas-body
     (у Бутстрапа overflow-y:auto).

     Специфичность (0,3,0) против (0,1,0) у бутстраповского .row —
     перебиваем без !important. Отрицательные поля .row не трогаем: иначе
     кнопки уехали бы на 12px внутрь и разошлись с аккордеоном по левому
     краю. Подложка непрозрачная — под рядом проезжают галочки. */
  .offcanvas-lg .smart-filter-form > .row{
    position:sticky;bottom:0;z-index:2;
    padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
    background:#fff;
    box-shadow:0 -10px 18px -14px rgba(0,0,0,.5)}
  /* На самом ряду остаётся только раскладка. Отступ сверху теперь даёт
     padding липкой обёртки — margin-top оставили бы двойной зазор между
     кнопками и краем подложки. */
  .offcanvas-lg .smart-filter-form .sc-facts{gap:10px;margin-top:0}
  /* Высота под палец. Форму кнопки задаёт --btn-h, всё остальное (концы,
     линии) считается от неё само. */
  .smart-filter-form .sc-fapply,
  .smart-filter-form .sc-fclear{--btn-h:48px;min-height:48px;font-size:15px}

  /* Поля цены: 16px — порог, ниже которого Сафари увеличивает страницу
     при попадании в поле. */
  .smart-filter-form .sc-range-nums{gap:8px}
  .smart-filter-form .sc-price-f input{--btn-h:48px;padding:0 4px;font-size:16px}
  .smart-filter-form .sc-range-dash{font-size:14px}

  /* Ручка под палец: 30px (не меньше 28 — просьба 17.09), при захвате
     ×1,16 = 35px; полоса 3px. Поля контейнера — половина увеличенной
     ручки, чтобы она у края не вылезала за колонку панели: у той
     overflow:auto, и лишнее срезалось бы. */
  .smart-filter-form .smart-filter-slider-track-container{padding:22px 18px 32px}
  .smart-filter-form .smart-filter-slider-track{height:3px}
  .smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle{
    width:30px;height:30px}
  .smart-filter-form .smart-filter-slider-ruler.p1 span,
  .smart-filter-form .smart-filter-slider-ruler.p5 span{padding-top:16px;font-size:12px}

  /* Строка «Показать ещё N» — такая же тап-цель, как строка значения. */
  .smart-filter-form .sc-fmore{min-height:44px;font-size:15px;margin:2px 0 6px}
}

/* ==========================================================================
   7. ПЛАНШЕТ (768–1023 при высоте от 521)

   Панель фильтра здесь тоже выдвижная (offcanvas-lg), значит липкий ряд
   кнопок нужен и тут. Размеры — те же 48/44, как во всём планшетном слое.
   ========================================================================== */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px){
  /* Липкий — внешний .row, а не .sc-facts: причина та же, что в блоке
     телефона (у .sc-facts контейнер по высоте равен ему самому, ход
     нулевой). Пояснение целиком — там же. */
  .offcanvas-lg .smart-filter-form > .row{
    position:sticky;bottom:0;z-index:2;
    padding:12px 0;
    background:#fff;
    box-shadow:0 -10px 18px -14px rgba(0,0,0,.5)}
  .offcanvas-lg .smart-filter-form .sc-facts{gap:10px;margin-top:0}
  .smart-filter-form .sc-fapply,
  .smart-filter-form .sc-fclear{--btn-h:48px;min-height:48px;font-size:15px}
  .smart-filter-form .sc-price-f input{--btn-h:48px;padding:0 4px;font-size:16px}
  .smart-filter-form .sc-range-dash{font-size:14px}
  /* Ручка и полоса — как на телефоне (планшет тоже сенсорный). */
  .smart-filter-form .smart-filter-slider-track-container{padding:22px 18px 32px}
  .smart-filter-form .smart-filter-slider-track{height:3px}
  .smart-filter-form .smart-filter-slider-range .smart-filter-slider-handle{
    width:30px;height:30px}
  .smart-filter-form .smart-filter-slider-ruler.p1 span,
  .smart-filter-form .smart-filter-slider-ruler.p5 span{padding-top:16px;font-size:12px}
  .smart-filter-form .sc-fmore{min-height:44px;font-size:15px}
}

/* --------------------------------------------------------------------------
   Кнопки фильтра — это <input type="button">, а не <a> и не <button>
   --------------------------------------------------------------------------
   Так их печатает компонент, менять разметку ради оформления не станем.
   Браузер даёт такому полю СВОЮ заливку (buttonface, ≈#efefef) и рамку.
   Фирменная фигура приходит фоновой картинкой, а у неё срезаны углы —
   и серая заливка вылезала из-под скоса четырьмя уголками. Гасим и её,
   и рамку, и системное оформление поля. Размеры и сам рисунок остаются
   от .pbtn-green и .pbtn-line, ничего своего не рисуем. */
.smart-filter-form .sc-facts input[type=button]{
  background-color:transparent;
  border:0;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none}

/* ==========================================================================
   6. СВОИ БЛОКИ «ВКУС» И «ВЕС» — ЧТО ПРЯЧЕТСЯ

   Сами блоки своего оформления не просят: шаблон печатает их той же
   разметкой, что и штатные (.accordion-item, .form-check, .sc-flist,
   .sc-fmore), поэтому вид, сворачивание длинных списков и мобильные
   размеры им достаются от уже написанного выше и из catalog.css.

   Здесь только одно, чего разметкой не решить. Чипсы своих блоков шаблон
   ../active.filter/template.php печатает ВСЕ сразу — по одному на каждое
   возможное значение раздела — и гасит невыбранные атрибутом hidden
   (почему так, написано в шапке того файла: набор значений зависит только
   от раздела, и такую разметку не портит кэш компонента, а показ нужных
   правит newdesign/filter-ui.js по адресу страницы).

   Атрибута hidden самого по себе не хватает в обоих случаях:
     — у чипса в catalog.css стоит display:inline-flex с той же
       специфичностью (0,2,0), что и голое [hidden]; берём на класс больше,
       чтобы не зависеть от порядка подключения файлов;
     — у плашки классы темы .d-flex align-items-start, а утилиты Бутстрапа
       собраны с !important — перебить их можно только тем же !important.
   ========================================================================== */
.smart-filter-form .sc-fchip[hidden]{display:none}
[data-sc-chips-box][hidden]{display:none !important}

/* ==========================================================================
   8. ПУНКТ В ДВЕ СТРОКИ: НАЗВАНИЕ И ПОЯСНЕНИЕ («Вкус»)

   Заказчик: «вкусы не ровно текст написан». Было одной строкой через тире —
   «Классический — шоколад, орех, карамель», — и в колонку 330px (а в
   выезжающей панели и того уже) строка ломалась где придётся: «…орех,» на
   первой строке и одинокая «карамель» на второй, а галочка вставала
   посередине между ними.

   Стало: название первой строкой, пояснение второй и мельче. Разметку
   печатает шаблон боковой колонки (.default/template.php): внутри подписи
   столбец .sc-fval-2l из двух строк .sc-fval-t и .sc-fval-s. Столбец — один
   флекс-элемент справа от галочки, поэтому обе строки (и перенос пояснения,
   если оно однажды не влезет) начинаются от левого края текста, а не под
   галочкой.

   ГАЛОЧКА — НА УРОВНЕ ПЕРВОЙ СТРОКИ, ВОЗДУХ — КАК У ОДНОСТРОЧНЫХ.
   Однострочный пункт строка ставит по центру (align-items:center в
   catalog.css): текст в одну строку сидит посередине ряда минимальной
   высоты, и над ним, и под ним остаётся (ряд − строка) / 2. У двухстрочного
   центр пришёлся бы между строками, поэтому ставим к верху и возвращаем тот
   же воздух руками:
     подписи — поля сверху и снизу (ряд − строка) / 2;
     галочке — отступ сверху (ряд − поле) / 2, то есть ровно то место, где
     она стоит у однострочного пункта, — у центра первой строки.
   Без полей у подписи (так было в первой версии) текст прижимался к верху
   ряда: на телефоне «Классический» стоял на 12px ближе к заголовку «Вкус»,
   чем «200 г» к «Вес», а между «…карамель» и «С кислинкой» оставалось 10px
   против 28 у однострочных соседей.

   Ряд, строка и поле — по тем же условиям, при которых меняются сами
   размеры, а не по общим телефонным:
     мышь    — ряд 30, строка 15 × 1,3 = 19,5, поле 14, всё в единицах
               макета (catalog.css);
     сенсор  — ряд 44px, строка 19,5px, поле 14px ((pointer:coarse) в
               catalog.css);
     планшет — ряд 44 − поля 8 + 8 = 28px и строка 15 × 1,25 = 18,75px из
               mobile/tablet.css при ЛЮБОМ указателе; поле с мышью 14 единиц
               макета, с сенсором 14px. Этот случай целиком — в разделе 9:
               там то же правило распространено на все пункты.
   Возьми здесь условие телефона по ширине — и в узком окне с мышью (поле
   там 14 единиц макета, а не 14px) галочка съехала бы на пару пикселей.
   Веса: подпись (0,4,0), поле (0,5,0) — на класс больше правил поля в
   catalog.css (0,4,0), где margin задан сокращённой записью.

   Кегль пояснения — в em от подписи (13 / 15): подпись на десктопе в
   единицах макета, на телефоне и планшете в пикселях, и пояснение следует
   за ней само, без отдельного правила на каждый экран. Цвет — --ink-soft,
   тот же вторичный текст, что у тире между полями цены выше.
   ========================================================================== */
.smart-filter-form .form-check.sc-fcheck-2l{align-items:flex-start}
/* Мышь: ряд 30 единиц макета; строка — подпись max(16px, 18 · --u) ×
   1,3 (catalog.css); поле — --cb-h (catalog.css, «РАЗМЕР ГАЛОЧКИ»). */
.smart-filter-form .form-check.sc-fcheck-2l > .form-check-label{
  padding-block:calc((30 * var(--u) - max(16px, calc(18 * var(--u))) * 1.3) / 2)}
.smart-filter-form .form-check.sc-fcheck-2l .form-check-input[type=checkbox]{
  margin-top:calc((30 * var(--u) - var(--cb-h)) / 2)}
.smart-filter-form .form-check-label > .sc-fval-2l{
  display:flex;flex-direction:column;align-items:flex-start;
  flex:1 1 auto;min-width:0}
.smart-filter-form .sc-fval-2l > .sc-fval-t{display:block}
.smart-filter-form .sc-fval-2l > .sc-fval-s{
  display:block;margin-top:calc(2 * var(--u));
  font-size:.8667em;line-height:1.25;color:var(--ink-soft)}

/* Сенсор (телефон; планшет перебивает раздел 9): ряд 44px, строка
   16px × 1,3, поле --cb-h — catalog.css. */
@media (pointer:coarse){
  .smart-filter-form .form-check.sc-fcheck-2l > .form-check-label{
    padding-block:calc((44px - 20.8px) / 2)}
  .smart-filter-form .form-check.sc-fcheck-2l .form-check-input[type=checkbox]{
    margin-top:calc((44px - var(--cb-h)) / 2)}
  .smart-filter-form .sc-fval-2l > .sc-fval-s{margin-top:2px}
}

/* ==========================================================================
   9. ПЛАНШЕТНАЯ ШИРИНА: ГАЛОЧКА У ПЕРВОЙ СТРОКИ У ВСЕХ ПУНКТОВ

   Вернувшаяся «Обработка» печатается обычными однострочными пунктами. При
   ширине окна 992–1023px колонка фильтра уже статична (col-lg-3; на 1000px
   подпись шириной около 178px), а кегль из mobile/tablet.css — 15px, и
   значение «натуральная в "спальном мешке"» переносилось на две строки;
   галочка вставала посередине между ними (на 9px ниже центра первой
   строки) — ровно тот вид, на который заказчик жаловался у «Вкуса».

   Поэтому в этом диапазоне приём раздела 8 распространён на все пункты
   списков (.sc-flist — и штатных, и своих блоков). Для однострочного пункта
   он даёт ТО ЖЕ положение, что и прежний центр: поля подписи добирают её
   ровно до высоты ряда (18,75 + 2 × 4,625 = 28), а галочка стоит на
   (28 − поле) / 2 от верха — там же, где стояла по центру. Меняется только
   пункт, который перенёсся: галочка остаётся у первой строки, а воздух над
   и под текстом — как у соседей.

   Только планшетная ширина: на телефоне (360–430) и на десктопе от 1024
   значения в наличии на 15.09.2026 помещаются в строку; двухстрочный «Вкус»
   там держит раздел 8. Появится длинное значение — правило можно поднять
   на все экраны теми же формулами.
   Веса (0,3,0)/(0,4,0)/(0,5,0) равны правилам раздела 8 и стоят позже —
   на планшете побеждают они; ряд (0,3,0) перебивает align-items:center
   из catalog.css (0,2,0) без опоры на порядок файлов.
   ========================================================================== */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px){
  .smart-filter-form .sc-flist .form-check{align-items:flex-start}
  .smart-filter-form .sc-flist .form-check > .form-check-label{
    padding-block:calc((28px - 20px) / 2)}  /* строка 16px × 1,25 */
  /* Поле --cb-h (catalog.css) — и для мыши, и для пальца. */
  .smart-filter-form .sc-flist .form-check .form-check-input[type=checkbox]{
    margin-top:calc((28px - var(--cb-h)) / 2)}
  .smart-filter-form .sc-fval-2l > .sc-fval-s{margin-top:2px}
}
/* Отдельное правило для пальца на планшете больше не нужно: высоту поля
   даёт --cb-h, и формула выше одна на оба способа ввода. */

/* ==========================================================================
   10. БЛОК «РАЗДЕЛЫ» В КОЛОНКЕ ФИЛЬТРА (16.09.2026)

   Заказчик: «в аксессуары нет фильтра и очень большие карточки». Раздел,
   в котором отбирать не по чему («Аксессуары» и его подразделы: свойства
   пустые, цена у одной фасовки из восемнадцати в наличии), теперь всё
   равно получает колонку — с переходами по подразделам (что печатать,
   решает newdesign/filter-sections.php; разметку — .default/template.php,
   раздел 5). Ради колонки всё и затевалось: с ней список товаров стоит в
   col-lg-9, и карточки выходят той же ширины, что в «Кофе» (см. раздел 1).

   Заголовок «Разделы» — тот же .accordion-button, что у блоков фильтра
   (шрифт даёт catalog.css по [class*="smart-filter"]). Чипсы — ссылки
   фирменной формы .pbtn-line, текущий раздел — .pbtn-green (правило
   BRAND-RULES §3.1: второстепенное отличается заливкой, не формой).

   РОСТ И КОНТУР — ТЕ ЖЕ, ЧТО У РЯДА СОРТИРОВКИ (catalog-sort.css §1, §1.1):
   рост 40, колпачки из набора для роста 40 (img/kit/cap40-line-*.svg) и
   линия 2/40 высоты — тогда контур у чипсов «Разделов», у чипсов активного
   фильтра и у ряда сортировки одной толщины (правило «ровно», BRAND-RULES
   §3.2). Числа повторены здесь, а не взяты из catalog-sort.css: тот файл —
   про сортировку, и его правила нарочно привязаны к .sc-sort.
   Белая середина — пятым слоем фона только между колпачками, не
   background-color на коробку: иначе затемнение при наведении
   (interactions.css) красило бы углы за дугами в серый, а свечение фокуса
   шло бы по прямоугольнику, а не по силуэту (правило «без обводки»).
   Фокус с клавиатуры чипсы получают от общего правила site.css
   (.pbtn-line:focus-visible — свечение по силуэту), своего не нужно.

   Планшет: mobile/tablet.css даёт всему набору .pbtn-* min-height:48px
   (0,1,0), а мы рост задаём переменной — коробка обязана следовать за ней,
   иначе колпачки считались бы от 48, а линии от 40 (та же беда, что была у
   ряда сортировки, см. tablet.css §10). Отсюда min-height:var(--btn-h).
   Сенсорные экраны — рост 44, как у чипсов и ряда сортировки: по способу
   ввода, а не по ширине окна (catalog.css, catalog-sort.css §1.2).
   Веса: (0,2,0) и (0,3,0) против (0,1,0) у .pbtn-* — перебиваем
   специфичностью, порядок файлов ни при чём.
   ========================================================================== */
.sc-fsec .sc-fsec-list{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(10 * var(--u));
  padding:calc(6 * var(--u)) 0 calc(10 * var(--u))}

.sc-fsec .sc-fsec-i{
  --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 */
  min-height:var(--btn-h);max-width:100%;
  padding:0 calc(20 * var(--u));
  font-weight:500;font-size:calc(15 * var(--u));
  text-decoration:none}

.sc-fsec .sc-fsec-i.pbtn-line{
  background-color:transparent;
  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%}

.sc-fsec .sc-fsec-i.pbtn-green{
  background-image:url(img/cap-tag-green-l.svg),url(img/cap-tag-green-r.svg),
    linear-gradient(var(--green-brand),var(--green-brand));
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,calc(100% - 2 * var(--cap) + 2px) 100%}

/* Текущий раздел — отметка «вы здесь», а не переход: подъём и затемнение
   при наведении ему ни к чему. Вес (0,3,0) против (0,2,0) у
   .pbtn-green.pbtn-green:hover в interactions.css. */
.sc-fsec .sc-fsec-i[aria-current]{cursor:default}
.sc-fsec .sc-fsec-i[aria-current]:hover{filter:none;transform:none}

@media (pointer:coarse){
  .sc-fsec .sc-fsec-i{--btn-h:44px;padding:0 16px;font-size:17px}
  .sc-fsec .sc-fsec-list{gap:10px;padding:6px 0 10px}
}