/* ============================================================================
   ui-kit.css — компоненты ДС v3 BunnySplit (префикс .bs-*). Только токены tokens.css.
   Решения владельца (20.10): контролы — пилюли одной высоты (кнопки, поля, списки);
   статусы — ступень 600 на мягком фоне + значок; дисплейный шрифт — только от 20px.
   Старые системы (.pp-btn, .btn-*, .pr-btn-*, .pp-input …) живут как есть и переводятся
   сюда по одной (шаги 3–6 плана редизайна).
   Порядок подключения: tokens.css → ui-kit.css (→ CSS страницы).
   ============================================================================ */

/* ── Кнопка ───────────────────────────────────────────────────────────────── */
.bs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--ctl-md); padding:0 var(--sp-5);
  border:var(--bw-strong) solid transparent; border-radius:var(--rad-pill);
  font:600 var(--fs-sm)/1 var(--font); color:var(--ink); background:transparent;
  text-decoration:none; white-space:nowrap; cursor:pointer; position:relative;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur-fast) var(--ease-bounce), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bs-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.bs-btn:disabled,.bs-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.bs-btn svg{ width:var(--icon-sm); height:var(--icon-sm); flex:none; }
.bs-btn--primary{ background:var(--grad-btn); color:var(--accent-ink); box-shadow:var(--shadow-btn); }
.bs-btn--primary:hover:not(:disabled){ transform:translateY(-1px); }
.bs-btn--primary:active:not(:disabled){ transform:none; }
.bs-btn--primary:focus-visible{ box-shadow:var(--focus-ring), var(--shadow-btn); }
.bs-btn--secondary{ background:var(--card); border-color:var(--border-strong); }
.bs-btn--secondary:hover:not(:disabled){ border-color:var(--ink2); background:var(--bg); }
.bs-btn--ghost{ color:var(--ink2); }
.bs-btn--ghost:hover:not(:disabled){ background:var(--bg2); color:var(--ink); }
.bs-btn--danger{ background:var(--card); color:var(--err-ink); border-color:var(--err-ink); }
.bs-btn--danger:hover:not(:disabled){ background:var(--err-soft); }
.bs-btn--growth{ background:var(--accent-soft); color:var(--violet-700); border-color:var(--violet-200); }
.bs-btn--growth:hover:not(:disabled){ background:var(--violet-600); color:var(--accent-ink); border-color:var(--violet-600); }
.bs-btn--sm{ min-height:var(--ctl-sm); padding:0 var(--sp-3); font-size:var(--fs-ctl); }
.bs-btn--lg{ min-height:var(--ctl-lg); padding:0 var(--sp-7); font-size:var(--fs-base); font-weight:700; }
.bs-btn--block{ width:100%; }
.bs-btn--icon{ padding:0; width:var(--ctl-md); }
.bs-btn--icon.bs-btn--sm{ width:var(--ctl-sm); }
.bs-btn--icon.bs-btn--lg{ width:var(--ctl-lg); }
.bs-btn.is-loading{ color:transparent !important; pointer-events:none; }
.bs-btn.is-loading::after{
  content:""; position:absolute; width:var(--icon-sm); height:var(--icon-sm); border-radius:50%;
  border:2px solid var(--accent-ink); border-color:var(--accent-ink) transparent var(--accent-ink) transparent;
  animation:bs-spin .8s linear infinite;
}
.bs-btn--secondary.is-loading::after,.bs-btn--ghost.is-loading::after{ border-color:var(--ink2) transparent var(--ink2) transparent; }
@keyframes bs-spin{ to{ transform:rotate(360deg); } }

/* ── Счётчик количества «− 1 +»: пилюля высотой кнопки, круглые кнопки внутри ──
   <div class="bs-stepper"><button class="bs-stepper__btn">−</button><span class="bs-stepper__val">1</span><button class="bs-stepper__btn">+</button></div>
   Размеры как у кнопок: md 44 (по умолчанию) и --sm 32 (строки корзины). */
.bs-stepper{ display:inline-flex; align-items:center; flex:none; min-height:var(--ctl-md); padding:2px;
  border:var(--bw-strong) solid var(--border-strong); border-radius:var(--rad-pill); background:var(--card); }
.bs-stepper__btn{ width:calc(var(--ctl-md) - 8px); height:calc(var(--ctl-md) - 8px); display:grid; place-items:center;
  border:0; border-radius:var(--rad-pill); background:none; color:var(--ink2); font:600 var(--fs-lg)/1 var(--font); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.bs-stepper__btn:hover:not(:disabled){ background:var(--bg2); color:var(--ink); }
.bs-stepper__btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.bs-stepper__btn:disabled{ opacity:.4; cursor:not-allowed; }
.bs-stepper__val{ min-width:32px; text-align:center; font:700 var(--fs-sm) var(--font); color:var(--ink); font-variant-numeric:tabular-nums; }
.bs-stepper--sm{ min-height:var(--ctl-sm); padding:1px; }
.bs-stepper--sm .bs-stepper__btn{ width:26px; height:26px; font-size:var(--fs-base); }
.bs-stepper--sm .bs-stepper__val{ min-width:24px; }

/* ── Поле: пилюля той же высоты, что кнопка ──────────────────────────────── */
.bs-field{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; }
.bs-field__label{ font:600 var(--fs-sm)/var(--lh-tight) var(--font); color:var(--ink); }
.bs-field__label .req{ color:var(--err-ink); margin-left:2px; }
.bs-field__hint{ font:400 var(--fs-xs)/var(--lh-normal) var(--font); color:var(--text-muted); padding-left:var(--sp-4); }
.bs-field__error{ font:500 var(--fs-xs)/var(--lh-normal) var(--font); color:var(--err-ink); padding-left:var(--sp-4); }
.bs-input{
  width:100%; min-height:var(--ctl-md); padding:0 var(--sp-4);
  border:var(--bw-strong) solid var(--border-strong); border-radius:var(--rad-pill);
  background:var(--card); color:var(--ink); font:400 var(--fs-sm) var(--font);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bs-input::placeholder{ color:var(--text-muted); }
.bs-input:hover:not(:disabled):not([readonly]){ border-color:var(--ink2); }
.bs-input:focus,.bs-input:focus-visible{ outline:none; border-color:var(--violet-600); box-shadow:var(--focus-ring); }
.bs-input[aria-invalid="true"]{ border-color:var(--err-ink); }
.bs-input[aria-invalid="true"]:focus{ box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--err-ink); }
.bs-input:disabled{ background:var(--bg2); color:var(--text-muted); border-color:var(--line2); cursor:not-allowed; }
.bs-input[readonly]{ background:var(--bg2); border-color:var(--line2); }
.bs-input--sm{ min-height:var(--ctl-sm); font-size:var(--fs-xs); padding:0 var(--sp-3); }
textarea.bs-input{ border-radius:var(--rad-xl); padding:var(--sp-3) var(--sp-4); min-height:96px; resize:vertical; line-height:var(--lh-normal); }
.bs-input-wrap{ position:relative; display:flex; align-items:center; }
.bs-input-wrap > svg{ position:absolute; left:var(--sp-4); width:var(--icon-sm); height:var(--icon-sm); color:var(--text-muted); pointer-events:none; }
.bs-input-wrap > svg + .bs-input{ padding-left:calc(var(--sp-4) + var(--icon-sm) + var(--sp-2)); }
.bs-input-wrap > .bs-input-suffix{ position:absolute; right:var(--sp-4); color:var(--text-muted); font:500 var(--fs-sm) var(--font); pointer-events:none; }
.bs-input-wrap > .bs-input:has(+ .bs-input-suffix){ padding-right:calc(var(--sp-4) + var(--sp-6)); }

/* ── Список: нативный select в форме поля, своя стрелка ───────────────────── */
select.bs-input{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding-right:calc(var(--sp-4) + var(--icon-sm) + var(--sp-2));
  background:var(--card) var(--icon-chevron-down) no-repeat right var(--sp-4) center/var(--icon-sm) var(--icon-sm);
}

/* ── Чекбокс, радио, тумблер (нативные input, оформлены токенами) ─────────── */
.bs-check,.bs-radio,.bs-switch{ display:inline-flex; align-items:center; gap:var(--sp-3); min-height:var(--ctl-md); cursor:pointer; font:400 var(--fs-sm) var(--font); color:var(--ink); }
.bs-check input,.bs-radio input{
  -webkit-appearance:none; appearance:none; margin:0; flex:none; width:20px; height:20px;
  border:var(--bw-strong) solid var(--border-strong); background:var(--card); display:grid; place-content:center;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bs-check input{ border-radius:var(--rad-xs); }
.bs-radio input{ border-radius:50%; }
.bs-check input::before{ content:""; width:12px; height:12px; background:var(--accent-ink); -webkit-mask:var(--icon-check) center/contain no-repeat; mask:var(--icon-check) center/contain no-repeat; transform:scale(0); transition:transform var(--dur-fast) var(--ease-bounce); }
.bs-radio input::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent-ink); transform:scale(0); transition:transform var(--dur-fast) var(--ease-bounce); }
.bs-check input:checked,.bs-radio input:checked{ background:var(--violet-600); border-color:var(--violet-600); }
.bs-check input:checked::before,.bs-radio input:checked::before{ transform:scale(1); }
.bs-check input:indeterminate{ background:var(--violet-600); border-color:var(--violet-600); }
.bs-check input:indeterminate::before{ -webkit-mask:none; mask:none; height:2px; transform:scale(1); }
.bs-check input:hover:not(:checked):not(:disabled),.bs-radio input:hover:not(:checked):not(:disabled){ border-color:var(--ink2); }
.bs-check input:focus-visible,.bs-radio input:focus-visible,.bs-switch input:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.bs-check input[aria-invalid="true"]{ border-color:var(--err-ink); }
.bs-check:has(input:disabled),.bs-radio:has(input:disabled),.bs-switch:has(input:disabled){ opacity:.45; cursor:not-allowed; }
.bs-switch input{
  -webkit-appearance:none; appearance:none; margin:0; flex:none; position:relative; cursor:pointer;
  width:46px; height:28px; border-radius:var(--rad-pill); background:var(--card); border:var(--bw-strong) solid var(--border-strong);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bs-switch input::before{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--ink2); transition:transform var(--dur) var(--ease-bounce), background var(--dur) var(--ease); }
.bs-switch input:checked{ background:var(--violet-600); border-color:var(--violet-600); }
.bs-switch input:checked::before{ transform:translateX(18px); background:var(--accent-ink); }
.bs-switch--sm input{ width:36px; height:22px; }
.bs-switch--sm input::before{ width:14px; height:14px; }
.bs-switch--sm input:checked::before{ transform:translateX(14px); }

/* ── Сегмент: пилюля в пилюле (одно правило, раскладку задаёт страница) ────── */
.bs-seg{ display:inline-flex; padding:var(--sp-1); gap:var(--sp-1); background:var(--bg2); border-radius:var(--rad-pill); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.bs-seg button,.bs-seg label{
  min-height:calc(var(--ctl-md) - 2 * var(--sp-1)); padding:0 var(--sp-4); border:0; border-radius:var(--rad-pill);
  background:transparent; color:var(--ink2); font:600 var(--fs-sm) var(--font); cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bs-seg button:hover:not([aria-pressed="true"]):not([aria-selected="true"]){ color:var(--ink); }
.bs-seg button[aria-pressed="true"],.bs-seg button[aria-selected="true"],.bs-seg label:has(input:checked){ background:var(--card); color:var(--ink); box-shadow:var(--shadow-1); }
.bs-seg input{ position:absolute; opacity:0; pointer-events:none; }
.bs-seg button:focus-visible,.bs-seg label:has(input:focus-visible){ outline:none; box-shadow:var(--focus-ring); }
.bs-seg--sm button,.bs-seg--sm label{ min-height:calc(var(--ctl-sm) - 2 * var(--sp-1)); padding:0 var(--sp-3); font-size:var(--fs-xs); }

/* ── Вкладки (подчёркивание) ──────────────────────────────────────────────── */
.bs-tabs{ display:flex; gap:var(--sp-6); border-bottom:var(--bw) solid var(--line2); overflow-x:auto; scrollbar-width:none; }
.bs-tabs button{ position:relative; padding:var(--sp-3) 0; border:0; background:none; cursor:pointer; color:var(--ink2); font:600 var(--fs-sm) var(--font); white-space:nowrap; }
.bs-tabs button[aria-selected="true"]{ color:var(--ink); }
.bs-tabs button[aria-selected="true"]::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--violet-600); }
.bs-tabs button:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--rad-xs); }
.bs-tabs .count{ margin-left:var(--sp-1); color:var(--text-muted); font-weight:500; }

/* ── Метка (статичная, 5 тонов, значок), фильтр (интерактивный), тег (ссылка) ─ */
.bs-badge{ display:inline-flex; align-items:center; gap:var(--sp-1); height:24px; padding:0 var(--sp-2); border-radius:var(--rad-pill); font:600 var(--fs-xs)/1 var(--font); background:var(--bg2); color:var(--ink2); white-space:nowrap; }
.bs-badge svg{ width:14px; height:14px; flex:none; }
.bs-badge--accent{ background:var(--accent-soft); color:var(--violet-700); }
.bs-badge--ok{ background:var(--ok-soft); color:var(--ok-ink); }
.bs-badge--warn{ background:var(--warn-soft); color:var(--warn-ink); }
.bs-badge--err{ background:var(--err-soft); color:var(--err-ink); }
.bs-filter{
  display:inline-flex; align-items:center; gap:var(--sp-1); min-height:var(--ctl-sm); padding:0 var(--sp-4); border-radius:var(--rad-pill);
  border:var(--bw) solid var(--line2); background:var(--card); color:var(--ink); font:500 var(--fs-sm) var(--font); cursor:pointer;
  position:relative; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bs-filter::before{ content:""; position:absolute; inset:-6px 0; }
.bs-filter:hover{ border-color:var(--border-strong); }
.bs-filter[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--violet-300); color:var(--violet-700); font-weight:600; }
.bs-filter > .tick{ display:none; width:14px; height:14px; background:currentColor; -webkit-mask:var(--icon-check) center/contain no-repeat; mask:var(--icon-check) center/contain no-repeat; }
.bs-filter[aria-pressed="true"] > .tick{ display:inline-block; }
.bs-filter:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.bs-filter .count{ color:var(--text-muted); font-weight:500; }
.bs-tag{ color:var(--accent-text); font:500 var(--fs-sm) var(--font); text-decoration:underline; text-decoration-color:var(--violet-200); text-underline-offset:3px; }
.bs-tag:hover{ text-decoration-color:currentColor; }
.bs-tag:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--rad-xs); }

/* ── Ссылка ───────────────────────────────────────────────────────────────── */
.bs-link{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--violet-200); font-weight:500; }
.bs-link:hover{ text-decoration-color:currentColor; }
.bs-link:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--rad-xs); }

/* ── Плашка статуса (+одно действие) и тост ───────────────────────────────── */
.bs-note{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-1) var(--sp-3); align-items:start;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--rad-lg); border-left:var(--bw-accent) solid var(--line2);
  background:var(--bg2); color:var(--ink); font:400 var(--fs-sm)/var(--lh-normal) var(--font);
}
.bs-note__icon{ grid-row:span 2; width:var(--icon-md); height:var(--icon-md); }
.bs-note__title{ font-weight:700; }
.bs-note__body{ grid-column:2; color:var(--ink2); }
.bs-note__action{ grid-column:2; justify-self:start; margin-top:var(--sp-1); }
.bs-note--ok{ background:var(--ok-soft); border-left-color:var(--ok); } .bs-note--ok .bs-note__icon{ color:var(--ok-ink); }
.bs-note--warn{ background:var(--warn-soft); border-left-color:var(--warn-line); } .bs-note--warn .bs-note__icon{ color:var(--warn-ink); }
.bs-note--err{ background:var(--err-soft); border-left-color:var(--err); } .bs-note--err .bs-note__icon{ color:var(--err-ink); }
.bs-note--info{ background:var(--accent-soft); border-left-color:var(--violet-500); } .bs-note--info .bs-note__icon{ color:var(--violet-700); }
.bs-toast{
  display:inline-flex; align-items:center; gap:var(--sp-3); min-height:var(--ctl-md); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius:var(--rad-pill); background:var(--ink); color:var(--card); box-shadow:var(--shadow-2); font:500 var(--fs-sm) var(--font);
}
.bs-toast svg{ width:var(--icon-sm); height:var(--icon-sm); flex:none; }
.bs-toast--ok svg{ color:var(--emerald-300); } .bs-toast--err svg{ color:var(--rose-300); }
.bs-toast .bs-btn{ min-height:var(--ctl-sm); color:var(--violet-200); }
.bs-toast .bs-btn:hover{ background:rgba(255,255,255,.1); color:var(--card); }

/* ── Карточка, панель ─────────────────────────────────────────────────────── */
.bs-card{ background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--rad-lg); box-shadow:var(--shadow-1); padding:var(--sp-5); }
.bs-panel{ background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--rad-lg); padding:var(--sp-4); }

/* ── Карточка товара v3: картинка → название → цена → одна мета → тихая кнопка.
      Карточка не кнопка: ссылка-заголовок растянута на всю карточку (::after),
      избранное и кнопка — поверх неё. ─────────────────────────────────────── */
.bs-pcard{ position:relative; display:flex; flex-direction:column; background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--rad-lg); overflow:hidden; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.bs-pcard:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.bs-pcard__media{ position:relative; aspect-ratio:1; background:var(--bg2); }
.bs-pcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bs-pcard__badge{ position:absolute; left:var(--sp-2); top:var(--sp-2); }
.bs-pcard__fav{ position:absolute; right:var(--sp-2); top:var(--sp-2); z-index:2; width:var(--ctl-sm); height:var(--ctl-sm); border-radius:50%; border:0; background:var(--card); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-1); }
.bs-pcard__fav svg{ width:var(--icon-sm); height:var(--icon-sm); }
.bs-pcard__fav:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.bs-pcard__body{ display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-3); flex:1; }
.bs-pcard__title{ margin:0; font:500 var(--fs-sm)/1.35 var(--font); color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.bs-pcard__title a{ color:inherit; text-decoration:none; }
.bs-pcard__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.bs-pcard__title a:focus-visible{ outline:none; }
.bs-pcard:has(.bs-pcard__title a:focus-visible){ box-shadow:var(--focus-ring); }
.bs-pcard__price{ font:700 var(--fs-md)/var(--lh-tight) var(--font); font-variant-numeric:tabular-nums; color:var(--ink); }
.bs-pcard__price.is-free{ color:var(--ok-ink); }
.bs-pcard__meta{ font:400 var(--fs-xs)/var(--lh-normal) var(--font); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bs-pcard__cta{ margin-top:var(--sp-2); position:relative; z-index:2; }

/* ── Пустое состояние ─────────────────────────────────────────────────────── */
.bs-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-2); padding:var(--sp-8) var(--sp-4); }
/* Кликко: живой webp или статичная PNG (выбирает <picture> по prefers-reduced-motion) */
.bs-empty picture{ display:contents; }
.bs-empty__art{ width:168px; height:168px; object-fit:contain; margin-bottom:var(--sp-1);
  animation:bs-klikko-in var(--dur-slow) var(--ease-bounce) both; }
.bs-empty__title{ margin:0; font:600 var(--fs-lg)/var(--lh-tight) var(--font-display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.bs-empty__text{ margin:0; max-width:40ch; font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--text-muted); text-wrap:pretty; }
.bs-empty__cta{ margin-top:var(--sp-3); display:flex; gap:var(--sp-3); flex-wrap:wrap; justify-content:center; }
.bs-empty--sm{ padding:var(--sp-5) var(--sp-3); }
.bs-empty--sm .bs-empty__art{ width:120px; height:120px; }
.bs-empty--sm .bs-empty__title{ font-size:var(--fs-base); }
.bs-empty--wait .bs-empty__art{ width:96px; height:96px; }
@keyframes bs-klikko-in{ 0%{ transform:scale(.7) translateY(8px); opacity:0; } 100%{ transform:none; opacity:1; } }
@media (max-width:560px){ .bs-empty__art{ width:136px; height:136px; } }
@media (prefers-reduced-motion:reduce){ .bs-empty__art{ animation:none; } }

/* Скелет загрузки списков */
.bs-skel{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); width:100%; }
.bs-skel__row{ height:14px; border-radius:var(--rad-sm);
  background:linear-gradient(90deg, var(--bg2) 25%, var(--gray-200) 37%, var(--bg2) 63%); background-size:400% 100%;
  animation:bs-skel 1.3s ease infinite; }
@keyframes bs-skel{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion:reduce){ .bs-skel__row{ animation:none; } }

/* ── Диалог: по центру (компьютер), шторкой снизу (телефон). Поверх нативный <dialog>. ── */
.bs-dialog{ border:0; padding:0; border-radius:var(--rad-xl); background:var(--card); color:var(--ink); box-shadow:var(--shadow-3); width:min(480px, calc(100vw - 2 * var(--sp-4))); max-height:calc(100dvh - 2 * var(--sp-6)); }
.bs-dialog::backdrop{ background:var(--overlay-scrim); }
.bs-dialog__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-5) var(--sp-5) var(--sp-2); }
.bs-dialog__title{ margin:0; font:600 var(--fs-lg)/var(--lh-tight) var(--font-display); }
.bs-dialog__body{ padding:0 var(--sp-5) var(--sp-4); color:var(--ink2); font:400 var(--fs-sm)/var(--lh-normal) var(--font); }
.bs-dialog__foot{ display:flex; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-3) var(--sp-5) var(--sp-5); }
@media (max-width:599px){
  .bs-dialog{ margin:auto 0 0; width:100%; max-width:none; border-radius:var(--rad-xl) var(--rad-xl) 0 0; }
  .bs-dialog__foot .bs-btn{ flex:1; }
}

/* ── «Выбор» с поиском (Tom Select) — для длинных списков; вид поля-пилюли ─── */
.ts-wrapper.bs-select{ width:100%; }
.ts-wrapper.bs-select .ts-control{
  min-height:var(--ctl-md); padding:0 calc(var(--sp-4) + var(--icon-sm) + var(--sp-2)) 0 var(--sp-4);
  border:var(--bw-strong) solid var(--border-strong); border-radius:var(--rad-pill); box-shadow:none;
  background:var(--card); position:relative;
  font:400 var(--fs-sm) var(--font); color:var(--ink); display:flex; align-items:center; cursor:pointer;
}
.ts-wrapper.bs-select.single .ts-control::after{ display:none; }
.ts-wrapper.bs-select .ts-control::before{
  content:""; position:absolute; right:var(--sp-4); top:50%; width:var(--icon-sm); height:var(--icon-sm); margin-top:calc(var(--icon-sm) / -2);
  background:var(--ink2); -webkit-mask:var(--icon-chevron-down) center/contain no-repeat; mask:var(--icon-chevron-down) center/contain no-repeat;
  transition:transform var(--dur) var(--ease); pointer-events:none;
}
.ts-wrapper.bs-select.dropdown-active .ts-control::before{ transform:rotate(180deg); }
.ts-wrapper.bs-select .ts-control:hover{ border-color:var(--ink2); }
.ts-wrapper.bs-select.focus .ts-control{ border-color:var(--violet-600); box-shadow:var(--focus-ring); }
.ts-wrapper.bs-select .ts-control > input{ font:inherit; color:var(--ink); flex:1 1 auto; min-width:var(--sp-4); }
.ts-wrapper.bs-select .ts-control input::placeholder{ color:var(--text-muted); }
.ts-wrapper.bs-select.is-searching .bs-select-item{ display:none; }
.bs-select-item small,.bs-select-opt small{ color:var(--text-muted); font-size:var(--fs-xs); white-space:nowrap; }
.ts-dropdown.bs-select-dd{
  margin-top:var(--sp-1); border:var(--bw) solid var(--line2); border-radius:var(--rad-lg);
  background:var(--card); box-shadow:var(--shadow-2); overflow:hidden; z-index:var(--z-popover);
  font:400 var(--fs-sm) var(--font); color:var(--ink);
}
.ts-dropdown.bs-select-dd .ts-dropdown-content{ max-height:min(360px,60vh); padding:var(--sp-1); }
.ts-dropdown.bs-select-dd .optgroup-header{ padding:var(--sp-2) var(--sp-3) var(--sp-1); background:var(--card); font:700 var(--fs-2xs) var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.ts-dropdown.bs-select-dd .option{ padding:var(--sp-2) var(--sp-3); border-radius:var(--rad-sm); display:flex; align-items:center; }
.ts-dropdown.bs-select-dd .bs-select-opt{ display:flex; justify-content:space-between; gap:var(--sp-3); align-items:baseline; }
.ts-dropdown.bs-select-dd .bs-select-opt > span{ flex:1 1 auto; white-space:nowrap; }
.ts-dropdown.bs-select-dd .option.active{ background:var(--bg2); color:var(--ink); }
.ts-dropdown.bs-select-dd .option.selected{ background:var(--accent-soft); color:var(--violet-700); font-weight:600; }
.ts-dropdown.bs-select-dd .option.selected small{ color:var(--violet-700); }
.ts-dropdown.bs-select-dd .option.selected::after{ content:""; flex:none; width:var(--icon-sm); height:var(--icon-sm); margin-left:var(--sp-2); background:currentColor; -webkit-mask:var(--icon-check) center/contain no-repeat; mask:var(--icon-check) center/contain no-repeat; }
.ts-dropdown.bs-select-dd .highlight{ background:var(--warn-soft); color:inherit; border-radius:var(--rad-2xs); }
.ts-dropdown.bs-select-dd .no-results{ padding:var(--sp-3); color:var(--ink2); font-size:var(--fs-sm); }

@media (pointer:coarse){ .bs-btn--sm,.bs-input--sm{ min-height:40px; } }
@media (prefers-reduced-motion:reduce){
  .bs-btn,.bs-input,.bs-switch input,.bs-switch input::before,.bs-pcard,.bs-check input::before,.bs-radio input::before{ transition:none; }
  .bs-btn--primary:hover:not(:disabled),.bs-pcard:hover{ transform:none; }
  .bs-btn.is-loading::after{ animation-duration:2s; }
}
.bs-toast:not(:has(.bs-btn)){ padding-right:var(--sp-5); }

/* ── Иконки: спрайт /icons.svg (Lucide 0.460.0 + бренд bs-*), вставка — icon() из src/ui/icon.js.
   Одна толщина линии и цвет текста; по умолчанию размер = размер шрифта. */
:where(.bs-ico){ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-0.125em;
  fill:none; stroke:currentColor; stroke-width:var(--icon-stroke,2); stroke-linecap:round; stroke-linejoin:round; }
/* :where — нулевая специфичность: старые классы размеров (.pn-ico, .cm-ico…) продолжают работать */
.bs-ico--sm{ width:var(--icon-sm); height:var(--icon-sm); }
.bs-ico--md{ width:var(--icon-md); height:var(--icon-md); }
.bs-ico--lg{ width:var(--icon-lg); height:var(--icon-lg); }
.bs-ico.is-spin{ animation:bs-ico-spin 1s linear infinite; }
@keyframes bs-ico-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .bs-ico.is-spin{ animation:none; } }

/* ── Чекбокс и радио по всему сайту (шаг 3) ─────────────────────────────────
   Любой нативный input[type=checkbox|radio] получает вид .bs-check/.bs-radio. :where — нулевая
   специфичность: скрытые input внутри тумблеров (.pp-switch/.cm-switch: opacity 0, размер по
   классу) и особые чекбоксы со своими классами не затрагиваются. */
:where(input[type="checkbox"], input[type="radio"]){
  -webkit-appearance:none; appearance:none; margin:0; flex:none; width:20px; height:20px;
  display:inline-grid; place-content:center; vertical-align:-0.3em; cursor:pointer;
  border:var(--bw-strong) solid var(--border-strong); background:var(--card);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
:where(input[type="checkbox"]){ border-radius:var(--rad-xs); }
:where(input[type="radio"]){ border-radius:50%; }
:where(input[type="checkbox"])::before{ content:""; width:12px; height:12px; background:var(--accent-ink);
  -webkit-mask:var(--icon-check) center/contain no-repeat; mask:var(--icon-check) center/contain no-repeat;
  transform:scale(0); transition:transform var(--dur-fast) var(--ease-bounce); }
:where(input[type="radio"])::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent-ink);
  transform:scale(0); transition:transform var(--dur-fast) var(--ease-bounce); }
:where(input[type="checkbox"], input[type="radio"]):checked{ background:var(--violet-600); border-color:var(--violet-600); }
:where(input[type="checkbox"], input[type="radio"]):checked::before{ transform:scale(1); }
:where(input[type="checkbox"]):indeterminate{ background:var(--violet-600); border-color:var(--violet-600); }
:where(input[type="checkbox"]):indeterminate::before{ -webkit-mask:none; mask:none; height:2px; transform:scale(1); }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:checked):not(:disabled){ border-color:var(--ink2); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible{ outline:none; box-shadow:var(--focus-ring); }
:where(input[type="checkbox"], input[type="radio"]):disabled{ opacity:.45; cursor:not-allowed; }
/* малый «Выбор» (32) — для рядов фильтров, в пару к .bs-btn--sm и .bs-input--sm */
.ts-wrapper.bs-select.bs-select--sm .ts-control{ min-height:var(--ctl-sm); padding-left:var(--sp-3); font-size:var(--fs-ctl); }

/* ── Подразделы (ревью C-01): вкладки-ссылки внутри раздела, вид как у сегмента ──
   <nav class="bs-subnav" aria-label="…"><a href aria-current="page">Лента</a>…</nav> */
.bs-subnav{ display:inline-flex; gap:var(--sp-1); padding:var(--sp-1); margin:0 0 var(--sp-4); background:var(--bg2);
  border-radius:var(--rad-pill); max-width:100%; overflow-x:auto; scrollbar-width:none; }
.bs-subnav::-webkit-scrollbar{ display:none; }
.bs-subnav a{ display:inline-flex; align-items:center; min-height:calc(var(--ctl-md) - 2 * var(--sp-1)); padding:0 var(--sp-4);
  border-radius:var(--rad-pill); font:600 var(--fs-sm)/1 var(--font); color:var(--ink2); text-decoration:none; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.bs-subnav a:hover{ color:var(--ink); }
.bs-subnav a[aria-current]{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-1); }
.bs-subnav a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
/* вариант --brand: активный раздел — фирменный градиент (как главная кнопка). Для верхнего
   уровня разделов, где навигация — заметный элемент страницы (хаб базы знаний).
   <nav class="bs-subnav bs-subnav--brand">…</nav> */
.bs-subnav--brand{ background:var(--accent-soft); }
.bs-subnav--brand a[aria-current]{ background:var(--grad-btn); color:var(--accent-ink); box-shadow:var(--shadow-btn); }

/* ── Плашки мастера (A-23): «Проверен» (bs-badge--ok) и «Новичок» (bs-badge--accent) рядом.
   Одна разметка на профиле, товаре и витрине: SSR-макрос _master_badges.html и
   frontend/src/ui/master-badges.js. */
.bs-mbadges{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1); vertical-align:middle; }