/* ==========================================================================
   Serikov Coffee 2026 — ВЫБОР ПОРЯДКА ВЫДАЧИ В КАТАЛОГЕ

   Разметку рисует section.php комплексного компонента каталога
   (local/templates/sc2026/components/bitrix/catalog/.default/section.php),
   узел .sc-sort стоит над списком товаров, внутри перерисовываемой колонки
   [data-sc-catalog-result].

   СВОИХ ФИГУР ЗДЕСЬ НЕТ. Кадра под сортировку в макете не нарисовано,
   поэтому берём то, что на странице уже есть:
     — на широком экране это фирменные кнопки .pbtn-line / .pbtn-green из
       site.css (фигура со скосом на SVG-колпачках; выбранный порядок
       отличается ЗАЛИВКОЙ, а не формой — правило BRAND-RULES §3.1),
       но колпачки берём НЕ те, что у .pbtn-* по умолчанию: см. §1.1;
     — на телефоне — список <select> с классами соседней кнопки «Фильтр»
       (btn btn-sm fs-sm btn-primary w-100 rounded-0), чтобы обе полосы
       внизу экрана были одной высоты и одного цвета без единого числа
       в пикселях.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ. Файл должен идти ПОСЛЕ site.css (перебиваем высоту
   кнопки --btn-h) и ПОСЛЕ catalog.css. Мобильный слой newdesign/mobile/*
   грузится ещё позже — с ним пересечений имён нет, кроме .btn.fixed-bottom
   (кнопка «Фильтр»): там задан только `bottom`, а мы трогаем `left` и
   `width`, так что порядок подключения ни на что не влияет.

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

/* ==========================================================================
   1. РЯД НА ШИРОКОМ ЭКРАНЕ
   ========================================================================== */
.sc-sort{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:calc(12 * var(--u));
  margin:0 0 calc(20 * var(--u))}

/* Слово «Сортировка» — подпись, а не кнопка: тот же кегль, что у подписей
   значений фильтра, приглушённый цвет. */
.sc-sort .sc-sort-lbl{
  font-family:var(--font);font-weight:700;
  font-size:calc(15 * var(--u));line-height:1.2;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.02em}

.sc-sort .sc-sort-list{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:calc(10 * var(--u))}

/* Высота кнопки. В site.css у .pbtn-* она 52 — это рост главной кнопки
   страницы, над выдачей такой ряд перевешивает сам список. Берём 40, как у
   чипсов активного фильтра рядом (catalog.css, .sc-fchip): один ряд, один
   рост.
   Вес селектора (0,2,0) против (0,1,0) у .pbtn-line: перебиваем
   специфичностью, а не только порядком подключения. */
.sc-sort .sc-sort-i{
  --btn-h:calc(40 * var(--u));
  /* Колпачок и толщина контура — из набора для роста 40 (см. §1.1).
     Оба числа объявлены здесь, чтобы у всех пяти кнопок ряда они
     считались от одной высоты и совпали до знака. */
  --cap:calc(var(--btn-h) * 0.56265);   /* 22,506 / 40 */
  --line-h:calc(var(--btn-h) * 0.05);   /* обводка 2 при высоте 40 */
  padding:0 calc(20 * var(--u));
  font-weight:500;font-size:calc(15 * var(--u))}

/* ==========================================================================
   1.1. КОНТУР РЯДА — РОВНЫЙ, ИЗ НАБОРА ДЛЯ РОСТА 40

   Заказчик 16.09.2026 со снимком: «все поля не ровные, сначала дешевые и
   тд». Ряд действительно выпадал, и причина не в раскладке — высоты и
   зазоры у пяти кнопок совпадали до сотой, — а в ТОЛЩИНЕ ЛИНИИ.

   Колпачки .pbtn-line (img/cap-lgreen-*.svg) нарисованы под рост 54:
   обводка 1,6 при высоте картинки 55,6, то есть 0,0288 высоты. Картинка
   масштабируется по высоте элемента целиком, вместе с обводкой, — и на
   нашем росте 40 (на окне 1440 × 778 это 31,3 px) линия выходила 0,90 px.
   Рядом, в той же колонке, чипсы активного фильтра и кнопки фасовки в
   карточках рисуются набором для роста 40: обводка 2 при высоте 40, то
   есть 1,56 px на том же окне. Ряд читался волосяным и оттого неровным:
   на дробных долях пикселя каждая кнопка гасится по-своему.

   Поэтому берём тот же набор, что у соседей: img/kit/cap40-line-*.svg
   (те самые kit-12/kit-18 — путь утоплен на половину обводки, дуга
   продолжена прямыми до внутреннего края). Линия тогда идёт от края до
   края выреза — calc(100% - 2 * --cap), без вылетов за концы дуг, — а
   толщина у линии и у колпачка одна и та же.

   Выбранный порядок — тот же силуэт заливкой: img/cap-tag-green-*.svg
   это залитый близнец того же колпачка 22,506 × 40. Прежние cap-green-*
   были из набора 174 × 54, и выбранная кнопка стояла в ряду с чуть иным
   скосом, чем остальные четыре. +2px у середины — как у выбранной кнопки
   фасовки (site.css, .pw button.on): закрывает волосяной шов между
   заливкой середины и заливкой колпачка.

   Белая заливка под контурной кнопкой — как у чипсов (catalog.css):
   у колпачка из набора середина белая, и без неё на цветной плоскости
   концы кнопки были бы белее её середины.

   Вес (0,3,0) против (0,1,0) у .pbtn-line — перебиваем специфичностью.
   ========================================================================== */
/* Белая середина — пятым слоем фона только МЕЖДУ колпачками (+2px на
   белые полоски у их внутреннего края), а не background-color на всю
   коробку. С заливкой коробки углы за дугами были белым прямоугольником:
   затемнение при наведении (interactions.css, brightness .92) красило их
   в серый — вокруг кнопки вставал серый прямоугольник, — а свечение
   фокуса drop-shadow шло по коробке, а не по скосу (правило «без
   обводки», BRAND-RULES §3.2). Слой последний в списке — лежит под
   колпачками и линиями. */
.sc-sort .sc-sort-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-sort .sc-sort-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%}

/* Выбранный порядок — не ссылка «куда-то», а отметка «вы здесь»:
   подъём при наведении ему не нужен, он никуда не ведёт. */
.sc-sort .sc-sort-i[aria-current]{cursor:default}
.sc-sort .sc-sort-i[aria-current]:hover{filter:none;transform:none}

/* Список порядка нужен только на телефоне (см. §2). */
.sc-sort .sc-sort-sel{display:none}

/* ==========================================================================
   1.2. ПАЛЬЦЕВЫЕ ЭКРАНЫ: ТОТ ЖЕ РОСТ, ЧТО У ЧИПСОВ

   Чипсы активного фильтра растут до 44px не по ширине окна, а по способу
   ввода — в catalog.css это блок @media (pointer:coarse). Ряд сортировки
   стоит в той же колонке и обязан расти по тому же условию: если привязать
   его к ширине планшета, на планшетной ширине с мышью ряд был бы 44, а
   чипсы 28, а на сенсорном мониторе шире 1023 — наоборот.
   Числа — дословно чипсовые: рост 44, поля 16, кегль 17. Колпачок и
   толщина линии считаются от --btn-h (§1), поэтому меняем только её.
   min-height задаём явно и тем же весом (0,2,0): мобильный слой даёт всему
   набору .pbtn-* min-height:48px (mobile/tablet.css), и без этой строки
   коробка разошлась бы с переменной. */
@media (pointer:coarse){
  .sc-sort .sc-sort-i{--btn-h:44px;min-height:var(--btn-h);padding:0 16px;font-size:17px}
  .sc-sort .sc-sort-lbl{font-size:15px}
}

/* ==========================================================================
   2. ТЕЛЕФОН: НИЖНЯЯ ПОЛОСА РЯДОМ С «ФИЛЬТРОМ»

   Почему не ряд кнопок. Колонка на телефоне узкая, фирменные кнопки (их до пяти)
   в неё не встают ни в строку (уедут за экран), ни в столбик (займут пол-
   экрана над первым товаром). Родной список выбора занимает одну строку и
   открывается системным колесом — это и быстрее, и привычнее.

   Почему внизу. Кнопку «Фильтр» шаблон умного фильтра печатает как
   .fixed-bottom — она приклеена к низу экрана и видна всегда. Сортировка
   нужна там же: заказчик просил, чтобы она была рядом с «Фильтром» и не
   уезжала за экран. Делим полосу пополам: слева порядок, справа фильтр.

   Кнопке «Фильтр» подменяем только left и width. Её `bottom` задаёт
   мобильный слой (mobile/base.css — 60px над нижней панелью, в альбомной
   ориентации mobile/landscape.css — 48px), туда не лезем: свою полосу
   ставим на ту же высоту двумя правилами ниже.

   !important у ширины — вынужденно: ширину держит утилита Бутстрапа .w-100,
   а она собрана с !important, и перебить её специфичностью нельзя.
   body:has(.sc-sort) — чтобы правило не задело .fixed-bottom на других
   страницах: половинная ширина имеет смысл только там, где есть вторая
   половина.
   ========================================================================== */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){

  .sc-sort{
    position:fixed;z-index:1030;
    left:0;right:50%;
    bottom:calc(60px + env(safe-area-inset-bottom,0px));
    display:block;margin:0;padding:0;gap:0}

  /* Ряд кнопок и подпись на телефоне не показываем: их заменяет список. */
  .sc-sort .sc-sort-lbl,
  .sc-sort .sc-sort-list{display:none}

  .sc-sort .sc-sort-sel{display:block;margin:0}

  /* Родной вид поля снимаем, стрелку рисуем сами: в системном виде поле
     получает светлый фон и чёрный текст, и половина полосы выглядела бы
     чужой рядом с зелёной кнопкой «Фильтр». */
  .sc-sort .sc-sort-sel select{
    appearance:none;-webkit-appearance:none;
    padding-right:26px;
    text-align:center;text-align-last:center;
    background-image:linear-gradient(45deg,transparent 50%,#fff 50%),
                     linear-gradient(135deg,#fff 50%,transparent 50%);
    background-position:calc(100% - 14px) calc(50% - 1px),calc(100% - 9px) calc(50% - 1px);
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat}

  body:has(.sc-sort) .btn.fixed-bottom{left:50%;width:50%!important}

  /* Раздел, где после отбора свойств не осталось ни одного блока фильтра
     (чай, посуда): кнопки «Фильтр» шаблон не печатает вовсе, делить полосу
     не с кем — порядок занимает её целиком. Признак тот же, что в
     filter-ui.css §1: формы фильтра на странице нет. */
  body:not(:has(form[data-sc-filter-form])) .sc-sort{right:0}
}

/* Телефон, повёрнутый набок: нижняя панель ниже, и кнопка «Фильтр» стоит
   на 48px (mobile/landscape.css). Повторяем это число для своей полосы —
   иначе половинки разъехались бы по высоте. Правило идёт после общего
   телефонного блока и при равном весе побеждает порядком. */
@media (max-width:1023px) and (max-height:520px){
  .sc-sort{bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}