/* BFC · ЕДИНЫЙ КОМПОНЕНТ КНОПОК ГАЛЕРЕЙ (S71-A, 20-21.08.2026, D-20082026-01)
 * ============================================================================
 *
 * ЗАЧЕМ. На контуре пятнадцать семейств листалок, и каждое рисовало свою кнопку:
 * замер ДО (.coordinate/s71a/table_before.json) дал 11 разных размеров
 * (17/18x32/26x48/32x44/34/38/40/44/46/48), 7 разных заливок (#fff, #fff/.92,
 * #1a1a1a/.5, #1a1a1a/.08, #1a1a1a/.75, #f6921e, прозрачная) и 6 цветов стрелки.
 * Это отсутствие компонента, а не набор мелких дефектов. Здесь — один облик на
 * всё; носителей у него два (этот файл для статики и wp_enqueue того же URL для
 * WordPress), а ЗНАЧЕНИЯ живут ровно в одном месте — в токенах ниже.
 *
 * ЭТАЛОН (слово владельца 20.08, D-20082026-01, исполняется дословно):
 *   круг · 44 px на ВСЕХ ширинах и ВСЕХ страницах · заливка белая непрозрачная ·
 *   стрелка оранжевая #f6921e · тонкая рамка · при нажатии заливка оранжевая,
 *   стрелка белая, моргание ~200 мс · тень мягкая, одинаковая · по бокам ленты,
 *   по вертикальному центру КАДРА · на краях гасится opacity, не исчезает.
 *
 * ПОЧЕМУ ЧАСТЬ ГЕОМЕТРИИ ВСЁ РАВНО СТАВИТ JS. Поверх этих кнопок на контуре
 * лежит четыре чужих !important-правила, и одно из них — #videos .vid-cf-arrows
 * button{...!important} — имеет специфичность (1,1,1). Селектором из классов её
 * не перебить в принципе: среди !important-объявлений выигрывает более
 * специфичное, а id всегда тяжелее любого числа классов. Чужие листы править
 * нельзя (bfc-fixes.css и bfc-portal-menu.js — общие носители контура). Поэтому
 * bfc-galbtn.js ЧИТАЕТ значения из токенов ниже и ставит их инлайном с
 * приоритетом important. Источник правды остаётся здесь: в JS нет ни одного
 * зашитого размера или цвета.
 *
 * ЧТО ЭТОТ ФАЙЛ НЕ ТРОГАЕТ. Разметку, подписи, ростеры, состав лент, логику
 * листания. Только облик кнопки, её место и облик точек-индикаторов.
 */

:root {
  /* --- облик кнопки. Единственное место, где эти числа названы. ----------- */
  --bfcgb-d: 44px;                          /* диаметр, все ширины (эталон) */
  --bfcgb-bg: #fff;                         /* заливка покоя, непрозрачная */
  --bfcgb-fg: #f6921e;                      /* стрелка покоя */
  /* КОЛЬЦО. D-21082026-22, слово владельца: «белая кнопка на белой карточке —
     кнопки не видно». Бриф назвал и облик (1px rgba(0,0,0,.12) + тень
     0 2px 8px rgba(0,0,0,.18)), и критерий приёмки (контраст кольца к подложке
     под ним ≥ 3:1). ЭТИ ДВА ТРЕБОВАНИЯ ПРОТИВОРЕЧАТ ДРУГ ДРУГУ, и это видно
     арифметикой, а не на глаз: фон кнопки рисуется ПОД рамкой (background-clip
     по умолчанию border-box), поэтому полупрозрачное кольцо ложится на
     СОБСТВЕННУЮ белую заливку, а не на подложку. rgba(0,0,0,.12) поверх белого
     даёт rgb(224) — контраст к белой карточке 1.32:1, к rgb(250) — 1.28:1.
     Прежнее rgba(26,26,26,.14) давало rgb(223) и ровно 1.33:1 — замер ДО по
     всему контуру: НАРУШИТЕЛЕЙ 109 из 109 измеримых
     (.coordinate/s71l/before/*.json). То есть предписанное число не лечит
     названный дефект, а воспроизводит его.
     D-S71-L-01: тон берём из брифа дословно (чистый чёрный, не #1a1a1a),
     а прозрачность поднимаем до минимума, при котором критерий брифа
     выполняется на ВСЕХ подложках, реально найденных на контуре сплошным
     обходом: rgb(255), rgb(250) и rgb(242) — других цветных подложек под
     кнопками нет (остальные 213 точек — фотография и 5 — градиент, там число
     неприменимо, и кружок отделяет от кадра белая заливка, а не кольцо).
     Считаем от худшей: для порога 3:1 к rgb(242) яркость кольца должна быть
     не выше 0.2626, это rgb(140). Чёрный с прозрачностью .46 поверх белого
     даёт rgb(138) — 3.10:1 к rgb(242), 3.32:1 к rgb(250), 3.47:1 к белому.
     Тоньше 1px не делаем и цвет не трогаем: эталон D-20082026-01 говорит
     «тонкая рамка», не называя её цвета, — значит И-70 здесь не нарушается. */
  --bfcgb-bd: 1px solid rgba(0, 0, 0, .46);
  --bfcgb-sh: 0 2px 8px rgba(0, 0, 0, .18);     /* тень — числа брифа дословно */
  --bfcgb-on-bg: #f6921e;                   /* заливка нажатия */
  --bfcgb-on-fg: #fff;                      /* стрелка нажатия */
  --bfcgb-off: .35;                         /* край ленты: гасим, не прячем */
  /* Слой кнопки. НИЖНЯЯ граница, а не назначение: компонент берёт максимум из
     этого числа и того слоя, что семейство назначило себе само. Жёсткое
     значение уже стоило дефекта — кружкам патентов донора прописали z-index:5
     вместо их собственного, и кадры карусели стали накрывать кнопку: замер
     elementFromPoint в точке кнопки отдавал IMG, нажатие до кнопки не доходило
     вовсе. Потолок сознательно низкий: модалка портала живёт на 100010, и
     кнопка ленты не должна оказаться поверх неё. */
  --bfcgb-z: 20;
  /* ПОТОЛОК слоя. Верхняя граница для самонастройки lift(): когда лента метит
     свои же слайды слоем выше кнопки (slick в режиме fade ставит активному
     слайду инлайновый z-index:999 и съедает 71 % кружка — замер S72-B на
     «Различных вариантах установок»), компонент поднимается ровно на один
     уровень над помехой и НЕ ВЫШЕ этого числа. Причина потолка та же, что у
     низкой нижней границы: модалка портала живёт на 100010, шапка на 100000,
     и кнопка ленты не имеет права оказаться поверх них. */
  --bfcgb-zmax: 9999;
  --bfcgb-flash: 200ms;                     /* длительность моргания */
  --bfcgb-tap: 160ms;                       /* смена цвета кнопки */
  /* --- ход ленты. Снято с эталона /manual/ (G3): slick ставит инлайном
         transition:transform 500ms при cssEase 'ease'; замер подтвердил кривую —
         на середине времени пройдено 80 % пути, что и даёт cubic-bezier ease. */
  --bfcgb-slide: 500ms;
  --bfcgb-ease: ease;
  /* --- точки-индикаторы -------------------------------------------------- */
  --bfcgb-dot: 8px;                         /* диаметр точки */
  --bfcgb-dot-off: rgba(26, 26, 26, .22);   /* неактивная на светлом */
  --bfcgb-dot-on: #f6921e;                  /* активная */
  --bfcgb-gap: 8px;                         /* шаг ряда точек */
}

/* Тёмная секция (патенты донора, лайтбоксы): рамка и неактивная точка на белом
   фоне читаются иначе. Класс ставит JS, увидев тёмную подложку под лентой. */
.bfcgb-dark {
  --bfcgb-bd: 1px solid rgba(255, 255, 255, .28);
  --bfcgb-sh: 0 2px 12px rgba(0, 0, 0, .38);
  --bfcgb-dot-off: rgba(255, 255, 255, .28);
}

/* ============================================================ КНОПКА ====== */
/* Класс дублируется (.bfcgb.bfcgb) не для красоты: он поднимает специфичность
   до (0,2,0) и снимает спор с одноклассовыми правилами семейств, которые лежат
   ПОЗЖЕ по каскаду (инлайн-<style> в wp_footer идут после наших enqueue). */
.bfcgb.bfcgb {
  box-sizing: border-box;
  width: var(--bfcgb-d);
  height: var(--bfcgb-d);
  min-width: var(--bfcgb-d);
  min-height: var(--bfcgb-d);
  padding: 0;
  border: var(--bfcgb-bd);
  border-radius: 50%;
  background: var(--bfcgb-bg);
  color: var(--bfcgb-fg);
  box-shadow: var(--bfcgb-sh);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  z-index: var(--bfcgb-z, 20);
  line-height: 1;
  font-size: 0;                 /* гасим родной глиф семейства: ‹ › &lsaquo; */
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: none;
  transition: background-color var(--bfcgb-tap) ease,
              color var(--bfcgb-tap) ease,
              border-color var(--bfcgb-tap) ease,
              opacity var(--bfcgb-tap) ease;
}

/* Родная стрелка семейства — svg с opacity:.2 у slick, картинка у иных.
   Гасим её и рисуем свою: иначе «одна кнопка» осталась бы шестью стрелками. */
.bfcgb.bfcgb > svg,
.bfcgb.bfcgb > img,
.bfcgb.bfcgb > i,
.bfcgb.bfcgb > span:not(.bfcgb-i) { display: none !important; }

/* Стрелка нарисована рамками, а не глифом и не шрифтовой иконкой: ‹ › зависят
   от гарнитуры (Onest/Unbounded рисуют их разной толщины и на разной базовой
   линии), а компонент обязан выглядеть одинаково на всех страницах. */
.bfcgb.bfcgb::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-width: 2px 2px 0 0;
  border-radius: 1px;
  transform: rotate(-135deg);   /* «влево» */
  margin-left: 3px;             /* оптический центр шеврона, не геометрический */
  transition: none;
}
.bfcgb.bfcgb[data-bfcgb="next"]::before {
  transform: rotate(45deg);
  margin-left: 0;
  margin-right: 3px;
}
/* ВЕРТИКАЛЬ. У шеврона из рамок «верх» и «низ» — это те же 90° от «вправо»:
   45 вправо, 135 вниз, −135 влево, −45 вверх. До S71-J этих двух веток не было
   вовсе, и кнопки ↑↓ вертикальной ленты рисовали «‹» — владелец увидел на месте
   стрелки вверх горизонтальную кнопку «назад» (D-21082026-13, цель 1).
   Оптический сдвиг тоже поворачивается: у «вверх» масса шеврона внизу. */
.bfcgb.bfcgb[data-bfcgb="up"]::before {
  transform: rotate(-45deg);
  margin: 3px 0 0 0;
}
.bfcgb.bfcgb[data-bfcgb="down"]::before {
  transform: rotate(135deg);
  margin: 0 0 3px 0;
}

/* Нажатие. Две ветки одного облика: :active — палец/мышь удерживают кнопку;
   .is-bfcgb-on — синтетическое моргание, его ставит JS на 200 мс при клике с
   клавиатуры, из скрипта и при свайпе (свайп на пяти галереях контура физически
   вызывает btn.click(), см. bfc-construct.js) — иначе отклик виден только мыши. */
.bfcgb.bfcgb:active,
.bfcgb.bfcgb.is-bfcgb-on {
  background: var(--bfcgb-on-bg);
  color: var(--bfcgb-on-fg);
  border-color: var(--bfcgb-on-bg);
}
.bfcgb.bfcgb:hover { background: var(--bfcgb-on-bg); color: var(--bfcgb-on-fg); border-color: var(--bfcgb-on-bg); }
.bfcgb.bfcgb:focus-visible { outline: 2px solid var(--bfcgb-on-bg); outline-offset: 3px; }

/* Край ленты. ИСЧЕЗНОВЕНИЕ ЗАПРЕЩЕНО: display:none убирает кнопку из потока и
   соседи прыгают — ровно тот дефект, о котором сказано «кнопка НЕ прыгает».
   Гасим прозрачностью, размер и место сохраняем. */
.bfcgb.bfcgb[disabled],
.bfcgb.bfcgb.is-bfcgb-end {
  opacity: var(--bfcgb-off);
  cursor: default;
  background: var(--bfcgb-bg);
  color: var(--bfcgb-fg);
  border: var(--bfcgb-bd);
  box-shadow: var(--bfcgb-sh);
}

/* Место. Точный y компонент считает в JS (центр КАДРА, а не карточки с
   подписью) и кладёт в --bfcgb-y на стойку ленты; здесь только его применение.
   50 % — запасной вариант на случай, если кадр ещё не загружен. */
.bfcgb.bfcgb {
  position: absolute;
  top: var(--bfcgb-y, 50%);
  transform: translateY(-50%);
}
.bfcgb.bfcgb[data-bfcgb="prev"] { left: var(--bfcgb-x, 8px); right: auto; }
.bfcgb.bfcgb[data-bfcgb="next"] { right: var(--bfcgb-x, 8px); left: auto; }

/* ============================== ВЕРТИКАЛЬНАЯ ЛЕНТА (D-21082026-13) ======== */
/* «Вертикальная лента (листание ↑↓) горизонтальных кнопок не получает вовсе» —
   слово владельца 21.08. Речь не только о стрелке: горизонтальная кнопка это
   ЕЩЁ И position:absolute + top по центру кадра + translateY(-50%). Именно эта
   геометрия, применённая к ленте «Объекты на монтаже», посадила ↑ ровно в центр
   фотографии, а ↓ выбросила из своей полосы: на 1280 — на 554 px ниже, под
   секцию, на 375 — точно в центр ВЗРЫВ-СХЕМЫ соседней колонки (замер
   .coordinate/s71j/before/donor_375.json: кнопка на 0.50 ширины кадра схемы).
   Обе жалобы владельца — цели 1 и 2 — это один дефект в двух местах.
   Здесь вертикальная кнопка возвращается В ПОТОК своей полосы (.bfc-cx-upbar
   над кадром, .bfc-cx-downbar под ним): полоса и так flex + justify-content
   center, значит «по центру ширины» получается само и не может разъехаться при
   перелистывании — смещение 0 px не вычисляется, а обеспечивается конструкцией.
   Облик при этом остаётся общим: тот же круг 44, та же заливка, та же стрелка. */
.bfcgb.bfcgb--v {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  margin-left: 0;
  margin-right: 0;
}

/* ================================ ЛАЙТБОКС (D-21082026-13, цель 5) ======== */
/* У модалки нет ленты в смысле прокрутки: кадр там подменяется скриптом.
   До S71-J компонент искал ленту вверх по дереву, не находил её в модалке,
   доходил до body и хватал ПЕРВУЮ попавшуюся ленту страницы — кнопки патентов
   получали место чужой карусели (замер: модалка на y=27..873, кнопки на
   y=1585) и заодно её край-состояние opacity .35. Для владельца это выглядело
   как «кнопок листания нет вовсе». Место кнопки лайтбокса ставит placeLB() по
   якорю-кадру, а этот блок отвечает за то, чтобы кнопка была НАД кадром и под
   крестиком: крестик модалки живёт на своём слое, перекрывать его нельзя. */
.bfcgb.bfcgb--lb { position: absolute; }

/* ============================================================== ТОЧКИ ===== */
/* Облик точки сводится к одному; ЧИСЛО точек ограничивает окно из шести —
   это правило большинства на контуре (замер: 9 групп уже показывают 6 из 7..21,
   и оно трижды принято владельцем — RQ-197 на PDP, RQ-230 на /catalog/,
   S47-A на «Просто сравните сами»). Само окно ведёт bfc-slick-dots-cap.php для
   slick-семейств и bfc-galbtn.js для остальных. */
.bfcgb-dots .bfcgb-dot,
.bfcgb-dot {
  box-sizing: border-box;
  width: var(--bfcgb-dot);
  height: var(--bfcgb-dot);
  border-radius: 50%;
  background: var(--bfcgb-dot-off);
  border: 0;
  padding: 0;
  transition: background-color var(--bfcgb-tap) ease;
}
.bfcgb-dot.is-bfcgb-cur,
.bfcgb-dots .is-bfcgb-cur .bfcgb-dot { background: var(--bfcgb-dot-on); }
/* Точка вне окна из шести. Скрываем саму точку, а не её обёртку-li: у slick на
   li висит обработчик перехода на кадр, и его снимать нельзя (И-70). */
.bfcgb-dot[data-bfcgb-cap="off"],
[data-bfcgb-cap="off"] { display: none; }

/* Ряд точек не переносится: перенос и давал «два ряда» из RQ-230. */
.bfcgb-dots { flex-wrap: nowrap; gap: var(--bfcgb-gap); }

@media (prefers-reduced-motion: reduce) {
  .bfcgb.bfcgb { transition: none; }
}

/* ================== ЛАЙТБОКС ПАТЕНТОВ ГЛАВНОЙ (S73-B, D-22082026-15) ======= */
/* СВОЁ ИМЯ, А НЕ .plb ДОНОРА. Этот лист грузится и на /proektirovshchikam/, где
   лайтбокс патентов донора носит класс .plb и оформлен там же, в статике,
   принятыми владельцем правилами (S71-J, П5). Правило .plb-* отсюда легло бы
   поверх них — прямой откат И-70. Поэтому пространство имён .bfcplb: облик один
   (кнопки одевает общий род через bindLB), а правила не пересекаются.
   ГЕОМЕТРИЯ ВЗЯТА С ДОНОРА В ЕГО КОНЕЧНОМ ВИДЕ: узкая стойка min(620px,94vw) и
   кадр по высоте (82vh) — документы здесь того же рода, портретные грамоты А4,
   и по ширине они вписывались бы с огромными полями сверху и снизу.
   z-index 100001 — как у донора: выше капсулы шапки (100000) и ниже модалки
   портала (100010), чтобы заголовок документа не уходил под шапку. */
.bfcplb {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 26, .97);
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bfcplb.is-open { display: flex; }
/* КОЛЬЦО НА ЧУЖОМ ФОНЕ (S73-B, замер .coordinate/s73b/ring/).
   Кнопки лайтбокса стоят НЕ на подложке модалки, а поверх САМОГО ДОКУМЕНТА:
   placeLB() кладёт их на 8 px внутрь стойки, а стойку почти целиком занимает
   кадр. Документы разные — грамота на белой бумаге, сертификат на синем бланке,
   — и белый кружок в тёмном роде (--bfcgb-bd = rgba(255,255,255,.28)) на белой
   бумаге сливается: замер дал 1.03:1 и 1.10:1 при пороге брифа 3:1. Это та же
   готча S71-L «фон рисуется ПОД рамкой», только подложкой тут служит чужой скан.
   Правим ТОЛЬКО в своём пространстве имён: токены читаются с КНОПКИ
   (paint/dress зовут tok(..., btn)), поэтому переопределение на корне .bfcplb
   доходит до кнопок по наследованию и не задевает ни ленты, ни лайтбокс донора.
   Тёмный контур + плотное кольцо тенью: на светлом документе видно контур, на
   тёмном — саму белую заливку. Специфичность (0,1,0) равна .bfcgb-dark, но это
   правило лежит ПОЗЖЕ по файлу и потому выигрывает. */
.bfcplb {
  --bfcgb-bd: 1px solid rgba(0, 0, 0, .62);
  --bfcgb-sh: 0 0 0 2px rgba(0, 0, 0, .55), 0 3px 12px rgba(0, 0, 0, .50);
}
.bfcplb-inner {
  max-width: min(620px, 94vw);
  width: 100%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;    /* стойка для placeLB(): от неё считается место кнопок */
}
.bfcplb-title {
  color: #fff;
  font-family: 'Unbounded', 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  padding-right: 48px;   /* место под крестик, иначе длинная подпись лезет под него */
}
.bfcplb-img {
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  border-radius: 14px;   /* И-91: скруглённый кадр в скруглённой карточке */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bfcplb-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.bfcplb-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.bfcplb-counter { color: rgba(255, 255, 255, .6); font-size: 13px; }
/* Крестик — облик донора: он НЕ входит в род «кнопка ленты» и его не одевает
   dress(). Перекрывать его кнопкам листания запрещено прямым словом владельца,
   поэтому слой у него выше. */
.bfcplb-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bfcplb-close:hover { background: rgba(255, 255, 255, .3); }
.bfcplb-close:focus-visible { outline: 2px solid var(--bfcgb-on-bg); outline-offset: 2px; }
/* База стрелок — на случай, если компонент ещё не дошёл до них (первый кадр).
   Дальше их геометрию и цвет ставит dress() инлайном с important. */
.bfcplb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bfcgb-bg);
  color: var(--bfcgb-fg);
  border: 0;
  width: var(--bfcgb-d);
  height: var(--bfcgb-d);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .bfcplb { padding: 10px; }
  .bfcplb-inner { max-width: 96vw; max-height: 96vh; }
  .bfcplb-img img { max-height: 74vh; }
  .bfcplb-title { font-size: 15px; }
}