/* ==========================================================================
   Болгарка.kz — тема витрины
   Подключается последней, после bootstrap.css и stylesheet.css ядра.
   Мобильный размер — базовый, десктоп добирается медиазапросами.
   ========================================================================== */

:root {
  --bk-y:        #F5A623;  /* тёплое янтарное золото — было #FFD100, ярче и «строительнее» */
  --bk-y-press:  #D08D1D;
  --bk-glass-bg:    rgba(255, 255, 255, .72);   /* липкие панели: шапка, таб-бар, тулбар списка */
  --bk-glass-border: rgba(20, 20, 20, .08);
  --bk-glass-blur:   saturate(1.5) blur(18px);
  --bk-ink:      #1A1A1A;
  --bk-ink-soft: #3D3D3D;
  --bk-muted:    #6B6B6B;
  --bk-bg:       #FFFFFF;
  --bk-bg-alt:   #F2F3F5;   /* холодноватый серый фон страницы, карточки — белые */
  --bk-line:     #E8EAED;
  --bk-ok:       #1B9E4B;
  --bk-warn:     #D93025;

  /* Карточки держатся не рамкой, а мягкой тенью: рамка на каждом блоке
     дробит экран сеткой линий, тень оставляет только сам блок. */
  --bk-shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .05);
  --bk-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);

  --bk-r:        12px;   /* радиус скруглений */
  --bk-tap:      40px;   /* минимальная тач-цель */
  --bk-head:     102px;  /* высота липкой шапки на телефоне: .bk-header__top 48px + .bk-header__bar 54px */
  --bk-tabbar:   54px;
}

/* --- гасим костыли темы ядра -----------------------------------------------
   В stylesheet.css контейнер спозиционирован абсолютно, а под прибитый футер
   в #content зашит padding-bottom: 730px. Без сброса внизу каждой страницы
   остаётся пустая простыня. */
#container { position: static !important; margin-bottom: 0 !important; }
#content,
#column-left,
#column-right { padding-bottom: 0 !important; }
footer { position: static !important; bottom: auto !important; }

/* --- основа ---------------------------------------------------------------- */
body {
  background: var(--bk-bg-alt);
  color: var(--bk-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  padding-bottom: calc(var(--bk-tabbar) + env(safe-area-inset-bottom, 0px));
}
main { display: block; }
h1, h2, h3, h4, h5, h6 { color: var(--bk-ink); font-weight: 700; }
h1 { font-size: 19px; margin: 0 0 12px; }
h2 { font-size: 17px; }
a { color: var(--bk-ink); text-decoration: none; }
a:hover { color: var(--bk-ink); text-decoration: underline; }
.bk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 12px; }
.bk-muted { color: var(--bk-muted); }

/* ==========================================================================
   Шапка
   ========================================================================== */
/* Настоящее стекло: сквозь шапку видно размытый контент, который проскроллил
   под ней, — поэтому смысл есть только у липких/фиксированных панелей
   (шапка, таб-бар, тулбар списка), а не у обычных карточек на плоском фоне
   страницы — там блюрить нечего, будет выглядеть просто как ещё один
   плоский цвет. Фолбэк на непрозрачный белый — для браузеров без
   backdrop-filter (Firefox < 103, очень старые версии). */
.bk-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bk-glass-bg);
  backdrop-filter: var(--bk-glass-blur);
  -webkit-backdrop-filter: var(--bk-glass-blur);
  border-bottom: 1px solid var(--bk-glass-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
@supports not (backdrop-filter: blur(1px)) {
  .bk-header { background: rgba(255, 255, 255, .96); }
}
.bk-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px;
}

/* Строка с логотипом схлопывается при прокрутке (класс is-compact),
   строка с поиском остаётся всегда — сайт заточен под поиск. */
.bk-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  overflow: hidden;
  transition: height .18s ease, opacity .18s ease;
}
.bk-header.is-compact .bk-header__top { height: 0; opacity: 0; }

.bk-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
}

.bk-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bk-ink);
  line-height: 48px;
  white-space: nowrap;
}
.bk-logo:hover { color: var(--bk-ink); text-decoration: none; }
.bk-logo span { font-weight: 500; }
.bk-logo img { max-height: 32px; width: auto; vertical-align: middle; }

/* корзина в шапке — на телефоне её роль играет нижняя панель,
   но узел #cart обязан остаться в DOM: в него грузится ответ AJAX */
.bk-header__cart { display: none; }
.bk-header__cart .btn { border-radius: var(--bk-r); }

/* Кнопка «назад» слева от поиска. На десктопе не нужна — там есть
   браузерная панель, поэтому показываем её только на телефоне
   (правило в медиазапросе ниже). */
.bk-back {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--bk-tap);
  height: var(--bk-tap);
  margin-left: -6px;          /* прижимаем к краю: значок и так с полями */
  padding: 0;
  border: 0;
  border-radius: var(--bk-r);
  background: transparent;
  color: var(--bk-ink);
  cursor: pointer;
}
.bk-back:active { background: rgba(0, 0, 0, .07); transform: scale(.9); }
/* :active гаснет, как только палец оторвали, а переход занимает ещё
   секунду-другую — на это время класс держим скриптом, иначе кнопка
   выглядит ненажатой и человек жмёт повторно. */
.bk-back {
  transition: background .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.bk-back.is-busy { background: rgba(0, 0, 0, .12); transform: scale(.9); }

/* ==========================================================================
   Полоса загрузки
   Переход между страницами на телефоне занимает заметное время, а браузер
   в режиме установленного приложения своей полосы не рисует. Без отклика
   кажется, что нажатие не сработало, и по кнопке бьют ещё раз.
   Ширину гоним анимацией до 92%: honest-прогресса у нас нет, но движение
   само по себе показывает, что запрос идёт. Добежать до конца ей и не надо —
   страница сменится раньше и заберёт полосу с собой.
   ========================================================================== */
.bk-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.bk-progress.is-on { opacity: 1; }
.bk-progress__bar {
  width: 0;
  height: 100%;
  background: var(--bk-y);
  box-shadow: 0 0 10px rgba(245, 166, 35, .7);
}
.bk-progress.is-on .bk-progress__bar {
  animation: bk-progress 10s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes bk-progress {
  0%   { width: 0; }
  30%  { width: 48%; }
  60%  { width: 74%; }
  100% { width: 92%; }
}
/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .bk-progress.is-on .bk-progress__bar { animation: none; width: 60%; }
  .bk-back, .bk-back.is-busy { transition: none; transform: none; }
}

/* кнопка каталога: тёмная, иначе жёлтое на жёлтом не читается */
.bk-catbtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--bk-tap);
  padding: 0 12px;
  border: 0;
  border-radius: var(--bk-r);
  background: var(--bk-ink);
  color: var(--bk-y);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.bk-catbtn:active { background: #000; }
.bk-catbtn span { display: none; }

/* --- строка поиска --------------------------------------------------------- */
.bk-search { flex: 1 1 auto; min-width: 0; position: relative; }
.bk-search form { display: flex; gap: 0; margin: 0; }
/* Поле и кнопка — одна пилюля: рамка на форме, кнопка внутри без своего
   фона. Раньше тёмный квадрат сбоку резал строку надвое и перетягивал
   внимание на себя, хотя нажимают обычно Enter, а не его. */
.bk-search form {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  box-shadow: var(--bk-shadow-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-search form:focus-within {
  border-color: var(--bk-y);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .18);
}
.bk-search input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--bk-tap);
  padding: 0 4px 0 16px;
  font-size: 16px;             /* меньше 16px — iOS зумит страницу при фокусе */
  color: var(--bk-ink);
  background: transparent;
  border: 0;
  outline: 0;
}
.bk-search input[type="text"]::placeholder { color: var(--bk-muted); }
.bk-search button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: var(--bk-tap);
  border: 0;
  background: transparent;
  color: var(--bk-muted);
  cursor: pointer;
  transition: color .15s ease;
}
.bk-search form:focus-within button { color: var(--bk-ink); }
.bk-search button:active { color: var(--bk-y-press); }

/* --- выпадающие подсказки -------------------------------------------------- */
/* Список раскладываем флексом с переносом: категории идут первыми и
   занимают ширину по содержимому — выстраиваются чипсами в верхнюю
   строку; товары получают всю ширину и ложатся строками под ними.
   Высоту ограничивает скрипт по visualViewport, а не vh: vh не знает
   про экранную клавиатуру, и список уезжал под неё. */
.bk-suggest {
  position: absolute;
  inset: calc(var(--bk-tap) + 8px) 0 auto 0;
  z-index: 1040;
  display: none;
  max-height: 60vh;            /* запасное значение, скрипт уточнит */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
}
.bk-suggest.show { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.bk-suggest > li { flex: 0 0 100%; min-width: 0; }
.bk-suggest .dropdown-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "meta price";
  gap: 1px 10px;
  padding: 7px 8px;
  border-radius: 10px;
  white-space: normal;
  border-bottom: 0;
}

/* Категория — чипс: ширина по содержимому, поэтому несколько штук
   встают в одну строку наверху списка. Селектор :has() держится на
   метке внутри ссылки; где он не поддерживается, категория просто
   останется обычной строкой — вёрстка не ломается. */
.bk-suggest > li:has(.sg-cat-tag) { flex: 0 0 auto; max-width: 100%; }
.bk-suggest > li:has(.sg-cat-tag) .dropdown-item {
  display: block;
  padding: 0;
  border-radius: 999px;
}
.sg-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245, 166, 35, .16);
  color: var(--bk-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}
.sg-cat-tag svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--bk-y-press); }
.sg-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-cat-tag b { flex: 0 0 auto; color: var(--bk-muted); font-weight: 600; }
.bk-suggest > li:has(.sg-cat-tag) .dropdown-item:hover .sg-cat-tag,
.bk-suggest > li:has(.sg-cat-tag) .dropdown-item:focus .sg-cat-tag {
  background: rgba(245, 166, 35, .3);
}
.bk-suggest li:last-child .dropdown-item { border-bottom: 0; }
.bk-suggest .dropdown-item:hover,
.bk-suggest .dropdown-item:focus { background: var(--bk-bg-alt); }
.sg-name  { grid-area: name; font-weight: 600; font-size: 13px; line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-meta  { grid-area: meta; display: flex; gap: 8px; font-size: 11px; color: var(--bk-muted); }
.sg-stock { color: var(--bk-warn); }
.sg-stock.in { color: var(--bk-ok); }
.sg-price { grid-area: price; align-self: center; font-weight: 700; font-size: 13px; white-space: nowrap; }


.sg-all   { display: block; text-align: center; font-weight: 600; }
.sg-empty { display: block; text-align: center; color: var(--bk-muted); }
.bk-suggest #autocomplete-loading .dropdown-item { display: block; text-align: center; }

/* ==========================================================================
   Лента категорий (десктоп) и полноэкранный каталог (телефон)
   ========================================================================== */
.bk-catbar { display: none; background: var(--bk-ink); }
.bk-catbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bk-catbar__inner::-webkit-scrollbar { display: none; }
.bk-catbar a {
  flex: 0 0 auto;
  padding: 11px 12px;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}
.bk-catbar a:hover { background: rgba(255, 255, 255, .1); color: var(--bk-y); text-decoration: none; }

.bk-sheet {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.bk-sheet[hidden] { display: none; }
/* Шапка шторки — светлая, как и шапка сайта: сплошная янтарная плашка
   на пол-экрана спорит с товарами, ради которых шторку и открыли. */
.bk-sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid var(--bk-line);
  font-size: 17px;
  font-weight: 700;
}
.bk-sheet__close {
  width: var(--bk-tap);
  height: var(--bk-tap);
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.bk-sheet__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bk-cat__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--bk-line);
  background: #fff;
  color: var(--bk-ink);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.bk-cat__row[aria-expanded="true"] { background: var(--bk-bg-alt); }
.bk-cat__row[aria-expanded="true"] .bk-chevron { transform: rotate(180deg); }
.bk-chevron { flex: 0 0 auto; color: var(--bk-muted); transition: transform .15s ease; }
.bk-cat__kids { background: var(--bk-bg-alt); border-bottom: 1px solid var(--bk-line); }
.bk-cat__kids[hidden] { display: none; }
.bk-cat__kids a {
  display: block;
  min-height: var(--bk-tap);
  padding: 11px 14px 11px 28px;
  color: var(--bk-ink-soft);
  font-size: 14px;
}
.bk-cat__kids a:hover { background: #fff; text-decoration: none; }

/* ==========================================================================
   Нижняя таб-панель
   ========================================================================== */
.bk-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--bk-tabbar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bk-glass-bg);
  backdrop-filter: var(--bk-glass-blur);
  -webkit-backdrop-filter: var(--bk-glass-blur);
  border-top: 1px solid var(--bk-glass-border);
}
@supports not (backdrop-filter: blur(1px)) {
  .bk-tabbar { background: rgba(255, 255, 255, .96); }
}
.bk-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--bk-muted);
  font-size: 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.bk-tabbar a:hover { color: var(--bk-ink); text-decoration: none; }
.bk-tabbar i { font-size: 17px; }
.bk-tabbar .is-active { color: var(--bk-ink); }
.bk-tabbar .is-active i { color: var(--bk-ink); }
.bk-tabbar__slot { position: relative; }
.bk-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bk-ink);
  color: var(--bk-y);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.bk-badge[hidden] { display: none; }

/* ==========================================================================
   Главная
   ========================================================================== */
/* Мобильная база: поиск — главный элемент первого экрана. Геро-блок
   занимает всё пространство между липкой шапкой и нижней панелью, заголовок
   и перенесённое сюда поле поиска стоят по центру. На десктопе (ниже,
   в @media min-width:992px) блок возвращается к обычному компактному виду —
   там поиск остаётся в шапке.
   Высота шапки здесь не var(--bk-head)=102px: на мобильной главной вторая
   строка (кнопка «Каталог» + поиск) пустеет и схлопывается через JS —
   и кнопка, и поиск уезжают отсюда же, в hero и в нижнюю панель. Остаётся
   только строка с логотипом, 48px. */
/* Поиск стоит сразу под шапкой, а не по центру экрана: под ним должны
   помещаться ходовые категории. Раньше блок растягивался на всю высоту
   первого экрана — тогда он был единственным содержимым главной. */
.bk-hero {
  padding: 12px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Пока пользователь не начал печатать, поле стоит по центру первого экрана.
   Как только появился текст (theme.js вешает класс по событию input) —
   блок уезжает к верху, снизу освобождается место под подсказки на весь
   остаток экрана, а не только на то, что помещалось под центром. */
/* Поднимать блок при вводе больше незачем — он и так вверху. Подсказку
   гасим через visibility, а не display: под ней сразу идут плитки, и при
   display:none они прыгали вверх на её высоту с первым же символом. */
.bk-hero.is-searching .bk-hero__hint { visibility: hidden; }

.bk-hero h1 { font-size: 22px; margin-bottom: 4px; }
.bk-hero p { color: var(--bk-muted); margin: 0; }

.bk-hero__search-slot { width: 100%; max-width: 480px; margin-top: 20px; }
.bk-hero__search-slot .bk-search input[type="text"] { height: 60px; font-size: 18px; }
.bk-hero__search-slot .bk-search button { width: 60px; height: 60px; }

.bk-hero__hint {
  max-width: 320px;
  margin: 10px auto 2px;
  color: var(--bk-muted);
  font-size: 14px;
  line-height: 1.45;
}
.bk-hero__search-slot .bk-suggest .dropdown-item { font-size: 15px; }
.bk-section { padding: 18px 0; }
.bk-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.bk-section__head h2 { margin: 0; }
.bk-section__head a { font-size: 13px; color: var(--bk-muted); }

.bk-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Плитка категории: значок — имя — счётчик — шеврон.
   Вся плитка одна тач-цель, высота фиксированная, чтобы ряды не прыгали. */
.bk-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px 10px 10px 12px;
  background: #fff;
  border: 0;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-shadow-sm);
  line-height: 1.25;
  transition: box-shadow .15s ease;
}
.bk-tile:hover { box-shadow: var(--bk-shadow); text-decoration: none; }
.bk-tile:active { background: var(--bk-bg-alt); }

.bk-tile__img {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 166, 35, .16);   /* мягкая подложка нового янтарного */
  color: var(--bk-ink);
  overflow: hidden;
}
.bk-tile__img svg { width: 24px; height: 24px; }
.bk-tile__img img { width: 100%; height: 100%; object-fit: contain; }

.bk-tile__text { flex: 1 1 auto; min-width: 0; }
.bk-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
}
.bk-tile small { display: block; margin-top: 3px; color: var(--bk-muted); font-size: 12px; font-weight: 400; }
.bk-tile__go { flex: 0 0 auto; color: var(--bk-line); }

/* ==========================================================================
   Карточка товара в списке
   ========================================================================== */

.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--bk-r);
  background: var(--bk-y);
  color: var(--bk-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.bk-btn:hover { background: var(--bk-y-press); color: var(--bk-ink); text-decoration: none; }
.bk-btn:active { background: var(--bk-y-press); }
.bk-btn--ghost { background: #fff; border: 1px solid var(--bk-line); font-weight: 600; }
.bk-btn--ghost:hover { background: var(--bk-bg-alt); border-color: var(--bk-ink); }
.bk-btn--dark { background: var(--bk-ink); color: var(--bk-y); }
.bk-btn--dark:hover { background: #000; color: var(--bk-y); }

/* ==========================================================================
   Список категории и результаты поиска
   ========================================================================== */
.bk-panel {
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
  border: 0;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-shadow-sm);
}
/* «Уточнить поиск» на странице поиска — свёрнутый <details>. Маркер браузера
   убираем, ставим свой шеврон, чтобы плашка читалась как кнопка. */
details.bk-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
details.bk-panel > summary::-webkit-details-marker { display: none; }
details.bk-panel > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bk-muted);
  border-bottom: 2px solid var(--bk-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
details.bk-panel[open] > summary::after { transform: rotate(-135deg); }
.bk-subcats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bk-subcats a {
  padding: 8px 14px;
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--bk-shadow-sm);
  font-size: 13px;
  white-space: nowrap;
}
.bk-subcats a:hover { box-shadow: var(--bk-shadow); text-decoration: none; }
.bk-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.bk-toolbar select {
  flex: 1 1 0;
  min-width: 0;
  height: var(--bk-tap);
  padding: 0 10px;
  font-size: 14px;
  color: var(--bk-ink);
  background: #fff;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r);
}
.bk-results { padding: 12px 0 4px; color: var(--bk-muted); font-size: 13px; }
.pagination { flex-wrap: wrap; gap: 4px; }
.pagination .page-link { color: var(--bk-ink); border-radius: 8px; border-color: var(--bk-line); min-width: var(--bk-tap); text-align: center; }
.pagination .active .page-link { background: var(--bk-ink); border-color: var(--bk-ink); color: var(--bk-y); }
/* Хлебные крошки — единым блоком в конце файла (раздел «Хлебные крошки»). */

/* ==========================================================================
   Карточка товара
   ========================================================================== */
/* Только вертикальные отступы: padding-шорткат затёр бы боковые поля
   .bk-wrap (тот же вес селектора, но правило ниже по файлу) — страница
   товара прилипала к краям экрана. */
.bk-product { padding-top: 12px; padding-bottom: 24px; }

/* ==========================================================================
   Футер
   ========================================================================== */
footer {
  margin-top: 24px;
  padding: 22px 0;
  background: var(--bk-ink);
  color: #cfcfcf;
  font-size: 13px;
}
footer a { color: #cfcfcf; }
footer a:hover { color: var(--bk-y); }
footer h5 { color: #fff; font-size: 14px; margin-bottom: 10px; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: 5px 0; }
.bk-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bk-footer__bottom { margin-top: 18px; padding-top: 14px; border-top: 1px solid #333; color: #8a8a8a; }

/* уведомления поверх шапки */
#alert { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 1080; }
#alert .alert { border-radius: var(--bk-r); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* ==========================================================================
   Планшет и десктоп
   ========================================================================== */
@media (min-width: 576px) {
  .bk-tiles { grid-template-columns: repeat(3, 1fr); }
  .bk-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  body { font-size: 15px; padding-bottom: 0; }
  h1 { font-size: 26px; }

  /* На десктопе всё в одну строку и без схлопывания.
     display: contents распускает обёртку .bk-header__top, чтобы логотип и
     корзина стали прямыми элементами строки — тогда корзину можно отправить
     в правый край через order, не трогая разметку (узел #cart обязан
     остаться на месте: в него грузится ответ AJAX). */
  .bk-header__inner { display: flex; align-items: center; gap: 18px; padding: 10px 12px; }
  .bk-header__top { display: contents; }
  .bk-logo { order: 1; flex: 0 0 auto; font-size: 24px; }
  .bk-header__bar { order: 2; flex: 1 1 auto; padding-bottom: 0; }
  .bk-header__cart { order: 3; flex: 0 0 auto; display: block; margin-left: auto; }
  .bk-catbtn span { display: inline; }
  .bk-catbar { display: block; }
  .bk-tabbar { display: none; }

  /* Поиск на десктопе остаётся в шапке (theme.js его не переносит) —
     геро-блок возвращается к обычному компактному виду. */
  .bk-hero {
    min-height: auto;
    display: block;
    text-align: left;
    padding: 32px 0 8px;
  }
  .bk-hero__search-slot { display: none; }
  .bk-hero__hint { display: none; }   /* относится к перенесённому мобильному полю, на десктопе его нет */

  .bk-tiles { grid-template-columns: repeat(4, 1fr); }

  .bk-product__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
}

/* ==========================================================================
   Заставки вместо отсутствующих фотографий
   Блок изображения занимает место всегда, чтобы карточки и плитки
   держали одинаковые габариты и не прыгали, когда фото появятся.
   ========================================================================== */
.product-thumb .image {
  margin: -4px -4px 10px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bk-bg-alt);
  border-radius: 8px;
}
.product-thumb .image a { display: block; height: 100%; }
.product-thumb .image img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }


.bk-cathead { display: flex; gap: 14px; align-items: flex-start; }
.bk-cathead__img {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bk-bg-alt);
  border-radius: 8px;
}

@media (min-width: 992px) {
  .bk-tile { min-height: 84px; padding: 12px; }
  .bk-tile__img { width: 48px; height: 48px; }
  .bk-tile__name { font-size: 15px; }
}

/* ==========================================================================
   Одинаковые карточки
   Названия из 1С доходят до 100 символов. Обрезаем их по строкам и тянем
   карточку на всю высоту ячейки сетки — тогда цена и кнопка стоят на одной
   линии во всём ряду независимо от длины названия.
   ========================================================================== */

/* ==========================================================================
   Переполнение по горизонтали
   У grid- и flex-элементов min-width по умолчанию = auto, поэтому длинная
   неразрывная строка (а названия из 1С — это «УШМ MT/DW/BS D-125/880Вт/...»
   без пробелов) распирает колонку шире трека 1fr, и вся страница уезжает
   вправо. Разрешаем колонкам сжиматься и переносим такие строки.
   ========================================================================== */
.bk-products > .col,
.bk-tiles > *,
.bk-toolbar > *,
.bk-header__inner > *,
.bk-search,
.bk-suggest .dropdown-item > * { min-width: 0; }

.product-thumb,
.product-thumb .content,
.product-thumb .description,
.bk-tile,
.bk-tile__name { min-width: 0; }

.product-thumb h4,
.product-thumb h4 a,
.bk-sku,
.bk-tile__name,
.sg-name,
.bk-facts .v,
.bk-product h1,
h1 { overflow-wrap: anywhere; word-break: break-word; }

/* последний рубеж: ничто не шире экрана */
img, svg, video, table, pre { max-width: 100%; }
body { overflow-x: hidden; }

/* Плитки категорий: имя в две строки с фиксированным местом, иначе ряд
   с длинным названием («Шуруповёрты и винтовёрты») выше остальных. */
.bk-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.25em);
}

/* Плашка уведомлений: в теме ядра она шириной 320px с отрицательным
   отступом, на узком экране вылезает за край. */
#alert {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 1080;
}

/* Тач-цели в футере: ссылки шли строками по 15px — мимо пальцем не попасть */
footer li { padding: 0; }
footer li a { display: inline-block; padding: 9px 0; min-height: 40px; }
.bk-section__head a { display: inline-block; padding: 6px 0; }

/* Панель каталога учитывает нижнюю панель, иначе последний пункт под ней */
.bk-sheet__body { padding-bottom: calc(var(--bk-tabbar) + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   Фильтры категории
   Телефон: шторка снизу по кнопке «Фильтры». Десктоп: колонка слева.
   ========================================================================== */
.bk-layout { display: block; }

.bk-aside {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  background: #fff;
}
.bk-aside.is-open { display: block; }

.bk-filter { display: flex; flex-direction: column; height: 100%; }
.bk-filter__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--bk-line);
  font-size: 15px;
  font-weight: 700;
}
.bk-filter__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bk-filter__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--bk-line);
  background: #fff;
}
.bk-filter__foot .bk-btn { width: auto; flex: 1 1 0; }

/* Заголовок группы — служебная подпись, а не заголовок статьи: мелкий,
   приглушённый, в разрядку. Так группы читаются как структура списка,
   а сами варианты остаются главным, что видит глаз. */
.bk-fgroup { border-bottom: 1px solid var(--bk-line); }
.bk-fgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bk-muted);
  position: relative;
}
.bk-fgroup > summary::-webkit-details-marker { display: none; }
.bk-fgroup > summary::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--bk-muted);
  border-bottom: 2px solid var(--bk-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.bk-fgroup[open] > summary::after { transform: rotate(-135deg); top: 15px; }
.bk-fgroup__list { padding: 0 12px 8px; }

/* Строка варианта: подпись слева, счётчик прижат вправо отдельным
   элементом — раньше он был частью текста подписи и сливался с ней. */
.bk-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.3;
}
.bk-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--bk-ink);
  flex: 0 0 auto;
  margin: 0;
}
.bk-check__name { flex: 1 1 auto; min-width: 0; }
.bk-check__n {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--bk-muted);
  font-variant-numeric: tabular-nums;
}
.bk-check:hover .bk-check__n { color: var(--bk-ink-soft); }

/* «Ещё N» / «Свернуть» — ссылка-кнопка под усечённым списком */
.bk-fgroup__toggle {
  margin-top: 2px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--bk-y-press);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bk-fgroup__toggle:hover { text-decoration: underline; }

/* липкая строка над списком: фильтры, сортировка, показ по N */
.bk-bar {
  position: sticky;
  top: 56px;                 /* под сжатой шапкой: 8 + 40 (--bk-tap) + 8 */
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 4px;
  background: rgba(242, 243, 245, .75);   /* var(--bk-bg-alt) полупрозрачный */
  backdrop-filter: var(--bk-glass-blur);
  -webkit-backdrop-filter: var(--bk-glass-blur);
}
@supports not (backdrop-filter: blur(1px)) {
  .bk-bar { background: var(--bk-bg-alt); }
}
.bk-bar__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--bk-tap);
  padding: 0 14px;
  border: 0;
  border-radius: var(--bk-r);
  background: #fff;
  box-shadow: var(--bk-shadow-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.bk-bar__btn:active { background: var(--bk-bg-alt); }
.bk-bar select {
  flex: 1 1 0;
  min-width: 0;
  height: var(--bk-tap);
  padding: 0 10px;
  font-size: 14px;
  color: var(--bk-ink);
  background: #fff;
  border: 0;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-shadow-sm);
}
.bk-bar__limit { display: none; }

@media (min-width: 992px) {
  .bk-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; align-items: start; }
  .bk-aside {
    position: sticky;
    inset: auto;
    top: 78px;
    z-index: 1;
    display: block;
    max-height: calc(100vh - 96px);
    background: #fff;
    border: 0;
    border-radius: var(--bk-r);
    box-shadow: var(--bk-shadow-sm);
    overflow: hidden;
  }
  .bk-filter__head { background: #fff; border-bottom: 1px solid var(--bk-line); font-size: 15px; }
  .bk-filter__head .bk-sheet__close { display: none; }
  .bk-filter__body { max-height: calc(100vh - 230px); }
  .bk-bar__btn { display: none; }
  .bk-bar__limit { display: block; }
  .bk-bar { position: static; }
}

/* ==========================================================================
   Каталог: два вида списка
   Фотографий в каталоге нет, поэтому по умолчанию на телефоне — «список»:
   строка вида прайса, вдвое плотнее плитки и удобнее для сравнения.
   Переключатель в строке над товарами, выбор запоминается.
   ========================================================================== */
.bk-products { display: grid !important; margin: 0 !important; padding: 0 !important;
                --bs-gutter-x: 0; --bs-gutter-y: 0; gap: 8px; }
.bk-products > .col { display: flex; width: auto !important; max-width: none !important;
                       flex: none !important; margin: 0 !important; padding: 0 !important; min-width: 0; }

.product-thumb {
  display: flex;
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 0;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-shadow-sm);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.product-thumb:hover { box-shadow: var(--bk-shadow); }
.product-thumb .image { flex: 0 0 auto; display: block; background: var(--bk-bg-alt); }
.product-thumb .image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-thumb .content { display: flex; flex: 1 1 auto; min-width: 0; }
.product-thumb .description { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.product-thumb h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-thumb h4 a { color: var(--bk-ink); overflow-wrap: anywhere; }

.bk-specs { display: block; margin-top: 5px; font-size: 12px; color: var(--bk-ink-soft); }
.bk-meta  { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12px; }
.bk-sku   { color: var(--bk-muted); }
.bk-stock { font-weight: 600; color: var(--bk-warn); }
.bk-stock.in { color: var(--bk-ok); }
.bk-where { display: block; margin-top: 3px; font-size: 11px; color: var(--bk-muted); }

.bk-price { font-size: 16px; font-weight: 800; white-space: nowrap; }
.bk-price small { display: block; font-size: 12px; font-weight: 400; color: var(--bk-muted); }
.product-thumb form { margin: 0; }

/* --- вид «список»: одна строка на товар ---------------------------------- */
.bk-products.bk-list { grid-template-columns: 1fr; gap: 6px; }
.bk-list .product-thumb { align-items: stretch; }
.bk-list .product-thumb .image { width: 84px; }
.bk-list .product-thumb .content { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.bk-list .bk-buy { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bk-list .bk-btn { width: auto; min-height: 38px; padding: 0 12px; font-size: 13px; }
.bk-list .bk-btn span { display: none; }

/* --- вид «плитка» -------------------------------------------------------- */
.bk-products.bk-grid { grid-template-columns: repeat(2, 1fr); }
.bk-grid .product-thumb { flex-direction: column; }
.bk-grid .product-thumb .image { width: 100%; aspect-ratio: 1 / 1; }
.bk-grid .product-thumb .content { flex-direction: column; padding: 10px 12px 12px; }
.bk-grid .product-thumb .description { margin-bottom: 10px; }
.bk-grid .bk-buy { margin-top: auto; }
.bk-grid .bk-price { margin-bottom: 10px; }

/* переключатель вида */
.bk-bar__view { flex: 0 0 auto; display: flex; border: 0; border-radius: var(--bk-r); overflow: hidden; background: #fff; box-shadow: var(--bk-shadow-sm); }
.bk-bar__view button {
  width: var(--bk-tap);
  height: var(--bk-tap);
  border: 0;
  background: transparent;
  color: var(--bk-muted);
  cursor: pointer;
}
.bk-bar__view button.is-active { background: var(--bk-ink); color: var(--bk-y); }

/* активные фильтры чипсами */
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bk-chips a, .bk-chips .bk-chips__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--bk-y);
  border: 0;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bk-ink);
}
.bk-chips a:hover { background: var(--bk-y-press); text-decoration: none; }
.bk-chips .bk-chips__clear { background: #fff; border: 1px solid var(--bk-line); font-weight: 400; }

@media (min-width: 576px) {
  .bk-products.bk-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .bk-list .bk-btn span { display: inline; }
}

@media (min-width: 992px) {
  .bk-products.bk-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .bk-list .product-thumb .image { width: 110px; }
  .bk-list .product-thumb h4 { font-size: 15px; -webkit-line-clamp: 2; }
  .bk-list .bk-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
}

/* --- уплотнение списка --------------------------------------------------- */
.bk-where { display: inline; margin: 0; font-size: 10.5px; color: var(--bk-muted); }
.bk-meta { line-height: 1.35; }

.bk-list .product-thumb .image { width: 64px; }
.bk-list .product-thumb .content { padding: 8px 10px; gap: 8px; }
.bk-list .product-thumb h4 { font-size: 13px; }
.bk-list .bk-specs { margin-top: 2px; font-size: 11px; }
.bk-list .bk-meta  { margin-top: 2px; font-size: 11px; }

/* в плитке место под строку характеристик держим всегда, иначе карточки
   с характеристиками и без выходят разной высоты */
.bk-grid .product-thumb .description::after { content: ''; display: block; flex: 1 1 auto; }
.bk-grid .bk-specs { min-height: 1.35em; }
.bk-grid .product-thumb h4 { min-height: calc(2 * 1.3em); }
.bk-grid .bk-meta { min-height: calc(2 * 1.35em); align-content: flex-start; }

@media (min-width: 992px) {
  .bk-list .product-thumb h4 { font-size: 15px; }
  .bk-list .bk-specs, .bk-list .bk-meta { font-size: 12.5px; }
}

/* --- правка списка ------------------------------------------------------- */
/* в stylesheet.css ядра у .description свои отступы — они сужали текст
   и добавляли высоту строке */
.product-thumb .description { margin: 0 !important; padding: 0 !important; }

/* заглушка в списке — квадрат по центру, а не полоса во всю высоту карточки */
.bk-list .product-thumb .image {
  align-self: center;
  width: 76px;
  height: 76px;
  margin: 10px 0 10px 10px;
  border-radius: 8px;
  overflow: hidden;
}
.bk-list .product-thumb .content { align-items: center; }
.bk-list .product-thumb .description { justify-content: center; }
.bk-list .bk-buy { justify-content: center; }

@media (min-width: 992px) {
  .bk-list .product-thumb .image { width: 88px; height: 88px; }
}

/* ==========================================================================
   Соседние разделы под заголовком категории
   Лента прокручивается вбок на телефоне, переносится на десктопе.
   ========================================================================== */
.bk-related { margin: 4px 0 12px; }
.bk-related__head { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--bk-muted); }
.bk-related__row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.bk-related__row::-webkit-scrollbar { display: none; }
.bk-rel {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 210px;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--bk-shadow-sm);
  font-size: 13px;
  font-weight: 600;
  transition: box-shadow .15s ease;
}
.bk-rel:hover { box-shadow: var(--bk-shadow); text-decoration: none; }
.bk-rel:active { background: var(--bk-bg-alt); }
.bk-rel__img {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(245, 166, 35, .16);   /* мягкая подложка под новый янтарный */
  color: var(--bk-y-press);
}
.bk-rel__img svg { width: 15px; height: 15px; }
.bk-rel__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bk-rel small { color: var(--bk-muted); font-weight: 400; }

@media (min-width: 992px) {
  .bk-related__row { flex-wrap: wrap; overflow: visible; }
}

/* ==========================================================================
   Панель каталога
   Телефон — на весь экран, аккордеон (уже описано выше).
   ПК — выпадающая панель под шапкой: слева вертикальный список разделов,
   справа подкатегории того, на который навели. Аккордеоном 148 категорий
   вытянулись бы на полтора экрана.
   ========================================================================== */
.bk-cat__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(245, 166, 35, .16);
  color: var(--bk-y-press);
}
.bk-cat__ico svg { width: 19px; height: 19px; }
.bk-cat__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk-cat__name small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--bk-muted); }

@media (min-width: 992px) {
  .bk-sheet {
    position: fixed;
    top: 78px;                    /* уточняется из theme.js по низу шапки */
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 1050;
    width: min(1180px, calc(100% - 24px));
    height: min(70vh, 600px);
    margin: 0 auto;
    border: 1px solid var(--bk-line);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .18);
    overflow: visible;            /* правая панель выходит за левую колонку */
  }
  .bk-sheet__head { display: none; }

  /* левая колонка: только она прокручивается */
  .bk-sheet__body {
    position: static;
    width: 296px;
    height: 100%;
    padding: 6px 0;
    overflow-y: auto;
    border-right: 1px solid var(--bk-line);
    border-radius: 0 0 0 14px;
    background: #fff;
  }

  .bk-cat__row {
    width: 100%;
    min-height: 42px;
    padding: 8px 14px;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
  }
  .bk-cat__ico { width: 26px; height: 26px; border-radius: 7px; }
  .bk-cat__ico svg { width: 16px; height: 16px; }
  .bk-cat__name small { display: inline; margin: 0 0 0 6px; }
  .bk-cat__row:hover { background: var(--bk-bg-alt); font-weight: 600; }

  /* правая панель: позиционируется относительно .bk-sheet, поэтому прокрутка
     левой колонки её не обрезает и не тащит за собой */
  .bk-cat__kids {
    position: absolute;
    left: 296px;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 16px 20px;
    background: #fff;
    border: 0;
    border-radius: 0 0 14px 0;
    overflow-y: auto;
    columns: 3;
    column-gap: 26px;
  }
  .bk-cat.is-current > .bk-cat__row { background: var(--bk-bg-alt); font-weight: 600; }
  .bk-cat__kids a {
    display: block;
    break-inside: avoid;
    min-height: 0;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--bk-ink-soft);
  }
  .bk-cat__kids a:hover { background: transparent; color: var(--bk-ink); text-decoration: underline; }
  .bk-cat__kids a b { color: var(--bk-ink); }

  /* подложка, чтобы клик мимо закрывал панель */
  .bk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(0, 0, 0, .25);
  }
}

/* --- панель каталога на телефоне ----------------------------------------- */
.bk-sheet__head { position: sticky; top: 0; z-index: 2; }
.bk-cat__row { gap: 12px; }
.bk-cat__row .bk-chevron { flex: 0 0 auto; }
.bk-cat__kids a b { color: var(--bk-ink); }

@media (max-width: 991px) {
  .bk-cat__row { min-height: 58px; padding: 10px 14px; font-size: 15px; }
  .bk-cat__kids a { padding-left: 60px; }   /* выравниваем под значок родителя */
}

/* Кнопка «Каталог» под логотипом дублирует таб на нижней панели —
   на мобиле её прячем, каталог открывается снизу. На десктопе, где нижней
   панели нет, кнопка остаётся единственным входом в дерево категорий. */
@media (max-width: 991px) {
  .bk-catbtn { display: none; }
}

/* Внутренние страницы на телефоне: строки логотипа нет вообще (не только
   на прокрутке, как is-compact) — поиск сразу верхняя строка шапки.
   Возврат на главную даёт нижняя панель, отдельный логотип не нужен. */
@media (max-width: 991px) {
  .bk-header--search-only .bk-header__top { display: none; }
  .bk-header--search-only .bk-header__bar { padding: 8px 0; }
  .bk-back { display: inline-flex; }
}

/* Экран телефона мал, а важнее всего на странице списка товаров — фильтры
   и сами товары. Крошки и лента соседних разделов подвинуты плотнее друг
   к другу, чтобы до панели фильтров и сетки товаров было меньше скролла. */
@media (max-width: 991px) {
  .bk-related { margin: 2px 0 10px; }
  .bk-related__head { margin-bottom: 6px; }
}

/* Мобильная главная — только логотип, поиск и нижняя навигация. Заголовок,
   плитки категорий, «Хиты продаж» (та же .bk-section — общий класс с
   featured.twig) и сайтовый футер с информационными ссылками убраны:
   они дублируют то, что уже даёт каталог и таб-панель, а поиск должен
   быть единственным, ничем не разбавленным действием на экране. Десктоп
   не тронут — там это уместная витрина, а не мобильный лендинг. */
@media (max-width: 991px) {
  #common-home .bk-hero h1,
  #common-home .bk-hero__sub,
  #common-home .bk-section:not(.bk-section--cats) { display: none; }

  /* Плитки ходовых категорий под поиском — плотнее десктопных */
  #common-home .bk-section--cats { padding: 6px 0 12px; }
  #common-home .bk-section--cats .bk-section__head { margin-bottom: 8px; }
  #common-home .bk-section--cats .bk-section__head h2 { font-size: 13px; color: var(--bk-muted); }

  /* Футер с информационными ссылками на телефоне не показываем: снизу
     закреплена таб-панель, и две навигации подряд только мешают. */
  footer { display: none; }
}

/* ==========================================================================
   Фотография на карточке товара
   Пока фотографий нет, показываем заглушку: место под изображение должно
   быть видно, иначе карточка выглядит недоделанной.
   ========================================================================== */
.bk-photo {
  position: relative;
  margin-bottom: 14px;
  background: #fff;
  border: 0;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-shadow-sm);
  overflow: hidden;
}
/* без настоящего фото — серая подложка, чтобы место под снимок читалось */
.bk-photo.is-empty { background: var(--bk-bg-alt); }
/* ...но не на весь квадрат: пустая заглушка 1:1 съедала ~350px экрана и
   уводила цену с кнопкой «В корзину» под сгиб, ничего при этом не
   показывая. Оставляем полосу — место под снимок видно, а покупка
   остаётся на первом экране. Настоящее фото при этом квадратное. */
@media (max-width: 991px) {
  .bk-photo.is-empty img { aspect-ratio: 2 / 1; }
}
.bk-photo > a,
.bk-photo > img { display: block; }
.bk-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.bk-photo__note {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  font-size: 12px;
  color: var(--bk-muted);
  white-space: nowrap;
}
.bk-photo__more { display: inline-block; width: 74px; margin: 8px 8px 0 0; }
.bk-photo__more img { aspect-ratio: 1 / 1; border: 1px solid var(--bk-line); border-radius: 8px; }

@media (min-width: 992px) {
  .bk-photo { max-width: 420px; }
}

/* ==========================================================================
   Карточка товара: три зоны
   Галерея — описание — блок покупки. На ПК первая и третья липкие, чтобы
   цена и кнопка оставались на виду при длинном описании.
   ========================================================================== */
.bk-product { padding-top: 8px; padding-bottom: 28px; }
.bk-pcols { display: flex; flex-direction: column; gap: 14px; }
.bk-pcol-media, .bk-pcol-main, .bk-pcol-buy { min-width: 0; }

.bk-product h1 { font-size: 19px; line-height: 1.3; margin: 0 0 10px; }

.bk-ptop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 14px; font-size: 13px; }
.bk-ptop .bk-sku { color: var(--bk-muted); }
.bk-brand {
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--bk-bg-alt);
  font-weight: 600;
  font-size: 12px;
}

/* карточки-секции */
.bk-card {
  padding: 16px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--bk-shadow-sm);
}
.bk-card__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.bk-desc { font-size: 14px; color: var(--bk-ink-soft); }
.bk-desc :last-child { margin-bottom: 0; }

/* блок покупки */
.bk-buybox {
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--bk-shadow-sm);
}
.bk-buybox__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.bk-buybox__price s { font-size: 15px; font-weight: 400; color: var(--bk-muted); }
.bk-buybox__tax { margin-top: 4px; font-size: 12px; color: var(--bk-muted); }
.bk-buybox__stock { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--bk-warn); }
.bk-buybox__stock.in { color: var(--bk-ok); }
.bk-buybox__where { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--bk-line); }
.bk-buybox__where li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.bk-buybox__where span { color: var(--bk-muted); }

/* форма ядра внутри блока покупки */
.bk-buybox #product { margin-top: 14px; }
.bk-buybox hr { display: none; }
.bk-buybox .input-group { display: flex; gap: 8px; align-items: stretch; }
.bk-buybox .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r);
  background: var(--bk-bg-alt);
  font-size: 12px;
  color: var(--bk-muted);
}
.bk-buybox input[name="quantity"] {
  width: 62px;
  height: 48px;
  padding: 0 8px;
  text-align: center;
  font-size: 16px;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r);
}
.bk-buybox #button-cart {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--bk-r);
  background: var(--bk-y);
  color: var(--bk-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.bk-buybox #button-cart:hover { background: var(--bk-y-press); }
.bk-buybox .form-label { font-size: 13px; font-weight: 600; }
.bk-buybox .form-control, .bk-buybox .form-select {
  border-radius: var(--bk-r);
  border-color: var(--bk-line);
  font-size: 14px;
}

@media (min-width: 992px) {
  .bk-product { padding-top: 8px; padding-bottom: 40px; }
  .bk-product h1 { font-size: 24px; }
  .bk-pcols {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr) 320px;
    align-items: start;
    gap: 20px;
  }
  .bk-pcol-media { position: sticky; top: 96px; }
  .bk-pcol-buy   { position: sticky; top: 96px; }
  .bk-card { padding: 20px; }
  .bk-buybox { padding: 18px; }
  .bk-buybox__price { font-size: 32px; }
}

/* ==========================================================================
   Хлебные крошки
   Схема как у Kaspi: путь — мелкой серой строкой сверху, а последний пункт
   (он же единственный <h1> страницы категории) — крупным заголовком на
   отдельной строке под ним. Разметка при этом остаётся одним <ul>: заголовок
   физически лежит в крошках, на экране читается как обычный заголовок.
   Тема ядра рисует крошкам рамку, плашку и разделители повёрнутыми на 45°
   псевдоэлементами (stylesheet.css:328) — всё это гасим здесь.
   ========================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  padding: 10px 0 0 !important;
  margin: 0 0 12px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px;
}
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a { white-space: normal !important; }
.breadcrumb-item {
  min-width: 0;
  max-width: 100%;
  padding: 0 !important;
  text-shadow: none !important;
}
.breadcrumb-item a {
  color: var(--bk-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.breadcrumb-item a:hover { color: var(--bk-ink); text-decoration: none; }
.breadcrumb-item .fa-home { font-size: 13px; }

/* Разделители ядра — под нож, свой ставим тонким шевроном. */
.breadcrumb-item::after,
.breadcrumb-item::before { display: none !important; content: none !important; }
.breadcrumb-item + .breadcrumb-item::before {
  display: inline !important;
  content: '›' !important;
  padding: 0 7px;
  color: #C4C4C4;
  transform: none !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
}

/* Последний пункт = заголовок: занимает всю ширину, поэтому переходит на
   свою строку, и разделитель перед ним не нужен. */
.breadcrumb-item.is-current {
  flex: 0 0 100%;
  margin-top: 8px;
}
.breadcrumb-item.is-current::before { content: none !important; }
.breadcrumb-item.is-current h1 {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--bk-ink);
}

/* На телефоне путь и заголовок делят одну строку. Отдельная строка под
   путь себя не окупает: на верхнем уровне каталога в нём остаётся один
   домик, то есть целый ряд экрана уходит под единственный значок. Поэтому
   на мобильной ширине домик убираем совсем (на главную ведёт нижняя
   панель), из пути оставляем только прямого родителя — он и работает
   ссылкой «на уровень вверх» — и ставим его на общий базовый отступ с
   заголовком. Разметка не меняется: полный путь остаётся в DOM для
   поисковиков и целиком показывается на десктопе. */
@media (max-width: 991px) {
  .breadcrumb {
    align-items: baseline;
    padding-top: 6px !important;
    margin-bottom: 10px !important;
  }
  .breadcrumb-item { display: none; }
  .breadcrumb-item:nth-last-child(2):not(:first-child) { display: inline; }
  /* На карточке товара последней крошки-заголовка нет (product.twig
     отрезает название товара — оно и так заголовок страницы), поэтому
     прямой родитель там не предпоследний, а последний пункт. Без этого
     правила путь на карточке пропадал бы целиком. */
  .breadcrumb-item:last-child:not(:first-child):not(.is-current) { display: inline; }
  .breadcrumb-item.is-current {
    display: block;
    flex: 1 1 auto;      /* не 0 0 100%: иначе снова уезжает на свою строку */
    margin-top: 0;
  }
  /* Разделитель вешаем на самого родителя, а не на заголовок: у длинного
     названия заголовок переносится на свою строку, и шеврон-префикс повис
     бы в начале второй строки в отрыве от того, что разделяет. Селектор
     тот же, что и у видимого родителя, — значит, когда родителя нет
     (верхний уровень, перед заголовком только скрытый домик), шеврона
     тоже нет. */
  .breadcrumb-item:nth-last-child(2):not(:first-child)::after {
    display: inline !important;
    content: '›' !important;
    padding: 0 8px;
    color: #C4C4C4;
  }
  .breadcrumb-item.is-current h1 { font-size: 17px; }
}

@media (min-width: 992px) {
  .breadcrumb { font-size: 13px; padding-top: 14px !important; }
  .breadcrumb-item.is-current h1 { font-size: 26px; }
}

/* --- средняя колонка карточки товара: тише по типографике ----------------
   Заголовок и характеристики не должны спорить с ценой — она главный якорь
   на странице. Уменьшаем кегль в этой зоне, цену не трогаем. */
.bk-pcol-main h1 { font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
.bk-pcol-main .bk-ptop { font-size: 12px; margin-bottom: 12px; }
.bk-pcol-main .bk-brand { font-size: 11px; padding: 3px 9px; }
.bk-pcol-main .bk-card__title { font-size: 14px; margin-bottom: 8px; }
.bk-pcol-main .bk-facts li { padding: 7px 0; font-size: 13px; }
.bk-pcol-main .bk-desc { font-size: 13px; }

@media (min-width: 992px) {
  .bk-pcol-main h1 { font-size: 19px; }
  .bk-pcol-main .bk-card__title { font-size: 15px; }
  .bk-pcol-main .bk-facts li { font-size: 13.5px; }
  .bk-pcol-main .bk-desc { font-size: 13.5px; }
}

/* --- количество: минус / число / плюс ------------------------------------ */
.bk-qtyrow { display: flex; gap: 10px; align-items: stretch; }
.bk-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r);
  overflow: hidden;
  background: #fff;
}
.bk-qty__btn {
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--bk-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.bk-qty__btn:hover { background: var(--bk-bg-alt); }
.bk-qty__btn:active { background: var(--bk-y); }
.bk-qty input[name="quantity"] {
  width: 46px;
  height: 48px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--bk-line);
  border-right: 1px solid var(--bk-line);
  border-radius: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
}
.bk-qty input[name="quantity"]:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12); }
.bk-qtyrow #button-cart { flex: 1 1 auto; }

/* кнопка и счётчик одной высоты */
.bk-qtyrow { align-items: stretch; }
.bk-qtyrow #button-cart,
.bk-qty { min-height: 50px; height: 50px; }
.bk-qtyrow #button-cart { padding: 0 16px; line-height: 1; }

/* Заголовок страницы = последняя крошка: стили в разделе «Хлебные крошки»
   выше. На карточке товара заголовок отдельный, в пути только разделы. */

/* --- «О» в логотипе: диск с рукояткой -------------------------------------
   Болгарка = жаргонное название угловой шлифмашины, топ-категория каталога.
   Кольцо буквы «О» и так похоже на диск, добавляем только рукоятку.
   Белая обводка букв была нужна для контраста на сплошной яркой заливке —
   теперь шапка стеклянная, светлая, и обычный тёмный текст (правило в
   начале файла, .bk-logo { color: var(--bk-ink) }) читается на ней чище. */

/* Диск заметно крупнее строки текста — читается как маленький значок
   бренда, а не только буква. Лишний рост уходит вверх, низ держится
   у базовой линии, как у обычной «о». */
.bk-logo__o {
  width: 1.15em;
  height: 1.3em;
  vertical-align: -0.16em;
  margin: 0 0.02em;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18));
}