/* vsh-home.css — новая главная на UI-ките (t_f793dff6, ?vsh=1). Только отличия страницы.
   Кит: /js/vse-ui.css (подключён в <head> всех страниц). Поиск: /js/sc-fields.css, /js/sc-calendar.css,
   /js/vs-dates.css. Ноль хексов, ноль style="" в разметке (правила /js/vse-ui.README.md).
   Селекторы страницы — с префиксом .vsh (перебивают теги темы Aspro без !important). */

.vsh {
	font-family: var(--font);
	color: var(--ink);
	background: var(--paper);
}

.vsh .vsh-wrap {
	margin: 0 auto;
	box-sizing: border-box;
}

/* ширину и боковые отступы на десктопе задаёт штатный контейнер темы .maxwidth-theme (как у подвала и шапки);
   на телефоне и планшете — свой отступ кита, чтобы ленты со свайпом выходили к краю экрана */
@media (max-width: 900px) {
	/* у .vsh-top тоже класс maxwidth-theme: его боковой отступ на мобиле складывался с отступом .vsh-wrap (≈31px вместо 16) —
	   карточки были уже экрана, а липкие пилюля и нижняя панель (с отрицательными полями под 16px) не доходили до краёв */
	.vsh .vsh-top {
		padding-left: 0;
		padding-right: 0;
	}
	.vsh .vsh-wrap {
		padding: 0 var(--sp-4);
	}
	/* нижняя панель «Фильтры · На карте» — полупрозрачная, с размытием того, что под ней */
	.vsh .vsh-bbar {
		background: color-mix(in srgb, var(--paper) 78%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--line);
	}
}

.vsh .vsh-pillwrap {
	display: none;
}

/* Мобильный поиск скроллится как на десктопе: пилюля липнет к верху с того места, где стоит, и едет до конца каталога
   (раньше появлялась отдельная верхняя пилюля у начала каталога). Для этого секция первого экрана и её обёртка
   display:contents — пилюля становится прямым ребёнком .vsh-top, который охватывает и каталог; отступы секции перенесены
   на .vsh-top. Полупрозрачный фон (::before) включает vsh-home.js (класс is-on), когда обёртка дошла до верха. */
@media (max-width: 860px) {
	.vsh .vsh-top {
		/* высота нижней панели «Фильтры · На карте» + воздух: пилюля в конце каталога останавливается ВЫШЕ панели, а не под ней */
		--vsh-endgap: calc(var(--tap) + var(--sp-3) * 2 + 1px + var(--safe-b) + var(--sp-2));
		padding: var(--sp-6) var(--sp-4) calc(var(--vs-sec) * 1.25);
	}
	.vsh .vsh-top .vsh-cards {
		padding-bottom: 0;
	}
	.vsh .vsh-hero,
	.vsh .vsh-hero > .vsh-wrap {
		display: contents;
	}
	.vsh .vsh-top .vsh-wrap {
		padding-left: 0;
		padding-right: 0;
	}
	.vsh .vsh-top .vsh-quick {
		/* компенсирует нижний «запас» пилюли (см. ниже): на глаз чипы стоят в 16px под пилюлей, как раньше */
		margin-top: calc(var(--sp-4) - var(--vsh-endgap));
		margin-bottom: var(--sp-4);
	}
	.vsh .vsh-pillwrap {
		display: block;
		position: sticky;
		top: 0;
		z-index: 45;
		/* нижний запас = высота нижней панели: в конце каталога пилюля встаёт над ней (нижняя панель — последняя в .vsh-top) */
		margin: calc(var(--sp-2) * -1) calc(var(--sp-4) * -1) calc(var(--vsh-endgap) - var(--sp-2));
		padding: var(--sp-2) var(--sp-4);
	}
	.vsh .vsh-pillwrap::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: color-mix(in srgb, var(--paper) 78%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--line);
		opacity: 0;
		transition: opacity var(--vs-dur) var(--vs-ease);
	}
	.vsh .vsh-pillwrap.is-on::before {
		opacity: 1;
	}
}

/* ---------- первый экран: H1 + поиск + быстрые ссылки ---------- */
.vsh .vsh-hero {
	padding: var(--vs-sec) 0 var(--vs-blk);
}

.vsh .vsh-h1 {
	font-family: var(--font-display);
	font-size: var(--vs-fs-h1);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
	margin: 0 0 var(--vs-blk);
}

.vsh .vsh-search {
	max-width: 880px;
}

.vsh .vsh-quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-el);
	margin-top: var(--vs-blk);
}

.vsh .vsh-quick .vs-chip {
	text-decoration: none;
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
}

/* ---------- «Найдено N» + действия ---------- */
.vsh .vsh-results {
	padding: 0 0 var(--vs-sec);
}

.vsh .vsh-results__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vs-el);
}

.vsh .vsh-summary {
	flex: 1 1 260px;
}

.vsh .vsh-results__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vs-el);
}

.vsh .vsh-results__act .vs-btn {
	text-decoration: none;
	min-height: var(--tap);
}

/* ---------- шторка фильтров: снизу на мобиле, по центру на десктопе ---------- */
.vsh .vsh-layer {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--vs-dur);
}

.vsh .vsh-layer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.vsh .vsh-layer__bg {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ink) 45%, transparent);
	opacity: 0;
	transition: opacity var(--vs-dur) var(--vs-ease);
}

.vsh .vsh-layer.is-open .vsh-layer__bg {
	opacity: 1;
}

.vsh .vsh-sheet {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform var(--vs-dur) var(--vs-ease);
	outline: 0;
}

.vsh .vsh-layer.is-open .vsh-sheet {
	transform: none;
}

.vsh .vsh-sheet__handle {
	width: 40px;
	height: 4px;
	margin: var(--sp-2) auto 0;
	border-radius: var(--r-pill);
	background: var(--line);
}

.vsh .vsh-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	gap: var(--sp-5);
}

.vsh .vsh-sheet__foot {
	padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--line);
}

.vsh .vsh-sheet__foot .vs-btn {
	text-decoration: none;
}

html.vsh-lock,
html.vsh-lock body {
	overflow: hidden;
}

@media (min-width: 901px) {
	.vsh .vsh-layer {
		align-items: center;
	}
	.vsh .vsh-sheet {
		border-radius: var(--r-xl);
		box-shadow: var(--sh-4);
		transform: translateY(var(--sp-6));
		opacity: 0;
		transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease);
	}
	.vsh .vsh-layer.is-open .vsh-sheet {
		transform: none;
		opacity: 1;
	}
	.vsh .vsh-sheet__handle {
		display: none;
	}
}

/* ---------- группы фильтров ---------- */
.vsh .vsh-fg__title {
	font-size: var(--fs-15);
	font-weight: 700;
	margin: 0 0 var(--sp-2);
}

.vsh .vsh-fg__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-el);
}

.vsh .vsh-fg__chips .vs-chip {
	min-height: var(--tap);
}

.vsh .vsh-fg__row {
	display: flex;
	gap: var(--vs-el);
}

.vsh .vsh-input {
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--tap);
	padding: 0 var(--sp-3);
	box-sizing: border-box;
	font: inherit;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-m);
}

.vsh .vsh-input:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
}

.vsh .vsh-range {
	margin-top: var(--sp-2);
}

.vsh .vsh-range .vs-range__fill {
	left: calc(var(--tap) / 2 + (100% - var(--tap)) * var(--a, 0));
	right: calc(var(--tap) / 2 + (100% - var(--tap)) * (1 - var(--b, 1)));
}

.vsh .vs-badge[hidden] {
	display: none;
}

/* ---------- сетка карточек ---------- */
.vsh .vsh-cards {
	padding: 0 0 var(--vs-sec);
}

.vsh .vsh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--sp-4);
}

@media (min-width: 901px) {
	.vsh .vsh-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.vsh .vsh-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.vsh .vsh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
	padding: var(--sp-3);
}

/* галерея выше «растянутой» ссылки названия: свайп фото работает, клик по остальной карточке открывает объект */
.vsh .vsh-card__gal {
	position: relative;
	z-index: 1;
	aspect-ratio: 3 / 2;
}

/* тип жилья — плашкой на фото, в левом верхнем углу (не отдельной строкой над названием) */
.vsh .vsh-card__type {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: 2;
	pointer-events: none;
	background: color-mix(in srgb, var(--card) 92%, transparent);
	color: var(--red);
	box-shadow: var(--sh-1);
}

/* цвета по роли: синий — то, что нажимают, красный — то, что показывают. Аватар автора отзыва — не кнопка, поэтому красный
   (в ките он синий; правка на уровне главной, в кит — решение Данила, затронет все отзывы) */
.vsh .vsh-rv__card .vs-rvcard__ava {
	background: var(--red-soft);
	color: var(--red);
}

.vsh .vsh-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	flex: 1 1 auto;
	min-width: 0;
}

.vsh .vsh-card__title {
	margin: 0;
	/* токен названия карточки, как .hf-card__nm списка (t_7bea5561): Space Grotesk 600, --ink */
	font: 600 var(--fs-17) / 1.3 var(--font-display);
	letter-spacing: -.01em;
	text-transform: none;
}

.vsh .vsh-card__title a {
	color: var(--ink);
	text-decoration: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vsh .vsh-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.vsh .vsh-card__rate {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.vsh .vsh-card__cnt,
.vsh .vsh-card__facts {
	font-size: var(--fs-14);
	color: var(--muted);
}

.vsh .vsh-card__tags {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	min-width: 0;
	gap: 6px;
}

.vsh .vsh-card__tags .vsh-tag {
	flex: none;
	white-space: nowrap;
}

.vsh .vsh-card__tags .vsh-tag[hidden] {
	display: none;
}

.vsh .vsh-card__foot {
	margin-top: auto;
	padding-top: var(--sp-2);
}

.vsh .vsh-more {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-6);
}

.vsh .vsh-more .vs-morebtn {
	text-decoration: none;
}

/* бейдж «Отель»: нейтральный синий, не коралловый (коралл в ките — цена, счётчики, «недоступно») */
.vsh .vsh-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 var(--sp-2);
	border-radius: var(--r-pill);
	font: 700 var(--fs-12) / 1 var(--font);
	letter-spacing: normal;
	text-transform: none;
}

.vsh .vsh-badge--hotel,
.vsh .vsh-badge--type {
	background: var(--red-soft);
	color: var(--red);
}

/* ---------- слово при оценке и строка локации (как в карточке /oteli/) ---------- */
.vsh .vsh-card__rword {
	font-size: var(--fs-14);
	font-weight: 600;
	color: var(--ink);
}

.vsh .vsh-card__loc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: var(--fs-14);
	color: var(--muted);
}

.vsh .vsh-card__locn {
	min-width: 0;
	font-weight: 600;
	color: var(--ink);
}

.vsh .vsh-card__locpin {
	flex: none;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--red);
	stroke-width: 2;
}

.vsh .vsh-card__loc--area {
	gap: var(--sp-1);
}

.vsh .vsh-card__loc--area .vsh-card__locn {
	font-weight: 500;
}

/* ---------- «Популярные направления»: на мобиле — лента со свайпом, на десктопе — сетка ---------- */
.vsh .vsh-dest {
	padding: 0 0 var(--vs-sec);
}

.vsh .vsh-h2 {
	margin: 0 0 var(--vs-blk);
	font: 700 var(--vs-fs-h2) / 1.2 var(--font-display);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}

/* карточки направлений (.vs-destrow / .vs-dest) живут в ките: /js/vse-ui.css, раздел «НАПРАВЛЕНИЯ» */

/* ---------- «О нас пишут»: на мобиле — лента со свайпом, на десктопе — сетка 3 колонки ---------- */
.vsh .vsh-rv {
	padding: 0 0 var(--vs-sec);
}

.vsh .vsh-rv__row {
	display: flex;
	gap: var(--sp-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	margin: 0 calc(var(--sp-4) * -1);
	padding: 0 var(--sp-4);
}

.vsh .vsh-rv__row::-webkit-scrollbar {
	display: none;
}

.vsh .vsh-rv__card {
	flex: 0 0 85%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	scroll-snap-align: start;
	box-sizing: border-box;
}

.vsh .vsh-rv__card .vs-rvcard__txt {
	margin: 0;
}

/* оценка отзыва: цветная оценка сверху, под ней слово («Потрясающе»). Столбиком, а не в строку: в строку слово отнимало
   место у даты, и на узкой карточке мобилки «28 августа 2024» переносилась на три строки */
.vsh .vsh-rv__rg {
	flex: none;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--sp-1);
}

.vsh .vsh-rv__rg .vs-rvcard__score {
	margin-left: 0;
}

.vsh .vsh-rv__word {
	order: 2;
	font-size: var(--fs-13);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	white-space: nowrap;
}

.vsh .vsh-rv__card .vs-rvcard__date {
	white-space: nowrap;
}

.vsh .vsh-rv__obj {
	margin-top: auto;
	font: 600 var(--fs-14) / 1.3 var(--font);
	color: var(--blue);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vsh .vsh-rv__obj:hover {
	color: var(--blue-deep);
}

@media (min-width: 901px) {
	.vsh .vsh-rv__row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-4);
		overflow: visible;
		margin: 0;
		padding: 0;
	}
	.vsh .vsh-rv__card {
		flex: none;
		max-width: none;
	}
}

/* теги удобств: нейтральные, без заливки */
.vsh .vsh-tag {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--card);
	font: 500 var(--fs-13) / 1 var(--font);
	color: var(--ink-2);
}

/* кнопки листания фото: только для устройств с мышью, видны при наведении на карточку */
.vsh .vsh-gal__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -18px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--card) 92%, transparent);
	color: var(--ink);
	box-shadow: var(--sh-2);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--vs-dur) var(--vs-ease);
}

.vsh .vsh-gal__nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vsh .vsh-gal__nav--prev {
	left: var(--sp-2);
}

.vsh .vsh-gal__nav--next {
	right: var(--sp-2);
}

@media (hover: hover) and (pointer: fine) {
	.vsh .vsh-gal__nav {
		display: inline-flex;
	}
	.vsh .vsh-card:hover .vsh-gal__nav,
	.vsh .vsh-card:focus-within .vsh-gal__nav {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vsh .vsh-layer,
	.vsh .vsh-layer__bg,
	.vsh .vsh-sheet {
		transition: none;
	}
}

/* ленты со свайпом (направления, отзывы): без scroll-padding снап прижимает первую карточку к краю окна ленты и она
   выезжает левее заголовка на отступ; с ним первая карточка стоит ровно под заголовком, последняя — с тем же отступом справа */
.vsh .vsh-rv__row {
	scroll-padding: 0 var(--sp-4);
}

/* ---------- мобильный поиск: пилюля в одну строку + шторка (как на /oteli/), панель «Фильтры · На карте» (01.10, ТЗ Дениса) ----------
   Пилюля (.vsh-pill) и шторка поиска работают до 860px — тот же порог, по которому sc-fields переключают раскладку и
   sc-calendar.js уходит в мобильный режим. Выше 860px — поля в строку, как раньше. */
.vsh .vsh-rv__card {
	position: relative; /* скрытые .vs-sr внутри карточки иначе привязываются к .middle и растягивают страницу вширь на мобиле */
}

.vsh .vsh-pill,
.vsh .vsh-searchbg,
.vsh .vsh-search__head {
	display: none;
}

.vsh .vsh-bbar {
	position: sticky; /* липнет к низу экрана, пока конец каталога ниже; в конце остаётся на своём месте — ведёт браузер, без JS и без лагов */
	bottom: 0;
	left: auto;
	right: auto;
	margin: var(--sp-4) calc(var(--sp-4) * -1) 0;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform var(--vs-dur) var(--vs-ease), visibility 0s linear var(--vs-dur);
}

.vsh .vsh-bbar.is-on {
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

/* на мобиле кнопки «Показать ещё» нет: её роль у нижней панели («На карте» ведёт туда же). Панель стоит в конце секции
   карточек (position:sticky, в потоке): липнет к низу экрана и остаётся на месте кнопки; ниже идёт обычный отступ секции,
   поэтому до блока «Популярные направления» остаётся воздух */
@media (max-width: 900px) {
	.vsh .vsh-more {
		display: none;
	}
}

.vsh .vsh-bbar .vs-btn {
	text-decoration: none;
	min-height: var(--tap);
}

@media (min-width: 901px) {
	.vsh .vsh-bbar {
		display: none;
	}
}

@media (max-width: 860px) {
	.vsh .vsh-pill.vsh-pill {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-3);
		width: 100%;
		height: calc(var(--tap) + 10px);
		padding: 0 var(--sp-2) 0 var(--sp-5);
		box-sizing: border-box;
		border: 1px solid var(--line);
		border-radius: var(--r-pill);
		background: var(--card);
		box-shadow: var(--sh-1);
		text-align: left;
		color: var(--ink);
		font-family: var(--font);
		cursor: pointer;
	}

	.vsh .vsh-pill__txt {
		display: block;
		min-width: 0;
		overflow: hidden;
	}

	.vsh .vsh-pill__city,
	.vsh .vsh-pill__when {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.vsh .vsh-pill__city {
		font-size: var(--fs-14);
		font-weight: 600;
		line-height: 1.3;
	}

	.vsh .vsh-pill__when {
		font-size: var(--fs-11);
		line-height: 1.3;
		color: var(--muted);
	}

	.vsh .vsh-pill__when.is-set {
		color: var(--ink);
		font-weight: 600;
	}

	.vsh .vsh-pill__go {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		border-radius: var(--r-m);
		background: var(--blue);
		color: var(--on-accent);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vsh .vsh-pill__go svg {
		width: 16px;
		height: 16px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
	}

	/* поля в шторке — на всю ширину: от пресета --list-desktop остаётся align-items:center, и в колонке карточки
	   сжимаются до ширины содержимого (разной у «Куда», «Даты», «Гости») */
	.vsh .vsh-search .sc-fields {
		align-items: stretch;
	}

	/* сама карточка поиска на мобиле — шторка снизу: ниже календаря (9998–9999), выше страницы */
	.vsh .vsh-search {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		max-width: none;
		max-height: 88vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 var(--sp-4) calc(var(--sp-4) + var(--safe-b));
		box-sizing: border-box;
		background: var(--card);
		border-radius: var(--r-xl) var(--r-xl) 0 0;
		box-shadow: var(--sh-4);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform var(--vs-dur) var(--vs-ease), visibility 0s linear var(--vs-dur);
	}

	.vsh .vsh-search.is-open {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	.vsh .vsh-search__head {
		display: block;
		padding-bottom: var(--sp-3);
	}

	.vsh .vsh-search__title {
		margin-top: var(--sp-3);
		font-family: var(--font-display);
		font-size: var(--vs-s-fs-t);
		font-weight: 700;
		line-height: 1.25;
		color: var(--ink);
	}

	.vsh .vsh-searchbg {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9989;
		background: color-mix(in srgb, var(--ink) 45%, transparent);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--vs-dur) var(--vs-ease), visibility 0s linear var(--vs-dur);
	}

	.vsh .vsh-searchbg.is-open {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vsh .vsh-bbar,
	.vsh .vsh-pillbar,
	.vsh .vsh-search,
	.vsh .vsh-searchbg {
		transition: none;
	}
}

/* ---------- воздух: больше отступов между блоками и внутри них (правка 01.10) ----------
   Идёт в конце файла и перебивает значения выше при том же весе селектора. */
.vsh .vsh-wrap,
.vsh .vsh-top {
	background: transparent;
}

/* микроразметка (Product/Offer, Organization): только для роботов, на экране её нет */
.vsh .vsh-ms {
	display: none;
}

/* H2 выдачи (t_c112ca56): заголовок секции + мета-строка muted, без рамки — как .hf-meta списка отелей. Специфичность (0,3,0) перебивает
   прежние padding'и .vsh-summary (в т.ч. мобильные). */
.vsh .vsh-summary.vsh-resh {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.vsh .vsh-resh__t {
	margin: 0;
	font: 700 var(--vs-fs-h2) / 1.2 var(--font-display);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}

.vsh .vsh-resh__m {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-14);
	line-height: 1.4;
	color: var(--muted);
}

.vsh .vsh-hero {
	padding: var(--vs-sec) 0 var(--vs-blk);
}

.vsh .vsh-h1 {
	margin-bottom: var(--vs-blk);
}

.vsh .vsh-h2 {
	margin-bottom: calc(var(--vs-blk) * 1.5);
}

.vsh .vsh-quick {
	gap: var(--sp-3);
	margin-top: var(--vs-blk);
}

.vsh .vsh-results,
.vsh .vsh-cards,
.vsh .vsh-dest,
.vsh .vsh-rv {
	padding-bottom: calc(var(--vs-sec) * 1.25);
}

@media (min-width: 901px) {
	/* первый экран на десктопе: сводка ближе к карточкам */
	.vsh .vsh-results {
		padding-bottom: calc(var(--vs-blk) * 1.5);
	}
}

.vsh .vsh-results__bar {
	gap: var(--sp-3);
}

.vsh .vsh-summary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--sp-4) var(--sp-5);
}

.vsh .vsh-results__act .vs-btn {
	min-height: calc(var(--tap) + 8px);
	padding-left: var(--sp-5);
	padding-right: var(--sp-5);
}

.vsh .vsh-grid {
	gap: var(--sp-5);
}

.vsh .vsh-card {
	padding: var(--sp-4);
	gap: var(--sp-3);
}

.vsh .vsh-card__body {
	gap: var(--vs-el);
}

.vsh .vsh-rv__card {
	padding: var(--sp-5);
	gap: var(--sp-4);
}

/* десктоп: фон липкой панели (#vshStickBg) выходит за контейнер на всю ширину экрана — без горизонтальной прокрутки страницы */
@media (min-width: 901px) {
	.vsh {
		overflow-x: clip;
	}
}

/* ---------- десктоп (от 901px): поиск и «Фильтры / Показать на карте» липнут к верху и едут за каталогом (v2) ----------
   Настоящие #vshSearch и .vsh-results__act — position:sticky в общем контейнере .vsh-top (он охватывает первый экран, «Найдено N»
   и карточки). Секции и их обёртки на десктопе display:contents, поэтому поиск и кнопки — прямые дети .vsh-top: sticky ограничен
   концом каталога, а не своей секцией. Поиск липнет, когда доходит до верха, кнопки — когда доходят они; полупрозрачный фон
   (#vshStickBg) включается, когда блок карточек дошёл до верха; в конце каталога всё останавливается в запасе (.vsh-top::after).
   Мобильная вёрстка (<901px) не затронута. Отступы секций (padding) при display:contents не работают — заданы на детях ниже. */
@media (min-width: 901px) {
	.vsh .vsh-top {
		--vsh-sh: 63px;
		--vsh-ah: 52px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: var(--sp-3);
		padding-top: var(--vs-sec);
		padding-bottom: 0;
	}
	.vsh .vsh-hero,
	.vsh .vsh-hero > .vsh-wrap,
	.vsh .vsh-results,
	.vsh .vsh-results > .vsh-wrap,
	.vsh .vsh-results__bar,
	.vsh .vsh-cards,
	.vsh .vsh-cards > .vsh-wrap {
		display: contents;
	}
	.vsh .vsh-h1,
	.vsh .vsh-quick,
	.vsh .vsh-grid,
	.vsh .vsh-more {
		flex: 0 0 100%;
	}
	.vsh .vsh-search {
		flex: 0 0 100%;
		max-width: 880px;
		position: sticky;
		top: calc(var(--vsh-top, 0px) + var(--sp-3));
		z-index: 63;
	}
	.vsh .vsh-summary {
		flex: 1 1 0;
		min-width: 0;
		margin-top: var(--vs-blk);
	}
	.vsh .vsh-results__act {
		flex: 0 0 auto;
		margin-top: var(--vs-blk);
		position: sticky;
		top: calc(var(--vsh-top, 0px) + var(--sp-3) + (var(--vsh-sh) - var(--vsh-ah)) / 2);
		z-index: 62;
	}
	.vsh .vsh-grid {
		/* подложка #vshStickBg стоит в потоке перед сеткой и занимает свою высоту — вычитаем её, чтобы отступ остался прежним */
		margin-top: calc(var(--vs-blk) * 1.5 - var(--vsh-sh) - var(--sp-3) * 2);
	}
	.vsh .vsh-stickbg {
		flex: 0 0 100%;
		height: calc(var(--vsh-sh) + var(--sp-3) * 2);
		position: sticky;
		top: var(--vsh-top, 0px);
		z-index: 60;
		pointer-events: none;
	}
	.vsh .vsh-stickbg::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -100vmax;
		right: -100vmax;
		background: color-mix(in srgb, var(--paper) 78%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--line);
		opacity: 0;
		transition: opacity var(--vs-dur) var(--vs-ease);
	}
	.vsh .vsh-stickbg.is-on::before {
		opacity: 1;
	}
	/* запас в конце каталога: здесь поиск и кнопки останавливаются, ничего не перекрывая */
	.vsh .vsh-top::after {
		content: '';
		flex: 0 0 100%;
		height: calc(var(--vsh-sh) + var(--sp-3) * 2 + var(--sp-6));
	}
}

/* 901–1099px: поиск (до 880px) и кнопки в одну линию не помещаются — липнет только поиск */
@media (min-width: 901px) and (max-width: 1099px) {
	.vsh .vsh-results__act {
		position: static;
	}
}

/* 1100–1399px: кнопки компактнее (ниже, уже, короткая подпись «На карте»), поиск уже — всё влезает в одну липкую линию */
@media (min-width: 1100px) and (max-width: 1399px) {
	.vsh .vsh-top {
		--vsh-ah: 44px;
	}
	.vsh .vsh-search {
		max-width: calc(100% - 310px);
	}
	.vsh .vsh-results__act .vs-btn {
		min-height: var(--tap);
		padding-left: var(--sp-4);
		padding-right: var(--sp-4);
	}
	.vsh .vsh-results__act .vsh-only-d {
		display: none;
	}
	.vsh .vsh-results__act .vsh-only-m {
		display: inline;
	}
}

.vsh .vsh-only-m {
	display: none;
}

/* ---------- мобила: плотнее первый экран; «Фильтры» и «На карте» в одном ряду, как нижняя панель (01.10) ----------
   Идёт после блока «воздух» и перебивает его значения на телефоне; десктоп не затронут. */
@media (max-width: 900px) {
	.vsh .vsh-hero {
		padding: var(--sp-6) 0 var(--sp-4);
	}

	.vsh .vsh-h1 {
		margin-bottom: var(--sp-4);
	}

	.vsh .vsh-quick {
		gap: var(--sp-2);
		margin-top: var(--sp-4);
	}

	.vsh .vsh-results {
		padding-bottom: var(--sp-6);
	}

	.vsh .vsh-results__bar {
		gap: var(--sp-2);
	}

	.vsh .vsh-summary {
		flex: 1 1 100%;
		padding: var(--sp-3) var(--sp-4);
	}

	.vsh .vsh-results__act {
		flex: 1 1 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-2);
	}

	.vsh .vsh-results__act .vs-btn {
		min-height: var(--tap);
		padding-left: var(--sp-3);
		padding-right: var(--sp-3);
		justify-content: center;
	}

	.vsh .vsh-only-d {
		display: none;
	}

	.vsh .vsh-only-m {
		display: inline;
	}
}

@media (min-width: 901px) {
	.vsh .vsh-hero {
		padding-top: var(--vs-sec);
	}
	.vsh .vsh-rv__row {
		gap: var(--sp-5);
	}
}
