/* ============================================================
   Софрино — главная 2026
   Самостоятельный слой: не зависит от all.css/bootstrap.
   Палитра взята с текущего сайта: глубокий бирюзовый + золото.
   ============================================================ */

.v26 {
	color-scheme: light;

	--page: #F8F6F0;
	--surface: #FFFFFF;
	--surface-subtle: #F1ECE1;
	--surface-sunken: #E8E0D0;

	--ink: #17211F;
	--muted: #5C6A6C;

	--border: #E0D8C8;
	--border-strong: #C9BCA4;

	--brand: #004051;
	--brand-hover: #002F3C;
	--brand-soft: #DDE8EC;
	/* заливка кнопок/плашек: в тёмной теме отличается от текстового --brand */
	--brand-fill: #004051;
	--brand-fill-hover: #002F3C;
	--on-brand: #FFFFFF;

	--accent: #B4863C;
	--accent-hover: #966C2C;
	--accent-soft: #F6E9CF;
	--accent-ink: #241A0C;
	--accent-text: #8A6224;

	/* текст ошибки на бледно-малиновой подложке: сам #CE3F58 давал на ней 4.0 */
	--danger-text: #B32D45;

	--footer-bg: #002F3C;
	--footer-rule: transparent;
	--footer-ink: #F3F0E8;
	--footer-muted: rgba(243, 240, 232, .74);

	--shadow-sm: 0 2px 6px rgba(0, 32, 40, .06);
	--shadow-md: 0 14px 30px rgba(0, 32, 40, .12);

	/* подложка превью товара: снимки в каталоге сняты на белом, поэтому поле
	   тоже белое — иначе фон фотографии торчит белым прямоугольником */
	--product-bg: #FFFFFF;
	--product-halo: rgba(0, 26, 33, .055);
	--product-shadow: rgba(0, 26, 33, .24);
	--product-tick: rgba(0, 32, 40, .16);
	--product-tick-active: rgba(0, 32, 40, .62);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 18px;

	/*
	 * Высоту шапки замеряет скрипт (см. home.js) и кладёт сюда же инлайном,
	 * перекрывая это значение. Оно нужно на один кадр — до того, как скрипт
	 * отработает: hero подтягивается под шапку отрицательным отступом, и если
	 * значение сильно расходится с правдой, первый кадр показывает сдвиг.
	 * Поэтому здесь не «примерно», а замеренные величины по ширинам: 154 на
	 * широком экране, 208 до 1180px (поиск уходит второй строкой), 126 на
	 * телефоне.
	 */
	--header-height: 130px;

	--shell: min(1280px, 100vw - 64px);
	--font: "Golos Text", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.v26[data-theme="dark"] {
	color-scheme: dark;

	--page: #0B1114;
	--surface: #111A1E;
	--surface-subtle: #17252B;
	--surface-sunken: #0E171B;

	--ink: #F2F5F4;
	--muted: #A9B7BB;

	--border: #26343A;
	--border-strong: #38494F;

	--brand: #56A0B8;
	--brand-hover: #6FB6CD;
	--brand-soft: #14313C;
	--brand-fill: #10404F;
	--brand-fill-hover: #17505F;
	--on-brand: #F2F5F4;

	--accent: #D2A646;
	--accent-hover: #E0B85F;
	--accent-soft: #33280F;
	--accent-ink: #161104;
	--accent-text: #D2A646;

	--danger-text: #EC6F84;

	/* глубокий фирменный бирюзовый, как в светлой теме, только приглушённый:
	   почти чёрный подвал сливался со страницей */
	--footer-bg: #0B2630;
	--footer-rule: rgba(210, 166, 70, .32);
	--footer-ink: #F2F5F4;
	--footer-muted: rgba(242, 245, 244, .74);

	--shadow-sm: 0 2px 6px rgba(0, 0, 0, .34);
	--shadow-md: 0 16px 34px rgba(0, 0, 0, .42);

	/* в тёмной теме превью — светлый «лайтбокс» внутри тёмной карточки:
	   притушить белый фон снимка нельзя, он всё равно останется белым */
	--product-bg: #EFEADF;
	--product-halo: rgba(0, 26, 33, .10);
	--product-shadow: rgba(0, 26, 33, .3);
	--product-tick: rgba(0, 32, 40, .2);
	--product-tick-active: rgba(0, 32, 40, .7);
}

.v26 *,
.v26 *::before,
.v26 *::after {
	box-sizing: border-box;
}

html.v26 {
	scroll-behavior: smooth;
}

.v26 body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.v26 h1,
.v26 h2,
.v26 h3,
.v26 h4,
.v26 p,
.v26 figure,
.v26 blockquote {
	margin: 0;
}

/* Сброс через :where() — нулевая специфичность, чтобы правила компонентов
   (например белый текст на карточке-ссылке) всегда выигрывали. */
:where(.v26) :where(a) {
	color: inherit;
	text-decoration: none;
}

:where(.v26) :where(button, input) {
	font: inherit;
	color: inherit;
}

:where(.v26) :where(button) {
	cursor: pointer;
}

:where(.v26) :where(img) {
	display: block;
	max-width: 100%;
}

.v26 :focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.v26 ::selection {
	background: var(--accent-soft);
	color: var(--accent-ink);
}

/* в тёмной теме --accent-soft сам тёмный, и тёмный текст на нём пропадал —
   выделяем ярким золотом, текст остаётся тёмным */
.v26[data-theme="dark"] ::selection {
	background: var(--accent);
	color: var(--accent-ink);
}

.shell {
	width: var(--shell);
	margin-left: auto;
	margin-right: auto;
}

.skip-link {
	position: fixed;
	z-index: 100;
	top: -100px;
	left: 8px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	transition: top .18s ease;
}

.skip-link:focus {
	top: 8px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Типографика ------------------------------------------------ */

.t-display {
	font-size: clamp(34px, 4.2vw, 58px);
	line-height: 1.07;
	font-weight: 500;
	letter-spacing: -.025em;
}

.t-h2 {
	font-size: clamp(27px, 3vw, 40px);
	line-height: 1.14;
	font-weight: 500;
	letter-spacing: -.02em;
}

.t-h3 {
	font-size: 19px;
	line-height: 1.4;
	font-weight: 600;
}

.t-kicker {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--accent-text);
}

.t-price {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	white-space: nowrap;
}

/* Кнопки ----------------------------------------------------- */

.btn {
	min-height: 50px;
	padding: 0 24px;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	border: 1px solid transparent;
	background: none;
	white-space: nowrap;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .06s ease;
}

.btn:active {
	transform: translateY(1px);
}

.btn svg {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

@media (hover: hover) {
	.path-card:hover .btn svg {
		transform: translateX(3px);
	}
}

.btn-primary {
	background: var(--brand-fill);
	color: var(--on-brand);
}

@media (hover: hover) {
	.btn-primary:hover {
		background: var(--brand-fill-hover);
	}
}

.btn-secondary {
	border-color: var(--border-strong);
	color: var(--ink);
}

@media (hover: hover) {
	.btn-secondary:hover {
		border-color: var(--brand);
		color: var(--brand);
	}
}

.btn-accent {
	background: var(--accent);
	color: var(--accent-ink);
}

@media (hover: hover) {
	.btn-accent:hover {
		background: var(--accent-hover);
	}
}

.btn-on-dark {
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

@media (hover: hover) {
	.btn-on-dark:hover {
		background: rgba(255, 255, 255, .14);
		border-color: #fff;
	}
}

.btn-sm {
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--brand);
	font-weight: 600;
	font-size: 15px;
}

.arrow-link svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

@media (hover: hover) {
	.arrow-link:hover svg {
		transform: translateX(4px);
	}
}

.badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: 11px;
	/* без сброса надпись садилась ниже центра: у плашки фиксированная высота,
	   а строка наследовала межстрочный 1.6 от body */
	line-height: 1;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 2px 10px rgba(0, 22, 28, .2);
}

/* «Новинки» на сайте исторически малиновые, «Акции» — золотые.
   Оттенок чуть глубже исходного #d84e65: на белом тексте тот давал
   контраст 4.0, этот — 4.7, разницу глазом не поймать. */
.badge-new {
	background: #CE3F58;
	color: #fff;
}

.badge-promo {
	background: var(--accent);
	color: var(--accent-ink);
}

/* Шапка ------------------------------------------------------ */

/*
 * Шапка лежит поверх первого экрана (см. .hero-slider). У самого верха страницы
 * фото идёт под ней без размытия; после начала прокрутки она становится
 * тёмным стеклом и держит контраст уже над обычным контентом.
 * Специально НЕ зависит от --theme: это отдельный «хром» интерфейса, всегда
 * тёмное стекло с белым текстом — так логотип и навигация одинаково хорошо
 * читаются и на фото, и на любой секции страницы под собой.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	/* не даём scroll anchoring дёргать страницу, пока шапка меняет высоту */
	overflow-anchor: none;
	transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease,
		transform .3s cubic-bezier(.2, .7, .2, 1);
}

/*
 * У верха страницы размытия нет: оно съедало верхнюю четверть фотографии.
 * Текст держит градиент, он лежит отдельным слоем, потому что сам градиент
 * плавно в сплошной цвет не переходит, а прозрачность слоя переходит.
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 10, 9, .62), rgba(4, 10, 9, .3) 70%, rgba(4, 10, 9, 0));
	pointer-events: none;
	transition: opacity .25s ease;
}

.site-header.is-scrolled::before {
	opacity: 0;
}

.site-header.is-scrolled {
	background: rgba(4, 10, 9, .88);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: var(--shadow-md);
}

.header-row {
	position: relative;
	z-index: 1;
}

/* служебное состояние на время замера высоты шапки (см. home.js):
   переходы обязаны молчать, иначе измеряется промежуточный кадр */
.site-header.is-measuring,
.site-header.is-measuring * {
	transition: none !important;
}

.header-row {
	min-height: 84px;
	display: flex;
	align-items: center;
	gap: 24px;
	transition: min-height .36s cubic-bezier(.22, .68, .2, 1);
}

.brand-mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.brand-mark img {
	width: auto;
	height: 50px;
	transition: height .36s cubic-bezier(.22, .68, .2, 1);
}

/*
 * Срезаем мелкую подпись «церковный торговый дом» под знаком — на текущем
 * сайте её тоже нет, она шумит и в шапке не читается. В файле logo3.png
 * подпись занимает нижние строки 163–182, поэтому показываем кадр 360×160:
 * пропорция задана через aspect-ratio, так что обрезка держится сама при
 * любой высоте — в том числе у свёрнутой шапки.
 */
.brand-mark__full {
	aspect-ratio: 360 / 160;
	object-fit: cover;
	object-position: top center;
}

.brand-mark__compact {
	display: none;
}

.catalog-pill {
	height: 52px;
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border-radius: 999px;
	background: var(--brand-fill);
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--on-brand);
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	transition: background .18s ease, height .36s cubic-bezier(.22, .68, .2, 1);
}

@media (hover: hover) {
	.catalog-pill:hover {
		background: var(--brand-fill-hover);
	}
}

.catalog-pill[aria-expanded="true"] {
	background: var(--accent);
	border-color: transparent;
	color: var(--accent-ink);
}

.catalog-pill .bars {
	position: relative;
	width: 16px;
	height: 12px;
	flex: none;
}

.catalog-pill .bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.catalog-pill .bars span:nth-child(1) { top: 0; }
.catalog-pill .bars span:nth-child(2) { top: 5px; }
.catalog-pill .bars span:nth-child(3) { top: 10px; }

.catalog-pill[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.catalog-pill[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.catalog-pill[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.search-form {
	flex: 1 1 auto;
	max-width: 560px;
	height: 52px;
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 100%);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-md);
	/* без overflow: hidden — из-под поля выпадают подсказки */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: height .36s cubic-bezier(.22, .68, .2, 1), box-shadow .18s ease,
		border-color .18s ease, background .18s ease;
}

/*
 * В покое поле — тёмное стекло, как кнопка «Каталог» и иконки: белое поле
 * было самым ярким пятном экрана и спорило с заголовком слайда. Заметность
 * держат размер, бегущие подсказки и золотая лупа. При вводе поле светлеет,
 * чтобы набирать было как в обычном поле.
 */
@media (hover: hover) {
	.search-form:hover {
		border-color: rgba(232, 199, 126, .75);
	}
}

.search-form:focus-within {
	background: #F6F0E3;
	border-color: #E8C77E;
	box-shadow: 0 0 0 2px #E8C77E;
}

/* цвета заданы числами: шапка тёмная в обеих темах, и поле в ней одно */
.search-form__field {
	position: relative;
	height: 100%;
	min-width: 0;
}

.search-form input[type="search"] {
	width: 100%;
	height: 100%;
	padding: 0 20px;
	border: 0;
	outline: 0;
	background: transparent;
	min-width: 0;
	color: #fff;
}

.search-form input::placeholder {
	color: rgba(255, 255, 255, .78);
	opacity: 1;
}

.search-form:focus-within input[type="search"] {
	color: #10201F;
}

.search-form:focus-within input::placeholder,
.search-form:focus-within .search-form__hint {
	color: #5F6A66;
}

/* светлый крестик сброса на тёмном стекле не виден; нужен только при вводе */
.search-form:not(:focus-within) input::-webkit-search-cancel-button {
	display: none;
}

/*
 * Сменяющиеся примеры запросов. Анимировать сам placeholder нельзя, поэтому
 * пока идёт показ, он прозрачен, а поверх лежит подпись. При фокусе и при
 * введённом тексте скрипт снимает is-hinting, и возвращается обычный
 * placeholder (см. home.js).
 */
.search-form__hint {
	position: absolute;
	top: 50%;
	left: 20px;
	right: 8px;
	display: none;
	overflow: hidden;
	color: rgba(255, 255, 255, .82);
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
}

.search-form.is-hinting .search-form__hint {
	display: block;
}

.search-form.is-hinting input::placeholder {
	color: transparent;
}

.search-form__hint.is-leaving {
	opacity: 0;
	transform: translateY(calc(-50% - 9px));
}

.search-form__hint.is-entering {
	opacity: 0;
	transform: translateY(calc(-50% + 9px));
	transition: none;
}

/*
 * «Помощник» внутри поля, справа — как «Режим ИИ» у Гугла: забирает
 * набранный текст помощнику, с пустым полем открывает панель вопроса.
 * Виден всегда. При вводе поле светлеет, и кнопка становится
 * бледно-золотой плашкой на нём.
 */
.search-form__ai {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: calc(100% - 12px);
	margin-right: 6px;
	padding: 0 14px 0 12px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.search-form__ai svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #E8C77E;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.search-form:focus-within .search-form__ai {
	border-color: #DCC48F;
	background: #EFE3C6;
	color: #10201F;
}

.search-form:focus-within .search-form__ai svg {
	stroke: #8A6224;
}

@media (hover: hover) {
	.search-form__ai:hover {
		border-color: #E8C77E;
		background: rgba(232, 199, 126, .18);
	}

	.search-form:focus-within .search-form__ai:hover {
		background: #E8D6AE;
	}
}

.search-form__ai:focus-visible {
	outline: 2px solid #E8C77E;
	outline-offset: 2px;
}

/*
 * Подсказки: короткий список товаров под полем — название с подсвеченным
 * совпадением, артикул и цена. Последняя строка — вся выдача и вопрос
 * помощнику. Цвета из темы: список лежит поверх страницы, а не шапки.
 */
.search-suggest {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: -1px;
	right: -1px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	/* докрутили список до края — страница под ним не едет */
	overscroll-behavior: contain;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	color: var(--ink);
	text-align: left;
}

.search-suggest[hidden] {
	display: none;
}

/* над полосой меню (z-index: 20), пока открыт список — см. home.js */
.header-row.is-suggesting {
	z-index: 25;
}

.search-suggest__item {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 6px 10px 6px 6px;
	border-radius: var(--radius-sm);
	color: inherit;
	text-decoration: none;
}

.search-suggest__item.is-active,
.search-suggest__action.is-active,
.search-suggest__empty-ask.is-active {
	background: var(--surface-subtle);
}

@media (hover: hover) {
	.search-suggest__item:hover,
	.search-suggest__action:hover,
	.search-suggest__empty-ask:hover {
		background: var(--surface-subtle);
	}
}

.search-suggest__thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--product-bg);
	overflow: hidden;
}

.search-suggest__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.search-suggest__text {
	min-width: 0;
}

.search-suggest__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 15px;
	line-height: 1.3;
}

.search-suggest__name b {
	font-weight: 700;
}

.search-suggest__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 2px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.35;
}

.search-suggest__price {
	color: var(--ink);
	font-weight: 600;
}

.search-suggest__price s {
	margin-right: 6px;
	color: var(--muted);
	font-weight: 400;
}

.search-suggest__empty {
	padding: 12px 10px;
	color: var(--muted);
	font-size: 15px;
}

.search-suggest__empty-ask {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	width: 100%;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	color: var(--accent-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.search-suggest__empty-ask > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.search-suggest__empty-ask svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.search-suggest__empty-ask small {
	font-size: 13px;
	font-weight: 400;
}

/* в длинном списке нижняя строка не уезжает за прокрутку */
.search-suggest__actions {
	position: sticky;
	bottom: -6px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px -6px -6px;
	padding: 6px;
	border-top: 1px solid var(--border);
	background: var(--surface);
}

.search-suggest__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--brand);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.search-suggest__action svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.search-suggest__action--ai {
	margin-left: auto;
	color: var(--accent-text);
}

/*
 * Ответ помощника в той же панели под полем (см. home.js): вопрос, ответ,
 * карточки товаров из ответа, поле для уточнения. Ссылки «К товарам» и
 * «Открыть в чате» — текстом, чтобы не спорили с карточками.
 */
.search-ai {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 6px 6px 0;
}

.search-ai__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.search-ai__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--accent-text);
	font-size: 14px;
	font-weight: 600;
}

.search-ai__badge svg,
.search-ai__send svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.search-ai__link {
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--brand);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

@media (hover: hover) {
	.search-ai__link:hover {
		text-decoration: underline;
	}
}

.search-ai__empty {
	margin: 4px 0 6px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

.search-ai__turn + .search-ai__turn {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.search-ai__q {
	justify-self: end;
	width: fit-content;
	max-width: 85%;
	margin: 0 0 10px auto;
	padding: 8px 14px;
	border-radius: 16px 16px 4px 16px;
	background: var(--surface-subtle);
	font-size: 15px;
	line-height: 1.4;
}

.search-ai__a {
	font-size: 15px;
	line-height: 1.55;
}

.search-ai__a p,
.search-ai__a ul,
.search-ai__a ol {
	margin: 0 0 8px;
}

.search-ai__a ul,
.search-ai__a ol {
	padding-left: 20px;
}

.search-ai__a a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.search-ai__a.is-pending {
	color: var(--muted);
	animation: search-ai-pending 1.2s ease-in-out infinite;
}

@keyframes search-ai-pending {
	50% {
		opacity: .45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-ai__a.is-pending {
		animation: none;
	}
}

.search-ai__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 148px;
	gap: 8px;
	margin-top: 6px;
	padding-bottom: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.search-ai__cards[hidden] {
	display: none;
}

.search-ai__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--ink);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
}

@media (hover: hover) {
	.search-ai__card:hover {
		border-color: var(--brand);
	}
}

.search-ai__card-img {
	display: grid;
	place-items: center;
	height: 96px;
	border-radius: var(--radius-sm);
	background: var(--product-bg);
	overflow: hidden;
}

.search-ai__card-img img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.search-ai__card-name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.search-ai__card-price {
	margin-top: auto;
	font-weight: 600;
}

.search-ai__card-price s {
	margin-right: 4px;
	color: var(--muted);
	font-weight: 400;
}

/* поле уточнения прилипает к низу панели, как строка действий у подсказок */
.search-ai__foot {
	position: sticky;
	bottom: 0;
	display: flex;
	gap: 6px;
	padding: 8px 0 4px;
	background: var(--surface);
}

.search-ai__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}

.search-ai__input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

.search-ai__send {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--brand-fill);
	color: #fff;
	cursor: pointer;
}

.search-ai__more {
	padding-bottom: 6px;
	text-align: right;
}

/* крестик нужен только в полноэкранном диалоге на телефоне */
.search-ai__close {
	display: none;
}

/*
 * Телефон: ответ помощника — диалог во весь экран (см. home.js). Сверху
 * заголовок с «К товарам» и крестиком, посередине прокручивается только
 * переписка, поле вопроса прижато к низу; страница под диалогом стоит.
 */
.search-ai-sheet {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	padding-top: env(safe-area-inset-top);
	background: var(--surface);
	color: var(--ink);
	outline: 0;
}

.search-ai-sheet[hidden] {
	display: none;
}

html.is-ai-sheet,
html.is-ai-sheet body {
	overflow: hidden;
}

/* кнопка-аватар виджета MoreAI висит поверх всего и закрыла бы поле вопроса */
html.is-ai-sheet [data-site-assistant-root] {
	display: none !important;
}

.search-ai-sheet .search-ai {
	flex: 1 1 auto;
	min-height: 0;
	gap: 0;
	padding: 0;
}

.search-ai-sheet .search-ai__head {
	gap: 8px;
	min-height: 56px;
	padding: 6px 12px 6px 16px;
	border-bottom: 1px solid var(--border);
}

.search-ai-sheet .search-ai__badge {
	flex: 1 1 auto;
	font-size: 16px;
}

.search-ai-sheet .search-ai__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var(--surface-subtle);
	color: var(--ink);
	cursor: pointer;
}

.search-ai__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.search-ai-sheet .search-ai__log {
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.search-ai-sheet .search-ai__foot {
	position: static;
	padding: 10px 16px 4px;
	border-top: 1px solid var(--border);
}

.search-ai-sheet .search-ai__more {
	padding: 0 16px calc(8px + env(safe-area-inset-bottom));
}

/* 16 px — иначе iOS при фокусе приближает страницу */
.search-ai-sheet .search-ai__input {
	font-size: 16px;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.icon-btn {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .24);
	color: #fff;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color .18s ease, background .18s ease, color .18s ease,
		width .36s cubic-bezier(.22, .68, .2, 1), height .36s cubic-bezier(.22, .68, .2, 1);
}

/* число позиций в корзине — на иконке в шапке и в доке */
.cart-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	display: grid;
	place-items: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

@media (hover: hover) {
	.icon-btn:hover {
		border-color: var(--accent);
		background: rgba(255, 255, 255, .22);
	}
}

.icon-btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Свёрнутая шапка. После первого экрана верхняя строка убирается, логотип
 * и элементы управления уменьшаются — шапка занимает вдвое меньше высоты,
 * но остаётся полноценной: каталог, поиск и иконки на месте.
 * Только с планшета и шире: на телефоне шапка не липкая и просто уезжает.
 */
@media (min-width: 641px) {

	.site-header.is-compact .header-row {
		min-height: 74px;
	}

	.site-header.is-compact .brand-mark img {
		height: 42px;
	}

	.site-header.is-compact .catalog-pill,
	.site-header.is-compact .search-form {
		height: 44px;
	}

	.site-header.is-compact .icon-btn {
		width: 42px;
		height: 42px;
	}

	/* объявление — часть «полной» шапки: свернулись, значит уже не мешаем */
	.site-header.is-compact .notice-bar {
		max-height: 0;
		opacity: 0;
		border-top-color: transparent;
		pointer-events: none;
	}
}

/* кнопка-лупа нужна только там, где строка поиска свёрнута (см. ≤640) */
.icon-btn--search,
/* трубка в ряду иконок — тоже только на телефоне, где скрыта верхняя строка */
.icon-btn--phone {
	display: none;
}

/* Меню связи: номер → «Позвонить» / «Заказать звонок» ---------- */

.phone-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .84);
	transition: color .15s ease;
}

.phone-toggle[aria-expanded="true"] {
	color: #fff;
}

@media (hover: hover) {
	.phone-toggle:hover {
		color: #fff;
	}
}

.phone-toggle strong {
	font-size: 15px;
	font-weight: 600;
}

.phone-toggle svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.phone-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* без скриптов кнопка не раскроется — тогда показываем обычную ссылку tel: */
.phone-fallback {
	display: none;
}

.v26.no-js .phone-toggle {
	display: none;
}

.v26.no-js .phone-fallback {
	display: inline;
	font-size: 15px;
	font-weight: 600;
}

.phone-pop {
	position: fixed;
	z-index: 60;
	width: 312px;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s cubic-bezier(.2, .7, .2, 1);
}

.phone-pop[hidden] {
	display: none;
}

.phone-pop.is-open {
	opacity: 1;
	transform: none;
}

.phone-pop__item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	text-align: left;
	transition: background .15s ease;
}

@media (hover: hover) {
	.phone-pop__item:hover {
		background: var(--surface-subtle);
	}
}

/* подпись слева, номер справа: так список читается столбиком */
.phone-pop__item--tel {
	justify-content: space-between;
	padding: 9px 12px;
}

.phone-pop__item--tel em {
	margin-top: 0;
	font-size: 13px;
}

.phone-pop__item--tel strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.phone-pop__sep {
	height: 1px;
	margin: 6px 12px;
	background: var(--border);
}

.phone-pop__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand);
}

.phone-pop__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.phone-pop__item strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.phone-pop__item em {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
	font-style: normal;
	line-height: 1.3;
}

/* Форма обратного звонка -------------------------------------- */

.callback {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	padding: 20px;
}

.callback[hidden] {
	display: none;
}

.callback__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 14, 12, .55);
	opacity: 0;
	transition: opacity .2s ease;
}

.callback.is-open .callback__backdrop {
	opacity: 1;
}

.callback__dialog {
	position: relative;
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 28px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity .2s ease, transform .24s cubic-bezier(.2, .7, .2, 1);
}

.callback.is-open .callback__dialog {
	opacity: 1;
	transform: none;
}

.callback__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: var(--surface-subtle);
	color: var(--ink);
	transition: background .15s ease;
}

@media (hover: hover) {
	.callback__close:hover {
		background: var(--surface-sunken);
	}
}

.callback__close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.v26 .callback__note {
	margin-top: 8px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
}

.callback__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
}

.callback__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.callback__field span {
	color: var(--muted);
	font-size: 13px;
}

.callback__field input {
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.callback__field input:focus {
	outline: 0;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
}

.callback__field input:user-invalid {
	border-color: #CE3F58;
}

.callback__captcha:empty {
	display: none;
}

.callback__error {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: rgba(206, 63, 88, .12);
	color: var(--danger-text);
	font-size: 13px;
	line-height: 1.45;
}

.callback__error[hidden] {
	display: none;
}

.callback__submit {
	width: 100%;
}

.callback__submit[disabled] {
	opacity: .6;
	pointer-events: none;
}

.callback__legal {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
}

.callback__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 12px 0 4px;
	text-align: center;
}

.callback__done[hidden] {
	display: none;
}

.callback__done-mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand);
}

.callback__done-mark svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.callback__done strong {
	font-size: 18px;
	font-weight: 600;
}

.callback__done p {
	color: var(--muted);
	font-size: 14px;
}

/*
 * Переключатель темы. Иконка — кружок, закрашенный наполовину; при смене
 * темы он переворачивается монеткой, и закрашенной становится другая
 * половина. Одна фигура на оба состояния: менять солнце на луну не нужно.
 */
.icon-btn--theme {
	perspective: 220px;
}

.theme-icon {
	display: grid;
	place-items: center;
	transition: transform .5s cubic-bezier(.4, .08, .2, 1);
}

.theme-icon__half {
	fill: currentColor;
	stroke: none;
}

.v26[data-theme="dark"] .theme-icon {
	transform: rotateY(180deg);
}

/* фотографии в тёмной теме слегка притушены — иначе они «пробивают» тёмный
   фон яркими светлыми пятнами. Логотипы, партнёрские значки и рисованные
   баннеры не трогаем: у них своя обработка, а иллюстрации и так тёмные. */
.v26[data-theme="dark"] .news-card__media img,
.v26[data-theme="dark"] .expo-row__img,
.v26[data-theme="dark"] .shop-card__img {
	filter: brightness(.88) saturate(.94);
}

/* Мегаменю каталога ------------------------------------------- */

.mega-menu {
	position: fixed;
	inset: 0;
	z-index: 40;
}

.mega-menu[hidden] {
	display: none;
}

.mega-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 14, 12, .48);
	opacity: 0;
	transition: opacity .2s ease;
}

.mega-menu.is-open .mega-menu__backdrop {
	opacity: 1;
}

/*
 * Структура меню повторяет каталог текущего сайта, а подача — как у
 * «Всех инструментов»: слева разделы, справа подкатегории плитками
 * (см. Layout/v26.ctp). Раздел в списке только показывает подкатегории,
 * в сам раздел ведёт плитка «Все товары раздела».
 */
.mega-menu__panel {
	position: absolute;
	top: var(--mega-menu-top, 152px);
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--mega-menu-top, 152px));
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	transform: translateY(-12px);
	opacity: 0;
	transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .22s ease;
}

.mega-menu.is-open .mega-menu__panel {
	transform: translateY(0);
	opacity: 1;
}

/* шапка панели с крестиком нужна только на мобильном полноэкранном варианте */
.mega-menu__bar {
	display: none;
}

.mega-menu__panel-inner {
	padding-block: 28px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mega-cat {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 0 40px;
	align-items: start;
}

.mega-cat__groups {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
}

.mega-cat__group {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: 0 12px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--border);
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.mega-cat__group.is-active {
	background: var(--surface-subtle);
	color: var(--brand);
}

@media (hover: hover) {
	.mega-cat__group:hover {
		color: var(--brand);
	}
}

.mega-cat__group:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.mega-cat__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--brand);
}

.mega-cat__icon svg,
.mega-tile--all .mega-tile__img svg,
.mega-tile__img--icon svg {
	width: 100%;
	height: 100%;
}

.v26[data-theme="dark"] .mega-cat__icon svg,
.v26[data-theme="dark"] .mega-tile--all .mega-tile__img svg,
.v26[data-theme="dark"] .mega-tile__img--icon svg {
	filter: brightness(0) invert(1);
	opacity: .82;
}

.mega-cat__title {
	flex: 1 1 auto;
	min-width: 0;
}

.mega-cat__chevron {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .5;
}

.mega-cat__pane[hidden] {
	display: none;
}

.mega-cat__pane-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.mega-cat__pane-title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

/* «Назад» нужен только на телефоне, где разделы и подкатегории — два экрана */
.mega-cat__back {
	display: none;
}

.mega-cat__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 10px;
}

.mega-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	transition: border-color .15s ease, transform .15s ease, color .15s ease;
}

@media (hover: hover) {
	.mega-tile:hover {
		border-color: var(--brand);
		color: var(--brand);
		transform: translateY(-2px);
	}
}

.mega-tile__img {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	border-radius: var(--radius-sm);
	background: var(--product-bg);
	overflow: hidden;
}

.mega-tile__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Иконы почти целиком: срезаем лишь несколько пикселей рамки сверху и снизу. */
.mega-tile__img--icon-crop img {
	object-fit: contain;
	transform: scale(1.1);
}

.mega-tile--all {
	border-color: transparent;
	background: var(--surface-subtle);
	color: var(--brand);
	font-weight: 600;
}

/* у раздела нет ни одного товара с фото — вместо пустого квадрата значок */
.mega-tile__img--icon {
	padding: 22px;
	background: var(--surface-subtle);
	color: var(--brand);
	opacity: .85;
}

.mega-tile--all .mega-tile__img {
	width: 80px;
	padding: 18px;
	background: transparent;
	color: var(--brand);
}

.mega-menu__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.mega-menu__foot a {
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

@media (hover: hover) {
	.mega-menu__foot a:hover {
		color: var(--brand);
	}
}


@media (max-width: 900px) {
	.mega-menu__panel {
		top: 0 !important;
		bottom: 0;
		max-height: none;
	}

	.mega-menu__bar {
		display: block;
		flex: 0 0 auto;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
	}

	.mega-menu__bar-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 58px;
	}

	.mega-menu__bar-title {
		font-size: 16px;
		font-weight: 600;
	}

	.mega-menu__close {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 999px;
		background: var(--surface-subtle);
		color: var(--ink);
	}

	.mega-menu__close svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.mega-menu__panel-inner {
		flex: 1 1 auto;
		padding-block: 4px 28px;
	}

	/*
	 * Телефон и планшет: два шага на одном месте. Сначала список разделов,
	 * по нажатию — подкатегории раздела с кнопкой «Все разделы» (is-drilled
	 * ставит home.js). Подсветка выбранного раздела тут не нужна.
	 */
	.mega-cat {
		display: block;
	}

	.mega-cat__groups {
		border-top: 0;
	}

	.mega-cat__group {
		padding-left: 0;
	}

	.mega-cat__group.is-active {
		background: none;
		color: var(--ink);
	}

	.mega-cat__panes {
		display: none;
	}

	.mega-cat.is-drilled .mega-cat__groups {
		display: none;
	}

	.mega-cat.is-drilled .mega-cat__panes {
		display: block;
		padding-top: 8px;
	}

	.mega-cat__pane-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.mega-cat__back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--brand);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
	}

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

	.mega-cat__pane-title {
		font-size: 20px;
	}

	.mega-cat__tiles {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 8px;
	}

	.mega-tile__img {
		width: 72px;
		height: 72px;
	}

	.mega-menu__foot {
		flex-direction: column;
		gap: 0;
	}

	.mega-menu__foot a {
		padding: 11px 0;
	}
}

/* Служебная плашка (объявления администрации) ---------------- */

/*
 * Раньше это была жёлтая полоса между шапкой и hero — она разрезала фото
 * пополам и кричала громче заголовка. Теперь объявление живёт внутри шапки,
 * на том же тёмном стекле: спокойная строка со значком, которую можно
 * закрыть (скрытие помнится по хешу текста — новое объявление покажется).
 */
.notice-bar {
	position: relative;
	z-index: 1;
	/* так же, как верхняя строка: высоту меряет скрипт, переход идёт по ней */
	max-height: var(--notice-h, 120px);
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, .12);
	background: rgba(4, 10, 9, .22);
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	line-height: 1.45;
	opacity: 1;
	transition: max-height .36s cubic-bezier(.22, .68, .2, 1),
		opacity .28s ease, border-top-color .28s ease;
}

.notice-bar > * {
	min-height: 0;
	overflow: hidden;
}

.notice-bar[hidden],
.v26.is-notice-hidden .notice-bar {
	display: none;
}

.notice-bar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	padding: 9px 0;
}

.notice-bar__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--accent);
}

.notice-bar__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.notice-bar__text {
	flex: 1 1 auto;
	min-width: 0;
}

.v26 .notice-bar__text .rich-text p {
	margin: 0;
}

/*
 * Текст объявления приходит из админки со своей вёрсткой — красным по центру
 * и полужирным. Ровно это и «рубило» страницу, поэтому инлайновое оформление
 * гасим: тон строки задаёт шапка, а не редактор в CMS.
 */
.notice-bar__text .rich-text,
.notice-bar__text .rich-text * {
	color: inherit !important;
	background: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	font-style: normal !important;
	text-align: left !important;
	text-transform: none !important;
}

.notice-bar__text a,
.notice-bar a {
	color: #fff !important;
	text-decoration: underline;
}

.notice-bar__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .72);
	transition: background .18s ease, color .18s ease;
}

@media (hover: hover) {
	.notice-bar__close:hover {
		background: rgba(255, 255, 255, .2);
		color: #fff;
	}
}

.notice-bar__close svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* Секции ----------------------------------------------------- */

.section {
	padding-top: clamp(52px, 5.5vw, 84px);
	padding-bottom: clamp(52px, 5.5vw, 84px);
}

/*
 * После чата с ИИ идёт «Производство». Оба section дают полный вертикальный
 * padding — между карточками выходит ~168 px, заметно больше, чем у соседних
 * пар (там следующий блок часто с padding-top: 0). Сжимаем стык.
 */
#ai-assistant + .section {
	padding-top: 0;
}

.section-tinted {
	background: var(--surface-subtle);
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 32px;
}

.section-head p {
	margin-top: 10px;
	max-width: 620px;
	color: var(--muted);
}

/* Hero — фото предприятия во весь экран ----------------------- */

/*
 * Растягиваем фото под шапку: hero стоит сразу после неё, а сама шапка
 * "парит" стеклом поверх верхней части — margin-top на высоту шапки в минус
 * подтягивает hero под неё, создавая эффект одного цельного полотна.
 */

@keyframes hero-drift {
	from {
		transform: scale(1.04) translate3d(-1.1%, .9%, 0);
	}

	to {
		transform: scale(1.14) translate3d(1.3%, -1.5%, 0);
	}
}

/* Комбинированное затенение: радиальное виньетирование по краям
   + линейное усиление книзу, там где садится текст. */

/* редкий акцент золотом — короткий штрих перед вводным киккером,
   единственное декоративное использование accent на странице */

/* Два равнозначных пути ------------------------------------- */

/* в светлой теме карточки упирались прямо в нижний край фото — нужен воздух */

.split-paths {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/*
 * Базовая раскладка карточки — снимок сверху, подпись на тёмной плашке под
 * ним. Она честно работает на любой ширине и ничего не пишет поверх кадра.
 * Наложение текста на фотографию включается отдельно, от 1181px (ниже), где
 * карточка достаточно широка, чтобы текст уместился на пустой стене слева.
 *
 * Плашка тёмная в обеих темах: снимок тёмный, и белый текст на светлом
 * --brand-hover тёмной темы не прочитался бы. Цвет держим компонентами —
 * из них же собирается градиент стыка с фотографией.
 */
.path-card {
	--path-panel: 0, 47, 60;

	position: relative;
	display: flex;
	flex-direction: column;
	color: #fff;
	overflow: hidden;
	background: rgb(var(--path-panel));
}

.v26[data-theme="dark"] .path-card {
	--path-panel: 6, 30, 38;
}

/* композиция снимков: натюрморт справа, слева пустая стена. В этой раскладке
   текста поверх нет, поэтому кадрируем ближе к предметам */
.path-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 66% center;
	transition: transform .5s ease;
}

/* низ снимка уводим в цвет плашки, чтобы стык фото и текста не читался
   линией; повторяет пропорцию картинки, поэтому ложится ровно на неё */
.path-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	aspect-ratio: 16 / 10;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(var(--path-panel), 0) 72%,
		rgba(var(--path-panel), .55) 92%,
		rgba(var(--path-panel), .92) 100%
	);
}

/* фон у самой плашки, а не только у карточки: при наведении снимок
   увеличивается и иначе выехал бы на текст */
.path-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 auto;
	padding: 24px 26px 28px;
	background: rgb(var(--path-panel));
}

@media (hover: hover) {
	.path-card:hover img {
		transform: scale(1.04);
	}
}

.path-card .t-kicker {
	color: rgba(255, 255, 255, .8);
}

.path-card h2 {
	margin-top: 10px;
	font-size: clamp(23px, 2.3vw, 30px);
	line-height: 1.2;
	font-weight: 500;
}

.v26 .path-card p {
	margin-top: 12px;
	margin-bottom: 26px;
	color: rgba(255, 255, 255, .84);
	font-size: 15px;
}

/* margin-top: auto прижимает кнопки к низу, чтобы в паре карточек с
   разной длиной подписи они стояли на одной линии */
.path-card .btn {
	margin-top: auto;
	align-self: flex-start;
}

/*
 * Широкий экран: снимок становится фоном, текст ложится на пустую стену
 * слева. Пропорция карточки жёсткая, поэтому кадр режется одинаково на
 * любой ширине — натюрморт всегда начинается около 62% ширины карточки, а
 * колонка текста обрывается раньше и не наезжает ни на иконы, ни на лики.
 */
@media (min-width: 1181px) {
	.path-card {
		aspect-ratio: 3 / 2;
		justify-content: flex-end;
		padding: clamp(30px, 3vw, 40px);
	}

	/*
	 * Пропорция карточки фиксирована, поэтому кадр режется по горизонтали
	 * всегда одинаково — независимо от ширины экрана. Кадрируем от левого
	 * края: пустая стена под текст остаётся целиком, а натюрморт уходит за
	 * правый край карточки.
	 */
	.path-card img {
		position: absolute;
		inset: 0;
		z-index: 0;
		height: 100%;
		aspect-ratio: auto;
		object-position: 20% center;
	}

	/*
	 * Скрим держит текст в левом нижнем углу и отпускает правую часть кадра.
	 * Снимки в карточках — настоящие фото с производства, у них нет пустой
	 * стены под подпись, поэтому к косому затемнению добавлено ещё одно —
	 * снизу, где стоят заголовок, текст и кнопка.
	 */
	.path-card::after {
		inset: 0;
		width: auto;
		aspect-ratio: auto;
		background:
			linear-gradient(
				100deg,
				rgba(0, 17, 22, .86) 0%,
				rgba(0, 17, 22, .72) 30%,
				rgba(0, 17, 22, .34) 52%,
				rgba(0, 17, 22, 0) 70%
			),
			linear-gradient(
				0deg,
				rgba(0, 17, 22, .62) 0%,
				rgba(0, 17, 22, .3) 38%,
				rgba(0, 17, 22, 0) 62%
			);
	}

	/* колонка обрывается там, где на снимке кончается пустая стена: правый
	   край текста не доходит до предметов, тем более до ликов */
	.path-card__body {
		flex: none;
		max-width: min(55%, 350px);
		padding: 0;
		background: none;
	}

	.v26 .path-card p {
		margin-bottom: 0;
	}

	.path-card .btn {
		margin-top: 26px;
	}
}

/* Каталог ---------------------------------------------------- */

.chip {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--surface);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

@media (hover: hover) {
	.chip:hover {
		border-color: var(--brand);
		color: var(--brand);
	}
}

/*
 * Один приём на весь каталог: крупная гравюрная пиктограмма раздела на
 * светлом поле и подпись под ней. Раньше в плитке соседствовали иконка
 * и кружок с фотографией, и было непонятно, что здесь главное; фотографии
 * при этом заведены не у всех разделов и сняты слишком крупно.
 */

/* пиктограммы в спрайте разных пропорций — задаём поле, а не размер:
   symbol сам впишется в него, сохранив свои пропорции */

/* пиктограммы в спрайте залиты фирменным тёмным — в тёмной теме их надо осветлить */

/* «Выполненные работы» — акцентный тайл на два столбца, без фотографии */

/* Товары ----------------------------------------------------- */

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
	.product-card:hover {
		border-color: var(--brand);
		box-shadow: var(--shadow-md);
	}
}

/*
 * Превью изделия. Пропорции жёсткие (картинка абсолютная и не может растянуть
 * бокс), формат квадратный: медиатека отдаёт снимки вписанными в квадрат,
 * и вытянутый бокс оставлял бы изделие висеть в середине пустого поля.
 * Изделие стоит в световом пятне и отбрасывает мягкую тень — фотографии
 * сняты на белом, без подложки они выглядели вырезанными.
 */
/*
 * Слои превью намеренно НЕ изолированы: лента кадров должна оказаться выше
 * прозрачной накладки .product-card__link::after, иначе она перехватывала бы
 * и свайп, и наведение. Порядок снизу вверх: тень → кадры → виньетка →
 * бейджи и чёрточки.
 */
.product-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background: var(--product-bg);
}

/* лёгкая виньетка цветом поля превью — дотягивает края до --product-bg,
   без тёмного «грязевого» градиента (transparent в mix с белым давал бы серость) */
.product-media__halo {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(to right,
			var(--product-bg) 0%,
			color-mix(in srgb, var(--product-bg) 55%, transparent) 8%,
			transparent 16%,
			transparent 84%,
			color-mix(in srgb, var(--product-bg) 55%, transparent) 92%,
			var(--product-bg) 100%),
		linear-gradient(to bottom,
			var(--product-bg) 0%,
			color-mix(in srgb, var(--product-bg) 55%, transparent) 6%,
			transparent 14%,
			transparent 78%,
			color-mix(in srgb, var(--product-bg) 55%, transparent) 88%,
			var(--product-bg) 100%);
}

/*
 * До четырёх снимков товара. Лента с scroll-snap: на телефоне листается
 * пальцем без единой строки скриптов, на десктопе кадр меняется по движению
 * курсора над превью (см. home.js) — никаких кнопок поверх фотографии.
 */
.product-frames {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* у html включена плавная прокрутка — здесь она бы тормозила перебор */
	scroll-behavior: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.product-frames::-webkit-scrollbar {
	display: none;
}

.product-frame {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	/* один свайп — один кадр, а не пролёт всей галереи */
	scroll-snap-stop: always;
}

.product-frame img {
	position: absolute;
	top: 7%;
	left: 9%;
	width: 82%;
	height: 78%;
	object-fit: contain;
	/*
	 * Снимки с белым фоном дают резкий прямоугольник на кремовом лайтбоксе
	 * (особенно в тёмной теме). Узкая маска по периметру (~8%) растворяет
	 * кромку в поле, центр изделия остаётся чётким.
	 */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
	mask-composite: intersect;
}

/* индикатор кадров — тонкие чёрточки по низу снимка */
.product-ticks {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}

.product-ticks span {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--product-tick);
	transition: background .2s ease;
}

.product-ticks span.is-active {
	background: var(--product-tick-active);
}

.product-media__shadow {
	position: absolute;
	z-index: 2;
	left: 24%;
	right: 24%;
	bottom: 13%;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, var(--product-shadow) 0%, transparent 72%);
}

.product-media__empty {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: grid;
	place-items: center;
	color: var(--border-strong);
}

.product-media__empty svg {
	width: 56px;
	height: 56px;
}

.product-badges {
	position: absolute;
	z-index: 5;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	pointer-events: none;
}

.product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
	padding: 18px;
}

.product-name {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	transition: color .18s ease;
}

@media (hover: hover) {
	.product-card:hover .product-name {
		color: var(--brand);
	}
}

.product-sku {
	color: var(--muted);
	font-size: 12px;
}

.product-spacer {
	flex: 1;
	min-height: 12px;
}

.product-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.price-was {
	display: block;
	color: var(--muted);
	font-size: 12px;
	text-decoration: line-through;
}

.product-foot .btn {
	min-height: 42px;
	padding: 0 16px;
	font-size: 13px;
}

.product-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Производство ----------------------------------------------- */

.v26 .rich-text p {
	margin: 0 0 12px;
}

.v26 .rich-text p:last-child {
	margin-bottom: 0;
}

.rich-text img,
.rich-text iframe,
.rich-text table {
	max-width: 100%;
}

/* Путь изделия ----------------------------------------------- */

.process-strip {
	--process-num: 60px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* золотая нить через все этапы; прорисовывается, когда этапы появляются */
.process-strip::before {
	content: "";
	position: absolute;
	top: calc(var(--process-num) / 2);
	left: calc(var(--process-num) / 2);
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 78%, transparent 100%);
	transform-origin: left center;
	transition: transform 1.4s cubic-bezier(.4, .1, .2, 1);
}

.process-strip:has(> .is-armed)::before {
	transform: scaleX(0);
}

.process-strip:has(> .is-visible)::before {
	transform: scaleX(1);
}

.process-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.process-step__num {
	display: grid;
	place-items: center;
	width: var(--process-num);
	height: var(--process-num);
	margin-bottom: 24px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: var(--page);
	color: var(--accent-text);
	font-family: var(--font-display, Georgia, "Times New Roman", serif);
	font-size: 30px;
	line-height: 1;
}

.process-step h3 {
	font-family: var(--font-display, var(--font));
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
}

.process-step p {
	margin-top: 10px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
}

/* итог этапа прижат книзу, чтобы строки итогов шли на одной высоте */
.process-step__result {
	align-self: stretch;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	color: var(--accent-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	transition: color .18s ease;
}

.process-step p {
	margin-bottom: 16px;
}

a.process-step__result {
	text-decoration: none;
}

@media (hover: hover) {
	a.process-step__result:hover {
		color: var(--accent-hover);
	}
}

@media (max-width: 900px) {
	/* в столбец: нить идёт вертикально слева */
	.process-strip {
		--process-num: 48px;
		grid-template-columns: 1fr;
		gap: 28px;
		max-width: 620px;
	}

	.process-strip::before {
		top: calc(var(--process-num) / 2);
		bottom: 0;
		left: calc(var(--process-num) / 2);
		right: auto;
		width: 1px;
		height: auto;
		background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 82%, transparent 100%);
		transform-origin: center top;
	}

	.process-strip:has(> .is-armed)::before {
		transform: scaleY(0);
	}

	.process-strip:has(> .is-visible)::before {
		transform: scaleY(1);
	}

	.process-step {
		padding-left: calc(var(--process-num) + 20px);
	}

	.process-step__num {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		font-size: 24px;
	}

	.process-step h3 {
		padding-top: 10px;
		font-size: 20px;
	}
}

/* Полоса заказа ---------------------------------------------- */

.order-strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 32px 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-subtle);
}

.order-strip__lead {
	display: flex;
	align-items: center;
	gap: 20px;
}

.order-strip__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent-text);
}

.order-strip__icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* только описание справа: заголовок полосы тоже <p>, но ему ширина и серый ни к чему */
.order-strip > p {
	max-width: 380px;
	color: var(--muted);
}

/*
 * Заявка раскрывается в самой полосе: панель — последний ряд флекса,
 * высота растёт через grid-template-rows 0fr → 1fr. Между рядами зазора
 * нет: свёрнутая панель иначе добавляла его пустотой под кнопкой, и снизу
 * у полосы воздуха было больше, чем сверху. Отступ до формы — у самой формы.
 */
.order-strip {
	flex-wrap: wrap;
	row-gap: 0;
	/* раскрытая форма подтягивается к верху экрана — не под липкую шапку */
	scroll-margin-top: 130px;
}

/* с переносом описание сталкивало кнопку на свою строку — пусть сжимается само */
.order-strip > p {
	flex: 1 1 0;
	min-width: 0;
}

.order-strip__toggle svg {
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.order-strip.is-open .order-strip__toggle {
	border-color: var(--border-strong);
	background: transparent;
	color: var(--ink);
}

.order-strip.is-open .order-strip__toggle svg {
	transform: rotate(180deg);
}

.order-strip__panel {
	flex: none;
	width: 100%;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1);
}

.order-strip.is-open .order-strip__panel {
	grid-template-rows: 1fr;
}

.order-strip__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.order-form,
.order-form__done {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.order-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.order-form[hidden],
.order-form__done[hidden] {
	display: none;
}

/* поля выходят по очереди, когда панель уже начала раскрываться */
.order-form__kinds,
.order-form__field,
.order-form__foot {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

.order-strip.is-open .order-form__kinds,
.order-strip.is-open .order-form__field,
.order-strip.is-open .order-form__foot {
	opacity: 1;
	transform: none;
	transition-delay: calc(.14s + var(--i, 0) * .05s);
}

.order-form__kinds {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.order-form__kinds legend,
.order-form__field > span {
	margin-bottom: 8px;
	padding: 0;
	color: var(--muted);
	font-size: 13px;
}

.order-form__field > span em {
	font-style: normal;
	opacity: .75;
}

.order-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.order-chip {
	position: relative;
	cursor: pointer;
}

.order-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.order-chip span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--surface);
	font-size: 14px;
	transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.order-chip input:checked + span {
	border-color: var(--brand-fill);
	background: var(--brand-fill);
	color: var(--on-brand);
}

.order-chip input:active + span {
	transform: scale(.97);
}

.order-chip input:focus-visible + span {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.order-chip:hover input:not(:checked) + span {
		border-color: var(--brand);
		color: var(--brand);
	}
}

.order-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
}

.order-form__field {
	display: flex;
	flex-direction: column;
}

.order-form__field input,
.order-form__field textarea {
	width: 100%;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.order-form__field input {
	height: 48px;
	padding: 0 14px;
}

.order-form__field textarea {
	min-height: 112px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.order-form__field input:focus,
.order-form__field textarea:focus {
	outline: 0;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
}

.order-form__field input:user-invalid {
	border-color: #CE3F58;
}

/*
 * Капча выезжает только после «Отправить»: до этого её нет ни на экране,
 * ни в высоте формы. Пройденная, она сама отправляет заявку (home.js).
 */
.order-form__captcha {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: -18px;
	opacity: 0;
	transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, margin-top .45s ease;
}

.order-form.is-captcha .order-form__captcha {
	grid-template-rows: 1fr;
	margin-top: 0;
	opacity: 1;
}

.order-form__captcha-inner {
	min-height: 0;
	overflow: hidden;
}

.order-form__captcha-inner p {
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 2px solid var(--accent);
	font-size: 14px;
}

.order-form__captcha-box {
	min-height: 102px;
	max-width: 400px;
}

.order-form__error {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: rgba(206, 63, 88, .12);
	color: var(--danger-text);
	font-size: 13px;
	line-height: 1.45;
}

.order-form__error[hidden] {
	display: none;
}

.order-form__foot {
	display: flex;
	align-items: center;
	gap: 20px;
}

.order-form__submit[disabled] {
	opacity: .6;
	pointer-events: none;
}

.order-form__legal {
	margin: 0;
	max-width: 360px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.45;
}

.order-form__done {
	display: flex;
	align-items: center;
	gap: 18px;
	outline: 0;
	animation: order-done-in .5s cubic-bezier(.2, .7, .2, 1) both;
}

.order-form__done strong {
	display: block;
	font-size: 18px;
	font-weight: 600;
}

.order-form__done p {
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
}

.order-form__done-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--brand-fill);
	color: var(--on-brand);
	animation: order-mark-in .5s cubic-bezier(.3, 1.4, .5, 1) .1s both;
}

.order-form__done-mark svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	animation: order-mark-draw .4s ease-out .4s forwards;
}

@keyframes order-done-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes order-mark-in {
	from {
		transform: scale(.4);
		opacity: 0;
	}
}

@keyframes order-mark-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 640px) {
	/* на телефоне шапка не липкая: отступ под неё не нужен */
	.order-strip {
		scroll-margin-top: 16px;
	}

	.order-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.order-form__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.order-form__done {
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.order-strip__panel,
	.order-form__captcha,
	.order-form__kinds,
	.order-form__field,
	.order-form__foot {
		transition: none;
	}

	.order-form__done,
	.order-form__done-mark,
	.order-form__done-mark svg {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Новости ---------------------------------------------------- */

/* Дата листком календаря: число крупно, месяц словом, золотая кромка сверху */
.date-leaf {
	flex: 0 0 auto;
	display: inline-grid;
	justify-items: center;
	align-content: start;
	min-width: 66px;
	padding: 7px 8px 8px;
	border-top: 3px solid var(--accent);
	border-radius: 4px;
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	color: var(--muted);
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
}

.date-leaf b {
	color: var(--ink);
	font-family: var(--font-display, var(--font));
	font-size: 28px;
	font-weight: 400;
	line-height: 1.05;
}

.date-leaf span + span {
	opacity: .75;
}

/*
 * События: первое крупно, два следующих — справа друг под другом.
 * Боковые карточки держат кадр 16:10, а крупная тянется на их общую высоту.
 * Колонки 16:9 подобраны так, чтобы и крупный снимок вышел около 16:10.
 */
.news-grid {
	display: grid;
	grid-template-columns: minmax(0, 16fr) minmax(0, 9fr);
	gap: 24px;
}

.news-card {
	position: relative;
	display: flex;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

@media (hover: hover) {
	.news-card:hover {
		border-color: var(--brand);
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}
}

.news-card__media {
	position: relative;
	overflow: hidden;
	background: var(--surface-sunken);
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.news-card:hover .news-card__media img {
		transform: scale(1.03);
	}
}

.news-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	flex: 1;
	min-width: 0;
	padding: 20px;
}

.news-card h3 {
	font-family: var(--font-display, var(--font));
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.55;
}

.news-card--lead {
	grid-row: span 2;
	flex-direction: column;
}

.news-card--lead .news-card__media {
	flex: 1 1 0;
	min-height: 240px;
}

/* листок «приколот» к углу снимка */
.news-card__media .date-leaf {
	position: absolute;
	left: 20px;
	bottom: 20px;
}

/* сбоку: снимок во всю карточку, заголовок внизу на затемнении */
.news-card--over {
	aspect-ratio: 16 / 10;
	color: #fff;
}

.news-card--over .news-card__media {
	position: absolute;
	inset: 0;
}

.news-card--over .news-card__media .date-leaf {
	top: 16px;
	left: 16px;
	bottom: auto;
}

.news-card--over .news-card__body {
	position: relative;
	justify-content: flex-end;
	padding: 72px 20px 18px;
	background: linear-gradient(180deg, rgba(4, 10, 12, 0) 0%, rgba(4, 10, 12, .55) 45%, rgba(4, 10, 12, .88) 100%);
}

/* три строки: у соседних новостей заголовки часто начинаются одинаково
   («Святейший Патриарх … совершил чин великого освящения…»), и на двух
   строках карточки не отличить */
.news-card--over h3 {
	-webkit-line-clamp: 3;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.news-card--lead .news-card__body {
	flex: none;
	gap: 10px;
	padding: 24px 28px 28px;
}

.news-card--lead h3 {
	font-size: 26px;
	line-height: 1.25;
	-webkit-line-clamp: 3;
}

/* Выставки — горизонтальная лента ---------------------------- */

/*
 * Лента прокручивается пальцем на тач-экранах и стрелками на десктопе.
 * Системный скроллбар прячем: он ломал вертикальный ритм секции и уродовал
 * нижний край карточек — вместо него роль подсказки играют затухающие края
 * и сами стрелки.
 */
.scroll-rail {
	position: relative;
}

.scroll-row {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* свайп по ленте не должен уводить страницу назад по истории */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.scroll-row::-webkit-scrollbar {
	display: none;
}

.rail-nav {
	position: absolute;
	top: calc(50% - 30px);
	z-index: 5;
	display: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-md);
	transition: opacity .2s ease, background .18s ease, color .18s ease,
		border-color .18s ease, transform .18s ease;
}

.rail-nav--prev {
	left: 4px;
}

.rail-nav--next {
	right: 4px;
}

@media (hover: hover) {
	.rail-nav:hover {
		background: var(--brand-fill);
		border-color: transparent;
		color: var(--on-brand);
	}
}

.rail-nav:active {
	transform: scale(.94);
}

.rail-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

.rail-nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* стрелки — только там, где есть мышь: пальцем лента листается сама */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
	.scroll-rail.has-rail-nav .rail-nav {
		display: grid;
	}
}

/* Затухание по краям горизонтальных лент ----------------------- */

/*
 * Подсказывает, что ленту можно прокрутить дальше. Края затухают только
 * с той стороны, где ещё есть контент — состояние считает JS и переключает
 * классы has-fade-start/has-fade-end. Без JS лента остаётся без масок,
 * то есть полностью читаемой.
 */
[data-scroll-fade].has-fade-start.has-fade-end {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

[data-scroll-fade].has-fade-start:not(.has-fade-end) {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
	mask-image: linear-gradient(90deg, transparent, #000 28px);
}

[data-scroll-fade].has-fade-end:not(.has-fade-start) {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.scroll-row > * {
	flex: 0 0 clamp(240px, 24vw, 300px);
	scroll-snap-align: start;
	/*
	 * Короткий свайп пальцем уносил ленту через несколько карточек: точки
	 * привязки лишь притягивают конец инерции, а сама инерция летит мимо них.
	 * scroll-snap-stop обязывает остановиться на каждой — один свайп даёт
	 * ровно одну карточку.
	 */
	scroll-snap-stop: always;
}

/* Выставки — списком в две колонки: листок, название, маленький снимок */
.expo-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.expo-row {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 100%;
	padding: 12px 12px 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	transition: border-color .18s ease;
}

@media (hover: hover) {
	.expo-row:hover {
		border-color: var(--brand);
	}
}

.expo-row .date-leaf {
	background: var(--surface-subtle);
	box-shadow: none;
}

.expo-row__title {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.expo-row__img {
	flex: 0 0 auto;
	width: 104px;
	height: 78px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

/* Отзывы ----------------------------------------------------- */

.review-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.scroll-row .review-card {
	flex-basis: clamp(280px, 30vw, 380px);
}

.review-card__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.review-card__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.review-card__head time {
	margin-left: auto;
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
}

.review-card__text {
	position: relative;
	z-index: 1;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* золотая «лапка» над текстом — небольшая, в своей строке, ничего не перекрывает */
.review-card__mark {
	display: block;
	height: 22px;
	margin-bottom: -4px;
	color: var(--accent);
	font-family: var(--font-display, Georgia, "Times New Roman", serif);
	font-size: 48px;
	line-height: 1;
	user-select: none;
}

/* с засечками сам отзыв набран курсивом PT Serif — голос человека, а не интерфейса */
.v26[data-serif] .review-card__text,
.v26[data-serif] .review-dialog__text {
	color: var(--ink);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
	line-height: 1.55;
}

.v26[data-serif] .review-card__text {
	-webkit-line-clamp: 6;
}

.review-card__more {
	align-self: flex-start;
	margin-top: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--brand);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: color .18s ease;
}

.review-card__more[hidden] {
	display: none;
}

@media (hover: hover) {
	.review-card__more:hover {
		color: var(--brand-hover);
	}
}

.review-dialog {
	position: fixed;
	width: min(600px, calc(100% - 40px));
	max-height: calc(100vh - 40px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	color: var(--ink);
}

/* поля внутри обёртки: так клик мимо окна попадает в сам dialog, а клик по полям — нет */
.review-dialog__body {
	position: relative;
	padding: 32px;
}

.review-dialog::backdrop {
	background: rgba(8, 14, 12, .55);
}

.review-dialog__text {
	margin: 10px 0 20px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
}

/* Блок ИИ-помощника ------------------------------------------ */

.ai-block {
	position: relative;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	align-items: stretch;
	gap: clamp(28px, 4vw, 64px);
	padding: clamp(26px, 3.6vw, 56px);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	background-image: radial-gradient(78% 120% at 100% 0%, var(--brand-soft) 0%, transparent 60%);
	overflow: hidden;
}

.ai-block::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: -170px;
	right: -130px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(180, 134, 60, .22) 0%, transparent 66%);
	pointer-events: none;
}

.ai-block > * {
	position: relative;
	z-index: 1;
}

.ai-block__body .t-h2 {
	margin-top: 10px;
	max-width: 560px;
}

.v26 .ai-block__lead {
	margin-top: 14px;
	max-width: 560px;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.6;
}

.ai-ask {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	width: 100%;
	margin-top: 4px;
	padding: 7px 7px 7px 14px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: border-color .18s ease, box-shadow .18s ease;
}

/* фокус показываем кольцом на всей пилюле, а не системной обводкой вокруг
   самого поля — прямоугольник внутри скруглённой рамки выглядел неряшливо */
.ai-ask:focus-within {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-md);
}

.ai-ask input:focus,
.ai-ask input:focus-visible {
	outline: 0;
}

.ai-ask__spark {
	width: 22px;
	height: 22px;
	color: var(--accent);
	animation: ai-spark 3.4s ease-in-out infinite;
}

.ai-ask__spark svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

@keyframes ai-spark {
	0%,
	100% {
		transform: scale(1);
		opacity: .82;
	}

	50% {
		transform: scale(1.14);
		opacity: 1;
	}
}

.ai-ask input {
	min-width: 0;
	height: 46px;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 15px;
}

.ai-ask .btn {
	border-radius: 999px;
	min-height: 46px;
}

.ai-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}

.ai-chips__label {
	color: var(--muted);
	font-size: 13px;
}

/*
 * На телефоне восемь подсказок вставали столбиком в шесть строк и
 * отодвигали сам чат на экран вниз. Для примера хватает четырёх.
 */
@media (max-width: 640px) {
	.ai-chips a:nth-of-type(n + 5) {
		display: none;
	}
}

.chip-sm {
	height: 36px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 500;
}

.v26 .ai-note {
	max-width: 520px;
	margin-top: 18px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}

.ai-demo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	min-height: 420px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-subtle);
}

.ai-demo__head {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.ai-demo__reset {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--brand);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.ai-demo__reset[hidden] {
	display: none;
}

/* лента сообщений: у живого диалога длина непредсказуема, поэтому свой скролл */
.ai-demo__thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 220px;
	max-height: 420px;
	overflow-y: auto;
	scrollbar-width: thin;
	overscroll-behavior: contain;
	padding-right: 2px;
}

.ai-demo__sample {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ai-demo__msg--error {
	align-self: flex-start;
	border: 1px solid rgba(206, 63, 88, .3);
	border-bottom-left-radius: 6px;
	background: rgba(206, 63, 88, .1);
	color: var(--ink);
}

.ai-demo__msg p {
	margin: 0 0 8px;
}

.ai-demo__msg p:last-child {
	margin-bottom: 0;
}

.ai-demo__msg ul {
	margin: 0 0 8px;
	padding-left: 18px;
}

.ai-demo__msg li {
	margin-bottom: 4px;
}

.ai-demo__msg a {
	color: var(--brand);
	text-decoration: underline;
}

.ai-demo__msg--user a {
	color: #fff;
}

.ai-sources {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-self: flex-start;
	max-width: 90%;
	padding: 10px 14px;
	border: 1px dashed var(--border-strong);
	border-radius: 14px;
}

.ai-sources__title {
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ai-sources a {
	color: var(--brand);
	font-size: 13px;
	line-height: 1.35;
	text-decoration: underline;
}

.ai-demo__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #3FBF7F;
	box-shadow: 0 0 0 4px rgba(63, 191, 127, .16);
}

.ai-demo__msg {
	max-width: 90%;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
}

.ai-demo__msg--user {
	align-self: flex-end;
	border-bottom-right-radius: 6px;
	background: var(--brand-fill);
	color: var(--on-brand);
}

.ai-demo__msg--bot {
	align-self: flex-start;
	border: 1px solid var(--border);
	border-bottom-left-radius: 6px;
	background: var(--surface);
	color: var(--ink);
}

.ai-demo__typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 16px;
	border-bottom-left-radius: 6px;
	background: var(--surface);
}

.ai-demo__typing em {
	margin-left: 7px;
	color: var(--muted);
	font-size: 14px;
	font-style: normal;
}

.ai-demo__typing span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--muted);
	animation: ai-typing 1.25s ease-in-out infinite;
}

.ai-demo__typing span:nth-child(2) {
	animation-delay: .16s;
}

.ai-demo__typing span:nth-child(3) {
	animation-delay: .32s;
}

@keyframes ai-typing {
	0%,
	60%,
	100% {
		opacity: .25;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* Магазины --------------------------------------------------- */

.shops-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.shop-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	transition: border-color .18s ease, transform .18s ease;
}

@media (hover: hover) {
	.shop-card:hover {
		border-color: var(--brand);
		transform: translateY(-2px);
	}
}

.shop-card__img {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	background: var(--surface-sunken);
}

.shop-card__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.shop-card__address {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

/* Партнёры --------------------------------------------------- */

.partner-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.partner-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 10px 18px 10px 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	transition: border-color .18s ease, transform .18s ease;
}

@media (hover: hover) {
	.partner-chip:hover {
		border-color: var(--brand);
		transform: translateY(-2px);
	}
}

.partner-chip img {
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.partner-chip span {
	font-size: 14px;
	font-weight: 500;
}

/* Подвал ----------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--footer-rule);
	background: var(--footer-bg);
	color: var(--footer-ink);
	padding-top: clamp(48px, 5vw, 72px);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 44px;
}

/* тот же кадр, что и в шапке: без мелкой подписи под знаком */
.footer-brand img {
	height: 56px;
	width: auto;
	aspect-ratio: 360 / 160;
	object-fit: cover;
	object-position: top center;
	filter: brightness(0) invert(1);
	opacity: .9;
}

.footer-brand p {
	margin-top: 16px;
	max-width: 320px;
	color: var(--footer-muted);
	font-size: 13px;
	line-height: 1.6;
}

.footer-soc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.footer-soc__link {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	color: rgba(255, 255, 255, .86);
	transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

@media (hover: hover) {
	.footer-soc__link:hover {
		border-color: var(--accent);
		background: rgba(255, 255, 255, .08);
		color: #fff;
		transform: translateY(-2px);
	}
}

.footer-soc__link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.footer-col h2 {
	margin: 0 0 16px;
	color: var(--footer-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* подчёркивание есть всегда, но прозрачное: при наведении оно проявляется
   плавно, а не появляется рывком, как text-decoration: underline */
.footer-col a {
	display: block;
	min-height: 32px;
	padding: 4px 0;
	color: rgba(255, 255, 255, .86);
	font-size: 14px;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color .18s ease, text-decoration-color .18s ease;
}

@media (hover: hover) {
	.footer-col a:hover {
		color: #fff;
		text-decoration-color: currentColor;
	}
}

.footer-bottom {
	min-height: 66px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: var(--footer-muted);
	font-size: 13px;
}

@media (hover: hover) {
	.footer-bottom a:hover {
		color: #fff;
	}
}

/* Плавное появление при скролле ------------------------------- */

/*
 * По умолчанию элемент виден без анимации — так безопаснее для тех, у кого
 * отключён JS. Скрытое "заряженное" состояние ставит только скрипт, и только
 * тем блокам, что ещё не попали в область видимости при загрузке страницы.
 */
[data-reveal] {
	opacity: 1;
	transform: none;
}

[data-reveal].is-armed {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1);
}

[data-reveal].is-armed.is-visible {
	opacity: 1;
	transform: none;
}

/* Мобильный док ---------------------------------------------- */

.mobile-dock {
	display: none;
}

/* Адаптив ---------------------------------------------------- */

@media (max-width: 1180px) {
	.v26 {
		--shell: calc(100vw - 40px);
	}

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

	/* рядом с ценой кнопка в карточку не вмещается; карточка целиком ссылка */
	.product-foot .btn {
		display: none;
	}
}

/* подпись прячем только на совсем узких экранах: без неё значок непонятен */
@media (max-width: 359px) {
	.search-form__ai {
		padding: 0 10px;
	}

	.search-form__ai-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 900px) {
	.v26 {
		--header-height: 202px;
	}

	.header-row {
		flex-wrap: wrap;
		padding-top: 14px;
		padding-bottom: 14px;
		min-height: 0;
	}

	.search-form {
		order: 5;
		flex-basis: 100%;
		max-width: none;
	}


	.split-paths {
		grid-template-columns: 1fr;
	}

	/* во всю ширину экрана кадр 16/10 слишком высокий — подрезаем его.
	   Режется он по вертикали, поэтому опускаем точку кадрирования вниз:
	   предметы стоят на столе у нижнего края и иначе теряют основание */
	.path-card img,
	.path-card::after {
		aspect-ratio: 21 / 9;
	}

	.path-card img {
		object-position: 66% 78%;
	}

	/* minmax: при 1fr длинное слово в названии выставки распирало страницу */
	.news-grid,
	.expo-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-card--lead {
		grid-row: auto;
	}

	.news-card--lead .news-card__media {
		flex: none;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	/* по шесть карточек в два ряда: две колонки растягивали блок на четыре экрана */
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.order-strip {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 32px;
		padding: 26px;
	}

	/* в колонку панель — обычный элемент, и gap над ней гасится отступом */
	.order-strip__panel {
		margin-top: -32px;
	}

	/*
	 * В одну колонку рамка блока, рамка диалога и рамка поля вставали одна
	 * в другую — три вложенные плашки на узком экране. Внешнюю убираем:
	 * текст ложится прямо на страницу, карточкой остаётся сам диалог.
	 */
	.ai-block {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.ai-block::before {
		display: none;
	}

	/*
	 * Лента идёт в потоке страницы, без своей прокрутки: на телефоне свайп
	 * по диалогу иначе упирался в overscroll-behavior и не отдавал прокрутку
	 * странице, даже когда пролистывать внутри уже нечего.
	 */
	.ai-demo,
	.ai-demo__thread {
		min-height: 0;
	}

	.ai-demo__thread {
		max-height: none;
		overflow: visible;
		overscroll-behavior: auto;
	}

	/* к новому сообщению страницу ведёт скрипт — не заводим его под шапку */
	.ai-demo__msg {
		scroll-margin-top: calc(var(--header-height) + 12px);
	}

	/*
	 * Поле ввода перестаёт быть отдельной плашкой внутри карточки: рамку
	 * снимаем, остаётся черта под лентой, само поле и кнопка. Искру прячем —
	 * она держалась на пилюле, которой больше нет.
	 */
	.ai-ask {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-top: 4px;
		padding: 14px 0 0;
		border: 0;
		border-top: 1px solid var(--border);
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.ai-ask:focus-within {
		border-color: var(--border);
		box-shadow: none;
	}

	.ai-ask__spark {
		display: none;
	}

	.ai-ask input {
		padding: 0 16px;
		border: 1px solid var(--border);
		border-radius: 999px;
		background: var(--surface);
	}

	.ai-ask input:focus {
		border-color: var(--brand);
	}

	.ai-ask .btn {
		width: 100%;
	}
}

/* на планшете крупное событие во всю ширину, два соседних — рядом под ним:
   три снимка во всю ширину подряд давали слишком длинную ленту */
@media (min-width: 641px) and (max-width: 900px) {
	.product-grid > :nth-child(n + 7) {
		display: none;
	}

	/* в узкой плитке подпись «Популярных подборок» наезжала на название */
	.v26 .cat-tile__promo-text > :not(.t-kicker) {
		display: none;
	}

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

	.news-card--lead {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.v26 {
		--shell: calc(100vw - 32px);
		/* на телефоне шапка ниже — стартовое значение своё (см. начало файла) */
		--header-height: 126px;
	}

	/*
	 * Место под нижний док. Отступ даёт подвал, а не body: у body фон
	 * страницы, и под тёмным подвалом оставалась светлая полоса.
	 */
	.v26 .site-footer {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	/*
	 * Кнопка помощника MoreAI стоит в правом нижнем углу и на телефоне
	 * закрывала «Корзину» в доке. Её отступ снизу задаётся переменными
	 * виджета — поднимаем кнопку над доком.
	 */
	.v26 [data-site-assistant-root] {
		--sa-bottom-offset: calc(76px + env(safe-area-inset-bottom));
		--sa-mobile-bottom-offset: calc(76px + env(safe-area-inset-bottom));
	}

	/*
	 * Шапка липкая, но не мозолит глаза: мотаем вниз — уезжает вверх, мотаем
	 * обратно — плавно возвращается. Именно sticky, а не fixed: fixed выпал бы
	 * из потока, а hero подтянут под шапку отрицательным отступом ровно на её
	 * высоту — страница дёрнулась бы на эту высоту в момент переключения.
	 * Sticky оставляет место в потоке, а прячет её transform, который на
	 * раскладку не влияет вовсе.
	 */
	.site-header {
		position: sticky;
		top: 0;
		will-change: transform;
	}

	.site-header.is-hidden {
		transform: translateY(-100%);
	}

	/*
	 * Первый экран на телефоне. Раньше текст занимал всю высоту hero и
	 * фотография читалась только как тёмный фон: контент был выше доступного
	 * места, и align-items: center вытягивал его под самую шапку.
	 * Теперь блок прижат к низу, набор чуть мельче, а hero выше — между
	 * шапкой и заголовком остаётся полоса чистого фото с заводом.
	 */

	/*
	 * Полосу фотографии задаём явно, а не остатком высоты. Раньше hero имел
	 * фиксированные 760, контент прижимался к низу, и чистого снимка
	 * оставалось всего 165 px — треть hero съедала полоса с пояснением.
	 * Теперь высота набирается снизу вверх: отступ сверху = шапка + заданная
	 * полоса фото, дальше заголовок, дальше текст. Сколько бы места ни занял
	 * текст, у фотографии своё, и оно не уменьшается.
	 */

	/*
	 * Пояснение и цифры съезжают с фотографии на фон страницы: полоса
	 * непрозрачная и растянута во всю ширину, поэтому снимок заканчивается
	 * ровно на её верхней кромке. Над фотографией остаются только кикер
	 * и заголовок — ей достаётся весь первый экран под шапкой.
	 * Фон совпадает с фоном следующей секции, так что стыка не видно.
	 */

	/* затемнение сдвигаем ниже — верх кадра держим почти чистым */

	.brand-mark img {
		height: 40px;
	}

	.brand-mark__full {
		display: none;
	}

	.brand-mark__compact {
		display: block;
	}

	.section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ai-demo__msg {
		max-width: 96%;
	}

	/*
	 * В два столбца на телефоне карточке достаётся ~165 px, и полное название
	 * («Икона настольная №6 финифть / золочение, серебрение / Николай
	 * Чудотворец») разворачивалось в шесть строк, артикул переносился, а кнопка
	 * во всю ширину добивала высоту — карточки выходили разной длины и тесными.
	 * Оставляем главное: снимок, три строки названия и цену. Кнопка не нужна —
	 * карточка целиком ссылка, включая сами кадры превью.
	 */
	.product-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.product-body {
		gap: 4px;
		padding: 12px;
	}

	.product-name {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
		line-height: 1.35;
	}

	.product-sku {
		display: none;
	}

	.product-spacer {
		min-height: 6px;
	}

	.product-foot {
		align-items: center;
		padding-top: 10px;
	}

	.product-foot .btn {
		display: none;
	}

	.product-foot .t-price {
		font-size: 17px;
	}

	.price-was {
		font-size: 11px;
	}

	.product-ticks span {
		width: 16px;
	}

	.news-grid,
	.shops-grid,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.header-row {
		gap: 12px;
	}

	.catalog-pill {
		flex: 1;
		min-width: 0;
		justify-content: center;
		padding: 0 14px;
	}

	/* 320 px: «Каталог» не помещался и наезжал на логотип */
	@media (max-width: 350px) {
		.header-row {
			gap: 8px;
		}

		.catalog-pill {
			padding: 0 8px;
		}

		.catalog-pill .bars {
			display: none;
		}

		.header-actions {
			gap: 4px;
		}

		.icon-btn {
			width: 42px;
			height: 42px;
		}
	}

	/* избранное и корзина уже есть в нижнем доке — в шапке они лишние */
	.icon-btn--in-dock {
		display: none;
	}

	/*
	 * Поиск свёрнут в лупу: строка занимала целый ряд шапки и съедала
	 * первый экран. По нажатию разворачивается тем же рядом под кнопками.
	 */
	.icon-btn--search {
		display: grid;
	}

	.search-form {
		display: none;
	}

	.search-form.is-open {
		display: grid;
	}

	.icon-btn--search .icon-btn__close,
	.icon-btn--search[aria-expanded="true"] .icon-btn__open {
		display: none;
	}

	.icon-btn--search[aria-expanded="true"] .icon-btn__close {
		display: block;
	}

	.icon-btn--search[aria-expanded="true"] {
		background: var(--accent);
		border-color: transparent;
		color: var(--accent-ink);
	}

	.header-actions {
		gap: 6px;
	}

	/*
	 * Верхнюю строку на телефоне убираем целиком: в ней оставался один номер,
	 * ради которого шапка держала лишние ~44 px. Связь переехала в иконку-трубку
	 * рядом с «Каталогом» — то же меню, но без отдельного ряда.
	 */

	.icon-btn--phone {
		display: grid;
	}

	.icon-btn--phone[aria-expanded="true"] {
		background: var(--accent);
		border-color: transparent;
		color: var(--accent-ink);
	}

	.phone-pop {
		width: min(320px, calc(100vw - 24px));
	}

	.callback__dialog {
		padding: 22px 20px;
	}

	/* объявление целиком занимало бы треть первого экрана — показываем
	   две строки, а по тапу разворачиваем и сворачиваем обратно */
	.notice-bar__text {
		cursor: pointer;
	}

	.notice-bar__text .rich-text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.notice-bar.is-expanded .notice-bar__text .rich-text {
		display: block;
		overflow: visible;
	}

	/* под меню каталога снизу стоит док — иначе он съедает последние пункты */
	.mega-menu__panel-inner {
		padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}

	/* в шапке на телефоне остаётся только переключатель темы — всё остальное
	   (избранное, кабинет, корзина) живёт в нижнем доке, вместе с каталогом
	   и поиском: пять пунктов, ни один не потерян */
	.mobile-dock {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		padding: 8px 2px calc(8px + env(safe-area-inset-bottom));
		background: var(--footer-bg);
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	.mobile-dock__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 48px;
		padding: 0 2px;
		border: 0;
		background: none;
		color: rgba(255, 255, 255, .74);
		font-size: 10px;
		line-height: 1.2;
		text-align: center;
	}

	.mobile-dock__item .cart-badge {
		top: 0;
		right: auto;
		left: calc(50% + 4px);
		box-shadow: 0 0 0 2px var(--footer-bg);
	}

	.mobile-dock__item.is-priority {
		color: var(--accent);
		font-weight: 700;
	}

	.mobile-dock svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* ============================================================
   Единая шкала на телефоне
   ------------------------------------------------------------
   До этого одну и ту же роль на мобильном играли разные размеры:
   вводный абзац секции 16, лид блока ИИ 17, текст отзыва 15,
   текст новости 14 — при том что заголовок секции (27) сравнялся
   с заголовком hero и иерархия читалась плоско. Поля карточек
   гуляли от 12 до 28.

   Приводим к одному ряду:
     заголовки   27 → 23 → 17
     текст       15, вторичный 13, микро 12
     поля        16 у мелких карточек, 20 у крупных
     секция      40 сверху и снизу, 22 до контента
     радиусы     14 у крупных карточек, 10 у мелких
   ============================================================ */

@media (max-width: 640px) {
	.v26 {
		--radius-lg: 14px;
	}

	.t-h2 {
		font-size: 23px;
		line-height: 1.16;
	}

	.t-h3 {
		font-size: 17px;
	}

	.t-kicker {
		font-size: 12px;
	}

	.section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.section-head {
		margin-bottom: 22px;
	}

	.section-head p {
		margin-top: 8px;
		font-size: 15px;
	}

	.chip {
		height: 42px;
		padding: 0 16px;
		font-size: 13px;
	}

	.chip-sm {
		height: 34px;
		padding: 0 12px;
		font-size: 12px;
	}

	/* крупные карточки — поле 20. Блок помощника здесь без рамки и без поля:
	   на телефоне он отдаёт карточку самому диалогу (см. брейкпоинт 900) */
	.review-card,
	.order-strip {
		padding: 20px;
	}

	/* мелкие — 16 */
	.news-card__body,
	.shop-card,
	.ai-demo {
		padding: 16px;
	}

	/* основной текст 15 */
	.v26 .ai-block__lead,
	.review-card__text,
	.order-strip > p {
		font-size: 15px;
	}

	.news-card h3 {
		font-size: 17px;
	}

	.news-card--lead h3 {
		font-size: 21px;
	}

	.news-card__body,
	.news-card--lead .news-card__body {
		padding: 16px;
	}

	.news-card__media .date-leaf {
		left: 12px;
		bottom: 12px;
	}

	.news-card--over .news-card__media .date-leaf {
		top: 12px;
		left: 12px;
	}

	.news-card--over .news-card__body {
		padding: 56px 16px 14px;
	}

	.expo-row {
		gap: 14px;
		padding: 10px;
	}

	.expo-row__img {
		width: 72px;
		height: 72px;
	}

	/* вторичный 13 */
	.news-card p,
	.process-step p,
	.expo-row__title,
	.shop-card__title {
		font-size: 13px;
	}

	/* микро 12 */
	.v26 .ai-note,
	.ai-chips__label,
	.shop-card__address,
	.review-card time {
		font-size: 12px;
	}

	.ai-demo__msg {
		padding: 10px 14px;
		font-size: 13px;
	}

	.review-card {
		gap: 12px;
	}

	.partner-chip {
		min-height: 54px;
		padding: 8px 14px 8px 10px;
	}

	.partner-chip img {
		width: 36px;
		height: 36px;
	}

	.footer-col a {
		font-size: 15px;
	}

	.footer-brand p {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.v26 {
		scroll-behavior: auto;
	}

	.v26 *,
	.v26 *::before,
	.v26 *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	/* бесконечные анимации нужно именно выключить: со сверхкоротким
	   duration они не «замирают», а мгновенно прыгают в конечный кадр */
	.ai-ask__spark,
	.ai-demo__typing span {
		animation: none !important;
	}

	.scroll-row {
		scroll-behavior: auto;
	}
}

/* ============================================================
   Полоса разделов в шапке, слайдер первого экрана, фото-каталог

   Раньше это был отдельный слой поверх общего. Порядок сохранён:
   правила ниже перекрывают общие выше при той же специфичности,
   поэтому переносить их наверх файла нельзя.
   ============================================================ */

/* Сервисные ссылки в верхней строке --------------------------- */

/*
 * Левый край верхней строки раньше пустовал. Ставим туда то, что спрашивают
 * перед покупкой — доставку, опт, порядок заказа: в главном меню это лежит
 * внутри «Покупателям», а здесь достаётся одним кликом.
 */

/* Главное меню на цветной полосе ------------------------------ */

/*
 * Полоса под логотипом — главное меню сайта. Тот же приём, что на отраслевых
 * магазинах, которые заводу нравятся: разделы не спрятаны за кнопку, а лежат
 * отдельной цветной строкой и видны на входе.
 *
 * Полоса плотная в обеих темах и не зависит от --theme: она часть тёмного
 * «хрома» шапки, который держит контраст и над фотографией, и над страницей.
 */
.v26 .catalog-bar {
	position: relative;
	z-index: 20;
	background: rgba(1, 61, 77, .78);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .22);
	/*
	 * При прокрутке фиксируется только верх шапки — логотип, поиск и иконки.
	 * Полоса меню уезжает: держать её на экране всё время значит отдать под
	 * «хром» полторы сотни пикселей, а она нужна на входе, а не постоянно.
	 * Реальную высоту меряет скрипт и кладёт в --catalog-bar-h, чтобы переход
	 * шёл ровно по ней, а не «с запасом» вхолостую (см. home.js).
	 */
	max-height: var(--catalog-bar-h, 46px);
	transition: max-height .34s cubic-bezier(.22, .68, .2, 1), opacity .3s ease, background .25s ease;
}

.v26 .site-header.is-scrolled .catalog-bar {
	background: #013D4D;
}

.v26 .site-header.is-compact .catalog-bar {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.v26 .catalog-bar__inner {
	display: flex;
	align-items: stretch;
	gap: 16px;
}

/*
 * Прокрутки на широком экране нет намеренно: overflow-x: auto подрезал бы
 * список и по вертикали, а из него вниз выпадают подменю. Пунктов пять, они
 * помещаются с большим запасом; прокрутка включается только на узких экранах,
 * где подменю всё равно выключены.
 */
.v26 .catalog-bar__list {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.v26 .catalog-bar__item {
	position: relative;
	flex: 0 0 auto;
}

.v26 .catalog-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 46px;
	padding: 0 16px;
	color: rgba(255, 255, 255, .9);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .16s ease, color .16s ease;
}

.v26 .catalog-bar__item:first-child .catalog-bar__link {
	padding-left: 0;
}

.v26 .catalog-bar__item:focus-within .catalog-bar__link {
	color: #fff;
}

@media (hover: hover) {
	.v26 .catalog-bar__link:hover,
	.v26 .catalog-bar__item:hover .catalog-bar__link {
		color: #fff;
	}
}

.v26 .catalog-bar__item:not(:first-child):focus-within .catalog-bar__link {
	background: rgba(255, 255, 255, .1);
}

@media (hover: hover) {
	.v26 .catalog-bar__item:not(:first-child):hover .catalog-bar__link {
		background: rgba(255, 255, 255, .1);
	}
}

/*
 * Товарные входы отодвигаются к правому краю свободным полем, а не отдельной
 * группой: когда строка уходит в прокрутку, поле схлопывается само и пункты
 * встают в конец ленты, а не режут её, прижавшись к краю.
 */
.v26 .catalog-bar__item--split {
	margin-left: auto;
	padding-left: 8px;
	border-left: 1px solid rgba(255, 255, 255, .16);
}

/* золото темы в светлой гамме темнее и на полосе меню не читается */
.v26 .catalog-bar__link--accent {
	color: #E8C77E;
}

@media (hover: hover) {
	.v26 .catalog-bar__link--accent:hover {
		color: #F3DBA4;
		background: rgba(255, 255, 255, .08);
	}
}

/*
 * Праздничная подборка — золотой контур с лёгкой подложкой: заметнее
 * новинок и акций, но не спорит с ними сплошной заливкой. Стоит по центру
 * строки — ссылки в полосе высотой 46 px, плашка ниже, поэтому отступ
 * сверху и снизу считаем от разницы.
 */
.v26 .catalog-bar__link--season {
	height: 32px;
	margin: 7px 6px;
	padding: 0 14px;
	border: 1px solid rgba(232, 199, 126, .6);
	border-radius: 999px;
	background: rgba(232, 199, 126, .12);
	color: #F3DBA4;
	font-weight: 600;
}

/* общие правила наведения на пункт полосы (белая подложка) плашке не подходят */
@media (hover: hover) {
	.v26 .catalog-bar__item .catalog-bar__link.catalog-bar__link--season:hover {
		border-color: #E8C77E;
		background: rgba(232, 199, 126, .22);
		color: #FFF3D6;
	}
}

.v26 .catalog-bar__caret {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .65;
	transition: transform .18s ease, opacity .18s ease;
}

.v26 .catalog-bar__item:focus-within .catalog-bar__caret {
	transform: rotate(180deg);
	opacity: 1;
}

@media (hover: hover) {
	.v26 .catalog-bar__item:hover .catalog-bar__caret {
		transform: rotate(180deg);
		opacity: 1;
	}
}

/*
 * Панель подменю. Скрываем видимостью, а не display — иначе не получилось бы
 * плавного появления, а мгновенный прыжок панели под курсором читается как
 * дёрганье. На :focus-within панель открывается и с клавиатуры.
 */
.v26 .catalog-bar__drop {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	padding-top: 4px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.v26 .catalog-bar__item:first-child .catalog-bar__drop {
	left: -18px;
}

.v26 .catalog-bar__item:focus-within .catalog-bar__drop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (hover: hover) {
	.v26 .catalog-bar__item:hover .catalog-bar__drop {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.v26 .catalog-bar__drop-inner {
	display: flex;
	flex-direction: column;
	min-width: 260px;
	padding: 10px;
	border-radius: var(--radius-md);
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-md);
}

/*
 * Широкую панель раскрываем влево от правого края пункта: от левого края
 * она на 1024 px вылезала за экран и давала горизонтальную прокрутку,
 * даже закрытая (её прячет visibility, а место в раскладке остаётся).
 */
.v26 .catalog-bar__drop--wide {
	left: auto;
	right: 0;
}

/* «О предприятии» — полтора десятка пунктов, в один столбец это простыня */
.v26 .catalog-bar__drop--wide .catalog-bar__drop-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap: 0 8px;
	min-width: 450px;
}

.v26 .catalog-bar__drop-inner a {
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.35;
	transition: background .16s ease, color .16s ease;
}

@media (hover: hover) {
	.v26 .catalog-bar__drop-inner a:hover {
		background: var(--surface-subtle);
		color: var(--brand);
	}
}

/* Первый экран — слайдер направлений -------------------------- */

/*
 * Слайдер подтянут под шапку: шапка «парит» стеклом поверх него. Высота
 * задана содержимым слайда, а не экраном: первый экран обязан заканчиваться
 * выше сгиба, иначе плитки каталога уедут вниз.
 */
.v26 .hero-slider {
	position: relative;
	margin-top: calc(-1 * var(--header-height, 152px));
	background: #06171C;
}

/*
 * Лента: слайды в строку, прокрутка с привязкой. Пальцем работает сама, без
 * скрипта; скрипт добавляет стрелки, точки и автолистание (см. home.js).
 */
.v26 .hero-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.v26 .hero-slider__track::-webkit-scrollbar {
	display: none;
}

.v26 .hero-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #06171C;
}

.v26 .hero-slide__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * Кадр показываем целиком по ширине, без смещения: снимки сняты под этот
 * экран — изделия справа, слева свободное поле под текст. Сдвигать вправо,
 * как раньше, значит срезать ровно то поле, ради которого кадр и строился.
 */
.v26 .hero-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * По вертикали кадр смещён вниз: изделия на снимках стоят в нижней
	 * половине, а по центру приходится потолок и верх иконостаса. Полоса
	 * слайда ниже, чем сам кадр, и без смещения срезало бы именно товар.
	 */
	object-position: center 64%;
}

.v26 .hero-slide__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 64%;
	opacity: 0;
	transition: opacity .45s ease;
}

.v26 .hero-slide__media.is-video-playing video {
	opacity: 1;
}

/*
 * Слайд-картинка оживает так же, как слайд с роликом: кадр медленно
 * приближается и чуть уходит влево, к изделиям справа, потом так же
 * медленно возвращается. Под курсором и при фокусе на точках слайдер
 * стоит, но наезд не останавливаем: на слайд обычно переходят кликом,
 * и остановленный вместе со слайдером кадр выглядел бы мёртвым.
 * При «уменьшении движения» выключен — тогда нет и класса is-playing.
 */
.v26 .hero-slider.is-playing .hero-slide.is-drifting .hero-slide__media--still img {
	transform-origin: 70% 64%;
	animation: hero-drift 9s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes hero-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(-2%, -1%, 0) scale(1.1);
	}
}

.v26 .hero-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(96deg,
			rgba(3, 14, 18, .84) 0%,
			rgba(3, 14, 18, .8) 22%,
			rgba(3, 14, 18, .66) 40%,
			rgba(3, 14, 18, .4) 56%,
			rgba(3, 14, 18, .14) 76%,
			rgba(3, 14, 18, 0) 92%),
		linear-gradient(180deg,
			rgba(3, 14, 18, .34) 0%,
			rgba(3, 14, 18, 0) 32%,
			rgba(3, 14, 18, 0) 72%,
			rgba(3, 14, 18, .4) 100%);
}

/*
 * На телефоне текст слайда идёт во всю ширину, до правого края, где
 * косое затемнение уже сходит на нет: подпись под «2000+» ложилась прямо
 * на золото потира и пропадала. Здесь затемнение ровное и сгущается книзу —
 * туда, где стоят кнопка и цифры.
 */
@media (max-width: 640px) {
	.v26 .hero-slide--main .hero-slide__media::after {
		background: linear-gradient(180deg,
			rgba(3, 14, 18, .5) 0%,
			rgba(3, 14, 18, .5) 35%,
			rgba(3, 14, 18, .74) 70%,
			rgba(3, 14, 18, .86) 100%);
	}

	/* на остальных слайдах внизу текста нет: держим его сверху и открываем кадр */
	.v26 .hero-slide:not(.hero-slide--main) .hero-slide__media::after {
		background: linear-gradient(180deg,
			rgba(3, 14, 18, .62) 0%,
			rgba(3, 14, 18, .5) 38%,
			rgba(3, 14, 18, .08) 66%,
			rgba(3, 14, 18, .14) 100%);
	}
}

/* на планшете цифры первого слайда стоят на светлой скатерти */
@media (min-width: 641px) and (max-width: 1180px) {
	.v26 .hero-slide--main .hero-slide__media::after {
		background:
			linear-gradient(96deg,
				rgba(3, 14, 18, .84) 0%,
				rgba(3, 14, 18, .66) 40%,
				rgba(3, 14, 18, .14) 76%,
				rgba(3, 14, 18, 0) 92%),
			linear-gradient(180deg,
				rgba(3, 14, 18, .3) 0%,
				rgba(3, 14, 18, 0) 40%,
				rgba(3, 14, 18, .66) 78%,
				rgba(3, 14, 18, .72) 100%);
	}
}

/*
 * Баннерный слайд из админки. Текст на таких баннерах впечатан в картинку,
 * поэтому кадр нельзя ни резать, ни заводить под шапку — вписываем его
 * целиком в свободную часть слайда, на тёмное поле.
 */
.v26 .hero-slide--banner {
	align-items: stretch;
}

.v26 .hero-slide__banner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: calc(var(--header-height, 152px) + 16px) clamp(16px, 3vw, 48px) clamp(30px, 3.4vw, 46px);
}

/*
 * Высоту баннера ограничиваем явно. max-height: 100% тут бесполезен — высоту
 * ленты задаёт сам её самый высокий слайд, и широкий баннер, вписанный по
 * ширине, раздувал первый экран так, что плитки каталога уезжали за сгиб.
 */
.v26 .hero-slide__banner img {
	max-width: min(1280px, 100%);
	max-height: clamp(150px, 19vw, 290px);
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
}

/* слайд помощника идёт без снимка — на фирменной заливке с золотым отсветом */
.v26 .hero-slide--plain {
	background:
		radial-gradient(80% 120% at 88% 12%, rgba(212, 166, 70, .22) 0%, transparent 60%),
		linear-gradient(120deg, #041920 0%, #073442 62%, #04222B 100%);
}

/*
 * Пример разговора на слайде помощника: вопрос покупателя и ответ с
 * настоящими товарами. На широком экране стоит справа от заголовка, по низу
 * контента; уже 1024px — под кнопкой, в сжатом виде (см. ниже).
 */
.v26 .hero-chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 14px;
	line-height: 1.4;
}

@media (min-width: 1024px) {
	.v26 .hero-chat {
		position: absolute;
		right: 0;
		bottom: clamp(26px, 3vw, 42px);
		width: min(500px, 44%);
		box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	}
}

.v26 .hero-chat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	font-weight: 600;
}

.v26 .hero-chat__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #4CC38A;
	box-shadow: 0 0 0 3px rgba(76, 195, 138, .2);
}

.v26 .hero-chat__note {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .62);
	font-size: 11px;
	font-weight: 500;
}

.v26 .hero-chat__msg {
	margin: 0;
	padding: 10px 14px;
	border-radius: 14px;
}

.v26 .hero-chat__msg--user {
	align-self: flex-end;
	max-width: 85%;
	border-bottom-right-radius: 4px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 500;
}

.v26 .hero-chat__msg--bot {
	align-self: flex-start;
	width: 100%;
	border-bottom-left-radius: 4px;
	background: #F8F6F0;
	color: #17211F;
}

.v26 .hero-chat__products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.v26 .hero-chat__product {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	border: 1px solid #E0D8C8;
	border-radius: var(--radius-md);
	background: #FFFFFF;
	color: #17211F;
	transition: border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
	.v26 .hero-chat__product:hover {
		border-color: var(--accent);
		box-shadow: 0 6px 16px rgba(0, 32, 40, .12);
	}
}

.v26 .hero-chat__thumb {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #FFFFFF;
}

.v26 .hero-chat__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.v26 .hero-chat__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 12px;
	line-height: 1.3;
}

.v26 .hero-chat__price {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
}

/* карточки разговора светлые в обеих темах — серый для старой цены свой,
   а не --muted, который в тёмной теме светлый и на белом пропадал бы */
.v26 .hero-chat__price .price-was {
	color: #6B7678;
	font-size: 11px;
	font-weight: 400;
}

/*
 * До 1180px шапка выше на строку поиска, и верх разговора уходил под неё.
 * Здесь подпись «Помощник «Софрино»» убираем — пузыри и так говорят, чей
 * это разговор, — ужимаем отступы и прячем названия товаров.
 */
@media (min-width: 1024px) and (max-width: 1180px) {
	.v26 .hero-chat {
		gap: 8px;
		padding: 10px;
	}

	.v26 .hero-chat__head {
		display: none;
	}

	/* в одну строку от названия оставалось «Лампада…» — без него честнее:
	   фото и цена говорят сами, полное название — по клику */
	.v26 .hero-chat__name {
		display: none;
	}
}

/*
 * Телефон и планшет: разговор под кнопкой, без подписи и пояснения — только
 * вопрос одной строкой и три товара с ценами. Слайд от этого не выше
 * соседних: высоту ленты задаёт самый высокий слайд, и прибавка здесь
 * растянула бы все.
 */
@media (max-width: 1023px) {
	.v26 .hero-chat {
		gap: 8px;
		max-width: 460px;
		margin-top: 14px;
		padding: 8px;
	}

	.v26 .hero-chat__head,
	.v26 .hero-chat__msg--bot > p,
	.v26 .hero-chat__name {
		display: none;
	}

	.v26 .hero-chat__msg {
		padding: 8px 10px;
		font-size: 13px;
	}

	.v26 .hero-chat__msg--user {
		align-self: stretch;
		max-width: none;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.v26 .hero-chat__msg--bot {
		padding: 6px;
	}

	.v26 .hero-chat__products {
		gap: 6px;
		margin-top: 0;
	}

	/* товар строкой: снимок слева, цены справа — так карточка вдвое ниже */
	.v26 .hero-chat__product {
		flex-direction: row;
		align-items: center;
		gap: 4px;
		padding: 4px;
	}

	.v26 .hero-chat__thumb {
		flex: 0 0 32px;
		width: 32px;
	}

	/* цена с копейками («2 593.50 ₽») не должна ломаться в три строки */
	.v26 .hero-chat__price {
		min-width: 0;
		margin-top: 0;
		font-size: 11px;
		line-height: 1.2;
		white-space: nowrap;
	}

	.v26 .hero-chat__price .price-was {
		font-size: 10px;
	}
}

.v26 .hero-slide__content {
	position: relative;
	z-index: 1;
	width: var(--shell);
	margin: 0 auto;
	padding-top: calc(var(--header-height, 152px) + clamp(20px, 2.4vw, 36px));
	padding-bottom: clamp(26px, 3vw, 42px);
	color: #fff;
}

.v26 .hero-slide__content .t-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--accent);
}

.v26 .hero-slide__content .t-kicker::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--accent);
	border-radius: 1px;
}

.v26 .hero-slide__content h1,
.v26 .hero-slide__title {
	max-width: 20ch;
	margin-top: 10px;
	font-size: clamp(30px, 3.5vw, 47px);
}

/*
 * Пояснение оставлено только на первом слайде. На нём одном есть что сказать
 * сверх заголовка — объём каталога и то, что всё своё; у остальных заголовок
 * («Убранство храма под ключ», «Изделия из камня») говорит сам за себя, а
 * вторая строка при семисекундном перелистывании только отнимала воздух.
 */
.v26 .hero-slide__lead {
	max-width: 600px;
	margin-top: 12px;
	color: rgba(255, 255, 255, .8);
	font-size: 16px;
}

.v26 .hero-slide:not(.hero-slide--main) .hero-slide__lead {
	display: none;
}

.v26 .hero-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(20px, 2.4vw, 30px);
}

/*
 * Слайды разной длины текста дали бы прыжок высоты при листании. Ленте
 * задаём общий минимум по самому длинному слайду — считать его в CSS нечем,
 * поэтому берём заведомо достаточную величину от ширины экрана. Больше
 * ставить нельзя: первый экран обязан заканчиваться выше сгиба.
 */
.v26 .hero-slide__content {
	min-height: calc(var(--header-height, 152px) + clamp(300px, 30vw, 450px));
}

/* Стрелки и точки ------------------------------------------- */

.v26 .hero-slider__nav {
	position: absolute;
	top: calc(50% + var(--header-height, 152px) / 2 - 26px);
	z-index: 3;
	display: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .34);
	background: rgba(4, 16, 20, .42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.v26 .hero-slider__nav--prev { left: 18px; }
.v26 .hero-slider__nav--next { right: 18px; }

@media (hover: hover) {
	.v26 .hero-slider__nav:hover {
		background: rgba(4, 16, 20, .7);
		border-color: #fff;
	}
}

.v26 .hero-slider__nav:active {
	transform: scale(.94);
}

.v26 .hero-slider__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Стрелки показываем только там, где по краям экрана остаются поля: полоса
 * текста прижата к сетке, и на более узком экране стрелка вставала прямо
 * поверх заголовка. Ниже этой ширины остаются точки, свайп и автолистание.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 1400px) {
	.v26 .hero-slider__nav {
		display: grid;
	}
}

.v26 .hero-slider__dots-shell {
	position: absolute;
	left: 50%;
	bottom: clamp(14px, 1.6vw, 22px);
	z-index: 3;
	transform: translateX(-50%);
	pointer-events: none;
}

.v26 .hero-slider__dots {
	display: flex;
	gap: 8px;
	pointer-events: auto;
}

/*
 * Чёрточки, а не кружки: тот же приём, что у индикатора кадров товара.
 * Ширина у всех одна — активная отличается не размером, а заливкой: по ней
 * же идёт отсчёт до следующего кадра, и «прыгающая» ширина мешала бы читать
 * прогресс.
 */
.v26 .hero-slider__dots button {
	position: relative;
	width: 38px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, .3);
	cursor: pointer;
	transition: background .18s ease;
}

@media (hover: hover) {
	.v26 .hero-slider__dots button:hover {
		background: rgba(255, 255, 255, .5);
	}
}

/*
 * Заливка активной полоски. Отдельным слоем, а не фоном самой кнопки: по
 * нему идёт анимация отсчёта, а фон остаётся дорожкой, на которой видно,
 * сколько ещё осталось.
 */
.v26 .hero-slider__dots button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.v26 .hero-slider__dots button.is-active::after {
	transform: scaleX(1);
}

/*
 * Отсчёт идёт только когда слайдер листает сам. Скрипт вешает is-playing и
 * перезапускает анимацию при смене кадра; под курсором и в фокусе слайдер
 * встаёт на паузу, и полоска замирает вместе с ним.
 */
.v26 .hero-slider.is-playing .hero-slider__dots button.is-active::after {
	animation: hero-progress var(--hero-delay, 7s) linear forwards;
}

.v26 .hero-slider.is-playing.is-paused .hero-slider__dots button.is-active::after {
	animation-play-state: paused;
}

@keyframes hero-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Каталог фотографиями --------------------------------------- */

/* секция идёт вплотную к слайдеру — иначе фотографии уезжают за первый экран */
.v26 .section--catalog {
	padding-top: clamp(34px, 3.8vw, 54px);
}

/* ряда чипов под заголовком больше нет — сразу мозаика, поэтому чуть больше воздуха */
.v26 .section--catalog .section-head {
	margin-bottom: 26px;
}

/*
 * Мозаика разделов. Два первых раздела крупные — с них начинается взгляд,
 * остальные ровной сеткой по четыре. Плитка целиком отдана фотографии,
 * подпись лежит на затемнении по низу: именно так разделы показаны на
 * сайтах, которые понравились заводу, только снимок здесь один на раздел
 * и снят под общий свет, а не собран из товарных превью.
 */
.v26 .cat-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.v26 .cat-tile {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--surface-sunken);
	color: #fff;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
	.v26 .cat-tile:hover {
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}
}

.v26 .cat-tile--lg {
	grid-column: span 2;
}

.v26 .cat-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.v26 .cat-tile--lg .cat-tile__media {
	aspect-ratio: 16 / 10;
}

.v26 .cat-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.v26 .cat-tile:hover .cat-tile__media img {
		transform: scale(1.05);
	}
}

/* затемнение под подписью: только нижняя треть, сам предмет не трогаем */
.v26 .cat-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(2, 12, 15, 0) 38%,
		rgba(2, 12, 15, .5) 72%,
		rgba(2, 12, 15, .88) 100%
	);
}

/*
 * Подпись — только название, во всю ширину плитки. Стрелки нет: плитка
 * целиком ссылка и приподнимается при наведении, а стрелка отнимала у
 * длинных названий место, и «Пошивочная продукция» уходила в две строки
 * рядом с однострочными соседями.
 */
.v26 .cat-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 16px 18px 18px;
}

.v26 .cat-tile__title {
	font-size: clamp(19px, 1.55vw, 22px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-shadow: 0 1px 12px rgba(0, 10, 13, .5);
}

.v26 .cat-tile--lg .cat-tile__title {
	font-size: clamp(26px, 2.4vw, 34px);
	letter-spacing: -.015em;
}

/*
 * Раздел без фотографии. Пока снимка нет, плитка не должна выглядеть
 * поломанной: тёмное фирменное поле и та же гравюрная пиктограмма, что в
 * меню каталога. Подпись остаётся на своём месте, поэтому сетка не рвётся,
 * а как только в /static/img/v26/cat/ ляжет <алиас>.jpg — плитка сама
 * станет фотографической, править разметку не нужно.
 */
.v26 .cat-tile--icon .cat-tile__media {
	background:
		radial-gradient(96% 88% at 50% 34%, rgba(212, 166, 70, .16) 0%, transparent 64%),
		linear-gradient(160deg, #0B2E39 0%, #05191F 100%);
}

.v26 .cat-tile--icon .cat-tile__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.v26 .cat-tile--icon .cat-tile__icon svg {
	width: 46%;
	height: 46%;
	/* пиктограммы в спрайте залиты фирменным тёмным — на тёмном поле их надо выбелить */
	filter: brightness(0) invert(1);
	opacity: .82;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.v26 .cat-tile--icon:hover .cat-tile__icon svg {
		transform: scale(1.06);
	}
}

/* Замыкающая плитка «Популярные подборки» — единственная без фотографии
   по замыслу, поэтому у неё фирменная заливка и орнамент вместо снимка. */
.v26 .cat-tile--promo .cat-tile__media {
	background: var(--brand-fill);
	background-image: radial-gradient(120% 130% at 100% 0%, rgba(212, 166, 70, .3), transparent 62%);
}

.v26 .cat-tile--promo .cat-tile__media::after {
	background: linear-gradient(180deg, rgba(0, 20, 26, 0) 55%, rgba(0, 20, 26, .45) 100%);
}

.v26 .cat-tile__ornament {
	position: absolute;
	top: -46px;
	right: -40px;
	width: 210px;
	height: 210px;
	color: var(--accent);
	opacity: .2;
	pointer-events: none;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.v26 .cat-tile__ornament svg {
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	.v26 .cat-tile--promo:hover .cat-tile__ornament {
		transform: rotate(24deg) scale(1.06);
	}
}

.v26 .cat-tile__promo-text {
	position: absolute;
	inset: 18px 18px auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, .78);
}

.v26 .cat-tile__promo-text .t-kicker {
	color: var(--accent);
}

/* Два пути — отступ сверху, когда над ними лежит светлая секция */
.v26 .section--paths {
	padding-top: clamp(52px, 5.5vw, 84px);
	padding-bottom: 0;
}

/* Производство: цеха ------------------------------------------ */

/*
 * Полоса тёмная в обеих темах, как была: снимки цехов сняты при ярком
 * цеховом свете и на тёмном поле читаются лучше всего.
 *
 * Базовая раскладка — для экранов без наведения: лента карточек с подписью
 * на снимке. Гармошка, где панель раскрывается под курсором, включается
 * ниже — только где есть мышь: в свёрнутой панели название стоит
 * вертикально, поэтому даже на 901px узкие панели не теснят подпись.
 */
.v26 .workshops {
	background: #06171C;
	color: #fff;
}

.v26 .workshops > .shell {
	display: flex;
	flex-direction: column;
}

.v26 .workshops__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 48px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.v26 .workshops .t-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--accent);
}

.v26 .workshops .t-kicker::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--accent);
	border-radius: 1px;
}

.v26 .workshops h2 {
	margin-top: 12px;
	color: #fff;
}

.v26 .workshops__lead {
	max-width: 60ch;
	margin-top: 12px;
	color: rgba(255, 255, 255, .8);
	font-size: 17px;
	line-height: 1.6;
}

.v26 .workshops__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.v26 .workshops__strip {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.v26 .workshops__strip::-webkit-scrollbar {
	display: none;
}

.v26 .workshops__item {
	flex: 0 0 min(76%, 290px);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.v26 .workshops__link {
	position: relative;
	display: block;
	height: clamp(260px, 72vw, 320px);
	overflow: hidden;
	border-radius: var(--radius-md);
	background: #0D2229;
	color: #fff;
	text-decoration: none;
}

.v26 .workshops__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.v26 .workshops__link img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* затемнение снизу — под подпись */
.v26 .workshops__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(3, 14, 18, .92) 0%, rgba(3, 14, 18, .5) 38%, rgba(3, 14, 18, 0) 70%);
	pointer-events: none;
}

.v26 .workshops__tab {
	display: none;
}

.v26 .workshops__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	padding: 16px 18px 18px;
}

.v26 .workshops__name {
	display: block;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
}

.v26 .workshops__fact {
	display: block;
	margin-top: 6px;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	line-height: 1.45;
}

@media (max-width: 900px) {
	/* кнопки — под лентой: сначала цеха, потом куда идти дальше */
	.v26 .workshops__head {
		display: contents;
	}

	.v26 .workshops__head > div:first-child {
		margin-bottom: 24px;
	}

	.v26 .workshops__actions {
		order: 2;
		margin-top: 24px;
	}
}

@media (hover: hover) and (min-width: 901px) {
	.v26 .workshops__strip {
		gap: 8px;
		height: clamp(320px, 26vw, 380px);
		overflow: visible;
	}

	.v26 .workshops__item {
		flex: 1 1 0;
		min-width: 0;
		transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1);
	}

	.v26 .workshops__item.is-active {
		flex-grow: 3.4;
	}

	.v26 .workshops__link {
		height: 100%;
	}

	.v26 .workshops__link img {
		transform: scale(1.06);
		transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
	}

	.v26 .workshops__item.is-active .workshops__link img {
		transform: none;
	}

	/* свёрнутые панели притушены, раскрытая — в полную силу */
	.v26 .workshops__link::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(3, 14, 18, .38);
		transition: opacity .5s ease-out;
		pointer-events: none;
	}

	.v26 .workshops__item.is-active .workshops__link::before {
		opacity: 0;
	}

	/* в узкой панели название встаёт вертикально, снизу вверх */
	.v26 .workshops__tab {
		position: absolute;
		left: 14px;
		bottom: 18px;
		z-index: 2;
		display: block;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		transition: opacity .25s ease-out;
	}

	.v26 .workshops__item.is-active .workshops__tab {
		opacity: 0;
	}

	/*
	 * Подпись раскрытой панели — фиксированной ширины, по ширине панели в
	 * раскрытом виде: пока панель растёт, текст не переносится заново.
	 */
	.v26 .workshops__caption {
		right: auto;
		width: min(400px, calc(min(1280px, 100vw - 64px) * .4 - 16px));
		padding: 0 22px 22px;
		opacity: 0;
		transition: opacity .2s ease-out;
	}

	.v26 .workshops__item.is-active .workshops__caption {
		opacity: 1;
		transition: opacity .45s ease-out .2s;
	}

	.v26 .workshops__name {
		font-size: clamp(20px, 1.7vw, 24px);
	}

	.v26 .workshops__fact {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.v26 .workshops__item,
	.v26 .workshops__link img,
	.v26 .workshops__link::before,
	.v26 .workshops__tab,
	.v26 .workshops__caption,
	.v26 .workshops__item.is-active .workshops__caption {
		transition-duration: .01s;
		transition-delay: 0s;
	}
}

/*
 * Общие правила поджимают верхний отступ у секции сразу после чата с ИИ.
 * Здесь следом идёт тёмная полоса производства — ей отступ нужен, иначе
 * она приклеивается к карточке чата.
 */
.v26 #ai-assistant + .section {
	padding-top: clamp(52px, 5.5vw, 84px);
}

/* Адаптив ----------------------------------------------------- */

@media (max-width: 1180px) {
	/*
	 * Строка разделов перестаёт помещаться — переводим её в ленту с прокруткой
	 * пальцем. Выпадающие подразделы при этом выключаем: во-первых, прокрутка
	 * подрезала бы их по вертикали, во-вторых, наведения на тач-экране нет, а
	 * от «нажал раздел — открылась панель вместо перехода» толку мало.
	 */
	.v26 .cat-mosaic {
		gap: 16px;
	}
}

@media (max-width: 900px) {
	.v26 .hero-slide__content h1,
	.v26 .hero-slide__title {
		max-width: none;
	}

	/*
	 * На узком экране на слайде остаются только заголовок и кнопка: кадр здесь
	 * и так почти квадратный, а четыре уровня текста подряд не оставляли от
	 * него ничего.
	 */
	.v26 .hero-slide__lead,
	.v26 .hero-slide .t-kicker {
		display: none;
	}

	/*
	 * Пальцем наведения нет, поэтому подменю выключаем, а строку меню
	 * переводим в ленту с прокруткой: прокрутка подрезала бы панели по
	 * вертикали, и вместе они не уживаются.
	 */
	.v26 .catalog-bar__drop,
	.v26 .catalog-bar__caret {
		display: none;
	}

	.v26 .catalog-bar__list {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.v26 .catalog-bar__list::-webkit-scrollbar {
		display: none;
	}

	.v26 .catalog-bar__link {
		font-size: 14px;
		padding: 0 13px;
	}

	/* в ленте отбивка чертой ни к чему — она встала бы посреди прокрутки */
	.v26 .catalog-bar__item--split {
		border-left: 0;
		padding-left: 0;
	}

	.v26 .cat-mosaic {
		gap: 14px;
	}
}

@media (max-width: 640px) {
	.v26 .cat-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.v26 .hero-slider__dots-shell {
		bottom: 10px;
	}

	/* на телефоне разница крупной и обычной плитки не читается — сетка ровная */
	.v26 .cat-tile--lg .cat-tile__media {
		aspect-ratio: 1 / 1;
	}

	.v26 .cat-tile--lg {
		grid-column: span 1;
	}

	.v26 .cat-tile__title,
	.v26 .cat-tile--lg .cat-tile__title {
		font-size: 17px;
	}

	.v26 .cat-tile__body {
		padding: 12px 13px 14px;
	}

	/* плитка подборок на телефоне слишком мала для пояснения: оно в четыре
	   строки наезжало на подпись внизу. Оставляем только заголовок-кикер */
	.v26 .cat-tile__promo-text {
		inset: 13px 13px auto;
	}

	.v26 .cat-tile__promo-text > span:not(.t-kicker) {
		display: none;
	}
}

/* Номер телефона в основной строке ---------------------------- */

/*
 * Номер прижат к иконкам справа; на узких экранах прячется — там на его
 * месте работает кнопка-трубка.
 */
.v26 .phone-toggle--inline {
	margin-right: 6px;
	white-space: nowrap;
}

.v26 .phone-toggle--inline strong {
	font-size: 16px;
}

/*
 * Ниже 1181px номер целиком не влезает рядом с поиском — вместо него встаёт
 * кнопка-трубка. Общие правила включают её только на телефоне, поэтому
 * здесь она включается на всей ширине, где спрятан сам номер.
 */
@media (max-width: 1180px) {
	.v26 .phone-toggle--inline,
	.v26 .phone-fallback--inline {
		display: none;
	}

	/*
	 * Именно grid, как в общем слое: у кнопки-иконки центрирование держится
	 * на place-items, а во flex это свойство центрирует только поперёк —
	 * с inline-flex трубка прижималась к левому краю кружка.
	 */
	.v26 .icon-btn--phone {
		display: grid;
	}
}

.v26.no-js .phone-fallback--inline {
	margin-right: 6px;
	white-space: nowrap;
}

/* Объявление в теле страницы ---------------------------------- */

/*
 * В шапке объявление читалось служебной строкой и его закрывали не глядя.
 * Здесь это самостоятельная плашка сразу под первым экраном: тёплая заливка
 * с золотой чертой слева и текст крупнее основного. Закрыть по-прежнему
 * можно — скрытие помнится по хешу текста, и новое объявление покажется
 * снова (см. home.js).
 */
.v26 .notice-bar--page {
	max-height: none;
	overflow: visible;
	margin: 0 auto;
	padding: clamp(16px, 1.8vw, 22px) 0;
	border: 0;
	border-top: 0;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.5;
}

.v26 .notice-bar--page .notice-bar__inner {
	align-items: flex-start;
	gap: 16px;
	min-height: 0;
	border-left: 3px solid var(--accent);
	padding-left: clamp(14px, 1.4vw, 20px);
}

.v26 .notice-bar--page .notice-bar__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	color: var(--accent-text);
}

.v26 .notice-bar--page .notice-bar__icon svg {
	width: 28px;
	height: 28px;
}

/*
 * Текст объявления в шапке подрезался в одну строку и разворачивался по
 * клику. Здесь резать нечего: место есть, и весь смысл переноса в том,
 * чтобы объявление прочитали целиком.
 */
.v26 .notice-bar--page .notice-bar__text {
	flex: 1 1 auto;
	overflow: visible;
	display: block;
	-webkit-line-clamp: none;
	font-weight: 500;
}

.v26 .notice-bar--page .notice-bar__text .rich-text p {
	font-size: inherit;
	line-height: inherit;
}

/*
 * На телефоне общий слой режет объявление до двух строк и разворачивает по
 * тапу — так было нужно, пока оно занимало треть первого экрана в шапке.
 * Здесь резать нечего: плашка стоит в теле страницы, и весь смысл переноса
 * в том, чтобы её прочитали целиком.
 */
.v26 .notice-bar--page .notice-bar__text {
	cursor: auto;
}

.v26 .notice-bar--page .notice-bar__text .rich-text {
	display: block;
	overflow: visible;
	-webkit-line-clamp: none;
}

.v26 .notice-bar--page .notice-bar__close {
	flex: 0 0 auto;
	color: var(--accent-text);
	opacity: .7;
	transition: background .18s ease, color .18s ease, opacity .18s ease;
}

@media (hover: hover) {
	.v26 .notice-bar--page .notice-bar__close:hover {
		opacity: 1;
	}
}

/* в тёмной теме тёплая заливка выцветает — держим её собственным тоном */
.v26[data-theme="dark"] .notice-bar--page {
	background: #2A2110;
	color: #F3E7CE;
}

/*
 * На телефоне значок, крестик и отступы съедали больше трети строки, и
 * объявление в три фразы вытягивалось столбиком на полэкрана. Значок здесь
 * лишний — плашку и так выделяют цвет и золотая черта слева.
 */
@media (max-width: 640px) {
	.v26 .notice-bar--page {
		padding: 14px 0;
		font-size: 15px;
		line-height: 1.45;
	}

	.v26 .notice-bar--page .notice-bar__inner {
		gap: 8px;
		padding-left: 12px;
	}

	.v26 .notice-bar--page .notice-bar__icon {
		display: none;
	}

	.v26 .notice-bar--page .notice-bar__close {
		width: 32px;
		height: 32px;
		margin: -4px -6px 0 0;
	}
}

/* Карточки «купить / заказать» --------------------------------- */

/*
 * Общий слой кадрирует снимок карточки со сдвигом — он ставился под прежний
 * натюрморт, у которого предметы жались к правому краю. Новый кадр снят под
 * саму карточку и по пропорции с ней совпадает, поэтому показываем его как
 * есть, без смещения.
 */
.v26 .path-card img {
	object-position: center;
}

/* Иконка телефона --------------------------------------------- */

/*
 * Трубка заполняет свой квадрат 24×24 почти целиком (от 2 до 22), тогда как
 * соседние лупа и сердце занимают в нём около двух третей. При одинаковом
 * размере svg она выглядела крупнее остальных — уравниваем размах масштабом,
 * центр при этом остаётся на месте.
 */
.v26 .icon-btn--phone svg {
	transform: scale(.88);
}

/* ============================================================
   Первый слайд: имя предприятия и цифры производства
   ============================================================ */

/* Заголовок первого слайда -------------------------------------- */

/*
 * Две строки одного h1: имя предприятия и что оно делает. Крупная строка —
 * имя: мелкой золотой подписью над заголовком его уже пробовали — так его
 * не читают.
 */
.v26 .hero-slide__h1 {
	max-width: 22ch;
}

.v26 .hero-slide__brand {
	display: block;
	color: #fff;
	font-size: clamp(34px, 4.1vw, 56px);
	line-height: 1.04;
	letter-spacing: -.02em;
}

/*
 * Строка про товар — заметно мельче имени, иначе две крупные строки подряд
 * спорят друг с другом и первый экран перестаёт помещаться над сгибом.
 */
.v26 .hero-slide__headline {
	display: block;
	margin-top: 10px;
	color: rgba(255, 255, 255, .94);
	font-size: clamp(19px, 2vw, 27px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
}

/* Цифры предприятия на первом слайде ---------------------------- */

/*
 * Набор тот же, что в полосе «Производство» ниже по странице, и выглядеть он
 * должен так же: золотая черта слева, число, подпись. Классы отдельные, а не
 * общие с полосой производства — там полоса своя и отступы считаются от неё.
 */
.v26 .hero-slide__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.6vw, 40px);
	margin-top: clamp(20px, 2.4vw, 30px);
}

.v26 .hero-slide__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 2px solid rgba(212, 166, 70, .55);
}

.v26 .hero-slide__fact b {
	font-size: clamp(18px, 1.8vw, 23px);
	font-weight: 600;
	letter-spacing: -.015em;
}

.v26 .hero-slide__fact span {
	color: rgba(255, 255, 255, .66);
	font-size: 13px;
}

/*
 * Пояснение на этом слайде длиннее, чем на остальных (перечень цехов), —
 * даём ему строку пошире, иначе оно разваливается на четыре коротких.
 */
.v26 .hero-slide--main .hero-slide__lead {
	max-width: 680px;
}

/*
 * Слайд стал выше на строку цифр. Ленте высоту задаёт самый высокий слайд,
 * поэтому добавку закладываем сразу всем — иначе при листании с первого на
 * второй экран прыгал бы на высоту этой строки.
 */
.v26 .hero-slide__content {
	min-height: calc(var(--header-height, 152px) + clamp(340px, 33vw, 500px));
}

/* Адаптив ------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * На телефоне от заголовка остаются те же две строки, но короче: имя
	 * встаёт в одну строку, а описание товара — в две. Пояснение под ними
	 * общий слой прячет, и это правильно: перечень цехов занял бы полкадра.
	 */
	.v26 .hero-slide__brand {
		font-size: clamp(28px, 8vw, 38px);
	}

	.v26 .hero-slide__headline {
		margin-top: 8px;
		font-size: clamp(16px, 4.4vw, 20px);
	}

	/* цифры на телефоне — в две строки по две, без третьей мелочи под ними */
	.v26 .hero-slide__facts {
		gap: 12px 20px;
		margin-top: 18px;
	}

	.v26 .hero-slide__fact b {
		font-size: 17px;
	}

	.v26 .hero-slide__fact span {
		font-size: 12px;
	}

	.v26 .hero-slide__content {
		min-height: calc(var(--header-height, 152px) + 340px);
	}
}

@media (max-width: 480px) {
	/*
	 * На самом узком экране от трёх цифр остаются две: третья («полный цикл»)
	 * — не число, а формулировка, и уходит она без потери смысла, тогда как
	 * возраст и объём каталога — то, что здесь и требовалось сказать.
	 */
	.v26 .hero-slide__fact:nth-child(3) {
		display: none;
	}
}

/* ============================================================
   Предупреждение о cookie
   ============================================================ */

/*
 * Компактная плашка в левом нижнем углу: одна строка и кнопка, полный текст
 * раскрывается по «Подробнее». Правый угол занимает кнопка помощника. На
 * телефоне — во всю ширину над доком, а кнопка помощника поднимается над
 * плашкой на её высоту (переменную ставит home.js).
 */
.cookie-note {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 45;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 540px;
	padding: 10px 10px 10px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	box-shadow: var(--shadow-md);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
}

.cookie-note[hidden] {
	display: none;
}

.cookie-note__more {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 7px;
}

.cookie-note__more summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	list-style: none;
	cursor: pointer;
	color: var(--ink);
}

.cookie-note__more summary::-webkit-details-marker {
	display: none;
}

.cookie-note__toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--brand);
	font-weight: 500;
	white-space: nowrap;
}

.cookie-note__toggle svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .18s ease;
}

.cookie-note__more[open] .cookie-note__toggle svg {
	transform: rotate(180deg);
}

.cookie-note__more p {
	margin-top: 6px;
}

.cookie-note a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cookie-note .btn {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 0 16px;
	font-size: 13px;
}

@media (max-width: 640px) {
	.cookie-note {
		left: 12px;
		right: 12px;
		bottom: calc(76px + env(safe-area-inset-bottom));
		max-width: none;
		padding: 8px 8px 8px 14px;
		font-size: 12px;
	}

	.v26.has-cookie-note [data-site-assistant-root] {
		--sa-bottom-offset: calc(88px + var(--cookie-note-height, 0px) + env(safe-area-inset-bottom));
		--sa-mobile-bottom-offset: calc(88px + var(--cookie-note-height, 0px) + env(safe-area-inset-bottom));
	}
}

/*
 * Временная примерка засечек в крупных заголовках (?serif=pt,
 * см. Layout/v26.ctp). Меню, кнопки, цены и описания остаются на Golos.
 * У PT Serif только 400 и 700: браузер сам берёт 400 вместо 500 и 700
 * вместо 600. Сжатый трекинг Golos засечкам тесен, поэтому почти обнулён.
 */
.v26[data-serif="pt"] {
	--font-display: "PT Serif", Georgia, serif;
}

.v26[data-serif] .t-display,
.v26[data-serif] .t-h2,
.v26[data-serif] .t-h3,
.v26[data-serif] .hero-slide__brand,
.v26[data-serif] .cat-tile__title,
.v26[data-serif] .workshops__name,
.v26[data-serif] .workshops__tab,
.v26[data-serif] .path-card h2 {
	font-family: var(--font-display);
	letter-spacing: -.005em;
}

/*
 * Ширина заголовков слайдов задана в ch, а ch — ширина цифры 0 текущего
 * шрифта: у засечек она уже, чем у Golos, и «ХПП «Софрино» РПЦ» ломался
 * на «РПЦ». 12.6em — те же 20ch, но в мерке Golos.
 */
@media (min-width: 901px) {
	.v26[data-serif] .hero-slide__content h1,
	.v26[data-serif] .hero-slide__title {
		max-width: 12.6em;
	}
}

/*
 * Подзаголовки разделов («Выставки и ярмарки», «Партнёры») — тем же PT Serif,
 * что и крупные. Полужирный засечкам тяжёл, берём обычный и чуть крупнее
 * из-за низких строчных.
 */
.v26[data-serif] .t-h3 {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
}

/* у PT Serif низкие строчные: в том же кегле имя смотрится мельче, чем в Golos */
.v26[data-serif="pt"] .hero-slide__brand {
	font-size: clamp(36px, 4.35vw, 60px);
}

@media (max-width: 900px) {
	.v26[data-serif="pt"] .hero-slide__brand {
		font-size: clamp(28px, 8.5vw, 40px);
	}
}

/* Вариант ?v26=4: шапка на размытой копии слайда ------------------ */

/*
 * Фото первого экрана больше не уходит под шапку: слайдер стоит под ней,
 * а сама шапка лежит на копии текущего слайда, размытой до неузнаваемости
 * и притемнённой, как фон слайда помощника. Картинку и смену слайдов
 * ведёт home.js; при прокрутке шапка становится обычным тёмным стеклом.
 */
[data-hero="ambient"] .hero-slider {
	--header-height: 0px;
}

[data-hero="ambient"] .site-header::before {
	display: none;
}

.site-header__ambient {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #06171C;
	pointer-events: none;
	transition: opacity .25s ease;
}

.site-header__ambient::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 160% at 88% 0%, rgba(212, 166, 70, .12) 0%, transparent 60%),
		linear-gradient(180deg, rgba(3, 14, 18, .5), rgba(3, 14, 18, .62));
}

/* за края с запасом: у размытия края прозрачные и дали бы светлую кайму */
.site-header__ambient-layer {
	position: absolute;
	inset: -80px;
	background-position: center;
	background-size: cover;
	filter: blur(48px) saturate(1.15);
	opacity: 0;
	transition: opacity .7s ease;
}

.site-header__ambient-layer.is-front {
	opacity: 1;
}

/* слайд помощника без фото: тот же градиент, что у него самого */
.site-header__ambient-layer.is-plain {
	inset: 0;
	filter: none;
	background:
		radial-gradient(80% 120% at 88% 12%, rgba(212, 166, 70, .22) 0%, transparent 60%),
		linear-gradient(120deg, #041920 0%, #073442 62%, #04222B 100%);
}

.site-header.is-scrolled .site-header__ambient {
	opacity: 0;
}

/* полоса меню пропускает фон, но остаётся бирюзовой */
[data-hero="ambient"] .site-header:not(.is-scrolled) .catalog-bar {
	background: rgba(1, 61, 77, .5);
}

@media (prefers-reduced-motion: reduce) {
	.site-header__ambient-layer {
		transition: none;
	}
}