/* Шоурумы Happy Gifts — стили лендинга.
   Токены и типографика взяты из дизайн-системы Happy Gifts (тот же набор
   переменных, что был вшит в старую страницу /moscow-showroom/).
   Шрифт Montserrat переменный: одни и те же файлы отдают все начертания 400–700. */

/* ---------- Шрифт ---------- */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/montserrat-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены ---------- */
:root {
	--hg-yellow: #ffe500;
	--hg-yellow-hover: #f2d900;
	--hg-black: #000000;
	--hg-graphite: #474a55;
	--hg-white: #ffffff;
	--hg-grey-1: #d7d7d7;
	--hg-grey-3: #7d7d7d;
	--hg-grey-4: #505050;
	--hg-border: #e3e4e8;

	--hg-radius-sm: 8px;
	--hg-radius-md: 10px;
	--hg-radius-lg: 12px;
	--hg-radius-xl: 20px;
	--hg-radius-2xl: 32px;

	--hg-shadow-sm: 0 2px 10px rgba(0, 0, 0, .10);
	--hg-shadow-md: 0 4px 14px rgba(0, 0, 0, .08);
	--hg-shadow-lg: 0 10px 30px rgba(0, 0, 0, .12);
	--hg-transition: .15s ease;

	--hg-font: 'Montserrat', Arial, sans-serif;
	--sr-header-h: 72px;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--hg-white);
	font-family: var(--hg-font);
	color: var(--hg-graphite);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--hg-black); }
a:hover { color: var(--hg-grey-4); }
.nowrap { white-space: nowrap; }

.sr-wrap { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
section[id] { scroll-margin-top: 84px; }

/* ---------- Кнопки (повторяют Button из дизайн-системы) ---------- */
.sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--hg-font);
	border: none;
	border-radius: var(--hg-radius-md);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--hg-transition), box-shadow var(--hg-transition), border-color var(--hg-transition);
}
.sr-btn--md { height: 38px; padding: 0 16px; font-size: 14px; }
.sr-btn--lg { height: 46px; padding: 0 22px; font-size: 15px; }
.sr-btn--primary { background: var(--hg-yellow); color: var(--hg-black); font-weight: 600; }
.sr-btn--primary:hover { background: var(--hg-yellow-hover); box-shadow: var(--hg-shadow-sm); color: var(--hg-black); }
.sr-btn--secondary { background: var(--hg-white); color: var(--hg-black); font-weight: 500; border: 1.5px solid var(--hg-grey-1); }
.sr-btn--secondary:hover { border-color: var(--hg-yellow); box-shadow: var(--hg-shadow-sm); }

.sr-textlink { font-size: 15px; font-weight: 600; color: #000; text-decoration: none; }
.sr-textlink:hover { text-decoration: underline; }

/* ---------- Шапка ---------- */
.sr-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1.5px solid var(--hg-border);
}
.sr-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.sr-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.sr-logo img { height: 26px; width: auto; display: block; }
/* Ряд шапки не должен переноситься: у «Санкт-Петербурга» и «Нижнего Новгорода»
   название рвалось на две строки и распирало ряд по высоте. Пункты меню
   и название города держим одной строкой, лишнее прячем на узких экранах. */
.sr-nav { margin-left: 20px; display: flex; gap: 26px; min-width: 0; }
.sr-navlink {
	color: var(--hg-black);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	white-space: nowrap;
	transition: color var(--hg-transition);
}
.sr-navlink:hover { color: var(--hg-grey-3); }
.sr-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Переключатель филиала */
.sr-citybtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1.5px solid var(--hg-grey-1);
	border-radius: var(--hg-radius-md);
	font-family: var(--hg-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--hg-black);
	cursor: pointer;
	transition: border-color var(--hg-transition), box-shadow var(--hg-transition);
}
.sr-citybtn__name { white-space: nowrap; }
.sr-citybtn:hover { border-color: var(--hg-yellow); box-shadow: var(--hg-shadow-sm); }
.sr-citybtn[aria-expanded="true"] { border-color: var(--hg-yellow); background: #fffdf0; }
.sr-citybtn__caret { transition: transform var(--hg-transition); flex: none; }
.sr-citybtn[aria-expanded="true"] .sr-citybtn__caret { transform: rotate(180deg); }

.sr-citymenu {
	border-top: 1.5px solid var(--hg-border);
	background: #fff;
	box-shadow: var(--hg-shadow-lg);
	padding: 22px 0 26px;
	max-height: 70vh;
	overflow-y: auto;
}
.sr-citymenu[hidden] { display: none; }
.sr-citymenu__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hg-grey-3);
	margin-bottom: 14px;
}
.sr-citymenu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
}
.sr-citymenu__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 14px;
	border: 1.5px solid var(--hg-border);
	border-radius: var(--hg-radius-md);
	text-decoration: none;
	transition: border-color var(--hg-transition), background-color var(--hg-transition);
}
.sr-citymenu__item:hover { border-color: var(--hg-yellow); background: #fffdf0; }
.sr-citymenu__item.is-current { border-color: var(--hg-black); background: var(--hg-yellow); }
/* Виджет брони Б24 просит иконку переговорной по относительному пути
   /bitrix/js/booking/... — на портале он есть, а на нашем домене отдаёт 404, и
   браузер рисует «картинка не загрузилась» прямо рядом с адресом филиала.
   Прячем: смысла иконка не несёт, адрес подписан рядом словами. */
.booking--crm-forms--resource-avatar-image { display: none; }

/* Названия в переключателе держим одной строкой: «Нижний Новгород» переносился
   и делал свою ячейку вдвое выше соседних, разрывая ряд. */
.sr-citymenu__city { font-size: 15px; font-weight: 600; color: #000; white-space: nowrap; }
.sr-citymenu__hint { font-size: 11.5px; color: var(--hg-grey-3); }

/* Подсказка «на сайте у вас выбран другой город» */
.sr-suggest {
	background: var(--hg-yellow);
	color: #000;
	font-size: 14.5px;
	font-weight: 500;
}
.sr-suggest[hidden] { display: none; }
.sr-suggest__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 11px 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.sr-suggest a { font-weight: 700; color: #000; }
.sr-suggest__close {
	margin-left: auto;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #000;
	padding: 0 4px;
}

/* ---------- Общие блоки ---------- */
.sr-section { padding-top: 88px; padding-bottom: 88px; background: #fff; }
.sr-section--grey { background: #fafafb; border-top: 1px solid var(--hg-border); border-bottom: 1px solid var(--hg-border); }
.sr-section--dark { background: var(--hg-graphite); padding-top: 84px; padding-bottom: 84px; }

.sr-head { max-width: 680px; }
.sr-head--wide { max-width: 720px; }
.sr-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--hg-grey-3); }
.sr-eyebrow--yellow { color: var(--hg-yellow); }

/* Кегль плавает с шириной: в заголовок теперь входит название города, и на
   «Санкт-Петербурге» фиксированные 46px давали семь строк вместо четырёх. */
.sr-h1 {
	margin: 22px 0 0;
	font-size: clamp(28px, 3.1vw, 42px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #000;
	text-wrap: balance;
}
.sr-h2 {
	margin: 12px 0 0;
	font-size: 34px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #000;
}
.sr-h2--light { color: #fff; }
.sr-h3 { margin: 0 0 20px; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #000; }

.sr-lead { margin: 22px 0 0; font-size: 18px; line-height: 1.55; color: var(--hg-graphite); max-width: 520px; }
.sr-lead--sm { font-size: 15.5px; margin-top: 18px; }

/* ---------- Первый экран ---------- */
.sr-hero { border-bottom: 1px solid var(--hg-border); }
.sr-hero__inner {
	padding-top: 72px;
	padding-bottom: 80px;
	display: grid;
	grid-template-columns: 1.02fr 1.1fr;
	gap: 56px;
	align-items: center;
}
.sr-badge {
	display: inline-block;
	background: var(--hg-yellow);
	color: #000;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 7px 12px;
	border-radius: var(--hg-radius-sm);
}
.sr-hero__cta { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sr-privacy {
	margin-top: 26px;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 12px 16px;
	border: 1.5px solid var(--hg-border);
	border-radius: var(--hg-radius-md);
	background: #fff;
	max-width: 460px;
	font-size: 13.5px;
	line-height: 1.45;
}
.sr-privacy svg { flex: none; }
.sr-hero__photo {
	border-radius: var(--hg-radius-2xl);
	border: 1.5px solid var(--hg-border);
	min-height: 440px;
	background-size: cover;
	background-position: center;
	box-shadow: var(--hg-shadow-lg);
}
.sr-hero__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	background: repeating-linear-gradient(45deg, #f4f4f7, #f4f4f7 14px, #ececf1 14px, #ececf1 28px);
	padding: 32px;
}
.sr-hero__soon { display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 340px; }
.sr-hero__soon strong { font-size: 17px; color: #000; }
.sr-hero__soon span { font-size: 14px; line-height: 1.5; color: var(--hg-grey-3); }

/* ---------- Карточки преимуществ ---------- */
.sr-cards { margin-top: 44px; display: grid; gap: 20px; }
.sr-cards--4 { grid-template-columns: repeat(4, 1fr); }
.sr-card {
	border: 1.5px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
	padding: 24px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sr-card h3 { margin: 0; font-size: 17px; font-weight: 700; color: #000; }
.sr-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hg-graphite); }
.sr-ico {
	width: 46px;
	height: 46px;
	border-radius: var(--hg-radius-md);
	background: var(--hg-yellow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* ---------- Галерея ---------- */
/* Колонки, а не сетка: фото филиалов приходят вперемешку — вертикальные и
   горизонтальные, от 2 до 8 штук. Колонки одинаково аккуратно раскладывают любой
   набор, сетка с фиксированными плитками — нет. */
.sr-gallery { margin-top: 44px; column-count: 3; column-gap: 20px; }
.sr-shot {
	margin: 0 0 20px;
	break-inside: avoid;
	page-break-inside: avoid;
	position: relative;
	border-radius: var(--hg-radius-lg);
	overflow: hidden;
	border: 1.5px solid var(--hg-border);
	background: #fff;
	cursor: zoom-in;
}
.sr-shot img { display: block; width: 100%; height: auto; }
.sr-shot figcaption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	background: rgba(255, 255, 255, .94);
	border: 1.5px solid var(--hg-border);
	border-radius: var(--hg-radius-md);
	padding: 9px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--hg-grey-4);
}

/* ---------- Шаги ---------- */
.sr-steps { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sr-step { display: flex; flex-direction: column; gap: 16px; }
.sr-step__n {
	width: 44px;
	height: 44px;
	border-radius: var(--hg-radius-md);
	border: 1.5px solid #000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: #000;
}
.sr-step h3 { margin: 0; font-size: 19px; font-weight: 700; color: #000; }
.sr-step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--hg-graphite); }

/* ---------- Правила ---------- */
.sr-rules { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sr-rule {
	display: flex;
	gap: 16px;
	background: rgba(255, 255, 255, .06);
	border-radius: var(--hg-radius-lg);
	padding: 22px;
}
.sr-rule svg { flex: none; }
.sr-rule h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; color: #fff; }
.sr-rule p { margin: 0; font-size: 14px; line-height: 1.5; color: #d3d5db; }

/* ---------- Бронирование ---------- */
.sr-booking { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.sr-booking__text[data-sticky] { position: sticky; top: 104px; }
.sr-booking__form {
	border: 1.5px solid var(--hg-border);
	border-radius: var(--hg-radius-xl);
	padding: 12px;
	box-shadow: var(--hg-shadow-md);
	min-height: 360px;
}
.sr-checks { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sr-checks li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	color: var(--hg-graphite);
}
.sr-checks li::before {
	content: '';
	flex: none;
	width: 18px;
	height: 18px;
	background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.sr-noscript { font-size: 14px; line-height: 1.6; padding: 20px; }

/* Запись напрямую у филиала — пока у города нет своей формы брони в Б24 */
.sr-booking__form--direct { min-height: 0; }
.sr-direct { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sr-direct h3 { margin: 0; font-size: 20px; font-weight: 700; color: #000; }
.sr-direct p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--hg-graphite); }
.sr-direct__phone { font-size: 26px; font-weight: 700; color: #000; text-decoration: none; letter-spacing: -0.01em; }
.sr-direct__phone:hover { text-decoration: underline; }
/* Второй номер филиала — тише первого, но кликабельный */
.sr-direct__phone--second { font-size: 19px; margin-top: -6px; color: var(--hg-grey-4); }
.sr-direct__mail { font-size: 14px; color: var(--hg-grey-3); }
.sr-direct__alt { font-size: 13.5px; color: var(--hg-grey-3); padding-top: 6px; border-top: 1px solid var(--hg-border); width: 100%; }
.sr-direct__alt a { font-weight: 600; }

/* ---------- Контакты ---------- */
.sr-contacts { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.sr-contacts--noroutes { grid-template-columns: 1fr; max-width: 720px; }
.sr-contacts [data-sticky] { position: sticky; top: 104px; }
.sr-facts { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.sr-contacts--noroutes .sr-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 40px;
}
.sr-fact { display: flex; gap: 14px; }
.sr-fact svg { flex: none; }
.sr-fact__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--hg-grey-3);
	text-transform: uppercase;
}
.sr-fact__strong { margin-top: 4px; font-size: 15.5px; font-weight: 600; color: #000; display: block; }
.sr-fact__link { text-decoration: none; }
.sr-fact__link:hover { text-decoration: underline; }
.sr-fact__mail { display: block; margin-top: 3px; font-size: 14px; color: var(--hg-grey-4); }
.sr-fact__text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--hg-graphite); }

.sr-routes { display: flex; flex-direction: column; gap: 20px; }
.sr-route__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sr-route__title { font-size: 14px; font-weight: 700; color: #000; }
.sr-route__img {
	display: block;
	border-radius: var(--hg-radius-xl);
	border: 1.5px solid var(--hg-border);
	overflow: hidden;
}
.sr-route__img img { display: block; width: 100%; height: auto; }

/* ---------- Другие филиалы ---------- */
.sr-others { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hg-border); }
.sr-others__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 12px;
}
.sr-others__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid var(--hg-border);
	border-radius: var(--hg-radius-lg);
	text-decoration: none;
	height: 100%;
	transition: border-color var(--hg-transition), box-shadow var(--hg-transition);
}
.sr-others__item:hover { border-color: var(--hg-yellow); box-shadow: var(--hg-shadow-sm); }
.sr-others__city { font-size: 15.5px; font-weight: 700; color: #000; }
.sr-others__addr { font-size: 13px; line-height: 1.45; color: var(--hg-grey-3); }

/* ---------- Подвал ---------- */
.sr-footer {
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid var(--hg-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.sr-footer__brand { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--hg-grey-3); }
.sr-footer__brand img { height: 22px; width: auto; display: block; }
.sr-footer__right { display: flex; align-items: center; gap: 18px; }
.sr-footer__phone { font-size: 15px; font-weight: 700; color: #000; text-decoration: none; }

/* ---------- Лайтбокс ---------- */
.sr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(0, 0, 0, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 64px;
}
.sr-lightbox[hidden] { display: none; }
.sr-lightbox__img { max-width: 100%; max-height: 100%; border-radius: var(--hg-radius-lg); display: block; }
.sr-lightbox__close,
.sr-lightbox__nav {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	border: none;
	color: #fff;
	cursor: pointer;
	border-radius: var(--hg-radius-md);
	line-height: 1;
	transition: background-color var(--hg-transition);
}
.sr-lightbox__close:hover,
.sr-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.sr-lightbox__close { top: 18px; right: 18px; width: 40px; height: 40px; font-size: 26px; }
.sr-lightbox__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 32px; }
.sr-lightbox__nav--prev { left: 12px; }
.sr-lightbox__nav--next { right: 12px; }

/* ---------- Планшет ---------- */
@media (max-width: 1000px) {
	.sr-hero__inner { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 56px; }
	.sr-hero__photo { min-height: 320px; }
	.sr-lead { max-width: none; }
	.sr-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.sr-steps { grid-template-columns: 1fr; gap: 28px; }
	.sr-booking { grid-template-columns: 1fr; gap: 28px; }
	.sr-contacts { grid-template-columns: 1fr; gap: 32px; }
	.sr-contacts [data-sticky],
	.sr-booking__text[data-sticky] { position: static; }
	.sr-gallery { column-count: 2; }
	.sr-nav { display: none; }
}

/* ---------- Мобильные ---------- */
@media (max-width: 640px) {
	.sr-wrap { padding-left: 16px; padding-right: 16px; }
	.sr-section { padding-top: 52px; padding-bottom: 52px; }
	.sr-section--dark { padding-top: 52px; padding-bottom: 52px; }
	.sr-header__inner { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
	.sr-header__right .sr-book { display: none; }
	.sr-h1 { font-size: 30px; }
	.sr-h2 { font-size: 25px; }
	.sr-h3 { font-size: 19px; }
	.sr-lead { font-size: 16px; }
	.sr-cards--4 { grid-template-columns: 1fr; }
	.sr-rules { grid-template-columns: 1fr; }
	.sr-gallery { column-count: 1; }
	.sr-contacts--noroutes .sr-facts { grid-template-columns: 1fr; }
	.sr-hero__photo { min-height: 230px; }
	.sr-citymenu__list { grid-template-columns: 1fr 1fr; }
	.sr-lightbox { padding: 16px; }
	.sr-lightbox__nav { width: 36px; height: 52px; font-size: 26px; }
	.sr-footer { flex-direction: column; align-items: flex-start; }
}