/* Страница каталога (/karkasnye-bani/) и страница проекта.
 *
 * Общая вёрстка карточек и сетки лежит в catalog.css - она одна на главную и
 * на каталог. Здесь только то, чего на главной нет: крошки, шапка раздела,
 * панель фильтров, счётчик и блок захвата в конце страницы.
 *
 * Ширины текста - в em, а не в ch (2026-09-28, доп-7): ch - ширина «0» того
 * шрифта, что уже пришёл, и пока грузился фирменный, блок был другой ширины, чем
 * после подмены. Пересчёт как на главной: «0» Unbounded 500 - 0.909em, Inter 400 -
 * 0.630859em (Chromium и WebKit); у правила в комментарии - прежнее значение в ch.
 */

/* Хлебные крошки переехали в components.css: они стоят на всех внутренних
   страницах, а этот файл подключается только на каталоге и карточке проекта.
   Пока правила лежали здесь, на странице «Гарантия и сервис» цепочка
   разваливалась в столбик. */

/* --- Шапка раздела ---------------------------------------------------------- */

.catalog-intro {
	padding-bottom: clamp(20px, 2vw, 40px);
}

.catalog-intro__title {
	max-width: 19.998em; /* 22ch в Unbounded 500 */
}

.catalog-intro__text {
	max-width: 44.16em; /* 70ch в Inter 400 */
	margin-top: clamp(12px, 1vw, 20px);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-gray-600);
}

/* --- Панель фильтров -------------------------------------------------------- */

.catalog-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(16px, 1.6vw, 32px);
	padding: clamp(16px, 1.5vw, 28px);
	border: 1px solid rgba(27, 26, 21, 0.08);
	border-radius: var(--r-lg);
	background: var(--c-white);
	box-shadow: var(--sh-card);
}

.catalog-filter__group {
	flex: 1 1 460px;
}

.catalog-filter__legend {
	display: block;
	margin-bottom: 10px;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.catalog-filter__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.catalog-filter__option {
	display: inline-flex;
	cursor: pointer;
}

.catalog-filter__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--r-pill);
	background: #f4f2ee;
	font-size: var(--fs-small);
	line-height: 1.2;
	color: var(--c-gray-600);
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.catalog-filter__label:hover {
	background: var(--c-gray-300);
}

.catalog-filter__count {
	font-size: 0.85em;
	color: var(--c-text-muted);
}

/* Состояние выбранного фильтра. Чекбокс скрыт визуально, но остаётся в фокусе
   и в разметке - клавиатура и скринридер работают как с обычным чекбоксом. */
.catalog-filter__input:checked + .catalog-filter__label {
	background: var(--c-gold);
	color: var(--c-black);
}

.catalog-filter__input:checked + .catalog-filter__label .catalog-filter__count {
	color: rgba(0, 0, 0, 0.55);
}

.catalog-filter__input:focus-visible + .catalog-filter__label {
	outline: 3px solid var(--c-gold-deep);
	outline-offset: 2px;
}

.catalog-filter__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.catalog-filter__sort {
	display: block;
}

.catalog-filter__select {
	min-width: 240px;
	padding-block: 11px;
}

/* Кнопка «Показать» нужна только без JavaScript: со скриптом выдача
   перестраивается сразу по нажатию фильтра. Скрипт убирает её сам. */
.catalog-filter__submit {
	padding-block: 11px;
}

.catalog-filter__reset {
	align-self: center;
	border-bottom: 1px dashed var(--c-gray-400);
	font-size: var(--fs-small);
	color: var(--c-text-muted);
	cursor: pointer;
}

.catalog-filter__reset:hover {
	color: var(--c-black);
}

/* --- Счётчик и пустое состояние --------------------------------------------- */

.catalog__result {
	margin-top: clamp(16px, 1.5vw, 28px);
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.catalog__empty {
	margin-top: clamp(20px, 2vw, 36px);
	font-size: var(--fs-body);
	color: var(--c-gray-600);
}

.link-button {
	border-bottom: 1px solid var(--c-gold-deep);
	color: inherit;
	cursor: pointer;
}

.link-button:hover {
	border-bottom-color: var(--c-black);
}

/* Сетка на странице каталога начинается сразу под счётчиком. */
.catalog--page .catalog__grid {
	margin-top: clamp(16px, 1.5vw, 28px);
}

.catalog--page {
	padding-top: 0;
}

/* --- Блок захвата в конце страницы ------------------------------------------ */

.catalog-cta {
	padding-block: var(--section-pad, clamp(36px, 3.4vw, 76px));
}

.catalog-cta__inner {
	padding: clamp(24px, 2.6vw, 56px);
	border-radius: var(--r-xl);
	background: var(--c-ink);
	color: var(--c-white);
}

.catalog-cta__title {
	max-width: 27.27em; /* 30ch в Unbounded 500 */
}

.catalog-cta__title .accent {
	color: var(--c-gold);
}

.catalog-cta__list {
	margin-top: clamp(16px, 1.5vw, 28px);
	display: grid;
	gap: 12px;
	max-width: 44.16em; /* 70ch в Inter 400 */
}

.catalog-cta__button {
	margin-top: clamp(20px, 2vw, 36px);
}

@media (max-width: 767px) {
	.catalog-filter {
		flex-direction: column;
		align-items: stretch;
	}

	.catalog-filter__aside {
		flex-direction: column;
		align-items: stretch;
	}

	.catalog-filter__select {
		min-width: 0;
		width: 100%;
	}

	.catalog-filter__reset {
		align-self: flex-start;
	}
}

/* --- Страница проекта ------------------------------------------------------- */

.project {
	padding-bottom: clamp(24px, 2.4vw, 48px);
}

.project__title {
	max-width: 19.998em; /* 22ch в Unbounded 500 */
	margin-bottom: clamp(18px, 1.8vw, 36px);
}

.project__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
	gap: clamp(20px, 2vw, 40px);
	align-items: start;
}

/* Галерея - тот же слайдер, что в карточке: разметка и скрипт общие,
   отличается только размер кадра. */
.project__slider {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-gray-100);
}

.project__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.project__track::-webkit-scrollbar {
	display: none;
}

.project__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.project__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Планировка - последний слайд. Её нельзя кадрировать, как фотографию:
   при object-fit: cover с чертежа срезало бы размерные линии и экспликацию.
   Вписываем целиком на светлой подложке - у чертежа белый фон. */
.project__slide--plan .project__img {
	object-fit: contain;
	background: #fff;
	padding: clamp(8px, 1vw, 16px);
}

.project__slider:hover .slider-arrow,
.project__slider .slider-arrow:focus-visible {
	opacity: 1;
}

.project__aside {
	display: grid;
	gap: clamp(16px, 1.5vw, 28px);
	position: sticky;
	top: calc(var(--header-h) + 16px);
}

.project__specs {
	display: grid;
	gap: 1px;
	border: 1px solid rgba(27, 26, 21, 0.08);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: rgba(27, 26, 21, 0.08);
}

.project__spec {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	padding: clamp(12px, 1vw, 16px) clamp(16px, 1.4vw, 22px);
	background: var(--c-white);
	font-size: var(--fs-body);
}

.project__spec-name {
	color: var(--c-text-muted);
}

.project__spec-value {
	text-align: right;
}

.project__form {
	padding: clamp(20px, 1.8vw, 32px);
	border-radius: var(--r-lg);
	background: var(--c-ink);
	color: var(--c-white);
}

.project__form-title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	line-height: var(--lh-tight);
}

.project__form-note {
	margin-top: 10px;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.7);
}

.project__form .form-short {
	margin-top: clamp(14px, 1.2vw, 20px);
}

.project__text {
	max-width: 44.16em; /* 70ch в Inter 400 */
	margin-top: clamp(24px, 2.4vw, 48px);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* --- Другие проекты --------------------------------------------------------- */

.project-more__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(16px, 1.5vw, 28px);
}

@media (max-width: 767px) {
	/*
	 * Кнопка «Весь каталог» - под сеткой карточек, а не в строке с заголовком.
	 * Она вложена в .project-more__head вместе с заголовком, а сетка - её
	 * соседний элемент на уровень выше, поэтому разбираем шапку в контейнер
	 * через display: contents и переставляем порядком.
	 */
	.project-more--showcase .container {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.project-more__head {
		display: contents;
	}

	.catalog__grid {
		order: 2;
	}

	/* На телефоне кнопка одна на весь блок - делаем её заметной, золотой. */
	.project-more__all {
		order: 3;
		width: 100%;
		text-align: center;
		background: var(--c-gold);
		box-shadow: none;
		color: var(--c-black);
	}

	.project-more__all:hover {
		background: var(--c-gold-deep);
	}
}

@media (max-width: 1023px) {
	.project__layout {
		grid-template-columns: 1fr;
	}

	/* В одну колонку липкая колонка теряет смысл: она и так идёт следом за фото. */
	.project__aside {
		position: static;
	}
}

/* ==========================================================================
   Пилот подробной карточки проекта «Полюс»
   Подключается той же таблицей только на страницах каталога и проектов,
   но все селекторы замкнуты на .project-showcase.
   ========================================================================== */

.project-showcase {
	--showcase-line: rgba(27, 26, 21, 0.1);
	--showcase-soft: #f5f3ee;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * Крошки стоят в самом верху карточки, а она обрезает всё за своим краем
 * (overflow: hidden): верхние 14 px зоны нажатия крошек (components.css)
 * срезались и не нажимались. На сенсорном экране край карточки поднят
 * на 14 px, содержимое на месте (01-Ж2).
 */
@media (pointer: coarse) {
	.project-showcase {
		margin-top: -14px;
		padding-top: 14px;
	}
}

/*
 * Порядок смысловых блоков карточки - в самой разметке (template-parts/project-polyus.php):
 * планировка, комплектации, внешний вид, интерьеры, «Что можно добавить», экскурсия...
 * Раньше блоки переставлял order, и Tab и скринридер шли не в том порядке, что
 * видит глаз - с планировки прыгали на 7000 px вниз и обратно (аудит 2026-09-25, 08-В7).
 */

.project-showcase__head {
	padding-block: clamp(8px, 1vw, 18px) clamp(24px, 2.2vw, 42px);
}

.project-showcase__title {
	max-width: 19.998em; /* 22ch в Unbounded 500 */
}

.project-showcase__lead {
	/* Ширины хватает на две строки при 20px. */
	max-width: 940px;
	margin: clamp(10px, 1.4vw, 18px) 0 0;
	font-size: 20px;
	line-height: 1.45;
	color: var(--c-gray-600);
}

.project-showcase__hero {
	display: grid;
	/* Фото - фиксированные 900px, сводка занимает остаток строки. */
	grid-template-columns: minmax(0, 900px) minmax(320px, 1fr);
	align-items: start;
	gap: clamp(20px, 2.2vw, 44px);
	padding-bottom: clamp(58px, 6vw, 112px);
}

/* Галерея первого экрана */
.project-gallery {
	min-width: 0;
}

.project-gallery__stage {
	aspect-ratio: 16 / 10;
	border-radius: clamp(18px, 2vw, 30px);
	background: #e9e7e1;
}

.project-gallery__track,
.project-gallery__slide {
	height: 100%;
}

.project-gallery__image {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: 50% 64%;
}

/* Широкие мастер-кадры уже собраны под окно галереи и не требуют смещения. */
.project-gallery__slide.is-main-wide .project-gallery__image {
	object-position: center;
}

.project-gallery__slide.is-plan {
	padding: clamp(12px, 1.5vw, 24px);
	background: #fafafa;
}

.project-gallery__slide.is-plan .project-gallery__image {
	object-fit: contain;
	object-position: center;
}

.project-gallery__meta {
	display: contents;
}

.project-gallery__meta span {
	position: absolute;
	padding: 8px 13px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--r-pill);
	background: rgba(27, 26, 21, 0.72);
	backdrop-filter: blur(8px);
	font-size: 12px;
	line-height: 1;
	color: var(--c-white);
	pointer-events: none;
}

/* Подпись ракурса - левый верхний угол, счётчик кадров - правый нижний. */
.project-gallery__meta [data-project-gallery-label] {
	left: clamp(12px, 1.2vw, 20px);
	top: clamp(12px, 1.2vw, 20px);
}

/*
 * У проектов с роликами в том же углу стоит кнопка «N видеообзора» - подпись
 * ракурса уходит под неё, иначе кнопка её закрывала (аудит 2026-09-25, 01-Ж3).
 */
.project-gallery__stage:has(.project-gallery__media-actions) [data-project-gallery-label] {
	top: calc(clamp(12px, 1.2vw, 20px) + 52px);
}

.project-gallery__meta [data-project-gallery-counter] {
	right: clamp(12px, 1.2vw, 20px);
	bottom: clamp(12px, 1.2vw, 20px);
}

.project-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.project-gallery__thumb {
	position: relative;
	overflow: hidden;
	min-width: 0;
	border: 2px solid transparent;
	border-radius: 13px;
	background: var(--showcase-soft);
	transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.project-gallery__thumb:hover {
	transform: translateY(-2px);
}

.project-gallery__thumb.is-active {
	border-color: var(--c-gold-deep);
}

.project-gallery__thumb-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.project-gallery__thumb span {
	position: absolute;
	left: 6px;
	top: 6px;
	padding: 4px 7px;
	border-radius: var(--r-pill);
	background: rgba(27, 26, 21, 0.72);
	font-size: 12px;
	line-height: 1;
	color: var(--c-white);
}

/* Сводка проекта */
.project-summary {
	position: sticky;
	top: calc(var(--header-h) + 16px);
	padding: clamp(20px, 2vw, 34px);
	border: 1px solid var(--showcase-line);
	border-radius: clamp(20px, 2vw, 30px);
	background: var(--c-white);
	box-shadow: 0 20px 60px rgba(27, 26, 21, 0.08);
}

.project-summary__topline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: clamp(18px, 1.7vw, 28px);
}

.project-summary__topline span {
	padding: 7px 11px;
	border-radius: var(--r-pill);
	background: var(--showcase-soft);
	font-size: 12px;
	line-height: 1;
	color: var(--c-gray-600);
}

.project-summary__topline span:first-child {
	background: var(--c-gold);
	color: var(--c-black);
}

.project-summary__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--showcase-line);
	border-radius: 16px;
	background: var(--showcase-line);
}

.project-summary__spec {
	min-width: 0;
	padding: 14px 15px;
	background: var(--c-white);
}

.project-summary__spec dt {
	margin-bottom: 5px;
	font-size: 14px;
	color: var(--c-text-muted);
}

.project-summary__spec dd {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(13px, 1vw, 16px);
	line-height: 1.3;
}

.project-summary__features {
	margin-top: clamp(20px, 1.7vw, 28px);
}

.project-summary__label {
	margin-bottom: 12px;
	font-size: 12px;
	color: var(--c-text-muted);
}

.project-summary__features ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.project-summary__features li {
	position: relative;
	padding: 9px 12px 9px 28px;
	border-radius: var(--r-pill);
	background: var(--showcase-soft);
	font-size: 14px;
	line-height: 1.2;
}

.project-summary__features li::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-gold-deep);
	transform: translateY(-50%);
}

.project-capacity {
	margin-top: clamp(18px, 1.6vw, 26px);
	padding: 16px;
	border-radius: 16px;
	background: var(--showcase-soft);
}

.project-capacity__result {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
}

.project-capacity__result span {
	max-width: 10.094em; /* 16ch в Inter 400 */
	font-size: 14px;
	line-height: 1.3;
	color: var(--c-text-muted);
}

.project-capacity__result strong {
	font-family: var(--font-head);
	font-size: clamp(18px, 1.5vw, 24px);
	font-weight: 500;
	line-height: 1.15;
}

.project-capacity > p {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--showcase-line);
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-text-muted);
}

.project-summary__cta {
	display: flex;
	width: 100%;
	margin-top: 16px;
}

.project-summary__link {
	display: block;
	width: fit-content;
	margin: 14px auto 0;
	border-bottom: 1px dashed var(--c-gray-400);
	font-size: 12px;
	color: var(--c-gray-600);
}

/*
 * «Смотреть варианты комплектации» и «Читать далее» на сенсорном экране - зона
 * нажатия 44 px (была 18, аудит 2026-09-25, 01-Ж2). Пунктир - подчёркиванием
 * текста: с полями по вертикали нижняя граница ушла бы от слов вниз. Лишняя
 * высота погашена отрицательными полями - соседние блоки на месте.
 */
@media (pointer: coarse) {
	.project-summary__link {
		padding-block: 14px;
		margin-block: 0 -14px;
		border-bottom: 0;
		text-decoration: underline dashed var(--c-gray-400);
		text-underline-offset: 4px;
	}

	.project-seo__toggle {
		padding-block: 14px;
		margin-block: 2px -14px;
		border-bottom: 0;
		text-decoration: underline dashed var(--c-gray-400);
		text-underline-offset: 4px;
	}
}

.project-gallery__media-actions {
	position: absolute;
	top: clamp(12px, 1.2vw, 20px);
	left: clamp(12px, 1.2vw, 20px);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.project-media-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-pill);
	background: rgba(27, 26, 21, 0.78);
	backdrop-filter: blur(8px);
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	color: var(--c-white);
	transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.project-media-link:hover {
	border-color: var(--c-gold);
	background: rgba(27, 26, 21, 0.94);
	transform: translateY(-1px);
}

.project-media-link svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--c-gold-deep);
}

/* Фото и видео построенной бани ------------------------------------------- */

.project-media-popup__window {
	display: block;
	width: min(1080px, 100%);
	max-height: min(92vh, 860px);
	overflow: hidden;
	border-radius: var(--r-xl);
	background: #171713;
	color: var(--c-white);
}

.project-media-popup__window--video {
	width: min(920px, 100%);
}

.project-media-popup__window--portrait {
	width: min(440px, 100%);
}

/* Планировка крупнее: светлое окно, картинка целиком. */
.project-media-popup__window--plan {
	width: min(1320px, 100%);
	padding: clamp(16px, 3vw, 44px);
	background: var(--c-white);
}

.project-media-popup__window--plan img {
	display: block;
	width: 100%;
	max-height: calc(min(92vh, 860px) - clamp(32px, 6vw, 88px));
	object-fit: contain;
}

.project-media-popup__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(18px, 2vw, 30px);
}

.project-media-popup__head > p {
	order: 2;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-gold);
}

/* Заголовок окна видео - не тег h2 (SEO-план, Т12): шрифт и вес, которые давало правило
   h1-h6 в base.css, заданы здесь - вид прежний. */
.project-media-popup__head .h3 {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(18px, 1.65vw, 27px);
	line-height: 1.25;
}

.project-media-popup__head--video {
	display: block;
	padding-bottom: 20px;
}

.project-media-popup__head--video > p {
	order: initial;
	margin: 0 0 7px;
}

.project-media-popup__playlist {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(128px, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0 clamp(18px, 2vw, 30px) 18px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(244, 198, 113, 0.6) transparent;
}

.project-media-popup__playlist-item {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	min-height: 54px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	background: #22221e;
	color: rgba(255, 255, 255, 0.72);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	scroll-snap-align: start;
	transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.project-media-popup__playlist-item:hover {
	background: #292923;
	color: var(--c-white);
}

.project-media-popup__playlist-item[aria-selected="true"] {
	border-color: rgba(244, 198, 113, 0.72);
	background: rgba(244, 198, 113, 0.13);
	box-shadow: inset 0 0 0 1px rgba(244, 198, 113, 0.18);
	color: var(--c-white);
}

.project-media-popup__playlist-item:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

.project-media-popup__playlist-thumb {
	position: relative;
	display: grid;
	flex: 0 0 36px;
	width: 36px;
	height: 40px;
	place-items: center;
	overflow: hidden;
	border-radius: 7px;
	background: #0b0b09;
	color: var(--c-gold);
}

.project-media-popup__playlist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-media-popup__playlist-thumb svg {
	width: 18px;
	height: 18px;
}

.project-media-popup__playlist-item > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-media-popup__playlist-item[aria-selected="true"] .project-media-popup__playlist-thumb::after {
	position: absolute;
	inset: 0;
	border: 2px solid var(--c-gold);
	border-radius: inherit;
	content: '';
}

.project-media-popup__playlist::-webkit-scrollbar {
	height: 4px;
}

.project-media-popup__playlist::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: rgba(244, 198, 113, 0.6);
}

.project-media-popup__playlist::-webkit-scrollbar-track {
	background: transparent;
}

.project-media-popup__video {
	position: relative;
	display: grid;
	place-items: center;
	height: min(72vh, 700px);
	overflow: hidden;
	background: #050505;
}

.project-media-popup__video video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	background: #050505;
}

.project-built-gallery__stage {
	position: relative;
	display: grid;
	place-items: center;
	height: min(62vh, 610px);
	background: #0b0b09;
}

.project-built-gallery__stage > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

.project-built-gallery__arrow {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: var(--c-black);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.24);
	transform: translateY(-50%);
}

.project-built-gallery__arrow:hover {
	background: var(--c-gold);
}

.project-built-gallery__arrow svg {
	width: 17px;
	height: 17px;
}

.project-built-gallery__arrow--prev {
	left: 18px;
}

.project-built-gallery__arrow--next {
	right: 18px;
}

.project-built-gallery__counter {
	position: absolute;
	right: 16px;
	bottom: 14px;
	padding: 6px 11px;
	border-radius: var(--r-pill);
	background: rgba(0, 0, 0, 0.62);
	font-size: 11px;
	color: var(--c-white);
}

.project-built-gallery__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 12px clamp(16px, 2vw, 28px) 16px;
	background: #171713;
	scrollbar-width: thin;
}

.project-built-gallery__thumb {
	flex: 0 0 92px;
	overflow: hidden;
	padding: 2px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	opacity: 0.62;
	transition: opacity var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.project-built-gallery__thumb:hover,
.project-built-gallery__thumb.is-active {
	border-color: var(--c-gold);
	opacity: 1;
}

.project-built-gallery__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 7px;
	object-fit: cover;
}

.project-media-popup .popup__close {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.65);
	font-size: 25px;
	color: var(--c-white);
}

/* Общая шапка внутренних секций (.project-section-head) и таблица комплектаций
   (.project-packages, .package-compare) - в packages-table.css: таблица стоит и на
   /komplektacii/, где этого файла нет. Он подключается раньше (зависимость). */

/* Смысл проекта */
.project-benefits {
	padding-block: clamp(60px, 7vw, 132px);
	background: var(--c-ink);
	color: var(--c-white);
}

.project-benefits .project-section-head > p:not(.project-section-head__eyebrow) {
	color: rgba(255, 255, 255, 0.62);
}

/* #9a7634 на тёмном фоне читается мутно - берём светлое золото. */
.project-benefits .project-section-head__eyebrow {
	color: var(--c-gold-deep);
}

.project-benefits__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: var(--gap);
}

.project-benefit {
	min-height: clamp(260px, 25vw, 420px);
	padding: clamp(22px, 2.4vw, 42px);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--r-xl);
	background: rgba(255, 255, 255, 0.035);
}

.project-benefit--large {
	background: var(--c-gold);
	color: var(--c-black);
}

.project-benefit__number {
	display: block;
	margin-bottom: clamp(70px, 9vw, 150px);
	font-family: var(--font-head);
	font-size: 13px;
	color: var(--c-gold);
}

.project-benefit--large .project-benefit__number {
	color: rgba(0, 0, 0, 0.45);
}

.project-benefit h3 {
	font-size: var(--fs-h4);
	line-height: 1.35;
}

.project-benefit p {
	margin-top: 14px;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

.project-benefit--large p {
	color: rgba(0, 0, 0, 0.62);
}

/* Планировки */
.project-plans,
.project-finishes,
.project-confidence,
.project-calculation,
.project-more--showcase {
	padding-block: clamp(60px, 7vw, 132px);
}

.project-finishes {
	/* Сверху меньше: секция «Планировки» выше не даёт нижнего отступа, а обе бежевые. */
	padding-block: clamp(24px, 2.6vw, 44px) clamp(54px, 5vw, 92px);
	background: var(--showcase-soft);
}

.project-plans {
	/*
	 * Снизу padding нет: следующая секция «Внешний вид» тоже бежевая и даёт
	 * свой отступ сверху - один интервал вместо двух сложенных.
	 */
	padding-bottom: 0;
	background: var(--showcase-soft);
}

.project-plans__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap);
}

.project-plan-single {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.65fr);
	gap: var(--gap);
	align-items: stretch;
}

.project-plan {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

.project-plan__image-wrap {
	/* Кнопка: клик открывает планировку крупнее. */
	display: block;
	width: 100%;
	padding: clamp(12px, 2vw, 34px);
	border: 0;
	font: inherit;
	color: inherit;
	background: #fafafa;
	cursor: zoom-in;
}

.project-plan__image {
	width: 100%;
	aspect-ratio: 1 / 0.92;
	object-fit: contain;
}

.project-plan--single .project-plan__image-wrap {
	display: grid;
	align-items: center;
	min-height: 0;
	background: var(--c-white);
}

.project-plan--single .project-plan__image {
	aspect-ratio: auto;
}

/*
 * WordPress добавляет lazy-картинкам contain-intrinsic-size: 3000px 1500px.
 * Пока файл ещё не загружен, это растягивало мобильную карточку плана почти
 * на весь экран. Все планы каталога имеют близкий к 3:2 горизонтальный кадр.
 */
.project-plan--single .project-plan__image--catalog {
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

.project-plan figcaption {
	padding: clamp(18px, 1.8vw, 28px);
	border-top: 1px solid var(--showcase-line);
}

.project-plan figcaption span {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
}

.project-plan-summary {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.6vw, 42px);
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

.project-plan-summary__label {
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-gold-text);
}

.project-plan-summary__total {
	display: grid;
	gap: 4px;
	margin: clamp(34px, 4vw, 60px) 0 22px;
}

.project-plan-summary__total strong {
	font-family: var(--font-head);
	font-size: clamp(30px, 3vw, 48px);
	font-weight: 500;
	line-height: 1;
}

.project-plan-summary__total span {
	font-size: 14px;
	color: var(--c-text-muted);
}

.project-plan-summary dl {
	border-top: 1px solid var(--showcase-line);
}

.project-plan-summary dl > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 13px 0;
	border-bottom: 1px solid var(--showcase-line);
	font-size: 14px;
	line-height: 1.4;
}

.project-plan-summary dt {
	color: var(--c-black);
}

.project-plan-summary dd {
	font-family: var(--font-head);
	font-weight: 500;
	white-space: nowrap;
}

.project-plan-summary__note {
	margin-top: auto;
	padding-top: 22px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--c-text-muted);
}

@media (min-width: 1024px) {
	.project-plans {
		padding-block: clamp(42px, 4vw, 68px) 0;
	}

	.project-plans .project-section-head {
		margin-bottom: 30px;
	}

	.project-plan-single {
		grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.55fr);
		gap: 16px;
	}

	.project-plan--single .project-plan__image-wrap {
		position: relative;
		height: clamp(480px, 30vw, 520px);
		overflow: hidden;
		padding: 0;
	}

	.project-plan--single .project-plan__image {
		position: absolute;
		inset: 16px;
		width: calc(100% - 32px);
		height: calc(100% - 32px);
		object-fit: contain;
	}

	.project-plan--single figcaption {
		padding: 16px 22px;
	}

	.project-plan-summary {
		padding: 24px 28px;
	}

	.project-plan-summary__total {
		margin: 24px 0 14px;
	}

	.project-plan-summary dl > div {
		padding: 9px 0;
	}

	.project-plan-summary__note {
		padding-top: 14px;
	}
}

.project-plan-adapt {
	--adapt-pad: clamp(22px, 2.4vw, 40px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
	align-items: start;
	gap: clamp(24px, 3vw, 52px);
	margin-top: var(--gap);
	padding: var(--adapt-pad);
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--c-ink);
	color: var(--c-white);
}

/* С фото справа: колонки ровно пополам, фото начинается от середины блока. */
.project-plan-adapt--media {
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
}

.project-plan-adapt--media > div {
	padding-right: clamp(24px, 3vw, 52px);
}

/*
 * Плашки жёсткими парами: каждый <li> - строка из двух span, между ними
 * ровно 8px, между строками тоже 8px. Так все отступы одинаковые и порядок
 * (напольное покрытие + банные аксессуары на третьей строке) не зависит
 * от ширины плашек.
 */
.project-plan-adapt--media > div ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.project-plan-adapt--media > div li {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	border: 0;
}

.project-plan-adapt--media > div li span {
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--r-pill);
	font-size: 16px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.78);
}

/*
 * Фото в правой колонке - вплотную к краям подложки (гасим её padding).
 * Картинка абсолютная: заполняет колонку по высоте текста и не тянет
 * блок вверх/вниз, какая бы ни была у неё пропорция.
 */
.project-plan-adapt__media {
	position: relative;
	align-self: stretch;
	margin: calc(var(--adapt-pad) * -1) calc(var(--adapt-pad) * -1) calc(var(--adapt-pad) * -1) 0;
}

.project-plan-adapt__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Кнопка под текстом левой колонки. */
.project-plan-adapt .btn {
	margin-top: 22px;
}

.project-plan-adapt .project-section-head__eyebrow {
	margin-bottom: 16px;
	/* #9a7634 на тёмном фоне читается мутно - берём светлое золото. */
	color: var(--c-gold-deep);
}

.project-plan-adapt h3 {
	font-size: var(--fs-h4);
	line-height: 1.4;
}

.project-plan-adapt h3 + p {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.project-plan-adapt ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Список внутри левой колонки (интерьеры) - с отступом от заголовка. */
.project-plan-adapt > div ul {
	margin-top: clamp(18px, 2vw, 28px);
}

.project-plan-adapt li {
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--r-pill);
	font-size: 16px;
	color: rgba(255, 255, 255, 0.78);
}

/* Отделки */
.finish-selector {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 600px;
	gap: 40px;
	align-items: stretch;
}

/*
 * Фото и карточка выбора - одного размера: колонки равной ширины (1fr/1fr),
 * высота ряда фиксирована (600px), align-items: stretch тянет к ней оба блока.
 * Пропорцию фото на десктопе не фиксируем; на мобилке ряд становится auto,
 * а квадрат фото задаётся aspect-ratio в медиазапросах (там колонка одна).
 */
.finish-selector__visual {
	position: relative;
	overflow: hidden;
	min-height: 0;
	border-radius: var(--r-xl);
	background: var(--showcase-soft);
}

.finish-selector__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 67%;
	transition: opacity 0.18s var(--ease), transform 0.5s var(--ease);
}

.finish-selector__visual img.is-changing {
	opacity: 0.35;
	transform: scale(1.01);
}

.finish-selector__caption {
	position: absolute;
	left: 18px;
	bottom: 18px;
	max-width: calc(100% - 36px);
	padding: 9px 13px;
	border-radius: var(--r-pill);
	background: rgba(27, 26, 21, 0.74);
	/* Не мельче 12 px (01-Ж1). */
	font-size: 12px;
	line-height: 1.3;
	color: var(--c-white);
}

.finish-selector__controls {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.2vw, 38px);
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

.finish-selector__label {
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--c-text-muted);
}

.finish-selector__hint {
	margin-bottom: 14px;
	font-size: 18px;
	line-height: 1.45;
	color: var(--c-black);
}

.finish-option {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 0;
	border-top: 1px solid var(--showcase-line);
	text-align: left;
}

.finish-option__swatch {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	border: 4px solid var(--c-white);
	border-radius: 50%;
	background: var(--finish-color);
	box-shadow: 0 0 0 1px var(--showcase-line);
}

.finish-option.is-active .finish-option__swatch {
	box-shadow: 0 0 0 2px var(--c-gold-deep);
}

.finish-option.is-active .finish-option__swatch::after {
	content: '';
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 14px;
	height: 14px;
	border: 3px solid var(--c-white);
	border-radius: 50%;
	background: var(--c-gold-deep);
}

.finish-option strong,
.finish-option small {
	display: block;
}

.finish-option strong {
	font-size: 14px;
	font-weight: 500;
}

.finish-option small {
	margin-top: 3px;
	font-size: 14px;
	color: var(--c-text-muted);
}

.finish-selector__cta {
	width: 100%;
	margin-top: auto;
	padding-inline: 18px;
}

/* Внутренняя отделка */
.project-interiors {
	padding-block: clamp(60px, 7vw, 132px);
}

.project-interiors__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}

.interior-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

/* Верх карточки - фото. */
.interior-card img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	transition: transform 0.55s var(--ease);
}

.interior-card:hover img {
	transform: scale(1.03);
}

/* Низ - светлая плашка с подписью. */
.interior-card figcaption {
	position: relative;
	z-index: 3;
	flex: 1;
	padding: clamp(14px, 1.6vw, 20px) clamp(15px, 1.7vw, 22px) clamp(16px, 1.8vw, 22px);
	background: var(--c-white);
	color: var(--c-black);
}

/* Прозрачная кнопка над фото - клик открывает фото крупнее.
   Плашка подписи лежит поверх её нижней части (z-index выше), поэтому
   кликом на текст попап не открывается - только по фото. */
.interior-card__zoom {
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.interior-card figcaption strong,
.interior-card figcaption span {
	display: block;
}

.interior-card figcaption strong {
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
}

.interior-card figcaption span {
	margin-top: 5px;
	font-size: 16px;
	color: var(--c-text-muted);
}


.package-card {
	display: flex;
	flex-direction: column;
	min-height: 480px;
	padding: clamp(24px, 2.3vw, 40px);
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

.package-card--accent {
	background: var(--c-gold);
}

.package-card--dark {
	background: var(--c-ink);
	color: var(--c-white);
}

.package-card__step {
	margin-bottom: clamp(46px, 5vw, 86px);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.package-card--dark .package-card__step {
	color: rgba(255, 255, 255, 0.52);
}

.package-card h3 {
	font-size: var(--fs-h4);
	line-height: 1.35;
}

.package-card__description {
	min-height: 62px;
	margin-top: 12px;
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--c-text-muted);
}

.package-card--accent .package-card__description {
	color: rgba(0, 0, 0, 0.58);
}

.package-card--dark .package-card__description {
	color: rgba(255, 255, 255, 0.62);
}

.package-card ul {
	display: grid;
	gap: 0;
	margin-top: auto;
}

.package-card li {
	position: relative;
	padding: 13px 0 13px 24px;
	border-top: 1px solid var(--showcase-line);
	font-size: var(--fs-small);
}

.package-card--dark li {
	border-top-color: rgba(255, 255, 255, 0.13);
}

.package-card li::before {
	content: '';
	position: absolute;
	left: 1px;
	top: 18px;
	width: 9px;
	height: 5px;
	border-left: 2px solid #9a7634;
	border-bottom: 2px solid #9a7634;
	transform: rotate(-45deg);
}

.package-card--dark li::before {
	border-color: var(--c-gold);
}

/* Доказательства и финальная форма */
.project-confidence__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--showcase-line);
}

.project-confidence__grid article {
	min-height: 270px;
	padding: clamp(22px, 2.1vw, 36px);
	background: var(--c-white);
}

.project-confidence__grid article > span {
	display: block;
	margin-bottom: clamp(66px, 6vw, 104px);
	font-family: var(--font-head);
	font-size: 12px;
	color: var(--c-gold-text);
}

.project-confidence__grid h3 {
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.4;
}

.project-confidence__grid p {
	margin-top: 12px;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--c-text-muted);
}

.project-calculation {
	padding-top: 0;
}

.project-calculation__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.72fr);
	gap: clamp(32px, 6vw, 110px);
	padding: clamp(28px, 4.2vw, 72px);
	border-radius: var(--r-xl);
	background: var(--c-ink);
	color: var(--c-white);
}

.project-calculation__copy > p:not(.project-section-head__eyebrow) {
	max-width: 36.59em; /* 58ch в Inter 400 */
	margin-top: 18px;
	color: rgba(255, 255, 255, 0.65);
}

.project-calculation__copy ul {
	display: grid;
	gap: 10px;
	margin-top: clamp(24px, 2.4vw, 38px);
}

.project-calculation__copy li {
	position: relative;
	padding-left: 24px;
	font-size: var(--fs-small);
}

.project-calculation__copy li::before {
	content: '';
	position: absolute;
	left: 1px;
	top: 5px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--c-gold);
	border-bottom: 2px solid var(--c-gold);
	transform: rotate(-45deg);
}

.project-calculation__form {
	padding: clamp(20px, 2vw, 30px);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.04);
}

.project-more--showcase {
	padding-top: 0;
}

/*
 * Дополнительные решения - список: слева заголовок + описание, справа
 * прямоугольное фото, прижатое к правому краю. Фото одинаковые, стоят
 * колонкой. Между пунктами - разделительные линии.
 */
.project-extras {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.extra-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(24px, 4vw, 72px);
	padding: clamp(20px, 2.4vw, 34px) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.extra-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.extra-row__text::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	margin-bottom: 8px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23e8c37c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5 6.5 12 13 4.5"/></svg>') no-repeat center / contain;
}

.extra-row__text h3 {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--fs-h4);
	line-height: 1.3;
}

.extra-row__text p {
	margin-top: 8px;
	max-width: 35.328em; /* 56ch в Inter 400 */
	font-size: 18px;
	line-height: 1.5;
	color: var(--c-white);
}

.extra-row__img {
	flex: none;
	width: clamp(200px, 24vw, 320px);
	height: clamp(130px, 15vw, 200px);
	object-fit: cover;
	border-radius: var(--r-lg);
}

/* Два столбца: по 5 строк в каждом. */
.project-extras--cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 5vw, 72px);
}

.project-extras--cols .extra-row {
	gap: clamp(16px, 2vw, 36px);
}

.project-extras--cols .extra-row:nth-child(2) {
	border-top: 0;
	padding-top: 0;
}

.project-extras--cols .extra-row__img {
	width: clamp(140px, 15vw, 210px);
	height: clamp(96px, 10vw, 140px);
}

@media (max-width: 1023px) {
	.project-extras--cols {
		grid-template-columns: 1fr;
	}

	.project-extras--cols .extra-row:nth-child(2) {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding-top: clamp(20px, 2.4vw, 34px);
	}
}

.project-extras__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 2vw, 24px);
	margin-top: var(--gap);
	text-align: center;
}

.project-extras__footer p {
	max-width: 43.632em; /* 48ch в Unbounded 500 */
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--fs-h4);
	line-height: 1.3;
	color: var(--c-white);
}

/* Экскурсия */
.project-excursion {
	/* Снизу 0: отступ до «Как строим» даёт её собственный padding сверху. */
	padding-block: clamp(60px, 7vw, 132px) 0;
}

.project-excursion__inner {
	--proj-excursion-pad: clamp(26px, 4vw, 68px);
	display: grid;
	/* Пополам: раздел текст/фото по центру подложки, как в блоке экскурсии в каталоге. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 88px);
	align-items: center;
	padding: var(--proj-excursion-pad);
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--c-gold);
}

.project-excursion__copy > p:not(.project-section-head__eyebrow) {
	margin-top: 16px;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: rgba(0, 0, 0, 0.62);
}

.project-excursion__copy ul {
	display: grid;
	gap: 9px;
	margin-block: clamp(20px, 2vw, 32px);
}

.project-excursion__copy li {
	position: relative;
	padding-left: 22px;
	font-size: var(--fs-body);
	line-height: 1.5;
}

.project-excursion__copy li::before {
	content: '';
	position: absolute;
	left: 1px;
	top: 5px;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--c-black);
	border-bottom: 2px solid var(--c-black);
	transform: rotate(-45deg);
}

.project-excursion__copy .btn {
	background: var(--c-ink);
	color: var(--c-white);
}

.project-excursion__media {
	/* position: relative нужен для плашки-геометки поверх фото. */
	position: relative;
	align-self: stretch;
	/* Фото вплотную к краям подложки: гасим её padding сверху/справа/снизу.
	   Без min-height и overflow - иначе align-self: stretch не растягивает
	   элемент на всю высоту с учётом отрицательных margin (как в блоке в каталоге). */
	margin: calc(var(--proj-excursion-pad) * -1) calc(var(--proj-excursion-pad) * -1) calc(var(--proj-excursion-pad) * -1) 0;
}

.project-excursion__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.project-excursion__media span {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 8px 12px;
	border-radius: var(--r-pill);
	background: rgba(27, 26, 21, 0.76);
	/* Не мельче 12 px (01-Ж1). */
	font-size: 12px;
	color: var(--c-white);
}

/* Этапы: вертикальная лента - кружок с номером на линии, справа текст. */
/* Две колонки: шаги 1-3 слева, 4-6 справа, у каждой своя линия. */
.project-journey {
	--journey-dot: 52px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	column-gap: clamp(32px, 5vw, 72px);
	margin-top: var(--gap);
}

.project-journey li {
	position: relative;
	display: grid;
	grid-template-columns: var(--journey-dot) minmax(0, 1fr);
	column-gap: clamp(18px, 2.2vw, 30px);
	padding-bottom: clamp(28px, 3.4vw, 48px);
}

/* Последний шаг в каждой колонке - без отступа снизу и без линии. */
.project-journey li:nth-child(3n) {
	padding-bottom: 0;
}

/* Соединительная линия от кружка вниз к следующему. */
.project-journey li::before {
	content: '';
	position: absolute;
	left: calc(var(--journey-dot) / 2 - 1px);
	top: var(--journey-dot);
	bottom: 0;
	width: 2px;
	background: var(--showcase-line);
}

.project-journey li:nth-child(3n)::before {
	display: none;
}

.project-journey li > span {
	position: relative;
	z-index: 1;
	align-self: start;
	display: grid;
	place-items: center;
	width: var(--journey-dot);
	height: var(--journey-dot);
	border-radius: 50%;
	background: var(--c-gold);
	color: var(--c-black);
	font-family: var(--font-head);
	font-size: 18px;
	line-height: 1;
}

.project-journey li > div {
	padding-top: clamp(6px, 1vw, 12px);
}

.project-journey h3 {
	font-size: clamp(16px, 1.2vw, 20px);
	line-height: 1.35;
}

.project-journey p {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-text-muted);
}

.project-confidence__cta {
	display: flex;
	width: fit-content;
	margin: clamp(24px, 2.5vw, 40px) auto 0;
}

/* FAQ и SEO-текст */
.project-faq {
	padding-block: clamp(60px, 7vw, 132px);
	background: var(--showcase-soft);
}

.project-faq__list {
	border-top: 1px solid var(--showcase-line);
}

.project-faq details {
	border-bottom: 1px solid var(--showcase-line);
}

.project-faq summary {
	position: relative;
	padding: clamp(18px, 1.7vw, 28px) 54px clamp(18px, 1.7vw, 28px) 0;
	font-family: var(--font-head);
	font-size: clamp(14px, 1.2vw, 18px);
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.project-faq summary::-webkit-details-marker {
	display: none;
}

.project-faq summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--showcase-line);
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 22px;
	transform: translateY(-50%);
}

.project-faq details[open] summary::after {
	content: '−';
}

.project-faq details > div {
	max-width: 51.73em; /* 82ch в Inter 400 */
	padding: 0 54px clamp(20px, 2vw, 32px) 0;
}

.project-faq details p {
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--c-gray-600);
}

.project-seo {
	margin-top: clamp(34px, 4vw, 68px);
	padding: clamp(22px, 2.5vw, 40px);
	border: 1px solid var(--showcase-line);
	border-radius: var(--r-xl);
	background: var(--c-white);
}

/*
 * Высота свёрнутого текста - заголовок и строка под ним, её считает
 * project-polyus.js (--seo-collapsed): постоянные 4.8em на телефоне резали
 * заголовок в три строки пополам (аудит 2026-09-25, 02-В6). Без скрипта - 4.8em.
 */
.project-seo__body {
	position: relative;
	max-height: var(--seo-collapsed, 4.8em);
	overflow: hidden;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-gray-600);
	transition: max-height 0.45s var(--ease);
}

.project-seo__body::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.4em;
	background: linear-gradient(to bottom, transparent, var(--c-white));
}

.project-seo.is-expanded .project-seo__body {
	max-height: 800px;
}

.project-seo.is-expanded .project-seo__body::after {
	display: none;
}

.project-seo h2 {
	margin-bottom: 12px;
	font-size: var(--fs-h4);
	line-height: 1.4;
	color: var(--c-black);
}

.project-seo p + p {
	margin-top: 12px;
}

/*
 * Свой текст проекта из поля «Текст внизу страницы» (inc/seo-meta.php, фаза 3 SEO-плана):
 * длиннее общего и с подзаголовками и ссылками - оформление как у текста каталога
 * (.cat-seo в catalog-list.css). В общем тексте шаблона h3 и ссылок нет, его вид прежний.
 */
.project-seo h3 {
	margin: 20px 0 8px;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.4;
	letter-spacing: var(--ls-head);
	color: var(--c-black);
}

.project-seo a {
	color: var(--c-black);
	box-shadow: inset 0 -1px 0 var(--c-gold-deep);
}

.project-seo a:hover {
	box-shadow: inset 0 -2px 0 var(--c-ink);
}

/*
 * Раскрытый свой текст: 800px общего блока на телефоне обрезали текст на 300 слов
 * (1 016px на ширине 360, замер 29.09.2026). Запас - под текст до ~800 слов.
 */
.project-seo--own.is-expanded .project-seo__body {
	max-height: 3000px;
}

/* Раскрытый текст - не шире ~75 знаков в строке (было 181-185 на широком экране, 02-Ж4). */
.project-seo__body > * {
	max-width: 42em;
}

.project-seo__toggle {
	margin-top: 16px;
	border-bottom: 1px dashed var(--c-gray-400);
	font-size: 12px;
	color: var(--c-gray-600);
}

@media (max-width: 1199px) {
	.project-showcase__hero {
		grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.75fr);
	}

	.project-confidence__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.project-showcase__head,
	.project-showcase__hero,
	.project-plan-single,
	.finish-selector,
	.project-calculation__inner {
		grid-template-columns: 1fr;
	}

	/* Одна колонка - высоту ряда не фиксируем, фото получает квадрат ниже. */
	.finish-selector {
		grid-template-rows: auto;
	}

	/* Четыре карточки интерьера не влезают - переносим в 2 ряда. */
	.project-interiors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-showcase__lead {
		max-width: 44.16em; /* 70ch в Inter 400 */
	}

	.project-summary {
		position: static;
	}

	.project-gallery__media-actions {
		top: 10px;
		left: 10px;
		max-width: calc(100% - 20px);
	}

	.project-media-link {
		min-height: 34px;
		padding: 7px 10px;
		/* Не мельче 12 px (01-Ж1). */
		font-size: 12px;
	}

	.project-media-link svg {
		width: 17px;
		height: 17px;
	}

	/* minmax(0, ...): колонку не раздвигает кнопка во всю ширину - на 320-339 px её срезал край блока (01-В7). */
	.project-plan-adapt,
	.project-excursion__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Одна колонка: фото под текстом, вплотную слева/справа/снизу. */
	.project-excursion__media {
		margin: clamp(18px, 3vw, 30px) calc(var(--proj-excursion-pad) * -1) calc(var(--proj-excursion-pad) * -1);
	}

	/*
	 * Одна колонка: фото под текстом, вплотную слева/справа/снизу.
	 * align-self: stretch тут не даёт высоты - задаём пропорцией. Ширина - явно:
	 * в Safari блок с одной абсолютной картинкой внутри без ширины схлопывался
	 * до 24×17 px, фото интерьера на iPad и iPhone горизонтально пропадало
	 * (аудит 2026-09-25, 01-В8).
	 */
	.project-plan-adapt__media {
		align-self: start;
		width: calc(100% + var(--adapt-pad) * 2);
		margin: clamp(18px, 3vw, 28px) 0 calc(var(--adapt-pad) * -1) calc(var(--adapt-pad) * -1);
		aspect-ratio: 16 / 11;
	}

	.project-plan-adapt .btn {
		width: fit-content;
	}

	.project-plan-summary dl {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}

	.project-plan-summary__note {
		margin-top: 24px;
	}


	.project-benefits__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.project-benefit {
		min-height: 320px;
	}

	.project-benefit__number {
		margin-bottom: 90px;
	}

	/*
	 * width: 100% обязателен (владелец, 2026-09-25: «нет фото, как меняется цвет бани»).
	 * Внутри только картинка с position: absolute, и Safari считает ширину такой
	 * ячейки с aspect-ratio по содержимому - 0, а высоту от неё - тоже 0: на iPhone
	 * блок фото схлопывался целиком. Chrome растягивал ячейку сам, поэтому на
	 * компьютере проблему не было видно. Проверено в WebKit: 0x0 -> 361x361 на 393px.
	 */
	.finish-selector__visual {
		width: 100%;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.finish-selector__controls {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.finish-selector__label,
	.finish-selector__hint,
	.finish-selector__cta {
		grid-column: 1 / -1;
	}

	.finish-option {
		grid-template-columns: 38px minmax(0, 1fr);
		border-top: 0;
	}

	.finish-option__swatch {
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 767px) {
	.project-showcase__head {
		gap: 14px;
	}

	.project-showcase__lead {
		font-size: 15px;
	}

	/* Лента шагов - в одну колонку. */
	.project-journey {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
	}

	.project-journey li:nth-child(3n) {
		padding-bottom: clamp(28px, 3.4vw, 48px);
	}

	.project-journey li:nth-child(3n)::before {
		display: block;
	}

	.project-journey li:last-child {
		padding-bottom: 0;
	}

	.project-journey li:last-child::before {
		display: none;
	}

	.project-showcase__hero {
		padding-bottom: 56px;
	}

	.project-gallery__stage {
		aspect-ratio: 4 / 3;
		border-radius: 18px;
	}

	.project-gallery__stage .slider-arrow {
		display: flex;
	}

	/*
	 * Ленту миниатюр держим в общих полях: за края экрана отрицательным
	 * margin не выносим, чтобы левый отступ первой миниатюры совпадал
	 * с большим кадром и текстом.
	 */
	.project-gallery__thumbs {
		display: flex;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.project-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}

	.project-gallery__thumb {
		flex: 0 0 94px;
		scroll-snap-align: start;
	}

	/*
	 * На телефоне подписи-плашки поверх фото скрываем: на мелких кадрах они
	 * перекрывают снимок, а ракурс и так понятен. Счётчик кадров оставляем.
	 */
	.project-gallery__thumb span,
	.project-gallery__meta [data-project-gallery-label] {
		display: none;
	}

	.project-summary {
		padding: 10px;
		border-radius: 20px;
	}

	/*
	 * Плашки «Готовый проект / Поэтапная оплата / Можно адаптировать»: шрифт
	 * 12 px, лишняя плашка переносится на вторую строку. Прежде они ужимались
	 * до 8-10 px, чтобы стоять в одну строку (аудит 2026-09-25, 01-Ж1).
	 */
	.project-summary__topline {
		gap: 6px;
	}

	.project-summary__topline span {
		padding: 6px 9px;
		font-size: 12px;
		white-space: nowrap;
	}

	.project-media-popup {
		padding: 8px;
	}

	.project-media-popup__window {
		max-height: calc(100vh - 16px);
		/* dvh - высота без панелей Safari: при видимых панелях низ окна уходил под них (01-Ж5). */
		max-height: calc(100dvh - 16px);
		border-radius: 18px;
	}

	.project-media-popup__head {
		display: block;
		padding: 18px 52px 16px 18px;
	}

	.project-media-popup__head > p {
		margin-bottom: 7px;
	}

	.project-media-popup__video,
	.project-built-gallery__stage {
		height: min(68vh, 620px);
	}

	.project-built-gallery__arrow {
		width: 38px;
		height: 38px;
	}

	.project-built-gallery__arrow--prev {
		left: 9px;
	}

	.project-built-gallery__arrow--next {
		right: 9px;
	}

	.project-built-gallery__thumb {
		flex-basis: 76px;
	}

	/* 4 характеристики - сеткой 2x2, а не столбиком. */
	.project-summary__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Подписи характеристик («Габариты в осях» и т.д.) - мельче, но не мельче 12 px (01-Ж1). */
	.project-summary__spec dt {
		font-size: 12px;
	}

	/* Плашки пространств («Комната отдыха», «Парная» и т.д.) - мельче. */
	.project-summary__features li {
		font-size: 12px;
	}

	.project-benefits__grid,
	.project-plans__grid,
	.project-confidence__grid {
		grid-template-columns: 1fr;
	}

	.project-interiors__grid {
		grid-template-columns: 1fr;
	}

	/* Карточки интерьера на всю ширину - фото ниже, заголовок мельче. */
	.interior-card img {
		height: 210px;
	}

	.interior-card figcaption strong {
		font-size: 17px;
	}

	/* «Тёмное дерево и камень» - жёсткий <br> в разметке под десктоп, на мобилке при 17px помещается в одну строку. */
	.interior-card figcaption strong br {
		display: none;
	}

	.interior-card figcaption span {
		font-size: 14px;
	}

	/* Подложка «Адаптация проекта» / «При подборе интерьера» - поле уже. */
	.project-plan-adapt {
		--adapt-pad: 18px;
	}

	/*
	 * Фото в блоке «При подборе интерьера» - той же высоты, что и карточки
	 * интерьера, и вплотную ко всем четырём краям подложки (колонка одна,
	 * поэтому гасим padding подложки со всех сторон, а не только слева/справа).
	 */
	.project-plan-adapt__media {
		height: 210px;
		width: calc(100% + var(--adapt-pad) * 2);
		margin: 12px 0 calc(var(--adapt-pad) * -1) calc(var(--adapt-pad) * -1);
	}

	/* На мобилке колонки друг под другом - правое поле текста (под вторую колонку) не нужно. */
	.project-plan-adapt--media > div {
		padding-right: 0;
	}

	/*
	 * «При подборе интерьера обсуждаем» - плашки мельче и с меньшим полем:
	 * пары внутри li остаются flex-wrap, где хватает ширины - встанут рядом,
	 * где нет - перенесутся сами внутри своей строки.
	 */
	.project-plan-adapt--media > div ul,
	.project-plan-adapt--media > div li {
		gap: 6px;
	}

	.project-plan-adapt--media > div li span {
		padding: 6px 10px;
		font-size: 13px;
	}

	.project-plan-adapt .btn,
	.project-confidence__cta {
		width: 100%;
	}

	.extra-row {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/*
	 * Специфичность .project-extras--cols .extra-row__img (2 класса) выше,
	 * чем у .extra-row__img - без повторения этого селектора здесь правило
	 * не побеждало, и на телефоне держался десктопный размер 140x96.
	 */
	.project-extras--cols .extra-row__img {
		/* На всю ширину колонки, от края текста до края разделителя (владелец,
		   2026-09-25): при фиксированных 350px фото стояли уже текста и с полями
		   по бокам. Высота - от ширины, 16:10 близко к исходным кадрам 3:2. */
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	/* «Отдельная зона для отдыха и водных процедур рядом с баней» и т.п. - мельче. */
	.extra-row__text p {
		font-size: 14px;
	}

	.project-extras__footer {
		align-items: stretch;
		flex-direction: column;
	}

	.project-extras__footer .btn {
		width: 100%;
		min-height: 50px;
	}

	/* Фото выставочной бани - фиксированная высота вместо аспект-рейшо 4/3. */
	.project-excursion__media {
		height: 210px;
	}

	.project-excursion__inner {
		--proj-excursion-pad: 22px;
		border-radius: 22px;
	}


	.project-faq details > div {
		padding-right: 0;
	}

	.project-benefit {
		min-height: 260px;
	}

	.project-benefit__number {
		margin-bottom: 70px;
	}

	.project-plan-summary dl {
		grid-template-columns: 1fr;
	}

	/*
	 * «Адаптация проекта»: подзаголовок (текст под h3) мельче. Жёсткий <br>
	 * в разметке рассчитан на десктопную колонку - на телефоне убираем его,
	 * пусть строка переносится сама по узкой колонке.
	 */
	.project-plan-adapt h3 + p {
		font-size: 13px;
	}

	.project-plan-adapt h3 + p br {
		display: none;
	}

	/*
	 * «Внешний вид»: тот же случай - жёсткий <br> рассчитан на десктопную
	 * ширину, на телефоне убираем его, строка переносится сама.
	 */
	.project-finishes .project-section-head--stacked > p:not(.project-section-head__eyebrow) br {
		display: none;
	}

	/*
	 * Плашки параметров планировки («Размер парной» и т.д.) - мельче и с
	 * меньшим полем: список остаётся построчным flex-wrap (не сетка), так
	 * короткие пары («Высота потолков» + «Планировка санузла») сами встают
	 * рядом, а длинные фразы естественно занимают всю строку.
	 */
	.project-plan-adapt > ul {
		gap: 6px;
	}

	.project-plan-adapt li {
		padding: 7px 12px;
		font-size: 12px;
	}

	/* Все надзаголовки-кикеры на телефоне одного размера - 12px. */
	.project-summary__label,
	.project-plan-summary__label,
	.finish-selector__label {
		font-size: 12px;
	}

	/* Карточка «Состав проекта»: на телефоне были слишком большие отступы. */
	.project-plan-summary {
		padding: 20px;
	}

	.project-plan-summary__total {
		margin: 14px 0 12px;
	}

	.project-plan-summary__note {
		margin-top: 20px;
		padding-top: 16px;
	}

	.finish-selector__visual {
		aspect-ratio: 1 / 1;
		border-radius: 20px;
	}

	.finish-selector__controls {
		display: flex;
		padding: 20px;
		border-radius: 20px;
	}

	.finish-option {
		grid-template-columns: 42px minmax(0, 1fr);
		border-top: 1px solid var(--showcase-line);
	}

	.package-card {
		min-height: 420px;
	}

	/* «Нравится другой вариант? Покажите...» - мельче. */
	.finish-selector__hint {
		font-size: 14px;
	}

	.project-confidence__grid article {
		min-height: 230px;
	}

	.project-confidence__grid article > span {
		margin-bottom: 60px;
	}

	.project-calculation__inner {
		gap: 26px;
		padding: 22px;
		border-radius: 22px;
	}
}

@media (max-width: 420px) {
	.project-summary__topline {
		justify-content: flex-start;
	}

	.project-gallery__meta [data-project-gallery-label] {
		display: none;
	}
}

/*
 * Ссылка «Разбор комплектаций…» под таблицей: зона нажатия от 44 px на сенсорном
 * экране, строка не выросла (была 32 в две строки и 18 в одну - телефон
 * горизонтально, 01-Ж2).
 */
@media (pointer: coarse) {
	/* Кнопка «N видеообзора» на фото галереи - 44 px в высоту (была 34-38). */
	.project-media-link {
		min-height: 44px;
	}
}