/* Start:/bitrix/templates/template.nadel/css/pages/service.css?178878064537240*/
/**
 * Страница сервиса: ремонтный ярлык.
 *
 * Направление то же, что у «Доставки и оплаты», и это решение, а не совпадение:
 * страницы стоят рядом в подвале, отвечают на один и тот же вопрос «что со мной
 * будет дальше» и должны говорить одним голосом. Отсюда всё остальное: белая
 * бирка с прострочкой на сером поле, знак и его расшифровка вместо сетки
 * одинаковых карточек, чернильная линия одной толщины во всех знаках одного
 * размера. Жёлтый заливает ровно один знак — тот, что отвечает на главный
 * вопрос посетителя: везти самому или отправлять.
 *
 * Ни теней, ни скруглений, ни плашек под иконки: на ярлыке их нет.
 *
 * Палитра сайта: #ffed00 жёлтый, #372c2c чернила, #f0eeeb поле,
 * #d9d4d0 линия, #b3aca8 стежок, #6e312a ссылки. Шрифт общий, MuseoSans.
 *
 * Файл подключается только со страницы сервиса (Asset::addCss в
 * /service/index.php), поэтому чужие блоки — список городов, список магазинов,
 * плашка про чистую технику из подвала — правятся здесь по их собственным
 * классам: на других страницах эти правила не окажутся.
 *
 * @since 2026-09-06, направление ярлыка — 2026-09-07
 */

/* ---------- знаки ---------- */

/*
 * Линия знака не делится на масштаб: без non-scaling-stroke штрих считался бы
 * в координатах viewBox, и знак в 26 пикселей вышел бы вдвое бледнее знака
 * в 52. Толщина задана в пикселях и подобрана под размер знака — 1.7 на бирке,
 * тоньше в мелких (см. .b-service-calc__sign).
 */
.b-sv-ink,
.b-sv-paper,
.b-sv-cut {
	fill: none;
	stroke: #372c2c;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.b-sv-paper {
	fill: #fff;
}

/* Белый штрих вдвое толще линии — им перечёркивающая черта отделяет себя от
   формы, которую перечёркивает. Идёт после .b-sv-ink и перебивает его. */
.b-sv-cut {
	stroke: #fff;
	stroke-width: 5;
}

.b-sv-fill {
	fill: #ffed00;
}

/*
 * Единственное движение на странице: знак того пункта, на который человек
 * навёл, заливается жёлтым — так на ярлыке отмечают нужное. Кривая одна на
 * все переходы: выход из уже видимого состояния, а не линейное проявление.
 */
.b-sv-lead {
	transition: fill .2s cubic-bezier(.2, .65, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	.b-sv-lead,
	.l-page .b-shops-list_item,
	.l-page .b-shops-list_item_address span,
	.l-page .b-city-list_item .g-button,
	.l-page .b-city-list_item .g-button-hidden {
		transition: none;
	}
}

/* ---------- поле и бирка ---------- */

.b-service-head {
	margin-bottom: 6px;
}

/* Серое поле — «ткань», на которую нашита белая бирка. Ширину держим по мере
   чтения и прижимаем влево: заголовок страницы и хлебные крошки шаблон рисует
   по левому краю, и центрированный блок под ними читался бы как чужой. */
.b-service-field {
	max-width: 1000px;
	padding: 22px;
	background: #f0eeeb;
}

/*
 * Прострочка вместо рамки: четыре ряда стежков с настоящим ритмом — стежок
 * длиннее просвета, как у машинной строчки. Рисуем фоном на псевдоэлементе,
 * чтобы не заводить лишних узлов в разметке.
 */
.b-service-tag {
	position: relative;
	padding: 30px 34px 26px;
	background: #fff;
}

.b-service-tag::before {
	content: '';
	position: absolute;
	inset: 9px;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, #b3aca8 0 9px, transparent 9px 15px) left top / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, #b3aca8 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(180deg, #b3aca8 0 9px, transparent 9px 15px) left top / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, #b3aca8 0 9px, transparent 9px 15px) right top / 1px 100% no-repeat;
}

.b-service-lede {
	max-width: 62ch;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.55;
	color: #6a625f;
}

/* Первая строка бирки: что мы вообще делаем. Под ней жёлтая лента —
   единственная широкая полоса цвета на первом экране. Тем же классом набран
   лид у шагов отправки, и ленту получает только бирка. */
.b-service-tag .b-service-lede {
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 4px solid #ffed00;
	font-size: 18px;
	line-height: 1.5;
	color: #372c2c;
}

/* Главное предложение набрано плотнее остального: у MuseoSans есть настоящее
   начертание 700, синтетического жира не будет. */
.b-service-tag .b-service-lede b {
	font-weight: 700;
}

/* ---------- развилка ---------- */

.b-service-fork {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
}

/*
 * Половина развилки — ссылка, а общий font_new.css подчёркивает жёлтой чертой
 * каждую ссылку внутри .l-page и перекрашивает её при наведении. Здесь линия
 * значит выбранный пункт, поэтому обе привычки снимаем.
 */
.b-service-fork .b-service-fork__item {
	position: relative;
	display: block;
	padding: 4px 24px 2px 0;
	border-bottom: 0;
	text-decoration: none;
	color: #372c2c;
}

.b-service-fork .b-service-fork__item:hover {
	color: #372c2c;
}

/*
 * Одна половина — не выбор, а утверждение: в своём городе про отправку
 * посылкой страница молчит, и половине незачем жаться к левому краю.
 */
.b-service-fork--single {
	grid-template-columns: 1fr;
}

.b-service-fork--single .b-service-fork__item {
	padding-right: 0;
}

/* В одной колонке метке города нечего делать в дальнем углу: там она висит
   в пустоте, оторванная и от знака, и от заголовка. Возвращаем её в поток. */
.b-service-fork--single .b-service-fork__auto {
	position: static;
	display: block;
	margin-bottom: 7px;
}

/*
 * Лента под заголовком отмечала выбранный пункт. Выбора нет — нет и ленты:
 * две жёлтые линии подряд, под первой строкой и под заголовком, спорили бы
 * друг с другом, а жёлтый знак и без того говорит, что это ваш случай.
 */
.b-service-fork--single .b-service-fork__item--active .b-service-fork__title {
	padding-bottom: 0;
	background: none;
}

/* Строки не растягиваем на всю бирку: мера чтения от ширины колонки
   не зависит. */
.b-service-fork--single .b-service-fork__sub,
.b-service-fork--single .b-service-fork__note {
	max-width: 62ch;
}

/* Разделитель — та же прострочка, что по краю бирки. Браузерный border: dashed
   рисует штрих по своему усмотрению и звучит в этом мире чужим акцентом. */
.b-service-fork__item + .b-service-fork__item {
	padding-right: 0;
	padding-left: 26px;
	background: repeating-linear-gradient(180deg, #d9d4d0 0 9px, transparent 9px 15px) left top / 1px 100% no-repeat;
}

.b-service-fork__sign {
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 15px;
}

.b-service-fork__item:hover .b-sv-lead {
	fill: #ffed00;
}

.b-service-fork__auto {
	position: absolute;
	top: 8px;
	right: 24px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #6a625f;
}

.b-service-fork__title {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 7px;
	font-size: 21px;
	line-height: 1.2;
	color: #372c2c;
}

/* Выбранная половина отмечена лентой под заголовком и залитым знаком; та,
   на которую навели, — стежком того же ритма, что край бирки. */
.b-service-fork__item--active .b-service-fork__title {
	background: linear-gradient(#ffed00, #ffed00) left bottom / 100% 4px no-repeat;
}

.b-service-fork__item:not(.b-service-fork__item--active):hover .b-service-fork__title {
	background: repeating-linear-gradient(90deg, #f5d300 0 9px, transparent 9px 15px) left bottom / 100% 2px no-repeat;
}

.b-service-fork__sub {
	display: block;
	max-width: 40ch;
	font-size: 15px;
	line-height: 1.5;
	color: #6a625f;
}

/*
 * Приписка о своём городе: она не про то, что человек выберет, а про то, что
 * у него уже есть, — поэтому набрана чернилами и отделена строчкой, как
 * приписка на ярлыке под основным пунктом.
 */
.b-service-fork__note {
	display: block;
	margin-top: 13px;
	padding-top: 12px;
	background: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px) left top / 100% 1px no-repeat;
	font-size: 15.5px;
	line-height: 1.45;
	color: #372c2c;
}

/* ---------- расчёт срока ---------- */

/*
 * Блок расчёта и карта лежат вне .l-wrapper — их выводит include ветки СДЭК
 * целиком на ширину страницы. Полями возвращаем их в общую колонку сайта:
 * 1364 минус два раза по 20 — то же, что видит .l-wrapper.
 */
.b-service-calc,
.b-service-map {
	margin-left: max(20px, (100% - 1324px) / 2);
	margin-right: max(20px, (100% - 1324px) / 2);
}

.b-service-calc {
	position: relative;
	margin-bottom: 26px;
	padding: 8px;
	background: #fff;
}

.b-service-calc::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, #b3aca8 0 9px, transparent 9px 15px) left top / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, #b3aca8 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(180deg, #b3aca8 0 9px, transparent 9px 15px) left top / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, #b3aca8 0 9px, transparent 9px 15px) right top / 1px 100% no-repeat;
}

.b-service-calc__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 18px 14px;
}

.b-service-calc__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	color: #372c2c;
}

/* Город, для которого посчитан срок: имя чернилами, «сменить» — ссылкой. */
.b-service-calc__city {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	font-size: 17px;
	color: #372c2c;
}

.b-service-calc .b-service-calc__change {
	padding-bottom: 2px;
	border-bottom: 0;
	font-size: 14px;
	color: #6e312a;
	background: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat;
	transition: background-image .18s ease-out;
}

.b-service-calc .b-service-calc__change:hover {
	color: #6e312a;
	background-image: repeating-linear-gradient(90deg, #f5d300 0 9px, transparent 9px 15px);
}

/*
 * Отрезки пути. Разделены прострочкой, а не рамками ячеек: таблица здесь —
 * четыре пункта одного ярлыка, а не сетка.
 */
.b-service-calc__body {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 1.05fr;
	gap: 0;
	border-top: 1px solid #372c2c;
}

.b-service-calc__leg {
	padding: 18px 20px 20px;
}

.b-service-calc__leg + .b-service-calc__leg {
	background: repeating-linear-gradient(180deg, #d9d4d0 0 9px, transparent 9px 15px) left top / 1px 100% no-repeat;
}

.b-service-calc__leg--total {
	background-color: #fffdf0;
	box-shadow: inset 0 4px #ffed00;
}

.b-service-calc__sign {
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
}

/*
 * Знак вдвое мельче знака развилки — и линия у него тоньше. Не втрое: на 1.45
 * мелкие знаки читались заметно грубее крупных, потому что относительный вес
 * штриха растёт быстрее, чем падает размер.
 */
.b-service-calc__sign .b-sv-ink,
.b-service-calc__sign .b-sv-paper {
	stroke-width: 1.55;
}

.b-service-calc__sign .b-sv-cut {
	stroke-width: 4;
}

/* Обратный путь — тот же фургон, развёрнутый: направление видно раньше, чем
   прочитаны названия городов. */
.b-service-calc__sign--back {
	transform: scaleX(-1);
}

.b-service-calc__key {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.35;
	color: #6a625f;
}

.b-service-calc__value {
	display: block;
	font-size: 27px;
	line-height: 1.15;
	color: #372c2c;
	font-variant-numeric: tabular-nums;
}

.b-service-calc__note {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.4;
	color: #6a625f;
}

.b-service-calc__foot {
	padding: 13px 18px 15px;
	border-top: 1px solid #d9d4d0;
	font-size: 14px;
	line-height: 1.5;
	color: #6a625f;
}

/* Когда сроков нет, у блока остаётся одна шапка и одна строка текста —
   строчке между ними нечего разделять. */
.b-service-calc--plain .b-service-calc__foot {
	border-top: 0;
	padding: 0 18px 18px;
	font-size: 16px;
	color: #372c2c;
}

/* поле смены города */
.b-service-city__input {
	width: 200px;
	padding: 5px 10px;
	border: 0;
	border-bottom: 1px solid #372c2c;
	background: none;
	font-family: inherit;
	font-size: 16px;
	color: #372c2c;
	outline: none;
}

.b-service-city__input::placeholder {
	color: #8d8583;
}

.b-service-city__input:focus {
	padding-bottom: 4px;
	border-bottom-width: 2px;
	border-bottom-color: #f5d300;
}

/* ---------- карта ---------- */

/*
 * Карта — такое же окно ярлыка, как бирка: прострочка по краю и никаких
 * скруглений, чтобы она не выпадала из строя.
 */
.b-service-map {
	position: relative;
	height: 460px;
	margin-bottom: 14px;
	background: #f0eeeb;
}

.b-service-map::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, #6a625f 0 9px, transparent 9px 15px) left top / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, #6a625f 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(180deg, #6a625f 0 9px, transparent 9px 15px) left top / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, #6a625f 0 9px, transparent 9px 15px) right top / 1px 100% no-repeat;
}

/* Балун Яндекса: сводим к языку страницы — наша типографика, прямые углы. */
.b-service-balloon__time,
.b-service-balloon__phone,
.b-service-balloon__code {
	font-size: 14px;
	line-height: 1.45;
	color: #6a625f;
}

.b-service-balloon__code {
	margin-top: 6px;
	color: #8d8583;
}

.b-service-balloon__note {
	margin-top: 4px;
	font-size: 13px;
	color: #1a7a3c;
}

.b-service-map__note {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: #6a625f;
}

/* ---------- шаги отправки ---------- */

.b-service-steps {
	max-width: 1324px;
	padding: 48px 0 0;
}

.b-service-h2 {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.15;
	color: #372c2c;
	text-wrap: balance;
}

.b-service-steps__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #372c2c;
	counter-reset: service-step;
}

.b-service-steps__list li {
	position: relative;
	counter-increment: service-step;
	padding: 22px 24px 4px 0;
	font-size: 15px;
	line-height: 1.5;
	color: #6a625f;
}

.b-service-steps__list li + li {
	padding-right: 24px;
	padding-left: 26px;
	background: repeating-linear-gradient(180deg, #d9d4d0 0 9px, transparent 9px 15px) left 22px / 1px calc(100% - 22px) no-repeat;
}

/* Номер шага: порядок здесь и есть содержание — техника едет по этим четырём
   пунктам ровно в таком порядке. Стоит углом, как номер пункта на ярлыке, и
   не спорит с заголовком за внимание. */
.b-service-steps__list li::before {
	content: counter(service-step, decimal-leading-zero);
	position: absolute;
	top: 24px;
	right: 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #b3aca8;
	font-variant-numeric: tabular-nums;
}

.b-service-steps__list li:last-child::before {
	right: 0;
}

.b-service-steps__sign {
	display: block;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
}

.b-service-steps__sign .b-sv-ink,
.b-service-steps__sign .b-sv-paper {
	stroke-width: 1.6;
}

.b-service-steps__list li b {
	display: block;
	margin-bottom: 5px;
	font-size: 17px;
	font-weight: 400;
	color: #372c2c;
}

.b-service-steps__action {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid #372c2c;
}

/* Кнопка в этом мире — жёлтая бирка, а не пилюля. */
.b-service-steps__button.g-button {
	padding: 15px 36px 16px;
	border-radius: 0;
	font-size: 17px;
}

.b-service-steps__hint {
	flex: 1 1 320px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.5;
	color: #6a625f;
}

/* ---------- города, где принимают технику ---------- */

/*
 * Список городов рисует общий компонент ma:news.list: у выбранного города
 * класс .g-button, у остальных .g-button-hidden — жёлтая и белая пилюли из
 * global.css. Здесь они бирки: прямой угол, тонкая линия вместо обводки.
 */
.l-page .b-city-list {
	margin: 40px 0 4px -10px;
}

.l-page .b-city-list_item {
	margin: 0 0 10px 10px;
}

.l-page .b-city-list_item .g-button,
.l-page .b-city-list_item .g-button-hidden {
	padding: 9px 18px 10px;
	border: 1px solid #d9d4d0 !important;
	border-radius: 0;
	background: #fff;
	font-size: 16px;
	color: #372c2c !important;
	transition: border-color .18s ease-out, background-color .18s ease-out;
}

.l-page .b-city-list_item .g-button-hidden:hover {
	border-color: #372c2c !important;
	background: #fff;
}

/* Выбранный город — жёлтая бирка. */
.l-page .b-city-list_item .g-button {
	border-color: #ffed00 !important;
	background: #ffed00;
}

.l-page .b-city-list_item .g-button:hover {
	border-color: #f7d700 !important;
	background: #f7d700;
}

/* ---------- список сервисных центров и магазинов ---------- */

/*
 * Карту и карточки рисует общий компонент. Разметку не трогаем: правила ниже
 * переводят её на язык страницы — серое поле, белые строки, прострочка вместо
 * фоновых прямоугольников, свои знаки вместо стоковых иконок.
 *
 * Префикс .l-page у всех правил, адресованных чужим блокам, — не украшение.
 * Битрикс складывает стили страницы (Asset::addCss) и стили шаблонов
 * компонентов в разные объединённые файлы, и файл компонента подключается
 * позже нашего. При равной специфичности выигрывает он, поэтому вес нужно
 * поднять. Так же усилены правила для списка городов, фотографий в блоке
 * гарантии и плашки про чистую технику из blocks_new.css.
 */
.l-page .b-shops-list {
	margin-top: 26px;
	background: #f0eeeb;
}

.l-page .b-shops-list > #map {
	position: relative;
	height: 460px;
	margin: 0 max(20px, (100% - 1324px) / 2);
}

.l-page .b-shops-list-holder {
	padding: 26px 0 34px;
}

.l-page .b-shops-list_item {
	margin: 0;
	background: #fff;
	transition: background-color .18s ease-out;
}

.l-page .b-shops-list_item + .b-shops-list_item {
	background-image: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px);
	background-position: left top;
	background-size: 100% 1px;
	background-repeat: no-repeat;
}

.l-page .b-shops-list_item:hover,
.l-page .b-shops-list_item.selected {
	background-color: #fffdf0;
}

.l-page .b-shops-list_item_holder {
	padding: 20px 22px 22px;
}

.l-page .b-shops-list_item_address {
	margin: 0 0 12px;
}

/*
 * Адрес — указатель на карту: клик показывает этот центр меткой. Метка перед
 * ним и стежок под ним говорят, что строка живая; при наведении метка желтеет,
 * а стежок прошивается тем же жёлтым.
 */
.l-page .b-shops-list_item_address span {
	display: inline-block;
	padding-left: 30px;
	padding-bottom: 3px;
	border-bottom: 0;
	font-size: 20px;
	line-height: 1.3;
	color: #372c2c;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23372c2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c-4.2-5.4-6.3-8.4-6.3-11a6.3 6.3 0 0 1 12.6 0c0 2.6-2.1 5.6-6.3 11Z'/%3E%3Ccircle cx='12' cy='10.4' r='2.3'/%3E%3C/svg%3E") left 2px / 21px 21px no-repeat,
		repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat;
	transition: background-image .18s ease-out;
}

.l-page .b-shops-list_item:hover .b-shops-list_item_address span,
.l-page .b-shops-list_item.selected .b-shops-list_item_address span {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffed00' stroke='%23372c2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5c-4.2-5.4-6.3-8.4-6.3-11a6.3 6.3 0 0 1 12.6 0c0 2.6-2.1 5.6-6.3 11Z'/%3E%3Ccircle cx='12' cy='10.4' r='2.3' fill='%23fff'/%3E%3C/svg%3E"),
		repeating-linear-gradient(90deg, #f5d300 0 9px, transparent 9px 15px);
}

/* Стоковые иконки телефона и часов заменяем своими: они нарисованы другой
   рукой и в одном ряду с нашими знаками читаются как чужие. */
.l-page .b-shops-list_item-info-phone svg,
.l-page .b-shops-list_item-info-schedule svg {
	display: none;
}

/*
 * Компонент растягивал телефон и график по краям строки, и от карточки
 * к карточке график начинался в разном месте. Ставим их в колонки: глаз
 * идёт сверху вниз по одному краю.
 */
/*
 * Компонент отдавал под текст ровно 685 пикселей, а остаток — карусели фотографий.
 * У сервисных центров фотографий нет, и график переносился в узкой колонке,
 * пока справа пустовала половина строки. Делим строку долями.
 */
.l-page .b-shops-list_item-info-text {
	flex-basis: 66%;
	width: auto;
}

.l-page .b-shops-list_item-info-pics {
	flex-basis: 34%;
	width: auto;
	padding: 6px 0 0 40px;
}

.l-page .b-shops-list_item-info-text-main {
	justify-content: flex-start;
	align-items: flex-start;
	gap: 40px;
}

.l-page .b-shops-list_item-info-phone {
	min-width: 240px;
}

.l-page .b-shops-list_item-info-phone + .b-shops-list_item-info-schedule {
	margin-left: 0;
}

.l-page .b-shops-list_item-info-phone,
.l-page .b-shops-list_item-info-schedule {
	padding-left: 28px;
	font-size: 16px;
	line-height: 1.5;
	color: #6a625f;
	background-repeat: no-repeat;
	background-position: left 2px;
	background-size: 19px 19px;
}

.l-page .b-shops-list_item-info-phone {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23372c2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3h3l1.6 4-2.1 1.5a12.4 12.4 0 0 0 6.4 6.4L17 12.8l4 1.6v3a2 2 0 0 1-2.2 2A16.3 16.3 0 0 1 4.6 5.2 2 2 0 0 1 6.6 3Z'/%3E%3C/svg%3E");
}

.l-page .b-shops-list_item-info-schedule {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23372c2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.6V12l3.6 2.2'/%3E%3C/svg%3E");
}

.l-page .b-shops-list_item-info-phone a {
	padding-bottom: 2px;
	border-bottom: 0;
	color: #6e312a;
	background: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat;
	transition: background-image .18s ease-out;
}

.l-page .b-shops-list_item-info-phone a:hover {
	background-image: repeating-linear-gradient(90deg, #f5d300 0 9px, transparent 9px 15px);
}

/*
 * Что именно чинят в этом центре. Компонент прячет строку до наведения, но
 * место под неё держит, и в карточке зияет дыра в девяносто пикселей.
 * На этой странице строка нужна открытой: в Екатеринбурге два центра по
 * одному адресу, и различает их только она.
 */
.l-page .b-shops-list_item-info-detail {
	margin-top: 2px;
	opacity: 1;
	visibility: visible;
	font-size: 15px;
	line-height: 1.5;
	color: #6a625f;
}

/* ---------- гарантия и свой центр ---------- */

.l-page .b-service-description {
	padding-top: 46px;
}

.l-page .b-service-text__sign {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 12px;
}

/*
 * Ширину заголовка и абзацев не режем. Текст обтекает фотографию слева или
 * справа, и блок уже самой фотографии не втискивается рядом с ней, а целиком
 * проваливается под неё: у плавающего соседа сжимаются строки, а не коробка.
 */
.l-page .b-service-text h2 {
	font-weight: 300;
	color: #372c2c;
	text-wrap: balance;
}

.l-page .b-service-text p {
	line-height: 1.6;
	color: #6a625f;
}

/* Фотографию тоже прошиваем по краю — иначе она единственная на странице
   вещь без обработки края. */
.l-page .b-service-image {
	position: relative;
}

.l-page .b-service-image::after {
	content: '';
	position: absolute;
	inset: -9px;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, #b3aca8 0 9px, transparent 9px 15px) left top / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, #b3aca8 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(180deg, #b3aca8 0 9px, transparent 9px 15px) left top / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, #b3aca8 0 9px, transparent 9px 15px) right top / 1px 100% no-repeat;
}

.l-page .b-service-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * Текст рядом с фотографией — колонка, а не обтекание. overflow: hidden делает
 * из него отдельный контекст форматирования: блок встаёт рядом с плавающей
 * фотографией и не залезает под неё. Без этого последний абзац растягивался
 * под фотографию на всю ширину страницы — строка в полтораста знаков, читать
 * которую нельзя.
 */
@media (min-width: 768px) {
	.l-page .b-service-text {
		overflow: hidden;
	}

	.l-page .b-service-text p {
		max-width: 66ch;
	}
}

/* ---------- предупреждение про чистую технику ---------- */

/*
 * Плашку рисует подвал (footer.php, $FL_SERVICE_PAGE), а её стили лежат в общем
 * blocks.css и красят любой svg внутри в #6e312a. Наш знак линейный, поэтому
 * заливку возвращаем себе селектором с большим весом.
 */
.l-page .b-service-message {
	margin-top: 48px;
	background: #f0eeeb;
}

.l-page .b-service-message-holder {
	align-items: flex-start;
	max-width: 1324px;
	padding: 44px 0 46px;
}

.l-page .b-service-message-holder .b-service-message__sign {
	width: 56px;
	height: 56px;
	margin: 2px 28px 0 0;
}

.l-page .b-service-message-holder .b-sv-ink,
.l-page .b-service-message-holder .b-sv-paper,
.l-page .b-service-message-holder .b-sv-cut {
	fill: none;
	stroke-width: 1.7;
}

.l-page .b-service-message-holder .b-sv-paper {
	fill: #fff;
}

.l-page .b-service-message-holder .b-sv-cut {
	stroke: #fff;
	stroke-width: 5;
}

.l-page .b-service-message-text {
	max-width: 62ch;
	font-size: 19px;
	line-height: 1.5;
	color: #372c2c;
}

/* ---------- то, что рисует браузер ---------- */

.b-service-tag ::selection,
.b-service-calc ::selection,
.b-service-steps ::selection,
.l-page .b-service-description ::selection,
.l-page .b-service-message ::selection {
	background: #ffed00;
	color: #372c2c;
}

.b-service-fork__item:focus-visible,
.b-service-calc__change:focus-visible,
.b-service-steps__button:focus-visible,
.l-page .b-city-list_item a:focus-visible,
.l-page .b-shops-list_item-info-phone a:focus-visible {
	outline: 2px solid #372c2c;
	outline-offset: 3px;
}

.b-service-city__input:focus-visible {
	outline: none;
}

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

/*
 * Сайт до 767 держит десктопную ширину (.l-page { min-width: 1280px }), поэтому
 * ломать сетку раньше нечего: до этой границы страница просто прокручивается.
 */
@media (max-width: 767px) {
	.b-service-field {
		max-width: none;
		padding: 10px;
	}

	.b-service-tag {
		padding: 22px 18px 18px;
	}

	.b-service-lede {
		margin-bottom: 18px;
		padding-bottom: 16px;
		font-size: 16px;
	}

	.b-service-fork {
		grid-template-columns: 1fr;
	}

	.b-service-fork .b-service-fork__item {
		padding: 4px 0 2px;
	}

	.b-service-fork__auto {
		right: 0;
	}

	.b-service-fork__item + .b-service-fork__item {
		margin-top: 20px;
		padding-top: 20px;
		padding-left: 0;
		background: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px) left top / 100% 1px no-repeat;
	}

	.b-service-fork__sign {
		width: 44px;
		height: 44px;
		margin-bottom: 12px;
	}

	.b-service-fork__title {
		font-size: 19px;
	}

	.b-service-calc,
	.b-service-map,
	.l-page .b-shops-list > #map {
		margin-left: 16px;
		margin-right: 16px;
	}

	.b-service-calc__head {
		padding: 14px 14px 12px;
	}

	.b-service-calc__body {
		grid-template-columns: 1fr;
	}

	.b-service-calc__leg {
		padding: 16px 14px 18px;
	}

	/* В столбец разделяет горизонтальная строчка, а не вертикальная. */
	.b-service-calc__leg + .b-service-calc__leg {
		background-image: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px);
		background-position: left top;
		background-size: 100% 1px;
	}

	.b-service-calc__leg--total {
		background-color: #fffdf0;
	}

	.b-service-calc__value {
		font-size: 24px;
	}

	.b-service-calc__foot,
	.b-service-calc--plain .b-service-calc__foot {
		padding-left: 14px;
		padding-right: 14px;
	}

	.b-service-map,
	.l-page .b-shops-list > #map {
		height: 320px;
	}

	.b-service-h2 {
		font-size: 24px;
	}

	.b-service-steps {
		padding-top: 34px;
	}

	.b-service-steps__list {
		grid-template-columns: 1fr;
	}

	.b-service-steps__list li,
	.b-service-steps__list li + li {
		padding: 20px 0 6px;
	}

	.b-service-steps__list li + li {
		background-image: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px);
		background-position: left top;
		background-size: 100% 1px;
	}

	.b-service-steps__list li::before,
	.b-service-steps__list li:last-child::before {
		top: 22px;
		right: 0;
	}

	.b-service-steps__sign {
		width: 36px;
		height: 36px;
		margin-bottom: 10px;
	}

	/* На мелком знаке второй ряд стежков слипается в полосу, и главный мотив
	   читается как шум. Рисунок знака от этого не меняется. */
	.b-service-steps__sign .b-sv-fine,
	.b-service-calc__sign .b-sv-fine {
		display: none;
	}

	.b-service-steps__action {
		margin-top: 26px;
		padding-top: 20px;
	}

	.b-service-steps__button.g-button {
		width: 100%;
	}

	.l-page .b-city-list {
		margin: 26px 0 4px -8px;
	}

	.l-page .b-city-list_item {
		margin: 0 0 8px 8px;
	}

	.l-page .b-city-list_item .g-button,
	.l-page .b-city-list_item .g-button-hidden {
		padding: 7px 12px 8px;
		font-size: 14px;
	}

	.l-page .b-shops-list_item_holder {
		padding: 16px 16px 18px;
	}

	.l-page .b-shops-list_item_address span {
		font-size: 17px;
	}

	.l-page .b-shops-list_item-info-phone {
		padding-bottom: 10px;
	}

	.l-page .b-service-image.g-img-left,
	.l-page .b-service-image.g-img-right {
		float: none;
		max-width: 100%;
		margin: 0 0 20px;
	}

	.l-page .b-service-image.g-img-right + .b-service-text {
		margin-top: 0;
	}

	.l-page .b-service-image::after {
		inset: -6px;
	}

	.l-page .b-service-text__sign {
		width: 36px;
		height: 36px;
	}

	.l-page .b-service-message-holder {
		display: block;
		padding: 28px 0 30px;
	}

	.l-page .b-service-message-holder .b-service-message__sign {
		margin: 0 0 14px;
	}

	.l-page .b-service-message-text {
		font-size: 16px;
	}
}

/* End */
/* /bitrix/templates/template.nadel/css/pages/service.css?178878064537240 */