/* =============================================================================
   hotels-list.css — ЕДИНЫЙ файл страницы списка отелей (/oteli/, /hostely/, /bazy-otdyha/ …).
   t_cf372255 (30.09.2026): слиты 11 файлов (v2 + v3 + 9 патчей) в прежнем порядке каскада —
   порядок разделов ниже = порядок старых <link>, поэтому поведение не меняется.
   ПРАВИЛА (канон «ЕДИНЫЙ UI-КИТ» и «ФИНАЛЬНОЕ — СРАЗУ В КИТ»):
   • Эталон стиля — детальная отеля (/oteli/777438/). Компоненты берём из /js/vse-ui.css (vs-*),
     здесь — только раскладка страницы и то, чего в ките ещё нет.
   • 0 хексов: только токены кита (--ink, --blue, --red, --card …).
   • !important — только с меткой-причиной рядом, в виде комментария сразу после него (легенда ниже).
   • Метки у !important (t_cf372255, автотест CSSOM 30.09 на 375/1280: по умолчанию, шторки фильтров/сортировки,
     даты+гости, панель фильтров на десктопе; 44 лишних !important сняты — вычисленные стили не изменились):
       метка !A  — проверено: без него побеждает тема Aspro или более специфичное правило;
       метка !JS — свойство, которое скрипты списка меняют через style=… — держим верх над inline;
       метка !?  — элемент динамический (карта, «Где», пустая выдача), автотестом не покрыт — не трогать без проверки глазами.
   • Версия в index.php — ?v=filemtime, ручной бамп не нужен.
   • Старые файлы (hotels-list-v2.css, hf-*.css …) больше НЕ подключаются — правки только сюда.
   ============================================================================= */


/* ########## раздел: бывший hotels-list-v2.css ########## */
/* t_f2946159: токены объявляются на :root, а НЕ только на .hf-wrap. Причина найдена на
   живой проверке на 390px: нижняя панель .hf-bbar и три шторки .hf-sheet физически лежат
   вне .hf-wrap, поэтому переменные до них не доходили — getComputedStyle(.hf-bbar)['--tap']
   был пустым, кнопки схлопывались в 24px вместо 44, а background:var(--card) у шторки
   резолвился в прозрачный. Блок .hf-wrap ниже оставлен как есть (те же значения) —
   переопределение самому себе безвредно, а откат сводится к удалению этого блока. */
/* t_69476ef4 (19.09.2026): блок :root с токенами отсюда УБРАН — токены приходят из
   UI-кита /js/vse-ui.css, который подключается первым (см. info/brands/index.php).
   Значения были ровно те же; копия опасна не тем, что неправильная, а тем, что при
   следующей правке оригинала останется старой. Диздок — /js/vse-ui.README.md. */
.hf-bbar,.hf-sheet{font-family:var(--font);color:var(--ink);}
/* t_f2946159 (решение Данила 08.09.2026): логотип на странице дублировался — шапка темы
   «vse rent» плюс наш .hf-logo в топбаре (в эталоне топбар и ЕСТЬ шапка, поэтому дубля
   там нет). Выбран минимальный вариант: прячем свой, шапку темы не трогаем — она несёт
   меню и кабинет, общие для всего сайта. Строка поиска забирает освободившуюся ширину. */
.hf-logo{display:none;}
/* t_69476ef4: вторая копия токенов (была на .hf-wrap) тоже убрана — источник один,
   /js/vse-ui.css. Здесь остаётся только то, что действительно про раскладку страницы. */
.hf-wrap{max-width:1360px;margin:0 auto;padding:0 var(--sp-4);font-family:var(--font);color:var(--ink);}
/* t_35b6e8d9: скрываем дублирующий вендорский H1 (#pagetitle) — у нас свой в hf-top ниже. */
#pagetitle{display:none!important /*!A*/;}
.hf-wrap *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* t_f2946159: тройной отступ по краям. Замер на живом 390px: тема даёт .wrapper_inner
   15px, .hf-wrap добавляет свои 15px, .hf-main ещё 16px — контент выходил 298px вместо
   358, карточки по 139px вместо ~173 как в эталоне, из-за чего теги вылезали за карточку.
   На мобиле гасим отступ .hf-wrap отрицательным margin (вычитаем 15px темы) и оставляем
   единственный отступ у .hf-main; блокам шапки, которые раньше жили на паддинге .hf-wrap,
   отступ возвращаем явно. С 600px правило снимается — там уже работает существующий
   @media (min-width:600px) с --sp-6, а отрицательный margin сломал бы центрирование.
   ВАЖНО: этот блок должен стоять ПОСЛЕ основного .hf-wrap{...} выше — специфичность та
   же, побеждает последнее правило. */
.hf-wrap{--hf-gutter:15px;margin-left:calc(-1 * var(--hf-gutter));margin-right:calc(-1 * var(--hf-gutter));padding-left:0;padding-right:0;}
.hf-top-row,.hf-types,.hf-chips{padding-left:var(--sp-4);padding-right:var(--sp-4);}
@media (min-width:600px){.hf-wrap{margin-left:auto;margin-right:auto;padding-left:var(--sp-4);padding-right:var(--sp-4);}}
/* t_02f23a82 (20.09.2026): исключаем компоненты UI-кита из общего сброса ссылок.
   Было: .hf-wrap a{color:inherit} — специфичность (0,1,1) против .vs-btn--primary
   (0,1,0), и постраничный файл подключается ПОСЛЕ vse-ui.css, поэтому любая
   кит-кнопка, оформленная ссылкой, теряла свой цвет и наследовала цвет контекста.
   Поймано визуально: «Сбросить фильтры» в пустом состоянии рисовалась серым
   (#6B7280) на синей заливке — контраст около 2.3:1, текст почти не читался.
   Это ровно тот случай, против которого написан канон t_69476ef4: постраничный CSS
   не должен перебивать кит. Чиним в корне, а не точечной заплаткой на один блок. */
.hf-wrap a{color:inherit;text-decoration:none;}
.hf-wrap a.vs-btn--primary{color:var(--on-accent);}
.hf-wrap a.vs-btn--secondary{color:var(--ink);}
.hf-wrap a.vs-btn--ghost{color:var(--ink-2);}

/* t_02f23a82: класса .hf-visually-hidden не существовало НИ В ОДНОМ CSS, хотя
   разметка им пользуется. Из-за этого служебный H2 «<город>: свободные варианты»,
   задуманный как скрытый заголовок для структуры страницы, выводился на экран
   обычным текстом 375x63 и дублировал H1 на КАЖДОЙ странице выдачи, а не только
   на пустой. Стандартный приём: убираем из потока, оставляя доступным скринридерам
   и поисковым роботам. */
.hf-visually-hidden{position:absolute!important /*!JS*/;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.hf-wrap button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.hf-wrap h1,.hf-wrap h2,.hf-wrap h3{margin:0;letter-spacing:-.01em;}
/* t_3643192e: --hf-bbar-h — фактическая высота нижней панели, её меряет JS
   (в панели теперь ещё и поиск, высота зависит от того, переносится ли строка
   значений). Фолбэк — прежняя статическая формула, если JS не отработал. */
.hf-wrap{padding-bottom:calc(var(--hf-bbar-h, calc(var(--bar-h) + var(--safe-b))) + var(--sp-2));}
@media (min-width:1024px){.hf-wrap{padding-bottom:0;}}
/* t_004867b8: по запросу Дениса — прячем родную обёртку темы .top-block-wrapper
   (заголовок/крошки из top_wraps.php) только на этой странице. Файл и так грузится
   исключительно на /info/brands/ ($__hfIsListPage), поэтому без URL-условия — другие
   страницы сайта не затронуты. Дублирует наш собственный h1 в .hf-lhead. */
.top-block-wrapper{display:none;}
/* t_004867b8: у пустого .text_before_items (стандартная Bitrix-обёртка news.list) в
   template_styles.css задан margin-bottom 47px, а правило .text_before_items:empty
   (которое должно было его обнулять) не срабатывает — внутри div whitespace-текст
   ("\n\t"), а :empty не считает такой элемент пустым. Отсюда и был "необъяснимый"
   отступ между заголовком и карточками, который не находился по .hf-lhead/.hf-sortrow/
   .hf-cards — источник был в общем файле темы, не в наших стилях. Глушим только здесь. */
.text_before_items{margin-bottom:0;}
/* t_004867b8: по запросу Дениса — прячем "Показать ещё" (#hfShowMoreBtn) на десктопе,
   там уже есть номерная пагинация (.module-pagination). Кнопка изначально делалась
   именно как мобильная альтернатива пагинации (t_a56a0b82) — на мобиле оставляем. */
/* t_5c121ef3 (19.09.2026): кнопка возвращена. Она больше не «дубль пагинации»:
   теперь это основной способ листать выдачу — рядом с ней работает автоподгрузка
   по скроллу (hotels-list-v2.js), а номерная пагинация остаётся в разметке для
   ботов и для того, чтобы на конкретную страницу можно было дать ссылку.
   Первые три порции подтягиваются сами, дальше человек жмёт кнопку сам — иначе
   лента уезжает бесконечно и до подвала не добраться. */
.hf-showmore{
  display:block;width:100%;max-width:420px;margin:var(--sp-5) auto var(--sp-1);padding:var(--sp-3) var(--sp-5);
  font:inherit;font-size:15px;font-weight:700;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
  min-height:48px;transition:background .15s,border-color .15s;
}
.hf-showmore:hover{background:var(--hover-bg);border-color:var(--line-strong);}
.hf-showmore:disabled{opacity:.6;cursor:default;}
/* 19.09.2026 (t_0a53c229, решение Данила): НОМЕРА ВИДНЫ И НА МОБИЛЕ.
   Было: на мобиле ряд номеров прятался, листали только кнопкой и автоподгрузкой.
   Данил: «оставил бы честную пагинацию — мотаешь вниз, вторая страница сама
   подгружается снизу, но при этом можно выбрать конкретную страницу, если хочешь».
   То есть оба способа работают вместе и не спорят: автоподгрузка добавляет карточки
   в конец, номера остаются под ними как быстрый переход. Тап-зона номеров доведена
   до 44px (канон 04.09.2026), иначе на телефоне в них не попасть. */
@media (max-width:991px){
  .module-pagination{display:block;margin:var(--sp-2) 0 calc(var(--bar-h) + var(--safe-b) + var(--sp-3));}
  .module-pagination .nums{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2);}
  .module-pagination .nums a,.module-pagination .nums span.cur{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;height:44px;padding:0 var(--sp-3);
    border-radius:var(--r-m);font-size:var(--fs-15);font-weight:600;line-height:1;
  }
  .module-pagination .nums a{background:var(--card);border:1px solid var(--line);color:var(--ink);}
  .module-pagination .nums span.cur{background:var(--blue);color:var(--on-accent);}
}
/* t_004867b8: сама .hf-sticky-header вешается только скриптом hotels-list-v2-b.js,
   который грузится исключительно на этой странице — доп. URL-скоуп не нужен. */
.header-wrapper.hf-sticky-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:transform .25s ease;background:var(--card);box-shadow:0 2px 8px rgba(18,33,59,.08);}
body.hf-header-hidden .header-wrapper.hf-sticky-header{transform:translateY(-100%);}
/* t_004867b8: по запросу Дениса — на десктопе убираем центрирующий margin и боковой
   padding 15px у .hf-wrap (унаследованы от базового правила и правила ≥600px выше),
   контент идёт вплотную к краю контейнера темы. Мобильную часть (<1024px) не трогаем. */
@media (min-width:1024px){.hf-wrap{margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1700px;}}

/* ---------- ТОПБАР (t_f2946159: рерайт 1-в-1 под hotels-list-v2.html) ---------- */
.hf-top{position:sticky;top:0;z-index:39;background:var(--card);border-bottom:1px solid var(--line);}
@media (min-width:1024px){
.hf-top{position:fixed;left:0;right:0;transform:translateY(var(--hf-native-header-h,0px));transition:transform .25s ease;}
body.hf-header-hidden .hf-top{transform:translateY(0);}
}
.hf-top-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);max-width:1700px;margin:0 auto;}
.hf-logo{font-weight:700;font-size:var(--fs-17);letter-spacing:-.02em;flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-1);}
/* t_004867b8: на десктопе (≥992px, тот же порог, что у нового виджета даты/гости/поиск
   в родной шапке Aspro) .hf-top-row дублирует функцию — прячем. .hf-types/.hf-chips вне
   этого блока, их не трогаем. На мобиле (<992px) .hf-searchpill остаётся — единственный
   способ открыть #hfSearchSheet, других триггеров у шторки поиска нет. */
@media (min-width:992px){.hf-top-row{display:none;}}
.hf-logo i{width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--coral);transform:rotate(-45deg);display:block;}
.hf-searchpill{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:calc(var(--tap) + 10px);
  padding:0 var(--sp-2) 0 var(--sp-5);border:1px solid var(--line) !important /*!A*/;border-radius:var(--r-pill);background:var(--card) !important /*!A*/;
  box-shadow:var(--sh-1);text-align:left;}
/* t_55b4ec96 (26.09.2026): лупа была тёмной (--ink) на синей кнопке — правило .hf-bbar svg
   (ниже, та же специфичность 0,1,1) перебивало stroke:#fff на stroke:currentColor.
   Цвет теперь задаётся через color на кнопке, селектор иконки усилен до 0,2,1. */
.hf-sp-searchbtn{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--blue);color:var(--on-accent);display:flex;align-items:center;justify-content:center;}
.hf-bbar .hf-sp-searchbtn svg,.hf-sp-searchbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.hf-sp-txt{min-width:0;overflow:hidden;}
.hf-sp-1{font-size:var(--fs-14);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.hf-sp-2{font-size:var(--fs-11);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

.hf-types{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) var(--sp-3);overflow-x:auto;scrollbar-width:none;max-width:1700px;margin:0 auto;}
.hf-types::-webkit-scrollbar{display:none;}
.hf-type{flex:0 0 auto;height:34px;padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--fs-13);font-weight:600;color:var(--ink-2);background:var(--card);display:flex;align-items:center;}
.hf-type[aria-selected="true"]{background:var(--ink);color:var(--on-accent);border-color:var(--ink);}

.hf-chips{display:flex;gap:var(--sp-2);padding:0 var(--sp-4) var(--sp-3);overflow-x:auto;scrollbar-width:none;max-width:1700px;margin:0 auto;}
.hf-chips::-webkit-scrollbar{display:none;}
.hf-chip{flex:0 0 auto;height:36px;padding:0 var(--sp-3);border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card);font-size:var(--fs-13);font-weight:600;display:flex;align-items:center;white-space:nowrap;}
.hf-chip.hf-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-deep);}

/* ---------- ДЕСКТОП-ТУЛБАР (постоянно видим ≥1024px — bottombar/шторки там скрыты) ---------- */
.hf-desktop-toolbar{display:none;}
@media (min-width:1024px){
  .hf-desktop-toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--line);background:var(--card);}
  .hf-desktop-toolbar #hfDeskSearchSlot input{min-width:220px;padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-pill);font:inherit;font-size:var(--fs-13);outline:none;}
  .hf-desktop-toolbar .hf-select{min-height:38px;padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-m);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;font-size:var(--fs-13);font-weight:600;color:var(--ink);font-family:inherit;}
  .hf-desktop-toolbar .hf-row2{display:flex;gap:var(--sp-2);}
  .hf-desktop-toolbar .hf-fld{padding:var(--sp-1) var(--sp-3);}
  /* t_f2946159: в тулбар переезжают целые группы .hf-fgroup из шторок (вместе с h3 и
     вертикальными отступами шторки) — без этого тулбар на 1280px вырастал до 289px в
     высоту и ломался на несколько рядов. Здесь группа сплющивается в одну строку. */
  .hf-desktop-toolbar .hf-fgroup{padding:0;border-bottom:none;display:flex;align-items:center;gap:var(--sp-2);}
  .hf-desktop-toolbar .hf-fgroup h3{margin:0;font-size:var(--fs-12);font-weight:600;color:var(--muted);white-space:nowrap;}
  .hf-desktop-toolbar .hf-fgroup .hf-fld{padding:var(--sp-1) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-m);}
  .hf-desktop-toolbar .hf-fgroup .hf-fld input{border:none;outline:none;font:inherit;font-size:var(--fs-13);font-weight:600;width:100%;background:none !important /*!?*/;color:var(--ink);}
  .hf-desktop-toolbar .hf-fgroup .hf-fld label{font-size:var(--fs-11);color:var(--muted);}
  .hf-desktop-toolbar .hf-price-apply{margin-top:0;width:auto;min-height:38px;padding:0 var(--sp-4);white-space:nowrap;}
  .hf-desktop-toolbar #hfHomeReset,.hf-desktop-toolbar #hfDeskResetSlot{display:flex;align-items:center;}
  .hf-desktop-toolbar #hfReset{margin-left:auto;font-size:var(--fs-13);font-weight:600;padding:var(--sp-2) var(--sp-4);min-height:38px;opacity:.5;pointer-events:none;}
  .hf-desktop-toolbar #hfReset.hf-on{opacity:1;pointer-events:auto;}
}
/* t_004867b8: старый инлайн-тулбар заменён боковой шторкой фильтров (см. ниже) — глушим,
   код выше оставлен на случай отката, а не удалён. */
@media (min-width:1024px){.hf-desktop-toolbar{display:none !important /*!JS*/;}}

/* ---------- ДЕСКТОП: плавающая кнопка "Фильтры" + шторка фильтров сайдбаром слева ---------- */
.hf-desk-filter-btn{display:none;}
@media (min-width:1024px){
  .hf-desk-filter-btn{
    display:flex;align-items:center;gap:var(--sp-2);
    /* t_004867b8 (фикс "улетает при скролле"): было position:fixed с top, который считал
       JS от getBoundingClientRect() .hf-cards — правильно только в момент вычисления;
       .hf-cards обычный контент и продолжает уезжать при скролле, а JS пересчитывал top
       только по событию скрытия/показа шапки, так что между этими событиями кнопка
       залипала на устаревшем (уже неверном, часто за пределами экрана) значении.
       position:sticky сам корректно следит за скроллом в обе стороны, без JS: кнопка
       физически перенесена в HTML прямо перед .hf-cards (см. index.php), поэтому её
       обычное (не прилипшее) положение и есть верхняя грань сетки карточек — а top ниже
       работает как порог прилипания под шапкой/табами при скролле вниз. */
    position:sticky;
    top:calc(var(--hf-native-header-h,0px) + var(--hf-top-h,0px) + 16px);
    transition:top .25s ease;
    margin-bottom:var(--sp-4);align-self:flex-start;
    width:max-content;
    z-index:45;height:48px;padding:0 var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--line);
    background:var(--card) !important /*!JS*/;box-shadow:0 4px 16px rgba(18,33,59,.12);font-size:var(--fs-14);font-weight:600;
    color:var(--ink);cursor:pointer;
  }
  /* t_004867b8 (по скриншоту): .hf-top сам переключает свою позицию через этот же класс
     (translateY(0) вместо translateY(--hf-native-header-h) при скрытой шапке) — top
     кнопки должен зеркалить то же самое: без шапки в расчёте больше нет, иначе остаётся
     пустой зазор высотой шапки и кнопка виснет ниже табов, на фото карточки. */
  body.hf-header-hidden .hf-desk-filter-btn{top:calc(var(--hf-top-h,0px) + 16px);}
  .hf-desk-filter-btn:hover{background:var(--paper) !important /*!?*/;}
  .hf-desk-filter-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;}
  .hf-desk-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
    padding:0 var(--sp-1);border-radius:10px;background:var(--blue);color:var(--on-accent);font-size:11px;font-weight:700;}

  /* Сама шторка #hfFilterSheet едет не снизу, а слева, на всю высоту. */
  #hfFilterSheet{
    left:0;right:auto;bottom:0;top:0;width:380px;max-width:85vw;max-height:none;height:100%;
    border-radius:0 var(--r-l) var(--r-l) 0;
    transform:translateX(-100%);
  }
  #hfFilterSheet.hf-on{transform:translateX(0);}
  #hfDeskChipsSlot .hf-chips{padding:0;overflow-x:visible;flex-wrap:wrap;max-width:none;margin:0 0 var(--sp-1);}
}
/* t_004867b8: та же раскладка чипов (перенос строк, не горизонтальный скролл) нужна и на
   мобиле — звёзды теперь всегда внутри #hfFilterSheet, а не только в десктопном сайдбаре. */
#hfDeskChipsSlot .hf-chips{padding:0;overflow-x:visible;flex-wrap:wrap;max-width:none;margin:0 0 var(--sp-1);}

/* ---------- КОНТЕНТ ---------- */
.hf-main{padding:0;}
/* t_004867b8: у .catalog_block (компонент карточек, margin -10px !important со всех сторон
   из hotels_grid/style.css) ширина резолвится под родителя (fixed), а не auto — из-за
   этого отрицательный margin раздвигает блок только влево (margin-left реально сдвигает
   позицию), а margin-right вправо не расширяет (правый край = left+width, width не
   меняется). Отсюда асимметрия: слева впритык к краю, справа как обычно. Компенсируем
   явной шириной = 100% + 20px (по 10px на каждую сторону margin). */
.items-list1.table .hf-grid{margin:0;width:100%;}   /* t_95d67a9f: было .catalog_block…row.margin0 с !important против Aspro */
@media (min-width:600px){.hf-main,.hf-chips,.hf-types,.hf-top-row,.hf-desktop-toolbar{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
.hf-lhead{padding:var(--sp-4) var(--sp-4) var(--sp-3);}
.hf-lhead h1{font-size:var(--fs-20);line-height:1.25;}
@media (min-width:1024px){.hf-lhead h1{font-size:var(--fs-24);}}
.hf-sortrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-3);}

/* t_dcdd7fc9: новый вид полей внутри шторки поиска (#hfSearchSheet) — иконка + подпись +
   значение в одном скруглённом блоке, по образцу песочницы _dev-calendar-mobile.php.
   Замена старых .hf-fgroup/h3+.hf-fld. Оставляем прежние id/классы sc-field нетронутыми —
   на них завязана рабочая логика hotels-list-v2.js (createSCCalendar/createSCGuestsCounter). */
.hf-sheet--dcm .hf-sheet__body{display:flex;flex-direction:column;gap:var(--sp-3);}
.dcm-field{position:relative;display:flex;align-items:center;gap:var(--sp-3);background:var(--paper);border-radius:14px;padding:var(--sp-3) var(--sp-4);cursor:pointer;}
.dcm-field__icon{flex:0 0 auto;width:20px;height:20px;color:var(--muted);}
.dcm-field__icon svg{width:20px;height:20px;}
.dcm-field__stack{min-width:0;flex:1;}
.dcm-field__label{display:block;font-size:var(--fs-11);color:var(--muted);font-weight:600;}
.dcm-field__value,.hf-sheet--dcm .sc-field__value{font-size:var(--fs-15);font-weight:600;color:var(--ink);}
.hf-sheet--dcm .sc-field__value.placeholder{color:var(--muted-2);font-weight:500;}
.dcm-field__input{border:none;outline:none;background:none !important /*!?*/;font:inherit;font-size:var(--fs-15);font-weight:600;color:var(--ink);width:100%;padding:0;}
.dcm-field__input::placeholder{color:var(--muted-2);font-weight:500;}
.dcm-field__input[readonly]{cursor:default;}
.hf-sheet .dcm-field.sc-field{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;}
/* t_004867b8: по запросу Дениса — убрать кнопку "в избранное" (сердечко) с карточек
   отелей на /info/brands, и мобайл, и десктоп. Прячем через CSS (страница-скоуп), не
   трогая шаблон карточки (hotels_grid/template.php) — он может использоваться где-то
   ещё, безопаснее не резать разметку на уровне компонента. */
.hf-card .hcard_fav{display:none !important /*!A*/;}
.hf-chips-label{font-size:var(--fs-14);margin:0 0 var(--sp-3);}
.hf-sort-list{display:flex;flex-direction:column;gap:var(--sp-2);}
.hf-sort-opt--sheet{display:block;width:100%;text-align:left;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--paper);font-size:var(--fs-15);font-weight:500;color:var(--ink);cursor:pointer;}
.hf-sort-opt--sheet.hf-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-deep);font-weight:600;}
/* t_004867b8: анкорный попап сортировки — только десктоп, кнопками вместо select. */
.hf-sort-wrap{position:relative;}
.hf-sort-pop{display:none;}
@media (min-width:1024px){
  .hf-sort-pop{
    display:block;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
    box-shadow:0 8px 24px rgba(18,33,59,.14);padding:var(--sp-2);z-index:50;
    opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;
  }
  .hf-sort-pop.hf-on{opacity:1;visibility:visible;transform:translateY(0);}
  .hf-sort-opt{display:block;width:100%;text-align:left;padding:var(--sp-2) var(--sp-3);border-radius:8px;border:none;background:none;font-size:var(--fs-14);color:var(--ink);cursor:pointer;}
  .hf-sort-opt:hover{background:var(--paper);}
  .hf-sort-opt.hf-active{background:var(--blue-soft);color:var(--blue-deep);font-weight:600;}
}
/* t_004867b8: по запросу Дениса — убрать фильтр "Название отеля" (#hfGrpSearch)
   целиком, и в мобильной шторке, и в десктопном тулбаре (один и тот же элемент
   портируется между ними через hotels-list-v2-b.js, id не меняется). */
#hfGrpSearch{display:none !important /*!JS*/;}

/* Шторка гостей — своя всплывашка поверх шторки поиска (не инлайн-попап). */
.hf-sheet--dcm .sc-guests-dropdown{
	position:fixed !important /*!JS*/;left:0;right:0;bottom:0;top:auto !important /*!JS*/;
	width:auto !important /*!JS*/;border-radius:20px 20px 0 0;
	padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--safe-b));
	transform:translateY(100%);transition:transform .25s ease;
	display:block !important /*!JS*/;visibility:hidden;z-index:80;
	box-shadow:0 -8px 30px rgba(18,33,59,.18);
}
.hf-sheet--dcm .sc-guests-dropdown.show{transform:translateY(0);visibility:visible;}
.hf-gsheet-backdrop{position:fixed;inset:0;background:rgba(18,33,59,.45);z-index:79;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.hf-gsheet-backdrop.hf-on{opacity:1;visibility:visible;}
.hf-gsheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);}
.hf-gsheet-title{font-size:var(--fs-17);font-weight:700;color:var(--ink);}
.hf-gsheet-close{width:32px;height:32px;border-radius:50%;background:var(--paper);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.hf-gsheet-close svg{width:14px;height:14px;stroke:var(--muted);}
.hf-cnt{font-size:var(--fs-13);color:var(--muted);}
.hf-cnt b{color:var(--ink);font-weight:700;}
.hf-sortbtn{display:flex;align-items:center;gap:var(--sp-1);height:34px;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font-size:var(--fs-13);font-weight:600;}
/* t_004867b8: .hf-sortbtn больше не скрываем на десктопе — старый инлайн-тулбар,
   которому она мешала, теперь сам скрыт (см. .hf-desktop-toolbar ниже), сортировка
   открывается той же шторкой #hfSortSheet, что и на мобиле. */

.hf-layout{display:block;}
.hf-list-pane{min-width:0;}

.hf-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding-bottom:var(--sp-6);}
@media (min-width:600px){.hf-cards{grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}}
@media (min-width:1024px){.hf-cards{grid-template-columns:1fr 1fr;}}

.hf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-1);}
.hf-card:active{transform:scale(.99);}
.hf-card__ph{position:relative;aspect-ratio:4/3;background:var(--line-2);overflow:hidden;}
/* t_1acad651: все кадры карточки битые — плитка «нет фото» (токены кита, без хексов) */
.hf-card__ph--none{background:linear-gradient(135deg,var(--stub-1),var(--stub-2));}
.hf-card__ph--none::before{content:'';position:absolute;inset:0;margin:auto;width:44px;height:44px;background:var(--muted-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") center/contain no-repeat;}
.hf-card__ph--none::after{display:none;}
.hf-card__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;}
@media (hover:hover){.hf-card__track{cursor:pointer;}}
.hf-card__arrow{display:none;}
@media (hover:hover){
  .hf-card__ph{position:relative;}
  .hf-card__arrow{
    display:flex;align-items:center;justify-content:center;position:absolute;top:50%;
    transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;
    background:rgba(60,60,60,.55) !important /*!A*/;color:var(--on-accent);cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    z-index:2;
  }
  .hf-card__arrow svg{width:16px;height:16px;stroke:var(--on-accent);}
  .hf-card__arrow--prev{left:8px;}
  .hf-card__arrow--next{right:8px;}
  .hf-card__ph:hover .hf-card__arrow{opacity:1;}
  .hf-card__arrow:hover{background:rgba(40,40,40,.75) !important /*!?*/;}
}
.hf-card__track::-webkit-scrollbar{display:none;}
.hf-card__track img,.hf-card__ph>img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;}
.hf-card__cat{position:absolute;left:6px;top:6px;background:rgba(18,33,59,.84);color:var(--on-accent);font-size:var(--fs-11);font-weight:600;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);}
.hf-card__ph .hcard_fav{position:absolute;right:4px;top:4px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);}
.hf-card__ph .hcard_fav svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.9;}
.hf-card__ph .hcard_fav[aria-pressed="true"] svg{fill:var(--coral);stroke:var(--coral);}
.hf-card__ph .hcard_fav::before{content:'';position:absolute;inset:-5px;}
.hf-card__dots{position:absolute;left:0;right:0;bottom:6px;display:flex;gap:var(--sp-1);justify-content:center;pointer-events:none;}
/* t_f2946159: белые точки листалки терялись на светлых фото (снег, белые интерьеры) —
   мягкая тень снизу кадра даёт им контраст, не затемняя саму фотографию. */
.hf-card__ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;background:linear-gradient(to top,rgba(18,33,59,.28),transparent);}
.hf-card__dots,.hf-card__cat,.hf-card__ph .hcard_fav{z-index:2;}
.hf-card{transition:box-shadow .18s ease,transform .12s ease;}
@media (hover:hover){.hf-card:hover{box-shadow:var(--sh-2);}}
.hf-card__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.35);transition:width .18s ease,background .18s ease;}
.hf-card__dots i.on{background:var(--card);width:14px;border-radius:3px;}
.hf-card__body{padding:var(--sp-2) var(--sp-3) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);flex:1;}
.hf-card__nm{font-size:var(--fs-14);font-weight:600;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
@media (min-width:1024px){.hf-card__nm{font-size:var(--fs-15);}}
.hf-card__geo.hf-slot-empty{min-height:15px;}
.hf-card__facts{font-size:var(--fs-12);color:var(--muted);line-height:1.2;}
.hf-card__rate{font-size:var(--fs-12);color:var(--muted);}
.hf-card__rate b:not(.vs-rate){background:var(--green-soft);color:var(--green);font-weight:700;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-s);}
/* t_155a1712: цвет — шкала vs-rate по значению (кит); здесь только размер под карточку. */
.hf-card__rate b.vs-rate{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-12);}
.hf-card__rate--empty{color:var(--muted-2);}
.hf-card__tags{display:flex;gap:var(--sp-1);flex-wrap:wrap;}
.hf-card__tag{font-size:var(--fs-11);font-weight:500;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-s);background:var(--paper);border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* ---- t_f2946159 (фидбек Данила 08.09.2026): одинаковая высота карточек ----
   Было: высота карточки зависела от длины тегов и числа фактов — в одном ряду
   соседи 378 / 344 / 310px, сетка «плыла». Лечим в двух местах:
   1) карточка тянется на всю высоту ячейки ряда (ячейки уже растягиваются друг под
      друга: родитель .items — flex-wrap:wrap с align-items:stretch), для этого
      колонке нужен display:flex, а карточке height:100%;
   2) внутри карточки под каждую переменную строку зарезервирована ФИКСИРОВАННАЯ
      высота, поэтому карточки одинаковы не только в ряду, но и между рядами.
   Подписи тегов теперь короткие (словарь в template.php), поэтому одна строка —
   это не обрезка, а нормальный размер: многоточие остаётся страховкой на редкие
   значения, которых нет в словаре. */
.items-list1.table .hf-grid__i{display:flex;}
.hf-card{height:100%;}
.hf-card__nm{min-height:1.25em;}          /* по запросу Дениса (10.09) — одна строка, длинные названия многоточием, было 2 строки всегда */
.hf-card__facts{min-height:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 28px — высота строки с зелёной плашкой оценки. Вариант «Пока без отзывов» плашки не
   имеет и сам по себе занимал 24px, из-за чего карточки без отзывов были на 4px ниже. */
.hf-card__rate{min-height:28px;display:flex;align-items:center;gap:var(--sp-1);}
.hf-card__tags{min-height:22px;flex-wrap:nowrap;overflow:hidden;}
.hf-card__left.hf-slot-empty{min-height:14px;}
/* t_619086ab (20.09.2026, замечание Арсения: «сделать больше, чтобы сразу читался
   и в глаза бросался»). Было 11px обычным коралловым — терялось на карточке рядом
   с ценой и названием. Стало: кегль как у фактов карточки, тёмный цвет и 700 —
   видимая иерархия по канону 18.09.2026, главное на карточке не должно сливаться
   с фоном текста. Коралловым осталась только точка-маркер: это результат ПОИСКА,
   а не постоянное свойство отеля, и отличать его от остальных строк полезно. */
.hf-card__left{
  display:flex;align-items:center;gap:var(--sp-2);
  font:700 var(--fs-13)/1.3 var(--font);color:var(--ink);margin-top:var(--sp-1);
}
.hf-card__left::before{
  content:"";flex:none;width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--coral);
}
/* Сводка по номерам отеля: «на 2–6 гостей · есть с кухней · Wi-Fi». Вторична по
   отношению к строке выше, поэтому приглушена — но читаема, это не подпись. */
.hf-card__rooms{
  font:400 var(--fs-12)/1.35 var(--font);color:var(--ink-2);margin-top:var(--sp-1);
}

/* t_0ae843ce (20.09.2026): причины, по которым отели скрыты из выдачи, в строке
   над списком. Раньше там было одно общее «нет мест на эти даты» — для отелей,
   отсеянных числом гостей или питомцем, это было неправдой.
   Чипы, а не сплошной текст: числа должны читаться с одного взгляда, а цвет
   причины здесь тот же, что на детальной отеля, чтобы это был один язык, а не
   два разных обозначения одного и того же. Токены — из vse-ui.css. */
.hf-whyrow{display:inline-flex;flex-wrap:wrap;gap:var(--sp-2);vertical-align:middle;}
.hf-why{
  display:inline-flex;align-items:center;
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);
  font:600 var(--fs-11)/1.5 var(--font);color:var(--ink-2);white-space:nowrap;
}
.hf-why--dates{border-color:var(--coral);color:var(--coral);}
.hf-why--guests{border-color:var(--gold);color:var(--ink);}
.hf-why--pets{border-color:var(--blue);color:var(--blue);}
/* t_368f397d (20.09.2026): видимый блок причин скрытия под строкой сортировки.
   Старое место (.hf-datenote) скрыто display:none с 18.09 и снимать это скрытие нельзя —
   вернётся задвоенная шапка. Mobile-first: на 375px каждая причина своей строкой, чип и
   действие в одну линию с переносом; сетку карточек блок не двигает, потому что стоит до неё. */
.hf-whyline{display:flex;flex-direction:column;gap:var(--sp-2);margin:0 0 var(--sp-3);}
.hf-whyline__head{font-size:var(--fs-12);font-weight:700;color:var(--ink);}
.hf-whyline__row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;}
.hf-why__act{
  appearance:none;border:none;background:none;padding:0;margin:0;cursor:pointer;
  font:inherit;font-size:var(--fs-12);font-weight:600;color:var(--blue);
  text-decoration:underline;text-underline-offset:2px;
  min-height:var(--tap);display:inline-flex;align-items:center;
}
.hf-why__act:hover{opacity:.8;}
/* t_1ebccc0a: признак питомцев в свёрнутой пилюле — flex:none, чтобы не попасть под
   ellipsis соседней .hf-sp-2 и не исчезнуть первым на самом узком экране. */
.hf-sp-pets{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-2);
  padding:var(--sp-1) var(--sp-2);border-radius:999px;background:var(--blue);color:var(--on-accent);
  font-size:var(--fs-11);font-weight:600;line-height:1.2;white-space:nowrap;}
.hf-sp-pets svg{width:13px;height:13px;flex:none;}
@media (max-width:400px){
  .hf-sp-pets span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  .hf-sp-pets{padding:var(--sp-1) var(--sp-2);}
}
.hf-card__foot{margin-top:auto;padding-top:var(--sp-2);border-top:1px solid var(--line-2);display:flex;align-items:baseline;gap:var(--sp-1);}
/* t_619086ab (20.09.2026, вторая итерация): число найденных вариантов переехало из
   середины карточки в подвал, в одну строку с ценой. Раньше оно стояло отдельной
   крупной строкой между чипами и ценой и разрывало карточку пополам.
   Прижато вправо через margin-left:auto, выровнено по базовой линии цены.
   Коралловая точка-маркер сохранена от прежнего .hf-card__left — она отличает
   результат ПОИСКА от постоянных свойств отеля. */
.hf-card__avail{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:var(--sp-2);
  font:700 var(--fs-12)/1.1 var(--font);color:var(--ink);white-space:nowrap;
}
.hf-card__avail::before{
  content:"";flex:none;width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--coral);
}
/* Две формы подписи. Карточка на 375px — это ~175 CSS-px (сетка 2 в ряд), и
   «5 вариантов» рядом с «от 10 291 ₽» туда не влезает: строка переносится и подвал
   разъезжается. Поэтому на узких экранах «5 вар.», от 640px — полная форма.
   Полный текст всегда остаётся в title/aria-label, смысл не теряется. */
.hf-card__avail-full{display:none;}
.hf-card__avail-short{display:inline;}
@media (min-width:640px){
  .hf-card__avail-full{display:inline;}
  .hf-card__avail-short{display:none;}
}
.hf-card__oldprice{font-weight:500;font-size:var(--fs-12);color:var(--muted-2);text-decoration:line-through;}
.hf-card__price{font-size:var(--fs-15);font-weight:700;line-height:1.1;color:var(--ink);}
.hf-card__price span{display:block;font-size:var(--fs-11);font-weight:500;color:var(--muted);margin-top:var(--sp-1);}
.hf-card__price--muted{color:var(--muted);font-weight:600;}

.hf-empty{display:none;text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--muted);}
.hf-empty.hf-on{display:block;}
.hf-empty svg{width:52px;height:52px;stroke:var(--muted-3);fill:none;stroke-width:1.5;margin-bottom:var(--sp-4);}
.hf-empty b{display:block;font-size:var(--fs-17);color:var(--ink);margin-bottom:var(--sp-2);}
/* t_02f23a82: выходы из пустого состояния. Здесь ТОЛЬКО раскладка — сами кнопки
   берутся из UI-кита (.vs-btn с ролями), своих видов кнопок не заводим (канон
   t_69476ef4). На 375px кнопки идут колонкой во всю ширину: две-три штуки в строку
   на телефоне не влезают, а тап-зона обязана быть >= 44px. */
.hf-empty__acts{display:flex;flex-direction:column;gap:var(--sp-3);align-items:stretch;margin-top:var(--sp-5);max-width:320px;margin-left:auto;margin-right:auto;}
/* t_629909ba: flex-wrap обязателен. Строка задумывалась под 2-3 кнопки, а выходов стало
   до семи (к трём URL-кнопкам добавились «ближайшие даты», «радиус 15 км» и до трёх
   соседних городов). Без переноса ряд не переносится, а СЖИМАЕТСЯ: на 1024px подписи
   ломались в три строки, а первая кнопка уезжала за левый край области списка. */
@media (min-width:640px){.hf-empty__acts{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:none;}}
/* t_02f23a82: ошибка загрузки выдачи. Раньше .catch() у AJAX делал полную
   перезагрузку страницы — по канону MOBILE-FIRST это дефект P0/P1, а не мелочь. */
.hf-error{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--muted);}
.hf-error b{display:block;font-size:var(--fs-17);color:var(--ink);margin-bottom:var(--sp-2);}
.hf-error .vs-btn{margin-top:var(--sp-4);}

.hf-toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + var(--safe-b) + 14px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--on-accent);padding:var(--sp-3) var(--sp-6);border-radius:12px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999;box-shadow:0 12px 32px rgba(0,0,0,.24);max-width:min(90vw,460px);line-height:1.5;}
.hf-toast.hf-show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (min-width:1024px){.hf-toast{bottom:26px;}}

/* ---------- BOTTOM BAR (только мобиле, скрыт ≥1024px — там десктоп-тулбар) ---------- */
.hf-bbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + var(--safe-b));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:var(--sh-3);}
.hf-bbar button{flex:1;height:var(--tap);border-radius:var(--r-m);font-size:var(--fs-15);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);}
/* t_69476ef4: «Фильтры» была тёмной заливкой (--ink), лупа поиска рядом — синей,
   «Карта» — белой с рамкой: три соседние кнопки одного уровня выглядели как три
   разных интерфейса. По диздоку (/js/vse-ui.README.md) главное действие на экране
   одно — это поиск (синяя лупа); «Фильтры» и «Карта» равноправны и обе вторичные,
   то есть белые с рамкой. Отличает их иконка и коралловый счётчик, а не заливка. */
.hf-bbar__f{background:var(--card);border:1px solid var(--line);color:var(--ink);}
.hf-bbar__badge{background:var(--coral);color:var(--on-accent);font-size:var(--fs-11);font-weight:700;min-width:19px;height:19px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;padding:0 var(--sp-1);}
.hf-bbar__m{background:var(--card);border:1px solid var(--line);color:var(--ink);}
.hf-bbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
@media (min-width:1024px){.hf-bbar{display:none;}}
/* ======================================================================
   t_3643192e (19.09.2026): ПОИСК ПЕРЕЕХАЛ В НИЖНЮЮ ПАНЕЛЬ (мобайл)
   Управление выдачей было разнесено по двум концам экрана: место и даты —
   сверху, фильтры и карта — снизу. Теперь всё в одной закреплённой панели.
   Саму пилюлю #hfOpenSearch НЕ дублируем разметкой, а физически переносим
   сюда скриптом (hotels-list-v2.js) — иначе разъедутся id и обработчики,
   а строка «город · даты · гости» перестанет обновляться.
   Высота панели теперь переменная (строка значений может переноситься),
   поэтому отступ контента считается от замеренной --hf-bbar-h.
   (Правка физически записана под задачей t_5c121ef3 — файл был залочен ею
   в той же сессии; по смыслу относится к t_3643192e.)
   ====================================================================== */
.hf-bbar{flex-wrap:wrap;}
/* justify-content задаём явно: общее правило .hf-bbar button центрирует содержимое
   (это верно для «Фильтры»/«Карта»), а пилюля поиска — текст слева, лупа справа. */
.hf-bbar .hf-searchpill{flex:0 0 100%;order:-1;height:auto;min-height:var(--tap);margin:0 0 var(--sp-1);justify-content:space-between;text-align:left;}
body.hf-search-in-bbar .hf-top-row{display:none;}

/* t_f2946159: bottombar и шторки живут ВНЕ .hf-wrap, поэтому ресеты .hf-wrap * и
   .hf-wrap button на них не распространяются — дублируем ресет явно для них. */
.hf-bbar *,.hf-sheet *,.hf-scrim{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* :where() обнуляет специфичность селектора — иначе этот ресет (0,1,1) перебивал бы
   заливку кнопок из правил с одним классом (0,1,0): .hf-btn--p и .hf-bbar__f выходили
   белыми вместо синей и тёмной. Проверено живьём на 390px. */
:where(.hf-bbar,.hf-sheet) button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.hf-sheet a{color:inherit;text-decoration:none;}
.hf-sheet h2,.hf-sheet h3{margin:0;letter-spacing:-.01em;}
/* t_f2946159: карточки .hf-card рендерит компонент bitrix:news.list, поэтому между этой
   секцией и карточками всегда стоит его обёртка .item-views.items-list1 — единственный
   прямой ребёнок секции. Грид на самой секции дал бы этой обёртке одну колонку из двух,
   то есть половину ширины экрана (замерено живьём: 139px вместо 173). Сетку держит
   flex-правило на .col-lg-3 из style.css компонента (50% / 33% по min-width, t_b0e40d65),
   а секция остаётся простым блоком. Это не временный костыль под старую карточку —
   так будет, пока список рендерится компонентом. */
.hf-cards.hf-cards--compwrap{display:block;}
.item-views.items-list1.hf-loading{opacity:.55;pointer-events:none;transition:opacity .15s;}
/* кнопка закрытия карты видна, только когда карта раскрыта на весь экран (body.hf-map-open) */
.hf-map-close{display:none;}

/* ---------- SHEETS (только мобиле) ---------- */
.hf-scrim{position:fixed;inset:0;background:rgba(18,33,59,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .22s;}
.hf-scrim.hf-on{opacity:1;pointer-events:auto;}
.hf-sheet{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-radius:var(--r-l) var(--r-l) 0 0;transform:translateY(101%);transition:transform .26s cubic-bezier(.32,.72,0,1);max-height:92vh;display:flex;flex-direction:column;}
.hf-sheet.hf-on{transform:none;}
.hf-sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:var(--sp-2) auto 0;flex:0 0 auto;}
.hf-sheet__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-2);flex:0 0 auto;}
.hf-sheet__head h2{font-size:var(--fs-17);}
.hf-sheet__close{width:36px;height:36px;border-radius:50%;background:var(--paper);font-size:16px;color:var(--ink);}
.hf-sheet__body{overflow-y:auto;padding:var(--sp-4);flex:1;-webkit-overflow-scrolling:touch;}
.hf-sheet__foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));border-top:1px solid var(--line-2);display:flex;gap:var(--sp-3);flex:0 0 auto;}
.hf-sheet__foot .hf-btn{flex:1;}
.hf-fgroup{padding:var(--sp-4) 0;border-bottom:1px solid var(--line-2);}
.hf-fgroup:last-child{border-bottom:none;}
.hf-fgroup h3{display:flex;align-items:center;min-height:44px;margin:0 0 var(--sp-1);padding:0;font-size:var(--fs-14);font-weight:600;color:var(--ink);}
.hf-sheet .hf-fld{border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-2) var(--sp-3);}
.hf-sheet .hf-fld label{display:block;font-size:var(--fs-11);color:var(--muted);font-weight:600;}
.hf-sheet .hf-fld input{border:none;outline:none;font:inherit;font-size:var(--fs-15);font-weight:600;width:100%;background:none;color:var(--ink);}
/* t_f2946159: поля виджетов Воронова (даты/гости) внутри шторки поиска — приводим к виду
   соседних .hf-fld, иначе на живой проверке они выглядели голым текстом без рамки рядом с
   обрамлёнными «Куда едем» и «Название отеля». Сам виджет не трогаем, только оболочка. */
.hf-sheet .sc-field{position:relative;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--sp-2) var(--sp-3);min-height:var(--tap);display:flex;flex-direction:column;justify-content:center;cursor:pointer;}
.hf-sheet .sc-field__label{font-size:var(--fs-11);color:var(--muted);font-weight:600;}
.hf-sheet .sc-field__value{font-size:var(--fs-15);font-weight:600;color:var(--ink);}
.hf-sheet .sc-field__value.placeholder{color:var(--muted-2);font-weight:500;}
.hf-sheet .hf-row2{display:flex;gap:var(--sp-3);}
.hf-sheet .hf-row2 .hf-fld{flex:1;}
.hf-sheet .hf-select{width:100%;min-height:var(--tap);padding:var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-4);border-radius:var(--r-m);border:1px solid var(--line);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;font-size:var(--fs-14);font-weight:600;color:var(--ink);font-family:inherit;}
.hf-price-apply{margin-top:var(--sp-3);width:100%;min-height:var(--tap);border-radius:var(--r-m);border:1px solid var(--line) !important /*!?*/;background:var(--card) !important /*!?*/;font-size:var(--fs-14);font-weight:600;}
.hf-btn{height:var(--tap);border-radius:var(--r-m);font-size:var(--fs-15);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);}
.hf-btn--p{background:var(--blue);color:var(--on-accent);}
.hf-btn--p:active{background:var(--blue-deep);}
.hf-btn--s{background:var(--card) !important /*!JS*/;border:1px solid var(--line);color:var(--ink);opacity:.5;pointer-events:none;}
.hf-btn--s.hf-on{opacity:1;pointer-events:auto;}

/* ---------- КАРТА ---------- */
.hf-map-pane{display:none;}
.hf-map-close{display:none;}
@media (min-width:1024px){
  .hf-layout{display:grid;grid-template-columns:1fr 420px;gap:var(--sp-6);align-items:start;}
  .hf-map-pane{display:block;position:sticky;top:88px;height:calc(100vh - 110px);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);}
}
body.hf-map-open{overflow:hidden;}
body.hf-map-open .hf-map-pane{display:block;position:fixed;inset:0;z-index:90;height:100vh;border-radius:0;}
body.hf-map-open .hf-map-close{display:flex;position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:95;width:40px;height:40px;border-radius:50%;background:var(--card);border:none;align-items:center;justify-content:center;font-size:18px;color:var(--ink);box-shadow:0 6px 18px rgba(18,33,59,.22);}
.hf-map-frame{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:var(--map-bg);}

/* ---------- ФИЛЬТР ПО ДАТАМ (t_f018e3c7) ---------- */
/* Выбранные даты в плашке поиска: пока дат нет — приглушённый плейсхолдер (как было),
   когда даты применены — обычный текст, чтобы плашка не выглядела пустой и «сброшенной». */
.hf-sp-2--set{color:var(--ink);font-weight:600;}
/* Строка «N отелей со свободными номерами на 3 ночи» над списком. */
.hf-datenote{margin:0 0 var(--sp-2);font-size:var(--fs-13,13px);line-height:1.35;color:var(--ink);display:none;}
.hf-datenote b{font-weight:700;}
.hf-datenote__dim{color:var(--muted);}

/* ---------- МУЛЬТИВЫБОР И ФИЛЬТРЫ ПО ВАРИАНТАМ РАЗМЕЩЕНИЯ (t_5c121ef3, 21.09.2026) ----------
   Чипы в шторке «Фильтры» переносятся по строкам (в отличие от ленты .hf-chips выше, которая
   скроллится вбок): выбор нескольких значений должен быть виден целиком, без горизонтального
   скролла в шторке. Аккордеон — нативный <details>: работает без JS, доступен с клавиатуры. */
.hf-mchips{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.hf-mchips .hf-chip{height:auto;min-height:36px;padding:var(--sp-2) var(--sp-3);white-space:normal;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);}
.hf-mchips .hf-chip:focus-visible,.hf-acc summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.hf-chip__n{margin-left:var(--sp-1);font-weight:500;font-size:var(--fs-12);color:var(--muted);}
.hf-chip.hf-active .hf-chip__n{color:inherit;opacity:.75;}
#hfGrpRooms .hf-mchips{margin-bottom:var(--sp-2);}
.hf-acc{border-top:1px solid var(--line-2);}
.hf-acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px;padding:0;cursor:pointer;list-style:none;font-size:var(--fs-14);font-weight:600;color:var(--ink);}
.hf-acc summary::-webkit-details-marker{display:none;}
.hf-acc summary > span:first-child{flex:1;min-width:0;}
/* custom.css темы задаёт ВСЕМ <details> «расчёт цены»: flex-колонку с summary в конец (order:2),
   подчёркнутую ссылку и текст «Расчет цены / Скрыть расчет» в summary::after. Здесь это всё гасим. */
.hf-acc{display:block;margin:0;}
.hf-acc > *,.hf-acc > summary{order:0;}
.hf-acc summary{text-decoration:none;color:var(--ink);}
.hf-acc summary::after,.hf-acc[open] summary::after{content:"";}
.hf-mchips .hf-chip[hidden]{display:none;}
.hf-mchips .hf-chip--more{color:var(--blue);border-style:dashed !important /*!A*/;}
/* t_6712e972 (23.09.2026, Данил: «фильтры отстало ощущаются»): здесь стояло display:none —
   стрелочка-индикатор аккордеона была нарисована и тут же скрыта. Без неё <summary> с
   cursor:default выглядел неживым текстом, а не сворачиваемым заголовком. */
.hf-acc summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-left:auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;}
.hf-acc[open] summary::after{transform:rotate(-135deg);}
.hf-acc__n{flex:0 0 auto;min-width:20px;height:20px;padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--blue);color:var(--on-accent);font-size:var(--fs-12);font-weight:700;line-height:20px;text-align:center;}
.hf-acc__n[hidden]{display:none;}
.hf-acc__body{padding:0 0 var(--sp-3);}
@media (prefers-reduced-motion:reduce){.hf-acc summary::after{transition:none;}}

/* t_a7c1e79b (26.09.2026): бывший inline style у #hfHomeReset (info/brands/index.php). */
.hf-reset-wrap{flex:1;display:flex;}

/* t_18eed909 / t_52842884 (26.09.2026, аудит): (1) бейдж фильтров при нуле — атрибут hidden
   перебивался display:inline-flex/flex, горел коралловый «0»; (2) название отеля — до 2 строк
   (было 1 с многоточием: «1-й Саратовский…»), высота под 2 строки, чтобы ряд не прыгал;
   (3) номерная пагинация визуально скрыта, пока идёт лента первой страницы (ссылки в DOM). */
.hf-desk-filter-badge[hidden],.hf-bbar__badge[hidden]{display:none;}
.hf-card__nm{-webkit-line-clamp:2;min-height:2.5em;}
.hf-pag--feed{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ======================================================================
   t_5112a27a (29.09.2026): СИСТЕМА ТИПОГРАФИКИ И ОТСТУПОВ v2 — как на детальной отеля.
   Источник правды — токены кита (/js/vse-ui.css: --vs-fs-h1/h2/h3, --vs-sec/--vs-h2/
   --vs-blk/--vs-el, шторки — --vs-s-*), значения сами меняются на ≥901px. Постраничные
   --hf-* ниже — ТОЛЬКО алиасы (как --hd-* у детальной): шаг правится в ките, меняется везде.
   Было (замер 375): H1 — шрифт темы Ubuntu 20/500, у детальной Space Grotesk 26/700;
   название в карточке 14/600, мета 12 — мельче, чем подписи детальной (13).
   ====================================================================== */
.hf-wrap{--hf-sec:var(--vs-sec);--hf-h2:var(--vs-h2);--hf-blk:var(--vs-blk);--hf-el:var(--vs-el);
  --hf-fs-h1:var(--vs-fs-h1);--hf-fs-h2:var(--vs-fs-h2);--hf-fs-h3:var(--vs-fs-h3);}
/* заголовки списка — шрифт кита, не темы (Aspro задаёт h1–h3 свой font-family) */
.hf-wrap h1,.hf-wrap h2,.hf-wrap h3,.hf-sheet h2,.hf-sheet h3{font-family:var(--font-display);}
.hf-wrap .hf-lhead{padding:var(--hf-blk) var(--sp-4) var(--hf-el);}
@media (min-width:600px){.hf-wrap .hf-lhead{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
.hf-wrap .hf-lhead h1{font-size:var(--hf-fs-h1);line-height:1.18;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0;}
.hf-wrap .hf-sortrow{padding-bottom:var(--hf-blk);font-size:var(--fs-14);}
/* шапки шторок — плотность шторки (--vs-s-*), как у шторок детальной */
.hf-sheet__head h2{font-size:var(--vs-s-fs-t);font-weight:700;line-height:1.2;}
.hf-fgroup h3,.hf-chips-label{font-family:var(--font);}
/* карточка: название — как у карточки варианта на детальной (Space Grotesk 600, 15 моб / 17 деск),
   подписи 13, цена — шрифт цен (--font-display) */
.hf-card__nm{font-family:var(--font-display);font-size:var(--fs-15);font-weight:600;line-height:1.25;letter-spacing:-.01em;}
@media (min-width:901px){.hf-card__nm{font-size:var(--fs-17);}}
.hf-card__facts,.hf-card__rate,.hf-card__rooms{font-size:var(--fs-13);}
.hf-card__price{font-family:var(--font-display);font-size:var(--fs-17);}
.hf-card__price span{font-family:var(--font);font-size:var(--fs-12);}
/* t_1678b601: страница не уезжает вбок (clip, не hidden — hidden ломает sticky), как на детальной */
html:has(.hf-wrap),html:has(.hf-wrap) body{overflow-x:clip;}

/* t_1d67484a (29.09.2026): служебные заголовки шторок («Поиск жилья», «Фильтры», «Сортировка»,
   «Цена за ночь», «Тип объекта»…) — больше не h2/h3 (засоряли структуру страницы для
   поисковика), а div с role=heading. Вид — прежний: копия правил h2/h3 шторок. */
.hf-h2,.hf-h3{margin:0;letter-spacing:-.01em;font-family:var(--font-display);}
.hf-sheet__head .hf-h2{font-size:var(--vs-s-fs-t);font-weight:700;line-height:1.2;color:var(--ink);}
.hf-fgroup .hf-h3{display:flex;align-items:center;min-height:44px;margin:0 0 var(--sp-1);padding:0;font-family:var(--font);font-size:var(--fs-14);font-weight:600;color:var(--ink);}
.hf-chips-label.hf-h3{font-family:var(--font);font-size:var(--fs-14);font-weight:600;color:var(--ink);}
@media (min-width:1024px){.hf-desktop-toolbar .hf-fgroup .hf-h3{margin:0;min-height:0;font-size:var(--fs-12);font-weight:600;color:var(--muted);white-space:nowrap;}}
/* название отеля в карточке — теперь h3 (иерархия H1 → H2 выдачи → H3 отеля, как варианты на детальной) */
.hf-card h3.hf-card__nm{margin:0;}

/* t_09455061 (29.09.2026): ШАПКА СПИСКА ПО СХЕМЕ ДЕТАЛЬНОЙ — крошки → H1 → мета → ряд вкладок.
   Крошки = .hd-crumbs детальной один в один (мобила: одна пилюля «‹ уровень выше»,
   ≥901px — полная цепочка), кандидат в кит vs-crumbs (t_900ba1cc). Мета — как .hd-meta. */
.hf-crumbs{display:flex;flex-wrap:nowrap;align-items:center;gap:0 var(--sp-1);margin:0 0 var(--hf-blk);overflow:hidden;white-space:nowrap;font-size:var(--fs-13);line-height:1.4;color:var(--muted);}
.hf-crumbs__a{display:inline-flex;align-items:center;height:26px;padding:0 var(--sp-3);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2)!important /*!A*/;text-decoration:none!important /*!A*/;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s;}
.hf-crumbs__a:hover{background:var(--hover-bg);color:var(--blue)!important /*!?*/;}
.hf-crumbs__sep{color:var(--muted);opacity:.7;padding:0 var(--sp-1);}
.hf-crumbs__cur{color:var(--ink);}
@media (max-width:900px){
  .hf-crumbs__sep,.hf-crumbs__cur{display:none;}
  .hf-crumbs__a::before{content:'‹';margin-right:var(--sp-2);font-size:16px;line-height:1;}
}
.hf-wrap .hf-lhead h1{margin:0 0 var(--hf-el);}
.hf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) 0;margin:0 0 var(--hf-blk);font-size:var(--fs-14);line-height:1.3;color:var(--muted);}
.hf-meta .hf-cnt{font-size:var(--fs-14);color:var(--muted);}
.hf-meta .hf-cnt b,.hf-meta__from b{color:var(--ink);font-weight:700;font-family:var(--font-display);}
.hf-meta__from::before{content:'';display:inline-block;width:3px;height:3px;margin:0 var(--sp-2);border-radius:50%;background:currentColor;opacity:.55;vertical-align:middle;}
.hf-lhead .hf-types{padding:0;margin:0;max-width:none;}
@media (min-width:600px){.hf-lhead .hf-types{padding:0;}}
.hf-wrap .hf-lhead{padding-bottom:var(--hf-blk);}
.hf-wrap .hf-sortrow{justify-content:flex-start;padding-top:0;}
/* закреплённая шапка без вкладок пуста на мобиле (поиск уехал в нижнюю панель) и на десктопе
   (строка поиска в шапке Aspro) — прячем, чтобы не висела полоска с рамкой */
body.hf-search-in-bbar .hf-top{display:none;}
@media (min-width:992px){.hf-top{display:none;}}

/* t_e220f330 (29.09.2026): НИЖНЯЯ ПАНЕЛЬ как у детальной (.hd-mobile-bar + .hd-mbq): один ряд
   [даты | гости] + Фильтры + Карта, белая, рамка сверху, safe-area. Кандидат в кит vs-bbar v2. */
.hf-bbar{flex-wrap:nowrap;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));background:var(--card);backdrop-filter:none;box-shadow:none;border-top:1px solid var(--line);}
.hf-mbq{flex:1 1 auto;min-width:0;display:flex;height:48px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);overflow:hidden;}
.hf-bbar .hf-mbq__b{flex:1 1 0;min-width:0;height:auto;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:0 var(--sp-3);border:0;border-radius:0;background:none;color:var(--ink);font:600 var(--fs-14)/1.1 var(--font);white-space:nowrap;}
.hf-bbar .hf-mbq__b+.hf-mbq__b{flex:0 1 auto;border-left:1px solid var(--line);}
.hf-bbar .hf-mbq__b:active{background:var(--paper);}
.hf-bbar .hf-mbq__b svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.8;}
.hf-mbq__b span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.hf-bbar .hf-bbar__f{flex:0 0 auto;height:48px;padding:0 var(--sp-3);border-radius:var(--r-m);}
.hf-bbar .hf-bbar__m{flex:0 0 48px;width:48px;height:48px;padding:0;border-radius:var(--r-m);}
/* до 400px «Фильтры» — иконка + счётчик (как у карты), чтобы даты «13–15 окт» не обрезались */
@media (max-width:400px){.hf-bbar .hf-bbar__t{display:none;}.hf-bbar .hf-bbar__f{flex:0 0 auto;min-width:48px;padding:0 var(--sp-3);}}
/* поиск больше не в панели — закреплённая шапка с пилюлей на мобиле не нужна вовсе */
@media (max-width:991px){.hf-top{display:none;}}
/* строка крошек + кнопка города */
.hf-crumbrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:0 0 var(--hf-blk);}
.hf-crumbrow .hf-crumbs{margin:0;min-width:0;}
.hf-citybtn{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);height:26px;padding:0 var(--sp-3);border:0;border-radius:var(--r-pill);background:var(--blue-soft);color:var(--blue);font:600 var(--fs-13)/1 var(--font);cursor:pointer;}
.hf-citybtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;}
@media (min-width:992px){.hf-citybtn{display:none;}}
.hf-crumbs__short{display:none;}
@media (max-width:991px){.hf-crumbs__short{display:inline;}.hf-crumbs__full{display:none;}}

/* t_59b991be: перелинковка под выдачей — «Отели у метро / по районам / у вокзалов».
   Секции по системе отступов v2, пункты — пилюли (вид vs-chip), метро — точка цвета ветки
   (--lc из справочника subway_point_hl, как .hd-meta__metro на детальной). */
.hf-seo{padding:var(--hf-sec) var(--sp-4) 0;border-top:1px solid var(--line);margin-top:var(--hf-sec);}
@media (min-width:600px){.hf-seo{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
.hf-seo__sec+.hf-seo__sec{margin-top:var(--hf-sec);}
.hf-wrap .hf-seo__h{font-size:var(--hf-fs-h2);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 var(--hf-h2);}
.hf-seo__list.vs-ul{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none;}
.hf-seo__list.vs-ul>li{margin:0;padding:0;}
.hf-seo__list.vs-ul>li::before{content:none;display:none;}
.hf-seo__a{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font-size:var(--fs-14);font-weight:500;text-decoration:none;}
.hf-seo__a:hover{border-color:var(--line-hover);color:var(--blue);}
.hf-seo__a i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lc,var(--muted-3));}
.hf-seo__more{margin-top:var(--sp-2);}
.hf-seo__more summary{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--blue);font-size:var(--fs-14);font-weight:600;cursor:pointer;list-style:none;}
.hf-seo__more summary::-webkit-details-marker{display:none;}
/* t_ad782715: FAQ — аккордеон на details (без JS), вид — ячейки кита, воздух v2 */
.hf-faq{padding:var(--hf-sec) var(--sp-4) 0;}
@media (min-width:600px){.hf-faq{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
.hf-faq__i{border-bottom:1px solid var(--line);}
.hf-faq__i:first-of-type{border-top:1px solid var(--line);}
.hf-faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-3) 0;font:600 var(--fs-15)/1.35 var(--font);color:var(--ink);cursor:pointer;list-style:none;}
.hf-faq__q::-webkit-details-marker{display:none;}
.hf-faq__q::after{content:''!important /*!A*/;display:block!important /*!JS*/;flex:none;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:calc(var(--sp-1) * -1);transition:transform .2s;}
.hf-faq__i[open] .hf-faq__q::after{transform:rotate(-135deg);margin-top:var(--sp-1);}
.hf-faq__a{padding:0 0 var(--sp-4);font-size:var(--fs-15);line-height:1.55;color:var(--ink-2);}
.hf-faq__a a{color:var(--blue);}
@media (prefers-reduced-motion:reduce){.hf-faq__q::after{transition:none;}}
/* ГРАБЛИ ТЕМЫ (шаблонный CSS Aspro, на ВСЕХ details сайта): details{display:flex;flex-direction:column;
   margin 10px 0} details>*{order:1} details>summary{order:2;text-decoration:underline;color:theme}
   summary::after{content:"Расчет цены"} — вопрос оказывался ПОД ответом, подчёркнутым, с чужой подписью.
   Сбрасываем на своих details (FAQ, «Ещё N»). */
.hf-faq__i,.hf-seo__more{display:block;margin:0;}
.hf-faq__i>summary,.hf-seo__more>summary{order:0;text-decoration:none;}
.hf-faq__i>summary{color:var(--ink);font-size:var(--fs-15);}
.hf-faq__i>*,.hf-seo__more>*{order:0;}
.hf-faq__i:first-of-type{margin-top:0;}
.hf-seo__more summary::after,.hf-seo__more summary::before{content:none;display:none!important /*!JS*/;}
.hf-seo__more[open] summary{display:none;}

/* t_46d717a3: счётчик во вкладке типа + выход в каталог квартир */
.hf-type{gap:var(--sp-2);}
.hf-type__n{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;}
.hf-type[aria-selected="true"] .hf-type__n{color:inherit;opacity:.7;}
.hf-type--out{border-style:dashed;color:var(--blue);}
/* t_0afd5560: «Отзывы об отелях» — лента карточек .vs-rvcard с прокруткой вбок и доводкой */
.hf-rv{padding:var(--hf-sec) 0 0;}
.hf-rv>.hf-seo__h{padding:0 var(--sp-4);}
.hf-rv__list.vs-ul{display:flex;gap:var(--sp-3);margin:0;padding:0 var(--sp-4) var(--sp-2);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--sp-4);scrollbar-width:none;overscroll-behavior-x:contain;}
.hf-rv__list.vs-ul::-webkit-scrollbar{display:none;}
.hf-rv__list.vs-ul>li::before{content:none;display:none;}
.hf-rv__i{flex:0 0 min(84%,340px);margin:0;padding:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:var(--sp-2);}
.hf-rv__hotel{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap);font:600 var(--fs-15)/1.3 var(--font);color:var(--ink);text-decoration:none;overflow:hidden;}
.hf-rv__hotel:hover{color:var(--blue);}
.hf-rv__hotel svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);}
.hf-rv__list.vs-ul{align-items:flex-start;}
.hf-rv__i .vs-rvcard__txt.vs-rvcard__txt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media (min-width:600px){.hf-rv>.hf-seo__h{padding:0 var(--sp-6);}.hf-rv__list.vs-ul{padding-left:var(--sp-6);padding-right:var(--sp-6);scroll-padding:0 var(--sp-6);}}
@media (prefers-reduced-motion:no-preference){.hf-rv__list.vs-ul{scroll-behavior:smooth;}}

/* t_ec113fe0: SEO-текст списка — обычное чтение, строка ≤ 70 знаков на десктопе */
.hf-text{padding:var(--hf-sec) var(--sp-4) 0;}
@media (min-width:600px){.hf-text{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
.hf-text__body{max-width:72ch;color:var(--ink-2);font:400 var(--fs-15)/1.6 var(--font);}
.hf-text__body p{margin:0 0 var(--sp-3);}
.hf-text__h3{margin:var(--sp-5) 0 var(--sp-2);font:600 var(--fs-17)/1.3 var(--font-display, var(--font));color:var(--ink);}
.hf-text__h3:first-child{margin-top:0;}

/* t_401f0740: число отелей в чипе «другого города» */
.hf-seo__n{margin-left:var(--sp-1);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;}
.hf-type--out svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:calc(var(--sp-1) * -1);}


/* ########## раздел: бывший hotels-list-v3.css ########## */
/* ==========================================================================
   Список отелей v3 (29.09.2026) — карточка и раскладка выдачи.
   t_181369c3 (карточка ← карточка варианта детальной), t_4d6569fe (раскладка + карта),
   t_19f611ae (метро), t_12f9ba70 (оценка словом), t_3b2ee782 (цена на даты), t_e5639578 (теги).
   Подключается ПОСЛЕ hotels-list-v2.css и перекрывает его. Только токены кита (/js/vse-ui.css).

   Моб (<600)   — одна колонка, вертикальная карточка: фото 16:10 → главное → цена + кнопка.
   600–1023     — две колонки вертикальных карточек.
   ≥1024        — карточка-строка (фото слева, главное, справа цена и кнопка), как вариант
                  на детальной; справа липкая карта (≥1280), 1024–1279 — карта по кнопке.
   ========================================================================== */

/* ---------- сетка выдачи ---------- */
.hf-cards.hf-cards--compwrap{display:block;padding-bottom:var(--sp-6);}
.hf-cards .items-list1,.hf-cards .group-content,.hf-cards .tab-pane{margin:0;padding:0;}
.hf-cards .hf-grid{display:grid !important /*!JS*/;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);margin:0;padding:0 var(--sp-4);}

.hf-cards .hf-grid>.hf-grid__i{min-width:0;display:flex;}
@media (min-width:600px){
  .hf-cards .hf-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 var(--sp-6);gap:var(--sp-5);}
}
@media (min-width:1024px){
  .hf-cards .hf-grid{grid-template-columns:minmax(0,1fr);padding:0;gap:var(--sp-4);}
}

/* ---------- карточка: общее ---------- */
.hf-card.hf-card{width:100%;height:auto;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:none;transition:box-shadow .2s ease,border-color .2s ease;}
@media (hover:hover){.hf-card.hf-card:hover{box-shadow:var(--sh-2);border-color:var(--line-hover);}}
.hf-card .hf-card__ph{aspect-ratio:16/10;flex:none;border-radius:0;}
.hf-card .hf-card__ph img{width:100%;height:100%;object-fit:cover;}
.hf-card .hf-card__body{flex:1;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-4);color:var(--ink);text-decoration:none;min-width:0;}
.hf-card .hf-card__body:hover{color:var(--ink);text-decoration:none;}
.hf-card .hf-card__main{display:flex;flex-direction:column;gap:6px;min-width:0;}

.hf-card h3.hf-card__nm{margin:0;min-height:0;font:600 var(--fs-17)/1.3 var(--font-display);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;}
.hf-card .hf-card__rate{min-height:0;display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);color:var(--muted);}
.hf-card .hf-card__rate .vs-rate{flex:none;}
.hf-card .hf-card__rword{font-weight:600;color:var(--ink);}
.hf-card .hf-card__rword+.hf-card__rcnt::before{content:'·';margin-right:var(--sp-2);color:var(--muted-2);}

.hf-card .hf-card__loc{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-14);color:var(--ink-2);}
.hf-card .hf-card__loc i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lc,var(--muted-3));}
.hf-card .hf-card__loc{flex-wrap:wrap;row-gap:0;}
.hf-card .hf-card__locn{min-width:0;}
.hf-card .hf-card__locm{flex:none;color:var(--muted);}
.hf-card .hf-card__locm::before{content:'·';margin-right:6px;color:var(--muted-2);}

.hf-card .hf-card__facts{min-height:0;font-size:var(--fs-14);line-height:1.4;color:var(--muted);white-space:normal;overflow:visible;}
.hf-card ul.hf-card__tags{display:flex;flex-wrap:wrap;gap:6px;min-height:0;margin:2px 0 0;padding:0;list-style:none;overflow:visible;}
.hf-card ul.hf-card__tags>li{margin:0;padding:3px 10px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line-2);font-size:var(--fs-12);font-weight:500;line-height:1.4;color:var(--ink-2);}
.hf-card ul.hf-card__tags>li::before{content:none;display:none;}

/* цена и кнопка */
.hf-card .hf-card__side{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"avail avail" "price cta" "pn cta";align-items:end;column-gap:var(--sp-3);row-gap:2px;padding-top:var(--sp-3);border-top:1px solid var(--line-2);}
.hf-card .hf-card__avail{grid-area:avail;margin-bottom:4px;font-size:var(--fs-13);font-weight:600;color:var(--green);}
.hf-card .hf-card__avail::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:middle;}
.hf-card .hf-card__price{grid-area:price;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin:0;font-size:inherit;color:var(--ink);}
.hf-card .hf-card__price b{font:700 var(--fs-20)/1.1 var(--font-display);white-space:nowrap;}
.hf-card .hf-card__price small{font-size:var(--fs-13);color:var(--muted);}
.hf-card .hf-card__price--muted small{font-size:var(--fs-14);}
.hf-card .hf-card__pnight{grid-area:pn;font-size:var(--fs-12);color:var(--muted);}
.hf-card .hf-card__cta{grid-area:cta;display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-m);background:var(--blue);color:var(--on-accent);font:600 var(--fs-14)/1 var(--font);white-space:nowrap;transition:background .15s ease;}
@media (hover:hover){.hf-card .hf-card__body:hover .hf-card__cta{background:var(--blue-deep);}}

/* ---------- ≥1024: карточка-строка ---------- */
@media (min-width:1024px){
  .hf-card.hf-card{flex-direction:row;min-height:220px;}
  .hf-card .hf-card__ph{aspect-ratio:auto;width:clamp(220px,32%,300px);align-self:stretch;min-height:220px;}
  .hf-card .hf-card__ph{position:relative;}
  .hf-card .hf-card__ph>.hf-card__track,.hf-card .hf-card__ph>img{position:absolute;inset:0;width:100%;height:100%;}
  .hf-card .hf-card__ph .hf-card__track img{height:100%;object-fit:cover;}
  .hf-card .hf-card__body{flex-direction:row;align-items:stretch;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);}
  .hf-card .hf-card__main{flex:1;gap:var(--sp-2);}
  .hf-card h3.hf-card__nm{font-size:var(--fs-20);}
  .hf-card .hf-card__side{margin:0;flex:none;width:164px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:2px;padding:0 0 0 var(--sp-5);border-top:0;border-left:1px solid var(--line-2);text-align:right;}
  .hf-card .hf-card__avail{margin:0 0 auto;}
  .hf-card .hf-card__price{justify-content:flex-end;}
  .hf-card .hf-card__price b{font-size:var(--fs-24);}
  .hf-card .hf-card__cta{margin-top:var(--sp-3);width:100%;}
}

/* ==========================================================================
   Карточка v4 (29.09.2026) — один в один элементы детальной (hotel-detail-v2.css):
   .hd-room--v3 (рамка 18px, подъём на ховер, подвал «цена | кнопка»), шапка (.hd-meta, .hd-badge),
   удобства (.hd-ampop__i). ≥1024 — как вариант на детальной: фото слева, справа тело и подвал.
   ========================================================================== */
.hf-card.hf-card{border-radius:var(--r-l);border:1px solid var(--line);box-shadow:none;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;}
@media (hover:hover){.hf-card.hf-card:hover{box-shadow:var(--sh-4);border-color:var(--line-hover);transform:translateY(-2px);}}
.hf-card .hf-card__body{gap:0;padding:0;}
.hf-card .hf-card__main{gap:0;padding:14px var(--sp-4) 0;}
.hf-card h3.hf-card__nm{margin:0 0 6px;font:600 var(--fs-17)/1.3 var(--font-display);letter-spacing:-.01em;}
.hf-card .hf-card__body:hover h3.hf-card__nm{color:var(--blue);}
.hf-card .hf-card__rate{gap:6px;margin:0 0 6px;font-size:var(--fs-13);color:var(--muted);}
.hf-card .hf-card__rate .vs-rate{font-size:12.5px;padding:2px 6px;}
.hf-card .hf-card__rword{font-size:var(--fs-14);font-weight:600;color:var(--ink);}
.hf-card .hf-card__loc{gap:5px;margin:0 0 8px;font-size:var(--fs-13);color:var(--muted);flex-wrap:wrap;}
.hf-card .hf-card__loc i{width:8px;height:8px;}
.hf-card .hf-card__locn{font-weight:600;color:var(--ink);}
.hf-card .hf-card__locm::before{content:'·';margin:0 5px 0 1px;}
/* бейджи сильных сторон — как .hd-badge под H1 детальной */
.hf-card .hf-card__badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.hf-card .hd-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--ink);font-size:var(--fs-13);line-height:1.2;font-weight:500;white-space:nowrap;}
.hf-card .hd-badge svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.hf-card .hd-badge--heart svg{fill:var(--green);stroke:none;}
.hf-card .hd-badge b{font-weight:700;color:var(--green);}
/* удобства пилюлями с иконками — как «Что есть в отеле» на детальной */
.hf-card ul.hf-card__am{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;}
.hf-card ul.hf-card__am>li{display:inline-flex;align-items:center;gap:6px;height:30px;margin:0;padding:0 11px 0 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font:500 var(--fs-13)/1 var(--font);color:var(--ink);white-space:nowrap;}
.hf-card ul.hf-card__am>li::before{content:none;display:none;}
.hf-card ul.hf-card__am svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
/* характеристики — как .hd-room__specs: через «·», вместимость жирно */
.hf-card .hf-card__specs{margin:0 0 2px;font-size:var(--fs-14);line-height:1.5;color:var(--ink-2);}
.hf-card .hf-card__specs i{font-style:normal;margin:0 7px;color:var(--muted-2);}
.hf-card .hf-card__specs .is-b{font-weight:600;color:var(--ink);}
/* подвал — как .hd-room__buy: цена слева, кнопка справа */
.hf-card .hf-card__side{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"avail avail" "price cta" "pn cta";align-items:center;column-gap:var(--sp-3);row-gap:2px;margin-top:12px;padding:12px var(--sp-4) var(--sp-4);border-top:1px solid var(--line-2);}
.hf-card .hf-card__price{font:inherit;column-gap:6px;}
.hf-card .hf-card__price b{font:700 21px/1.15 var(--font-display);}
.hf-card .hf-card__price small{font:500 var(--fs-13)/1.2 var(--font);color:var(--muted);}
.hf-card .hf-card__price .hf-card__from{font:500 var(--fs-14)/1 var(--font);}
.hf-card .hf-card__pnight{font:500 12.5px/1.2 var(--font);}
.hf-card .hf-card__cta{min-height:44px;padding:0 18px;border-radius:var(--r-m);font:600 14.5px/1 var(--font);}
@media (min-width:1024px){
  .hf-card.hf-card{display:grid;grid-template-columns:clamp(230px,34%,300px) minmax(0,1fr);min-height:0;}
  .hf-card .hf-card__ph{width:auto;min-height:230px;height:100%;contain:size;}
  .hf-card .hf-card__body{display:flex;flex-direction:column;padding:0;}
  .hf-card .hf-card__main{flex:1;padding:16px 20px 0;}
  .hf-card h3.hf-card__nm{font-size:19px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .hf-card .hf-card__side{width:auto;display:grid;margin:12px 0 0;padding:12px 20px 14px;border-left:0;border-top:1px solid var(--line-2);text-align:left;align-items:center;}
  .hf-card .hf-card__avail{margin:0 0 2px;}
  .hf-card .hf-card__price{justify-content:flex-start;}
  .hf-card .hf-card__price b{font-size:22px;}
  .hf-card .hf-card__cta{margin:0;width:auto;min-height:42px;}
}

/* ---------- раскладка страницы ≥1024: список + липкая карта ---------- */
@media (min-width:1024px){
  .hf-main{padding:0 var(--sp-6);}
  .hf-layout{display:block;}
  .hf-map-pane{display:none;}
}
@media (min-width:1280px){
  .hf-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,34%,560px);gap:var(--sp-6);align-items:start;}
  .hf-map-pane{display:block;position:sticky;top:var(--sp-4);height:calc(100vh - 32px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);}
}

/* ---------- ряд инструментов над выдачей: Фильтры слева, сортировка справа ---------- */
.hf-sortrow .hf-desk-filter-btn{display:none;}
@media (min-width:1024px){
  .hf-sortrow{padding:0 0 var(--sp-4);gap:var(--sp-3);}
  .hf-sortrow .hf-desk-filter-btn{position:static !important /*!JS*/;display:inline-flex !important /*!JS*/;align-items:center;gap:var(--sp-2);height:40px;margin:0;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card) !important /*!JS*/;box-shadow:none;font:600 var(--fs-14)/1 var(--font);color:var(--ink);cursor:pointer;}
  .hf-sortrow .hf-desk-filter-btn:hover{border-color:var(--line-hover);background:var(--hover-bg) !important /*!?*/;}
  .hf-sortrow .hf-sortbtn{height:40px;padding:0 var(--sp-4);font-size:var(--fs-14);margin-left:auto;}
  .hf-sortrow .hf-sort-wrap{margin-left:auto;}
}
/* ---------- карта v3 (t_d1a22e91): пин-цена, мини-карточка, «Искать в этой области» ---------- */
.hf-map-pane{position:relative;}
.hf-mpin{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 4px));padding:5px 9px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--sh-2);font:700 12px/1 var(--font);color:var(--ink);white-space:nowrap;cursor:pointer;transition:transform .12s ease,background .12s ease;}
.hf-mpin::after{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:inherit;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);transform:rotate(45deg);}
.hf-mpin:hover{background:var(--hover-bg);}
.hf-mpin.is-on{background:var(--ink);color:var(--on-accent);border-color:var(--ink);transform:translate(-50%,calc(-100% - 4px)) scale(1.12);}
.hf-mpin.is-on::after{border-color:var(--ink);}
.hf-mpin.is-np{color:var(--muted);padding:5px 8px;}
.hf-maparea[hidden],.hf-mapcard[hidden]{display:none !important /*!JS*/;}
.hf-maparea{position:absolute;top:var(--sp-3);left:50%;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:var(--sp-2);height:40px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-4);font:600 var(--fs-14)/1 var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;}
.hf-maparea svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.hf-mapcard{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:calc(var(--sp-3) + var(--safe-b));z-index:6;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-4);overflow:hidden;animation:hfCityUp .2s ease;}
.hf-mapcard__a{display:flex;gap:var(--sp-3);padding:var(--sp-2);color:var(--ink);text-decoration:none;}
.hf-mapcard__a:hover{color:var(--ink);text-decoration:none;}
.hf-mapcard__ph{flex:none;width:112px;height:96px;border-radius:var(--r-m);overflow:hidden;background:var(--stub-1);}
.hf-mapcard__ph img{width:100%;height:100%;object-fit:cover;display:block;}
.hf-mapcard__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 28px 2px 0;}
.hf-mapcard__nm{font:600 var(--fs-15)/1.25 var(--font-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hf-mapcard__rate{font-size:var(--fs-13);color:var(--muted);}
.hf-mapcard__rate .vs-rate{margin-right:4px;}
.hf-mapcard__pr{font-size:var(--fs-13);color:var(--muted);}
.hf-mapcard__pr b{font:700 var(--fs-17)/1 var(--font-display);color:var(--ink);}
.hf-mapcard__go{margin-top:auto;align-self:flex-start;font:600 var(--fs-14)/1 var(--font);color:var(--blue);}
.hf-mapcard__x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:50%;background:var(--paper);font-size:18px;line-height:1;color:var(--ink);cursor:pointer;}
@media (min-width:1280px){.hf-mapcard{left:auto;width:360px;}}
body.hf-map-open .hf-maparea{top:calc(14px + env(safe-area-inset-top));}

/* ---------- выбор города внутри хоста (t_fa3eb615) ---------- */
.hf-crumbrow{position:relative;}
.hf-citybtn[aria-expanded="true"]{background:var(--blue);color:var(--on-accent);}
.hf-citybtn{height:32px;padding:0 12px;}
/* на десктопе кнопка города нужна, только если у хоста есть другие города (иначе город — в поиске шапки) */
@media (min-width:992px){.hf-crumbrow:has(#hfCityPop) .hf-citybtn{display:inline-flex;}}
.hf-citypop[hidden]{display:none !important /*!JS*/;}
.hf-citypop{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;background:var(--scrim);}
.hf-citypop__panel{width:100%;max-height:78vh;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + var(--safe-b));box-shadow:var(--sh-3);animation:hfCityUp .22s ease;}
@keyframes hfCityUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.hf-citypop__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding:0 var(--sp-1) var(--sp-3);}
.hf-citypop__head b{font:600 var(--fs-17)/1.2 var(--font-display);color:var(--ink);}
.hf-citypop__head span{font-size:var(--fs-13);color:var(--muted);}
.hf-citypop .hf-citypop__q{width:100%;height:var(--tap) !important /*!A*/;box-shadow:none;margin:0 0 var(--sp-2);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);font:400 var(--fs-15)/1 var(--font);color:var(--ink);outline:none;}
.hf-citypop__q:focus{border-color:var(--blue);background:var(--card);}
.hf-citypop__list.vs-ul{margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain;}
.hf-citypop__list.vs-ul>li{margin:0;padding:0;}
.hf-citypop__list.vs-ul>li::before{content:none;display:none;}
.hf-citypop__a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:var(--tap);padding:0 var(--sp-3);border-radius:var(--r-s);color:var(--ink);font-size:var(--fs-15);text-decoration:none;}
.hf-citypop__a small{font-size:var(--fs-13);color:var(--muted);font-variant-numeric:tabular-nums;}
.hf-citypop__a:hover{background:var(--hover-bg);color:var(--ink);text-decoration:none;}
.hf-citypop__a.is-on{font-weight:600;background:var(--blue-soft);}
.hf-citypop__a--all{border-bottom:1px solid var(--line-2);border-radius:0;margin-bottom:var(--sp-1);color:var(--blue);}
@media (min-width:600px){
  .hf-citypop{position:absolute;inset:auto 0 auto auto;top:calc(100% + 6px);display:block;background:none;}
  .hf-citypop__panel{width:320px;max-height:440px;border-radius:var(--r-lg);border:1px solid var(--line);padding:var(--sp-3);box-shadow:var(--sh-4);animation:none;}
}
html.hf-citypop-open{overflow:hidden;}
@media (min-width:600px){html.hf-citypop-open{overflow:visible;}}

/* ---------- шторки v2 (t_3e24dbcf): ручка, без ✕ на мобиле, статус, «Сбросить» в шапке ---------- */
.hf-sheet{border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);}
.hf-sheet__grab{width:40px;height:5px;margin:10px auto 2px;background:var(--line-hover);border-radius:var(--r-pill);}
.hf-sheet__head{gap:var(--sp-3);padding:var(--sp-2) var(--sp-4) var(--sp-3);touch-action:none;}
.hf-sheet__ttl{flex:1;min-width:0;}
.hf-sheet__sub{margin-top:2px;font-size:var(--fs-13);color:var(--muted);min-height:1.3em;}
.hf-sheet__head .hf-reset-wrap .hf-btn--s{height:36px;padding:0 var(--sp-2);border:0 !important /*!A*/;background:none !important /*!JS*/;color:var(--blue);font:600 var(--fs-14)/1 var(--font);opacity:1;}
.hf-sheet__head .hf-reset-wrap .hf-btn--s:not(.hf-on){color:var(--muted-2);}
.hf-sheet .hf-sheet__close{display:none;}
.hf-sheet__foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));}
.hf-sheet__foot #hfFilterSheetApply{flex:1;min-height:48px;border-radius:var(--r-m);font-size:var(--fs-15);}
@media (min-width:1024px){
  .hf-sheet .hf-sheet__close{display:flex;align-items:center;justify-content:center;}
  .hf-sheet__grab{display:none;}
}

/* ---------- быстрые фильтры над выдачей (t_22ac7c54) ---------- */
.hf-quick{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;padding:0 var(--sp-4) var(--sp-4);margin:0;}
.hf-quick::-webkit-scrollbar{display:none;}
.hf-qchip{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font:500 var(--fs-14)/1 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.hf-qchip:hover{border-color:var(--line-hover);background:var(--hover-bg);color:var(--ink);text-decoration:none;}
.hf-qchip.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-accent);}
.hf-qchip.is-on::after{content:'×';margin-left:6px;font-size:16px;line-height:1;opacity:.8;}
@media (min-width:600px){.hf-quick{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
@media (min-width:1024px){.hf-quick{padding:0 0 var(--sp-4);flex-wrap:wrap;overflow:visible;}}

/* ==========================================================================
   t_2b4dc163: ОДИН ряд инструментов — Фильтры · Сортировка · быстрые фильтры.
   Пилюли — как удобства детальной (.hd-ampop__i): белые, тонкая рамка, красная иконка 16px.
   ========================================================================== */
.hf-tools{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:2px var(--sp-4);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hf-tools::-webkit-scrollbar{display:none;}
.hf-tools>.hf-sortrow,.hf-tools>.hf-quick{display:contents;}
.hf-tools .hf-desk-filter-btn,.hf-tools .hf-sortbtn,.hf-tools .hf-qchip,.hf-tools .hf-deskmap-btn{flex:none;display:inline-flex !important /*!JS*/;align-items:center;gap:7px;height:38px;min-height:38px;margin:0;padding:0 14px 0 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card) !important /*!JS*/;box-shadow:none;position:static !important /*!JS*/;font:500 var(--fs-14)/1 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.hf-tools .hf-desk-filter-btn:hover,.hf-tools .hf-sortbtn:hover,.hf-tools .hf-qchip:hover{border-color:var(--line-hover) !important /*!?*/;background:var(--hover-bg) !important /*!?*/;color:var(--ink);text-decoration:none;}
.hf-tools svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hf-tools .hf-qchip svg{stroke:var(--red);}
.hf-tools .hf-desk-filter-btn{font-weight:600;}
.hf-tools .hf-desk-filter-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-accent);font:700 var(--fs-12)/1 var(--font);}
.hf-tools .hf-desk-filter-badge[hidden]{display:none;}
.hf-tools .hf-sort-wrap{flex:none;position:relative;margin:0;}
.hf-tools .hf-sortbtn::after{content:'';width:7px;height:7px;margin:-3px 0 0 2px;border:solid var(--muted);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);}
.hf-tools .hf-qchip.is-on{background:var(--ink) !important /*!?*/;border-color:var(--ink) !important /*!?*/;color:var(--on-accent);}
.hf-tools .hf-qchip.is-on svg{stroke:var(--on-accent);}
.hf-tools .hf-qchip.is-on::after{content:'×';margin-left:2px;font-size:17px;line-height:1;opacity:.85;}
.hf-tools .hf-quick{margin:0;padding:0;}
.hf-tools .hf-deskmap-btn{display:none !important /*!A*/;}
@media (min-width:600px){.hf-tools{padding-left:var(--sp-6);padding-right:var(--sp-6);}}
@media (min-width:1024px){
  .hf-tools{flex-wrap:wrap;overflow:visible;padding:0;}
  .hf-tools .hf-sort-wrap{order:10;margin-left:auto !important /*!A*/;}
}
@media (min-width:1024px) and (max-width:1279px){.hf-tools .hf-deskmap-btn{display:inline-flex !important /*!JS*/;}}
/* кнопка фильтров теперь в ряду — из нижней панели убрана */
.hf-bbar #hfFiltersOpenBtn{display:none !important /*!JS*/;}

/* ==========================================================================
   t_6600d888: строка поиска десктопа под H1 — одна «капсула» из трёх полей + «Найти»
   (как поле «даты · гости» брони на детальной, только шире). Мелкий поиск в шапке Aspro скрыт.
   ========================================================================== */
.hf-dsearch{display:none;}
@media (min-width:1024px){
  .logo_and_menu-row .float_wrapper.hf-header-cal-outer,#hfHeaderSearchWrap{display:none !important /*!JS*/;}
  .hf-dsearch{position:relative;z-index:30;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) auto;align-items:stretch;margin:var(--sp-4) 0 var(--sp-4);padding:6px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--sh-2);}
  .hf-dsearch__city,.hf-dsearch .sc-field{position:relative;display:flex !important /*!JS*/;flex-direction:row;align-items:center;gap:10px;min-height:56px;height:auto;margin:0;padding:0 16px;border:0;border-radius:var(--r-m);background:none !important /*!JS*/;box-shadow:none;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:background .15s ease;}
  .hf-dsearch__city:hover,.hf-dsearch .sc-field:hover{background:var(--hover-bg) !important /*!?*/;}
  .hf-dsearch__slot{position:relative;display:flex;border-left:1px solid var(--line-2);}
  .hf-dsearch__slot>.sc-field{flex:1;}
  .hf-dsearch svg,.hf-dsearch .sc-field__icon svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .hf-dsearch .sc-field__icon{position:static !important /*!JS*/;display:flex;flex:none;margin:0;color:var(--red);}
  .hf-dsearch__city span{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .hf-dsearch__city small,.hf-dsearch .sc-field__label{position:static !important /*!JS*/;display:block;margin:0;font:500 var(--fs-12)/1 var(--font);color:var(--muted);text-transform:none;letter-spacing:0;}
  .hf-dsearch__city b,.hf-dsearch .sc-field__value{display:block;margin:3px 0 0;padding:0;font:600 var(--fs-15)/1.2 var(--font);color:var(--ink) !important /*!A*/;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;background:none;}
  .hf-dsearch .sc-field>.sc-field__label+.sc-field__value{margin-top:3px;}
  .hf-dsearch .sc-field{flex-wrap:wrap;align-content:center;}
  .hf-dsearch .sc-field__label,.hf-dsearch .sc-field__value{flex:0 0 calc(100% - 30px);}
  .hf-dsearch .sc-field__icon{align-self:center;}
  .hf-dsearch .sc-field{display:grid !important /*!A*/;grid-template-columns:20px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-content:center;}
  .hf-dsearch .sc-field__icon{grid-row:1 / 3;}
  .hf-dsearch__go{align-self:center;min-height:52px;margin-left:6px;padding:0 28px;border:0;border-radius:var(--r-l);background:var(--blue);color:var(--on-accent);font:600 var(--fs-15)/1 var(--font);cursor:pointer;transition:background .15s ease;}
  .hf-dsearch__go:hover{background:var(--blue-deep);}
  /* выпадашки календаря и гостей — от строки поиска, поверх выдачи */
  .hf-dsearch .sc-calendar-dropdown,.hf-dsearch .sc-guests-dropdown{top:calc(100% + 10px) !important /*!JS*/;z-index:60;}
  .hf-dsearch .hf-gsheet-head{display:none;}
  .hf-lhead .hf-citybtn{display:none !important /*!A*/;}
  .hf-dsearch>.hf-citypop{inset:auto auto auto 6px;top:calc(100% + 10px);}
}

/* ---------- фильтры (t_ea4a754c, t_5ad9cd14) ---------- */
/* t_6f5bcde0: #hfPriceApply убран из разметки — правило display:none больше не нужно */
#hfGrpRate{margin-bottom:var(--sp-5);}
#hfGrpRate .hf-chip{display:inline-flex;align-items:center;gap:6px;}
#hfGrpRate .hf-chip .vs-rate{padding:1px 6px;font-size:var(--fs-12);}

/* ---------- t_1678b601: тап-зоны ≥ --tap на мобиле (канон MOBILE-FIRST, детальная) ----------
   Чипы/пилюли растут до 44px. Маленькие пилюли в шапке (крошка «назад», город) визуально
   не меняются — зону нажатия расширяет прозрачный ::after. Поле цены: инпут занимает всю
   нижнюю часть рамки (раньше 24px), общая высота поля та же. */
@media (max-width:991px){
  .hf-chip,.hf-mchips .hf-chip,.hf-qchip,.hf-type,.hf-chip--more{height:auto;min-height:var(--tap);}
  .hf-tools .hf-desk-filter-btn,.hf-tools .hf-sortbtn,.hf-tools .hf-qchip,.hf-tools .hf-deskmap-btn{height:var(--tap);min-height:var(--tap);}
  .hf-sheet__head .hf-reset-wrap .hf-btn--s{height:var(--tap);}
  .hf-crumbs__a,.hf-citybtn{position:relative;}
  .hf-crumbs__a::after,.hf-citybtn::after{content:'';position:absolute;left:0;right:0;top:50%;height:var(--tap);transform:translateY(-50%);}
  .hf-sheet .hf-fld{padding:0 12px;}
  .hf-sheet .hf-fld label{padding-top:8px;}
  .hf-sheet .hf-fld input{height:var(--tap);padding:0;}
  .vrf-link{min-height:var(--tap);display:inline-flex;align-items:center;}
  .vrf-show-all{min-height:var(--tap);}
  .vrf-logo,.vrf-bottom-links a{display:inline-flex;align-items:center;min-height:var(--tap);}
  /* иконка кабинета в шапке темы и e-mail в подвале: зона нажатия растёт паддингом,
     отрицательный margin возвращает раскладку как была */
  .personal-link{display:inline-block;padding:13px;margin:-13px;}
  .footer_wrap .email a,.mobilemenu-v1 .email a{display:inline-block;padding:15px 0;margin:-15px 0;}
}

/* ---------- t_1678b601: мягкое появление выдачи после фильтра/дат/«Показать ещё» ----------
   Класс vs-in ставит hotels-list-v2.js только на НОВЫЕ карточки (не на первой загрузке — не
   мешаем LCP). Ступенька до 8 карточек, дальше без задержки. */
.hf-cards .vs-in{animation:vsIn var(--vs-dur,.28s) var(--vs-ease,cubic-bezier(.2,.7,.2,1)) both;animation-delay:calc(var(--i,0) * 35ms);}
#hfCount.vs-bump{animation:vsFade var(--vs-dur,.28s) var(--vs-ease,ease) both;}
@media (prefers-reduced-motion:reduce){.hf-cards .vs-in,#hfCount.vs-bump{animation:none;}}

/* ---------- t_47266357: «Расположение» в фильтрах (метро/район/вокзал/аэропорт) ---------- */
.hf-loc__grp+.hf-loc__grp{margin-top:var(--sp-4);}
.hf-loc__t{margin-bottom:var(--sp-2);font-size:var(--fs-14);font-weight:600;color:var(--ink-2);}
.hf-loc__q{width:100%;margin-bottom:var(--sp-2);}
.hf-loc__dot{flex:none;width:9px;height:9px;margin-right:6px;border-radius:50%;background:var(--lc,var(--muted-3));display:inline-block;}

/* ---------- t_9de664a2: «Показать 312 отелей» и выходы при 0 в шторке фильтров ---------- */
#hfFilterSheetApply.is-zero{opacity:.5;}
#hfFilterSheet .hf-sheet__foot{flex-direction:column;align-items:stretch;}
.hf-sheet__hint{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-14);color:var(--ink-2);animation:vsFade var(--vs-dur,.28s) var(--vs-ease,ease) both;}
.hf-sheet__hint[hidden]{display:none;}
.hf-sheet__hint-a{width:100%;justify-content:center;}

/* ---------- t_fd8d426e: «N км до центра Выборга» — вместо строки метро, когда метро рядом нет ---------- */
.hf-card .hf-card__loc--center{gap:var(--sp-1);}
.hf-card__locpin{width:14px;height:14px;flex:none;fill:none;stroke:var(--red);stroke-width:2;}
.hf-card .hf-card__loc--center .hf-card__locn{font-weight:500;}
.hf-card__locc{color:var(--ink-2);}

/* ---------- t_58120827: цвет-роли как на детальной (README «Цвет: роли») ----------
   Синий нажимают/выбранное, красный показывает (активная вкладка, пин объекта, иконки фактов),
   коралл — счётчики. Тёмная заливка --ink как «выбрано» на списке больше не используется. */
.hf-type[aria-selected="true"]{background:var(--red-soft);border-color:var(--red);color:var(--ink);}
.hf-type[aria-selected="true"] .hf-type__n,.hf-type[aria-selected="true"] span{color:inherit;}
.hf-qchip.is-on,.hf-tools .hf-qchip.is-on{background:var(--blue-soft) !important /*!?*/;border-color:var(--blue) !important /*!?*/;color:var(--blue-deep);}
.hf-tools .hf-qchip.is-on svg{stroke:var(--blue-deep);}
.hf-chip.hf-active,.hf-mchips .hf-chip.hf-active,#hfGrpRate .hf-chip.hf-active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-deep);}
.hf-sort-opt.hf-active,.hf-sort-opt[aria-checked="true"]{color:var(--blue-deep);}
.hf-tools .hf-desk-filter-badge{background:var(--coral);}
.hf-mpin.is-on{background:var(--red);border-color:var(--red);color:var(--on-accent);}
.hf-mpin.is-on::after{border-color:var(--red);}

.hf-deskmap-btn{display:none;}
@media (min-width:1024px) and (max-width:1279px){
  .hf-deskmap-btn{display:inline-flex;align-items:center;gap:var(--sp-2);height:40px;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font:600 var(--fs-14)/1 var(--font);color:var(--ink);cursor:pointer;}
  .hf-deskmap-btn svg{width:18px;height:18px;}
  .hf-deskmap-btn:hover{border-color:var(--line-hover);background:var(--hover-bg);}
}

/* t_20b310c8: ориентиры на карте списка — неброско, под пинами цен */
.hf-lm{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;pointer-events:auto;white-space:nowrap;}
.hf-lm i{flex:none;display:block;width:10px;height:10px;border-radius:50%;background:var(--lc,var(--muted));box-shadow:0 0 0 2px var(--card),0 1px 3px rgba(0,0,0,.25);}
.hf-lm span{display:none;font:500 11px/1 var(--font);color:var(--ink-2);text-shadow:0 0 3px var(--card),0 0 3px var(--card),0 0 3px var(--card);transform:translateX(2px);}
.hf-lm-z .hf-lm--m span,.hf-lm--c span,.hf-lm--a span,.hf-lm-z .hf-lm--r span{display:block;}
.hf-lm--r i,.hf-lm--a i{width:16px;height:16px;border-radius:4px;background:var(--ink-2) center/11px no-repeat;}
.hf-lm--r i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='6' y='3' width='12' height='13' rx='3'/%3E%3Cpath d='M6 11h12M9 20l-2 2M15 20l2 2'/%3E%3C/svg%3E");}
.hf-lm--a i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E");}
.hf-lm--c i{width:18px;height:18px;background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red),0 0 0 2px var(--card);position:relative;}
.hf-lm--c i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--red);}
.hf-lm--c span{font-weight:600;color:var(--red);}
.hf-lmtoggle{position:absolute;left:10px;bottom:44px;z-index:5;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);font:500 var(--fs-13)/1 var(--font);color:var(--muted);box-shadow:var(--sh-1);cursor:pointer;}
.hf-lmtoggle.is-on{color:var(--ink);}
.hf-lmtoggle::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--line);vertical-align:1px;}
.hf-lmtoggle.is-on::before{background:var(--red);box-shadow:10px 0 0 var(--blue);margin-right:16px;}

/* t_8d237f20: мало свободных на даты — плашка под выдачей с выходами (соседние даты / радиус / города) */
.hf-few{display:flex;flex-direction:column;gap:var(--sp-2);margin:var(--sp-4) 0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);}
.hf-few[hidden]{display:none;}
.hf-few__t{font:600 var(--fs-15)/1.35 var(--font);color:var(--ink);}
.hf-few__s{font-size:var(--fs-14);color:var(--muted);}
.hf-few__acts{display:flex;flex-direction:column;gap:var(--sp-2);}
.hf-few__acts:empty{display:none;}
@media (min-width:1024px){.hf-few__acts{flex-direction:row;flex-wrap:wrap;}}

/* t_570ea1c9: подсказки поля «Куда» — отели, метро, районы, вокзалы (hf-where.js) над списком городов */
.hf-where{display:flex;flex-direction:column;margin:0 0 var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line-2);max-height:46vh;overflow-y:auto;overscroll-behavior:contain;}
.hf-where[hidden]{display:none;}
.hf-where__h{padding:var(--sp-2) var(--sp-3) var(--sp-1);font:600 var(--fs-12)/1.2 var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.hf-where__h--wait{text-transform:none;letter-spacing:0;font-weight:400;}
.hf-where__a{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--tap);padding:0 var(--sp-3);border:0;border-radius:var(--r-s);background:none;color:var(--ink);font:400 var(--fs-15)/1.25 var(--font);text-align:left;text-decoration:none;cursor:pointer;}
.hf-where__a:hover,.hf-where__a:focus-visible{background:var(--hover-bg);color:var(--ink);text-decoration:none;outline:none;}
.hf-where__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hf-where__a small{flex:none;font-size:var(--fs-13);color:var(--muted);font-variant-numeric:tabular-nums;}
.hf-where__ic{flex:none;width:10px;height:10px;border-radius:50%;background:var(--muted);}
.hf-where__ic--hotel{width:18px;height:18px;border-radius:0;background:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21V7l9-4 9 4v14M9 21v-6h6v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21V7l9-4 9 4v14M9 21v-6h6v6'/%3E%3C/svg%3E") center/contain no-repeat;background-color:var(--ink-2,var(--muted));}
.hf-where__ic--rayon{border-radius:3px;background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--blue);}
.hf-where__ic--vokzal,.hf-where__ic--aeroport{border-radius:2px;background:var(--ink-2,var(--muted));}

/* ---------- t_217ee7d2 (30.09): компоновка под выдачей — как на детальной ----------
   Перелинковка (подборки, метро, районы, вокзалы, города) на телефоне была стеной чипов по 1–2 в строке:
   «у метро» 18 чипов + «Ещё 49» ≈ 500 px экрана. Теперь на телефоне — две строки с горизонтальной
   прокруткой (как удобства на детальной) и маской края; все ссылки остаются в разметке. */
@media (max-width:767.98px){
  .hf-seo__list.vs-ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);justify-content:start;gap:var(--sp-2);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * var(--sp-4));padding:0 var(--sp-4) 2px;scroll-padding:0 var(--sp-4);
    -webkit-mask-image:linear-gradient(90deg,black 88%,transparent);mask-image:linear-gradient(90deg,black 88%,transparent);}
  .hf-seo__list.vs-ul::-webkit-scrollbar{display:none;}
  .hf-seo__list.vs-ul>li{flex:none;}
  .hf-seo__a{white-space:nowrap;}
  /* «Ещё N» раскрывает вторую такую же ленту под первой */
  .hf-seo__more .hf-seo__list.vs-ul{margin-top:var(--sp-2);}
  /* секции плотнее по вертикали: воздух между секциями, а не внутри */
  .hf-wrap .hf-seo__h{margin-bottom:var(--vs-h2);}
}
/* подгрузка ленты: спиннер вместо серого слова «Загрузка…» */
#hfShowMoreBtn.is-busy{position:relative;color:transparent !important /*!?*/;opacity:1;}
#hfShowMoreBtn.is-busy::after{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--blue);animation:hfSpin .8s linear infinite;}
@keyframes hfSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){#hfShowMoreBtn.is-busy::after{animation-duration:2.4s;}}


/* ########## раздел: бывший hf-locmap.css ########## */
/* hf-locmap.css — t_772d17bc / t_5833e1e8 (30.09.2026): схема метро и карта районов в фильтре «Расположение».
   Черновик до утверждения Данилом; после «утверждаю» — перенос в /js/vse-ui.css (канон 26.09). Все цвета — токены кита. */

/* вход в шторке: вместо стены чипов */
.hf-loc__grp--map .hf-mchips, .hf-loc__grp--map .hf-loc__q { display: none; }
.hf-lmentry { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 4px 0 2px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), transform .12s ease; -webkit-tap-highlight-color: transparent; }
.hf-lmentry:active { transform: scale(.985); }
.hf-lmentry.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.hf-lmentry__ic { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--blue-soft) center/28px no-repeat; }
.hf-lmentry--metro .hf-lmentry__ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke-linecap='round' stroke-width='2.6'%3E%3Cpath d='M3 22 C8 14 12 10 25 6' stroke='%23E3262B'/%3E%3Cpath d='M4 8 C10 11 16 16 22 24' stroke='%231E4FA3'/%3E%3Cpath d='M2 15 H26' stroke='%231E8E5A'/%3E%3Ccircle cx='13.6' cy='14.4' r='3' fill='%23fff' stroke='%2312213B' stroke-width='1.8'/%3E%3C/svg%3E"); }
.hf-lmentry--rayon .hf-lmentry__ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3 5 L13 3 L15 12 L6 15 Z' fill='%231E4FA3'/%3E%3Cpath d='M13 3 L25 6 L23 14 L15 12 Z' fill='%23A9BEE3'/%3E%3Cpath d='M6 15 L15 12 L17 25 L5 24 Z' fill='%23D2DDF1'/%3E%3Cpath d='M15 12 L23 14 L25 23 L17 25 Z' fill='%236F8FCB'/%3E%3C/svg%3E"); }
.hf-lmentry__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hf-lmentry__tx b { font-size: 15px; font-weight: 700; line-height: 1.25; }
.hf-lmentry__tx small { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-lmentry.is-on .hf-lmentry__tx small { color: var(--blue); font-weight: 600; }
.hf-lmentry__go { flex: 0 0 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239AA1AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat; }

/* полноэкранный слой схемы */
html.hf-lm-open, html.hf-lm-open body { overflow: hidden; }
.hf-lm { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--paper);
  transform: translateY(24px); opacity: 0; transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease); }
.hf-lm.is-on { transform: none; opacity: 1; }
.hf-lm, .hf-lm.hf-lm { align-items: stretch; text-align: left; }
.hf-lm > * { box-sizing: border-box; width: 100%; }
.hf-lm .hf-lm__chip > span { display: inline; font-size: 14px; color: inherit; }
.hf-loc__grp--map > .hf-loc__t { display: none; }
.hf-lm__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px 4px; background: var(--card); }
.hf-lm__back { flex: 0 0 var(--tap); height: var(--tap); border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312213B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/24px no-repeat; }
.hf-lm__back:active { background-color: var(--line-2); }
.hf-lm__ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hf-lm__ttl b { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-lm__ttl small { font-size: 13px; color: var(--muted); }
.hf-lm__clr { border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 14px; min-height: var(--tap); padding: 0 6px; cursor: pointer; }
.hf-lm__q { position: relative; padding: 0 12px 10px; background: var(--card); box-shadow: 0 1px 0 var(--line); z-index: 2; }
.hf-lm__q input { width: 100%; height: 44px; font-size: 16px; padding: 0 14px; }
.hf-lm__sugg { position: absolute; left: 12px; right: 12px; top: 48px; background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh-4); overflow: hidden; }
.hf-lm__sg { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: none; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.hf-lm__sg + .hf-lm__sg { border-top: 1px solid var(--line-2); }
.hf-lm__sg i { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.hf-lm__sg span { flex: 1; }
.hf-lm__sg em { font-style: normal; color: var(--muted); font-size: 13px; }
.hf-lm__sg.is-on span { font-weight: 700; color: var(--blue); }
.hf-lm__seg { display: flex; gap: 4px; margin-top: 8px; padding: 3px; border-radius: var(--r-pill); background: var(--line-2); }
.hf-lm__seg button { flex: 1; height: 34px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 600 14px/1 var(--font, inherit); cursor: pointer; }
.hf-lm__seg button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.hf-lm__list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 12px; background: var(--card); }
.hf-lm__list[hidden], .hf-lm__stage[hidden] { display: none; }
.hf-lm__lh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 16px 6px; background: var(--card); font: 700 13px/1.2 var(--font, inherit); color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.hf-lm__lh i { width: 12px; height: 4px; border-radius: 2px; }
.hf-lm__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink); font: 500 15px/1.25 var(--font, inherit); text-align: left; cursor: pointer; }
.hf-lm__row[hidden] { display: none; }
.hf-lm__row i { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.hf-lm__row span { flex: 1; min-width: 0; }
.hf-lm__row em { font-style: normal; font-size: 13px; color: var(--muted); }
.hf-lm__row b { flex: 0 0 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; box-sizing: border-box; transition: background .15s, border-color .15s; }
.hf-lm__row.is-on span { font-weight: 700; }
.hf-lm__row.is-on b { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat; }
.hf-lm__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: radial-gradient(120% 90% at 50% 40%, var(--card) 0, var(--paper) 70%); }
.hf-lm__stage:active { cursor: grabbing; }
.hf-lm__svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.hf-lm__zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; border-radius: var(--r-m); background: var(--card); box-shadow: var(--sh-2); overflow: hidden; }
.hf-lm__zoom button { width: var(--tap); height: var(--tap); border: 0; background: none; font-size: 22px; color: var(--ink); cursor: pointer; }
.hf-lm__zoom button + button { border-top: 1px solid var(--line); }
.hf-lm__hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass);
  box-shadow: var(--sh-1); font-size: 12px; color: var(--ink-2); white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.hf-lm__hint.is-gone { opacity: 0; }
.hf-lm__foot { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: var(--sh-3); }
.hf-lm__sel { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
.hf-lm__sel::-webkit-scrollbar { display: none; }
.hf-lm__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue-deep); font-size: 14px; font-weight: 600; cursor: pointer; }
.hf-lm__chip i { width: 9px; height: 9px; border-radius: 50%; }
.hf-lm__chip::after { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230F2F66' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center/16px no-repeat; opacity: .7; }
.hf-lm__go { width: 100%; min-height: 48px; }
@keyframes hf-lm-in { from { transform: scale(.8); opacity: 0; } }

/* SVG: метро */
.hf-lm__line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity .35s var(--vs-ease), stroke-width .35s var(--vs-ease); }
.has-focus .hf-lm__line { opacity: .16; }
.has-focus .hf-lm__line.is-lit { opacity: 1; stroke-width: 6; }
.hf-lm__dot { fill: var(--card); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: fill .2s; }
.hf-lm__dot:not(.is-sel) { opacity: .55; stroke-width: 1.2; }
.has-focus .hf-lm__dot:not(.is-on) { opacity: .35; }
.hf-lm__dot.is-on { stroke-width: 3; opacity: 1; fill: var(--lc, var(--ink)); stroke: var(--card); }
.hf-lm__hit { fill: transparent; cursor: pointer; }
.hf-lm__lab { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 3px; stroke-linejoin: round; pointer-events: none;
  opacity: 0; transition: opacity .25s; }
.hf-lm--metro .hf-lm__lab { font-size: .92em; }
.hf-lm__lab.is-top, .z2 .hf-lm__lab { opacity: 1; }
.has-focus .hf-lm__lab, .has-focus .hf-lm__lab.is-top { opacity: 0; }
.z2 .has-focus .hf-lm__lab, .z2 .has-focus .hf-lm__lab.is-top { opacity: .3; }
.has-focus .hf-lm__lab.on-lit, .hf-lm__lab.is-on, .hf-lm__lab.is-q, .has-q .hf-lm__lab.is-q { opacity: 1; }
.has-q .hf-lm__lab:not(.is-q):not(.is-on) { opacity: .15; }
.hf-lm .hf-lm__lab.lab-hide { opacity: 0; }
.hf-lm__lab.is-on { font-weight: 800; font-size: 1.08em; }
.hf-lm__n { fill: var(--muted); font-weight: 600; font-size: .85em; }
.hf-lm__lab.is-on .hf-lm__n { fill: var(--blue); }
.hf-lm__pulse { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; animation: hf-lm-pulse .65s ease-out forwards; pointer-events: none; }
@keyframes hf-lm-pulse { from { r: 1; opacity: .9; } to { r: calc(28px * var(--u, 1)); opacity: 0; } }

/* SVG: районы — как в игре: границы, заливка по числу отелей, выбор — яркий синий */
.hf-lm__poly { fill: var(--line-2); stroke: var(--card); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hf-lm__poly.is-sel { fill: var(--blue); fill-opacity: var(--w, .25); cursor: pointer; transition: fill .25s var(--vs-ease), fill-opacity .25s var(--vs-ease), transform .25s var(--vs-ease);
  transform-box: fill-box; transform-origin: center; }
.hf-lm__poly.is-sel:hover { fill-opacity: calc(var(--w, .25) + .12); }
.hf-lm__poly.is-on { fill: var(--blue-deep); fill-opacity: .92; stroke-width: 2.5; animation: hf-lm-pop .32s var(--vs-ease); }
@keyframes hf-lm-pop { 40% { transform: scale(1.035); } }
.hf-lm--rayon .hf-lm__lab { opacity: 1; text-anchor: middle; font-size: .95em; }
.hf-lm--rayon .hf-lm__lab.is-on { fill: var(--on-accent); stroke: rgba(15,47,102,.6); }
.hf-lm--rayon .hf-lm__lab.is-on .hf-lm__n { fill: var(--on-accent); }
.hf-lm--rayon .hf-lm__lab:not(.lab-full) tspan:first-child { display: none; }
.hf-lm--rayon .hf-lm__lab:not(.lab-full) .hf-lm__n { font-size: 1em; font-weight: 800; fill: var(--blue-deep); }
.hf-lm--rayon .hf-lm__lab.lab-none { opacity: 0; }
.hf-lm--rayon .hf-lm__lab.lab-full .hf-lm__n { font-size: .85em; }

@media (min-width: 1024px) {
  .hf-lm { inset: 5vh 50% auto auto; transform: translate(50%, 24px); width: min(960px, 92vw); height: 90vh; border-radius: var(--r-xl); box-shadow: var(--sh-4); overflow: hidden; }
  .hf-lm.is-on { transform: translate(50%, 0); }
  .hf-lm__foot { flex-direction: row; align-items: center; }
  .hf-lm__sel { flex: 1; margin: 0; padding: 0; }
  .hf-lm__go { width: auto; min-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .hf-lm, .hf-lm__line, .hf-lm__poly { transition: none; animation: none; } }


/* ########## раздел: бывший hf-geo.css ########## */
/* hf-geo.css — t_772d17bc / t_5833e1e8 раунд 2 (30.09.2026): «Расположение» на настоящей карте города.
   Черновик до «утверждаю» Данила; затем — в /js/vse-ui.css + COMPONENTS.md. Только токены кита. */

/* вход в шторке: одна карточка «Выбрать на карте» вместо всех групп чипов расположения */
#hfGrpLoc.hf-loc--map .hf-loc__grp--map { display: none; }
#hfGrpLoc .hf-lmentry:not(.hf-lmentry--metro):not(.hf-lmentry--rayon) .hf-lmentry__ic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l7-3 8 3 7-3v17l-7 3-8-3-7 3z' fill='%23D2DDF1' stroke='%231E4FA3' stroke-width='1.6'/%3E%3Cpath d='M5 18c4-6 9-2 12-8s5-5 7-5' stroke='%23E3262B' stroke-width='2.2'/%3E%3Ccircle cx='17' cy='10' r='2.6' fill='%23fff' stroke='%2312213B' stroke-width='1.6'/%3E%3C/svg%3E"); }

html.hf-lm-open, html.hf-lm-open body { overflow: hidden; }
.hf-geo { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--paper); font-family: var(--font, inherit);
  transform: translateY(24px); opacity: 0; transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease); }
.hf-geo.is-on { transform: none; opacity: 1; }
.hf-geo > * { box-sizing: border-box; width: 100%; }
.hf-geo__head { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 4px 4px; background: var(--card); }
.hf-geo__back { flex: 0 0 var(--tap); height: var(--tap); border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312213B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/24px no-repeat; }
.hf-geo__ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.hf-geo__ttl b { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.hf-geo__ttl small { font-size: 13px; color: var(--muted); }
.hf-geo__clr { border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 14px; min-height: var(--tap); padding: 0 6px; cursor: pointer; }
.hf-geo__clr[hidden] { display: none; }
.hf-geo__tabs { display: flex; gap: 3px; margin: 0; padding: 4px 12px 10px; background: var(--card); box-shadow: 0 1px 0 var(--line); position: relative; z-index: 2; }
.hf-geo__tabs button { position: relative; flex: 1 1 0; min-width: 0; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink-2);
  font: 600 14px/1 var(--font, inherit); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.hf-geo__tabs button.is-on { background: var(--ink); color: var(--on-accent); }
.hf-geo__tabs button i { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--blue); color: var(--on-accent);
  font: 700 11px/18px var(--font, inherit); font-style: normal; box-sizing: border-box; }
.hf-geo__tabs button i[hidden], .hf-geo__tabs button i:empty { display: none; }
.hf-geo__map { position: relative; flex: 1; min-height: 0; background: var(--map-bg); }
/* t_2424a0a3: в слой «Выбрать на карте» переезжает контейнер ОСНОВНОЙ карты списка (#hfYandexMap) — на всю площадь слоя,
   какой бы размер ни задавали ему превью (hf-mapdock) или десктопная сетка (hf-deskmap). */
.hf-geo__map > .hf-map-frame.hf-geo__mapbox { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; border-radius: 0; transform: none; clip-path: none; }
.hf-geo__map [class*="-ground-pane"] { filter: saturate(.3) brightness(1.04) contrast(.95); }
.hf-geo__load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; color: var(--muted); }
.hf-geo__panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: var(--sh-3); position: relative; z-index: 2; }
.hf-geo__lines { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
.hf-geo__lines[hidden] { display: none; }
.hf-geo__lines::-webkit-scrollbar, .hf-geo__strip::-webkit-scrollbar { display: none; }
.hf-geo__lines button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2); font: 600 13px/1 var(--font, inherit); cursor: pointer; }
.hf-geo__lines button i { width: 10px; height: 10px; border-radius: 50%; }
.hf-geo__lines button.is-on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.hf-geo__strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 12px 4px; scroll-padding: 0 12px; }
.hf-geo__card { position: relative; flex: 0 0 auto; width: 150px; min-height: 66px; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 34px 8px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s; box-sizing: border-box; }
.hf-geo__card::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--c, var(--blue)); }
.hf-geo__card b { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
.hf-geo__card { width: 168px; }
.hf-geo__tabs button { font-size: 13.5px; padding: 0 6px; }
.hf-geo__card small { font-size: 12px; color: var(--muted); }
.hf-geo__card i { position: absolute; right: 10px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--line); border-radius: 6px; box-sizing: border-box; }
.hf-geo__card.is-focus { border-color: var(--ink-2); box-shadow: var(--sh-2); }
.hf-geo__card.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.hf-geo__card.is-on i { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat; }
.hf-geo__card:active { transform: scale(.97); }
.hf-geo__go { margin: 0 12px; width: calc(100% - 24px); min-height: 48px; }

/* метки на карте: станция / район / вокзал / аэропорт — зона нажатия 40 px под «жирный палец» */
.hf-gpt { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  animation: hf-gpt-in .45s var(--vs-ease) both; cursor: pointer; }
.hf-gpt i { width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 3px solid var(--c, var(--ink)); box-sizing: border-box; box-shadow: 0 1px 3px rgba(18,33,59,.3); transition: transform .2s, background .2s; }
.hf-gpt span { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(18,33,59,.15);
  font: 600 11.5px/1.2 var(--font, inherit); color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.hf-gpt span em { font-style: normal; color: var(--muted); font-weight: 600; }
.hf-gpt.is-focus span, .hf-gpt.is-on span { opacity: 1; }
.hf-gpt.is-focus i { transform: scale(1.35); }
.hf-gpt.is-on i { background: var(--c, var(--blue)); border-color: var(--card); transform: scale(1.45); box-shadow: 0 0 0 3px var(--c, var(--blue)), 0 2px 8px rgba(18,33,59,.35); }
.hf-gpt.is-on span { font-weight: 800; }
.hf-gpt.is-dim i { opacity: .45; }
.hf-gpt--rayon i { display: none; }
.hf-gpt--rayon span { left: 50%; transform: translate(-50%, -50%); opacity: 1; background: rgba(255,255,255,.85); }
.hf-gpt--rayon.is-on span { background: var(--blue-deep); color: var(--on-accent); }
.hf-geo__map.z-lo .hf-gpt--rayon:not(.is-big):not(.is-on):not(.is-focus) { display: none; }
.hf-geo__map.z-hi .hf-gpt--metro span { opacity: 1; }
/* мелкие районы на обзоре — только число, название — у крупных, выбранных и в фокусе карусели */
.hf-gpt--rayon:not(.is-big):not(.is-on):not(.is-focus) span { font-size: 0; padding: 2px 5px; }
.hf-gpt--rayon:not(.is-big):not(.is-on):not(.is-focus) span em { font-size: 11px; color: var(--ink); }
.hf-gpt--rayon.is-on span em { color: rgba(255,255,255,.8); }
.hf-gpt--vokzal i, .hf-gpt--aeroport i { width: 30px; height: 30px; border-width: 0; background: var(--ink) center/18px no-repeat; }
.hf-gpt--vokzal i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='3' width='12' height='14' rx='3'/%3E%3Cpath d='M6 11h12M9 21l1.5-4M15 21l-1.5-4'/%3E%3C/svg%3E"); }
.hf-gpt--aeroport i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E"); }
.hf-gpt--vokzal span, .hf-gpt--aeroport span { opacity: 1; left: 36px; }
.hf-gpt--vokzal.is-on i, .hf-gpt--aeroport.is-on i { background-color: var(--blue); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--blue); transform: none; }
@keyframes hf-gpt-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }

@media (min-width: 1024px) {
  .hf-geo { inset: 4vh 50% auto auto; transform: translate(50%, 24px); width: min(1100px, 94vw); height: 92vh; border-radius: var(--r-xl); box-shadow: var(--sh-4); overflow: hidden; }
  .hf-geo.is-on { transform: translate(50%, 0); }
  .hf-geo__go { width: auto; align-self: flex-end; min-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .hf-geo, .hf-gpt { transition: none; animation: none; } }


/* ########## раздел: бывший hf-sheet-v2.css ########## */
/* hf-sheet-v2.css — t_31dc4311 (30.09.2026): шторка фильтров v2 — компактно и по порядку важности.
   Фидбек Данила 29.09: «красиво, компактно, умно сгруппированно, каждый компонент до идеала».
   Порядок групп (без переписывания PHP — flex order): Цена → Оценка → Звёзды → Тип → Расположение → Номер/удобства.
   Черновик до утверждения; после «утверждаю» — в /js/vse-ui.css + COMPONENTS.md (канон 26.09). Только токены кита. */

#hfFilterSheet .hf-sheet__body { display: flex; flex-direction: column; padding: 4px 16px 16px; }
#hfFilterSheet #hfHomePrice { order: 1; }
#hfFilterSheet #hfGrpRate { order: 2; }
#hfFilterSheet #hfDeskChipsSlot { order: 3; }
#hfFilterSheet #hfHomeType { order: 4; }
#hfFilterSheet #hfGrpLoc { order: 5; }
#hfFilterSheet #hfHomeRooms, #hfFilterSheet #hfHomeAmenity { order: 6; }
#hfFilterSheet .hf-sheet__body > script { display: none; }

/* группа: тонкий разделитель, заголовок-подпись без «кнопочной» высоты */
#hfFilterSheet .hf-fgroup { padding: 14px 0 12px; border-bottom: 1px solid var(--line-2); }
#hfFilterSheet #hfDeskChipsSlot .hf-chips-block { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
#hfFilterSheet #hfGrpRate { padding-bottom: 0; border-bottom: 0; }
#hfFilterSheet .hf-fgroup .hf-h3, #hfFilterSheet .hf-chips-label, #hfFilterSheet .hf-chips-label.hf-h3 {
  min-height: 0; margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); }

/* чипы: 40 px на вид, 44 px зона нажатия (канон), одна строка с прокруткой там, где вариантов 3–5 */
#hfFilterSheet .hf-chip { position: relative; min-height: 40px; height: auto; padding: 8px 12px; font-size: 14px; line-height: 1.2; }
#hfFilterSheet .hf-chip::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
#hfFilterSheet .hf-mchips { gap: 8px; }
#hfFilterSheet .hf-chip__n { margin-left: 2px; font-weight: 500; color: var(--muted); font-size: 13px; }
#hfFilterSheet .hf-chip.hf-active .hf-chip__n { color: var(--blue); }
#hfFilterSheet #hfGrpRate .hf-chips, #hfFilterSheet #hfDeskChipsSlot .hf-chips {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
#hfFilterSheet #hfGrpRate .hf-chips::-webkit-scrollbar, #hfFilterSheet #hfDeskChipsSlot .hf-chips::-webkit-scrollbar { display: none; }
#hfFilterSheet #hfGrpRate .hf-chip, #hfFilterSheet #hfDeskChipsSlot .hf-chip { flex: 0 0 auto; white-space: nowrap; }
#hfFilterSheet .hf-chip--more { color: var(--blue); font-weight: 600; border-style: dashed !important /*!A*/; }

/* расположение: вокзалы и аэропорты — одной строкой с прокруткой */
#hfFilterSheet .hf-loc__grp:not(.hf-loc__grp--map) .hf-mchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
#hfFilterSheet .hf-loc__grp:not(.hf-loc__grp--map) .hf-mchips::-webkit-scrollbar { display: none; }
#hfFilterSheet .hf-loc__grp:not(.hf-loc__grp--map) .hf-chip { flex: 0 0 auto; white-space: nowrap; }
#hfFilterSheet .hf-loc__grp + .hf-loc__grp { margin-top: 12px; }
#hfFilterSheet .hf-loc__grp--map + .hf-loc__grp--map { margin-top: 8px; }
#hfFilterSheet .hf-loc__t { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* цена: подпись-легенда, гистограмма с числами над столбиками, поля «от — до» одной строкой */
#hfFilterSheet .hf-prange__legend { margin: -6px 0 8px; font-size: 12px; line-height: 1.3; color: var(--muted); }
#hfFilterSheet .vs-range__hist { height: 58px; padding-top: 16px; box-sizing: border-box; gap: 3px; }
#hfFilterSheet .vs-range__hist i { position: relative; height: calc(var(--h, 0) * .42px + 2px); max-height: 42px; cursor: pointer; border-radius: 3px 3px 0 0; }
#hfFilterSheet .vs-range__hist i::after { content: ''; position: absolute; left: -2px; right: -2px; top: -18px; bottom: -4px; }
#hfFilterSheet .vs-range__hist i b { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; font-size: 10px; font-weight: 600;
  line-height: 1; font-style: normal; color: var(--muted); white-space: nowrap; pointer-events: none; }
#hfFilterSheet .vs-range__hist i { font-style: normal; }
#hfFilterSheet .vs-range__hist i.is-in b { color: var(--blue-deep); }
#hfFilterSheet .vs-range__hist i:active { filter: brightness(.92); }
#hfFilterSheet .vs-range__note { margin-top: 2px; font-size: 12px; color: var(--muted); }
#hfFilterSheet #hfGrpPrice .hf-row2 { gap: 8px; margin-top: 4px; }
#hfFilterSheet #hfGrpPrice .hf-fld { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; box-sizing: border-box; }
#hfFilterSheet #hfGrpPrice .hf-fld label { flex: 0 0 auto; padding: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
#hfFilterSheet #hfGrpPrice .hf-fld input { height: 40px; padding: 0; font-size: 16px; min-width: 0; }
#hfFilterSheet .hf-price-apply { display: none; }

/* свойства номера — аккордеоны плотнее */
#hfFilterSheet .hf-acc summary { min-height: 48px; font-size: 15px; }
#hfFilterSheet .hf-acc__body { padding-bottom: 12px; }
#hfFilterSheet #hfGrpRooms > .hf-mchips { margin-bottom: 8px; }

/* кнопка «Показать N»: пока ждём число — мягкое мерцание, а не «—» */
#hfFilterSheet .hf-sheet__foot .is-busy #hfSheetApplyCount { animation: hf-sheet-busy 1s ease-in-out infinite alternate; }
@keyframes hf-sheet-busy { from { opacity: .45; } to { opacity: 1; } }

/* t_b54c6aca (30.09.2026): нижняя панель телефона — сбалансировано, как на детальной.
   Фидбек: «кнопка дат занимает дохуя места, а гости и карта — мало». Было: даты flex:1, гости и карта — по иконке.
   Стало: [📅 2–4 окт | 👤 2 гостя] — две равные половинки одного поля + «Карта» с подписью. Высота 48 = детальная. */
.hf-bbar .hf-mbq { flex: 1 1 auto; }
.hf-bbar .hf-mbq__b, .hf-bbar .hf-mbq__b + .hf-mbq__b { flex: 1 1 0; padding: 0 8px; gap: 6px; font-size: 14px; }
.hf-bbar .hf-bbar__m { flex: 0 0 auto; width: auto; height: 48px; padding: 0 14px; gap: 6px; font-size: 14px; font-weight: 600; border-radius: var(--r-m); }
.hf-bbar .hf-bbar__m::after { content: 'Карта'; }
.hf-bbar .hf-bbar__m svg { stroke: var(--blue); }
@media (max-width: 359.98px) { .hf-bbar .hf-bbar__m::after { content: none; } .hf-bbar .hf-bbar__m { padding: 0 12px; } }

/* ---- раунд 2 (30.09): навигация по разделам, «Выбрано», сегменты, степпер ---- */
#hfFilterSheet .hf-snav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 10px; border-bottom: 1px solid var(--line-2); flex: none; }
#hfFilterSheet .hf-snav::-webkit-scrollbar { display: none; }
#hfFilterSheet .hf-snav button { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink-2);
  font: 600 14px/1 var(--font, inherit); cursor: pointer; transition: background .2s, color .2s; }
#hfFilterSheet .hf-snav button.is-on { background: var(--ink); color: var(--on-accent); }
#hfFilterSheet .hf-ssel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px; border-bottom: 1px solid var(--line-2); flex: none; background: var(--card); }
#hfFilterSheet .hf-ssel[hidden] { display: none; }
#hfFilterSheet .hf-ssel::-webkit-scrollbar { display: none; }
#hfFilterSheet .hf-ssel__c { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue-deep); font: 600 13px/1 var(--font, inherit); white-space: nowrap; cursor: pointer; }
#hfFilterSheet .hf-ssel__c::after { content: ''; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230F2F66' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center/14px no-repeat; }

/* сегмент: равные доли одной строки, активная — белая «таблетка» на сером */
#hfFilterSheet .hf-seg, #hfFilterSheet #hfGrpRate .hf-chips.hf-seg, #hfFilterSheet #hfDeskChipsSlot .hf-chips.hf-seg {
  display: flex; flex-wrap: nowrap; gap: 3px; margin: 0; padding: 3px; overflow: visible; border-radius: var(--r-m); background: var(--line-2); }
#hfFilterSheet #hfGrpRate .hf-seg .hf-chip, #hfFilterSheet #hfDeskChipsSlot .hf-seg .hf-chip, #hfFilterSheet .hf-seg .hf-chip { flex: 1 1 0; min-width: 0; min-height: 40px; justify-content: center; padding: 6px 4px; border: 0 !important /*!A*/; border-radius: 9px;
  background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; box-shadow: none; }
#hfFilterSheet .hf-seg .hf-chip.hf-active { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
#hfFilterSheet .hf-seg .hf-chip span { display: none; }
#hfFilterSheet #hfGrpRate .hf-seg .hf-chip .vs-rate { font-size: 13px; }
#hfFilterSheet #hfGrpRate { padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
#hfFilterSheet .hf-chip--zero { display: none !important /*!?*/; }

/* «Спальных мест» и «Комнат» — всегда раскрыты, без стрелки */
#hfFilterSheet .hf-acc--flat > summary { pointer-events: none; min-height: 36px; }
#hfFilterSheet .hf-acc--flat > summary::after { display: none; }
#hfFilterSheet .hf-acc--flat > summary .hf-acc__n { display: none; }
#hfFilterSheet .hf-row2[hidden] { display: none !important /*!?*/; }
#hfFilterSheet .hf-step { display: flex; align-items: center; gap: 10px; }
#hfFilterSheet .hf-step__t { font-size: 14px; color: var(--muted); }
#hfFilterSheet .hf-step button { width: 44px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
#hfFilterSheet .hf-step button:disabled { opacity: .35; cursor: default; }
#hfFilterSheet .hf-step b { min-width: 64px; text-align: center; font-size: 16px; font-weight: 700; color: var(--muted); }
#hfFilterSheet .hf-step.is-on b { color: var(--ink); }

/* ---- экран «Куда» (выбор города) на телефоне, 30.09: поверх всего, крупный поиск, популярные плитками ---- */
@media (max-width: 1023.98px) {
  #hfCityPop { z-index: 10040 !important /*!JS*/; }
  #hfCityPop .hf-citypop__panel { position: fixed !important /*!JS*/; left: 0 !important /*!JS*/; right: 0 !important /*!JS*/; bottom: 0 !important /*!JS*/; top: calc(40px + env(safe-area-inset-top)) !important /*!JS*/;
    max-height: none !important /*!JS*/; height: auto !important /*!JS*/; display: flex; flex-direction: column; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--card); box-shadow: var(--sh-4); overflow: hidden; }
  #hfCityPop .hf-citypop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 18px 16px 10px; }
  #hfCityPop .hf-citypop__head b { font-size: 22px; font-weight: 800; color: var(--ink); }
  #hfCityPop .hf-citypop__head span { font-size: 13px; color: var(--muted); }
  #hfCityPop .hf-citypop__q { flex: none; box-sizing: border-box; width: calc(100% - 32px); height: 50px; margin: 0 16px 10px; padding: 0 14px 0 46px; border: 1.5px solid var(--line); border-radius: var(--r-m);
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center/20px no-repeat;
    font-size: 16px; color: var(--ink); outline: none; }
  #hfCityPop .hf-citypop__q:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
  #hfCityPop .hf-citypop__list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 8px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  #hfCityPop .hf-citypop__a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 12px; border-radius: var(--r-m); font-size: 16px; color: var(--ink); text-decoration: none; }
  #hfCityPop .hf-citypop__a:active { background: var(--line-2); }
  #hfCityPop .hf-citypop__a small { flex: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
  #hfCityPop .hf-citypop__a.is-on { background: var(--blue-soft); }
  #hfCityPop .hf-citypop__a.is-on span { font-weight: 800; color: var(--blue-deep); }
  #hfCityPop .hf-citypop__a.is-on small { background: var(--card); color: var(--blue-deep); }
  #hfCityPop .hf-cpop-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 16px 12px; }
  #hfCityPop .hf-cpop-tiles[hidden] { display: none; }
  #hfCityPop .hf-cpop-tiles__t { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  #hfCityPop .hf-cpop-tile { display: flex; flex-direction: column; gap: 2px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); text-decoration: none; background: var(--card); }
  #hfCityPop .hf-cpop-tile b { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
  #hfCityPop .hf-cpop-tile small { font-size: 12.5px; color: var(--muted); }
  #hfCityPop .hf-cpop-tile:active { transform: scale(.98); }
  /* t_c0102477 (30.09): шапка как у шторок детальной, прокрутка всего экрана, текущий город сверху, без дублей */
  #hfCityPop.hf-cpop-v2 .hf-citypop__panel { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; animation: hfCpUp .28s cubic-bezier(.2,.8,.3,1); }
  @keyframes hfCpUp { from { transform: translateY(30%); opacity: .5; } to { transform: none; opacity: 1; } }
  #hfCityPop.hf-cpop-v2 .hf-citypop__head { position: relative; padding: 22px 16px 8px; }
  #hfCityPop.hf-cpop-v2 .hf-citypop__head::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  #hfCityPop.hf-cpop-v2 .hf-citypop__head b { font: 700 20px/1.2 var(--font-display); }
  #hfCityPop.hf-cpop-v2 .hf-citypop__q { position: sticky; top: 0; z-index: 3; margin: 0 16px 8px; }
  #hfCityPop.hf-cpop-v2 .hf-citypop__list { flex: none; overflow: visible; padding-bottom: 0; }
  #hfCityPop.hf-cpop-v2 .hf-citypop__list:last-child { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  #hfCityPop.hf-cpop-v2 .hf-cpop-top { padding: 0 8px 6px; }
  #hfCityPop.hf-cpop-v2 .hf-cpop-top .hf-citypop__a { min-height: 50px; }
  #hfCityPop.hf-cpop-v2 .hf-cpop-top .hf-citypop__a.is-on span::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4EA2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat; }
  #hfCityPop.hf-cpop-v2 .hf-citypop__a--all { border-bottom: 0; color: var(--ink); }
  #hfCityPop.hf-cpop-v2 .hf-citypop__a--all small { background: none; color: var(--muted); font-weight: 500; }
  #hfCityPop.hf-cpop-v2 .hf-cpop-tiles { padding-top: 6px; border-top: 1px solid var(--line-2); }
  #hfCityPop.hf-cpop-v2:not(.is-q) .hf-cpop-dup { display: none; }
  #hfCityPop.hf-cpop-v2 .hf-cpop-allh { margin: 6px 0 0 !important /*!?*/; padding: 10px 12px 6px !important /*!?*/; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; list-style: none; }
  #hfCityPop.hf-cpop-v2 .hf-cpop-allh::before { content: none !important /*!?*/; }
  #hfCityPop.hf-cpop-v2.is-q .hf-cpop-allh, #hfCityPop.hf-cpop-v2.is-q .hf-cpop-top .hf-citypop__a--all { display: none; }
}

/* строка под H1: «474 отеля · от 1 200 ₽ за ночь» + карточка «Укажите даты» (вместо текста «Даты не выбраны — цены «от»») */
.hf-meta { margin-bottom: 10px; }
.vs-dates-hint--card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--blue-soft);
  border-radius: var(--r-m); background: var(--blue-soft); color: var(--ink); text-align: left; cursor: pointer; font: inherit; box-sizing: border-box; }
.vs-dates-hint--card[hidden] { display: none; }
.vs-dates-hint--card:active { transform: scale(.99); }
.vs-dates-hint--card svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; }
.vs-dates-hint--card span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vs-dates-hint--card b { font-size: 15px; font-weight: 700; color: var(--blue-deep); }
.vs-dates-hint--card small { font-size: 13px; color: var(--ink-2); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* одна строка: перенос в запасном шрифте до загрузки Inter давал сдвиг 17 px (CLS 0,1) */
.vs-dates-hint--card i { flex: 0 0 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231E4FA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E") center/16px no-repeat; }
@media (min-width: 1024px) { .vs-dates-hint--card { display: none; } }

/* фидбек 30.09: кнопка ассистента владельца (owner_assistant, авторизованным) перекрывала «Карту» нижней панели.
   На списке телефона поднимаем её над панелью, на полноэкранной карте и схеме — прячем. */
@media (max-width: 1023.98px) {
  .oa-widget { bottom: calc(80px + env(safe-area-inset-bottom)) !important /*!?*/; }
  body.hf-map-open .oa-widget, html.hf-lm-open .oa-widget, body.hf-sheet-open .oa-widget { display: none !important /*!?*/; }
}

@media (min-width: 1024px) {
  #hfFilterSheet .hf-sheet__body { padding: 4px 20px 20px; }
  #hfFilterSheet #hfGrpRate .hf-chips, #hfFilterSheet #hfDeskChipsSlot .hf-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* ---- раунд 3 (30.09, вечер): шторка фильтров в геометрии шторок детальной ----
   Фидбек Данила 30.09: «фильтры — больше всего не нравятся». Разбор на 375: шесть разных видов контролов,
   навигация тёмными заливками (на детальной — текстовые вкладки с индикатором), «Сбросить» серым текстом
   посреди шапки, счётчики вплотную к подписи («Апартаменты513»). */
/* шапка: «Сбросить» — серая пилюля справа, как в шторке дат (.sc-cal-reset); пока сбрасывать нечего — не видна */
#hfFilterSheet .hf-reset-wrap { flex: none; margin-left: auto; }
#hfFilterSheet .hf-sheet__head .hf-reset-wrap .hf-btn--s { position: relative; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--paper) !important /*!JS*/;
  color: var(--ink); font: 600 13px/1 var(--font); transition: opacity .2s ease, background .15s ease; }
#hfFilterSheet .hf-sheet__head .hf-reset-wrap .hf-btn--s::after { content: ''; position: absolute; inset: -6px -4px; }
#hfFilterSheet .hf-sheet__head .hf-reset-wrap .hf-btn--s:hover { background: var(--line-2) !important /*!?*/; }
#hfFilterSheet .hf-sheet__head .hf-reset-wrap .hf-btn--s:not(.hf-on) { opacity: 0; pointer-events: none; }
/* навигация по разделам — текстовые вкладки с индикатором, как липкая навигация детальной (.hd-subnav__a) */
#hfFilterSheet .hf-snav { gap: 0; padding: 0 16px; }
#hfFilterSheet .hf-snav button { position: relative; height: 44px; padding: 0 12px; border-radius: 0; background: none; color: var(--muted); font: 600 14.5px/1 var(--font); }
#hfFilterSheet .hf-snav button:first-child { padding-left: 0; }
#hfFilterSheet .hf-snav button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--red);
  transform: scaleX(0); transition: transform .22s ease; }
#hfFilterSheet .hf-snav button:first-child::after { left: 0; }
#hfFilterSheet .hf-snav button:hover { color: var(--ink); }
#hfFilterSheet .hf-snav button.is-on { background: none; color: var(--ink); }
#hfFilterSheet .hf-snav button.is-on::after { transform: scaleX(1); }
/* группы: воздух между группами, плотно внутри (--vs-s-*), заголовок группы 16/700 */
#hfFilterSheet .hf-fgroup, #hfFilterSheet #hfGrpRate { padding: var(--vs-s-blk) 0 calc(var(--vs-s-blk) + 4px); }
#hfFilterSheet .hf-fgroup .hf-h3, #hfFilterSheet .hf-chips-label, #hfFilterSheet .hf-chips-label.hf-h3 { margin: 0 0 var(--vs-s-el); font-size: 16px; }
#hfFilterSheet .hf-chip__n { margin-left: 6px; }
#hfFilterSheet .hf-prange__legend { margin: -4px 0 6px; }
#hfFilterSheet #hfDeskChipsSlot .hf-chips-block { padding: var(--vs-s-blk) 0 calc(var(--vs-s-blk) + 4px); }
/* БАГ (найден 30.09): выбранный сегмент был не виден — правило «#hfGrpRate .hf-seg .hf-chip» (2 id) с фоном
   transparent перебивало «.hf-seg .hf-chip.hf-active» (1 id). Выбранное — белая таблетка с тенью, одинаково во всех сегментах. */
#hfFilterSheet #hfGrpRate .hf-seg .hf-chip.hf-active, #hfFilterSheet #hfDeskChipsSlot .hf-seg .hf-chip.hf-active,
#hfFilterSheet #hfHomeRooms .hf-seg .hf-chip.hf-active, #hfFilterSheet .hf-seg .hf-chip.hf-active {
  background: var(--card); color: var(--ink); box-shadow: var(--sh-2); }
#hfFilterSheet .hf-seg .hf-chip { transition: background .18s ease, box-shadow .18s ease, color .18s ease; }

/* ---- раунд 4 (30.09, аудит Данила): три вида контролов — сегмент, чипы, цена ----
   Для отелей убраны «Спальных мест», «Комнат», «Этажей», «Кухня», «Рядом» (PHP). Оставшиеся свойства номера —
   не аккордеоны, а открытые подразделы под заголовком «В номере», с подписью как у «Метро/Район» в «Расположении». */
#hfFilterSheet .hf-rooms-h { margin: var(--vs-s-blk) 0 var(--vs-s-el); font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); }
#hfFilterSheet .hf-acc--flat { border-top: 0; }
#hfFilterSheet .hf-acc--flat + .hf-acc--flat { margin-top: 12px; }
#hfFilterSheet .hf-acc--flat > summary { min-height: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
#hfFilterSheet .hf-acc--flat > .hf-acc__body { padding-bottom: 0; }
/* цена: без чисел над каждым столбиком; «сколько отелей» — в живой подсказке сверху (hf-price-range.js) */
#hfFilterSheet .vs-range__hist { height: 44px; padding-top: 0; }
#hfFilterSheet .vs-range__hist i b { display: none; }
#hfFilterSheet .vs-range__hist i::after { top: -6px; }
#hfFilterSheet .hf-prange__legend { min-height: 16px; transition: color .15s ease; }
#hfFilterSheet .hf-prange__legend.is-hot { color: var(--blue-deep); font-weight: 600; }

/* ---- раунд 5 (30.09, Данил): навигация по разделам на мобиле — внизу шторки, над «Показать N»,
   как липкая навигация детальной (.hd-subnav--inbar): вкладки на всю ширину, индикатор СВЕРХУ (у края панели). ---- */
@media (max-width: 1023.98px) {
  #hfFilterSheet .hf-sheet__foot .hf-snav.hf-snav--bottom { order: -1; margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-4)) var(--sp-2); padding: 0 16px;
    border-top: 0; border-bottom: 1px solid var(--line-2); background: var(--card); }
  #hfFilterSheet .hf-snav--bottom button::after { top: 0; bottom: auto; border-radius: 0 0 3px 3px; }
}


/* ########## раздел: бывший hf-card-compact.css ########## */
/* hf-card-compact.css — t_5f9f60ef (30.09.2026): карточка отеля в выдаче — компактнее на телефоне.
   Фидбек Данила 29.09: «карточки занимают слишком много места». Было ~460 px на 375 — в первом экране одна карточка.
   УТВЕРЖДЕНО Данилом 30.09: вариант b — горизонтальная: фото слева 112 px, справа название (до 3 строк, без
   многоточий) · оценка · метро + минуты · цена «от … за ночь»; бейджи/удобства/кнопка на телефоне скрыты — ссылка
   вся карточка. ≈150 px, в первом экране 2+ карточки. Класс html.hf-cb ставит скрипт в index.php.
   Только телефон (<640 px); планшет/десктоп — прежняя раскладка. Описание — /js/vse-ui.COMPONENTS.md, раздел 3. */

@media (max-width: 639.98px) {
  /* ---------- B: горизонтальная ---------- */
  html.hf-cb .hf-cards .hf-grid { gap: 10px; }
  html.hf-cb .hf-card.hf-card { flex-direction: row; align-items: stretch; min-height: 0; border-radius: var(--r-m); }
  html.hf-cb .hf-card .hf-card__ph { position: relative; flex: 0 0 128px; width: 128px; aspect-ratio: auto; min-height: 150px; align-self: stretch; }
  html.hf-cb .hf-card .hf-card__ph > .hf-card__track, html.hf-cb .hf-card .hf-card__ph > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  html.hf-cb .hf-card .hf-card__ph .hf-card__track img { height: 100%; object-fit: cover; }
  html.hf-cb .hf-card .hf-card__arrow { display: none; }
  html.hf-cb .hf-card .hf-card__dots { bottom: 6px; transform: scale(.8); }
  html.hf-cb .hf-card .hcard_fav { top: 6px; right: 6px; width: 32px; height: 32px; }
  html.hf-cb .hf-card .hf-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 12px 10px; gap: 0; }
  html.hf-cb .hf-card .hf-card__main { padding: 0; gap: 0; }
  html.hf-cb .hf-card h3.hf-card__nm { margin: 0 0 4px; font-size: 15px; line-height: 1.25; -webkit-line-clamp: 2; }
  html.hf-cb .hf-card .hf-card__rate { margin: 0 0 4px; gap: 5px; font-size: 12.5px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  html.hf-cb .hf-card .hf-card__rate .vs-rate { font-size: 12px; padding: 1px 5px; }
  html.hf-cb .hf-card .hf-card__rword { font-weight: 600; }
  html.hf-cb .hf-card .hf-card__loc { flex-wrap: nowrap; gap: 5px; margin: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
  html.hf-cb .hf-card .hf-card__locw { display: none; }
  html.hf-cb .hf-card .hf-card__locn { overflow: hidden; text-overflow: ellipsis; }
  html.hf-cb .hf-card .hf-card__badges, html.hf-cb .hf-card .hf-card__specs, html.hf-cb .hf-card .hf-card__am,
  html.hf-cb .hf-card .hf-card__facts, html.hf-cb .hf-card ul.hf-card__tags { display: none; }
  html.hf-cb .hf-card .hf-card__rword { display: none; }
  html.hf-cb .hf-card .hf-card__rword + .hf-card__rcnt::before { content: none; }
  /* фидбек 30.09 «ни одно слово не влезает — всё сокращается»: ничего не режем многоточием, переносим строку */
  html.hf-cb .hf-card h3.hf-card__nm { -webkit-line-clamp: 3; overflow-wrap: anywhere; }
  html.hf-cb .hf-card .hf-card__rate { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 2px; }
  html.hf-cb .hf-card .hf-card__loc { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 0; line-height: 1.35; }
  html.hf-cb .hf-card .hf-card__locn { flex: 0 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
  html.hf-cb .hf-card .hf-card__locm { flex: 0 0 auto; white-space: nowrap; overflow: visible; }
  html.hf-cb .hf-card .hf-card__ph { flex-basis: 112px; width: 112px; }
  html.hf-cb .hf-card .hf-card__side { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 0; border: 0; }
  html.hf-cb .hf-card .hf-card__avail { margin: 0 0 2px; font-size: 12px; }
  html.hf-cb .hf-card .hf-card__price { gap: 3px; }
  html.hf-cb .hf-card .hf-card__price b { font-size: 18px; }
  html.hf-cb .hf-card .hf-card__price small { font-size: 12px; }
  html.hf-cb .hf-card .hf-card__pnight { font-size: 11.5px; }
  html.hf-cb .hf-card .hf-card__cta { display: none; }

}
/* 30.09: вариант a (вертикальная компактная) и переключатель ?card= сняты — Данил утвердил b. */


/* ########## раздел: бывший hf-map-v4.css ########## */
/* hf-map-v4.css — t_1a8bcd5b (30.09.2026): карта списка — доводка. Черновик до утверждения Данилом.
   - кластер: тёмный кружок с числом (вместо синих «пузырей» Яндекса), крупнее при наведении;
   - на полноэкранной карте телефона сверху: «Фильтры» (та же шторка поверх карты) + число отелей; ✕ справа;
   - «Искать в этой области» — под верхней строкой, не поверх неё. Только токены кита. */
/* 30.09 (фидбек Данила «карта — неоч»): тёмные кластеры читались как россыпь чёрных дыр поверх светлой карты
   и спорили с ценниками. Кластер — синий (его нажимают: приближает), белая обводка, тень кита; ценник — белый. */
.hf-mcl { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); min-width: 34px; height: 34px; padding: 0 9px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--blue); color: var(--on-accent);
  border: 2px solid var(--card); box-shadow: var(--sh-2); font: 700 13px/1 var(--font, inherit); cursor: pointer; transition: transform .15s var(--vs-ease), background .15s ease; }
.hf-mcl:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--blue-deep); }
.hf-mcl b, .hf-mcl b:hover { color: var(--on-accent); font-weight: 700; font-size: 13px; }
.hf-mpin { font-weight: 700; font-size: 13px; }

.hf-maptop { display: none; }
body.hf-map-open .hf-maptop { position: absolute; left: 12px; right: 64px; top: calc(14px + env(safe-area-inset-top)); z-index: 7; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.hf-maptop__f { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); box-shadow: var(--sh-2); font: 600 14px/1 var(--font, inherit); cursor: pointer; }
.hf-maptop__f svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.hf-maptop__f i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--blue); color: var(--on-accent); font: 700 11px/18px var(--font, inherit); font-style: normal; text-align: center; }
.hf-maptop__f i[hidden] { display: none; }
.hf-maptop__n { pointer-events: none; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--glass);
  box-shadow: var(--sh-1); font: 600 13px/1 var(--font, inherit); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hf-map-open .hf-maparea { top: calc(64px + env(safe-area-inset-top)); }
/* шторка фильтров поверх полноэкранной карты */
body.hf-map-open .hf-scrim { z-index: 96; }
body.hf-map-open .hf-sheet { z-index: 100; }


/* ########## раздел: бывший hf-mapdock.css ########## */
/* hf-mapdock.css — t_1a8bcd5b (30.09.2026): превью карты над списком (телефон) + раскрытие на весь экран
   + шторка фильтров поверх карты. JS — js/hf-mapdock.js. Только токены кита. */
.hf-dock { display: none; }
@media (max-width: 1023.98px) {
  .hf-dock { display: block; position: relative; height: 176px; margin: 0 0 14px; border-radius: var(--r-lg); overflow: hidden;
    background: var(--map-bg) linear-gradient(135deg, var(--paper), var(--line-2)); box-shadow: 0 0 0 1px var(--line) inset; }
  /* раскрытая карта переносится в <body> (hf-mapdock.js) — правила ниже по .hf-dock-pane, не по .hf-dock */
  body.hf-map-open > .hf-map-pane.hf-dock-pane { display: block; position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; border: 0; border-radius: 0; will-change: clip-path; }
  .hf-dock__slot { position: absolute; inset: 0; }
  /* t_a076758e: статичная подложка города — видна, пока живая карта не отрисовала тайлы */
  .hf-dock__st { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hf-dock .hf-map-pane.hf-dock-pane { background: transparent; }
  /* 30.09 (t_1a8bcd5b, записано под t_31dc4311 из-за лока файла): пока Я.Карта не дорисовала тайлы, серый фон кадра
     (.hf-map-frame{background:--map-bg}) закрывал статичную подложку города — превью было пустым серым прямоугольником. */
  body:not(.hf-map-open) .hf-dock .hf-map-frame { background: transparent; }
  .hf-dock .hf-map-pane.hf-dock-pane { display: block; position: absolute; inset: 0; height: auto; border: 0; border-radius: inherit; overflow: hidden; }
  /* в превью — только карта с пинами; служебное (область, мини-карточка, верхняя строка, ✕, «Список») спрятано */
  body:not(.hf-map-open) .hf-dock .hf-maparea, body:not(.hf-map-open) .hf-dock .hf-mapcard,
  body:not(.hf-map-open) .hf-dock .hf-maptop, body:not(.hf-map-open) .hf-dock .hf-map-close,
  body:not(.hf-map-open) .hf-dock .hf-dock__list { display: none !important /*!JS*/; }
  body:not(.hf-map-open) .hf-dock .hf-mpin { transform: translate(-50%, calc(-100% - 4px)) scale(.86); }
  .hf-dock .hf-dock__hit { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hf-dock__hit:active ~ .hf-dock__bar { transform: translateY(1px); }
  .hf-dock__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 8px; pointer-events: none; transition: transform .12s ease; }
  .hf-dock__n { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-pill);
    background: var(--glass); box-shadow: var(--sh-2); font: 600 13.5px/1 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; }
  .hf-dock__n span { overflow: hidden; text-overflow: ellipsis; }
  .hf-dock__n svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hf-dock .hf-dock__f { pointer-events: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
    background: var(--card); color: var(--ink); box-shadow: var(--sh-2); font: 600 14px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* 30.09 (t_31dc4311): белая пилюля с синей иконкой — как «Фильтры» на карте десктопа; тёмная заливка была четвёртым видом кнопки */
  .hf-dock__f svg { width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; }
  .hf-dock__f i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--coral); color: var(--on-accent); font: 700 11px/18px var(--font); font-style: normal; text-align: center; }
  .hf-dock__f i[hidden] { display: none; }
  .hf-dock .hf-dock__f:active { transform: scale(.97); }

  /* раскрытая карта: пока идёт анимация, превью держит место в потоке (JS фиксирует высоту) */
  body.hf-map-open .hf-dock .hf-map-pane.hf-dock-pane { position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; border-radius: 0; will-change: clip-path; }
  body.hf-map-open .hf-dock__hit, body.hf-map-open .hf-dock__bar { visibility: hidden; }
  /* «Список · N» внизу по центру */
  .hf-dock__list { display: none; }
  body.hf-map-open .hf-dock-pane .hf-dock__list { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 7; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
    background: var(--blue); color: var(--on-accent); box-shadow: var(--sh-4); font: 700 15px/1 var(--font); cursor: pointer; white-space: nowrap; animation: hfDockUp .3s .2s both cubic-bezier(.2,.8,.2,1); }
  /* t_1a8bcd5b (30.09, решение Данила): «Список · N» — главная кнопка экрана карты, роль primary кита (синяя), было --ink. */
  body.hf-map-open .hf-dock-pane .hf-dock__list:hover { background: var(--blue-deep); }
  .hf-dock__list svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  body.hf-map-open .hf-dock-pane:has(.hf-mapcard:not([hidden])) .hf-dock__list { display: none; }
  @keyframes hfDockUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

  /* шторка фильтров поверх карты: ниже, затемнение лёгкое — карта с пинами видна и живёт */
  body.hf-map-open #hfFilterSheet.hf-on { max-height: 62vh !important /*!?*/; max-height: 62dvh !important /*!?*/; }
  body.hf-map-open .hf-scrim.hf-on { background: rgba(18, 33, 59, .12) !important /*!?*/; }
  body.hf-map-open:has(.hf-sheet.hf-on) .hf-dock__list, body.hf-map-open:has(.hf-sheet.hf-on) .hf-maparea { display: none !important /*!?*/; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  body.hf-map-open .hf-dock-pane .hf-dock__list { animation: none; }
}


/* ########## раздел: бывший hf-search-v2.css ########## */
/* hf-search-v2.css — t_72226674 (30.09.2026): строка поиска списка v2 + поповер «Куда» на десктопе.
   JS — js/hf-search-v2.js. Только токены кита. */

/* мобила: одна кнопка «даты · гости» в нижней панели */
.hf-mbq-one .hf-bbar .hf-mbq__b[hidden] { display: none !important /*!JS*/; }
.hf-mbq-one .hf-bbar .hf-mbq__b { flex: 1 1 auto; justify-content: flex-start; padding: 0 14px; }

@media (min-width: 1024px) {
  .hf-dsearch.hf-dsearch--v2 { display: inline-grid; grid-template-columns: minmax(170px, auto) minmax(230px, auto) auto; width: auto; max-width: 100%;
    margin: 14px 0 16px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
    box-shadow: 0 1px 2px rgba(18,33,59,.04), 0 8px 24px rgba(18,33,59,.06); transition: box-shadow .2s ease, border-color .2s ease; }
  .hf-dsearch--v2:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(18,33,59,.05), 0 10px 30px rgba(18,33,59,.09); }
  .hf-dsearch--v2 #hfDsGuestsSlot { display: none !important /*!JS*/; }
  .hf-dsearch--v2 .hf-dsearch__slot { border-left: 0; }
  .hf-dsearch--v2 .hf-dsearch__slot::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
  .hf-dsearch--v2 .hf-dsearch__city, .hf-dsearch--v2 .sc-field { min-height: 52px; padding: 0 18px 0 16px !important /*!A*/; border-radius: var(--r-pill) !important /*!A*/; transition: background .15s ease; cursor: pointer; }
  .hf-dsearch--v2 .hf-dsearch__city:hover, .hf-dsearch--v2 .sc-field:hover, .hf-dsearch--v2 .sc-field.sc-field--active { background: var(--paper) !important /*!?*/; }
  .hf-dsearch--v2 .hf-dsearch__city svg, .hf-dsearch--v2 .sc-field__icon svg { stroke: var(--blue); }
  .hf-dsearch--v2 .hf-dsearch__city small, .hf-dsearch--v2 .sc-field__label { font: 600 11.5px/1 var(--font) !important /*!A*/; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
  .hf-dsearch--v2 .hf-dsearch__city b { font: 600 15px/1.2 var(--font); }
  .hf-dsearch--v2 .hf-ds-caret { flex: none; width: 10px; height: 10px; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .hf-dsearch--v2 .hf-dsearch__city[aria-expanded="true"] .hf-ds-caret, #hfCityBtn[aria-expanded="true"] ~ * .hf-ds-caret { transform: translateY(2px) rotate(-135deg); }
  .hf-dsearch--v2 #scDatesValueList { display: none !important /*!JS*/; }
  .hf-dsearch--v2 .hf-ds-sum { grid-column: 2; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 15px/1.2 var(--font); color: var(--ink-2); }
  .hf-dsearch--v2 .hf-ds-sum b { font-weight: 600; color: var(--ink); }
  .hf-dsearch--v2 .hf-dsearch__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: center; min-height: 48px; height: 48px; margin-left: 4px; padding: 0 20px 0 16px;
    border-radius: var(--r-pill); background: var(--blue-deep); color: var(--on-accent); font: 700 15px/1 var(--font); box-shadow: 0 4px 12px rgba(43,78,162,.28); transition: filter .15s ease, transform .15s ease; }
  .hf-dsearch--v2 .hf-dsearch__go:hover { filter: brightness(1.08); background: var(--blue-deep); }
  .hf-dsearch--v2 .hf-dsearch__go:active { transform: scale(.97); }
  .hf-dsearch--v2 .hf-dsearch__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  /* t_a5ab9fc1 (30.09, решение Данила): «Найти» убрана — даты применяет «Показать отели» в поповере, город — ссылки
     «Куда». На экране было два главных действия (тёмная «Найти» и синяя «Выбрать номер»). Строка = поле, как бронь детальной. */
  .hf-dsearch.hf-dsearch--v2 { grid-template-columns: minmax(170px, auto) minmax(230px, auto); }
  .hf-dsearch--v2 .hf-dsearch__go { display: none !important /*!JS*/; }

  /* поповер «Куда» у строки поиска: шире, поиск, текущий город сверху, популярные плитками */
  .hf-dsearch > .hf-citypop .hf-citypop__panel { width: 400px; max-height: min(560px, calc(100vh - 220px)); padding: 16px; border-radius: var(--r-xl); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 50px rgba(18,33,59,.18); animation: hfCpPop .18s ease; }
  @keyframes hfCpPop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
  .hf-dsearch > .hf-citypop .hf-citypop__head { padding: 2px 4px 12px; }
  .hf-dsearch > .hf-citypop .hf-citypop__head b { font: 700 18px/1.2 var(--font-display); }
  .hf-dsearch > .hf-citypop .hf-citypop__q { height: 44px !important /*!?*/; margin: 0 0 10px; padding: 0 14px 0 42px; border-radius: var(--r-m); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px center/18px no-repeat; border: 1px solid transparent; font-size: 15px; }
  .hf-dsearch > .hf-citypop .hf-citypop__q:focus { background-color: var(--card); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
  /* t_ab3577be (30.09): кнопка «Фильтры» ряда над выдачей (flex-элемент с z-index 45) рисовалась ПОВЕРХ
     поповера городов — #hfDeskSearch держит его в своём слое z 30. Пока список открыт — строка поиска выше. */
  html.hf-citypop-open #hfDeskSearch { z-index: 60; }
  .hf-dsearch > .hf-citypop .hf-citypop__list { overflow: visible; }
  .hf-dsearch > .hf-citypop .hf-citypop__a { min-height: 42px; border-radius: var(--r-m); font-size: 15px; }
  .hf-dsearch > .hf-citypop .hf-citypop__a small { padding: 2px 8px; border-radius: var(--r-pill); background: var(--paper); font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .hf-dsearch > .hf-citypop .hf-citypop__a.is-on { background: var(--blue-soft); font-weight: 700; color: var(--blue-deep); }
  .hf-dsearch > .hf-citypop .hf-citypop__a.is-on small { background: var(--card); color: var(--blue-deep); }
  .hf-dsearch > .hf-citypop .hf-citypop__a--all { border-bottom: 0; margin: 0; color: var(--ink); }
  .hf-dsearch > .hf-citypop .hf-citypop__a--all small { background: none; font-weight: 500; color: var(--muted); }
  .hf-dsearch > .hf-citypop .hf-cpop-top { padding: 0 0 8px; }
  .hf-dsearch > .hf-citypop .hf-cpop-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 12px; border-top: 1px solid var(--line-2); }
  .hf-dsearch > .hf-citypop .hf-cpop-tiles[hidden] { display: none; }
  .hf-dsearch > .hf-citypop .hf-cpop-tiles__t, .hf-dsearch > .hf-citypop .hf-cpop-allh { grid-column: 1 / -1; margin: 0; padding: 2px 4px 0 !important /*!?*/; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; list-style: none; }
  .hf-dsearch > .hf-citypop .hf-cpop-allh::before { content: none !important /*!?*/; }
  .hf-dsearch > .hf-citypop .hf-cpop-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
  .hf-dsearch > .hf-citypop .hf-cpop-tile:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
  .hf-dsearch > .hf-citypop .hf-cpop-tile b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
  .hf-dsearch > .hf-citypop .hf-cpop-tile small { font-size: 12.5px; color: var(--muted); }
  .hf-dsearch > .hf-citypop.hf-cpop-v2:not(.is-q) .hf-cpop-dup { display: none; }
  .hf-dsearch > .hf-citypop.hf-cpop-v2.is-q .hf-cpop-allh, .hf-dsearch > .hf-citypop.hf-cpop-v2.is-q .hf-cpop-top .hf-citypop__a--all { display: none; }
  .hf-dsearch > .hf-citypop .hf-cpop-top .hf-citypop__a.is-on span::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4EA2' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
}


/* ########## раздел: бывший hf-deskmap.css ########## */
/* hf-deskmap.css — t_5d1f8eee (30.09.2026): карта списка на десктопе — липкая, стрелка расширения,
   «Фильтры» на карте и панель фильтров слева от широкой карты. JS — js/hf-deskmap.js. Только токены кита. */
.hf-fpanel, .hf-dm-ctl, .hf-dm-arrow { display: none; }
/* t_1a8bcd5b (30.09.2026): раскрытие карты без переверстки страницы. Карта занимает всю строку сетки
   (обе колонки) и открыта через clip-path; видимая левая граница — --hf-cut. Раскрытие = анимация одной
   этой переменной: контейнер Я.Карт размер не меняет, колонка списка не анимируется (она меняется разом,
   пока список погашен, — hf-dm-fade/hf-dm-wcols в hf-deskmap.js). Шапка списка стоит над сеткой. */
@property --hf-cut { syntax: '<length-percentage>'; inherits: true; initial-value: 0px; }
@media (min-width: 1280px) {
  .hf-layout { --hf-mapw: clamp(360px, 34%, 560px); --hf-listw: clamp(420px, 34%, 500px);
    grid-template-columns: minmax(0, 1fr) var(--hf-mapw) !important /*!JS*/; }
  .hf-layout.hf-dm-wcols { grid-template-columns: var(--hf-listw) minmax(0, 1fr) !important /*!A*/; }
  .hf-layout > .hf-list-pane { grid-column: 1; grid-row: 1; transition: opacity .24s ease; }
  .hf-layout.hf-dm-fade > .hf-list-pane { opacity: 0; transition-duration: .12s; }
  /* липкая карта (правило .hf-map-pane{position:relative} в hotels-list-v3.css перебивало sticky) */
  .hf-layout > .hf-map-pane { grid-column: 1 / -1; grid-row: 1; z-index: 3; position: sticky !important /*!JS*/; top: 16px; height: calc(100vh - 32px); align-self: start;
    border: 0; border-radius: 0; overflow: visible !important /*!JS*/; background: transparent;
    --hf-cut: calc(100% - var(--hf-mapw));
    clip-path: inset(0 0 0 var(--hf-cut) round var(--r-lg));
    transition: --hf-cut .56s cubic-bezier(.2,.8,.2,1); }
  .hf-layout.hf-dm-wide > .hf-map-pane { --hf-cut: calc(var(--hf-listw) + var(--sp-6)); }
  .hf-layout > .hf-map-pane .hf-map-frame { border-radius: 0; }
  /* рамка видимой части карты */
  .hf-layout > .hf-map-pane::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: var(--hf-cut); z-index: 9;
    border: 1px solid var(--line); border-radius: var(--r-lg); pointer-events: none; }
  /* всё, что лежит на карте, привязано к видимой левой границе и едет вместе с ней */
  .hf-layout > .hf-map-pane .hf-maparea { left: calc(var(--hf-cut) + (100% - var(--hf-cut)) / 2); }
  .hf-layout > .hf-map-pane [class$="-copyrights-pane"] { left: var(--hf-cut) !important /*!A*/; right: 0 !important /*!JS*/; width: auto !important /*!JS*/; }
  /* кнопки на карте */
  .hf-dm .hf-dm-ctl { display: flex; position: absolute; top: 14px; left: calc(var(--hf-cut) + 14px); z-index: 8; gap: 8px; }
  .hf-dm .hf-dm-f { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: var(--r-pill);
    background: var(--card); color: var(--ink); box-shadow: 0 2px 6px rgba(18,33,59,.08), 0 10px 24px rgba(18,33,59,.14);
    font: 700 15px/1 var(--font); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
  .hf-dm .hf-dm-f:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(18,33,59,.1), 0 14px 30px rgba(18,33,59,.18); }
  .hf-dm .hf-dm-f:active { transform: scale(.97); }
  .hf-dm .hf-dm-f svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; transition: stroke .18s ease; }
  .hf-dm .hf-dm-f i { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--coral); color: var(--on-accent); font: 700 12px/20px var(--font); font-style: normal; text-align: center; }
  .hf-dm .hf-dm-f i[hidden] { display: none; }
  .hf-dm .hf-dm-f.is-on { background: var(--ink); color: var(--on-accent); }
  .hf-dm .hf-dm-f.is-on svg { stroke: var(--on-accent); }
  /* стрелка — язычок на левом краю карты */
  .hf-dm .hf-dm-arrow { display: flex; align-items: center; position: absolute; left: var(--hf-cut); top: 50%; z-index: 8; height: 56px; padding: 0 10px 0 6px; border: 0;
    border-radius: 0 var(--r-m) var(--r-m) 0; background: var(--card); color: var(--ink); box-shadow: 2px 0 12px rgba(18,33,59,.16); cursor: pointer;
    transform: translateY(-50%); transition: padding .2s ease, background .2s ease; overflow: hidden; }
  .hf-dm .hf-dm-arrow svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  .hf-dm .hf-dm-arrow__t { max-width: 0; opacity: 0; white-space: nowrap; font: 600 13.5px/1 var(--font); transition: max-width .25s ease, opacity .2s ease, margin .25s ease; }
  .hf-dm .hf-dm-arrow:hover { padding-right: 14px; background: var(--paper); }
  .hf-dm .hf-dm-arrow:hover .hf-dm-arrow__t { max-width: 160px; opacity: 1; margin-left: 6px; }
  .hf-dm .hf-dm-wide .hf-dm-arrow svg { transform: rotate(180deg); }
  /* t_1a8bcd5b: строка поиска теперь над сеткой и в широком режиме не сжимается — прежние правила сжатия убраны */
  .hf-dm .hf-dm-wide .hf-list-pane { min-width: 0; }

  /* ---------- панель фильтров ---------- */
  .hf-dm-filters .hf-list-pane > :not(.hf-fpanel) { display: none !important /*!JS*/; }
  .hf-dm-filters .hf-fpanel { display: block; position: sticky; top: 16px; height: calc(100vh - 32px); animation: hfFpIn .5s .08s both cubic-bezier(.2,.8,.2,1); }
  @keyframes hfFpIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
  .hf-dm-filters #hfScrim { display: none !important /*!JS*/; }
  .hf-fpanel #hfFilterSheet { position: relative !important /*!JS*/; inset: auto !important /*!JS*/; left: auto !important /*!JS*/; right: auto !important /*!JS*/; top: auto !important /*!JS*/; bottom: auto !important /*!JS*/;
    transform: none !important /*!JS*/; width: 100% !important /*!JS*/; max-width: none; height: 100% !important /*!JS*/; max-height: none !important /*!JS*/; z-index: 1 !important /*!JS*/;
    display: flex !important /*!JS*/; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card);
    box-shadow: 0 2px 6px rgba(18,33,59,.05), 0 16px 40px rgba(18,33,59,.08); overflow: hidden; transition: none !important /*!JS*/; }
  .hf-fpanel #hfFilterSheet .hf-sheet__grab { display: none; }
  .hf-fpanel #hfFilterSheet .hf-sheet__head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px 22px; border-bottom: 0; }
  .hf-fpanel #hfFilterSheet .hf-sheet__head .hf-h2 { font: 700 22px/1.15 var(--font-display); color: var(--ink); margin: 0; }
  .hf-fpanel #hfFilterSheet .hf-sheet__sub { margin-top: 3px; font-size: 13.5px; color: var(--muted); }
  .hf-fpanel #hfFilterSheet .hf-sheet__close { display: inline-flex !important /*!JS*/; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 4px; border: 0; border-radius: 50%;
    background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; transition: background .15s ease, transform .15s ease; }
  .hf-fpanel #hfFilterSheet .hf-sheet__close:hover { background: var(--line-2); transform: rotate(90deg); }
  .hf-fpanel #hfFilterSheet .hf-snav { position: sticky; top: 0; z-index: 3; padding: 0 16px 10px; background: var(--card); box-shadow: 0 1px 0 var(--line-2); }
  .hf-fpanel #hfFilterSheet .hf-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 22px 24px; scroll-behavior: smooth; }
  .hf-fpanel #hfFilterSheet .hf-fgroup { padding: 18px 0 16px; }
  .hf-fpanel #hfFilterSheet .hf-fgroup .hf-h3, .hf-fpanel #hfFilterSheet .hf-chips-label { font: 700 16px/1.25 var(--font); color: var(--ink); margin: 0 0 12px; }
  .hf-fpanel #hfFilterSheet .hf-chip { min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card);
    font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease; }
  .hf-fpanel #hfFilterSheet .hf-chip:hover { border-color: var(--line-strong); background: var(--paper); }
  .hf-fpanel #hfFilterSheet .hf-chip:active { transform: scale(.97); }
  .hf-fpanel #hfFilterSheet .hf-chip.hf-active { border-color: var(--blue-deep); background: var(--blue-soft); color: var(--blue-deep); }
  .hf-fpanel #hfFilterSheet .hf-sheet__foot { flex: none; display: flex; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line-2); background: var(--card); }
  .hf-fpanel #hfFilterSheet .hf-sheet__foot .hf-btn--p, .hf-fpanel #hfFilterSheet #hfFilterSheetApply { flex: 1 1 auto; height: 52px; border: 0; border-radius: var(--r-m); background: var(--blue-deep);
    color: var(--on-accent); font: 700 16px/1 var(--font); cursor: pointer; box-shadow: 0 6px 16px rgba(43,78,162,.25); transition: filter .15s ease, transform .15s ease; }
  .hf-fpanel #hfFilterSheet #hfFilterSheetApply:hover { filter: brightness(1.08); }
  .hf-fpanel #hfFilterSheet #hfFilterSheetApply:active { transform: scale(.985); }
  /* 30.09: «Фильтры» над выдачей снова видна — открывает панель слева от широкой карты (hf-deskmap.js) */
  /* ряд инструментов одной строкой: сортировка справа, не влезающие чипы прячет fitTools() */
  #hfTools.hf-tools--row .hf-sort-wrap { order: 99; margin-left: auto; }
  #hfTools.hf-tools--row .hf-qchip[hidden] { display: none !important /*!A*/; }
}
/* узкий список (карта расширена): карточка перестраивается по ширине колонки (container query) — фото сверху,
   цена и кнопка в ряд; переключение происходит во время анимации, без рывка всей страницы */
@media (min-width: 1280px) {
  .hf-dm .hf-list-pane { container-type: inline-size; container-name: hflist; }
}
@container hflist (max-width: 600px) {
  .hf-card.hf-card { display: flex !important /*!JS*/; flex-direction: column; }
  .hf-card.hf-card .hf-card__ph { width: 100% !important /*!JS*/; height: 210px !important /*!JS*/; flex: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .hf-card.hf-card .hf-card__track, .hf-card.hf-card .hf-card__track img { height: 210px !important /*!JS*/; }
  .hf-card.hf-card .hf-card__body { width: auto !important /*!JS*/; flex: 1 1 auto; }
  .hf-card.hf-card .hf-card__main > * { max-width: none; width: auto !important /*!JS*/; }
  .hf-card.hf-card .hf-card__side { display: flex !important /*!JS*/; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; width: auto !important /*!JS*/; }
  .hf-card.hf-card .hf-card__price { width: auto !important /*!JS*/; }
  .hf-dsearch--v2 .sc-field__label::after { display: none !important /*!JS*/; }
  .hf-dsearch--v2 .hf-dsearch__city, .hf-dsearch--v2 .sc-field { padding: 0 10px 0 12px; gap: 8px; }
  .hf-dsearch--v2 .hf-ds-caret { display: none; }
  .hf-dsearch--v2 .hf-dsearch__city b, .hf-dsearch--v2 .hf-ds-sum { font-size: 14px; }
  .hf-sortrow, .hf-qchips { flex-wrap: wrap; }
}
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
  .hf-dm-filters .hf-fpanel { animation: none; }
  .hf-layout > .hf-map-pane, .hf-layout > .hf-list-pane { transition: none; }
}


/* ########## раздел: бывший hotels-list-anim.css ########## */
/* =============================================================================
   Сценка подбора отелей на странице списка. Задача t_25939f89.
   Версия 5 (19.09.2026) — доводка по живому просмотру версии 4.

   Постановка Данила (без изменений):
     «Появляется планетка, на ней машинка, фотки прилетают. Потом планетка
      зумится, опускается на дно экрана, видно только её часть — и машинка
      едет по ней. Планета крутится вместе с фотками, машина ставит штампики
      гуд или не гуд. Никуда ничего не улетает — со штампиком фотка просто
      пропадает, машинка доезжает до следующей».

   ЧТО ИЗМЕНИЛОСЬ ПО СРАВНЕНИЮ С ВЕРСИЕЙ 4
   1. Одна линия грунта на обе фазы:
        --hf-sur = --hf-big * --hf-k   (радиус планеты на экране)
        --hf-grd = --hf-sur + 3px      (дорога)
        --hf-r   = --hf-grd + --hf-spot / 2
      Карточки, придорожный декор и машина стоят на --hf-grd, поэтому во
      вступлении, где планета всего 68 px, ничего не парит над пустотой, как
      это было видно на проде. Зум разворачивает кольцо в дорогу непрерывно —
      один и тот же переход, ничего не пересобирается.
   2. Небо. Над горизонтом было полэкрана пустого фона; теперь там градиент
      неба, солнце и плывущие облака. HUD переехал с верхнего края к
      горизонту и привязан к той же --hf-cap, что и машина, поэтому на
      телефоне и на десктопе держится на одном расстоянии от сцены.
   3. Вердикты расходятся по подаче: ✅ вспыхивает и растворяется вверх,
      ❌ сереет, кренится и проваливается. Плюс под годной карточкой всплывает
      настоящая цена за период из новой выдачи.
   4. Машина отвечает на вердикт: подпрыгивает на ✅, мотает на ❌, перед
      остановкой у отеля даёт стоп-сигнал.

   ПОЧЕМУ ПЛАНЕТА — ВЕКТОР, А НЕ ЭМОДЗИ (замечание Данила 19.09: «земля пиздец
   пиксельная, прям невозможно»)
   Эмодзи 🌍 — растровая картинка: в Apple Color Emoji и Noto её исходник около
   160 px. Шар на экране — 680 px на телефоне и 1040 px на десктопе, то есть
   растяжение в четыре-шесть раз; отсюда и квадраты. Это свойство исходника, а
   не настройка: ни кегль, ни отрисовка через канву, ни сглаживающий фильтр
   этого не лечат — фильтр лишь меняет квадраты на мыло. Поэтому шар нарисован
   в SVG и лежит здесь data-URI: океан градиентом, восемнадцать материков
   разложены по кольцу у самой кромки (в кадре видна только шапка планеты, и
   они один за другим проплывают через неё), блик и затемнение по краю.
   Пересобрать форму: node /root/hf-planet-gen.js --inject <этот файл>
   (генератор детерминированный, сверяется по sha256).
   Побочная польза: бокс точно равен шару, и линия грунта ложится по кромке без
   подгонки под метрики шрифта — раньше подобранный на глаз коэффициент кегля
   дважды врал: сначала планета уезжала вниз, потом дорога с карточками и
   машиной повисла над её кромкой на четыре десятка пикселей.

   ПОЧЕМУ ЗДЕСЬ НЕТ @property (живой разбор 19.09)
   Первая сборка версии 4 регистрировала --hf-r/--hf-k/--hf-ty через @property
   и вешала на них transition, чтобы планета плавно росла. На проде вышло так:
   у .hf-globe переменная уже 1, а у .hf-globe__world и у самой планеты
   по-прежнему 0.2 — анимируемая типизированная переменная перестала доезжать
   до потомков, и планета навсегда осталась размером со вступление. Поэтому
   переменные обычные (меняются мгновенно), а плавность даёт переход самого
   transform: анимируется результат, а не переменная.

   Токены — из UI-кита (/js/vse-ui.css). Здесь свои только полупрозрачные
   подложки, свет и краски неба: в ките их нет по природе.
   ============================================================================= */

/* =============================================================================
   1. ЗАСТАВКА
   ============================================================================= */
.hf-globe{
  position:fixed;inset:0;z-index:85;
  display:none;overflow:hidden;
  /* Небо, а не серая подложка: Данил просил «красочно, ярко, живенько». */
  /* t_cf372255: те же 4 ступени неба, но из токенов кита (--blue-light/--blue-soft/--card) — без своих хексов. */
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue-light) 36%,var(--card)) 0%,color-mix(in srgb,var(--blue-light) 20%,var(--card)) 38%,var(--blue-soft) 68%,var(--card) 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font);color:var(--ink);
  opacity:0;transition:opacity .28s ease;
  /* Планета — эмодзи, а эмодзи растровый: чем крупнее, тем заметнее он
     разваливается на квадраты (на 1233 px это было видно невооружённым
     глазом). 340 — компромисс: шар остаётся горизонтом, картинка держится
     чисто, а видимая дуга даёт восемь карточек в кадре телефона. */
  /* Сколько планеты видно над нижним краем. От вьюпорта, а не константой:
     на 812 px это 211, на маленьком 667 — 173, и сцена нигде не занимает
     то треть экрана, то половину. */
  --hf-cap:clamp(150px,26vh,240px);
  --hf-big:340px;                    /* радиус планеты в фазе полёта */
  --hf-spot:48px;                    /* размер карточки отеля */
  --hf-k:.2;                         /* текущий масштаб планеты */
  --hf-ty:0px;                       /* смещение центра планеты вниз */
  /* Одна линия грунта на обе фазы. --hf-sur — радиус планеты на экране,
     --hf-grd — сама дорога (чуть выше кромки), --hf-r — центр карточки,
     поднятый над дорогой на половину её высоты. Раньше вместо этого был
     постоянный зазор в 30 px: на большой планете его не видно, а во
     вступлении, где планета 68 px, машина висела в воздухе на полрадиуса. */
  --hf-sur:calc(var(--hf-big) * var(--hf-k));
  --hf-grd:calc(var(--hf-sur) + 3px);
  --hf-r:calc(var(--hf-grd) + var(--hf-spot) / 2);
}
.hf-globe.is-on{display:block;opacity:1;}
.hf-globe.is-out{opacity:0;}

/* Фаза полёта: планета выросла и опустилась, видна только шапка. */
.hf-globe.is-cruise{
  --hf-k:1;
  --hf-ty:calc(50vh + var(--hf-big) - var(--hf-cap));
}

/* --- Небо: то, что раньше было пустым фоном ---------------------------------- */
.hf-globe__sky{position:absolute;left:0;right:0;top:0;bottom:var(--hf-cap);pointer-events:none;overflow:hidden;}
.hf-globe__sun{
  position:absolute;right:8%;top:7%;font-size:40px;line-height:1;
  filter:drop-shadow(0 0 22px rgba(255,214,120,.85));
  animation:hfSunBeat 3.4s ease-in-out infinite alternate;
}
@keyframes hfSunBeat{from{transform:scale(1);}to{transform:scale(1.07);}}
.hf-globe__cloud{position:absolute;font-size:34px;line-height:1;opacity:.92;will-change:transform;}
.hf-globe__cloud--a{top:12%;font-size:46px;opacity:.85;animation:hfDrift 26s linear infinite;}
.hf-globe__cloud--b{top:29%;font-size:66px;animation:hfDrift 34s linear infinite -12s;}
.hf-globe__cloud--c{top:46%;font-size:36px;opacity:.75;animation:hfDrift 44s linear infinite -26s;}
@keyframes hfDrift{from{transform:translateX(-24vw);}to{transform:translateX(124vw);}}
.hf-globe__bird{position:absolute;top:20%;font-size:26px;opacity:.9;animation:hfFly 19s linear infinite -6s;}
@keyframes hfFly{
  0%{transform:translate(118vw,0) scaleX(-1);}
  50%{transform:translate(52vw,-22px) scaleX(-1);}
  100%{transform:translate(-18vw,4px) scaleX(-1);}
}

/* --- Мир: планета, кольцо карточек, машина ----------------------------------- */
.hf-globe__world{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-50%,-50%) translateY(var(--hf-ty));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}

/* ПЛАНЕТА — ЭМОДЗИ (решение Данила 19.09). Масштаб и позиция на обёртке,
   вращение — на самом символе: смешивать scale и rotate на одном элементе
   нельзя, transform переписал бы сам себя. */
.hf-globe__planet{
  position:absolute;left:50%;top:50%;
  width:calc(var(--hf-big) * 2);height:calc(var(--hf-big) * 2);
  margin:calc(var(--hf-big) * -1) 0 0 calc(var(--hf-big) * -1);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:scale(var(--hf-k));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}
/* Шар — вектор инлайном (разбор «почему не эмодзи» — в шапке файла). Бокс
   точно равен шару, поэтому подгонка под метрики шрифта больше не нужна.
   Поворот шагами вместе с лентой (--hf-spin задаёт JS): непрерывная анимация
   здесь была источником всех «то проехал и ничего не сделал, то оценил» —
   её фазу нельзя ни остановить, ни подогнать под приход ответа. */
.hf-globe__emoji{
  display:block;
  width:calc(var(--hf-big) * 2);height:calc(var(--hf-big) * 2);
  background:center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3CradialGradient id='sea' cx='36%' cy='30%' r='78%'%3E%3Cstop offset='0' stop-color='%238FDAFF'/%3E%3Cstop offset='42%' stop-color='%232E90E0'/%3E%3Cstop offset='78%' stop-color='%231667BE'/%3E%3Cstop offset='100%' stop-color='%230C4A96'/%3E%3C/radialGradient%3E%3CradialGradient id='land' cx='40%' cy='32%' r='80%'%3E%3Cstop offset='0' stop-color='%238CD86A'/%3E%3Cstop offset='60%' stop-color='%235FBF52'/%3E%3Cstop offset='100%' stop-color='%233E9B45'/%3E%3C/radialGradient%3E%3CradialGradient id='shade' cx='50%' cy='50%' r='50%'%3E%3Cstop offset='72%' stop-color='%23062F63' stop-opacity='0'/%3E%3Cstop offset='100%' stop-color='%23062F63' stop-opacity='.45'/%3E%3C/radialGradient%3E%3CradialGradient id='gloss' cx='34%' cy='26%' r='42%'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='100%' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='ball'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23sea)'/%3E%3Cg clip-path='url(%23ball)'%3E%3Cpath d='M192.0 129.4C191.5 130.9 188.0 129.7 186.0 129.0C184.0 128.3 181.7 126.8 180.0 125.2C178.3 123.6 176.9 121.2 175.9 119.4C175.0 117.7 175.8 115.5 174.5 114.7C173.2 113.8 170.8 115.4 168.3 114.6C165.9 113.7 161.2 111.3 159.9 109.5C158.6 107.6 159.9 104.9 160.7 103.5C161.5 102.0 163.0 100.9 164.6 100.6C166.1 100.3 168.3 101.0 169.9 101.6C171.5 102.2 173.4 105.1 174.2 104.5C175.0 103.9 173.8 99.7 174.7 97.9C175.7 96.1 178.1 93.3 179.8 93.6C181.6 94.0 183.8 97.9 185.0 100.1C186.2 102.2 187.0 104.8 187.2 106.7C187.3 108.7 186.6 110.4 185.9 111.5C185.2 112.7 182.6 112.0 183.1 113.5C183.5 114.9 187.2 117.4 188.7 120.1C190.2 122.7 192.4 127.9 192.0 129.4Z' fill='url(%23land)'/%3E%3Cpath d='M150.8 153.5C149.8 152.4 149.4 150.6 149.1 149.1C148.8 147.6 148.5 146.0 149.1 144.6C149.8 143.1 152.3 141.4 153.1 140.3C154.0 139.3 154.6 139.5 154.3 138.3C154.1 137.0 151.6 134.7 151.4 132.8C151.3 130.9 152.3 128.2 153.4 127.0C154.5 125.7 156.5 125.6 158.1 125.1C159.7 124.5 161.5 123.5 163.0 123.6C164.5 123.8 166.0 124.8 166.9 125.9C167.9 127.0 168.3 128.8 168.6 130.3C168.9 131.8 169.3 133.4 168.6 134.9C167.9 136.3 165.5 138.0 164.6 139.1C163.7 140.1 163.1 139.9 163.4 141.1C163.7 142.4 166.1 144.7 166.3 146.6C166.4 148.5 165.4 151.2 164.3 152.5C163.2 153.7 161.2 153.8 159.6 154.3C158.0 154.9 156.2 155.9 154.7 155.8C153.2 155.6 151.7 154.6 150.8 153.5Z' fill='url(%23land)'/%3E%3Cpath d='M166.0 176.6C166.3 178.0 162.8 178.5 160.8 178.8C158.7 179.0 156.0 179.1 153.6 178.1C151.1 177.1 147.8 173.0 146.0 172.7C144.2 172.5 144.4 176.2 142.7 176.8C141.0 177.4 138.1 177.0 135.6 176.4C133.1 175.7 128.9 174.5 127.8 173.1C126.7 171.6 128.6 169.0 129.1 167.6C129.7 166.1 131.4 165.7 131.2 164.6C131.0 163.4 128.2 161.7 127.9 160.5C127.6 159.3 128.9 158.6 129.5 157.5C130.1 156.4 130.0 154.1 131.6 153.9C133.2 153.8 136.9 156.6 139.1 156.8C141.3 157.0 142.8 154.7 144.6 155.1C146.5 155.6 148.6 158.0 150.3 159.3C151.9 160.6 153.8 161.7 154.6 162.9C155.3 164.2 153.9 165.5 154.7 166.7C155.5 168.0 157.3 168.7 159.2 170.3C161.0 171.9 165.8 175.2 166.0 176.6Z' fill='url(%23land)'/%3E%3Cpath d='M108.6 184.2C107.4 184.3 106.6 183.4 105.1 183.5C103.6 183.7 101.4 185.1 99.5 184.9C97.6 184.6 94.1 183.9 93.6 182.2C93.1 180.5 95.0 176.5 96.5 174.7C98.0 172.8 101.6 172.2 102.4 170.9C103.2 169.7 101.8 168.9 101.5 167.1C101.2 165.3 100.0 161.7 100.5 159.9C101.0 158.2 103.0 157.3 104.5 156.7C106.0 156.1 107.8 156.1 109.4 156.3C111.0 156.4 113.0 156.2 114.0 157.5C115.0 158.8 115.3 162.0 115.4 163.9C115.5 165.8 113.9 167.7 114.7 168.8C115.4 169.9 118.2 169.2 120.1 170.5C121.9 171.8 125.4 174.6 125.7 176.5C126.0 178.3 123.4 180.8 121.7 181.7C119.9 182.6 116.8 181.6 115.2 181.8C113.5 182.1 113.0 182.8 111.9 183.2C110.8 183.6 109.7 184.2 108.6 184.2Z' fill='url(%23land)'/%3E%3Cpath d='M64.0 182.1C62.9 181.6 61.5 181.2 60.3 180.3C59.2 179.4 57.0 178.1 57.1 176.5C57.1 175.0 58.7 172.4 60.6 171.1C62.6 169.8 66.5 169.4 68.7 168.8C70.9 168.2 72.0 168.3 73.6 167.4C75.2 166.6 76.6 164.4 78.2 163.7C79.8 162.9 81.8 162.9 83.2 163.1C84.6 163.2 85.1 164.3 86.8 164.5C88.6 164.7 92.1 163.6 93.7 164.2C95.3 164.8 97.6 166.4 96.5 168.0C95.4 169.7 89.9 172.8 87.2 174.3C84.6 175.7 81.4 175.3 80.6 176.5C79.9 177.7 82.9 179.4 82.7 181.7C82.5 184.0 81.3 188.7 79.5 190.2C77.7 191.7 73.8 191.5 72.0 190.8C70.2 190.0 69.7 187.0 68.9 185.8C68.0 184.6 67.7 184.0 66.9 183.4C66.1 182.8 65.0 182.6 64.0 182.1Z' fill='url(%23land)'/%3E%3Cpath d='M62.8 162.1C61.1 162.0 57.8 159.6 56.2 158.7C54.7 157.8 54.2 156.6 53.3 156.8C52.4 157.1 52.0 159.4 50.7 160.2C49.4 160.9 47.0 161.9 45.4 161.5C43.9 161.2 42.2 159.4 41.3 158.0C40.5 156.5 40.2 154.4 40.5 152.9C40.7 151.5 42.0 150.1 43.0 149.2C43.9 148.4 45.9 148.6 46.4 147.9C46.9 147.1 46.3 146.5 46.1 144.9C45.9 143.2 44.7 139.6 45.2 138.0C45.8 136.3 47.8 134.7 49.3 135.0C50.8 135.4 53.1 138.3 54.2 140.0C55.4 141.7 55.5 144.1 56.1 145.4C56.7 146.7 57.0 147.0 57.8 147.8C58.6 148.5 59.6 148.9 60.8 149.9C61.9 151.0 63.6 152.2 64.6 153.8C65.6 155.4 67.1 158.1 66.8 159.5C66.5 160.8 64.6 162.2 62.8 162.1Z' fill='url(%23land)'/%3E%3Cpath d='M21.6 140.0C21.3 138.5 22.1 136.7 21.2 136.6C20.3 136.5 18.1 138.9 16.2 139.1C14.2 139.3 10.0 139.4 9.5 137.9C9.0 136.3 11.8 131.9 13.4 129.9C14.9 128.0 17.3 126.8 18.8 126.0C20.3 125.1 21.5 125.9 22.3 125.0C23.1 124.2 22.9 123.2 23.7 121.0C24.5 118.7 26.0 113.0 27.2 111.6C28.4 110.3 29.8 112.2 30.8 113.1C31.8 113.9 32.6 115.2 33.1 116.6C33.6 118.0 34.1 119.6 33.9 121.3C33.8 123.0 32.4 125.2 32.2 126.8C32.0 128.3 32.9 129.3 32.7 130.6C32.5 131.9 31.4 132.9 31.0 134.7C30.6 136.6 31.0 139.1 30.4 141.5C29.8 143.9 28.5 148.6 27.2 149.2C26.0 149.8 24.0 146.8 23.1 145.2C22.1 143.7 21.9 141.4 21.6 140.0Z' fill='url(%23land)'/%3E%3Cpath d='M50.0 99.4C49.0 101.0 45.2 101.4 44.0 102.9C42.7 104.5 44.2 107.8 42.7 108.8C41.2 109.8 37.3 109.1 34.9 108.7C32.6 108.4 30.3 107.6 28.5 106.8C26.7 105.9 25.7 104.4 24.1 103.8C22.6 103.1 21.4 103.1 19.2 102.8C17.0 102.4 12.1 102.6 11.0 101.5C9.8 100.4 13.0 97.8 12.5 96.0C12.1 94.3 9.3 93.0 8.3 90.9C7.2 88.9 4.9 85.2 6.2 83.9C7.4 82.6 13.3 83.6 15.9 83.3C18.6 83.1 20.0 82.3 22.0 82.3C23.9 82.3 25.9 82.9 27.8 83.2C29.7 83.5 31.6 83.5 33.2 84.1C34.8 84.7 36.4 85.8 37.5 86.9C38.5 88.0 37.2 89.7 39.3 90.8C41.4 91.9 48.3 92.1 50.1 93.5C51.9 95.0 51.0 97.8 50.0 99.4Z' fill='url(%23land)'/%3E%3Cpath d='M37.0 72.4C36.2 73.1 35.8 75.1 34.9 75.2C34.0 75.3 32.4 74.1 31.4 73.1C30.4 72.0 30.1 69.8 29.0 69.1C27.9 68.3 26.4 69.2 24.8 68.5C23.1 67.8 19.8 66.3 19.2 64.9C18.7 63.4 20.1 60.5 21.4 59.6C22.7 58.6 26.3 59.7 27.1 59.0C27.9 58.4 26.6 57.5 26.1 55.5C25.6 53.5 23.9 48.8 24.1 47.2C24.4 45.5 26.5 45.0 27.8 45.6C29.1 46.2 31.0 49.1 32.2 50.7C33.3 52.2 34.0 53.6 34.8 54.7C35.6 55.9 36.2 56.5 37.0 57.5C37.8 58.5 38.7 59.2 39.7 60.5C40.7 61.8 42.4 63.5 43.0 65.0C43.5 66.6 43.7 68.8 43.1 69.8C42.5 70.9 40.5 70.7 39.5 71.2C38.4 71.6 37.7 71.7 37.0 72.4Z' fill='url(%23land)'/%3E%3Cpath d='M42.6 48.1C39.9 47.3 33.7 45.5 33.6 43.8C33.5 42.2 39.5 39.6 42.0 38.2C44.5 36.9 46.7 36.3 48.5 35.7C50.4 35.1 51.9 35.4 53.3 34.5C54.7 33.7 55.2 31.6 56.7 30.6C58.2 29.5 60.6 28.2 62.3 28.2C64.0 28.2 64.9 30.2 66.9 30.6C68.9 31.1 73.0 29.8 74.3 30.8C75.7 31.8 74.9 34.8 74.9 36.6C74.9 38.5 75.7 40.4 74.1 41.7C72.6 43.0 66.6 43.3 65.5 44.5C64.3 45.7 67.0 46.8 67.2 48.9C67.5 51.0 68.2 54.6 67.1 56.9C66.1 59.2 63.1 62.7 60.9 62.8C58.7 63.0 55.1 60.3 54.0 57.8C53.0 55.3 55.2 49.3 54.5 47.7C53.9 46.2 52.2 48.4 50.2 48.5C48.2 48.5 45.4 48.9 42.6 48.1Z' fill='url(%23land)'/%3E%3Cpath d='M94.4 25.7C94.6 26.8 97.2 29.3 97.4 30.8C97.6 32.3 97.2 34.5 95.8 34.7C94.4 34.8 91.1 32.6 89.2 31.6C87.4 30.6 85.9 29.7 84.6 28.7C83.3 27.8 82.2 26.7 81.4 25.8C80.6 24.8 81.1 23.9 79.7 23.0C78.3 22.2 74.9 21.7 73.0 20.5C71.1 19.3 68.3 16.9 68.2 15.8C68.1 14.6 71.2 14.3 72.6 13.8C74.0 13.4 75.2 13.1 76.6 13.1C77.9 13.1 79.3 13.2 80.6 13.5C81.8 13.8 83.0 15.1 84.2 14.9C85.4 14.7 86.2 12.6 87.9 12.3C89.6 12.0 92.9 12.2 94.3 13.2C95.8 14.2 96.0 16.8 96.5 18.2C97.0 19.7 97.2 20.8 97.2 21.8C97.2 22.8 96.8 23.7 96.3 24.3C95.9 25.0 94.2 24.7 94.4 25.7Z' fill='url(%23land)'/%3E%3Cpath d='M123.8 51.4C122.1 51.4 120.3 49.3 118.4 48.8C116.6 48.3 114.2 49.7 112.7 48.4C111.3 47.2 110.2 43.8 109.7 41.4C109.2 39.1 109.2 36.3 109.9 34.3C110.5 32.3 113.5 30.9 113.8 29.4C114.1 27.9 112.2 27.1 111.5 25.1C110.8 23.2 109.0 19.0 109.5 17.7C110.0 16.4 113.3 18.9 114.5 17.5C115.7 16.1 115.3 11.6 116.6 9.5C117.9 7.4 120.6 4.3 122.4 4.8C124.1 5.3 125.8 10.1 127.0 12.6C128.1 15.1 128.8 17.5 129.2 19.7C129.6 21.9 128.9 24.1 129.2 25.9C129.5 27.7 131.2 29.2 131.0 30.6C130.8 31.9 128.7 33.1 127.9 34.1C127.1 35.1 125.9 34.1 126.1 36.6C126.3 39.1 129.3 46.6 129.0 49.1C128.6 51.5 125.6 51.5 123.8 51.4Z' fill='url(%23land)'/%3E%3Cpath d='M144.7 50.2C144.9 48.4 146.4 46.2 146.2 45.3C146.0 44.4 143.8 45.3 143.5 44.6C143.1 44.0 143.7 42.4 144.1 41.4C144.5 40.3 145.2 39.2 145.9 38.2C146.6 37.3 147.5 36.8 148.3 35.8C149.0 34.8 149.3 34.0 150.3 32.1C151.3 30.3 153.0 25.7 154.3 24.6C155.6 23.5 157.5 24.5 158.3 25.6C159.0 26.6 158.7 29.3 158.8 30.8C158.8 32.3 158.6 33.4 158.5 34.5C158.5 35.5 158.3 36.1 158.6 36.9C159.0 37.7 160.9 38.3 160.7 39.2C160.5 40.1 158.5 41.6 157.5 42.4C156.6 43.3 155.7 43.2 155.0 44.5C154.4 45.7 154.5 48.3 153.6 50.0C152.7 51.7 151.0 53.5 149.6 54.5C148.2 55.5 145.8 56.8 145.0 56.1C144.1 55.4 144.5 52.0 144.7 50.2Z' fill='url(%23land)'/%3E%3Cpath d='M172.3 79.3C171.0 79.7 170.4 79.0 170.1 81.0C169.7 83.0 171.1 89.7 169.9 91.4C168.8 93.1 164.8 92.9 163.2 91.1C161.5 89.3 161.0 83.1 160.2 80.8C159.4 78.5 159.4 78.2 158.3 77.3C157.2 76.4 155.3 76.3 153.7 75.3C152.1 74.2 150.2 72.7 148.9 70.9C147.6 69.0 145.1 65.6 145.8 64.3C146.5 63.0 150.8 62.9 153.0 63.0C155.2 63.1 158.0 65.6 159.3 64.9C160.5 64.2 159.3 59.8 160.3 58.7C161.4 57.6 164.0 57.3 165.4 58.1C166.9 59.0 167.5 62.7 169.0 63.9C170.4 65.2 172.3 64.5 174.0 65.4C175.7 66.2 178.1 67.6 179.0 69.1C179.9 70.6 179.4 72.7 179.3 74.4C179.1 76.0 179.4 78.0 178.2 78.8C177.0 79.6 173.7 78.9 172.3 79.3Z' fill='url(%23land)'/%3E%3Cpath d='M136.8 145.4C135.8 145.1 133.8 141.3 132.8 140.3C131.9 139.4 131.7 139.7 130.9 139.7C130.1 139.7 128.6 140.8 127.9 140.4C127.1 140.0 127.0 138.2 126.3 137.1C125.6 136.1 124.1 135.2 123.7 134.1C123.3 133.0 123.5 131.5 123.7 130.4C123.9 129.3 124.3 128.2 124.9 127.5C125.5 126.9 126.5 126.6 127.3 126.5C128.0 126.4 129.0 127.7 129.5 126.8C130.0 125.9 129.8 121.8 130.5 121.1C131.2 120.3 132.9 121.2 133.7 122.2C134.6 123.1 134.8 125.6 135.5 126.7C136.2 127.8 137.5 127.9 137.9 128.9C138.3 129.8 137.7 131.3 137.8 132.4C137.9 133.4 138.5 134.3 138.6 135.3C138.8 136.3 138.9 137.4 138.9 138.5C138.8 139.7 138.9 141.2 138.5 142.3C138.2 143.4 137.7 145.8 136.8 145.4Z' fill='url(%23land)'/%3E%3Cpath d='M54.6 114.4C53.7 114.5 51.9 115.1 51.0 114.8C50.1 114.5 49.2 113.6 49.1 112.7C48.9 111.7 49.0 110.1 50.0 109.2C51.0 108.3 53.7 107.9 54.9 107.4C56.1 107.0 56.6 106.7 57.3 106.5C58.0 106.2 58.4 106.7 59.2 105.9C60.0 105.2 61.0 102.7 62.1 101.8C63.2 100.9 64.8 100.4 65.8 100.5C66.8 100.6 67.9 101.2 68.0 102.2C68.1 103.1 67.2 105.0 66.4 106.1C65.7 107.3 64.0 108.3 63.7 109.1C63.3 109.8 64.2 110.0 64.3 110.7C64.4 111.4 64.5 112.1 64.3 113.3C64.1 114.5 64.0 117.0 63.2 117.9C62.4 118.7 60.5 118.6 59.4 118.6C58.3 118.5 57.2 118.2 56.7 117.5C56.2 116.8 56.7 114.9 56.4 114.4C56.0 113.9 55.5 114.3 54.6 114.4Z' fill='url(%23land)'/%3E%3Cpath d='M103.6 61.6C103.0 62.2 102.3 63.1 101.3 63.1C100.2 63.2 98.4 61.4 97.4 61.6C96.4 61.9 96.2 64.5 95.2 64.8C94.2 65.2 92.6 64.2 91.4 63.6C90.2 63.0 89.1 62.1 88.0 61.2C86.9 60.3 84.9 59.3 84.8 58.3C84.7 57.2 87.2 56.0 87.3 54.9C87.4 53.9 85.6 53.0 85.3 52.0C85.0 51.1 85.2 50.0 85.5 49.2C85.8 48.3 86.7 47.9 87.3 47.0C87.9 46.1 88.1 43.7 89.2 43.7C90.3 43.8 92.6 46.5 93.9 47.3C95.2 48.1 96.0 48.1 97.0 48.6C98.0 49.1 99.2 49.7 99.9 50.5C100.7 51.2 100.5 52.2 101.7 53.2C102.8 54.1 106.3 55.0 106.9 56.0C107.6 57.1 106.0 58.3 105.4 59.2C104.9 60.2 104.3 60.9 103.6 61.6Z' fill='url(%23land)'/%3E%3Cpath d='M93.5 143.4C93.0 143.5 91.6 146.2 91.0 146.4C90.3 146.6 90.3 145.2 89.8 144.6C89.2 144.1 88.2 143.9 87.7 143.1C87.1 142.3 86.2 140.8 86.6 139.8C86.9 138.8 88.8 137.7 89.7 137.1C90.6 136.6 91.5 136.7 92.1 136.5C92.7 136.3 93.0 137.1 93.4 136.1C93.7 135.0 93.7 131.6 94.3 130.3C94.9 128.9 96.6 127.4 97.2 127.8C97.8 128.2 97.6 131.5 98.0 132.6C98.4 133.7 99.3 133.5 99.4 134.3C99.5 135.1 99.0 136.6 98.7 137.4C98.4 138.3 97.5 138.7 97.6 139.5C97.8 140.3 99.2 141.1 99.5 142.3C99.8 143.4 99.8 145.2 99.5 146.4C99.1 147.7 98.2 149.7 97.4 149.6C96.6 149.5 95.2 146.8 94.5 145.7C93.9 144.7 94.1 143.3 93.5 143.4Z' fill='url(%23land)'/%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23shade)'/%3E%3Cellipse cx='68' cy='52' rx='52' ry='38' fill='url(%23gloss)'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 26px 60px rgba(13,42,98,.3));
  transform-origin:50% 50%;
  transform:rotate(var(--hf-spin,0deg));
  transition:transform var(--hf-step,.52s) cubic-bezier(.34,.06,.2,1);
}

/* Атмосфера — тонкий светящийся ободок над кромкой. */
.hf-globe__atmo{
  position:absolute;left:50%;top:50%;
  width:calc(var(--hf-big) * 2 + 26px);height:calc(var(--hf-big) * 2 + 26px);
  margin:calc((var(--hf-big) * -1) - 13px) 0 0 calc((var(--hf-big) * -1) - 13px);
  border-radius:50%;pointer-events:none;
  transform:scale(var(--hf-k));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 42px 10px rgba(96,160,255,.35), inset 0 0 26px rgba(150,200,255,.35);
}

/* --- Кольцо: карточки и дорога, крутится как поверхность --------------------- */
/* Лента едет теми же шагами и тем же значением --hf-spin, что и планета:
   иначе поверхность и то, что на ней стоит, разъезжаются. */
.hf-globe__ring{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--hf-spin,0deg));
  transition:transform var(--hf-step,.52s) cubic-bezier(.34,.06,.2,1);
}

/* Дорога по поверхности: пунктир бежит вместе с кольцом. */
.hf-globe__road{
  position:absolute;left:50%;top:50%;
  width:calc(var(--hf-grd) * 2);height:calc(var(--hf-grd) * 2);
  margin:calc(var(--hf-grd) * -1) 0 0 calc(var(--hf-grd) * -1);
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.62);
  opacity:.45;
  /* width/height и отрицательные margin считаются от --hf-grd: переход по ним
     и даёт плавное «разворачивание» дороги вместе с ростом планеты. */
  transition:opacity .5s ease,
             width 1.05s cubic-bezier(.22,1,.36,1),
             height 1.05s cubic-bezier(.22,1,.36,1),
             margin 1.05s cubic-bezier(.22,1,.36,1);
}
.hf-globe.is-cruise .hf-globe__road{opacity:1;}

/* Карточка отеля стоит на поверхности: наклон = наклону планеты в этой точке. */
.hf-globe__spot{
  position:absolute;left:0;top:0;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--hf-r) * -1));
  transition:transform .95s cubic-bezier(.22,1,.36,1);
}
.hf-globe__card{
  position:absolute;left:0;top:0;
  width:var(--hf-spot);height:var(--hf-spot);
  margin:calc(var(--hf-spot) / -2) 0 0 calc(var(--hf-spot) / -2);
  border-radius:13px;overflow:hidden;
  background:var(--card) center/cover no-repeat;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 16px rgba(9,26,58,.28);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-15);
  transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .42s ease,box-shadow .35s ease,filter .42s ease,border-color .3s ease;
}
/* Прилёт со своего места на странице: стартовое смещение считает JS. */
.hf-globe__spot.is-arriving .hf-globe__card{
  transform:translate(var(--dx),var(--dy)) scale(var(--s));
  opacity:.55;
}
/* Машина поравнялась — карточка подаётся вперёд и подсвечивается. */
.hf-globe__spot.is-near .hf-globe__card{
  transform:translateY(-7px) scale(1.16);
  box-shadow:0 12px 26px rgba(9,26,58,.34),0 0 0 3px rgba(255,255,255,.55);
}
/* Ждём ответ у ворот: стучимся. Раньше машина просто стояла, и пауза
   читалась как подвисшая анимация. */
.hf-globe__spot.is-knock .hf-globe__card{animation:hfKnock .52s ease-in-out infinite;}
@keyframes hfKnock{
  0%,100%{transform:translateY(-4px) scale(1.1) rotate(0deg);}
  40%{transform:translateY(-6px) scale(1.1) rotate(-3deg);}
  70%{transform:translateY(-3px) scale(1.1) rotate(2.5deg);}
}
.hf-globe__spot.is-knock::before{
  content:'✊';position:absolute;left:calc(var(--hf-spot) / 2 - 2px);top:calc(var(--hf-spot) / -2 - 2px);
  font-size:15px;line-height:1;animation:hfKnockHand .52s ease-in-out infinite;
}
@keyframes hfKnockHand{0%,100%{transform:translate(0,0);}45%{transform:translate(-5px,2px);}}

/* Вердикты уходят по-разному: годный вспыхивает и растворяется вверх,
   негодный сереет, кренится и проваливается. В версии 4 оба гасли одинаково,
   и разница между ✅ и ❌ читалась только по цвету рамки. */
.hf-globe__spot.is-ok .hf-globe__card{border-color:rgba(74,222,128,.95);box-shadow:0 0 22px rgba(34,197,94,.6);}
.hf-globe__spot.is-no .hf-globe__card{border-color:rgba(248,113,113,.9);filter:grayscale(.85);}
.hf-globe__spot.is-ok.is-gone .hf-globe__card{transform:translateY(-20px) scale(.42);opacity:0;}
.hf-globe__spot.is-no.is-gone .hf-globe__card{transform:translateY(12px) scale(.82) rotate(-9deg);opacity:0;filter:grayscale(1) blur(1.5px);}

/* Тень под карточкой: без неё отель «висит» над грунтом, а не стоит на нём. */
.hf-globe__spot::after{
  content:'';position:absolute;left:50%;top:calc(var(--hf-spot) / 2 - 5px);
  width:30px;height:8px;margin-left:-15px;border-radius:50%;
  background:rgba(9,26,58,.2);filter:blur(2.5px);
  transition:opacity .4s ease;
}
.hf-globe__spot.is-gone::after{opacity:0;}

/* Настоящая цена за период из новой выдачи — всплывает на ✅ под карточкой.
   Это то, ради чего всё затевалось: видно, что отель реально оценили, а не
   просто пометили галочкой. */
.hf-globe__price{
  position:absolute;left:50%;top:calc(var(--hf-spot) / 2 + 7px);
  transform:translateX(-50%);
  padding:2px 6px;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.96);color:var(--green);
  font-size:10px;font-weight:700;line-height:1.5;white-space:nowrap;
  box-shadow:0 3px 10px rgba(9,26,58,.22);
  animation:hfPricePop .32s cubic-bezier(.2,.9,.3,1.5);
  transition:opacity .3s ease;
}
@keyframes hfPricePop{from{opacity:0;transform:translate(-50%,6px) scale(.8);}to{opacity:1;transform:translateX(-50%) scale(1);}}
.hf-globe__spot.is-gone .hf-globe__price,
.hf-globe__price.is-gone{opacity:0;}

/* Придорожный декор: между отелями проплывают ёлки и холмы. Сценка от этого
   читается как дорога, а не как список иконок по кругу. */
.hf-globe__deco{
  position:absolute;left:0;top:0;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--hf-grd) * -1));
  font-size:17px;line-height:1;pointer-events:none;opacity:.85;
  transition:transform .95s cubic-bezier(.22,1,.36,1);
}
.hf-globe__deco span{position:absolute;left:-10px;bottom:-2px;filter:drop-shadow(0 2px 2px rgba(9,26,58,.25));}

/* Искры на галочке — короткий всплеск, без остаточного свечения. */
.hf-globe__spark{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:var(--green-bright);pointer-events:none;
  animation:hfSpark .62s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes hfSpark{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0;}
}

/* Штамп поверх карточки. Живёт 620 мс (в версии 4 карточка начинала гаснуть
   через 240 мс, не дорисовав сам штамп, — вердикта фактически не было видно). */
.hf-globe__stamp{
  position:absolute;left:50%;top:50%;font-size:20px;line-height:1;
  transform:translate(-50%,-50%);
  animation:hfStampPop .34s cubic-bezier(.2,.9,.3,1.5);
  filter:drop-shadow(0 2px 4px rgba(9,26,58,.4));
}
@keyframes hfStampPop{
  0%{transform:translate(-50%,-50%) scale(.35) rotate(-18deg);opacity:0;}
  60%{transform:translate(-50%,-50%) scale(1.3) rotate(7deg);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}
}

/* --- Машина: всегда на вершине, планета крутится под ней --------------------- */
.hf-globe__rig{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-100%) translateY(calc(var(--hf-grd) * -1));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:flex-end;white-space:nowrap;
  filter:drop-shadow(0 4px 6px rgba(9,26,58,.3));
  z-index:4;
}
.hf-globe__rig-in{position:relative;display:flex;align-items:flex-end;animation:hfBump .26s linear infinite;}
@keyframes hfBump{
  0%{transform:translateY(0) rotate(0deg);}
  20%{transform:translateY(-2px) rotate(-1.6deg);}
  45%{transform:translateY(.5px) rotate(.4deg);}
  70%{transform:translateY(-1.4px) rotate(1.5deg);}
  100%{transform:translateY(0) rotate(0deg);}
}
/* Машина крупнее: рядом с карточками 48 px прежние 30 px читались мелочью. */
.hf-globe__auto{font-size:34px;transform:scaleX(-1);}
.hf-globe__crew{font-size:19px;margin:0 -4px 7px;animation:hfCrewBob .44s ease-in-out infinite alternate;}
.hf-globe__crew--b{animation-delay:.22s;}
@keyframes hfCrewBob{from{transform:translateY(0);}to{transform:translateY(-3px);}}
/* Пыль — позади машины. Едем вправо (поверхность уходит влево), значит след
   остаётся слева; в версии 4 пыль летела перед капотом. */
.hf-globe__dust{position:absolute;left:-12px;bottom:2px;font-size:13px;opacity:.5;animation:hfDust .55s linear infinite;}
@keyframes hfDust{0%{opacity:.5;transform:translateX(0) scale(.7);}100%{opacity:0;transform:translateX(-12px) scale(1.2);}}
/* Стоп-сигнал перед остановкой у отеля. */
.hf-globe__brake{
  position:absolute;left:-2px;bottom:9px;width:5px;height:5px;border-radius:50%;
  background:var(--red);opacity:0;transition:opacity .18s ease;
}
.hf-globe.is-braking .hf-globe__brake{opacity:1;box-shadow:0 0 9px 3px rgba(248,113,113,.85);}
/* Машина ждёт ответ у ворот отеля: мотор заглушен, пыли нет. Трясущаяся на
   месте машина читалась как подвисшая анимация. */
.hf-globe.is-idle .hf-globe__rig-in{animation-play-state:paused;}
.hf-globe.is-idle .hf-globe__dust{opacity:0;}

/* Реакция экипажа на вердикт: подпрыгнули на ✅, мотнули головой на ❌. */
.hf-globe__react{
  position:absolute;left:50%;top:-30px;transform:translateX(-50%) scale(.4);
  font-size:19px;line-height:1;opacity:0;pointer-events:none;
}
.hf-globe__react.is-on{animation:hfReact .7s cubic-bezier(.2,.9,.3,1.4) forwards;}
@keyframes hfReact{
  0%{opacity:0;transform:translate(-50%,6px) scale(.4);}
  35%{opacity:1;transform:translate(-50%,-6px) scale(1.15);}
  75%{opacity:1;transform:translate(-50%,-10px) scale(1);}
  100%{opacity:0;transform:translate(-50%,-18px) scale(.9);}
}
.hf-globe.is-yes .hf-globe__rig{animation:hfHop .42s cubic-bezier(.3,.9,.3,1.4);}
@keyframes hfHop{0%,100%{}50%{transform:translate(-50%,-100%) translateY(calc((var(--hf-grd) + 11px) * -1));}}
.hf-globe.is-nope .hf-globe__rig-in{animation:hfNope .4s ease-in-out;}
@keyframes hfNope{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px) rotate(-2deg);}75%{transform:translateX(4px) rotate(2deg);}}

/* Пока ответа нет — над машиной лупа: мы смотрим, но вердикта ещё нет. */
.hf-globe__look{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  font-size:15px;opacity:0;transition:opacity .3s ease;
  animation:hfLook 1.1s ease-in-out infinite alternate;
}
.hf-globe.is-waiting .hf-globe__look{opacity:.9;}
@keyframes hfLook{from{transform:translateX(-50%) translateY(0) rotate(-8deg);}to{transform:translateX(-50%) translateY(-3px) rotate(8deg);}}

/* --- Финал: жесты и зелёное свечение (приём с детальной, один в один) --------- */
/* Жесты держатся над машиной, а не в абстрактных 38% высоты экрана. */
.hf-globe__cheer{
  position:absolute;left:50%;bottom:calc(50% + 46px);width:0;height:0;z-index:6;
  transition:bottom 1.05s cubic-bezier(.22,1,.36,1);
}
.hf-globe.is-cruise .hf-globe__cheer{bottom:calc(var(--hf-cap) + 132px);}
.hf-globe__gesture{
  position:absolute;left:50%;top:50%;font-size:40px;line-height:1;
  transform:translate(-50%,-50%);
  animation:hfGesturePop .32s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes hfGesturePop{
  0%{transform:translate(-50%,-50%) scale(.45) rotate(-14deg);opacity:0;}
  60%{transform:translate(-50%,-50%) scale(1.22) rotate(5deg);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}
}
.hf-globe.is-done .hf-globe__atmo{
  box-shadow:0 0 60px 16px rgba(52,211,153,.5), inset 0 0 30px rgba(134,239,172,.45);
  animation:hfWin .9s ease;
}
@keyframes hfWin{0%{transform:scale(calc(var(--hf-k) * .97));}55%{transform:scale(calc(var(--hf-k) * 1.03));}100%{transform:scale(var(--hf-k));}}

/* --- HUD: подпись и прогресс -------------------------------------------------- */
/* Привязан к горизонту той же переменной, что и машина: на телефоне и на
   десктопе расстояние до сцены одинаковое. В версии 4 HUD стоял у верхнего
   края, и между ним и планетой зияло полэкрана. */
.hf-globe__hud{
  position:absolute;left:50%;bottom:calc(50% + 138px);transform:translateX(-50%);
  width:min(460px,88vw);text-align:center;z-index:5;
  transition:bottom 1.05s cubic-bezier(.22,1,.36,1);
}
.hf-globe.is-cruise .hf-globe__hud{bottom:calc(var(--hf-cap) + 140px);}
/* Кегль на телефоне меньше заявленного в первой сборке: при fs-20 длинные
   реплики («Звоним на ресепшн…») обрезались многоточием — фраза теряла смысл
   ровно там, где она смешная. */
.hf-globe__cap{
  display:block;font-size:var(--fs-17);font-weight:700;letter-spacing:-.01em;color:var(--ink);
  min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  /* Проявление мягкое и короткое: при жёстком fade-in с нуля глаз ловил
     строку на середине и читал как рябь. */
  animation:hfCapIn .26s cubic-bezier(.22,1,.36,1);
}
@keyframes hfCapIn{from{opacity:.3;transform:translateY(3px);}to{opacity:1;transform:none;}}
.hf-globe__sub{
  display:block;margin-top:4px;font-size:var(--fs-13);color:var(--muted);
  min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hf-globe__bar{display:block;height:4px;margin-top:var(--sp-4);border-radius:var(--r-pill);background:rgba(18,33,59,.12);overflow:hidden;}
.hf-globe__fill{
  display:block;height:100%;width:4%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  transition:width .34s linear;
}
.hf-globe.is-done .hf-globe__fill{background:linear-gradient(90deg,var(--green),var(--green-bright));}
.hf-globe.is-done .hf-globe__cap{color:var(--green);}

/* Десктоп: планета крупнее, шапки видно больше, карточки крупнее. */
@media (min-width:768px){
  .hf-globe{--hf-cap:clamp(200px,34vh,330px);--hf-big:520px;--hf-spot:62px;}
  .hf-globe.is-cruise .hf-globe__hud{bottom:calc(var(--hf-cap) + 180px);}
  .hf-globe.is-cruise .hf-globe__cheer{bottom:calc(var(--hf-cap) + 168px);}
  .hf-globe__auto{font-size:44px;}
  .hf-globe__crew{font-size:24px;}
  .hf-globe__cap{font-size:var(--fs-24);}
  .hf-globe__deco{font-size:22px;}
  .hf-globe__spot::after{width:38px;height:10px;margin-left:-19px;}
  .hf-globe__price{font-size:12px;padding:2px 8px;}
  .hf-globe__sun{font-size:56px;}
  .hf-globe__cloud--b{font-size:88px;}
  .hf-globe__cloud--a{font-size:62px;}
}

/* =============================================================================
   2. ПОЛОСА НАД СПИСКОМ (lite / reduce)
   ============================================================================= */
.hf-scene{
  display:none;align-items:center;gap:var(--sp-3);
  margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-1);font-family:var(--font);color:var(--ink);
}
.hf-scene.is-on{display:flex;}
.hf-scene.is-out{opacity:0;transition:opacity .28s ease;}
.hf-scene__crew{position:relative;flex:0 0 auto;width:96px;height:26px;}
.hf-scene__unit{position:absolute;top:0;display:inline-flex;align-items:flex-end;gap:1px;font-size:var(--fs-15);line-height:1;}
.hf-scene__unit--a{left:0;animation:hfWalkA 2s ease-in-out infinite alternate;}
.hf-scene__unit--b{right:0;animation:hfWalkB 2.3s ease-in-out infinite alternate;}
.hf-scene__tool{font-size:var(--fs-13);transform-origin:50% 90%;animation:hfToolSwing .55s ease-in-out infinite alternate;}
@keyframes hfWalkA{from{transform:translateX(0);}to{transform:translateX(34px);}}
@keyframes hfWalkB{from{transform:translateX(0);}to{transform:translateX(-30px);}}
@keyframes hfToolSwing{from{transform:rotate(-16deg);}to{transform:rotate(16deg);}}
.hf-scene__txt{flex:1;min-width:0;}
.hf-scene__cap{display:block;font-size:var(--fs-13);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hf-scene__bar{display:block;height:4px;margin-top:6px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden;}
.hf-scene__fill{display:block;height:100%;width:8%;border-radius:var(--r-pill);background:var(--blue);transition:width .32s linear;}
.hf-scene.is-done .hf-scene__fill{background:var(--green);}
.hf-scene.is-done .hf-scene__cap{color:var(--green);}
.hf-card-unit--collapsing{overflow:hidden;opacity:0;transform:scale(.97);
  transition:max-height .42s ease,opacity .28s ease,transform .28s ease,margin .42s ease,padding .42s ease;}

/* =============================================================================
   3. Доступность: механика остаётся, движение убирается.
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  .hf-scene__unit--a,.hf-scene__unit--b,.hf-scene__tool{animation:none;}
  .hf-scene__fill,.hf-card-unit--collapsing{transition:none;}
  .hf-scene.is-out{transition:none;}
  .hf-globe__ring,.hf-globe__emoji,.hf-globe__rig-in,.hf-globe__rig,
  .hf-globe__crew,.hf-globe__dust,.hf-globe__look,.hf-globe__gesture,
  .hf-globe__stamp,.hf-globe__atmo,.hf-globe__price,.hf-globe__react,
  .hf-globe__sun,.hf-globe__cloud,.hf-globe__bird,
  .hf-globe__spot.is-knock .hf-globe__card,.hf-globe__spot.is-knock::before{animation:none !important /*!JS*/;}
  .hf-globe__world,.hf-globe__planet,.hf-globe__spot,.hf-globe__card,
  .hf-globe__deco,.hf-globe__rig,.hf-globe__fill,.hf-globe__atmo,
  .hf-globe__hud,.hf-globe__cheer{transition:none !important /*!JS*/;}
  .hf-globe,.hf-globe.is-out{transition:none;}
}


/* ########## раздел: выравнивание по детальной отеля (эталон /oteli/777438/) — t_cf372255, 30.09.2026 ##########
   Сверка вычисленных стилей список ↔ детальная на 375: всё, что делает одно и то же, выглядит одинаково.
   Двойной класс вместо !important — перебиваем сброс кнопок темы и .hf-wrap button. */

/* «Показать ещё отели» = .vs-morebtn детальной («Все N отзывов», «Все удобства»): белая, рамка --line,
   синий текст 14/600, радиус 12, 44 px. Было: 15/700 тёмным, рамка 1.5 px, и сброс темы делал её прозрачной. */
.hf-showmore.hf-showmore{min-height:var(--tap);padding:0 var(--sp-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  font:600 var(--fs-14)/1.2 var(--font);color:var(--blue);}
.hf-showmore.hf-showmore:hover{background:var(--paper);border-color:var(--blue);}

/* «Ещё N» в подборках/метро/районах = кнопка «Читать дальше» детальной (.vs-morebtn по ширине текста),
   а не голая синяя ссылка. */
.hf-seo__more.hf-seo__more > summary{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);margin-top:var(--sp-1);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);font:600 var(--fs-14)/1.2 var(--font);color:var(--blue);}
.hf-seo__more.hf-seo__more > summary:hover{border-color:var(--blue);background:var(--paper);}

/* Главная кнопка шторок («Показать N отелей») — как CTA нижней панели детальной: 700, радиус 12. */
.hf-btn.hf-btn--p{font-weight:700;border-radius:var(--r-m);}

/* «Готово» в гостях (sc-calendar.css даёт 4 px — единственный квадратный угол на странице) → радиус кнопок кита. */
.hf-sheet .sc-guests-done, .sc-calendar-dropdown .sc-guests-done{border-radius:var(--r-m);}