/* Kusochki — Block styles
 * Каждая секция блока помечена комментом с базой шорткода.
 */

/* ─── kusochki_hero ─────────────────────────────────────────────── */

.ks-hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	padding: 120px 40px 80px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ks-hero__bgtext {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 22vw;
	color: rgba(22, 18, 43, 0.03);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	letter-spacing: -0.04em;
	z-index: 0;
}

.ks-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--ks-container);
	width: 100%;
}

.ks-hero__tag {
	display: inline-block;
	border: 1.5px solid var(--ks-red);
	background: var(--ks-bg, #FDFAF4);   /* непрозрачная плашка — поверх картинки читаемо */
	color: var(--ks-red);
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 30px;
	margin-bottom: 28px;
	animation: ks-fadeUp .7s ease both;
	position: relative;
	z-index: 5;                          /* над pc-image (1) и над словами (4) */
}

.ks-hero__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(52px, 8vw, 110px);
	line-height: .92;
	letter-spacing: -0.04em;
	color: var(--ks-dark);
	margin: 0 0 24px;
	animation: ks-fadeUp .7s ease .1s both;
}
.ks-hero__title em { color: var(--ks-red); font-style: normal; }

.ks-hero__sub {
	font-family: var(--ks-font-body);
	font-size: clamp(15px, 1.8vw, 19px);
	color: var(--ks-muted);
	max-width: 560px;
	margin: 0 auto 44px;
	line-height: 1.55;
	animation: ks-fadeUp .7s ease .2s both;
}
.ks-hero__sub strong { color: var(--ks-dark); font-weight: 600; }

.ks-hero__btns {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	animation: ks-fadeUp .7s ease .3s both;
}

/* «Наши залы» (ghost) → цветная заливка тёмно-фиолетовым (--ks-dark),
   чтобы пара кнопок «Забронировать (красная) + Наши залы (тёмная)»
   читалась как primary + secondary, а не filled + outline. */
.ks-hero__btns .ks-btn--ghost {
	background: var(--ks-dark);
	color: #fff;
	border-color: var(--ks-dark);
}
.ks-hero__btns .ks-btn--ghost:hover {
	background: #2A2347;        /* немного светлее на ховере */
	border-color: #2A2347;
	color: #fff;
	transform: translateY(-2px);
}

.ks-hero__chars {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	pointer-events: none;
	padding: 0 4vw;
	z-index: 1;
}
.ks-hero__char--left  { animation: ks-charEnterL 1s ease .5s both; }
.ks-hero__char--right { animation: ks-charEnterR 1s ease .6s both; }

.ks-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--ks-muted);
	font-family: var(--ks-font-body);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	animation: ks-fadeUp .7s ease 1.2s both;
	z-index: 2;
}
.ks-hero__scroll-line {
	width: 1px;
	height: 40px;
	background: var(--ks-muted);
	animation: ks-scrollAnim 1.4s ease-in-out infinite;
}

@keyframes ks-fadeUp     { from { transform: translateY(24px);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ks-charEnterL { from { transform: translateX(-80px); opacity: 0; } to { transform: translateX(0);  opacity: 1; } }
@keyframes ks-charEnterR { from { transform: translateX(80px);  opacity: 0; } to { transform: translateX(0);  opacity: 1; } }
@keyframes ks-scrollAnim { 0%, 100% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* Видео-фон в hero — только мобайл (default скрыт; включается в media-query). */
.ks-hero__bg-video,
.ks-hero__bg-video-overlay {
	display: none;
}

/* SVG-человечки в hero убраны (по запросу клиента — «убираем чесловесков сейчас»). */
.ks-hero__chars {
	display: none !important;
}

/* Картинка по центру (ПК) — 80% высоты hero, под текстом по z-index. На мобайле скрыта. */
.ks-hero__pc-image {
	display: none;
}
@media (min-width: 901px) {
	.ks-hero__pc-image {
		display: block;
		position: absolute;
		bottom: -32%;         /* опущена ещё ниже на ~25% — ноги уходят за край */
		left: 50%;
		transform: translateX(-50%);
		height: 130%;         /* x1.6 от прошлого размера для большего акцента */
		width: auto;
		max-width: none;      /* без ограничения по ширине */
		z-index: 2;           /* над словами (z=0) */
		opacity: 0.75;        /* прозрачность 75% — персонажи яснее видны */
		pointer-events: none;
		user-select: none;
		/* PNG уже без фона — multiply больше не нужен */
	}
	/* Текст и кнопки поверх картинки */
	.ks-hero__inner {
		position: relative;
		z-index: 3;
	}
}

/* Плавающие слова по бокам hero (только ПК) */
.ks-hero__words {
	display: none;
}
@media (min-width: 901px) {
	.ks-hero__words {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;                                /* в самый зад — под картинку */
	}
	.ks-hero__word {
		position: absolute;
		transform: translate(-50%, -50%);
		font-family: var(--ks-font-display);
		font-weight: 900;
		font-size: clamp(56px, 5.6vw, 96px);     /* x2: чтоб слова были более заметны */
		letter-spacing: -0.01em;
		text-transform: uppercase;
		white-space: nowrap;
		color: rgba(22, 18, 43, 0.55);             /* приглушённый серо-фиолетовый — фоновый «водяной знак» */
		opacity: 0;
		filter: blur(0.5px);                       /* лёгкий блюр, чтобы выглядели «вдали» */
		animation: ks-hero-word 9.6s ease-in-out infinite;
		will-change: opacity, transform;
		z-index: 0;                                /* под pc-image — слова на фоне */
	}
	/* Левые слова уезжают/въезжают слева, правые — справа (микро-параллакс) */
	.ks-hero__word--l { animation-name: ks-hero-word-l; }
	.ks-hero__word--r { animation-name: ks-hero-word-r; color: rgba(214, 31, 38, 0.45); }
	.ks-hero__word--r:nth-child(odd) { color: rgba(22, 18, 43, 0.5); }
}

/* opacity на пике снижена до ~0.22 — слова работают как атмосферный фон, не перетягивают внимание */
@keyframes ks-hero-word-l {
	0%, 100%   { opacity: 0;    transform: translate(calc(-50% - 24px), -50%); }
	18%, 28%   { opacity: 0.22; transform: translate(-50%, -50%); }
	40%        { opacity: 0;    transform: translate(calc(-50% + 24px), calc(-50% - 16px)); }
}
@keyframes ks-hero-word-r {
	0%, 100%   { opacity: 0;    transform: translate(calc(-50% + 24px), -50%); }
	18%, 28%   { opacity: 0.22; transform: translate(-50%, -50%); }
	40%        { opacity: 0;    transform: translate(calc(-50% - 24px), calc(-50% - 16px)); }
}

@media (max-width: 900px) {
	.ks-hero { padding: 120px 20px 80px; min-height: auto; }
	.ks-hero__chars { display: none; }
	.ks-hero__bgtext { font-size: 36vw; }
}

@media (max-width: 700px) {
	/* Мобильный hero: full screen, видео-фон, без лишних элементов. */
	.ks-hero {
		min-height: 100vh;
		min-height: 100dvh;          /* учитывает URL-бар Safari */
		padding: 100px 20px 80px;
		justify-content: center;
		color: #fff;
	}
	.ks-hero__bg-video {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		z-index: 0;
	}
	.ks-hero__bg-video-overlay {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(22,18,43,0.35) 0%, rgba(22,18,43,0.55) 60%, rgba(22,18,43,0.75) 100%);
		z-index: 1;
	}
	/* Контент поверх видео */
	.ks-hero__inner {
		position: relative;
		z-index: 2;
	}
	/* Скрываем: бейдж-тэг, индикатор скролла, фоновый текст, персонажей */
	.ks-hero__tag,
	.ks-hero__scroll,
	.ks-hero__bgtext,
	.ks-hero__chars {
		display: none !important;
	}
	/* Цвета текста — белые поверх тёмного видео */
	.ks-hero__title,
	.ks-hero__sub {
		color: #fff;
	}
	.ks-hero__title em { color: var(--ks-red); }
	.ks-hero__sub strong { color: #fff; }
	/* На мобайле фон видео тёмный → тёмная заливка сольётся.
	   Делаем белую заливку с тёмным текстом — чтоб контраст к красной primary. */
	.ks-hero__btns .ks-btn--ghost {
		background: #fff;
		color: var(--ks-dark);
		border-color: #fff;
	}
	.ks-hero__btns .ks-btn--ghost:hover {
		background: rgba(255,255,255,0.85);
		border-color: rgba(255,255,255,0.85);
		color: var(--ks-dark);
	}
}

/* ─── kusochki_about ────────────────────────────────────────────── */

.ks-about {
	padding: 100px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	border-top: 1px solid var(--ks-border);
}

.ks-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}
.ks-about__left,
.ks-about__right { min-width: 0; }

.ks-about__tag {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ks-red);
	margin: 0 0 16px;
}

.ks-about__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(32px, 4.5vw, 56px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ks-dark);
	margin: 0 0 32px;
}

.ks-about__text p {
	margin: 0 0 16px;
	color: #444;
	line-height: 1.75;
	font-size: 15.5px;
	font-family: var(--ks-font-body);
}
.ks-about__text strong { color: var(--ks-dark); font-weight: 600; }

.ks-about__features-row {
	width: 100%;
	margin-top: 56px;
}
.ks-about__features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.ks-about__feat {
	border: 1px solid var(--ks-border);
	border-radius: 8px;
	padding: 24px 20px;
	transition: border-color .2s var(--ks-ease), transform .2s var(--ks-ease);
	background: #fff;
}
.ks-about__feat:hover {
	border-color: var(--ks-red);
	transform: translateY(-3px);
}

.ks-about__feat-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	font-size: 22px;
}

.ks-about__feat h4 {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--ks-dark);
}

.ks-about__feat p {
	font-family: var(--ks-font-body);
	font-size: 13px;
	color: var(--ks-muted);
	line-height: 1.5;
	margin: 0;
}

.ks-about__right { position: relative; }

.ks-about__visual {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, var(--ks-dark) 0%, #2E2556 100%);
}
.ks-about__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ks-about__visual-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.35);
	font-size: 13px;
	letter-spacing: 0.05em;
}
.ks-about__visual-placeholder::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255, 255, 255, 0.015) 30px, rgba(255, 255, 255, 0.015) 60px);
}

.ks-about__stats {
	position: absolute;
	bottom: -20px;
	left: -20px;
	right: 20px;
	background: var(--ks-red);
	border-radius: 8px;
	padding: 20px 28px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	color: #fff;
	box-shadow: 0 16px 32px rgba(228, 43, 43, 0.25);
}
.ks-about__stat span { display: block; }
.ks-about__stat-num {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 28px;
	line-height: 1;
}
.ks-about__stat-label {
	font-family: var(--ks-font-body);
	font-size: 11px;
	opacity: 0.85;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 4px;
}

@media (max-width: 900px) {
	.ks-about { padding: 64px 24px; }
	.ks-about__grid { grid-template-columns: 1fr; gap: 48px; }
	.ks-about__features { grid-template-columns: repeat(2, 1fr); }
	.ks-about__stats { left: 0; right: 0; bottom: -16px; padding: 16px 20px; }
	.ks-about__stat-num { font-size: 22px; }
}
@media (max-width: 560px) {
	.ks-about__features { grid-template-columns: 1fr; }
}

/* ─── kusochki_characters ───────────────────────────────────────── */

.ks-chars {
	padding: 80px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	overflow: hidden;
	color: #fff;
}

.ks-chars__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.ks-chars__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(28px, 3.5vw, 48px);
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0;
}
.ks-chars__sub {
	color: rgba(255, 255, 255, 0.4);
	font-family: var(--ks-font-body);
	font-size: 14px;
	margin: 10px 0 0;
}

.ks-chars__nav { display: flex; gap: 8px; flex-shrink: 0; }
.ks-chars__nav-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s var(--ks-ease), border-color .2s var(--ks-ease);
}
.ks-chars__nav-btn:hover { background: var(--ks-red); border-color: var(--ks-red); }
.ks-chars__nav-btn:disabled { opacity: .25; cursor: default; pointer-events: none; }

.ks-chars__viewport { overflow: hidden; }

.ks-chars__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ks-chars__card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 32px 28px;
	text-align: center;
	transition: border-color .3s var(--ks-ease), transform .3s var(--ks-ease);
	position: relative;
	overflow: hidden;
}
.ks-chars__card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--char-color, #E42B2B) 50%, transparent);
}

.ks-chars__media {
	height: 420px;       /* было 180 → 280 → 420 (×2.3) — по запросу клиента */
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ks-chars__media img,
.ks-chars__media video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.ks-chars__media-placeholder {
	width: 140px;
	height: 180px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed rgba(255, 255, 255, 0.08);
}

.ks-chars__role {
	font-family: var(--ks-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--char-color, var(--ks-red));
	margin-bottom: 8px;
}

.ks-chars__name {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 20px;
	color: #fff;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}

.ks-chars__desc {
	font-family: var(--ks-font-body);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.6;
	margin: 0;
}

.ks-chars__dots {
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-top: 32px;
}
.ks-chars__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	cursor: pointer;
	transition: background .2s var(--ks-ease), transform .2s var(--ks-ease);
	border: none;
	padding: 0;
}
.ks-chars__dot.is-active {
	background: var(--ks-red);
	transform: scale(1.3);
}

@media (max-width: 900px) {
	.ks-chars { padding: 64px 24px; }
	.ks-chars__header { flex-direction: column; align-items: flex-start; }
	.ks-chars__grid { grid-template-columns: 1fr; }
}

/* ─── kusochki_halls_grid ───────────────────────────────────────── */

.ks-halls {
	padding: 120px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
}

.ks-halls__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 56px;
}

.ks-halls__tag {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ks-red);
	margin: 0 0 16px;
}
.ks-halls__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(32px, 4.5vw, 56px);
	letter-spacing: -0.03em;
	color: var(--ks-dark);
	margin: 0;
	line-height: 1;
}
.ks-halls__sub {
	max-width: 300px;
	text-align: right;
	color: var(--ks-muted);
	font-family: var(--ks-font-body);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.ks-halls__grid {
	display: grid;
	gap: 24px;
}
.ks-halls__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ks-halls__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }

.ks-halls__card {
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	aspect-ratio: 3/4;
	transition: transform .3s var(--ks-ease), box-shadow .3s var(--ks-ease);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ks-halls__card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px rgba(22, 18, 43, 0.18);
}
.ks-halls__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 60%);
	z-index: 1;
}

.ks-halls__num {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.1em;
}

.ks-halls__card-inner {
	position: relative;
	z-index: 2;
	padding: 28px 24px;
}

.ks-halls__card-tag {
	font-family: var(--ks-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 8px;
}

.ks-halls__card-name {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 22px;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 10px;
	letter-spacing: -0.02em;
}

.ks-halls__card-desc {
	font-family: var(--ks-font-body);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.5;
	margin: 0 0 16px;
}

.ks-halls__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: transparent;
	border: none;
	padding: 0;
	transition: color .2s var(--ks-ease);
}
.ks-halls__card:hover .ks-halls__more { color: #fff; }
.ks-halls__card:hover .ks-halls__arrow { transform: translateX(4px); }
.ks-halls__arrow { transition: transform .2s var(--ks-ease); display: inline-block; }

@media (max-width: 900px) {
	.ks-halls { padding: 64px 24px; }
	.ks-halls__header { flex-direction: column; align-items: flex-start; }
	.ks-halls__sub { text-align: left; max-width: none; }
	.ks-halls__grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.ks-halls__grid--cols-3 .ks-halls__card:last-child { grid-column: span 2; aspect-ratio: 16/10; }
	.ks-halls__grid--cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.ks-halls__grid--cols-3 { grid-template-columns: 1fr; }
	.ks-halls__grid--cols-3 .ks-halls__card:last-child { grid-column: auto; aspect-ratio: 3/4; }
}

/* ─── popup (общий — для halls и news) ───────────────────────────── */

.ks-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ks-popup.is-open { display: flex; }
.ks-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 12, 31, 0.75);
	backdrop-filter: blur(6px);
	cursor: pointer;
	animation: ks-fadeIn .3s ease;
}
.ks-popup__box {
	position: relative;
	background: var(--ks-bg);
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	animation: ks-popupIn .3s ease;
}
.ks-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(22, 18, 43, 0.85);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	transition: background .2s var(--ks-ease);
}
.ks-popup__close:hover { background: var(--ks-red); }

.ks-popup__slider {
	position: relative;
	aspect-ratio: 16/8;
	overflow: hidden;
	flex-shrink: 0;
}
.ks-popup__slide {
	position: absolute;
	inset: 0;
	transition: transform .4s var(--ks-ease), opacity .4s;
	opacity: 0;
}
.ks-popup__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;     /* центрирование по обеим осям */
	display: block;
}
/* Активный слайд тоже absolute (НЕ relative): inset:0 заставляет его
   занимать всю площадь слайдера → img с height:100% получает реальную
   высоту → object-fit cover работает. С relative inset не действует
   и img схлопывается до natural size. */
.ks-popup__slide.is-active {
	position: absolute;
	z-index: 2;
	transform: none;
	opacity: 1;
}
.ks-popup__slide.is-prev { transform: translateX(-100%); opacity: 0; z-index: 1; }
.ks-popup__slide.is-next { transform: translateX(100%);  opacity: 0; z-index: 1; }

.ks-popup__slide-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: background .2s var(--ks-ease);
}
.ks-popup__slide-nav:hover { background: rgba(255, 255, 255, 0.3); }
.ks-popup__slide-nav--prev { left: 16px; }
.ks-popup__slide-nav--next { right: 16px; }

.ks-popup__dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
}
.ks-popup__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background .2s var(--ks-ease), transform .2s var(--ks-ease);
}
.ks-popup__dot.is-active { background: #fff; transform: scale(1.3); }

.ks-popup__body {
	padding: 36px 44px;
	overflow-y: auto;
}

.ks-popup__badge {
	display: inline-block;
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	padding: 4px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}
.ks-popup__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(28px, 3vw, 42px);
	letter-spacing: -0.03em;
	color: var(--ks-dark);
	margin: 0 0 16px;
	line-height: 1.05;
}
.ks-popup__text {
	font-family: var(--ks-font-body);
	font-size: 15px;
	color: #555;
	line-height: 1.75;
	margin: 0 0 28px;
}
.ks-popup__meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 24px;
	background: #F5F1EB;
	border-radius: 8px;
	margin-bottom: 28px;
}
.ks-popup__meta-item span {
	display: block;
	font-family: var(--ks-font-body);
	font-size: 11px;
	color: var(--ks-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}
.ks-popup__meta-item strong {
	display: block;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--ks-dark);
}
.ks-popup__features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 8px;
}
.ks-popup__features li {
	font-family: var(--ks-font-body);
	font-size: 14px;
	color: #555;
	padding-left: 24px;
	position: relative;
	line-height: 1.5;
}
.ks-popup__features li::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ks-red);
}

@keyframes ks-fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ks-popupIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
	.ks-popup__body { padding: 24px 20px; }
	.ks-popup__meta { grid-template-columns: 1fr 1fr; }
}

/* ─── kusochki_food ─────────────────────────────────────────────── */

.ks-food {
	padding: 100px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	color: #fff;
}

.ks-food__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 52px;
	flex-wrap: wrap;
}
.ks-food__header > div { min-width: 0; flex: 1 1 auto; }
.ks-food__header > .ks-btn { flex-shrink: 0; }

.ks-food__tag {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 16px;
}
.ks-food__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(28px, 3.5vw, 48px);
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0;
	line-height: 1;
}

.ks-food__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 52px;
}

.ks-food__card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color .25s var(--ks-ease), transform .25s var(--ks-ease);
}
.ks-food__card:hover {
	border-color: rgba(228, 43, 43, 0.4);
	transform: translateY(-4px);
}

.ks-food__img {
	width: 100%;
	aspect-ratio: 4/3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 46px;
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}
.ks-food__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-family: var(--ks-font-body);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgba(228, 43, 43, 0.88);
	color: #fff;
	padding: 3px 10px;
	border-radius: 20px;
}

.ks-food__body { padding: 16px 18px; }
.ks-food__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.ks-food__name {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	letter-spacing: -0.01em;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.ks-food__price {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 14px;
	color: #fff;          /* НЕ красная — белая (карточки на тёмном фоне) */
	white-space: nowrap;
	flex-shrink: 0;
}
.ks-food__price .amount,
.ks-food__price ins {
	color: inherit;
	background: none;
	text-decoration: none;
}
.ks-food__price del { display: none; }   /* WC sale-price старое значение прячем */
.ks-food__desc {
	font-family: var(--ks-font-body);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.55;
}

.ks-food__cock-strip {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 44px;
}
.ks-food__cock-title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(18px, 2.2vw, 28px);
	color: #fff;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
	line-height: 1.05;
}
.ks-food__cock-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.ks-food__cock-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 20px 14px;
	text-align: center;
	transition: border-color .25s var(--ks-ease), background .25s var(--ks-ease);
}
.ks-food__cock-card:hover {
	border-color: rgba(228, 43, 43, 0.4);
	background: rgba(228, 43, 43, 0.05);
}
.ks-food__cock-img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 10px;
	background-size: cover;
	background-position: center;
}
.ks-food__cock-name {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	margin-bottom: 6px;
	letter-spacing: -0.01em;
}
.ks-food__cock-desc {
	font-family: var(--ks-font-body);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.ks-food { padding: 64px 24px; }
	.ks-food__header { flex-direction: column; align-items: flex-start; gap: 16px; }
	.ks-food__grid { grid-template-columns: 1fr 1fr; }
	.ks-food__cock-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.ks-food__grid { grid-template-columns: 1fr; }
}

/* ─── kusochki_news ─────────────────────────────────────────────── */

.ks-news {
	padding: 100px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	/* border-top убрана — на отдельной странице /novosti/ давала лишнюю
	   видимую полосу сверху. На главной разделение блоков происходит за счёт
	   контрастных background-color у соседних секций. */
}

.ks-news__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 48px;
}

.ks-news__tag {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ks-red);
	margin: 0 0 16px;
}
.ks-news__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(32px, 4.5vw, 56px);
	letter-spacing: -0.03em;
	color: var(--ks-dark);
	margin: 0;
	line-height: 1;
}

.ks-btn--sm {
	padding: 12px 24px;
	font-size: 11px;
}

.ks-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ks-news__card {
	border: 1px solid var(--ks-border);
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	transition: transform .25s var(--ks-ease), border-color .25s var(--ks-ease), box-shadow .25s var(--ks-ease);
}
.ks-news__card:hover {
	transform: translateY(-6px);
	border-color: var(--ks-red);
	box-shadow: 0 16px 40px rgba(228, 43, 43, 0.12);
}

.ks-news__img {
	width: 100%;
	aspect-ratio: 3/4;       /* по запросу клиента: вертикальные фото 3:4, ПК и мобайл */
	background: var(--ks-dark);
	background-size: cover;
	background-position: center;
	position: relative;
}

/* ─── News featured layout (для страницы «Новости»: 1 большая + 4/2 малых) ─ */
.ks-news__featured {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}
.ks-news__featured-main { display: flex; flex-direction: column; }
.ks-news__featured-main .ks-news__card {
	height: 100%;
}
/* Большая карточка — фото шире (16:10), название крупнее */
.ks-news__card--large .ks-news__img {
	aspect-ratio: 16/10;
}
.ks-news__card--large .ks-news__name {
	font-size: clamp( 22px, 2vw, 30px );
}
.ks-news__card--large .ks-news__body {
	padding: 28px;
}
/* Контейнер малых карточек справа от featured */
.ks-news__featured-side {
	display: grid;
	gap: 16px;
}
.ks-news__featured-side--4 { grid-template-columns: 1fr 1fr; }
.ks-news__featured-side--2 { grid-template-columns: 1fr; }
/* Малая карточка — фото компактнее, без excerpt'а */
.ks-news__card--small .ks-news__img {
	aspect-ratio: 4/3;
}
.ks-news__card--small .ks-news__body {
	padding: 14px 16px;
}
.ks-news__card--small .ks-news__name {
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 0;
}
.ks-news__card--small .ks-news__footer { display: none; }    /* в малой только название + meta */

@media (max-width: 900px) {
	.ks-news__featured { grid-template-columns: 1fr; gap: 16px; }
	.ks-news__featured-side--4 { grid-template-columns: 1fr 1fr; }
	.ks-news__card--large .ks-news__name { font-size: 22px; }
	.ks-news__card--large .ks-news__body { padding: 20px; }
}
@media (max-width: 560px) {
	.ks-news__featured-side--4 { grid-template-columns: 1fr; }
}
.ks-news__img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 60%, rgba(228, 43, 43, 0.3));
}

.ks-news__body { padding: 20px; }

.ks-news__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.ks-news__cat {
	font-family: var(--ks-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: #FEF0EF;
	color: var(--ks-red);
	padding: 3px 10px;
	border-radius: 20px;
}
.ks-news__date {
	font-family: var(--ks-font-body);
	font-size: 12px;
	color: var(--ks-muted);
}

.ks-news__name {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	color: var(--ks-dark);
}
.ks-news__desc {
	font-family: var(--ks-font-body);
	font-size: 13px;
	color: var(--ks-muted);
	line-height: 1.6;
	margin: 0;
}

.ks-news__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ks-border);
	gap: 12px;
}
.ks-news__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ks-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ks-red);
	text-transform: uppercase;
}
.ks-news__book {
	background: var(--ks-red);
	color: #fff;
	border: none;
	cursor: pointer;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 4px;
	transition: background .2s var(--ks-ease), transform .2s var(--ks-ease);
	flex-shrink: 0;
}
.ks-news__book:hover { background: var(--ks-red-h); transform: translateY(-1px); }

.ks-news__cta {
	margin-top: 24px;
	padding: 20px 24px;
	background: #F5F1EB;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.ks-news__cta p {
	font-family: var(--ks-font-body);
	font-size: 13px;
	color: var(--ks-muted);
	max-width: 280px;
	line-height: 1.5;
	margin: 0;
}

.ks-popup__hero {
	width: 100%;
	aspect-ratio: 16/7;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.ks-news { padding: 64px 24px; }
	.ks-news__header { flex-direction: column; align-items: flex-start; }
	.ks-news__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.ks-news__grid { grid-template-columns: 1fr; }
}

/* ─── kusochki_gallery ──────────────────────────────────────────── */

.ks-gallery {
	padding: 80px 40px 120px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
}

.ks-gallery__header { margin-bottom: 32px; }
.ks-gallery__tag {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ks-red);
	margin: 0 0 16px;
}
.ks-gallery__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(32px, 4.5vw, 56px);
	letter-spacing: -0.03em;
	color: var(--ks-dark);
	margin: 0 0 24px;
	line-height: 1;
}

.ks-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.ks-gallery__filter {
	font-family: var(--ks-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1.5px solid var(--ks-border);
	background: transparent;
	color: var(--ks-dark);
	padding: 8px 18px;
	border-radius: 30px;
	cursor: pointer;
	transition: background .2s var(--ks-ease), color .2s var(--ks-ease), border-color .2s var(--ks-ease);
}
.ks-gallery__filter:hover,
.ks-gallery__filter.is-active {
	background: var(--ks-dark);
	color: #fff;
	border-color: var(--ks-dark);
}

.ks-gallery__grid {
	display: grid;
	gap: 12px;
	margin-top: 32px;
}
.ks-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.ks-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ks-gallery__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }

.ks-gallery__item {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1;
	background: var(--ks-dark);
	transition: transform .25s var(--ks-ease), opacity .25s var(--ks-ease);
}
/* Цвет плитки по категории (используется как placeholder, пока нет файлов) */
.ks-gallery__item[data-categories~="prison"]  { background: var(--ks-zone-prison); }
.ks-gallery__item[data-categories~="apt"]     { background: var(--ks-zone-apt); }
.ks-gallery__item[data-categories~="psych"]   { background: var(--ks-zone-psych); }
.ks-gallery__item[data-categories~="theater"] { background: var(--ks-zone-theater); }
.ks-gallery__item[data-categories~="train"]   { background: var(--ks-zone-train); }
.ks-gallery__item[data-categories~="fishing"] { background: var(--ks-zone-fishing); }
.ks-gallery__item--wide { grid-column: span 2; aspect-ratio: 2/1; }
.ks-gallery__item:hover { transform: scale(1.02); }
.ks-gallery__item.is-hidden { display: none; }

.ks-gallery__item img,
.ks-gallery__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ks-gallery__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s var(--ks-ease);
	z-index: 2;
}
.ks-gallery__item:hover .ks-gallery__overlay { background: rgba(0, 0, 0, 0.35); }
.ks-gallery__zoom {
	opacity: 0;
	color: #fff;
	transform: scale(.7);
	transition: opacity .2s var(--ks-ease), transform .2s var(--ks-ease);
}
.ks-gallery__item:hover .ks-gallery__zoom { opacity: 1; transform: scale(1); }

.ks-gallery__type-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ks-gallery__label {
	position: absolute;
	bottom: 8px;
	left: 10px;
	z-index: 2;
	font-family: var(--ks-font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/* Lightbox */
.ks-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(14, 12, 31, 0.92);
	backdrop-filter: blur(8px);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.ks-gallery__lightbox.is-open { display: flex; }
.ks-gallery__lb-stage {
	max-width: 90vw;
	max-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ks-gallery__lb-img,
.ks-gallery__lb-video {
	max-width: 90vw;
	max-height: 80vh;
	border-radius: 8px;
	display: none;
}
.ks-gallery__lb-img.is-active,
.ks-gallery__lb-video.is-active { display: block; }

.ks-gallery__lb-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	transition: background .2s var(--ks-ease);
}
.ks-gallery__lb-close:hover { background: var(--ks-red); }

.ks-gallery__lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	transition: background .2s var(--ks-ease);
}
.ks-gallery__lb-nav:hover { background: rgba(255, 255, 255, 0.2); }
.ks-gallery__lb-nav--prev { left: 24px; }
.ks-gallery__lb-nav--next { right: 24px; }

.ks-gallery__lb-caption {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--ks-font-body);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
	max-width: 80%;
}

@media (max-width: 900px) {
	.ks-gallery { padding: 64px 24px 96px; }
	.ks-gallery__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.ks-gallery__grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.ks-gallery__item--wide { grid-column: span 2; aspect-ratio: 2/1; }
}
@media (max-width: 560px) {
	.ks-gallery__grid--cols-4,
	.ks-gallery__grid--cols-3 { grid-template-columns: 1fr; }
	.ks-gallery__item--wide { grid-column: auto; aspect-ratio: 1; }
	.ks-gallery__lb-nav--prev { left: 8px; }
	.ks-gallery__lb-nav--next { right: 8px; }
}

/* ─── kusochki_menu_pdf_buttons ─────────────────────────────────── */

.ks-pdf { margin: 24px 0; }
.ks-pdf--center { text-align: center; }
.ks-pdf--right  { text-align: right; }
.ks-pdf__title {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: -0.01em;
	color: var(--ks-dark);
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.ks-pdf__buttons {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: inherit;
}
.ks-pdf--center .ks-pdf__buttons { justify-content: center; }
.ks-pdf--right  .ks-pdf__buttons { justify-content: flex-end; }
.ks-pdf__buttons .ks-btn svg {
	flex-shrink: 0;
}

/* ─── kusochki_floating_switcher (v3-2) ─────────────────────────── */

.ks-rs {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 150;
	display: flex;
	align-items: center;
	gap: 2px;
	background: rgba(22, 18, 43, 0.92);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50px;
	padding: 5px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
	cursor: pointer;
	overflow: hidden;
	opacity: 0;
	transform: translateY(40px) scale(0.8);
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1),
	            transform .5s cubic-bezier(.16, 1, .3, 1),
	            width .4s cubic-bezier(.16, 1, .3, 1),
	            padding .4s cubic-bezier(.16, 1, .3, 1),
	            border-radius .4s cubic-bezier(.16, 1, .3, 1);
}
.ks-rs.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.ks-rs[data-state="collapsed"] {
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: 50%;
	justify-content: center;
}
.ks-rs[data-state="collapsed"] .ks-rs__item,
.ks-rs[data-state="collapsed"] .ks-rs__sep {
	opacity: 0;
	width: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity .2s, width .3s, padding .3s;
}
.ks-rs[data-state="expanded"] .ks-rs__collapsed-icon { display: none; }
/* Свёрнутый icon — position:absolute поверх всего, потому что во flex-layout
   родителя остаются «нулевой ширины» item'ы со своими gap'ами (2px×3=6px),
   которые сдвигают центрирование на ~3px влево.
   absolute + inset:0 → 64×64 точно по середине пилюли, без flex-влияния. */
.ks-rs[data-state="collapsed"] .ks-rs__collapsed-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
}
.ks-rs__collapsed-icon { display: none; }
.ks-rs__letter {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 22px;
	color: #fff;
	z-index: 2;
	line-height: 1;
}
.ks-rs__circle-text {
	position: absolute;
	inset: 0;
	animation: ks-rs-spin 20s linear infinite;
}
@keyframes ks-rs-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ks-rs[data-state="expanded"] .ks-rs__item,
.ks-rs[data-state="expanded"] .ks-rs__sep {
	opacity: 1;
	transition: opacity .3s .15s, width .3s, padding .3s;
}

.ks-rs__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 40px;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	text-decoration: none;
	transition: background .2s var(--ks-ease), color .2s var(--ks-ease);
	white-space: nowrap;
}
.ks-rs__item--on {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.ks-rs__item:not(.ks-rs__item--on):hover {
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .75);
}
.ks-rs__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	flex-shrink: 0;
}
.ks-rs__item--on .ks-rs__dot {
	background: #4CAF50;
	box-shadow: 0 0 8px rgba(76, 175, 80, .7);
}
.ks-rs__sep {
	width: 1px;
	height: 22px;
	background: rgba(255, 255, 255, .1);
	flex-shrink: 0;
}
.ks-rs__sub {
	display: block;
	font-size: 9px;
	font-weight: 400;
	opacity: .45;
	margin-top: 1px;
	font-family: var(--ks-font-body);
	letter-spacing: .04em;
}

@media (max-width: 600px) {
	.ks-rs { bottom: 16px; right: 16px; }
}

/* ─── kusochki_contacts ─────────────────────────────────────────── */

.ks-contacts {
	color: #fff;
	padding: 100px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
}

.ks-contacts__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: stretch;
}
.ks-contacts__left,
.ks-contacts__right { display: flex; flex-direction: column; min-width: 0; }

.ks-contacts__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(32px, 4vw, 52px);
	line-height: .95;
	letter-spacing: -0.03em;
	margin: 0 0 40px;
	color: #fff;
}
.ks-contacts__title em {
	color: var(--ks-red);
	font-style: normal;
}

.ks-contacts__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ks-contacts__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.ks-contacts__icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 18px;        /* эмодзи 📍📞🕐✉️ — v3-2 стр. 488–493 */
	line-height: 1;
}

.ks-contacts__label {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 4px;
}

.ks-contacts__item p,
.ks-contacts__item a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-family: var(--ks-font-body);
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 4px;
	display: block;
}
.ks-contacts__item a:hover { color: var(--ks-red); }

.ks-contacts__sublabel {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ks-contacts__socials {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.ks-contacts__social {
	/* Источник v3-2 стр. 550–557 (.social-btn). 16px, без своего font-family — Golos Text по дефолту, без bold. */
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	font-size: 16px;
	transition: background .2s var(--ks-ease), color .2s var(--ks-ease), border-color .2s var(--ks-ease);
}
.ks-contacts__social:hover {
	background: var(--ks-red);
	color: #fff;
	border-color: var(--ks-red);
}

.ks-contacts__cta {
	display: flex;
	gap: 12px;
	margin-top: 44px;
	flex-wrap: wrap;
}
/* Ghost-вариант для тёмного фона (например в блоке контактов) — белая обводка */
.ks-btn--ghost-light {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}
.ks-btn--ghost-light:hover {
	background: #fff;
	color: var(--ks-dark);
	border-color: #fff;
}

.ks-contacts__map {
	/* Источник v3-2 стр. 504–511 (.map-placeholder). min-height 200, не 280. */
	width: 100%;
	flex: 1;
	min-height: 200px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.ks-contacts__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ks-contacts__map--placeholder {
	/* Источник v3-2 стр. 504–511. color rgba(255,255,255,.2), без padding. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.2);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ─── Project-cards (3 карточки локаций под контактами) ──────
   Источник v3-2 строки 514–548. */
.ks-contacts__locations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}
.ks-contacts__location {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 20px 24px;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color .25s var(--ks-ease), background .25s var(--ks-ease);
}
.ks-contacts__location:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
}
.ks-contacts__location--active {
	border-color: var(--ks-red);
	background: rgba(228, 43, 43, 0.06);
}
.ks-contacts__location-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--ks-red);
	color: #fff;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: 20px;
	text-transform: uppercase;
}
.ks-contacts__location-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	margin-bottom: 8px;
}
.ks-contacts__location-name {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 17px;
	color: #fff;
	margin-bottom: 5px;
}
.ks-contacts__location-addr {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0;
}
.ks-contacts__location-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 8px 16px;
	border-radius: 6px;
	transition: color .2s var(--ks-ease), border-color .2s var(--ks-ease);
}
.ks-contacts__location-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
	.ks-contacts { padding: 64px 24px; }
	.ks-contacts__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.ks-contacts__title { margin-bottom: 32px; }
	.ks-contacts__locations { grid-template-columns: 1fr; gap: 12px; }
}

/* ─── Кастомный футер ────────────────────────────────────────
   Источник v3-2 строки 904–913. Перебивает дефолтный футер темы Norebro
   через kusochki-extra-theme/footer.php. */
footer.ks-footer {
	background: #0E0C1F;
	color: rgba(255, 255, 255, 0.35);
	padding: 22px 40px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	font-size: 12px;
	letter-spacing: 0.03em;
	font-family: var(--ks-font-body);
}
.ks-footer__left {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.ks-footer__center {
	text-align: center;
	opacity: .55;
	font-size: 11px;
}
.ks-footer__right { text-align: right; }
.ks-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--ks-ease);
}
.ks-footer a:hover { color: rgba(255, 255, 255, 0.7); }
.ks-footer__right a { opacity: .55; }

@media (max-width: 900px) {
	footer.ks-footer {
		grid-template-columns: 1fr;
		gap: 8px;
		text-align: center;
	}
	.ks-footer__left { justify-content: center; }
	.ks-footer__right { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile rework v1.4.0 — переплетающиеся правки:
   1. ks-chars: track-based infinite carousel (3 desktop, 1 mobile, 5s autoplay)
   2. ks-halls: mobile scroll-snap carousel (1 + 1/4 peek)
   3. ks-news: mobile scroll-snap carousel (1 per screen)
   4. ks-gallery: mobile column-masonry (2 col, 4px gap)
   5. ks-popup--side: десктоп-side-panel из Тамады, мобайл-bottom-sheet
   6. Все мобильные паддинги по бокам /2 (24 → 12)
   ═══════════════════════════════════════════════════════════════════ */

/* ──── 1. CHARACTERS CAROUSEL ──────────────────────────────────── */
.ks-chars__viewport {
	overflow: hidden;
	margin: 0 -2px; /* небольшой отступ под shadow карточек при hover */
	padding: 4px 2px; /* пространство для hover translateY */
}
.ks-chars__track {
	display: flex;
	gap: 28px;
	will-change: transform;
	/* touch-action: pan-y → браузер берёт только vertical scroll,
	   horizontal-жесты доходят до JS-pan-handler'а без конфликтов. */
	touch-action: pan-y;
	/* Запрещаем выделение — пользователь свайпает, а не лонг-press'ит */
	-webkit-user-select: none;
	user-select: none;
	/* Картинки внутри не должны быть draggable (это ломает touch на iOS) */
}
.ks-chars__track img,
.ks-chars__track video {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	pointer-events: none;
}
.ks-chars__track > .ks-chars__card {
	flex: 0 0 calc((100% - 56px) / 3); /* 3 карточки = (100% - 2*gap) / 3 */
	min-width: 0;
}
@media (max-width: 900px) {
	.ks-chars__track { gap: 16px; }
	.ks-chars__track > .ks-chars__card {
		flex: 0 0 100%;
	}
}

/* ──── 2. HALLS — mobile carousel 1 + 1/4 peek (default) ─────── */
@media (max-width: 700px) {
	.ks-halls__grid--mobile-carousel {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding: 4px 12px;
		margin: 0 -12px;
		scroll-padding-left: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ks-halls__grid--mobile-carousel::-webkit-scrollbar { display: none; }
	.ks-halls__grid--mobile-carousel .ks-halls__card {
		flex: 0 0 78%;       /* 78% видно + 22% peek следующей карточки */
		scroll-snap-align: start;
		aspect-ratio: 3/4 !important;
	}
	/* перебиваем существующее правило для 3-колоночной сетки на мобайле */
	.ks-halls__grid--cols-3.ks-halls__grid--mobile-carousel .ks-halls__card:last-child {
		grid-column: auto !important;
		aspect-ratio: 3/4 !important;
		flex: 0 0 78%;
	}

	/* ──── HALLS — mobile grid (для страницы «Залы»: карточки в столбик) ──── */
	.ks-halls__grid--mobile-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 14px;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin: 0;
	}
	.ks-halls__grid--mobile-grid .ks-halls__card {
		aspect-ratio: 16/10 !important;     /* шире когда одна на ряд */
		flex: none !important;
		scroll-snap-align: none !important;
	}
}

/* ──── 3. NEWS — mobile carousel 1 per screen ──────────────────── */
@media (max-width: 700px) {
	.ks-news__grid {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding: 4px 12px;
		margin: 0 -12px;
		scroll-padding-left: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ks-news__grid::-webkit-scrollbar { display: none; }
	.ks-news__card {
		flex: 0 0 calc(100% - 24px); /* почти на весь экран, маленький peek */
		scroll-snap-align: center;
	}
}

/* ──── 4. GALLERY — mobile masonry (2 столбца, JS-распределение) ──
   CSS columns не справляется когда фото сильно разной высоты — последний
   столбец оказывается почти пустым. Поэтому на мобайле JS-функция
   initGalleryMasonry оборачивает items в две колонки .ks-gallery__col
   и распределяет shortest-first. Класс .ks-gallery__grid--masonry
   ставится JS'ом когда активен.
   Зазор: 2px между колонками И между рядами. */
@media (max-width: 700px) {
	.ks-gallery__grid--masonry {
		display: flex !important;
		flex-direction: row;
		grid-template-columns: none !important;
		gap: 0 !important;                 /* gap не используем — iOS<14.5 не понимает на flex */
		columns: auto !important;
		column-gap: normal !important;
	}
	.ks-gallery__col {
		flex: 1 1 0;
		min-width: 0;
		display: block;                    /* block + margin между items */
	}
	/* Между двумя колонками — 2px через padding-right на первой, padding-left на второй */
	.ks-gallery__col:first-child  { padding-right: 1px; }
	.ks-gallery__col:last-child   { padding-left: 1px; }
	.ks-gallery__grid--masonry .ks-gallery__item,
	.ks-gallery__grid--masonry .ks-gallery__item--wide {
		display: block !important;
		width: 100% !important;
		margin: 0 0 2px !important;       /* margin-bottom = вертикальный gap, работает везде */
		aspect-ratio: auto !important;
		grid-column: auto !important;
		break-inside: auto;
		border-radius: 6px;
		overflow: hidden;
	}
	/* Последний item в каждой колонке без margin снизу — чтобы низ обоих колонок ровный */
	.ks-gallery__grid--masonry .ks-gallery__item:last-child,
	.ks-gallery__grid--masonry .ks-gallery__item--wide:last-child {
		margin-bottom: 0 !important;
	}
	.ks-gallery__grid--masonry .ks-gallery__item img,
	.ks-gallery__grid--masonry .ks-gallery__item video {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		margin: 0;
		vertical-align: top;
	}
	/* Фильтр: .is-hidden гарантированно прячет даже при display:block!important выше */
	.ks-gallery__grid--masonry .ks-gallery__item.is-hidden,
	.ks-gallery__grid--masonry .ks-gallery__item--wide.is-hidden {
		display: none !important;
	}
}

/* ──── 5. POPUP --side: ТОЛЬКО bottom-sheet на мобайле ─────────
   На десктопе модификатор --side игнорируется — попап рендерится
   как обычный centered-modal через базовые .ks-popup правила
   (см. строки 625+: max-width 900, max-height 90vh, slider 16:8).
   Это поведение из источника extra-kusochki-v3-2.html стр. 564–590. */
@media (max-width: 768px) {
	.ks-popup--side {
		align-items: flex-end;
		justify-content: center;
		/* Передвигаем верх popup-контейнера ниже status-bar/нотча.
		   Это важно: padding-top на fixed-контейнере с align-items:flex-end
		   на iOS Safari работает нестабильно — поэтому используем top: вместо
		   padding-top:. Т.к. .ks-popup имеет inset:0, override только top.
		   60px = чтобы было ОЧЕВИДНО что это попап (видно тёмный оверлей сверху). */
		top: calc(env(safe-area-inset-top, 0px) + 60px);
		padding-top: 0;
	}
	.ks-popup--side .ks-popup__box {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		box-shadow: 0 -6px 32px rgba(0,0,0,.4);
		transform: translateY(100%);
	}
	.ks-popup--side.is-open .ks-popup__box {
		transform: translateY(0);
	}
	/* Backdrop оверлей — позиционируется относительно .ks-popup, а оно
	   теперь начинается с top:60px. Чтобы dark-overlay было видно и СВЕРХУ
	   тоже (тот самый воздух «понятно что это попап»), оверлей делаем fixed
	   на полный экран. */
	.ks-popup--side .ks-popup__overlay {
		position: fixed;
		inset: 0;
	}
	/* Box и слайдер — flex column, hero/slider занимает верх, body скроллится */
	.ks-popup--side .ks-popup__box {
		display: flex;
		flex-direction: column;
	}
	.ks-popup--side .ks-popup__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		min-height: 0;
	}
	/* Фото сверху — минимум квадрат (1:1), не letterbox-полоска. */
	.ks-popup--side .ks-popup__slider,
	.ks-popup--side .ks-popup__hero {
		aspect-ratio: 1 / 1;
		height: auto;
		max-height: none;
		width: 100%;
		flex-shrink: 0;
	}
	/* Все слайды position:absolute, активный поверх по z-index. Без этого
	   active-слайд становится position:relative из базового CSS, и img с
	   height:100% схлопывается до natural size фото. */
	.ks-popup--side .ks-popup__slide {
		position: absolute;
		inset: 0;
	}
	.ks-popup--side .ks-popup__slide.is-active {
		position: absolute;
		z-index: 2;
		opacity: 1;
		transform: none;
	}
	.ks-popup--side .ks-popup__slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		max-height: none;
		display: block;
	}
	/* Кнопка закрытия — белый круг 44×44 с тёмной X-иконкой и сильной тенью,
	   z-index 100 чтобы перебить slide-nav кнопки. */
	.ks-popup--side .ks-popup__close {
		top: 12px;
		right: 12px;
		width: 44px;
		height: 44px;
		background: #fff;
		color: var(--ks-dark);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05);
		z-index: 100;
		font-size: 22px;
		font-weight: 700;
	}
	.ks-popup--side .ks-popup__close:hover,
	.ks-popup--side .ks-popup__close:active {
		background: #fff;
		transform: scale(0.95);
	}
}

/* ──── 6. Мобильные паддинги — все секции /2 (24 → 12) ─────────── */
@media (max-width: 700px) {
	.ks-hero      { padding-left: 12px; padding-right: 12px; }
	.ks-about     { padding-left: 12px; padding-right: 12px; }
	.ks-chars     { padding-left: 12px; padding-right: 12px; }
	.ks-halls     { padding-left: 12px; padding-right: 12px; }
	.ks-food      { padding-left: 12px; padding-right: 12px; }
	.ks-news      { padding-left: 12px; padding-right: 12px; }
	.ks-gallery   { padding-left: 12px; padding-right: 12px; }
	.ks-contacts  { padding-left: 12px; padding-right: 12px; }
	.ks-container { padding-left: 12px; padding-right: 12px; }
	footer.ks-footer { padding-left: 12px; padding-right: 12px; }
}

/* ──── 7. HALLS NAV (стрелки в header справа) ──────────────────── */
.ks-halls__header-text { min-width: 0; flex: 1 1 auto; }
.ks-halls__header-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;     /* nav-кнопки справа */
	gap: 16px;
	flex-shrink: 0;
}
.ks-halls__sub {
	max-width: 420px;
	text-align: right;          /* подзаголовок тоже к правому краю */
	margin: 0;
}
.ks-halls__nav {
	display: flex;
	gap: 8px;
}
.ks-halls__nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .04);
	border: 1px solid rgba(22, 18, 43, .14);
	color: var(--ks-dark);
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background .2s var(--ks-ease), border-color .2s var(--ks-ease), color .2s var(--ks-ease);
}
.ks-halls__nav-btn:hover { background: var(--ks-red); border-color: var(--ks-red); color: #fff; }
.ks-halls__nav-btn:disabled { opacity: .25; cursor: default; pointer-events: none; }

/* Если фон секции тёмный (см. inline style) — кнопки тоже светлые. */
.ks-halls[style*="background-color"] .ks-halls__nav-btn {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
}

/* На мобайле header колонкой: текст сверху, sub+nav снизу.
   Сами nav-кнопки прижаты к ПРАВОМУ краю экрана (по запросу). */
@media (max-width: 700px) {
	.ks-halls__header {
		flex-direction: column;
		align-items: stretch !important;
		gap: 16px;
	}
	.ks-halls__header-side {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.ks-halls__sub {
		text-align: left;
		font-size: 13px;
	}
	.ks-halls__nav {
		margin-left: auto;       /* стрелки к правому краю */
	}
}

/* ──── 8. CHARS NAV всегда справа (включая мобайл) ─────────────── */
@media (max-width: 900px) {
	.ks-chars__header {
		flex-direction: column;
		align-items: stretch !important;
	}
	.ks-chars__header > div:first-child { width: 100%; }
	.ks-chars__nav {
		align-self: flex-end;     /* кнопки прижаты к правому краю при мобильной разметке */
	}
}

/* ═══════════════════════════════════════════════════════════════════
   MENU FULL — страница /menu/
   Заголовок + Скачать PDF + категорийная nav + блюда по категориям.
   На тёмном фоне.
   ═══════════════════════════════════════════════════════════════════ */
.ks-menu {
	color: #fff;
	padding: 100px 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
}
.ks-menu__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 36px;
}
.ks-menu__tag {
	font-family: var(--ks-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ks-red);
	margin: 0 0 12px;
}
.ks-menu__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(36px, 5vw, 56px);
	letter-spacing: -0.03em;
	line-height: .95;
	margin: 0;
	color: #fff;
}
.ks-menu__pdfs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ks-menu__pdf-btn {
	font-size: 12px !important;
	padding: 12px 22px !important;
}
.ks-menu__pdf-btn svg { flex-shrink: 0; }

/* Категорийная нав — sticky под header'ом сайта (68px) */
.ks-menu__nav {
	position: sticky;
	top: 68px;
	z-index: 10;
	margin: 0 calc(-1 * 40px) 28px;
	padding: 12px 40px;
	background: rgba(22, 18, 43, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	overflow-x: auto;
	scrollbar-width: none;
}
.ks-menu__nav::-webkit-scrollbar { display: none; }
.ks-menu__nav ul {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.ks-menu__nav li { list-style: none; }
.ks-menu__nav a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: background .2s var(--ks-ease), color .2s var(--ks-ease);
}
.ks-menu__nav a:hover,
.ks-menu__nav a.is-active {
	background: var(--ks-red);
	color: #fff;
}

/* Секция категории */
.ks-menu__cat {
	margin: 56px 0 0;
	scroll-margin-top: 130px;             /* offset для якорной прокрутки под sticky-nav */
}
.ks-menu__cat:first-of-type { margin-top: 24px; }
.ks-menu__cat-title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(24px, 3vw, 36px);
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	color: #fff;
}
.ks-menu__cat-desc {
	font-family: var(--ks-font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 24px;
	max-width: 720px;
}
.ks-menu__dishes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
/* Сетка карточек внутри категории на /menu/ — 3 в ряд (как на главной),
   чтобы крупные фото показывались хорошо. */
.ks-menu__cat-grid.ks-food__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 0;
}
@media (max-width: 900px) {
	.ks-menu__cat-grid.ks-food__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ks-menu__cat-grid.ks-food__grid { grid-template-columns: 1fr; }
}
.ks-menu__dish {
	display: flex;
	gap: 16px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
	transition: border-color .25s var(--ks-ease), background .25s var(--ks-ease);
}
.ks-menu__dish:hover {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.04);
}
.ks-menu__dish-img {
	flex: 0 0 110px;
	width: 110px;
	height: 110px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: rgba(255, 255, 255, 0.05);
}
.ks-menu__dish-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ks-menu__dish-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.ks-menu__dish-name {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
}
.ks-menu__dish-price {
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 14px;
	color: #fff;          /* НЕ красная — обычный белый на тёмном фоне */
	white-space: nowrap;
}
.ks-menu__dish-price .amount,
.ks-menu__dish-price ins {
	color: inherit;
	text-decoration: none;
	background: none;
}
.ks-menu__dish-price del { display: none; }    /* WC sale-price old value */
.ks-menu__dish-desc {
	font-family: var(--ks-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}
.ks-menu__empty {
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
	padding: 40px 0;
	text-align: center;
}

@media (max-width: 900px) {
	.ks-menu { padding: 64px 24px; }
	.ks-menu__nav { margin: 0 -24px 24px; padding: 10px 24px; top: 60px; }
	.ks-menu__dishes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.ks-menu { padding: 36px 12px; }
	.ks-menu__nav { margin: 0 -12px 20px; padding: 8px 12px; }
	.ks-menu__dish-img { flex: 0 0 90px; width: 90px; height: 90px; }
}

/* ═══════════════════════════════════════════════════════════════════
   STANDALONE-СТРАНИЦЫ контента (/menu/, /zali/, /novosti/, /galereya/,
   /kontakty/) — единый отступ сверху/снизу для любой ks-секции.
   На главной у каждого блока свой ритм (hero 120, about 100, chars 80, etc.),
   а на отдельной странице это даёт «прыгающий» отступ под header'ом.
   body.ks-content-page добавляется в functions.php через body_class.
   ═══════════════════════════════════════════════════════════════════ */
body.ks-content-page .ks-hero,
body.ks-content-page .ks-about,
body.ks-content-page .ks-chars,
body.ks-content-page .ks-halls,
body.ks-content-page .ks-food,
body.ks-content-page .ks-news,
body.ks-content-page .ks-gallery,
body.ks-content-page .ks-contacts {
	padding-top: 56px;
	padding-bottom: 56px;
}
/* Унифицируем margin-bottom у заголовка-секции — иначе halls/news/gallery
   дают разный отступ от заголовка к контенту на standalone-страницах. */
body.ks-content-page .ks-halls__header,
body.ks-content-page .ks-news__header,
body.ks-content-page .ks-gallery__header {
	margin-bottom: 32px;
}
/* Halls: на главной .ks-halls__header имеет align-items:flex-end — текст-слева
   прижимается к нижнему краю длинного subtitle/nav справа. На standalone это
   создаёт расхождение в 12px между halls-title и gallery-title. Выравниваем
   по верху чтобы tag/title начинались на одном уровне с другими страницами. */
body.ks-content-page .ks-halls__header {
	align-items: flex-start;
}

/* /kontakty/ и /menu/ — фон страницы тёмно-синий */
body.ks-page-kontakty,
body.ks-page-menu {
	background-color: #16122B;
}

/* iOS Safari + sticky: Norebro ставит body { overflow-x: hidden }, что ломает
   position:sticky внутри (известный баг WebKit). Переносим overflow-x на html
   чтобы блокировка горизонтальной прокрутки осталась, но body не создавал
   scroll-context. Применяем только на наших content-страницах, чтобы не задеть
   общий layout Norebro. */
body.ks-content-page {
	overflow-x: visible !important;
}
html:where(:has(body.ks-content-page)),
html.ks-content-page-html {
	overflow-x: hidden;
}
@media (max-width: 700px) {
	body.ks-content-page .ks-hero,
	body.ks-content-page .ks-about,
	body.ks-content-page .ks-chars,
	body.ks-content-page .ks-halls,
	body.ks-content-page .ks-food,
	body.ks-content-page .ks-news,
	body.ks-content-page .ks-gallery,
	body.ks-content-page .ks-contacts {
		padding-top: 36px;
		padding-bottom: 36px;
	}
	body.ks-content-page .ks-halls__header,
	body.ks-content-page .ks-news__header,
	body.ks-content-page .ks-gallery__header {
		margin-bottom: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER + MOBILE MENU
   Источник: extra-kusochki-v3-2.html стр. 38–80, 774–808
   Mobile панель — content-логика из new.mishkabalalaika.ru/
   ═══════════════════════════════════════════════════════════════════ */
.ks-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(253, 250, 244, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ks-border, #E5E0D6);
	transition: box-shadow .3s var(--ks-ease);
}
.ks-header.is-scrolled {
	box-shadow: 0 2px 20px rgba(22, 18, 43, 0.08);
}
.ks-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 0 40px;
	height: 68px;
}
.ks-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	color: var(--ks-dark, #16122B);
}
.ks-header__logo img {
	display: block;
	max-height: 40px;
	width: auto;
}
.ks-header__logo-text {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -0.02em;
	color: var(--ks-dark, #16122B);
}
.ks-header__logo-accent { color: var(--ks-red, #E42B2B); }

.ks-header__nav {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	justify-content: center;
}
.ks-header__nav-list {
	display: flex;
	align-items: center;
	gap: 3px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ks-header__nav-list li { list-style: none; }
.ks-header__nav-list a {
	display: inline-block;
	padding: 6px 12px;
	font-family: var(--ks-font-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--ks-dark, #16122B);
	text-decoration: none;
	letter-spacing: 0.01em;
	border-radius: 5px;
	transition: background .18s var(--ks-ease), color .18s var(--ks-ease);
}
.ks-header__nav-list a:hover,
.ks-header__nav-list .current-menu-item > a,
.ks-header__nav-list .current_page_item > a {
	background: rgba(22, 18, 43, 0.07);
	color: var(--ks-dark);
}

.ks-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.ks-header__cta {
	/* Меньше дефолтной .ks-btn — компактнее в шапке */
	padding: 10px 22px !important;
	font-size: 12px !important;
}

/* Бургер: 3 чёрточки → крест при is-open */
.ks-header__burger {
	display: none;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 6px;
}
.ks-header__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ks-dark);
	border-radius: 2px;
	transition: transform .25s var(--ks-ease), opacity .25s var(--ks-ease);
}
body.ks-mmenu-open .ks-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.ks-mmenu-open .ks-header__burger span:nth-child(2) { opacity: 0; }
body.ks-mmenu-open .ks-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Тело страницы — компенсация под фиксированный header */
body.ks-has-header { padding-top: 68px; }

/* Мобильная панель ─ slide-in справа, контент-логика из mishkabalalaika.ru */
.ks-mmenu {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear .4s;
}
body.ks-mmenu-open .ks-mmenu {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}
.ks-mmenu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 12, 31, 0.55);
	opacity: 0;
	transition: opacity .3s var(--ks-ease);
	cursor: pointer;
}
body.ks-mmenu-open .ks-mmenu__overlay { opacity: 1; }

.ks-mmenu__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;                    /* full width — на весь экран */
	width: 100%;
	max-width: none;
	background: var(--ks-bg, #FDFAF4);
	color: var(--ks-dark, #16122B);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.32, .72, 0, 1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
}
body.ks-mmenu-open .ks-mmenu__panel { transform: translateX(0); }

.ks-mmenu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;          /* было 16/24 */
	border-bottom: 1px solid var(--ks-border);
	flex-shrink: 0;
}
.ks-mmenu__logo img { display: block; max-height: 32px; width: auto; }
.ks-mmenu__logo span {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: 16px;
	color: var(--ks-dark);
}
.ks-mmenu__logo span em {
	color: var(--ks-red);
	font-style: normal;
}
.ks-mmenu__close {
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: var(--ks-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.ks-mmenu__nav {
	padding: 4px 0;
	flex-shrink: 0;
}
.ks-mmenu__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ks-mmenu__nav-list li {
	list-style: none;
	border-bottom: 1px solid var(--ks-border);
}
.ks-mmenu__nav-list li:last-child { border-bottom: none; }
.ks-mmenu__nav-list a {
	display: block;
	padding: 12px 18px;          /* было 18/24 — поджали по вертикали и горизонтали */
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 16px;             /* было 18 */
	color: var(--ks-dark);
	text-decoration: none;
	transition: background .18s var(--ks-ease);
}
.ks-mmenu__nav-list a:hover { background: rgba(22, 18, 43, 0.04); }

.ks-mmenu__contacts {
	padding: 14px 18px;          /* было 20/24 */
	border-top: 1px solid var(--ks-border);
	display: flex;
	flex-direction: column;
	gap: 10px;                   /* было 18 */
}
.ks-mmenu__c-block { display: flex; flex-direction: column; gap: 2px; }
.ks-mmenu__c-label {
	font-size: 9px;              /* было 10 */
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ks-muted, #888);
}
.ks-mmenu__c-value {
	font-family: var(--ks-font-body);  /* Golos Text — обычный, не display */
	font-weight: 400;             /* было 700 — теперь тонкий */
	font-size: 13px;              /* было 16 — компактнее */
	color: var(--ks-dark);
	text-decoration: none;
	display: block;
	line-height: 1.4;
}
a.ks-mmenu__c-value { color: var(--ks-dark); }
a.ks-mmenu__c-value:hover { color: var(--ks-red); }

.ks-mmenu__cta {
	padding: 14px 18px;          /* было 20/24 */
	display: flex;
	flex-direction: column;
	gap: 8px;                    /* было 10 */
	border-top: 1px solid var(--ks-border);
}
.ks-mmenu__cta .ks-btn {
	justify-content: center;
	width: 100%;
	padding: 13px 24px !important;   /* компактнее в меню */
	font-size: 12px !important;
}

.ks-mmenu__socials {
	padding: 12px 18px 20px;     /* было 16/24/28 */
	display: flex;
	gap: 8px;                    /* было 10 */
	flex-wrap: wrap;
}
.ks-mmenu__social {
	width: 38px;                 /* было 44 */
	height: 38px;
	border-radius: 8px;
	background: rgba(22, 18, 43, 0.06);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ks-dark);
	text-decoration: none;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 12px;
	transition: background .2s var(--ks-ease), color .2s var(--ks-ease);
}
.ks-mmenu__social:hover {
	background: var(--ks-red);
	color: #fff;
}

@media (max-width: 900px) {
	.ks-header__inner { padding: 0 16px; gap: 12px; height: 60px; }
	body.ks-has-header { padding-top: 60px; }
	.ks-header__nav { display: none; }
	.ks-header__cta { display: none; }       /* CTA уезжает в мобильную панель */
	.ks-header__burger { display: inline-flex; }
	.ks-header__logo img { max-height: 32px; }
}

/* Когда мобильное меню открыто — body не скроллится */
body.ks-mmenu-open {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-POPUP — single-template для CPT (зал, персонаж, новость).
   Стиль повторяет .ks-popup, но как полноценная страница SEO:
   blur-обложка на весь экран, центрированная карточка,
   back-кнопка и CTA на бронирование.
   ═══════════════════════════════════════════════════════════════════ */
.ks-page-popup {
	position: relative;
	min-height: 100vh;
	padding: 80px 24px 40px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: #fff;
	overflow: hidden;
}

/* размытая обложка на весь экран */
.ks-page-popup__bg {
	position: absolute;
	inset: -40px;          /* перекрытие за края — иначе при blur видны границы */
	background-size: cover;
	background-position: center;
	filter: blur(36px) saturate(1.1);
	transform: scale(1.08);
	z-index: 0;
}
/* тёмный полупрозрачный overlay поверх blur'а */
.ks-page-popup__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 12, 31, 0.7) 0%, rgba(14, 12, 31, 0.85) 60%, rgba(14, 12, 31, 0.92) 100%);
	z-index: 1;
}

.ks-page-popup__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}

/* кнопка «Назад» — слева над карточкой */
.ks-page-popup__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	margin-bottom: 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	text-decoration: none;
	font-family: var(--ks-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background .2s var(--ks-ease), border-color .2s var(--ks-ease);
}
.ks-page-popup__back:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}
.ks-page-popup__back svg { display: block; flex-shrink: 0; }

/* белая карточка по центру — ровно как .ks-popup__box */
.ks-page-popup__card {
	background: var(--ks-bg, #FDFAF4);
	color: var(--ks-dark, #16122B);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
}

/* hero-обложка вверху карточки — резкая, не размытая */
.ks-page-popup__hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16/8;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.ks-page-popup__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--ks-red, #E42B2B);
	color: #fff;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
}

.ks-page-popup__body {
	padding: 36px 44px 44px;
}

.ks-page-popup__tag {
	display: inline-block;
	background: var(--ks-dark, #16122B);
	color: #fff;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}

.ks-page-popup__title {
	font-family: var(--ks-font-display);
	font-weight: 900;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ks-dark, #16122B);
	margin: 0 0 12px;
}

.ks-page-popup__subtitle {
	font-size: 14px;
	color: var(--ks-muted, #888);
	margin: 0 0 20px;
	letter-spacing: 0.02em;
}

.ks-page-popup__text {
	font-size: 16px;
	line-height: 1.7;
	color: #2c2840;
	margin-bottom: 28px;
}
.ks-page-popup__text p { margin: 0 0 14px; }
.ks-page-popup__text p:last-child { margin-bottom: 0; }
.ks-page-popup__text strong { color: var(--ks-dark, #16122B); }

.ks-page-popup__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	padding: 20px 24px;
	background: rgba(22, 18, 43, 0.04);
	border-radius: 10px;
	margin-bottom: 24px;
}
.ks-page-popup__meta-item span {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(22, 18, 43, 0.4);
	margin-bottom: 4px;
}
.ks-page-popup__meta-item strong {
	display: block;
	font-family: var(--ks-font-display);
	font-weight: 700;
	font-size: 16px;
	color: var(--ks-dark, #16122B);
}

.ks-page-popup__features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
}
.ks-page-popup__features li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.6;
	color: #2c2840;
	margin-bottom: 8px;
}
.ks-page-popup__features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ks-red, #E42B2B);
}

.ks-page-popup__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 8px;
}

@media (max-width: 700px) {
	.ks-page-popup { padding: 56px 12px 24px; }
	.ks-page-popup__bg { filter: blur(28px) saturate(1.1); }
	.ks-page-popup__back {
		padding: 8px 14px;
		font-size: 12px;
		margin-bottom: 12px;
	}
	.ks-page-popup__hero,
	.ks-page-popup__slider {
		aspect-ratio: 1/1;       /* мобайл — квадрат для одиночной картинки И для слайдера */
	}
	.ks-page-popup__body { padding: 24px 20px 32px; }
	.ks-page-popup__title { font-size: clamp(24px, 6vw, 32px); }
	.ks-page-popup__meta { padding: 16px 18px; }
}