/*
  Дополнения темы к дизайн-системе концепта.

  Здесь только то, чего в концепте быть не могло, потому что он был статичным:
  переключатель языков настоящими ссылками и мелкие служебные вещи WordPress.

  Всё остальное — в concept.css, он остаётся неизменным, чтобы можно было
  построчно сверять тему с макетом.
*/

/* ---------------------------------------------------------------------------
   Контраст серого текста.

   Токен --grey объявлен в concept.css как #6F7271. На серой подложке
   --stone (#EFEFEF) он даёт 4,23:1 — меньше нормы 4,5:1 для мелкого текста
   (WCAG 2.2 AA, критерий 1.4.3). Мелким серым набраны подписи caps, хлебные
   крошки, факты в карточках номера, подписи в таблице сравнения.

   concept.css править нельзя — его построчно сверяют с макетом. Поэтому
   перекрываем сам токен: theme.css подключается ПОСЛЕ concept.css, значит
   это объявление побеждает, а все правила, уже написанные на var(--grey),
   подхватывают новое значение без единой правки.

   #666968 на #EFEFEF — 4,82:1 (на белом фоне 5,7:1).
   --------------------------------------------------------------------------- */
:root {
	--grey: #666968;
}

/* ---------------------------------------------------------------------------
   Переключатель языков.

   В концепте английской версии не было, и там стояли кнопки-заглушки:
   стили написаны под `.lang button`. Здесь переключатель — настоящие ссылки
   (так работает переход между языками и подсказка поиску о связи версий),
   поэтому повторяем те же правила для <a>.
   --------------------------------------------------------------------------- */
.lang a {
	background: none;
	border: 0;
	padding: 6px 2px;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.lang a.is-active {
	color: var(--navy);
}

/* На тёмной шапке (страницы с фото-героем) текст переключателя светлый.
   В концепте это было не нужно — там английская версия не работала. */
.has-hero:not(.is-scrolled) .lang a {
	color: rgba(255, 255, 255, .75);
}

.has-hero:not(.is-scrolled) .lang a.is-active,
.has-hero:not(.is-scrolled) .lang a:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Служебное WordPress.

   Этих элементов в статичном концепте не было.
   --------------------------------------------------------------------------- */

/* Ссылка «к содержимому» — видна только при переходе с клавиатуры. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--navy);
	color: #fff;
	padding: 12px 18px;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

/* Пустой блок конструктора: заметка видна только тем, кто может править.
   Посетителю она не показывается — это подстраховка для редактора. */
.ms-block-missing {
	border: 1px dashed var(--red);
	padding: 16px 20px;
	margin: 16px 0;
	color: var(--red);
	font-size: 14px;
}

/* ===========================================================================
   ПРАВКИ ЗАКАЗЧИКА ПО ОФОРМЛЕНИЮ

   Три пункта из документа с правками. Они отменяют часть дизайн-системы,
   поэтому лежат здесь, а не в concept.css: исходный файл остаётся неизменным,
   и тему по-прежнему можно построчно сверять с макетом.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Синий уходит с больших плоскостей.

   Заказчик: «не нравится этот синий цвет на больших пространствах, можно
   только в кнопки например добавить» и «убрать синюю заливку, при
   необходимости затемнения использовать чёрный цвет».

   Ниже — только КРУПНЫЕ заливки. Синий остаётся у кнопок, значков, рамок
   и мелких подписей: там он читается как фирменный акцент, а не как фон.
   --------------------------------------------------------------------------- */

.ftr,
.svsec,
.terr,
.dine,
.sv,
.hero,
.phero,
.menu {
	background: #000;
}

/* Затемнение фотографий — чёрное вместо синего.
   Прозрачности оставлены прежними: меняется только цвет, поэтому
   контраст текста на фото сохраняется. */
.hero__shade {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .4) 28%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .82) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 60%);
}

.phero__shade {
	background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .35) 30%, rgba(0, 0, 0, .75));
}

.terr__shade {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .92) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .1) 70%);
}

/* Затемнение под модальным окном — тоже чёрное. */
.omodal::backdrop {
	background: rgba(0, 0, 0, .72);
}

/* Тень кнопок галереи была синей — делаем нейтральной. */
.rgal__nav {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

/* ---------------------------------------------------------------------------
   2. Паттерн — нежнее.

   Заказчик просит более нежный узор, «как на действующем сайте».
   Но паспорт бренда запрещает править файл паттерна, а приёмка сверяет
   SHA-256. Поэтому ослабляем узор прозрачностью в вёрстке — файл остаётся
   байт в байт исходным, и проверка проходит.
   --------------------------------------------------------------------------- */

.pat {
	opacity: .45;
}

/* Полоса узора над панелью брони — там он работает как разделитель,
   поэтому совсем бледным его делать нельзя. */
.book__pat {
	opacity: .7;
}

/* ---------------------------------------------------------------------------
   3. Изображения в карточках: квадрат, заполнение по площади, кроп по центру.

   КАК ПРИШЛИ К ЭТОМУ РЕШЕНИЮ.

   Заказчик просил «картинки квадратными и чтобы картинка влазила,
   а не обрезалась». Причина жалобы — контейнеры карточек предложений
   горизонтальные 3:2, а все фото предложений вертикальные (0,67–1,0):
   при заполнении срезалось до половины кадра.

   Промежуточные попытки, обе неудачные:
     1. вписывание целиком на плоскую подложку — широкие серые полосы,
        выглядит как ошибка вёрстки;
     2. вписывание целиком на размытую копию снимка — фото «плавает»
        в собственном размытом фоне, тоже не то.

   РЕШЕНИЕ, КОТОРОЕ ПРИНЯТО:
     - контейнер КВАДРАТНЫЙ — как и просил заказчик, карточки ровные;
     - снимок ЗАПОЛНЯЕТ квадрат целиком (object-fit: cover). Полос нет
       по определению: кадру негде оставить пустоту;
     - кроп берётся не от геометрического центра, а со смещением вверх
       (object-position: 50% 40%). На портретных кадрах лицо и главное
       в сюжете почти всегда в верхней половине, и смещение сохраняет
       именно их, а не пол и потолок.

   ОСТАТОЧНАЯ ОБРЕЗКА И ЧТО С НЕЙ ДЕЛАТЬ.
   При квадрате и вертикальном кадре обрезается примерно четверть высоты.
   Это нормально и так делают везде, но чтобы совсем не терять сюжет,
   фотографии нужно готовить под квадрат ЗАРАНЕЕ. Требование к съёмке
   и подготовке файлов записано в ТЗ отдельным пунктом (§19).
   Тогда кроп не понадобится вообще и вопрос закроется навсегда.
   --------------------------------------------------------------------------- */

.ocard__img,
.orow__img,
.rcard__img,
.sx__pics {
	aspect-ratio: 1 / 1;
	background: none;
	overflow: hidden;
}

.ocard__img img,
.orow__img img,
.rcard__img img,
.sx__pics img.sx__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

/* Номера и услуги: интерьерные и предметные кадры, у них центр кадра
   обычно и есть смысловой центр — смещение не нужно. */
.rcard__img img,
.sx__pics img.sx__img {
	object-position: 50% 50%;
}

/* ---------------------------------------------------------------------------
   3a. Карточки предложений (.ocard) — квадрат БЕЗ ОБРЕЗКИ.

   УТОЧНЕНИЕ ВЛАДЕЛЬЦА (11.10.2026). Замечание клиента «картинки квадратные,
   чтобы не обрезались» относится ТОЛЬКО к блоку предложений — это карточки
   `.ocard` (блок «Пропозиції» и «Інші пропозиції» на страницах предложений).
   Карточки номеров `.rcard`, строки предложений `.orow` и картинки услуг
   `.sx__pics` остаются как были: квадрат с заполнением и кропом (правило выше).

   ПОЧЕМУ CONTAIN, А НЕ COVER. Фото предложений — вертикальные кадры 0,80–1,00
   (birthday 1008×1244; work-trip 1080×1350; biznes 1254×1254). Cover в квадрате
   срезал у них до 20% ширины кадра. Contain вписывает кадр целиком: ни один
   край не режется ни на одной ширине экрана. Ширина квадрата задаётся сеткой
   `.ogrid`, высота всегда равна ширине — ряды остаются ровными.

   ПОЧЕМУ ЭТО НЕ «СЕРАЯ ПОЛОСА». Поле по бокам — осознанное паспарту, а не
   пустота: подложка взята из палитры темы (--stone — тот же нейтральный тон,
   что у секции .section--stone и блока .quote) плюс тонкий кант --line.
   Квадрат читается как врезка под стеклом, а не как ошибка вёрстки.
   Прежняя неудачная попытка (см. п.3 выше) — это вписывание в контейнер 3:2,
   где на вертикальном кадре поля выходили шире самого снимка.
   --------------------------------------------------------------------------- */

.ocard__img {
	aspect-ratio: 1 / 1;
	background: var(--stone);
	box-shadow: inset 0 0 0 1px var(--line);
	overflow: hidden;
}

/* ПРАВКА ВЛАДЕЛЬЦА 22.10.2026 (наряд 2026-10-22_0157): «фото адаптувати в квадрат, бо тут сірий фон
   по боках». Решение от 11.10 (contain + паспарту) отменено: кадр заполняет квадрат целиком
   (cover), серых полей нет. Точка кропа — 50% 40%: лица и главный сюжет в кадре обычно выше центра. */
.ocard__img img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: 50% 40%;
}

/* Галерея отеля: мозаика из снимков разной ориентации. Плитки там
   не квадратные по замыслу, пропорции заданы макетом. */
.gl__it {
	background: none;
}

.gl__it img {
	object-fit: cover;
}

/* Кадр заполняет плитку целиком — и в сетке, и в ленте.

   Почему это здесь появилось. Разметке галереи проставили width и height
   (нужны, чтобы браузер знал пропорции кадра до загрузки и не сдвигал
   раскладку). У <img> без CSS-ширины эти атрибуты становятся шириной самого
   кадра: снимок вылезал за плитку и обрезался по правому краю, а портретные
   кадры оставляли справа пустую полосу. Правило выше (в concept.css) задавало
   только высоту — ширину задаём здесь, а object-fit: cover доводит кадр
   до размера плитки. */
.gl__it img,
.gl-rail__it img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ПРАВКА ВЛАДЕЛЬЦА 22.10.2026 (наряд 2026-10-22_0157): «обрізає вертикальні фото» и «пусті місця між фото».

   Сетка галереи (.gl) раньше была жёсткой мозаикой 12 колонок × ячейки по 150 px со спанами
   «через девять» — кадр любой ориентации резался под ячейку, а при неполном ряду оставались дыры.
   Теперь ряды «по ширине»: у каждой плитки --ar = ширина/высота кадра (считает blocks/gallery.php),
   flex-basis и flex-grow пропорциональны --ar, поэтому в одном ряду все кадры одной высоты, кадр
   показан целиком (плитка того же отношения сторон, cover ничего не режет) и пустот в ряду нет.
   max-width ограничивает только последний, неполный ряд: он не растягивается на всю ширину. */
.gl {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.gl .gl__it,
.gl .gl__it:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
	flex-grow: var(--ar, 1.5);
	flex-shrink: 1;
	flex-basis: calc(var(--ar, 1.5) * 220px);
	max-width: calc(var(--ar, 1.5) * 360px);
	min-width: 0;
}

.gl .gl__it img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ar, 1.5);
	object-fit: cover;
}

@media (max-width: 760px) {
	.gl {
		gap: 8px;
	}

	.gl .gl__it,
	.gl .gl__it:nth-child(n) {
		flex-basis: calc(var(--ar, 1.5) * 120px);
		max-width: calc(var(--ar, 1.5) * 280px);
	}
}


/* Постер в полосе scroll-видео.

   В concept.css полоса размещает только ПРЯМОГО потомка: .sv > img
   (width/height 100 %, object-fit: cover). Разметка же оборачивает кадр
   в <picture>, а для него там стоит .sv picture{display:contents} — коробки
   у <picture> нет, потомок ложится внутрь .sv, но под правило «.sv > img»
   уже не попадает. В итоге постер задавал высоту полосы сам: на широком
   экране под кадром 16:9 оставалась тёмная полоса, а высота секции зависела
   от того, загрузился кадр или нет.

   Здесь тот же приём, что в concept.css для героя: кадр занимает ровно
   площадь полосы и ждёт видео, не меняя высоту страницы. */
.sv--band > picture > img,
.sv--terr > picture > img,
.sv--dine > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   ЗАГОЛОВКИ: уровни по порядку, вид прежний.

   В подвале стояли h4, а в карточке номера — h3. На страницах, где между
   h1/h2 и подвалом нет своих h3, получался пропуск уровня (h2 → h4 на
   /contacts/ и /gallery/, h1 → h3 на /rooms/). Для диктора и поиска это
   ошибка структуры (WCAG 2.2 AA, критерий 1.3.1).

   Теги исправлены в footer.php и inc/blocks.php, а здесь дословно повторён
   прежний вид: правила .ftr h4 и .rcard h3 из concept.css.
   --------------------------------------------------------------------------- */

.ftr h3 {
	font: 500 12px/1 'Gotham Pro', sans-serif;
	color: rgba(255, 255, 255, .65);
	margin: 0 0 20px;
}

.rcard h2 {
	font: 700 22px/1.25 'Gotham Pro', sans-serif;
}

.rcard h2 a {
	text-decoration: none;
}

.rcard h2 a:hover {
	color: var(--red);
}

/* ===========================================================================
   БЛОГ

   Раздел новый, в концепте его не было. Всё, что можно, собрано из готовых
   элементов: сетка .rgrid, карточка .rcard, шапка .shead, «чипсы» .chips,
   текстовый контейнер .legal. Здесь только то, чего не было совсем:
   постраничная навигация и обложка статьи.
   =========================================================================== */

/* Блок благодарности формы обратного звонка.

   В концепте формы были заглушками и показывали только строку текста,
   поэтому экрана благодарности в стилях не было. Здесь он появляется
   после успешной отправки вместо самой формы. */
.cb__ok {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.cb__ok[hidden] {
	display: none;
}

.cb__ok .h3 {
	margin: 0;
}

/* Сообщение о неудаче отправки. Пустым не занимает места. */
.cb__msg:empty {
	display: none;
}

/* Поле-ловушка для ботов не должно влиять на раскладку. */
.cb__f [name="botcheck"] {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Постраничная навигация в списке статей. */
.ms-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.ms-pager .caps {
	color: var(--grey);
}

/* Ненажимаемая сторона: страница первая или последняя. */
.ms-pager .is-off {
	color: var(--line);
	text-decoration: none;
	cursor: default;
}

/* Обложка статьи. Ширина ограничена, чтобы строка не растягивалась
   на широком экране и текст читался. */
.ms-cover {
	margin: 0 auto 48px;
	max-width: 1100px;
}

.ms-cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* Текст статьи: та же мера, что у юридических страниц, — 860 px. */
.single-article .legal {
	max-width: 860px;
	margin: 0 auto;
}

/* Строка сведений о статье: категория, дата, автор. */
.phead__num time {
	color: inherit;
}


/* Моушен, ефект 1 (ТЗ_моушен): заголовки построчно. Класи ставить лише motion.js — без JS заголовки звичайні.
   Невеликий padding/margin, щоб маска overflow:hidden не обрізала нижні виносні елементи літер (у, р, д). */
.ms-line {
	display: block;
	overflow: hidden;
	padding-bottom: .08em;
	margin-bottom: -.08em;
}

.ms-line__in {
	display: block;
}

/* Моушен, ефект 3 (ТЗ_моушен): галерея-«стрічка» (поле «Розкладка» = Стрічка в блоці «Галерея»).
   Без JS, на телефоні й планшеті — звичайна горизонтальна прокрутка пальцем із «клацанням» кадрів.
   На комп'ютері motion.js додає .js-rail: прокрутку вимикаємо, стрічку рухає GSAP, поки гість гортає вниз.
   Стрічка виходить за правий край контейнера до краю екрана — так видно, що далі є ще фото. */
.gl-rail {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	margin-right: calc(var(--m) * -1);
}

.gl-rail__track {
	display: flex;
	gap: 12px;
	width: max-content;
	padding-right: var(--m);
}

.gl-rail__it {
	display: block;
	/* ПРАВКА 22.10.2026 (наряд 2026-10-22_0157): ширина плитки по пропорции кадра (--ar из
	   blocks/gallery.php) вместо фиксированных 560 px — вертикальный кадр показывается целиком.
	   Раньше: flex: 0 0 min(78vw, 560px). Ограничение 90vw — чтобы широкий кадр не вылезал за экран. */
	flex: 0 0 auto;
	width: min(calc(var(--ar, 1.5) * clamp(260px, 36vw, 460px)), 90vw);
	height: clamp(260px, 36vw, 460px);
	overflow: hidden;
	scroll-snap-align: start;
}

.gl-rail__it img {
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.gl-rail__it:hover img {
	transform: scale(1.03);
}

.gl-rail.js-rail {
	overflow: hidden;
	scroll-snap-type: none;
}

/* Фото стрічки понад «Скільки фото показати спочатку» — лише для лайтбокса. */
.gl-rail__it[hidden] {
	display: none;
}

/* ПЕРЕМИКАЧ РУХУ В ПІДВАЛІ.
   Навіщо: рух увімкнений для всіх, а вимикає його сам гість — тут.
   Кнопка мусить виглядати як частина підвалу (дрібний приглушений текст),
   але лишатися помітною при наведенні й фокусі з клавіатури. */
.ftr__motion {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .35);
	transition: color .2s ease, text-decoration-color .2s ease;
}

.ftr__motion:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

.ftr__motion:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Коли рух вимкнено — кнопка каже «Повернути рух», і це видно. */
.ftr__motion[aria-pressed="true"] {
	color: #fff;
	text-decoration-color: currentColor;
}

/* ===========================================================================
   ЗГОДА НА ОБРОБКУ ПЕРСОНАЛЬНИХ ДАНИХ

   Чекбокс згоди (ms_consent_field) — обов'язкове поле всіх форм заявок.
   Оформлення своє: у дизайн-системі прапорців не було, а правила .ff input
   і .cb__f input написані під текстові поля — вони перетворили б прапорець
   на великий прямокутник із рамкою. Перекриваємо їх тут, concept.css
   залишається незмінним.

   Поле навмисно ВИДИМЕ й НЕ позначене: і схована, і заздалегідь позначена
   згода вважаються недійсними.
   =========================================================================== */

/* У сітці модального вікна згода займає весь рядок. */
.ff--check {
	grid-column: 1 / -1;
}

/* У формі дзвінка (.cb__f, flex з переносом) — теж окремий рядок. */
.cb__f .ff--check {
	flex: 1 1 100%;
}

.ff--check label,
.cb__f .ff--check label {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font: 400 13px/1.5 'Gotham Pro', sans-serif;
	color: var(--navy80);
	cursor: pointer;
}

.ff--check label input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	padding: 0;
	border: 1px solid var(--line);
	background: #fff;
	accent-color: var(--red);
}

/* Переключатель «так / ні» в формах заявок (inc/blocks.php, .ff__radio; приёмка 2026-10-22_0301).
   Правило .ff input растягивало радиокнопки на всю ширину с рамкой и отступами:
   кружки стояли отдельно по центру, подписи — под ними. Кружок и подпись в строку, как у согласия. */
.ff__radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 6px 0;
}

.ff .ff__radio label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 400 15px/1.3 'Gotham Pro', sans-serif;
	color: var(--navy);
	cursor: pointer;
}

.ff .ff__radio input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	accent-color: var(--red);
}

.ff--check label span,
.cb__f .ff--check label span {
	font: inherit;
	color: inherit;
}

.ff--check label a {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Помилку показуємо рамкою навколо прапорця: перефарбувати сам прапорець
   написом не можна — це системний елемент керування. */
.ff.is-err input[type="checkbox"] {
	outline: 2px solid var(--red);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Рядок про перехід на зовнішній двигун бронювання.

   У концепті .bk-note у підвалі панелі брони був прихований
   (.hp .bk-foot .bk-note{display:none}): тоді форма нікуди не вела й
   пояснювати було нічого. Тепер кнопка відкриває систему Best Western —
   інший сайт, де персональні дані обробляє його власник. Гість має це
   бачити, тому повертаємо рядок на екран.
   --------------------------------------------------------------------------- */

.hp .bk-foot .bk-note {
	display: block;
	margin-top: 6px;
}

.bk-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ===========================================================================
   ПОСИЛАННЯ В БЛОКАХ ПОСЛУГ

   Назви послуг у блоках .srv (сторінка /services/) та .sx (головна) ведуть
   на сторінки самих послуг. Оформлення — як у картки номера (.rcard h2 a):
   без підкреслення, при наведенні червоне. Розміри рядків не змінюються,
   тому блок не «їде».

   .sx__head повторює колишній .sx__btn: раніше перемикачем була вся кнопка
   рядка, тепер назва — посилання, а кнопкою лишився «плюс». Поля, шрифт
   і відступи перенесені дослівно з concept.css, тому висота рядка та сама.
   =========================================================================== */

.srv__t h2 a {
	color: inherit;
	text-decoration: none;
}

.srv__t h2 a:hover,
.srv__t h2 a:focus-visible {
	color: var(--red);
}

.sx__head {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 26px 0;
	color: var(--navy);
	font: 500 22px/1.25 'Gotham Pro', sans-serif;
	transition: color .4s, padding .4s;
}

.sx__it.is-on .sx__head {
	color: var(--red);
	padding-left: 10px;
}

/* Перемикач — лише «плюс»: рамку рядка з concept.css прибираємо. */
.sx__head .sx__btn {
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	cursor: pointer;
}

.sx__head .sx__name {
	flex: 1;
	color: inherit;
	text-decoration: none;
}

/* Наведення лише на посилання рядка: клас .sx__name є ще в блоці
   «Часті питання» (.sx--faq, h3 із тим самим класом), і питання там
   не посилання — без обмеження вони червоніли б при наведенні. */
.sx__head .sx__name:hover,
.sx__head .sx__name:focus-visible {
	color: var(--red);
}

@media (max-width: 900px) {
	.sx__head {
		font-size: 19px;
		padding: 20px 0;
	}

	.sx__it.is-on .sx__head {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sx__head {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   ЗАГОЛОВОК МОДАЛЬНОГО ОКНА ЗАЯВКИ

   У блоці «Пропозиції» заголовок вікна був <h2 class="h3"> і дублював назву
   картки (h3) — у документі з'являвся другий рядок заголовків іншого рівня.
   blocks/offers.php друкує його як <p class="h3"> (розмір задає клас .h3,
   тож вигляд той самий), але правило .omodal h2 з concept.css — відступ
   знизу і місце під хрестик — прив'язане до тега. Переносимо його на клас.

   Селектор — прямий нащадок .omodal__in: такий самий клас .h3 має заголовок
   екрана подяки всередині .omodal__ok, і ці відступи його не стосуються.
   --------------------------------------------------------------------------- */

.omodal__in > .h3 {
	margin-bottom: 8px;
	padding-right: 40px;
}