/* ============================================================
   Главная v13 — герой.
   Подключается только на главной и только при активном флаге
   (кука grf_v13). Ничего из stylesheet.css не переопределяет:
   все классы с префиксом .hv13-, старая разметка живёт рядом.

   Значения перенесены из docs/mockup/Main.dc.html — это не
   «похожие» цвета, а те же самые.
   ============================================================ */

/* Переменные объявлены на :root, а не на .hv13: секции главной
   лежат в других слотах шаблона (content_bottom, футер) и внутрь
   блока героя не вложены. Префикс --hv13- исключает пересечения. */
:root {
  /* Палитра макета. Держим в одном месте: дальше по разделам
     ссылаемся на переменные, а не на литералы. */
  --hv13-ink:      oklch(20% .012 60);
  --hv13-ink-2:    oklch(36% .012 60);
  --hv13-ink-3:    oklch(52% .01 60);
  --hv13-line:     oklch(92.4% .006 85);
  --hv13-paper:    oklch(99% .003 85);
  --hv13-white:    oklch(100% 0 0);
  --hv13-green:    oklch(.42 .07 145);
  --hv13-green-d:  oklch(.26 .05 155);
  --hv13-ochre:    oklch(.58 .17 52);

  --hv13-sans:  Manrope, system-ui, -apple-system, sans-serif;
  --hv13-serif: Spectral, Georgia, serif;
  --hv13-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Поля героя: 120px на широком экране, дальше сжимаются */
  --hv13-pad: clamp(20px, 8.34vw, 120px);
}

/* На телефоне макет (docs/mockup/Mobile.dc.html) держит ровно 20px:
   секции там набраны как «40px 20px 0». Формула выше давала на 390px
   32.5px, и вся страница стояла уже, чем нарисовано. */
@media (max-width: 700px) {
  :root { --hv13-pad: 20px; }
}

/* ── Герой ────────────────────────────────────────────────── */

.hv13-hero {
  position: relative;
  padding: 24px var(--hv13-pad) 48px;
  background: linear-gradient(180deg,
    oklch(.84 .09 72) 0%,
    oklch(.64 .12 48) 36%,
    oklch(.42 .08 60) 70%,
    oklch(.26 .05 155) 100%);
  color: var(--hv13-white);
  font-family: var(--hv13-sans);
}

/* Выходная строка: слева рубрика, справа счётчик, между ними линейка
   во всю оставшуюся ширину — как в макете. */
.hv13-hero__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  font-family: var(--hv13-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

.hv13-hero__meta > span:not(.hv13-hero__rule) { white-space: nowrap; }

.hv13-hero__rule {
  flex: 1;
  height: 1px;
  background: oklch(100% 0 0 / .28);
}

@media (max-width: 700px) {
  /* На узком экране линейка и счётчик съедают строку — оставляем рубрику */
  .hv13-hero__meta { gap: 12px; font-size: 9.5px; letter-spacing: .14em; }
  .hv13-hero__rule { display: none; }

  /* Счётчик объектов идёт после линейки. В макете Mobile строка одна,
     а у нас вторая часть не влезала и обрезалась на середине слова. */
  .hv13-hero__rule ~ span { display: none; }
}

.hv13-hero__eyebrow {
  margin-top: 26px;
  font-family: var(--hv13-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .8;
}

/* Крупная строка — не h1: настоящий h1 остаётся в разметке
   страницы и несёт поисковый смысл, а это оформление. */
.hv13-hero__display {
  margin-top: 14px;
  font-size: clamp(38px, 8.61vw, 124px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
}

.hv13-hero__sub {
  margin-top: 14px;
  /* Одной строкой на любом экране: кегль подбирается по ширине, чтобы
     строка не переносилась и не упиралась в край. */
  max-width: none;
  white-space: nowrap;
  font-family: var(--hv13-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.23vw, 32px);
  line-height: 1.24;
}

/* ── Строка поиска ────────────────────────────────────────── */

.hv13-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  /* Строка поиска во всю ширину контента */
  max-width: none;
  margin-top: 46px;
  padding: 10px;
  border-radius: 28px;
  background: var(--hv13-white);
  box-shadow: 0 24px 60px oklch(20% .025 50 / .18),
              0 4px 12px oklch(20% .025 50 / .08);
}

.hv13-search__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  padding: 10px 22px;
  border: 0;
  border-right: 1px solid var(--hv13-line);
  background: transparent;
  font-family: var(--hv13-sans);
  text-align: left;
  cursor: pointer;
}

.hv13-search__field:last-of-type { border-right: 0; }

.hv13-search__label {
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv13-ink-3);
}

.hv13-search__value {
  font-size: 17px;
  color: var(--hv13-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv13-search__value--empty { color: var(--hv13-ink-3); }

.hv13-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: none;
  min-height: 60px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: var(--hv13-ochre);
  color: var(--hv13-white);
  font-family: var(--hv13-sans);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.hv13-search__submit:hover { background: oklch(.53 .16 50); }

/* ── Унаследованные поля ──────────────────────────────────────
   Даты и гости приходят из search_rooms_dates.tpl и
   search_rooms_guests.tpl: их разметку трогать нельзя, на ней
   висят календарь и счётчики гостей. Поэтому не переписываем
   их, а приводим к виду поля из макета.

   Класс .search-rooms на обёртке героя тоже оставлен — за него
   держится JS, — но старое оформление из stylesheet.css здесь
   гасится: фон, позиционирование и отступы задаёт .hv13-hero.
   ──────────────────────────────────────────────────────────── */

.hv13.search-rooms {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.hv13 .search-rooms-forms { display: block; width: 100%; }

/* Поле даты и поле гостей — такие же ячейки, как «Регион» */
.hv13 .search-rooms-forms-datepicker,
.hv13 .search-rooms-forms-guests {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  margin: 0;
  padding: 10px 22px;
  border: 0;
  border-right: 1px solid var(--hv13-line);
  background: transparent;
}

.hv13 .search-rooms-forms-guests { border-right: 0; }

/* Старые правила задают этим полям ширину в процентах
   (.place/.datepicker/.guests — 25%, гости — 30%), а кнопке
   height: 56px !important. Внутри героя раскладку держит flex,
   поэтому проценты и фиксированную высоту снимаем адресно. */
.hv13 .place,
.hv13 .search-rooms-forms-datepicker,
.hv13 .search-rooms-forms-guests {
  width: auto !important;
  flex: 1 1 0 !important;
}

.hv13 .search-rooms-forms-send__submit {
  width: auto !important;
  height: auto !important;
  min-height: 60px;
  flex: none !important;
  border-radius: 999px;
}

.hv13 .search-rooms-forms-datepicker__input {
  height: auto !important;
  width: 100%;
  padding-top: 0 !important;
  line-height: 1.25;
}

/* Внутри поля гостей своя рамка и подложка — в макете ячейка
   отделена только тонкой линией слева, поэтому снимаем. */
/* Рамку рисует .result_window_container — в макете у поля гостей
   рамки нет, ячейка отделена только вертикальной линией. */
.hv13 .search-rooms-forms-guests .result_window_container {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Все три поля выстраиваем по одной линии: подпись сверху, значение
   под ней, одинаковые высоты строк — иначе подписи «скачут».

   Содержимое прижато к верху, а не центрировано: у полей разная
   внутренняя высота (у гостей — счётчики), и при центрировании
   подписи вставали на разных уровнях. */
.hv13 .hv13-search__field,
.hv13 .search-rooms-forms-datepicker,
.hv13 .search-rooms-forms-guests {
  justify-content: flex-start;
  align-items: flex-start;
}

/* Одинаковая высота содержимого — иначе ячейки разной высоты
   растягивают строку поиска и линии-разделители не совпадают. */
.hv13 .hv13-q,
.hv13 .search-rooms-forms-datepicker,
.hv13 .search-rooms-forms-guests { min-height: 0; }

.hv13 .hv13-search__field { min-height: 60px; }

.hv13 .hv13-search__label,
.hv13 .search-rooms-container-text {
  line-height: 1;
  margin: 0 0 2px;
}

/* Подпись у дат и гостей вынесена из потока абсолютом — в старой
   вёрстке она висела в углу ячейки. Здесь ячейка центрирует
   содержимое, поэтому возвращаем подпись в поток: иначе она
   остаётся вверху, а значение стоит по центру — подписи «скачут». */
.hv13 .search-rooms-container-text {
  position: static !important;
  top: auto !important;
  left: auto !important;
}

.hv13 .hv13-q__val,
.hv13 .search-rooms-forms-datepicker__input,
.hv13 .search-rooms-forms-guests .body {
  line-height: 1.25;
  margin: 0;
}

/* Блок гостей несёт счётчики и в закрытом виде распирал строку
   поиска до 95px — держим его в одну строку значения. Раскрытое
   состояние не трогаем: оно рисуется отдельным окном поверх. */
.hv13 .search-rooms-forms-guests .body {
  display: block;
  line-height: 1.25;
}

.hv13 .search-rooms-forms-guests__results,
.hv13 .search-rooms-forms-guests .result_window_container {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.25;
}

.hv13 .search-rooms-forms-guests .body,
.hv13 .search-rooms-forms-guests .form-element-container {
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* Декоративная собачка и прочая мелкая графика блока гостей:
   в макете поле — это подпись и значение, без картинок. */
.hv13 .search-rooms-forms-guests .dog,
.hv13 .search-rooms-forms-guests .ears,
.hv13 .search-rooms-forms-guests .eyes { display: none; }

/* Подпись поля: тот же мелкий моношрифт, что у «Регион» */
.hv13 .search-rooms-container-text {
  order: -1;
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv13-ink-3);
}

.hv13 .search-rooms-forms-datepicker__input,
.hv13 .search-rooms-forms-guests .body {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--hv13-sans);
  font-size: 17px;
  color: var(--hv13-ink);
}

/* Шрифт во всех трёх полях одинаковый: блок гостей рисует значение
   во вложенных узлах со своим Open Sans, из-за чего «2 взрослых»
   отличались от соседей начертанием и кеглем. */
.hv13 .search-rooms-forms-datepicker,
.hv13 .search-rooms-forms-datepicker *,
.hv13 .search-rooms-forms-guests,
.hv13 .search-rooms-forms-guests * {
  font-family: var(--hv13-sans) !important;
}

.hv13 .search-rooms-forms-guests__results,
.hv13 .search-rooms-forms-guests__results * {
  font-size: 17px;
  line-height: 21px;
  color: var(--hv13-ink);
}

/* Подпись и значение стоят на одинаковых отметках во всех полях:
   фиксируем высоту подписи и отступ до значения, иначе строки
   разъезжаются на несколько пикселей. */
.hv13 .hv13-search__label,
.hv13 .search-rooms-container-text {
  display: block;
  height: 12px;
  line-height: 12px;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

.hv13 .hv13-q__val,
.hv13 .search-rooms-forms-datepicker__input,
.hv13 .search-rooms-forms-guests__results {
  display: block;
  height: 21px;
  line-height: 21px;
  margin: 0 !important;
  padding: 0 !important;
  /* У поля дат это input: своя рамка и box-sizing сдвигали текст
     на пару пикселей относительно соседей. */
  border: 0 !important;
  box-sizing: content-box;
  vertical-align: top;
}

/* Поле дат — input: текст обрезается по его краю, а при высоте 21px
   хвост кириллической «Д» уходит ниже и срезается. Даём запас снизу
   и тут же гасим его отрицательным отступом — строка не сдвигается. */
.hv13 input.search-rooms-forms-datepicker__input {
  box-sizing: content-box !important;
  padding-bottom: 6px !important;
  margin-bottom: -6px !important;
}

/* Между подписью и полем дат стоит пустой контейнер .calendar
   (остаток pickmeup): высоты у него нет, но строчный бокс сдвигает
   значение на пару пикселей. Убираем из потока, не скрывая — вдруг
   на него кто-то опирается. */
.hv13 .search-rooms-forms-datepicker .calendar {
  position: absolute;
  height: 0;
  overflow: hidden;
}

/* Промежуточные обёртки блока гостей не должны добавлять отступов */
.hv13 .search-rooms-forms-guests .body,
.hv13 .search-rooms-forms-guests .form-element-container,
.hv13 .search-rooms-forms-guests .result_window_container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Иконки календаря и гостей: в макете поля без них */
.hv13 .datepicker-icon,
.hv13 .guests-icon,
.hv13 .place .dropdown.icon { display: none; }

/* Дропдаун региона: semantic рисует свою рамку — снимаем */
.hv13 .place .ui.dropdown {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hv13 .place .ui.dropdown > .text {
  margin: 0;
  font-family: var(--hv13-sans);
  font-size: 16px;
  color: var(--hv13-ink);
}

/* Выпадающий список остаётся прежним, только подвинут под поле */
.hv13 .place .ui.dropdown .menu {
  margin-top: 10px;
  border-radius: 14px;
}

/* Подсказка поиска: заголовок группы отделяет объекты от регионов.
   Это не пункт списка — по нему нельзя кликнуть и его пропускает
   клавиатурная навигация semantic. */
.hv13 .place .ui.dropdown .menu .hv13-sug__group {
  padding: 12px 14px 4px;
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv13-ink-3);
  pointer-events: none;
}

/* Пункт объекта: отличается от региона иконкой-точкой слева,
   чтобы не путать «поехать в регион» и «открыть объект». */
.hv13 .place .ui.dropdown .menu .hv13-sug__obj {
  position: relative;
  padding-left: 28px !important;
}

.hv13 .place .ui.dropdown .menu .hv13-sug__obj::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--hv13-green);
}

/* ── Фильтры-переключатели ────────────────────────────────── */

/* Чекбоксы прячем: роль переключателя играет label. Старый CSS
   показывал их как обычные квадратики в ряд с разделителями. */
.hv13-facets input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Видимый фокус для клавиатуры — без него переключатель
   недоступен тем, кто не пользуется мышью. */
.hv13-facets input[type="checkbox"]:focus-visible + .hv13-facet {
  outline: 2px solid var(--hv13-white);
  outline-offset: 2px;
}


/* Ширина ровно как у строки поиска — так они читаются
   продолжением поля, а не отдельной панелью. */
.hv13-facets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Фильтры по центру под строкой поиска */
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin-top: 16px;
}

.hv13-facet {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid oklch(100% 0 0 / .32);
  border-radius: 999px;
  background: oklch(100% 0 0 / .1);
  color: var(--hv13-white);
  font-family: var(--hv13-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

/* Вид 40px, как в макете, но зона нажатия добирается невидимым
   слоем до 44px — палец попадает, размер не меняется. */
.hv13-facet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  height: 44px;
}

.hv13-facet:hover { background: oklch(100% 0 0 / .18); }

.hv13-facet--on {
  background: var(--hv13-green);
  border-color: var(--hv13-green);
}

/* Состояние при клике: класс --on проставляет сервер при загрузке,
   а дальше вид должен меняться сразу, без перезагрузки, — поэтому
   опираемся на сам чекбокс. */
.hv13-facets input[type="checkbox"]:checked + .hv13-facet {
  background: var(--hv13-green) !important;
  border-color: var(--hv13-green) !important;
}

.hv13-facets input[type="checkbox"]:checked + .hv13-facet .hv13-facet__tick {
  display: inline-flex;
}

.hv13-facet--on:hover { background: oklch(.38 .07 145); }

/* Галочка появляется только у выбранного — размер кнопки
   при этом не скачет, потому что она в потоке с gap. */
.hv13-facet__tick { display: none; flex: none; }
.hv13-facet--on .hv13-facet__tick { display: inline-flex; }

.hv13-facet__count {
  opacity: .62;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Пока счётчик не посчитан — не показываем ничего.
   Правило прода: никаких заглушек и прочерков. */
.hv13-facet__count:empty { display: none; }

.hv13-facet__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--hv13-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: oklch(100% 0 0 / .4);
  white-space: nowrap;
}

.hv13-facet__more:hover,
.hv13-facet__more:focus { color: var(--hv13-white); }

/* ── Телефон ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Значения из Mobile.dc.html: на телефоне у макета своя шкала,
     и общие clamp-формулы давали мельче и с широкими полями.

     Селекторы намеренно с запасом по весу: у героя остался класс
     .search-rooms, и старые правила (в том числе inline в шаблоне)
     идут позже — с одиночным классом они перебивали эти значения. */
  .hv13.hv13-hero {
    padding: 14px 20px 28px;
    padding-top: 72px;      /* место под шапку поверх героя */
    /* Ниже 620px старое правило .search-rooms ставит 25px с !important —
       перебить можно только тем же. */
    padding-bottom: 28px !important;
  }

  .hv13-hero__display {
    font-size: 58px;
    line-height: .94;
    letter-spacing: -.035em;
  }

  .hv13-hero__sub {
    /* На телефоне 21px в одну строку не помещается — ведём кегль
       от ширины экрана. */
    font-size: clamp(13px, 4.35vw, 21px);
    line-height: 1.25;
    max-width: none;
  }

  .hv13-search {
    flex-direction: column;
    gap: 0;
    margin-top: 26px;
    padding: 8px;
    border-radius: 22px;
  }

  .hv13 .hv13-search__submit,
  .hv13 .search-rooms-forms-send__submit { min-height: 56px; }

  .hv13-page .hv13-h2 { font-size: 27px; line-height: 1.14; }

  /* Поля идут столбцом: разделитель снизу, высота 52px и поля 8/16 —
     значения из Mobile.dc.html. Высоту задаём всем трём полям, иначе
     они схлопываются по содержимому и налезают на кнопку. */
  .hv13 .hv13-search__field,
  .hv13 .search-rooms-forms-datepicker,
  .hv13 .search-rooms-forms-guests {
    min-height: 52px;
    padding: 8px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--hv13-line);
  }

  .hv13 .search-rooms-forms-guests { border-bottom: 0; }

  .hv13-search__field:last-of-type { border-bottom: 0; }

  .hv13-search__submit {
    width: 100%;
    margin-top: 8px;
    min-height: 56px;
  }

  /* Фильтры лентой: пять строк с галочками отодвинули бы кнопку
     «Найти» за нижний край экрана, а она здесь главная. Лента
     листается пальцем и держит выбранные слева. */
  .hv13-facets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Край экрана держат распорки, а не padding: при scroll-snap
       браузер выравнивает кадр по краю области прокрутки. */
    margin-left: calc(var(--hv13-pad) * -1);
    margin-right: calc(var(--hv13-pad) * -1);
    padding-inline: var(--hv13-pad);
  }

  .hv13-facets::-webkit-scrollbar { display: none; }

  /* Горизонтальный жест листает ленту, вертикальный — прокручивает
     страницу. Один pan-x запрещал второе: палец вверх по чипам
     оставлял страницу на месте. */
  .hv13-facets {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .hv13-facet,
  .hv13-facet__more { flex: none; scroll-snap-align: start; white-space: nowrap; }

  /* Центр на компьютере в ленте прятал первые чипы за левый край без
     возможности долистать: в ленте — от начала, как в макете. */
  .hv13-facets { justify-content: flex-start; }

  /* Лента как .strip в Mobile.dc.html: внутри полей героя, распорки по
     8px и gap 12 — первый чип в 40px от края, справа обрезается по полю героя. */
  .hv13-facets {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-inline: 0;
    gap: 12px;
    scroll-padding-inline: 20px;
  }
  .hv13-facets::before,
  .hv13-facets::after { content: ""; flex: 0 0 8px; }
}

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

/* ============================================================
   СЕКЦИИ ГЛАВНОЙ v13
   Сетки резиновые: колонки задаются auto-fit + minmax, поэтому
   раскладка подстраивается под любую ширину без точек перелома.
   ============================================================ */

.hv13-sec {
  /* Было 80px по макету; по просьбе подрезано примерно на треть —
     страница длинная, и воздух между блоками читался как пустоты. */
  padding: clamp(28px, 3.9vw, 56px) var(--hv13-pad) 0;
  font-family: var(--hv13-sans);
  color: var(--hv13-ink);
}

.hv13-sec__head { max-width: 70ch; }

.hv13-eyebrow {
  display: block;
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv13-green);
}

/* На широком экране заголовок секции идёт одной строкой: «Самые
   популярные глэмпинги» переносилось на два ряда при свободном месте
   справа. Ниже 1100px перенос разрешён — иначе строка не уместится. */
@media (min-width: 1101px) {
  .hv13-h2 { white-space: nowrap; }
}

.hv13-h2 {
  margin: 9px 0 0;
  font-family: var(--hv13-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.78vw, 40px);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--hv13-ink);
}

.hv13-sec__note {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hv13-ink-2);
}

.hv13-sec__more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ── Кнопки ───────────────────────────────────────────────── */

.hv13-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--hv13-ochre);
  color: var(--hv13-white);
  font-family: var(--hv13-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.hv13-btn:hover { background: oklch(.53 .16 50); color: var(--hv13-white); }

.hv13-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }

.hv13-btn--ghost {
  background: var(--hv13-white);
  color: var(--hv13-ink);
  border: 1px solid oklch(55.5% .006 85);
  font-weight: 600;
}

.hv13-btn--ghost:hover { background: oklch(97% .006 85); color: var(--hv13-ink); }

/* ── Ленты, листаемые пальцем ─────────────────────────────── */

.hv13-strip {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Лента живёт в тех же полях, что и остальной контент: в макете
     этот блок вообще набран сеткой внутри полей 120px, а вынос под
     обрез оставлял её от края до края экрана. */
  scroll-padding-inline: 0;
}

.hv13-strip::-webkit-scrollbar { display: none; }
.hv13-strip > * { flex: none; scroll-snap-align: start; }

/* Горизонтальный жест листает ленту, вертикальный — прокручивает
   страницу. Один pan-x запрещал второе: палец вверх по карточкам
   оставлял страницу на месте. min-width: 0 — чтобы лента не распирала
   сетку-родителя, а секция её не обрезала. */
.hv13-strip {
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.hv13-sec { overflow: visible; }

/* ── Направления ──────────────────────────────────────────── */

/* Направления — слайдер: все карточки в одну строку, лишние уезжают
   за край и листаются стрелками (мышью) или пальцем. В два ряда
   плиткой они занимали пол-экрана и спорили с «Популярными». */
.hv13-regions .hv13-strip { gap: 20px; }

/* Ширина карточки подобрана так, чтобы на широком экране в строку
   попадало пять штук — как в макете, — а следующая выглядывала краем
   и было видно, что лента продолжается. */
@media (min-width: 901px) {
  .hv13-regions .hv13-region { width: calc((100% - 4 * 20px) / 5.4); }
}

/* Стрелки листания у заголовка секции */
.hv13-sec__head--nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}

.hv13-arrows { display: flex; gap: 10px; flex: none; }

.hv13-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid oklch(55.5% .006 85);
  border-radius: 999px;
  background: var(--hv13-white);
  color: var(--hv13-ink);
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

.hv13-arrow:hover { background: oklch(97% .006 85); }

/* Край ленты: кнопка не исчезает, а гаснет — иначе соседняя
   прыгает на её место. */
.hv13-arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 900px) {
  /* На телефоне лента листается пальцем, стрелки не нужны */
  .hv13-arrows { display: none; }
  .hv13-sec__head--nav { display: block; }
}

.hv13-region {
  position: relative;
  display: block;
  width: clamp(150px, 15vw, 220px);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--hv13-white);
  background: var(--hv13-green-d);
}

.hv13-region__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Затемнение снизу, чтобы подпись читалась на любом снимке */
.hv13-region__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px 12px;
  background: linear-gradient(180deg, oklch(0% 0 0 / 0) 0%, oklch(0% 0 0 / .62) 100%);
}

.hv13-region__name {
  font-family: var(--hv13-serif);
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.hv13-region__count {
  font-family: var(--hv13-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .82;
}

/* ── Карточки объектов ────────────────────────────────────── */

.hv13-cards {
  display: grid;
  /* Четыре в ряд: автоподбор на широком экране ставил пятую, и
     карточки становились слишком узкими. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .hv13-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .hv13-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  /* Mobile.dc.html: один столбец, четыре карточки, gap 26 — дальше кнопка «Все N объектов» */
  .hv13-cards { grid-template-columns: 1fr; row-gap: 26px; }
  .hv13-cards > .hv13-card:nth-of-type(n+5) { display: none; }
}

.hv13-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.hv13-card__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: oklch(94% .006 85);
}

/* Галерея: лента кадров со snap. Пальцем и колесом листается сама,
   без скрипта; скрипт только подсвечивает активную точку. */
.hv13-card__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* см. выше: вертикальный жест остаётся у страницы */
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.hv13-card__track::-webkit-scrollbar { display: none; }

.hv13-card__link {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

/* Точки: активная вытянута в полоску, как в макете */
.hv13-card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.hv13-card__dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: oklch(100% 0 0 / .5);
  transition: width .18s ease, background .18s ease;
}

.hv13-card__dot.is-on { width: 16px; background: var(--hv13-white); }

/* Стрелки галереи — только для мыши, появляются при наведении на карточку.
   На сенсорных экранах их нет: там лента листается пальцем. */
.hv13-card__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: oklch(100% 0 0 / .92);
  color: var(--hv13-ink);
  box-shadow: 0 2px 8px oklch(20% .02 60 / .18);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}

.hv13-card__nav--prev { left: 10px; }
.hv13-card__nav--next { right: 10px; }
.hv13-card__nav:hover { background: var(--hv13-white); }
.hv13-card__nav[hidden] { display: none !important; }

/* Галерею можно тащить мышью — курсор подсказывает */
@media (hover: hover) and (pointer: fine) {
  .hv13-card__track { cursor: grab; }
  .hv13-card__track.is-dragging { cursor: grabbing; user-select: none; }
}

@media (hover: hover) and (pointer: fine) {
  .hv13-card__nav { display: inline-flex; }
  .hv13-card__shot:hover .hv13-card__nav,
  .hv13-card__nav:focus-visible { opacity: 1; }
}

/* Кэшбэк: плашка в правом верхнем углу снимка */
.hv13-card__cashback {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--hv13-ochre);
  color: var(--hv13-white);
  font-family: var(--hv13-sans);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Зона нажатия добирается до 44px, вид остаётся мелким */
.hv13-card__cashback::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  min-width: 44px;
  height: 44px;
}

[popover].hv13-cb-tip {
  margin: 0;
  border: 0;
  padding: 14px 16px;
  max-width: 264px;
  border-radius: 14px;
  background: var(--hv13-ink);
  color: oklch(97% .004 85);
  font-family: var(--hv13-sans);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 24px 60px oklch(20% .025 50 / .28);
}

[popover].hv13-cb-tip .hv13-cb-tip__title {
  display: block;
  margin-bottom: 7px;
  font-family: var(--hv13-serif);
  font-size: 15px;
  color: var(--hv13-white);
}

[popover].hv13-cb-tip a {
  display: inline-block;
  margin-top: 7px;
  color: oklch(.78 .14 60);
  font-weight: 600;
  text-decoration: none;
}

.hv13-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Избранное и бейдж разнесены по углам: их зоны нажатия
   не пересекаются даже с добором до 44px. */
.hv13-card__fav {
  position: absolute;
  /* 36px и отступ 12px — как в макете. Зона нажатия добирается ниже. */
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: oklch(100% 0 0 / .92);
  cursor: pointer;
}

.hv13-card__fav .buyer-favorite-btn__icon { width: 18px; height: 18px; }

/* Своя иконка сердца: штатная рисуется белым фоном-картинкой и на
   белом кружке пропадала. */
.hv13-card__fav-ico { color: var(--hv13-ink); }
.hv13-card__fav.is-active .hv13-card__fav-ico { color: oklch(.6 .2 25); fill: oklch(.6 .2 25); }

/* Кнопка выглядит на 36px, но палец попадает в 44 — невидимый
   слой поверх. Приём из макета (.tap-lift): вид не меняется,
   растёт только площадь попадания. */
.hv13-card__fav::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 44px;
  height: 44px;
}

/* Плашка соцдоказательства — как в макете: внизу слева на снимке,
   тёмное стекло, белый текст. Раньше это была белая плашка сверху,
   и она спорила с кнопкой избранного. */
.hv13-card__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
  border-radius: 999px;
  background: oklch(0% 0 0 / .5);
  backdrop-filter: blur(8px);
  color: var(--hv13-white);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Единственная анимация на странице — потому глаз её и замечает */
.hv13-pulse { animation: hv13-pulse 2s ease-in-out infinite; }

@keyframes hv13-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .hv13-pulse { animation: none; }
}

.hv13-card__badge i {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 999px;
}

/* Тело тянется на всю оставшуюся высоту, чтобы цена с кнопкой стояли
   на одной линии у всех карточек ряда: без этого подвал прижимался к
   тексту и «плавал» — у одних выше, у других ниже. */
.hv13-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}

.hv13-card__rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Плашка оценки: в макете внутри неё звезда, число и слово —
   раньше на фоне была только цифра, а слово стояло снаружи. */
.hv13-rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hv13-green-d);
  color: var(--hv13-white);
  font-size: 12px;
  font-weight: 600;
}

.hv13-rate__num { font-variant-numeric: tabular-nums; font-weight: 700; }

.hv13-rate__reviews {
  font-size: 12px;
  color: var(--hv13-ink-3);
  font-variant-numeric: tabular-nums;
}

.hv13-card__title {
  margin: 0;
  font-family: var(--hv13-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.012em;
}

.hv13-card__title a { color: var(--hv13-ink); text-decoration: none; }
.hv13-card__title a:hover { color: var(--hv13-green); }

.hv13-card__where { font-size: 13px; color: var(--hv13-ink-3); }

/* Строка social proof: приходит готовой из кэша вместе с бейджем */
.hv13-card__sp {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--hv13-ink-2);
}

.hv13-card__sp-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 1px;
  border-radius: 999px;
}
.hv13-card__sp strong { color: var(--hv13-ink); font-variant-numeric: tabular-nums; }

/* Чипы удобств держим в одну строку: у объектов их бывает по десять,
   и в несколько рядов они распирают карточку, ломая ровную сетку.
   Лишние уходят за край, обрыв смягчён маской — так видно, что список
   продолжается, а высота карточки остаётся предсказуемой. */
.hv13-card__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  mask-image: linear-gradient(to right, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
}

.hv13-card__tags > * { flex: none; }

.hv13-tag {
  /* Внутри чипа текст не разрывается: «Банный чан / Купель / Фурако»
     иначе ломается по слэшам и растёт в высоту. */
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid oklch(90% .022 145);
  border-radius: 8px;
  background: oklch(96% .015 145);
  font-size: 12px;
  color: oklch(30% .05 150);
}

.hv13-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--hv13-ink-3);
}

.hv13-fact--no,
.hv13-fact--warn { color: oklch(.5 .16 40); font-weight: 600; }

.hv13-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hv13-line);
}

.hv13-price {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.hv13-price__unit {
  display: block;
  /* В макете подпись отбита от цены на 2px и не липнет к ней */
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--hv13-ink-3);
}

.hv13-card__price { line-height: 1.1; }

/* ── Варианты текста для десктопа и телефона ──────────────────
   В макете подпись и значение поля поиска на телефоне меняются
   местами, поэтому в разметке лежат оба варианта, а показывается
   нужный. */
.hv13-only-mob { display: none !important; }
.hv13-only-desk { display: inline !important; }

/* Гости: значение одной строкой вместо трёх колонок со счётчиками.
   Штатный блок остаётся в разметке — по нему открывается выбор, —
   но visibility прячет его, сохраняя зону нажатия. */
.hv13-guests-value {
  display: block;
  height: 21px;
  font-family: var(--hv13-sans);
  font-size: 17px;
  line-height: 21px;
  color: var(--hv13-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Штатный блок остаётся в разметке (по нему работают скрипты выбора),
   но с глаз убран: в макете это одна строка «2 взрослых · без детей»,
   а не три колонки со счётчиками и словом «Дом». */
.hv13 .search-rooms-forms-guests { position: relative; }

.hv13 .search-rooms-forms-guests__results {
  position: absolute;
  width: 1px;
  height: 21px;
  overflow: hidden;
  visibility: hidden;
}

@media (max-width: 900px) {
  .hv13-only-mob { display: inline !important; }
  .hv13-only-desk { display: none !important; }

  /* Подпись «Гости» ниже 979px скрывает inline-правило в шаблоне
     (.guest_text). В макете подпись есть у всех трёх полей. */
  .hv13 .search-rooms-forms-guests .search-rooms-container-text {
    display: block !important;
  }

  .hv13 .search-rooms-forms-guests { position: relative; }

  .hv13 .search-rooms-forms-guests__results {
    visibility: hidden;
    height: 21px !important;
  }

  .hv13-guests-value {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Зоны нажатия ─────────────────────────────────────────────
   Требование макета: любая цель не меньше 44px. Там, где элемент
   визуально мельче, площадь добирается вертикальными полями с
   компенсирующим отрицательным margin — вид не меняется, растёт
   только область попадания.
   ──────────────────────────────────────────────────────────── */

/* Заголовок карточки: строка 24px, добираем до 44 */
.hv13-card__title a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

/* Кнопка-поле «Регион, объект или подбор» ростом ровно в контентную
   зону ячейки — 41px, а недостающую высоту даёт padding ячейки, по
   которому клик не проходит. Отступы обратно на кнопку не переносим
   (от этого подпись уезжала ниже соседних полей) — вместо этого
   накладка выносит зону нажатия на поля ячейки. */
.hv13-q { position: relative; }

.hv13-q::after {
  content: '';
  position: absolute;
  inset: -10px -22px;
}

/* Ленты можно тащить мышью: курсор показывает, что это возможно,
   а во время перетаскивания текст не выделяется. */
.hv13-strip { cursor: grab; }
.hv13-strip.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.hv13-strip.is-dragging a { pointer-events: none; }

/* ============================================================
   Сверка с новой версией макета (канва «Глэмпинги.рф — редизайн»,
   Main.dc.html). Значения сняты из разметки артборда.
   ============================================================ */

/* ── Направления: пять карточек на ширину, зазор 20, скругление 18 ── */
.hv13-regions .hv13-strip { gap: 20px; margin-top: 28px; }

.hv13-regions .hv13-region {
  flex: 0 0 calc((100% - 80px) / 5);
  width: auto;
  border-radius: 18px;
}

/* Отступ подписи 14 — полями, а не сдвигом блока: сдвинутое затемнение
   было видно прямоугольной плашкой на светлых снимках */
.hv13-region__body { left: 0; right: 0; bottom: 0; padding: 48px 14px 14px; }
.hv13-region__name { font-size: 19px; line-height: 1.2; }
.hv13-region__count { margin-top: 3px; font-size: 10px; opacity: .78; }

/* На широких экранах пять карточек выходят слишком крупными —
   добавляем колонки: 6 / 7 / 8 в строку */
@media (min-width: 1280px) {
  .hv13-regions .hv13-region { flex-basis: calc((100% - 100px) / 6); }
}
@media (min-width: 1500px) {
  .hv13-regions .hv13-region { flex-basis: calc((100% - 120px) / 7); }
  .hv13-region__name { font-size: 17px; }
}
@media (min-width: 1760px) {
  .hv13-regions .hv13-region { flex-basis: calc((100% - 140px) / 8); }
}

@media (max-width: 900px) {
  /* На телефоне лента: карточка шириной ~0.4 экрана, как в Mobile */
  .hv13-regions .hv13-strip { gap: 12px; }
  .hv13-regions .hv13-region { flex-basis: 148px; border-radius: 16px; }
  .hv13-region__body { padding: 40px 12px 12px; }
  .hv13-region__name { font-size: 16px; line-height: 1.15; }
  .hv13-region__count { font-size: 9px; }
}

/* ── Карточка: плашка соцпруфа слева сверху, сплошной цвет правила ──
   В макете она стоит на месте кнопки избранного и закрывает её;
   ставим рядом с кнопкой, чтобы избранное оставалось доступным. */
.hv13-card__badge {
  top: 12px;
  bottom: auto;
  left: 56px;
  gap: 0;
  max-width: calc(100% - 140px);
  padding: 5px 11px;
  background: oklch(.42 .07 145);
  backdrop-filter: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

/* Строка соцпруфа набрана цветом своего правила */
.hv13-card__sp {
  align-items: center;
  gap: 6px;
  margin-top: -1px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.hv13-card__sp strong { color: inherit; font-weight: 600; }

.hv13-card__sp-dot { width: 5px; height: 5px; margin-top: 0; }

/* Место: булавка, шоссе, расстояние пунктиром и без разрыва */
.hv13-card__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 5px;
  font-size: 13px;
  color: oklch(52% .01 60);
}

.hv13-card__pin { flex: none; }
.hv13-card__far { white-space: nowrap; }

.hv13-card__far > span {
  border-bottom: 1px dashed oklch(72% .01 60);
  color: oklch(36% .012 60);
}

/* Признаки с иконками: вилка и лапа */
.hv13-card__facts { gap: 6px 14px; color: oklch(52% .01 60); }

.hv13-fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Герой: мета-строка, надзаголовок внутри h1 (Main.dc.html) ── */
.hv13-hero__meta { margin-top: 26px; }

.hv13-hero__h1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 40px 0 0;
  font-weight: inherit;
}

.hv13-hero__eyebrow {
  font-family: var(--hv13-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
}

.hv13-hero__h1 .hv13-hero__display { margin-top: 0; line-height: .92; }
.hv13-hero__sub { margin-top: 18px; }

@media (max-width: 700px) {
  /* В макете Mobile над «Осень 2026» только мета-строка */
  .hv13-hero__h1 { margin-top: 18px; gap: 0; }
  .hv13-hero__eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hv13-hero__sub { margin-top: 12px; }
}

/* Общие стили сайта задают h1 цвет, капс и свой шрифт — у заголовка
   героя всё это должно идти от макета, а не от старой темы. */
.hv13-hero .hv13-hero__h1 {
  color: inherit;
  font-family: var(--hv13-sans);
  font-size: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}

.hv13-hero .hv13-hero__h1 .hv13-hero__display { text-transform: none; color: var(--hv13-white); }

/* h1 теперь сам надзаголовок: снимаем с него оформление h1 старой темы */
.hv13-hero h1.hv13-hero__eyebrow {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--hv13-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: left;
}

/* В макете шапки секций не зажаты по ширине: подзаголовок «Сначала
   выберите фишку или регион…» идёт одной строкой. */
.hv13-sec__head { max-width: none; }

/* ============================================================
   Шторка «Ещё N фильтров» (артборд «Главная — „Ещё 16 фильтров“
   открывает шторку», 21.10.2026). Раньше кнопка уводила на страницу
   каталога, и человек терял место, где стоял. Теперь фильтры
   открываются поверх главной: на телефоне — шторкой снизу на 92%
   высоты, на компьютере — панелью справа. Внизу всегда «Показать N
   объектов».
   ============================================================ */
button.hv13-facet__more { gap: 7px; border: 0; background: transparent; cursor: pointer; font-family: inherit; }
button.hv13-facet__more.is-on { text-decoration: none; border-radius: 999px; background: oklch(100% 0 0 / .16); }

html.hv13s-lock, html.hv13s-lock body { overflow: hidden; }
.hv13s, .hv13s * { box-sizing: border-box; }

.hv13s { position: fixed; inset: 0; z-index: 10050; font-family: var(--hv13-sans); color: oklch(20% .012 60); }
.hv13s[hidden] { display: none; }
.hv13s__scrim { position: absolute; inset: 0; background: oklch(18% .02 60 / .45); }

.hv13s__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  background: oklch(100% 0 0);
  box-shadow: -14px 0 40px oklch(20% .02 60 / .22);
}

.hv13s__grip { display: none; }

.hv13s__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid oklch(93.5% .006 85);
}

.hv13s__title { margin: 0; font-family: var(--hv13-serif); font-weight: 400; font-size: 22px; letter-spacing: -.012em; }

.hv13s__x {
  width: 44px; height: 44px; margin-left: -10px;
  border: 0; border-radius: 999px; background: transparent;
  font-size: 17px; color: inherit; cursor: pointer;
}
.hv13s__x:hover { background: oklch(95.6% .006 85); }

.hv13s__reset, .hv13s__ghost, .hv13s__more {
  border: 0; background: transparent; cursor: pointer;
  color: oklch(.42 .07 145); font-family: inherit; font-weight: 600;
}
.hv13s__reset { margin-left: auto; min-height: 44px; padding: 0 6px; font-size: 14px; }

.hv13s__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; }

.hv13s__sec { padding: 14px 0; border-bottom: 1px solid oklch(93.5% .006 85); }
.hv13s__sec--last { border-bottom: 0; }

.hv13s__meta {
  display: block;
  margin-bottom: 6px;
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: oklch(52% .01 60);
}

.hv13s input { position: absolute; opacity: 0; pointer-events: none; }

/* Чипы «Часто ищут» */
.hv13s__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hv13s-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid oklch(90% .006 85); border-radius: 999px; background: oklch(100% 0 0);
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
}
.hv13s-chip b { font-weight: 500; font-size: 12px; color: oklch(58% .01 60); font-variant-numeric: tabular-nums; }
.hv13s-chip:has(input:checked) { border-color: oklch(.42 .07 145); background: oklch(96% .04 148); color: oklch(.36 .09 145); }
.hv13s-chip:has(input:checked) b { color: oklch(.44 .08 145); }
.hv13s-chip:has(input:focus-visible), .hv13s-row:has(input:focus-visible), .hv13s-cap:has(input:focus-visible) { outline: 2px solid oklch(.42 .07 145); outline-offset: 2px; }

/* Потолок цены */
.hv13s__caps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hv13s-cap {
  display: flex; align-items: center; min-height: 52px; padding: 0 14px;
  border: 1px solid oklch(90% .006 85); border-radius: 14px; cursor: pointer;
}
.hv13s-cap b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hv13s-cap--wide { grid-column: 1 / -1; }
.hv13s-cap:has(input:checked) { border: 1.5px solid oklch(.42 .07 145); background: oklch(96% .04 148); color: oklch(.36 .09 145); }

/* Строки с галочкой */
.hv13s-row { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; cursor: pointer; user-select: none; }
.hv13s-row em { flex: 1; min-width: 0; font-style: normal; }
.hv13s-row u, .hv13s-chip b { text-decoration: none; }
.hv13s-row u { color: oklch(58% .01 60); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hv13s-box {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1.6px solid oklch(80% .008 85); border-radius: 7px; background: oklch(100% 0 0);
}
.hv13s-row:has(input:checked) .hv13s-box { border-color: oklch(.42 .07 145); background: oklch(.42 .07 145) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hv13s-row:has(input:checked) u { color: oklch(.44 .08 145); }
/* Пункт, который при текущем выборе ничего не найдёт */
.hv13s-row.is-zero, .hv13s-chip.is-zero { opacity: .45; }

.hv13s-row--more { display: none; }
.hv13s--more .hv13s-row--more { display: flex; }
.hv13s__more { min-height: 44px; padding: 0; font-size: 14px; }

.hv13s-fold summary {
  display: flex; align-items: center; gap: 10px; min-height: 54px;
  list-style: none; cursor: pointer; font-size: 15px; font-weight: 700;
}
.hv13s-fold summary::-webkit-details-marker { display: none; }
.hv13s-fold summary b { margin-left: auto; font-size: 13px; font-weight: 500; color: oklch(.44 .08 145); }
.hv13s-fold summary::after { content: "▾"; color: oklch(52% .01 60); font-size: 13px; }
.hv13s-fold summary b:empty + * { margin-left: auto; }
.hv13s-fold summary b:empty { display: none; }
.hv13s-fold summary span { flex: 1; }
.hv13s-fold[open] summary::after { content: "▴"; }

.hv13s__foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid oklch(93.5% .006 85); background: oklch(100% 0 0);
}
.hv13s__ghost { min-height: 52px; padding: 0 4px; font-size: 15px; }
.hv13s__go {
  flex: 1; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px;
  background: oklch(.58 .17 52); color: oklch(100% 0 0);
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.hv13s__go:hover { background: oklch(.54 .17 52); }
.hv13s__go:disabled { background: oklch(88% .006 85); color: oklch(45% .012 60); cursor: default; }

@media (max-width: 700px) {
  .hv13s__panel {
    top: auto; left: 0;
    width: 100%;
    height: 92%;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 40px oklch(20% .02 60 / .28);
  }
  .hv13s__grip { display: flex; justify-content: center; padding: 8px 0 2px; }
  .hv13s__grip i { width: 40px; height: 4px; border-radius: 999px; background: oklch(88% .006 85); }
  .hv13s__head { padding-top: 6px; }
}

/* Вся карточка «Популярных» кликабельна (скрипт в featured_v13.tpl) */
.hv13-card[data-hv13-href] { cursor: pointer; }

/* ── Компаниям (b2b) — блок с главной прода в оформлении v13 ── */
.hv13-b2b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  padding: 32px 36px;
  border-radius: 22px;
  background: linear-gradient(135deg, oklch(.36 .06 150) 0%, oklch(.27 .045 155) 100%);
  color: oklch(100% 0 0) !important;
  text-decoration: none !important;
}
.hv13-b2b .hv13-eyebrow { color: oklch(85% .06 140); }
.hv13-b2b__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hv13-b2b__title { font-family: var(--hv13-serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.012em; }
.hv13-b2b__sub { max-width: 640px; font-size: 15px; line-height: 1.55; color: oklch(90% .015 140); }
.hv13-b2b__go {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px;
  border-radius: 999px; background: oklch(100% 0 0); color: oklch(.3 .05 150);
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.hv13-b2b:hover .hv13-b2b__go { background: oklch(95% .03 140); }
@media (max-width: 700px) {
  .hv13-b2b { padding: 24px 20px; border-radius: 18px; }
  .hv13-b2b__go { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* ── Карточка «Популярных» по артборду «Карточка в ленте» (21.10) ──
   Теги без обрезки по краю (хвост «+N» ставит скрипт в featured_v13.tpl),
   «Цена по запросу» мелко на месте цены. */
.hv13-card__tags { mask-image: none; -webkit-mask-image: none; }
.hv13-tag[hidden] { display: none; }
.hv13-tag--rest { border-color: oklch(90% .006 85); background: oklch(96.5% .008 85); color: var(--hv13-ink-3); }
.hv13-price__unit--top { margin: 0 0 2px; }
.hv13-price--ask { font-size: 15px; font-weight: 600; letter-spacing: 0; color: oklch(48% .012 60); }

/* Телефон: карточки — плитки с рамкой, иначе в одном столбце граница между
   ними не читалась и «Выбрать» казалась частью следующего объекта.
   Показываем все карточки, а не четыре. */
@media (max-width: 540px) {
  .hv13-cards { row-gap: 14px; }
  .hv13-cards > .hv13-card:nth-of-type(n+5) { display: flex; }
  .hv13-card {
    gap: 0;
    overflow: hidden;
    border: 1px solid oklch(91.5% .006 85);
    border-radius: 16px;
    background: var(--hv13-white);
    box-shadow: 0 1px 2px oklch(20% .02 60 / .05);
  }
  .hv13-card__shot { border-radius: 0; }
  .hv13-card__body { padding: 12px 14px 14px; }
}

/* Сердечко избранного крупнее на треть (17 → 23px), круг кнопки прежний */
.hv13-card__fav-ico { width: 23px; height: 23px; flex: none; }

/* ── Герой: фото «Осень 2026, туман над водой» (21.10.2026) ──────
   Вместо градиента. Слева и снизу притемнение: белый заголовок стоит
   на светлом небе, а поиск — на светлой воде. Телефону — вертикальный
   кадр, иначе домик уезжал за край. */
.hv13-hero {
  background:
    linear-gradient(90deg, oklch(18% .03 60 / .55) 0%, oklch(18% .03 60 / .25) 45%, oklch(18% .03 60 / 0) 70%),
    linear-gradient(180deg, oklch(15% .02 60 / .45) 0%, oklch(15% .02 60 / 0) 22%, oklch(15% .02 60 / 0) 55%, oklch(15% .03 150 / .6) 100%),
    var(--hv13-hero-wide, none) center 55% / cover no-repeat,
    var(--hv13-season, oklch(.42 .08 60));
}
@media (max-width: 1100px) and (min-width: 701px) {
  .hv13-hero {
    background:
      linear-gradient(90deg, oklch(18% .03 60 / .55) 0%, oklch(18% .03 60 / .25) 45%, oklch(18% .03 60 / 0) 70%),
      linear-gradient(180deg, oklch(15% .02 60 / .45) 0%, oklch(15% .02 60 / 0) 22%, oklch(15% .02 60 / 0) 55%, oklch(15% .03 150 / .6) 100%),
      var(--hv13-hero-wide960, var(--hv13-hero-wide, none)) center 55% / cover no-repeat,
      var(--hv13-season, oklch(.42 .08 60));
  }
}
@media (max-width: 700px) {
  html .hv13.hv13-hero {
    background:
      linear-gradient(180deg, oklch(15% .02 60 / .5) 0%, oklch(15% .02 60 / .15) 30%, oklch(15% .02 60 / .1) 55%, oklch(15% .03 150 / .65) 100%),
      var(--hv13-hero-tall, var(--hv13-hero-wide, none)) center 30% / cover no-repeat,
      var(--hv13-season, oklch(.42 .08 60));
  }
}

/* Теги места в карточке «Популярных» — свой цвет у каждого, как в каталоге */
.hv13-tag--place { border-color: transparent; font-weight: 600; }
.hv13-tag--river     { background: oklch(95% .04 230); color: oklch(.44 .11 240); }
.hv13-tag--lake      { background: oklch(95% .045 205); color: oklch(.44 .1 215); }
.hv13-tag--sea       { background: oklch(95% .04 195); color: oklch(.42 .09 200); }
.hv13-tag--forest    { background: oklch(95% .045 150); color: oklch(.38 .09 150); }
.hv13-tag--mountains { background: oklch(95% .03 70); color: oklch(.44 .09 60); }
.hv13-tag--ski       { background: oklch(95% .04 300); color: oklch(.44 .11 300); }

/* Потолки цены в шторке: под суммой — сколько объектов останется */
.hv13s-cap { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.hv13s-cap [data-c] { font-size: 12px; color: oklch(58% .01 60); font-variant-numeric: tabular-nums; }
.hv13s-cap:has(input:checked) [data-c] { color: oklch(.44 .08 145); }
.hv13s-cap.is-zero { opacity: .45; }