/* Piknikovich - izbrannoe.css
   Страница избранного /izbrannoe/ (перенос ds-14, окно transfer-23).
   Эталон: ui_kits/website/Favorites.jsx (1440), FavoritesMobile.jsx (375),
   components/cards/ListingRow.jsx. Одна разметка на обе ширины: раскладку
   переключают медиазапросы с порогами доски кадров кита - строки в две
   колонки от 1024px, компактная строка до 760px.

   Страница переиспользует готовые блоки выдачи из catalog.css - пустое
   состояние (.pk-empty), чипы (.pk-cat-chip) и CTA заявки (.pk-catcta), -
   поэтому <main> несёт класс .pk-catalog. Своё здесь - под .pk-fav.

   Специфичность. База внутренних страниц `.pk-front:not(.home) h1..h3`
   (0-2-1, base.css и single-listing.css) бьёт одноклассовые правила, поэтому
   заголовки зоны пишутся с тегом (`.pk-fav h1.pk-fav-h1`, тоже 0-2-1) и файл
   подключается ПОСЛЕДНИМ (functions.php, конец piknikovich_scripts): при
   равном весе выигрывает тот, кто позже. Мобильные числа повторены с тем же
   весом - медиазапрос вес не добавляет. */

/* ================================================================
   СОСТОЯНИЯ СТРАНИЦЫ
   Пока неизвестно, пуст ли список, видно пустое состояние - его же видит
   робот. Ранний скрипт в шаблоне ставит html.pk-fav-has до отрисовки, если
   в хранилище что-то есть: у гостя со списком пустое состояние не мигает.
   ================================================================ */

.pk-fav .pk-fav-list { display: none; }
html.pk-fav-has .pk-fav .pk-fav-list { display: block; }
html.pk-fav-has .pk-fav .pk-fav-empty { display: none; }

/* Нижней панели выдачи здесь нет, её отступ из catalog.css не нужен. */
.pk-catalog.pk-fav { padding-bottom: 0; }

/* ================================================================
   ШАПКА СТРАНИЦЫ: крошки, H1 и счётчик в одной строке
   ================================================================ */

.pk-fav .pk-fav-head { padding: 20px 0 18px; background: #fff; }
.pk-fav .pk-fav-head__row {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
	margin-top: 12px;
}
.pk-fav h1.pk-fav-h1 {
	margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-black);
	letter-spacing: -0.03em; line-height: 1.12; color: var(--pk-text);
}
.pk-fav h1.pk-fav-h1:focus { outline: none; }
.pk-fav .pk-fav-head__count { font-size: 17px; font-weight: var(--fw-semibold); color: var(--pk-muted); }
.pk-fav .pk-fav-head__count[hidden] { display: none; }

/* ================================================================
   СПИСОК И ГРУППЫ
   ================================================================ */

.pk-fav .pk-fav-list { padding: 6px 0 30px; background: #fff; }
.pk-fav .pk-fav-group { margin-bottom: 24px; }
.pk-fav .pk-fav-group__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pk-fav .pk-fav-group__head svg { flex: none; width: 15px; height: 15px; color: var(--pk-green); }
.pk-fav h2.pk-fav-group__title {
	margin: 0; font-size: 18px; font-weight: var(--fw-black);
	letter-spacing: -0.02em; line-height: 1.25; color: var(--pk-text);
}
.pk-fav .pk-fav-group__count { font-size: var(--fs-ui-sm); color: var(--pk-muted); }

.pk-fav .pk-fav-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Ячейка тянет строку на высоту ряда: соседка строки на паузе (она на одну
   строку текста выше) не остаётся короче. */
.pk-fav .pk-frow-slot { display: flex; min-width: 0; }
.pk-fav .pk-frow-slot.is-closing {
	overflow: hidden; opacity: 0;
	transition: max-height var(--dur-mid) var(--ease-entrance), opacity var(--dur-mid) var(--ease-entrance);
}

/*
 * Строка-подсказка под списком. С 2026-09-12 у неё ДВА вида: у невошедшего
 * гостя список живёт в браузере, у вошедшего - в кабинете и виден с любого
 * устройства (поправка к решению PLAN 2026-08-30). Слов «история браузера»
 * в ней больше нет.
 */
.pk-fav .pk-fav-note {
	display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; max-width: 720px; margin: 0;
	font-size: 13.5px; line-height: 1.55; color: var(--pk-muted); text-wrap: pretty;
}
.pk-fav .pk-fav-note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.pk-fav a.pk-fav-note__cta {
	flex: none; display: inline-flex; align-items: center; min-height: 32px;
	color: var(--pk-amber-text); font-weight: 700; text-decoration: none;
}
.pk-fav a.pk-fav-note__cta:hover { text-decoration: underline; }

/*
 * Полоса слияния: «Добавили N мест из этого браузера в ваш список».
 * Янтарная, потому что это событие кабинета заявителя, а не каталога.
 * Крестик - зона нажатия 44px, как у всех закрывашек проекта.
 */
.pk-fav .pk-fav-merge {
	display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
	max-width: 720px; margin: 0 0 14px; padding: 13px 14px;
	border-radius: var(--pk-radius-card, 14px);
	background: var(--pk-amber-bg); border: 1px solid var(--pk-amber-border);
	font-size: 13.5px; line-height: 1.55; color: var(--pk-ink-soft); text-wrap: pretty;
}
.pk-fav .pk-fav-merge[hidden] { display: none; }
.pk-fav .pk-fav-merge svg { flex: none; margin-top: 2px; color: var(--pk-amber-text); }
.pk-fav .pk-fav-merge__text { flex: 1 1 240px; min-width: 0; }
.pk-fav button.pk-fav-merge__toggle {
	flex: none; min-height: 32px; padding: 0; border: 0; background: none;
	color: var(--pk-amber-text); font-family: inherit; font-size: 13px; font-weight: 700;
	text-decoration: underline; cursor: pointer;
}
.pk-fav button.pk-fav-merge__x {
	flex: none; width: 44px; height: 44px; margin: -12px -8px -12px 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: none; color: var(--pk-amber-text); cursor: pointer;
}
.pk-fav .pk-fav-merge__list {
	flex: 1 1 100%; list-style: none; margin: 4px 0 0; padding: 0;
	display: grid; gap: 4px; font-size: 13px;
}
.pk-fav .pk-fav-merge__list[hidden] { display: none; }
.pk-fav .pk-fav-merge__list a { color: var(--pk-amber-text); text-decoration: none; }
.pk-fav .pk-fav-merge__list a:hover { text-decoration: underline; }

/* ================================================================
   СТРОКА (ListingRow)
   Две колонки: миниатюра 160x120 | название и мета | справа сверху
   сердечко, снизу цена, прижатая вправо - цены строк одной колонки стоят
   на одной вертикали. Вся строка - ссылка: ссылка на названии, её зона
   растянута ::after на всю строку, кнопка лежит поверх (z-index 2) и в
   ссылку не вложена.
   ================================================================ */

.pk-fav .pk-frow {
	position: relative; flex: 1 1 auto; min-width: 0;
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas: "thumb main fav" "thumb main price";
	/* Отступы между колонками - только gap. Поле у миниатюры в дорожке ровно
	   160px текст не сдвигает, а вылезает за дорожку: название вставало
	   впритык к фото (замечание владельца 2026-09-11). */
	column-gap: 14px;
	min-height: 144px; padding: 12px; box-sizing: border-box;
	background: #fff; color: var(--pk-text);
	border-radius: var(--pk-radius);
	/* Рамка - inset-тень, а не border: высота строки ровно 120 + 2 x 12. */
	box-shadow: inset 0 0 0 1px var(--pk-border);
	transition: transform var(--dur-mid) var(--ease-entrance), box-shadow var(--dur-mid) var(--ease-entrance);
}
@media (hover: hover) {
	.pk-fav .pk-frow:not(.is-removed):not(.pk-frow--skeleton):hover {
		transform: var(--lift-card);
		box-shadow: inset 0 0 0 1px var(--pk-border), var(--e2);
	}
	.pk-fav .pk-frow:not(.is-removed):hover .pk-frow__link { color: var(--pk-green-dark); }
}

.pk-fav .pk-frow__thumb {
	grid-area: thumb; position: relative; display: block;
	width: 160px; height: 120px;
	border-radius: var(--pk-radius-sm); overflow: hidden; background: var(--pk-bg-soft);
}
.pk-fav .pk-frow__thumb img {
	display: block; width: 100%; height: 100%; object-fit: cover;
	filter: saturate(1.05) contrast(1.03) sepia(0.07) brightness(1.01);
}
.pk-fav .pk-frow.is-paused .pk-frow__thumb img,
.pk-fav .pk-frow.is-removed .pk-frow__thumb img { filter: saturate(0.25) brightness(1.06); opacity: 0.7; }

.pk-fav .pk-frow__main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.pk-fav h3.pk-frow__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin: 0; font-size: 17px; line-height: 22px; font-weight: var(--fw-bold);
	letter-spacing: -0.01em; color: var(--pk-text); text-wrap: pretty;
}
.pk-fav .pk-frow__link { color: inherit; text-decoration: none; transition: color var(--dur-base); }
.pk-fav .pk-frow__link:visited { color: inherit; }
.pk-fav .pk-frow__link::after {
	content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--pk-radius);
}
.pk-fav .pk-frow__link:focus-visible { outline: none; }
.pk-fav .pk-frow__link:focus-visible::after { box-shadow: 0 0 0 3px var(--pk-green); }

/* Мета одной строкой: режется только район, вместимость и звезда - никогда. */
.pk-fav .pk-frow__meta {
	display: flex; align-items: center; min-width: 0; margin-top: 4px;
	font-size: 14px; line-height: 20px; color: var(--pk-muted); white-space: nowrap;
}
.pk-fav .pk-frow__geo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pk-fav .pk-frow__sep { flex: none; padding: 0 6px; color: var(--pk-dot); }
.pk-fav .pk-frow__cap { flex: none; }
.pk-fav .pk-frow__rating {
	flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
	font-weight: var(--fw-bold); color: var(--pk-text);
}
.pk-fav .pk-frow__rating.is-first { margin-left: 0; }
.pk-fav .pk-frow__rating svg { width: 12px; height: 12px; color: var(--pk-star); }

.pk-fav .pk-frow__status {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
	font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold);
	color: var(--pk-amber-text); white-space: nowrap;
}
.pk-fav .pk-frow__status svg { flex: none; width: 13px; height: 13px; }

.pk-fav .pk-frow__gone { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--pk-muted); }
.pk-fav .pk-frow.is-removed h3.pk-frow__title { color: var(--pk-muted); font-weight: var(--fw-semibold); }

/* Кнопка «♥ Убрать». Отступление от эталона ListingRow (там голое красное
   сердце): владелец не нашёл, как убрать место, - по одному сердцу это не
   читается (2026-09-11). Сердце остаётся, рядом слово; пилюля тихая, на
   наведении краснеет. У снятого объявления та же пилюля без сердца. */
.pk-fav .pk-frow__fav,
.pk-fav .pk-frow__drop {
	grid-area: fav; justify-self: end; align-self: start;
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 32px; margin: 0; padding: 0 12px 0 10px; box-sizing: border-box;
	border: 1px solid var(--pk-border); border-radius: var(--pk-radius-pill);
	background: #fff; color: var(--pk-muted);
	font-family: inherit; font-size: 13px; font-weight: var(--fw-semibold); line-height: 1;
	white-space: nowrap; cursor: pointer;
	transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base);
}
.pk-fav .pk-frow__drop { padding: 0 12px; color: var(--pk-green-dark); }
.pk-fav .pk-frow__fav svg { flex: none; width: 15px; height: 15px; color: var(--pk-danger); }
.pk-fav .pk-frow__fav:hover,
.pk-fav .pk-frow__drop:hover { border-color: rgba(214, 69, 69, 0.45); color: var(--pk-danger); background: #fff7f7; }
.pk-fav .pk-frow__fav:focus-visible,
.pk-fav .pk-frow__drop:focus-visible { outline: 2px solid var(--pk-green); outline-offset: 2px; }

.pk-fav .pk-frow__price {
	grid-area: price; justify-self: end; align-self: end;
	text-align: right; white-space: nowrap;
	font-size: 18px; line-height: 22px; font-weight: var(--fw-black);
	letter-spacing: -0.02em; color: var(--pk-text);
}
.pk-fav .pk-frow__unit { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0; color: var(--pk-muted); }
.pk-fav .pk-frow__price.is-empty { font-size: 15px; font-weight: var(--fw-regular); letter-spacing: 0; color: var(--pk-muted); }
.pk-fav .pk-frow.is-paused .pk-frow__price { color: var(--pk-muted); }

/* ---- Скелетон: та же геометрия, ничего не прыгает при загрузке ---- */

.pk-fav .pk-frow--skeleton { pointer-events: none; }
.pk-fav .pk-frow--skeleton .pk-frow__thumb,
.pk-fav .pk-frow__skl i {
	background: linear-gradient(110deg, var(--pk-skeleton-a) 25%, var(--pk-skeleton-b) 50%, var(--pk-skeleton-a) 75%);
	background-size: 200% 100%;
	animation: pk-fav-shimmer 1.6s linear infinite;
}
.pk-fav .pk-frow__skl { grid-area: main; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.pk-fav .pk-frow__skl i { display: block; height: 11px; border-radius: 4px; }
.pk-fav .pk-frow__skl i:nth-child(1) { width: 86%; }
.pk-fav .pk-frow__skl i:nth-child(2) { width: 54%; }
.pk-fav .pk-frow__skl i:nth-child(3) { width: 30%; height: 13px; margin-top: auto; }
@keyframes pk-fav-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ================================================================
   ПУСТОЕ СОСТОЯНИЕ: EmptyState из catalog.css + чипы «С чего начать»
   ================================================================ */

.pk-fav .pk-fav-empty { padding: 14px 0 26px; background: #fff; }
.pk-fav .pk-fav-start { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-top: 22px; }
.pk-fav .pk-fav-start__label {
	font-size: var(--fs-meta); font-weight: var(--fw-bold); text-transform: uppercase;
	letter-spacing: var(--ls-caps); color: var(--pk-muted);
}
.pk-fav .pk-fav-start .pk-cat-chiprow { gap: 8px; }
.pk-fav .pk-cat-chip svg { flex: none; color: var(--pk-green); }

/* ================================================================
   CTA ЗАЯВКИ: блок выдачи на кремовой полосе, без маскота (эталон)
   ================================================================ */

.pk-catalog.pk-fav .pk-catcta-band { padding: 26px 0 36px; background: var(--pk-cream); }
@media (min-width: 1025px) {
	/* Без маскота над карточкой не нужно поле 76px под его голову, а тексту
	   не нужен отступ 392px слева - текст встаёт от края карточки. */
	.pk-catalog.pk-fav .pk-catcta--nomascot { padding-top: 0; }
	.pk-catalog.pk-fav .pk-catcta--nomascot .pk-catcta__content { inset: 0; padding: 34px 44px; }
}
@media (max-width: 1024px) {
	.pk-catalog.pk-fav .pk-catcta--nomascot { padding-top: 0; }
	.pk-catalog.pk-fav .pk-catcta--nomascot .pk-catcta__card { inset: 0; }
}

/* ================================================================
   АДАПТИВ
   ================================================================ */

@media (max-width: 1023px) {
	.pk-fav .pk-fav-rows { grid-template-columns: minmax(0, 1fr); }
}

/* Компактная строка (ListingRow compact, кадры 375): миниатюра 96 квадратом,
   всё столбиком, сердечко в углу с зоной нажатия 44x44. */
@media (max-width: 760px) {
	.pk-fav .pk-fav-head { padding: 14px 0; }
	.pk-fav .pk-fav-head__row { margin-top: 8px; gap: 4px 10px; }
	.pk-fav h1.pk-fav-h1 { font-size: 26px; line-height: 1.15; }
	.pk-fav .pk-fav-head__count { font-size: 14px; }

	.pk-fav .pk-fav-list { padding: 4px 0 24px; }
	.pk-fav .pk-fav-group { margin-bottom: 20px; }
	.pk-fav .pk-fav-group__head svg { width: 14px; height: 14px; }
	.pk-fav h2.pk-fav-group__title { font-size: 16px; }
	.pk-fav .pk-fav-rows { gap: 8px; }

	/* Название и мета - во всю ширину текста, нижней строкой цена слева и
	   «♥ Убрать» справа: кнопке со словом в углу над названием места нет. */
	.pk-fav .pk-frow {
		grid-template-columns: 96px minmax(0, 1fr) auto;
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas: "thumb main main" "thumb price fav";
		column-gap: 12px;
		min-height: 120px;
	}
	.pk-fav .pk-frow__thumb { width: 96px; height: 96px; }
	.pk-fav h3.pk-frow__title { font-size: 15px; line-height: 20px; }
	.pk-fav .pk-frow__meta { font-size: 13px; line-height: 18px; }
	.pk-fav .pk-frow__status { font-size: 12.5px; }
	.pk-fav .pk-frow__status svg { width: 12px; height: 12px; }
	.pk-fav .pk-frow__gone { font-size: 13px; }
	.pk-fav .pk-frow__fav,
	.pk-fav .pk-frow__drop { align-self: end; height: 30px; gap: 5px; padding: 0 9px 0 8px; font-size: 12px; }
	.pk-fav .pk-frow__drop { padding: 0 10px; }
	/* Пилюля 30px, зона нажатия 44: прозрачный слой шире на 7px сверху и снизу. */
	.pk-fav .pk-frow__fav::after,
	.pk-fav .pk-frow__drop::after { content: ""; position: absolute; inset: -7px -4px; }
	.pk-fav .pk-frow__fav svg { width: 13px; height: 13px; }
	/* Цена и «Убрать» делят одну строку шириной около 186px на 375. Число
	   держится одной строкой, единица уходит под него мелким кеглем: одной
	   строкой «от 3 000 ₽ / день» (около 130px) налезала на кнопку - замер
	   2026-09-11. */
	.pk-fav .pk-frow__price {
		justify-self: start; align-self: end; min-width: 0; margin-top: 4px; text-align: left;
		font-size: 16px; line-height: 20px; white-space: normal;
	}
	.pk-fav .pk-frow__num { white-space: nowrap; }
	.pk-fav .pk-frow__unit { display: block; font-size: 12px; line-height: 14px; }
	/* Совсем узкие экраны: слову места нет, кнопка - одно сердце 30x30;
	   подпись остаётся в aria-label и в подсказке. */
	@media (max-width: 359px) {
		.pk-fav .pk-frow__fav { width: 30px; padding: 0; }
		.pk-fav .pk-frow__fav span {
			position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
		}
	}
	.pk-fav .pk-frow__unit { font-size: 12px; }
	.pk-fav .pk-frow__price.is-empty { font-size: 14px; }
	.pk-fav .pk-frow__skl { grid-row: 1 / span 2; }
	.pk-fav .pk-frow__skl i:nth-child(3) { width: 40%; }

	.pk-fav .pk-fav-note { font-size: 13px; }
	.pk-fav .pk-fav-empty { padding: 10px 0 22px; }
	.pk-fav .pk-fav-start { margin-top: 18px; }
	/* Чипы «С чего начать» на 375: у каталожного чипа кегль 16 и широкие поля,
	   и все шесть вставали по одному в ряд (замер: шесть рядов и при 14px -
	   контент строки 318px). На 13px короткие подписи встают парами, рядов
	   четыре; зона нажатия 44 (min-height из catalog.css) остаётся. */
	.pk-fav .pk-fav-start .pk-cat-chip { gap: 5px; padding: 8px 12px; font-size: 13px; }
	.pk-fav .pk-fav-start .pk-cat-chip svg { width: 13px; height: 13px; }

	.pk-catalog.pk-fav .pk-catcta-band { padding: 24px 0 28px; }
	/* Мобильный кадр эталона идёт без строки доказательства. */
	.pk-catalog.pk-fav .pk-catcta__proof { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pk-fav .pk-frow,
	.pk-fav .pk-frow-slot.is-closing { transition: none; }
	.pk-fav .pk-frow--skeleton .pk-frow__thumb,
	.pk-fav .pk-frow__skl i { animation: none; }
}