/* Piknikovich - hub-city.css
   Хаб города (/moskva/) и страница района (/moskva/zelao/,
   /podmoskovie/himki/). Один шаблон, одна зона стилей.

   Эталон: ui_kits/website/city.html (City.jsx) - десктоп 1440,
   ui_kits/website/city-mobile.html (CityMobile.jsx) - 375.

   Файл НЕ повторяет то, что уже перенесено: полосы .pk-hband, шапки секций
   .pk-h-head, карточки типов .pk-hcat, карточки площадок .pk-hvenue,
   таблица цен .pk-hprices, аккордеон .pk-hfaq, блок Журнала .pk-hjournal
   и нижний CTA .pk-hbottom описаны в home-sections.css под `.pk-home` -
   хаб ставит этот класс на обёртку и переиспользует ИХ. Здесь только то,
   чего на главной нет: первый экран хаба, компакт-поиск, плитка карты,
   сетка округов, панель шашлыка, компакт-шаги, SEO-блок с line-art,
   социальная строка CTA и чипы соседей.

   Одна разметка на десктоп и мобильный: раскладку переключают медиазапросы,
   отдельной мобильной страницы нет. */

.pk-cityhub {
	/* Токены эталона (tokens/typography.css), которых ещё нет в base.css.
	   Держим локально, как это уже сделано в catalog.css: base.css сейчас
	   правят соседние окна переноса, и одновременная запись туда - верный
	   способ потерять чужие строки. */
	--fs-h1: 40px;    /* base.css :not(.home) h1, .pk-listing__h1 */
	--fs-seo: 14.5px; /* SEO-проза hub.css */
}

/* Третий тон полосы эталона (Band tone="soft"). На главной он не
   понадобился, на хабе им идут «Где пожарить шашлык» и подборки. */
.pk-cityhub .pk-hband--soft { background: var(--pk-bg-soft); }

/* ================================================================
   ТИПОГРАФИКА СЕКЦИЙ И СПЕЦИФИЧНОСТЬ

   base.css и single-listing.css задают типографику ВНУТРЕННИХ страниц
   селекторами вида `.pk-front:not(.home) h2` (0-2-1) и
   `.pk-front:not(.home) ol` - у главной этих правил нет, потому что на
   ней стоит класс `.home`. Хаб - внутренняя страница, поэтому все
   правила блоков, перенесённые с главной под `.pk-home ...` (0-2-0),
   этими селекторами перебиваются: заголовок нижнего CTA приезжал 18px
   тёмным вместо белых 32, шапки секций - 28 вместо 34, а нумерованный
   список шагов получал чужой padding-left.

   Ниже - те же значения, что в эталоне, но с тегом в селекторе (0-3-1),
   чтобы вес был выше. Приём тот же, что в catalog.css (`h2.pk-cat-h2`).
   ================================================================ */

/* Шапка секции. City.jsx: Heading size={34} у всех блоков хаба. */
.pk-front .pk-cityhub h2.pk-h-title {
	margin: 0; font-size: 34px; font-weight: var(--fw-black);
	letter-spacing: -0.025em; line-height: 1.1; color: var(--pk-text);
}
/* Журнал - единственный блок, который в эталоне идёт с дефолтным 40:
   он перенесён с главной как есть (CityArticles). */
.pk-front .pk-cityhub [data-pk-home-section="journal"] h2.pk-h-title { font-size: 40px; }

.pk-cityhub .pk-h-lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--pk-ink-soft); max-width: 760px; }

/* Заголовок и лид CTA заявки. Эталон - RequestCta.jsx (32/17), не
   нижний CTA главной (40): на хабе это другой компонент. */
.pk-front .pk-cityhub h2.pk-hbottom__title {
	margin: 0 0 12px; font-size: 32px; font-weight: var(--fw-black);
	line-height: 1.14; letter-spacing: -0.03em; color: #fff;
	text-shadow: 0 2px 10px rgba(10, 28, 18, 0.35);
}
.pk-cityhub .pk-hbottom__lead { margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }

/* Нумерованный список шагов - сетка, а не список: чужой padding-left
   и нижний margin с него снимаются. */
.pk-front .pk-cityhub ol.pk-csteps { margin: 0; padding: 0; list-style: none; }
.pk-front .pk-cityhub ol.pk-csteps li + li { margin-top: 0; }

/* Строки Журнала - тот же случай: блок перенесён с главной как есть,
   и на внутренней странице ему достаётся чужой отступ списка. */
.pk-front .pk-cityhub ul.pk-hjournal__rows { margin: 0; padding: 0; }
.pk-front .pk-cityhub ul.pk-hjournal__rows li + li { margin-top: 0; }

/* ================================================================
   1. ПЕРВЫЙ ЭКРАН ХАБА
   Эталон: City.jsx -> CityHead. Кремовая полоса 28/44, крошки, h1,
   лид 18/1.55 шириной 760, строка поиска и плитка карты в один ряд.
   ================================================================ */

/* overflow: hidden у секции СНЯТ 2026-09-06: он резал попап календаря строки
   поиска ровно по нижней кромке кремового поля - тот же случай, что с
   сортировкой в шапке выдачи (см. catalog.css). Обрезка декора переехала в
   .pk-chero__decorwrap ниже, секция больше ничего не клипает. */
.pk-cityhub .pk-chero { padding: 28px 0 44px; position: relative; }
.pk-cityhub .pk-chero__decorwrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pk-cityhub .pk-chero__inner { position: relative; z-index: 1; }

/* Тот же line-art, что в интро главной, только тише и в правом верхнем
   углу (эталон: LineDecor opacity .06, width 300, right -70, top -80). */
.pk-cityhub .pk-h-decor--chero {
	right: -70px; top: -80px; width: 300px; height: 443px; opacity: 0.06;
}

/* Селектор с .pk-front - не для красоты: single-listing.css держит
   `.pk-front:not(.home) h1 { font-weight: 700 }` (0,2,1), и без третьего
   класса h1 хаба терял эталонные 800. */
.pk-front .pk-cityhub .pk-chero__h1 {
	margin: 18px 0 14px; font-size: var(--fs-h1); font-weight: var(--fw-black);
	letter-spacing: -0.03em; line-height: 1.1; color: var(--pk-text);
}
.pk-cityhub .pk-chero__h1 span { color: var(--pk-green); }

.pk-cityhub .pk-chero__lead {
	margin: 0 0 26px; max-width: 760px;
	font-size: 18px; line-height: 1.55; color: var(--pk-ink-soft);
}

.pk-cityhub .pk-chero__row { display: flex; align-items: center; gap: 14px; }

/* ---- Компакт-строка поиска (CitySearchCompact.jsx) ----
   Город не выбирают: он зафиксирован страницей и стоит слева зелёной
   неинтерактивной меткой. Дальше три поля и кнопка. */

.pk-cityhub .pk-cs {
	flex: 1; min-width: 0; max-width: 1060px;
	display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
	align-items: stretch; gap: 4px;
	padding: 6px; border-radius: var(--pk-radius-pill);
	border: 1px solid var(--pk-border); background: #fff; box-shadow: var(--e2);
}

.pk-cityhub .pk-cs__city {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 0 16px 0 14px; border-radius: var(--pk-radius-pill);
	background: var(--pk-green-soft); color: var(--pk-green-dark);
}
.pk-cityhub .pk-cs__city .pk-cs__label { color: inherit; opacity: 0.72; }
.pk-cityhub .pk-cs__cityname { font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap; }

.pk-cityhub .pk-cs__ico { display: inline-flex; flex: none; color: var(--pk-muted); }
.pk-cityhub .pk-cs__city .pk-cs__ico { color: inherit; }
.pk-cityhub .pk-cs__field.is-filled .pk-cs__ico { color: var(--pk-green); }

.pk-cityhub .pk-cs__col {
	display: flex; flex-direction: column; min-width: 0; line-height: 1.15;
}

.pk-cityhub .pk-cs__label {
	font-size: var(--fs-meta); font-weight: var(--fw-semibold);
	text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--pk-muted);
}

.pk-cityhub .pk-cs__field {
	position: relative; display: flex; align-items: center; gap: 9px;
	min-width: 0; padding: 10px 14px; border-radius: var(--pk-radius-pill);
	border-left: 1px solid var(--pk-border);
	transition: background var(--dur-base);
}
.pk-cityhub .pk-cs__field:hover,
.pk-cityhub .pk-cs__field:focus-within { background: var(--pk-green-soft); }

/* Настоящий контрол лежит поверх поля и прозрачен: без JS форма остаётся
   рабочей и доступной с клавиатуры, а на экране видна подпись эталона. */
.pk-cityhub .pk-cs__field select,
.pk-cityhub .pk-cs__field input {
	position: absolute; inset: 0; width: 100%; height: 100%;
	margin: 0; padding: 0; border: 0; background: none;
	font: inherit; color: transparent; opacity: 0; cursor: pointer;
}

.pk-cityhub .pk-cs__value {
	min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--pk-muted);
}
.pk-cityhub .pk-cs__field.is-filled .pk-cs__value { font-weight: var(--fw-bold); color: var(--pk-green-dark); }
/* ---- живой режим (assets/js/search-bar.js) ----
   Форма получает класс is-live: нативные контролы уходят из-под курсора
   (иначе поверх попапа открывался бы список браузера), поверх поля встаёт
   кнопка-накладка, а выбор идёт попапом - тем же, что на главной. */
.pk-cityhub .pk-cs { position: relative; }
.pk-cityhub .pk-cs.is-live .pk-cs__field select,
.pk-cityhub .pk-cs.is-live .pk-cs__field input {
	position: absolute; inset: auto; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
.pk-cityhub .pk-cs.is-live .pk-cs__field.is-open { background: var(--pk-cream); }
.pk-cityhub .pk-cs.is-live .pk-cs__field.is-open::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
	height: 2px; border-radius: 2px; background: var(--pk-green);
}
/* Пока панель открыта, остальные поля притушены - взгляд остаётся на выборе. */
.pk-cityhub .pk-cs.has-open .pk-cs__field:not(.is-open) { opacity: 0.55; }

.pk-cityhub .pk-cs__submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 132px; height: auto; padding: 0 22px;
	border-radius: var(--pk-radius-pill);
	font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1;
	box-shadow: var(--e-green-soft);
}

/* ---- Плитка входа на карту (MapTile.jsx, размер l: 200x56) ----
   Светлый фрагмент карты целиком на CSS: бежево-зелёная подложка, вода
   и тонкие белые дороги. Никаких ассетов. */
.pk-cityhub .pk-cmap-tile {
	position: relative; display: inline-flex; align-items: center;
	width: 200px; height: 56px; flex: none; padding: 0 16px; overflow: hidden;
	border-radius: var(--pk-radius-pill); border: 1.5px solid var(--pk-green);
	box-shadow: var(--e1); text-decoration: none;
	background:
		radial-gradient(circle at 26% 42%, rgba(139,178,140,0.55) 0 12%, rgba(139,178,140,0) 13%),
		linear-gradient(72deg, rgba(150,190,214,0) 58%, rgba(150,190,214,0.6) 59%, rgba(150,190,214,0.6) 66%, rgba(150,190,214,0) 67%),
		repeating-linear-gradient(58deg, rgba(255,255,255,0.85) 0 2px, rgba(255,255,255,0) 2px 42px),
		linear-gradient(180deg, #f2f4ec 0%, #e8ece1 100%);
	transition: box-shadow var(--dur-mid) var(--ease-entrance);
}
.pk-cityhub .pk-cmap-tile:hover { box-shadow: var(--e2); }
.pk-cityhub .pk-cmap-tile::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 62%, rgba(255,255,255,0.34) 100%);
}
.pk-cityhub .pk-cmap-tile__ico {
	position: relative; flex: none; width: 28px; height: 28px; margin-right: 10px;
	border-radius: 50%; background: var(--pk-green-dark); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 3px 7px rgba(16, 44, 26, 0.22);
	transition: transform var(--dur-mid) var(--ease-entrance), box-shadow var(--dur-mid) var(--ease-entrance);
}
.pk-cityhub .pk-cmap-tile:hover .pk-cmap-tile__ico {
	transform: translateY(-2px); box-shadow: 0 6px 12px rgba(16, 44, 26, 0.28);
}
.pk-cityhub .pk-cmap-tile__text {
	position: relative; display: flex; flex-direction: column; line-height: 1.15; text-align: left;
}
.pk-cityhub .pk-cmap-tile__text strong {
	font-size: var(--fs-body); font-weight: var(--fw-bold);
	letter-spacing: -0.01em; white-space: nowrap; color: var(--pk-text);
}
.pk-cityhub .pk-cmap-tile__text span { font-size: var(--fs-badge); color: var(--pk-muted); white-space: nowrap; }

/* ---- Живой карты на хабе нет ----
   Секция .pk-cmap (карта под поиском) снята 2026-09-09 вместе со своими
   правилами: карта на хабе открывается только со страницы /{город}/karta/,
   вход - плитка .pk-cmap-tile выше. Здесь ничего не должно появиться
   обратно: если на хабе снова понадобится контейнер .pk-map, высоту ему
   задаёт поверхность, на которой он стоит. */

/* ================================================================
   2. ВИТРИНА: восемь карточек в четыре колонки (эталон CityPopular)
   ================================================================ */
.pk-cityhub .pk-hpopular--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ================================================================
   3. ОКРУГА И НАПРАВЛЕНИЯ (DistrictGrid.jsx, 5 колонок)

   Плитка эталона - КАРТОЧКА min-height 108, padding 16/16/14, radius md:
   сверху пин и топоним (fs-lead, до двух строк), снизу число в зелёной
   пилюле слева и подпись «объектов» со стрелкой справа. Спящее
   направление - та же карточка на bg-soft с пунктирной рамкой и пилюлей
   «скоро»; ссылкой она не становится ни на одной ширине.

   До второй волны здесь стояла строка в 58px (остаток прежней сетки
   .pk-hub__areas): имя слева, число справа. Правила той строки удалены,
   а не дописаны - двух геометрий у одного класса быть не должно.
   ================================================================ */
.pk-cityhub .pk-cdistricts {
	display: grid; gap: 12px;
	/* minmax(0, 1fr), а не 1fr: у грид-дорожки min-width по умолчанию
	   auto, и длинный топоним («Волоколамский») распирал колонку - на 375
	   это давало горизонтальную прокрутку всей страницы. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.pk-cityhub .pk-cdistrict {
	display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
	min-height: 108px; padding: 16px 16px 14px; box-sizing: border-box;
	border-radius: var(--pk-radius); border: 1px solid var(--pk-border);
	background: #fff; box-shadow: var(--e1); text-decoration: none;
	transition: transform var(--dur-mid) var(--ease-entrance), box-shadow var(--dur-mid) var(--ease-entrance), border-color var(--dur-base);
}
.pk-cityhub a.pk-cdistrict:hover {
	transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--pk-green);
}
.pk-cityhub .pk-cdistrict__name {
	display: flex; align-items: flex-start; gap: 8px; min-width: 0;
	font-size: var(--fs-lead); font-weight: var(--fw-semibold);
	line-height: 1.25; letter-spacing: -0.01em; color: var(--pk-text);
	transition: color var(--dur-base);
}
.pk-cityhub .pk-cdistrict__name .pk-h-ico { flex: none; margin-top: 2px; color: var(--pk-green); }
/* Топоним переносится по словам и обрезается на второй строке: «Дмитровское
   направление» на 375 не должно ни распирать колонку, ни уезжать в столбик
   по букве. */
.pk-cityhub .pk-cdistrict__name > span {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-width: 0; overflow-wrap: anywhere;
}
.pk-cityhub a.pk-cdistrict:hover .pk-cdistrict__name { color: var(--pk-green-dark); }

.pk-cityhub .pk-cdistrict__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pk-cityhub .pk-cdistrict__n {
	display: inline-flex; align-items: center; justify-content: center;
	flex: none; min-width: 30px; height: 24px; padding: 0 9px; box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-green-soft); color: var(--pk-green-dark);
	font-size: var(--fs-ui-xs); font-weight: var(--fw-bold);
}
.pk-cityhub .pk-cdistrict__unit {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: var(--fs-ui-xs); color: var(--pk-muted); white-space: nowrap;
}
.pk-cityhub .pk-cdistrict__unit .pk-h-ico {
	flex: none; color: var(--pk-green);
	transition: transform var(--dur-mid);
}
.pk-cityhub a.pk-cdistrict:hover .pk-cdistrict__unit .pk-h-ico { transform: translateX(3px); }

.pk-cityhub .pk-cdistrict--off {
	background: var(--pk-bg-soft); box-shadow: none; border-style: dashed;
}
.pk-cityhub .pk-cdistrict--off .pk-cdistrict__name { color: var(--pk-muted); font-weight: var(--fw-medium); }
.pk-cityhub .pk-cdistrict--off .pk-cdistrict__name .pk-h-ico { color: var(--pk-disabled); }
.pk-cityhub .pk-cdistrict__soon {
	flex: none; padding: 4px 10px; border-radius: var(--pk-radius-pill);
	background: #fff; border: 1px solid var(--pk-border);
	font-size: var(--fs-badge); font-weight: var(--fw-bold);
	letter-spacing: 0.02em; color: var(--pk-muted);
}

.pk-cityhub .pk-cdistricts__note {
	margin: 16px 0 0; font-size: var(--fs-ui-sm); color: var(--pk-muted); line-height: var(--lh-prose);
}

/* ================================================================
   3a. ПОДБОРКИ (CityCollections + CityCollectionTile)
   Плитка - название, живое число объектов, стрелка.

   Сетка - auto-FILL, а не auto-fit эталона. В ките подборок четыре и они
   ровно заполняют ряд; живых подборок в регионе сейчас одна или две, и
   auto-fit растянул бы единственную плитку на все 1376px - карточка
   превращалась в полосу. auto-fill держит шаг колонки постоянным, и
   плитка выглядит одинаково при любом их числе. На 375 колонка
   получается сама.
   ================================================================ */
.pk-cityhub .pk-ccols {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pk-cityhub .pk-ccol {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	height: 100%; box-sizing: border-box; padding: 16px 18px;
	text-decoration: none; border-radius: var(--pk-radius);
	background: #fff; border: 1px solid var(--pk-border);
	transition: background var(--dur-base), border-color var(--dur-base);
}
.pk-cityhub .pk-ccol:hover { background: var(--pk-green-dark); border-color: var(--pk-green-dark); }
.pk-cityhub .pk-ccol__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-cityhub .pk-ccol__label {
	font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -0.015em;
	line-height: 1.25; color: var(--pk-text); transition: color var(--dur-base);
}
.pk-cityhub .pk-ccol__n {
	font-size: var(--fs-ui-sm); font-weight: var(--fw-medium); color: var(--pk-muted);
	transition: color var(--dur-base);
}
.pk-cityhub .pk-ccol:hover .pk-ccol__label { color: #fff; }
.pk-cityhub .pk-ccol:hover .pk-ccol__n { color: rgba(255, 255, 255, 0.78); }
.pk-cityhub .pk-ccol__go {
	flex: none; display: inline-flex; color: var(--pk-muted);
	transition: transform var(--dur-mid), color var(--dur-base);
}
.pk-cityhub .pk-ccol:hover .pk-ccol__go { color: #fff; transform: translateX(3px); }
.pk-cityhub .pk-ccols__note {
	margin: 16px 0 0; font-size: var(--fs-ui-sm); line-height: var(--lh-prose); color: var(--pk-muted);
}

/* ================================================================
   4. ЦЕНЫ: та же таблица, что на главной, но без переключателя регионов.
   Город задан страницей, панель одна. Мини-бары диапазона на главной
   разворачиваются классом is-in от reveal-скрипта; на хабе скрипта нет,
   поэтому ширина задаётся сразу - анимация проигрывается на отрисовке.
   ================================================================ */
.pk-cityhub .pk-hprices--single .pk-hprices__bar-run { width: var(--pk-bar-w, 0%); }

/* ================================================================
   5. «ГДЕ ПОЖАРИТЬ ШАШЛЫК» (CityShashlyk: панель 1fr/300px, padding 34/36)
   ================================================================ */
.pk-cityhub .pk-hband--soft.pk-hband { padding: 44px 0; }

.pk-cityhub .pk-cshash {
	display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center;
	padding: 34px 36px; border-radius: var(--pk-radius-lg);
	background: #fff; border: 1px solid var(--pk-border); box-shadow: var(--e1);
}
.pk-front .pk-cityhub h2.pk-cshash__title {
	margin: 0 0 14px; font-size: 28px; font-weight: var(--fw-black);
	letter-spacing: -0.025em; line-height: 1.2; color: var(--pk-text);
}
.pk-cityhub .pk-cshash__p {
	margin: 0 0 12px; font-size: var(--fs-seo); line-height: 1.6; color: var(--pk-ink-soft);
}
.pk-cityhub .pk-cshash__p:last-child { margin-bottom: 0; }
/* Ссылка на материал Журнала (эталон CITY.shashlyk.articleLabel):
   подчёркнутая строка под текстом, тап-цель 44 на узких экранах. */
.pk-cityhub .pk-cshash__article {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
	font-size: var(--fs-body); font-weight: var(--fw-semibold);
	color: var(--pk-green-dark); text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pk-cityhub .pk-cshash__article .pk-h-ico { flex: none; transition: transform var(--dur-mid); }
.pk-cityhub .pk-cshash__article:hover .pk-h-ico { transform: translateX(3px); }
.pk-cityhub .pk-cshash__card {
	display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
	padding: 22px 24px; border-radius: var(--pk-radius); background: var(--pk-green-soft);
}
.pk-cityhub .pk-cshash__count {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--fs-ui-sm); font-weight: var(--fw-bold); color: var(--pk-green-dark);
}
.pk-cityhub .pk-cshash__note {
	margin: 0; font-size: var(--fs-ui-sm); line-height: 1.5; color: var(--pk-ink-soft);
}
.pk-cityhub .pk-cshash__card .pk-btn { box-shadow: var(--e-green); }

/* ================================================================
   6. «КАК ЭТО РАБОТАЕТ» - компакт (StepsCompact.jsx)

   Эталон: кружок 54px в белой обводке 4px, номер пилюлей в правом верхнем
   углу, под кружком заголовок 17px и строка пояснения шириной до 320px;
   кружки соединены пунктирной зелёной линией от центра первого до центра
   последнего. Рамок и белых карточек в эталоне нет - правила прежних
   карточек удалены.
   ================================================================ */
.pk-cityhub .pk-csteps-band { padding: 44px 0; }
.pk-cityhub .pk-csteps-wrap { position: relative; }

/* Линия идёт от центра первого кружка до центра последнего: у трёх
   колонок с зазором 24px это left 27 и right calc(100%/3 - 43px). */
.pk-cityhub .pk-csteps__line {
	position: absolute; left: 27px; right: calc(33.3333% - 43px); top: 31px;
	height: 0; border-top: 2px dashed var(--pk-green); opacity: 0.32;
}

.pk-cityhub .pk-csteps {
	position: relative;
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.pk-cityhub .pk-cstep {
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 0; border: 0; background: none; box-shadow: none;
}
.pk-cityhub .pk-cstep::before { content: none; }
.pk-cityhub .pk-cstep__ico {
	position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%;
	background: var(--pk-green-soft); color: var(--pk-green-dark);
	display: inline-flex; align-items: center; justify-content: center;
	border: 4px solid #fff; box-sizing: content-box; margin-left: -4px;
}
.pk-cityhub .pk-cstep__n {
	position: absolute; top: -6px; right: -8px;
	min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-green-dark); color: #fff;
	font-size: var(--fs-badge); font-weight: var(--fw-black);
	display: inline-flex; align-items: center; justify-content: center;
}
.pk-cityhub .pk-cstep__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 16px; }
.pk-cityhub .pk-cstep__name {
	font-size: 17px; font-weight: var(--fw-bold);
	letter-spacing: -0.015em; line-height: 1.25; color: var(--pk-text);
}
.pk-cityhub .pk-cstep__text {
	font-size: var(--fs-body); line-height: 1.55; color: var(--pk-muted); max-width: 320px;
}

/* ================================================================
   7. FAQ: та же панель, что на главной, но без боковой карточки -
   на хабе её в эталоне нет, список идёт одной колонкой шириной 1060.
   ================================================================ */
.pk-cityhub .pk-hfaq--wide { grid-template-columns: 1fr; max-width: 1060px; }

/* ================================================================
   8. SEO-ТЕКСТ С LINE-ART (CitySeoText + CitySeoDecor)
   Пропорция колонок из эталона: minmax(0,69fr) / minmax(0,31fr), gap 40.
   ================================================================ */
.pk-cityhub .pk-cseo { padding: 44px 0; }
.pk-cityhub .pk-cseo__grid {
	display: grid; grid-template-columns: minmax(0, 69fr) minmax(0, 31fr);
	gap: 40px; align-items: start;
}
.pk-cityhub .pk-cseo__text { position: relative; z-index: 1; }
.pk-front .pk-cityhub h2.pk-cseo__title {
	margin: 0 0 16px; font-size: 34px; font-weight: var(--fw-black);
	letter-spacing: -0.025em; line-height: 1.1; color: var(--pk-text); text-wrap: balance;
}
.pk-cityhub .pk-cseo__title span { color: var(--pk-green); }
.pk-cityhub .pk-cseo__p {
	margin: 0 0 14px; font-size: var(--fs-seo); line-height: 1.65; color: var(--pk-ink-soft);
}

.pk-cityhub .pk-cseo__more { margin-top: 4px; }
.pk-cityhub .pk-cseo__more > summary { list-style: none; }
.pk-cityhub .pk-cseo__more > summary::-webkit-details-marker { display: none; }
.pk-cityhub .pk-cseo__toggle {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: var(--tap-min); padding: 10px 18px;
	border-radius: var(--pk-radius-pill); border: 1px solid var(--pk-border); background: #fff;
	font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--pk-text); cursor: pointer;
}
.pk-cityhub .pk-cseo__toggle:hover { border-color: var(--pk-green); color: var(--pk-green-dark); }
.pk-cityhub .pk-cseo__chev { display: inline-flex; color: var(--pk-green); transition: transform var(--dur-mid); }
.pk-cityhub .pk-cseo__more[open] .pk-cseo__chev { transform: rotate(180deg); }
.pk-cityhub .pk-cseo__toggle-less { display: none; }
.pk-cityhub .pk-cseo__more[open] .pk-cseo__toggle-more { display: none; }
.pk-cityhub .pk-cseo__more[open] .pk-cseo__toggle-less { display: inline; }
.pk-cityhub .pk-cseo__tail { padding-top: 14px; }

/* Правая колонка - тихий line-art того же мотива: крупная копия справа,
   мельче - левее и глубже. Линия земли мотива (452 из 620 вьюбокса) у обеих
   копий ложится на общую отметку. Заливки, текста и чисел здесь нет. */
.pk-cityhub .pk-cseo__decor {
	position: relative; display: block; align-self: stretch;
	min-height: 450px; pointer-events: none; z-index: 0;
}
.pk-cityhub .pk-h-decor--cseo-a { left: 108px; top: -48px; width: 330px; height: 487px; opacity: 0.18; }
.pk-cityhub .pk-h-decor--cseo-b { left: -59px; top: 64px; width: 220px; height: 325px; opacity: 0.13; transform: scaleX(-1); }

/* ================================================================
   9. CTA ЗАЯВКИ: строка социального доказательства и чипы соседей
   (RequestCta -> Proof). Сама панель - .pk-hbottom с главной.
   ================================================================ */
.pk-cityhub .pk-hbottom--hub .pk-hbottom__lead { max-width: 560px; }

.pk-cityhub .pk-cproof {
	display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px;
}
.pk-cityhub .pk-cproof__avatars { display: inline-flex; }
.pk-cityhub .pk-cproof__ava {
	width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block;
	border: 2px solid rgba(255, 255, 255, 0.92); margin-left: -12px;
}
.pk-cityhub .pk-cproof__ava:first-child { margin-left: 0; }
.pk-cityhub .pk-cproof__text {
	font-size: var(--fs-ui-sm); line-height: 1.4; color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 6px rgba(10, 28, 18, 0.4);
}

.pk-cityhub .pk-cnear {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px;
}
.pk-cityhub .pk-cnear__label { font-size: var(--fs-ui-sm); color: var(--pk-muted); }

/* ================================================================
   10. РАЙОН С 0-2 ОБЪЕКТАМИ (District.jsx, проп few)
   Выдачи нет: объяснение, соседние направления карточками покрупнее
   и заявка «подберём рядом».
   ================================================================ */
.pk-cityhub .pk-cempty {
	display: flex; align-items: center; gap: 28px;
	padding: 30px 32px; border-radius: var(--pk-radius-lg);
	background: #fff; border: 1px solid var(--pk-border); box-shadow: var(--e1);
}
.pk-cityhub .pk-cempty__img { flex: none; width: 168px; height: auto; border-radius: var(--pk-radius); }
.pk-front .pk-cityhub h2.pk-cempty__title {
	margin: 0 0 10px; font-size: 24px; font-weight: var(--fw-black);
	letter-spacing: -0.02em; line-height: 1.2; color: var(--pk-text);
}
.pk-cityhub .pk-cempty__text {
	margin: 0; max-width: 640px; font-size: var(--fs-seo); line-height: 1.6; color: var(--pk-ink-soft);
}

.pk-cityhub .pk-cnearby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pk-cityhub .pk-cnearby__card {
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px 22px; border-radius: var(--pk-radius);
	border: 1px solid var(--pk-border); background: #fff; box-shadow: var(--e1);
	transition: transform var(--dur-mid) var(--ease-entrance), box-shadow var(--dur-mid) var(--ease-entrance), border-color var(--dur-base);
}
.pk-cityhub .pk-cnearby__card:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--pk-green); }
.pk-cityhub .pk-cnearby__name {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--pk-text);
}
.pk-cityhub .pk-cnearby__name .pk-h-ico { flex: none; color: var(--pk-green); }
.pk-cityhub .pk-cnearby__n { font-size: var(--fs-ui-sm); color: var(--pk-muted); }
.pk-cityhub .pk-cnearby__go {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
	font-size: var(--fs-ui-sm); font-weight: var(--fw-bold); color: var(--pk-green-dark);
}

/* ================================================================
   АДАПТИВ. Эталон - city-mobile.html (CityMobile.jsx).
   Горизонтальной прокрутки страницы нет: скроллятся только таблица цен
   и ленты. Тап-цели - не меньше 44px.
   ================================================================ */

@media (max-width: 1200px) {
	.pk-cityhub .pk-cdistricts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.pk-cityhub .pk-hpopular--4 { grid-template-columns: repeat(3, 1fr); }
	/* Эталон MCitySteps: stacked, connector={false} - шаги идут колонкой,
	   иконка слева от текста, пунктирная линия снимается. */
	.pk-cityhub .pk-csteps { grid-template-columns: 1fr; gap: 14px; }
	.pk-cityhub .pk-csteps__line { display: none; }
	.pk-cityhub .pk-cstep { flex-direction: row; gap: 14px; }
	.pk-cityhub .pk-cstep__ico { margin-left: 0; }
	.pk-cityhub .pk-cstep__body { margin-top: 2px; }
	.pk-cityhub .pk-cshash { grid-template-columns: 1fr; gap: 24px; padding: 26px 24px; }
	.pk-cityhub .pk-cseo__grid { grid-template-columns: 1fr; gap: 24px; }
	/* На узком экране декор не рисуем: текст идёт во всю ширину (эталон
	   MCitySeo - на 375 line-art в этом блоке нет). */
	.pk-cityhub .pk-cseo__decor { display: none; }
}

@media (max-width: 900px) {
	/* Строка поиска встаёт колонкой: поля во всю ширину, разделители
	   становятся горизонтальными, кнопка - последней строкой. */
	.pk-cityhub .pk-chero__row { flex-direction: column; align-items: stretch; gap: 10px; }
	.pk-cityhub .pk-cs { max-width: none; grid-template-columns: 1fr; gap: 2px; border-radius: var(--pk-radius); }
	.pk-cityhub .pk-cs__city { padding: 10px 14px; min-height: var(--tap-min); border-radius: var(--pk-radius-sm); }
	.pk-cityhub .pk-cs__field { min-height: var(--tap-min); border-left: 0; border-top: 1px solid var(--pk-border); border-radius: var(--pk-radius-sm); }
	.pk-cityhub .pk-cs__submit { min-height: var(--tap-min); margin-top: 4px; }
	/* Плитка карты - во всю ширину строки поиска, как в мобильном артборде:
	   единственный вход на карту в первом экране. */
	.pk-cityhub .pk-cmap-tile { width: 100%; height: 50px; }
	.pk-cityhub .pk-cdistricts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.pk-cityhub .pk-chero { padding: 18px 0 26px; }
	.pk-cityhub .pk-chero__h1 { font-size: 28px; margin: 6px 0 10px; letter-spacing: -0.03em; line-height: 1.15; }
	.pk-cityhub .pk-chero__lead { font-size: 15px; margin-bottom: 18px; }
	.pk-cityhub .pk-h-decor--chero { right: -58px; top: -34px; width: 210px; height: 310px; opacity: 0.08; }

	.pk-cityhub .pk-hpopular--4 { grid-template-columns: 1fr; gap: 16px; }
	.pk-cityhub .pk-cdistricts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	/* Карточка направления на 375 чуть ниже эталонных 108: топоним в две
	   строки помещается, а тап-цель остаётся заведомо больше 44. */
	.pk-cityhub .pk-cdistrict { min-height: 96px; padding: 14px 14px 12px; }
	.pk-cityhub .pk-cdistrict__name { font-size: var(--fs-body); }
	.pk-cityhub .pk-ccols { grid-template-columns: 1fr; gap: 10px; }

	.pk-front .pk-cityhub h2.pk-cshash__title { font-size: 22px; }
	.pk-cityhub .pk-cshash__p { font-size: 15px; }
	/* На мобильном кнопка блока идёт во всю ширину и обычной высоты -
	   эталон MCityShashlyk (CmButton fullWidth, без size="sm"). Заодно это
	   тап-цель 46px вместо компактных 40. */
	.pk-front .pk-cityhub .pk-cshash__card .pk-btn {
		width: 100%; justify-content: center;
		height: var(--control-h); font-size: var(--fs-body); border-radius: var(--pk-radius-pill);
	}

	.pk-cityhub .pk-csteps-band { padding: 30px 0; }
	/* Правило `h2.pk-csteps__title` удалено вместе со своим элементом:
	   заголовок блока шагов теперь общая шапка секции `.pk-h-title`. */

	/* Шапки секций на 375. Мобильный кегль главной (mobile.css,
	   `.pk-home .pk-h-title`, 0-2-0) проигрывал десктопному правилу зоны
	   `.pk-front .pk-cityhub h2.pk-h-title` (0-3-1), и на 375 ВСЕ заголовки
	   блоков хаба оставались 34px, а шапка Журнала - 40px. Числа те же,
	   что на главной: 26px, кикер 10px, лид 15px.
	   Найдено при сверке второй волны, 2026-09-09. */
	.pk-front .pk-cityhub h2.pk-h-title,
	.pk-front .pk-cityhub [data-pk-home-section="journal"] h2.pk-h-title {
		font-size: 26px; line-height: 1.15; letter-spacing: -0.025em;
	}
	.pk-cityhub .pk-h-lead { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }

	.pk-cityhub .pk-cseo { padding: 26px 0 30px; }
	.pk-front .pk-cityhub h2.pk-cseo__title { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
	.pk-cityhub .pk-cseo__p { font-size: 15px; }

	.pk-cityhub .pk-cnear { margin-top: 16px; }
	.pk-cityhub .pk-cproof__ava { width: 30px; height: 30px; }

	/* Ленты хаба уже, чем на главной - числа эталона CityMobile.jsx:
	   типы 206, объекты 286, площадки 268. Сами ленты, снап и компактную
	   геометрию карточек задаёт mobile.css - здесь только ширина шага. */
	.pk-front .pk-cityhub .pk-hformats > * { width: 206px; }
	.pk-front .pk-cityhub .pk-hpopular > * { width: 286px; }
	.pk-front .pk-cityhub .pk-hvenues > * { width: 268px; }

	/* CTA заявки на 375 - числа компактного RequestCta: заголовок 24,
	   текст 14. Колонку под маскота и чипы двумя рядами держит mobile.css. */
	.pk-front .pk-cityhub h2.pk-hbottom__title { font-size: 24px; line-height: 1.15; margin-bottom: 10px; }
	.pk-front .pk-cityhub .pk-hbottom__lead { font-size: 14px; line-height: 1.5; }

	/* Строка социального доказательства идёт под чипами во всю ширину:
	   зарезервированные под маскота 146px ей возвращаются минусом - тем же
	   приёмом, что у чипов в mobile.css (эталон RequestCta compact). */
	.pk-front .pk-cityhub .pk-cproof { margin-right: -146px; }

	.pk-cityhub .pk-cempty { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
	.pk-cityhub .pk-cempty__img { width: 120px; }
	.pk-front .pk-cityhub h2.pk-cempty__title { font-size: 20px; }
	.pk-cityhub .pk-cnearby { grid-template-columns: 1fr; }
}

/* ================================================================
   9. НИЖНЯЯ ПЛАВАЮЩАЯ ПАНЕЛЬ И ШТОРКА ПОИСКА (ds-11)
   Эталон: CityMobile.jsx -> CmActionBar tool="search" + CitySheet.

   Панель - только мобильный паттерн: на десктопе её нет вовсе. Форма
   панели та же, что у каталожной выдачи (две тихие кнопки и акцентная
   справа), но первая кнопка - «Поиск» и бейджа у неё нет: фильтровать
   на хабе нечего.

   Геометрия повторяет `.pk-cat-actionbar` из catalog.css сознательно:
   catalog.css на хабе не подключается, поэтому переиспользовать его класс
   нельзя. Свести обе панели в base.css - отдельная работа, отмечена
   хвостом отчёта transfer-20.

   Шторка переиспользует компонент `.pk-hssheet` из home-sections.css
   (шапка, подвал, затемнение, прокрутка тела) - второй реализации шторки
   на сайте нет; здесь только содержимое разделов и переключение по
   ширине. Селекторы держат `.pk-front .pk-cityhub` не для красоты:
   базовые правила шторки записаны как `.pk-front .pk-hssheet`, и без
   третьего класса `display: none` им проигрывает.
   ================================================================ */
.pk-front .pk-cityhub .pk-cbar,
.pk-front .pk-cityhub .pk-csheet,
.pk-front .pk-cityhub .pk-csheet__backdrop { display: none; }

@media (max-width: 900px) {
	.pk-front .pk-cityhub .pk-cbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
		display: flex; align-items: center; gap: 10px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--pk-border);
		box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.12);
	}
	.pk-front .pk-cityhub .pk-cbar[hidden] { display: none; }

	.pk-front .pk-cityhub .pk-cbar__quiet,
	.pk-front .pk-cityhub .pk-cbar__cta {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		min-height: 48px; padding: 0 12px; box-sizing: border-box;
		border-radius: var(--pk-radius-pill);
		font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold);
		line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
	}
	.pk-front .pk-cityhub .pk-cbar__quiet {
		flex: 1 1 30%;
		border: 1px solid var(--pk-border); background: #fff; color: var(--pk-text);
	}
	.pk-front .pk-cityhub .pk-cbar__quiet .pk-h-ico { color: var(--pk-green); flex: none; }
	.pk-front .pk-cityhub .pk-cbar__quiet b { font-size: var(--fs-ui-xs); font-weight: var(--fw-bold); color: var(--pk-muted); }
	.pk-front .pk-cityhub .pk-cbar__cta {
		flex: 1 1 40%; padding: 0 18px; border: 1px solid var(--pk-green-dark);
		background: var(--pk-green-dark); color: #fff; font-weight: var(--fw-bold);
		box-shadow: var(--e-green);
	}
	.pk-front .pk-cityhub .pk-cbar__cta:visited { color: #fff; }
	.pk-front .pk-cityhub .pk-cbar__cta .pk-h-ico { color: #fff; flex: none; }

	/* Чат-виджет уступает панели место. `#spotly-root` стоит
	   `position: fixed; bottom: 12px` с `z-index: 2147483000` и на 375
	   ложится ровно на панель: `elementFromPoint` в центре каждой из трёх
	   кнопок возвращал `.spotly-launcher-*`, то есть НИ ОДНА кнопка панели
	   не нажималась - виджет забирал клик себе. Перебить его z-index нельзя
	   и не нужно; вместо этого виджет поднимается на высоту панели, пока
	   она на экране. Развёрнутую панель виджета правило не трогает: в этом
	   состоянии он растягивается на весь экран (`.spotly-expanded`).
	   Найдено 2026-09-09 при проверке на живой странице. */
	body.pk-hub-cbar #spotly-root:not(.spotly-expanded) { bottom: calc(12px + 78px); }

	/* Панель не должна накрывать конец страницы. Резервировать место внутри
	   main бесполезно: последний блок страницы - подвал, он лежит за
	   пределами main. Поэтому отступ добавляется подвалу, и только пока
	   панель на экране (класс на body ставит hub-city.js).
	   Файл подвала при этом не трогается: правило живёт в зоне хаба. */
	body.pk-hub-cbar .pk-footer { padding-bottom: calc(24px + 78px); }

	/* ---- Шторка поиска ---- */
	.pk-front .pk-cityhub .pk-csheet__backdrop { display: block; }
	.pk-front .pk-cityhub .pk-csheet { display: flex; }
	.pk-front .pk-cityhub .pk-csheet[hidden],
	.pk-front .pk-cityhub .pk-csheet__backdrop[hidden] { display: none; }

	.pk-front .pk-cityhub .pk-csheet__body { display: flex; flex-direction: column; }
	.pk-front .pk-cityhub .pk-csheet__label {
		margin: 4px 0 10px; font-size: var(--fs-meta); font-weight: var(--fw-bold);
		text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--pk-muted);
	}
	.pk-front .pk-cityhub .pk-csheet__list,
	.pk-front .pk-cityhub .pk-csheet__dates,
	.pk-front .pk-cityhub .pk-csheet__chips { margin-bottom: 18px; }

	.pk-front .pk-cityhub .pk-csheet__list { list-style: none; margin-top: 0; padding: 0; }
	.pk-front .pk-cityhub .pk-csheet__list li { margin: 0; }
	.pk-front .pk-cityhub .pk-csheet__list li + li { border-top: 1px solid var(--pk-border); }
	.pk-front .pk-cityhub .pk-csheet__row {
		display: flex; align-items: center; gap: 10px;
		min-height: 52px; padding: 6px 2px; box-sizing: border-box;
		font-size: var(--fs-body); color: var(--pk-text); text-decoration: none; cursor: pointer;
	}
	.pk-front .pk-cityhub .pk-csheet__row .pk-h-ico { flex: none; color: var(--pk-green); }
	.pk-front .pk-cityhub .pk-csheet__rowlabel { flex: 1; min-width: 0; }
	.pk-front .pk-cityhub .pk-csheet__count { flex: none; font-size: var(--fs-ui-xs); color: var(--pk-muted); }
	/* Настоящая радиокнопка остаётся в форме - значение уходит на сервер. */
	.pk-front .pk-cityhub .pk-csheet__row input[type="radio"] {
		flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--pk-green-dark);
	}
	.pk-front .pk-cityhub .pk-csheet__row.is-on { font-weight: var(--fw-bold); color: var(--pk-green-dark); }

	.pk-front .pk-cityhub .pk-csheet__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.pk-front .pk-cityhub .pk-csheet__date { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
	.pk-front .pk-cityhub .pk-csheet__date > span { font-size: var(--fs-ui-xs); color: var(--pk-muted); }
	.pk-front .pk-cityhub .pk-csheet__date input {
		min-height: 44px; padding: 0 12px; box-sizing: border-box; width: 100%;
		border: 1px solid var(--pk-border); border-radius: var(--pk-radius-sm);
		font-family: inherit; font-size: var(--fs-body); color: var(--pk-text); background: #fff;
	}

	.pk-front .pk-cityhub .pk-csheet__chips { display: flex; flex-wrap: wrap; gap: 8px; }
	.pk-front .pk-cityhub .pk-csheet__chip { position: relative; }
	.pk-front .pk-cityhub .pk-csheet__chip input {
		position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
	}
	.pk-front .pk-cityhub .pk-csheet__chip span {
		display: inline-flex; align-items: center; justify-content: center;
		min-height: 44px; padding: 0 14px; box-sizing: border-box;
		border-radius: var(--pk-radius-pill); border: 1px solid var(--pk-border);
		background: #fff; font-size: var(--fs-ui-sm); font-weight: var(--fw-medium);
		color: var(--pk-text); white-space: nowrap;
	}
	.pk-front .pk-cityhub .pk-csheet__chip input:checked + span {
		background: var(--pk-green-dark); border-color: var(--pk-green-dark); color: #fff;
	}

	/* Подвал шторки поля - одна кнопка во всю ширину; здесь их две, поэтому
	   width: 100% из home-sections.css снимается. */
	.pk-front .pk-cityhub .pk-csheet__foot .pk-btn { width: auto; flex: 1 1 50%; gap: 8px; justify-content: center; }
}

/* ================================================================
   10. ЖУРНАЛ НА 375: правки только для хаба

   Блок Журнала переиспользуется с главной как есть (CityArticles).
   На 375 у маленьких карточек справа от крупной миниатюра 110px и
   невидимая стрелка съедали ширину колонки: заголовок в две строки
   ужимался в узкий столбик. Эталон CmJournalTeaser stacked: миниатюра
   меньше, стрелки в ряду нет.

   Правки заперты под `.pk-cityhub`, чтобы не трогать главную: тот же
   блок там правит соседняя зона (mobile.css).
   ================================================================ */
@media (max-width: 760px) {
	.pk-front .pk-cityhub .pk-hjournal__thumb { width: 84px; height: 84px; }
	.pk-front .pk-cityhub .pk-hjournal__rows a { gap: 12px; padding: 12px 10px; }
	/* Стрелка на тач-экране не всплывает никогда - в ряду ей делать нечего,
	   а ширину она забирала молча. */
	.pk-front .pk-cityhub .pk-hjournal__rowgo { display: none; }
	.pk-front .pk-cityhub .pk-hjournal__rowbody { gap: 5px; min-width: 0; }
	.pk-front .pk-cityhub .pk-hjournal__rowbody strong { font-size: var(--fs-body); line-height: 1.35; }
}