/* Список филиалов — общие стили для страницы /filial (include/branch-list.php)
 * и вкладки «Самовывоз» модалки выбора способа получения заказа (menu.php).
 * Всё под .bl-scope, чтобы не протекать на остальную страницу при встраивании в модалку. */

    .bl-scope, .bl-scope * { box-sizing: border-box; }
    .bl-scope {
      font-family: 'Metropolis', sans-serif;
      color: #1a1a1a;
      display: block;
    }
    body > .bl-scope { min-height: 100vh; margin: 0; }

    .bl-wrap { max-width: 720px; margin: 0 auto; padding-bottom: 24px; }

    /* ── Общий блок header (градиентный фон ставится автоматически, без баннера) ── */
    .bl-header {
      position: relative; overflow: hidden;
      border-radius: 0 0 22px 22px;
      margin-bottom: 2px;
      /*background: linear-gradient(120deg, #fff 0%, rgba(255,255,255,.97) 45%, rgba(var(--theme-color),.16) 100%);*/
	  background: rgba(var(--theme-color), 0.05);
    }
    .bl-header-content {
      position: relative; z-index: 2;
    }

    /* ── Top header (logo + city pill) ───────────────────────────────── */
    .bl-top {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px 0;
    }
    .bl-logo {
      width: 40px; height: 40px; border-radius: 12px;
      flex-shrink: 0; overflow: hidden;
      background: rgba(var(--theme-color),.08);
      border: 1px solid rgba(var(--theme-color),.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; color: rgba(var(--theme-color),1);
    }
    .bl-logo img { width: 100%; height: 100%; object-fit: cover; }
    .bl-brand h1 {
      font-size: 15px; font-weight: 700; color: #1a1a1a;
      margin: 0; line-height: 1.1; letter-spacing: -0.2px;
    }
    .bl-brand p { font-size: 11px; color: #888; margin: 1px 0 0; }

    .bl-city {
      margin-left: auto;
      display: inline-flex; align-items: center; gap: 6px;
      background: #fff;
      border-radius: 12px; border: 1px solid rgba(0,0,0,.06);
      padding: 7px 11px; min-height: 38px;
      cursor: pointer; text-align: left;
      max-width: 58%;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .bl-city-icon {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(var(--theme-color),.1);
      color: rgba(var(--theme-color),1);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; flex-shrink: 0;
    }
    .bl-city-text { display: flex; flex-direction: column; min-width: 0; }
    .bl-city-name { font-size: 12px; font-weight: 700; line-height: 1.1; color: #1a1a1a; }
    .bl-city-sub  { font-size: 10px; color: #999; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── Hero (по образцу order.php: авто-фон + фото-медиа с фейдом, текст поверх) ── */
    .bl-hero {
      position: relative;
      padding: 14px 14px 12px;
      overflow: visible;
      min-height: 100px;
    }
    .bl-hero-text {
      position: relative; z-index: 2;
      max-width: 62%;
    }
    .bl-hero-title {
      margin: 0 0 6px;
      color: #1a1a1a;
      font-size: clamp(16px, 5.6vw, 22px);
      line-height: 1.14;
      font-weight: 700;
      white-space: nowrap;
    }
    .bl-hero-accent { color: rgba(var(--theme-color),1); display: block; }
    .bl-hero-sub {
      margin: 0;
      color: #767c87;
      font-size: 10px;
      line-height: 1.4;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Картинка героя — bleed справа с фейдом в фон, как .order-hero-media на странице заказа */
    .bl-hero-media {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      z-index: 1;
      width: 46%;
      pointer-events: none;
    }
    .bl-hero-media::before {
      content: '';
      position: absolute; inset: 0 22% 0 -20%;
      z-index: 2;
      /*background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0) 100%);*/
    }
    .bl-hero-media::after {
      content: '';
      position: absolute; inset: auto -10% -10px -6%;
      height: 42%; z-index: 2;
      /*background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%);*/
    }
    .bl-hero-media-img {
      position: absolute; inset: 0 -8px 0 auto;
      width: calc(100% + 8px); height: 100%;
      object-fit: cover; object-position: center right;
      border-radius: 0 0 0 18px;
    }
    .bl-hero-media-icon {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      color: rgba(var(--theme-color),1);
      font-size: 64px;
    }

    /* ── Search ──────────────────────────────────────────────────────── */
    .bl-search-wrap { padding: 8px 14px 16px; position: relative; z-index: 2; }
    .bl-search {
      display: flex; align-items: center; gap: 6px;
      background: #fff; border-radius: 14px;
      padding: 5px 13px;
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }
    .bl-search i { font-size: 11px; color: #c2c2c2; flex-shrink: 0; }
    .bl-search input {
      border: none; background: transparent; outline: none;
      font-size: 8px; color: #1a1a1a; width: 100%; min-width: 0;
      font-family: inherit;
    }
    .bl-search input::placeholder { color: #b8b8b8; }
    .bl-search-locate {
      width: 15px; height: 15px; border-radius: 9px;
      background: rgba(var(--theme-color),.1);
      color: rgba(var(--theme-color),1);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
	  background: none;
    }
    .bl-search-locate.is-loading i { animation: bl-spin 1s linear infinite; }
    @keyframes bl-spin { to { transform: rotate(360deg); } }

    /* ── Order type tabs ─────────────────────────────────────────────── */
    .bl-tabs {
      margin: 5px 14px 0;
      display: flex; gap: 3px;
      background: #fff;
      border-radius: 5px; padding: 5px;
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }
    .bl-tab {
      flex: 1; padding: 5px 5px;
      border: none; background: transparent;
      font-size: 8px; font-weight: 500;
      color: #888;
      border-radius: 5px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 5px;
      transition: all .18s;
      font-family: inherit;
    }
    .bl-tab i { font-size: 10px; }
    .bl-tab--active {
      background: rgba(var(--theme-color),1);
      color: #fff;
      box-shadow: 0 4px 12px rgba(var(--theme-color),.3);
    }

    /* ── Filter chips ───────────────────────────────────────────────── */
    .bl-chips {
      padding: 10px 14px 4px;
      display: flex; gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .bl-chips::-webkit-scrollbar { display: none; }
    .bl-chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 7px; border-radius: 10px;
      background: #fff; border: 1px solid transparent;
      font-size: 7px; font-weight: 600; color: #555;
      cursor: pointer; white-space: nowrap;
      font-family: inherit; transition: all .15s;
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .bl-chip i { font-size: 11px; }
    .bl-chip-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #1db954;
    }
    .bl-chip:hover { background: #fafafa; }
    .bl-chip--active {
      background: rgba(var(--theme-color),.08);
      border-color: rgba(var(--theme-color),.25);
      color: rgba(var(--theme-color),1);
    }
    .bl-chip--active i { color: rgba(var(--theme-color),1); }

    /* ── Map block ──────────────────────────────────────────────────── */
    .bl-map {
      margin: 10px 14px 0;
      border-radius: 16px;
      position: relative; overflow: hidden;
      height: 200px;
      transition: height 0.45s cubic-bezier(.4,0,.2,1);
	  border: 1px solid #ebebeb;
    }
    #bl-ymap {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
    }
    /* Fallback grid shown when no coords available */
    .bl-map-bg {
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #e8edf5 0%, #d6dde8 100%);
      background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 28px);
    }
    /* Плашка "N филиалов рядом" — поверх карты, сверху-слева */
    .bl-map-city-label {
      position: absolute; left: 10px; top: 10px; z-index: 10;
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(8px);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 8px; font-weight: 400; color: #1a1a1a;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .bl-map-city-label i { font-size: 10px; color: rgba(var(--theme-color),1); }

    /* Кнопка "Маршрут" — плавающая пилюля поверх карты, сверху-справа
       (снизу — обязательная плашка copyright Яндекс.Карт, её нельзя убрать
       и она перехватывает клики у всего, что на неё наложено). */
    .bl-map-route-btn {
      position: absolute; right: 10px; top: 10px; z-index: 10;
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(var(--theme-color),1);
      border: none; border-radius: 999px;
      padding: 7px 12px;
      color: #fff;
      font-size: 9px; font-weight: 400;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0,0,0,.18);
      transition: background .15s;
      max-width: calc(100% - 20px);
    }
    .bl-map-route-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bl-map-route-btn i { font-size: 12px; flex-shrink: 0; }
    .bl-map-route-btn.is-loading i { animation: bl-spin 1s linear infinite; }
    .bl-map-route-btn--built { background: #fff; color: rgba(var(--theme-color),1); }

    /* Свой инпут+подсказки для ввода адреса маршрута — плавающая полоска
       под верхним рядом (плашка филиалов / кнопка "Маршрут"). */
    .bl-route-addr-box {
      position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 10;
    }
    .bl-route-addr-field-wrap {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(8px);
      border-radius: 10px;
      padding: 7px 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }
    .bl-route-addr-field-wrap i { font-size: 13px; color: rgba(var(--theme-color),1); flex-shrink: 0; }
    .bl-route-addr-field {
      flex: 1; min-width: 0;
      border: none; outline: none; background: transparent;
      font-size: 11px; color: #1a1a1a;
      font-family: inherit;
    }
    .bl-route-addr-field::placeholder { color: #9aa0a6; }
    .bl-route-addr-clear {
      border: none; background: transparent; padding: 0;
      display: flex; align-items: center; justify-content: center;
      color: #9aa0a6; cursor: pointer; flex-shrink: 0;
    }
    .bl-route-addr-clear i { font-size: 13px; }
    .bl-route-suggest-list {
      margin-top: 2px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,.16);
      overflow: hidden;
      max-height: 180px; overflow-y: auto;
    }
    .bl-route-suggest-item {
      display: flex; align-items: flex-start; gap: 6px;
      padding: 5px 8px;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
    }
    .bl-route-suggest-item:last-child { border-bottom: none; }
    .bl-route-suggest-item:hover { background: rgba(var(--theme-color),.06); }
    .bl-route-suggest-item i { font-size: 13px; color: rgba(var(--theme-color),1); margin-top: 1px; flex-shrink: 0; }
    .bl-route-suggest-item-text { display: flex; flex-direction: column; min-width: 0; }
    .bl-route-suggest-item-title { font-size: 11px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bl-route-suggest-item-sub { font-size: 9px; color: #8a8a8a; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .bl-map-pin {
      position: absolute; z-index: 2;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: rgba(var(--theme-color),1);
      color: #fff;
      font-size: 11px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,.2);
    }
    .bl-map-pin::after {
      content: '';
      position: absolute; bottom: -4px; left: 50%;
      width: 8px; height: 8px;
      background: inherit;
      transform: translateX(-50%) rotate(45deg);
      border-radius: 0 0 2px 0;
    }
    .bl-map-pin--me {
      width: 14px; height: 14px;
      background: #2563eb;
      box-shadow: 0 0 0 6px rgba(37,99,235,.2);
    }
    .bl-map-pin--me::after { display: none; }

    /* ── Branch list (scrollable — карта остаётся на месте) ─────────── */
    /* ── Section title above the list ──────────────────────────────── */
    .bl-list-title {
      margin: 14px 25px 4px;
      font-size: 13px; font-weight: 800; color: #1a1a1a;
    }

    .bl-list {
      padding: 10px;
      display: flex; flex-direction: column; gap: 10px;
      max-height: 62vh;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    .bl-card {
      background: #fff; border-radius: 16px;
      box-shadow: 0 3px 16px rgba(0,0,0,.06);
      display: flex; align-items: stretch;
      overflow: hidden;
      color: inherit;
      transition: box-shadow .15s, transform .1s;
      position: relative;
      margin: 0 11px;
      cursor: pointer;
	  padding: 8px;
      flex-shrink: 0;
    }
    .bl-card:active { transform: scale(.99); }
    .bl-card--recommended { border: 2px solid rgba(var(--theme-color),.5); }
    .bl-card--active { box-shadow: 0 0 0 1px rgba(var(--theme-color),1), 0 4px 18px rgba(var(--theme-color),.2); }

    /* Большая стрелка у правого края карточки (визуальный намёк "тапни, чтобы выбрать") */
    .bl-card-arrow {
      position: absolute; right: 8px; top: 50%;
      transform: translateY(-50%);
      z-index: 2; pointer-events: none;
      color: rgba(var(--theme-color),.55);
      font-size: 22px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
    }

    /* Photo column — ширина в % от карточки (~50%); фото абсолютно спозиционировано и
       заполняет фактическую высоту карточки (которую теперь диктует контент, а не фото) */
    .bl-card-photo {
      width: 46%; flex-shrink: 0;
      position: relative; overflow: hidden;
      background: #f3f4f6;
	  border-radius: 10px;
    }
    .bl-card-photo-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .bl-card-photo-grad {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; color: rgba(255,255,255,.5);
    }
    .bl-card-badge {
      position: absolute; top: 6px; left: 6px;
      background: rgba(var(--theme-color),1); color: #fff;
      font-size: 9px; font-weight: 700;
      padding: 3px 7px; border-radius: 999px;
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
      letter-spacing: 0.2px;
    }

    /* Content wrapper (right of photo); правый паддинг оставляет место под bl-card-arrow */
    .bl-card-content {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column;
      padding: 8px 24px 8px 0;
    }
    /* Top row: name/addr/meta + status */
    .bl-card-top {
      display: flex; align-items: flex-start; gap: 4px;
    }
    /* Body */
    .bl-card-body {
      flex: 1; min-width: 0;
      padding: 0 4px 0 8px;
      display: flex; flex-direction: column; gap: 3px;
    }
    .bl-card-head {
      display: flex; align-items: center; gap: 5px;
      flex-wrap: wrap;
    }
    .bl-card-num {
      width: 12px; height: 12px; border-radius: 50%;
      background: rgba(var(--theme-color),1); color: #fff;
      font-size: 8px; font-weight: 500;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .bl-card-name {
      font-size: 13px; font-weight: 700;
      color: #1a1a1a; line-height: 1.2;
      margin: 0;
    }
    .bl-card-rating {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 12px; font-weight: 700; color: #1a1a1a;
    }
    .bl-card-rating i { color: #f59e0b; font-size: 13px; }

    .bl-card-addr {
      display: flex; align-items: flex-start; gap: 4px;
      font-size: 9px; color: #888; line-height: 1.35;
    }
    .bl-card-addr i { font-size: 10px; color: rgba(var(--theme-color),.7); margin-top: -1px; flex-shrink: 0; }

    .bl-card-meta {
      display: flex; align-items: center; gap: 5px;
      font-size: 8px; color: #999;
    }
    .bl-card-meta[hidden] { display: none; }
    .bl-card-meta i { font-size: 10px; color: #b8b8b8; }
    .bl-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }

    /* Теги — скрыты визуально (остаются в DOM, фильтрация читает data-tags на .bl-card) */
    .bl-card-tags { display: flex; }
    .bl-card-tags[hidden] { display: none; }
    .bl-tag {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 3px 7px; border-radius: 999px;
      font-size: 5px; font-weight: 600;
      white-space: nowrap; flex-shrink: 0;
    }
    .bl-tag i { font-size: 7px; }
    /* Footer: строка (доставка + время) сверху, кнопка «Выбрать» во всю ширину снизу */
    .bl-card-foot {
      display: flex; flex-direction: column; gap: 6px;
      padding: 6px 0 0 8px;
      margin-top: auto;
    }
    .bl-card-foot-row {
      display: flex; align-items: stretch; gap: 6px;
    }
    .bl-card-foot-row > * { flex: 1; min-width: 0; }
    .bl-tag--red    { background: #fef2f2; color: #b91c1c; }
    .bl-tag--amber  { background: #fffbeb; color: #b45309; }
    .bl-tag--green  { background: #f0fdf4; color: #15803d; }
    .bl-tag--purple { background: #faf5ff; color: #7e22ce; }
    .bl-tag--mint   { background: #ecfdf5; color: #047857; }
    .bl-tag--teal   { background: #f0fdfa; color: #0f766e; }
    .bl-tag--gray   { background: #f3f4f6; color: #374151; }
    .bl-tag--pink   { background: #fdf2f8; color: #be185d; }
    .bl-tag--blue   { background: #eff6ff; color: #1e40af; }

    .bl-status {
      font-size: 6px; font-weight: 600; white-space: nowrap;
      display: flex; align-items: center; gap: 3px;
      flex-shrink: 0; padding-top: 1px;
    }
    .bl-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .bl-status--open  .bl-status-dot { background: #1db954; }
    .bl-status--open  { color: #1db954; }
    .bl-status--closed .bl-status-dot { background: #f59e0b; }
    .bl-status--closed { color: #f59e0b; }
    .bl-status--holiday .bl-status-dot { background: #cbd5e1; }
    .bl-status--holiday { color: #94a3b8; }

    .bl-delivery {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      background: #f9f6f1;
      border-radius: 9px;
      padding: 5px 8px;
    }
    .bl-delivery i { font-size: 11px; color: rgba(var(--theme-color),1); flex-shrink: 0; }
    .bl-delivery-text { display: flex; flex-direction: row; align-items: center; gap: 3px; min-width: 0; flex-wrap: wrap; }
    .bl-delivery-price { font-size: 8px; font-weight: 700; color: #1a1a1a; white-space: nowrap; }
    .bl-delivery-free  { font-size: 8px; color: #1db954; font-weight: 600; white-space: nowrap; }
    .bl-delivery-paid  { font-size: 8px; color: #999; white-space: nowrap; }

    /* Время доставки — вторая колонка рядом с ценой; тонкий серый текст, без фона */
    .bl-card-time {
      display: flex; align-items: center; justify-content: flex-end; gap: 4px;
      font-size: 8px; font-weight: 400; color: #999;
      white-space: nowrap;
    }
    .bl-card-time i { font-size: 10px; color: #b8b8b8; flex-shrink: 0; }

    .bl-btn-select {
      display: inline-flex; align-items: center; justify-content: center; gap: 3px;
      padding: 3px 10px; border-radius: 6px;
      background: rgba(var(--theme-color),1); color: #fff;
      font-size: 8px; font-weight: 700;
      border: none; cursor: pointer; white-space: nowrap;
      text-decoration: none; flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(var(--theme-color),.3);
    }
    .bl-btn-select--ghost {
      background: #fff;
      color: rgba(var(--theme-color),1);
      border: 1.5px solid rgba(var(--theme-color),.4);
      box-shadow: none;
    }
    /* Полноширинная, более заметная кнопка «Выбрать точку» под строкой доставки/времени */
    .bl-btn-select--full {
      width: 100%; height: 30px;
      padding: 0 12px; border-radius: 10px;
      font-size: 10px;
      gap: 5px;
    }
    .bl-btn-select--full i { font-size: 14px; }

    /* ── Empty state ────────────────────────────────────────────────── */
    .bl-empty {
      text-align: center; padding: 48px 20px;
      color: #bbb; display: none;
    }
    .bl-empty i { font-size: 48px; display: block; margin-bottom: 10px; opacity: .4; }
    .bl-empty p { font-size: 14px; margin: 0; }

    /* ── Help banner ────────────────────────────────────────────────── */
    .bl-help {
      margin: 10px 14px 0;
      background: #fff5e8;
      border-radius: 16px;
      padding: 14px;
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap;
    }
    .bl-help-icon {
      width: 42px; height: 42px;
      background: #fff;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; color: rgba(var(--theme-color),1);
      flex-shrink: 0;
    }
    .bl-help-text { flex: 1; min-width: 0; }
    .bl-help-title { font-size: 13px; font-weight: 800; color: #1a1a1a; margin: 0 0 2px; }
    .bl-help-sub { font-size: 11px; color: #666; margin: 0; line-height: 1.35; }
    .bl-help-btn {
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(var(--theme-color),1); color: #fff;
      padding: 9px 14px; border-radius: 11px;
      font-size: 12px; font-weight: 700;
      text-decoration: none; white-space: nowrap;
      border: none; cursor: pointer;
      box-shadow: 0 3px 10px rgba(var(--theme-color),.25);
    }

    /* ── Features (bottom 4) ────────────────────────────────────────── */
    .bl-features {
      margin: 16px 14px 0;
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 12px 8px;
    }
    @media (min-width: 600px) { .bl-features { grid-template-columns: repeat(4, 1fr); } }
    .bl-feat { display: flex; align-items: flex-start; gap: 7px; }
    .bl-feat-icon {
      width: 32px; height: 32px; border-radius: 9px;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: rgba(var(--theme-color),1);
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0,0,0,.04);
    }
    .bl-feat-title { font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
    .bl-feat-sub { font-size: 10px; color: #888; margin-top: 1px; }

    /* ── Toast (geo errors etc.) ────────────────────────────────────── */
    .bl-toast {
      position: fixed; bottom: 20px; left: 14px; right: 14px;
      max-width: 480px; margin: 0 auto;
      background: #1a1a1a; color: #fff;
      padding: 10px 16px; border-radius: 12px;
      font-size: 11px; line-height: 1.5;
      z-index: 1100;
      opacity: 0; pointer-events: none;
      transition: opacity .25s;
      text-align: center;
    }
    .bl-toast.is-visible { opacity: 1; }

    /* ── Filter bottom sheet ────────────────────────────────────────── */
    .bl-filter-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      /* Выше z-index Bootstrap-модалки (1055) — при встраивании в модалку
         (menu.php) эти элементы переносятся в document.body скриптом ниже,
         чтобы их fixed-позиционирование не ломалось transform-ом модалки. */
      z-index: 1060;
      opacity: 0; pointer-events: none;
      transition: opacity .3s;
    }
    .bl-filter-overlay.is-open { opacity: 1; pointer-events: all; }

    .bl-filter-sheet {
      position: fixed; bottom: 0; left: 0; right: 0;
      max-width: 720px; margin: 0 auto;
      background: #fff;
      border-radius: 20px 20px 0 0;
      z-index: 1061;
      transform: translateY(101%);
      transition: transform .38s cubic-bezier(.4,0,.2,1);
      max-height: 82vh;
      display: flex; flex-direction: column;
      box-shadow: 0 -6px 30px rgba(0,0,0,.13);
    }
    .bl-filter-sheet.is-open { transform: translateY(0); }

    .bl-filter-handle {
      width: 32px; height: 3px; border-radius: 999px;
      background: #e0e0e0; margin: 8px auto 0; flex-shrink: 0;
    }
    .bl-filter-head {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .bl-filter-title { font-size: 11px; font-weight: 800; color: #1a1a1a; flex: 1; }
    .bl-filter-reset {
      font-size: 8px; color: rgba(var(--theme-color),1);
      background: none; border: none; cursor: pointer;
      font-family: inherit; font-weight: 600; padding: 0;
    }
    .bl-filter-close {
      width: 22px; height: 22px; border-radius: 50%;
      background: #f0f0f0; border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: #555; flex-shrink: 0;
    }

    .bl-filter-body {
      flex: 1; overflow-y: auto;
      padding: 10px 14px 4px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .bl-filter-section-title {
      font-size: 9px; font-weight: 700; color: #1a1a1a;
      margin-bottom: 8px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .bl-filter-section-title .bl-dist-label {
      font-size: 8px; color: rgba(var(--theme-color),1); font-weight: 600;
    }

    .bl-filter-search {
      display: flex; align-items: center; gap: 6px;
      background: #f5f5f5; border-radius: 12px; padding: 5px 10px;
    }
    .bl-filter-search i { font-size: 11px; color: #aaa; flex-shrink: 0; }
    .bl-filter-search input {
      border: none; background: transparent; outline: none;
      font-size: 8px; color: #1a1a1a; width: 100%; font-family: inherit;
    }
    .bl-filter-search input::placeholder { color: #bbb; }

    .bl-filter-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .bl-ftag {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 5px 8px; border-radius: 10px;
      background: #f5f5f5; border: 1.5px solid transparent;
      font-size: 7px; font-weight: 600; color: #555;
      cursor: pointer; font-family: inherit; transition: all .15s;
    }
    .bl-ftag i { font-size: 10px; }
    .bl-ftag--active {
      background: rgba(var(--theme-color),.1);
      border-color: rgba(var(--theme-color),.4);
      color: rgba(var(--theme-color),1);
    }

    .bl-dist-slider {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 4px; border-radius: 999px;
      background: #e0e0e0; outline: none; margin-top: 8px; cursor: pointer;
    }
    .bl-dist-slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 18px; height: 18px; border-radius: 50%;
      background: rgba(var(--theme-color),1); cursor: pointer;
      box-shadow: 0 2px 6px rgba(var(--theme-color),.35);
      border: 2px solid #fff;
    }
    .bl-dist-slider::-moz-range-thumb {
      width: 18px; height: 18px; border-radius: 50%;
      background: rgba(var(--theme-color),1); cursor: pointer;
      border: 2px solid #fff; box-shadow: 0 2px 6px rgba(var(--theme-color),.35);
    }
    .bl-dist-geo-hint {
      margin-top: 6px;
      display: flex; align-items: center; gap: 4px;
      font-size: 7px; color: #aaa;
    }
    .bl-dist-geo-hint i { font-size: 10px; }

    .bl-filter-footer {
      padding: 10px 14px;
      padding-bottom: max(10px, env(safe-area-inset-bottom));
      border-top: 1px solid #f0f0f0; flex-shrink: 0;
    }
    .bl-filter-apply {
      width: 100%; height: 40px;
      background: rgba(var(--theme-color),1); color: #fff;
      border: none; border-radius: 12px;
      font-size: 11px; font-weight: 700; cursor: pointer;
      font-family: inherit;
      box-shadow: 0 3px 10px rgba(var(--theme-color),.3);
      transition: opacity .15s;
    }
    .bl-filter-apply:active { opacity: .85; }

    .bl-chip-badge {
      background: rgba(var(--theme-color),1); color: #fff;
      font-size: 8px; font-weight: 700;
      min-width: 14px; height: 14px; border-radius: 999px;
      padding: 0 3px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-left: 1px;
    }

    /* ── Very small screens (< 360px) ──────────────────────────────── */
    @media (max-width: 360px) {
      .bl-hero-media { width: 42%; }
      .bl-hero-media-icon { font-size: 44px; }
      .bl-card-photo-grad { font-size: 28px; }
      .bl-card-right { width: 96px; }
      .bl-tab { font-size: 11px; padding: 8px 4px; gap: 3px; }
      .bl-tab i { display: none; }
    }