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

/*
 * Ширину держим по мере чтения, а не по контейнеру сайта, и прижимаем влево:
 * заголовок страницы и хлебные крошки шаблон рисует по левому краю, и
 * центрированный блок под ними читался бы как чужой.
 */
.b-dp {
	max-width: 980px;
	margin: 0;
	color: #372c2c;
	font-weight: 300;
}

.b-dp ::selection {
	background: #ffed00;
	color: #372c2c;
}

.b-dp a:focus-visible,
.b-dp [tabindex]:focus-visible {
	outline: 2px solid #372c2c;
	outline-offset: 3px;
}

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

/*
 * Жёлтым залит единственный знак — ответ на вопрос «где забрать». Класс стоит
 * в разметке вместе с b-dp-ink и переопределяет только заливку: контур
 * у залитого знака тот же, что у остальных. Принимает жёлтый всегда несущая
 * форма знака (b-dp-lead), а не первый попавшийся узел: порядок элементов
 * внутри знака — дело рисунка, и от его перестановки цвет не должен
 * переезжать на другую фигуру.
 */
.b-dp .b-dp-fill {
	fill: #ffed00;
}

/*
 * Белая заливка под линией: колесо фургона и печать «оплачено» наезжают
 * на форму знака и вырезают себя из неё, а не просвечивают насквозь.
 */
.b-dp .b-dp-paper {
	fill: #fff;
}

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

/* Серое поле — «ткань», на которую нашита белая бирка. */
.b-dp-field {
	padding: 26px;
	background: #f0eeeb;
}

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

.b-dp-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-dp-tag__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	/* Жёлтая лента под названием города — единственная широкая полоса цвета
	   на странице, она же метка ярлыка. */
	border-bottom: 4px solid #ffed00;
}

.b-dp-tag__city {
	margin: 0;
	font-size: 38px;
	line-height: 1.05;
	font-weight: 300;
	letter-spacing: -.01em;
}

/* ---------- ряд знаков ---------- */

.b-dp-marks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.b-dp-marks__item {
	padding: 26px 22px 4px 0;
}

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

.b-dp-marks__sign {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
}

.b-dp-marks__name {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #6a625f;
}

.b-dp-marks__value {
	display: block;
	font-size: 21px;
	line-height: 1.2;
	color: #372c2c;
	font-variant-numeric: tabular-nums;
}

.b-dp-marks__hint {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: #6a625f;
}

/* ---------- расшифровка ---------- */

.b-dp-key {
	padding: 54px 0 0;
}

.b-dp-key__title {
	margin: 0 0 4px;
	font-size: 26px;
	font-weight: 300;
	color: #372c2c;
}

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

.b-dp-key__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #372c2c;
}

.b-dp-row {
	display: grid;
	grid-template-columns: 44px 1fr 230px;
	align-items: start;
	gap: 0 22px;
	/* Отрицательные поля выпускают подсветку наведения за колонку текста:
	   строка отмечается целиком, как пункт на ярлыке. */
	margin: 0 -14px;
	padding: 20px 14px;
	background: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px) left bottom / 100% 1px no-repeat;
	transition: background-color .18s ease-out;
}

/* Подсветку задаём цветом, а не сокращением background: иначе строчка снизу
   стёрлась бы вместе с ним. */
.b-dp-row:hover {
	background-color: #fffdf0;
}

.b-dp-row__sign {
	width: 32px;
	height: 32px;
	margin-top: 2px;
}

/*
 * Знак строки вдвое мельче знака на бирке — и линия у него тоньше. Величины
 * подобраны по относительному весу штриха, а не по вкусу: 1.75 на знаке
 * в 56 пикселей — это 3.1 % его размера, 1.35 на знаке в 32 — 4.2 %, 1.2
 * на знаке в 26 — 4.6 %. Свести к одному проценту нельзя: на 32 пикселях
 * это дало бы линию в один пиксель, и знак поблёк бы рядом с текстом. Ниже
 * 1.2 стежки перестают читаться совсем — там уже просвет упирается в круглые
 * торцы линии.
 */
.b-dp-row__sign .b-dp-ink,
.b-dp-row__sign .b-dp-paper {
	stroke-width: 1.35;
}

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

.b-dp-row:hover .b-dp-row__sign .b-dp-lead {
	fill: #ffed00;
}

@media (prefers-reduced-motion: reduce) {
	.b-dp-row,
	.b-dp-row__sign .b-dp-lead,
	.b-dp-row__pin,
	.b-dp-row__pin::after {
		transition: none;
	}
}

/*
 * Адрес — указатель на карту: клик показывает этот магазин меткой, наведение
 * прошивает адрес стежком того же ритма, что и край бирки. Кнопка, а не
 * ссылка: никуда не переходим, показываем на месте.
 */
.b-dp-row__pin {
	position: relative;
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.b-dp-row__pin::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: repeating-linear-gradient(90deg, #f5d300 0 9px, transparent 9px 15px);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s cubic-bezier(.2, .65, .3, 1);
}

.b-dp-row__pin:hover::after,
.b-dp-row__pin:focus-visible::after,
.b-dp-row--address:hover .b-dp-row__pin::after {
	transform: scaleX(1);
}

.b-dp-row__pin:focus-visible {
	outline: 2px solid #372c2c;
	outline-offset: 4px;
}

/* Магазин, показанный на карте сейчас: знак залит, стежок держится. */
.b-dp-row--active .b-dp-row__sign .b-dp-lead {
	fill: #ffed00;
}

.b-dp-row--active .b-dp-row__pin::after {
	transform: scaleX(1);
}

.b-dp-row__name {
	margin-bottom: 3px;
	font-size: 18px;
	color: #372c2c;
}

.b-dp-row__text {
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.55;
	color: #6a625f;
}

.b-dp-row__text b {
	font-weight: 700;
	color: #372c2c;
}

.b-dp-row__list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
	line-height: 1.6;
	color: #6a625f;
}

.b-dp-row__list li {
	position: relative;
	padding-left: 16px;
}

.b-dp-row__list li::before {
	content: '';
	position: absolute;
	top: .7em;
	left: 0;
	width: 7px;
	border-top: 1px solid #9a938f;
}

/* правая колонка строки: часы работы, телефон, оговорка */
.b-dp-row__aside {
	font-size: 14.5px;
	line-height: 1.5;
	color: #6a625f;
	font-variant-numeric: tabular-nums;
}

.b-dp-row__aside p {
	margin: 0;
}

/*
 * Режим работы приходит из карточки магазина готовой разметкой, и у крупных
 * магазинов это список с подразделениями и телефонами (Блюхера, 71/1 —
 * бытовое, промышленное и сервисный центр). Такому расписанию место в основной
 * колонке строки: в узкой правой оно вытягивалось на полэкрана, а слева
 * оставалась одна строка адреса и пустота.
 *
 * Приводим чужую разметку к языку страницы: без маркеров, с тем же ритмом
 * строк и нашими ссылками. Атрибуты оформления снимает nadelDeliveryCleanHtml
 * на стороне PHP — против инлайнового стиля CSS бессилен.
 */
.b-dp-row__schedule {
	max-width: 62ch;
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.55;
	color: #6a625f;
}

.b-dp-row__schedule ul,
.b-dp-row__schedule ol,
.b-dp-row__aside ul,
.b-dp-row__aside ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.b-dp-row__schedule li,
.b-dp-row__aside li {
	margin-bottom: 8px;
}

.b-dp-row__schedule li:last-child,
.b-dp-row__aside li:last-child {
	margin-bottom: 0;
}

/* Подразделение магазина — подзаголовок внутри расписания, а не выделение. */
.b-dp-row__schedule b,
.b-dp-row__aside b {
	font-weight: 700;
	color: #372c2c;
}

.b-dp-row__schedule a,
.b-dp-row__aside a {
	color: #6e312a;
	border-bottom: 1px solid #e0d9d6;
}

.b-dp-row__schedule a:hover,
.b-dp-row__aside a:hover {
	border-bottom-color: #6e312a;
}

/*
 * Двойной перенос в расписании оставляем: им в карточке отделены подразделения
 * магазина друг от друга, и без него строки склеиваются в одну простыню.
 */
.b-dp-row__schedule br + br,
.b-dp-row__aside br + br {
	line-height: .7;
}

/* Телефон подшит тем же стежком, что край бирки; при наведении стежок желтеет. */
.b-dp-row__phone {
	display: inline-block;
	margin-top: 4px;
	padding-bottom: 2px;
	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-dp-row__phone:hover {
	background-image: repeating-linear-gradient(90deg, #f5d300 0 9px, transparent 9px 15px);
}

/* адрес магазина — та же строка, только заголовок крупнее списка условий */
.b-dp-row--address .b-dp-row__name {
	font-size: 19px;
}

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

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

.b-dp-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-dp-map__note {
	margin: 0 0 26px;
	font-size: 14.5px;
	color: #6a625f;
}

/* Балун Яндекса: сводим к языку страницы — наша типографика, прямые углы. */
.b-dp-balloon__address {
	margin-bottom: 4px;
	font-size: 16px;
	color: #372c2c;
}

.b-dp-balloon__line {
	font-size: 14px;
	line-height: 1.45;
	color: #6a625f;
}

.b-dp-balloon__phone {
	display: inline-block;
	margin-top: 4px;
	color: #6e312a;
}

/* ---------- логотип партнёра ---------- */

.b-dp-partner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}

.b-dp-partner__logo {
	display: block;
	width: 104px;
	height: auto;
}

.b-dp-partner__text {
	flex: 1 1 320px;
	max-width: 62ch;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: #6a625f;
}

/* ---------- города с магазинами ---------- */

.b-dp-cities {
	margin: 0;
	font-size: 17px;
	line-height: 1.9;
	color: #372c2c;
}

.b-dp-cities span::after {
	content: ' · ';
	color: #9a938f;
}

.b-dp-cities span:last-child::after {
	content: '';
}

/* ---------- действие ---------- */

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

.b-dp-foot__text {
	flex: 1 1 320px;
	max-width: 62ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #6a625f;
}

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

@media (max-width: 900px) {
	.b-dp-field {
		padding: 14px;
	}

	.b-dp-tag {
		padding: 26px 22px 22px;
	}

	.b-dp-tag__city {
		font-size: 30px;
	}

	.b-dp-marks {
		grid-template-columns: 1fr 1fr;
	}

	.b-dp-marks__item {
		padding: 22px 16px 4px 0;
	}

	.b-dp-marks__item:nth-child(odd) {
		padding-left: 0;
		background: none;
	}

	.b-dp-marks__item:nth-child(n + 3) {
		background-image:
			repeating-linear-gradient(180deg, #d9d4d0 0 9px, transparent 9px 15px),
			repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px);
		background-position: left top, left top;
		background-size: 1px 100%, 100% 1px;
		background-repeat: no-repeat, no-repeat;
	}

	.b-dp-marks__item:nth-child(odd):nth-child(n + 3) {
		background-image: repeating-linear-gradient(90deg, #d9d4d0 0 9px, transparent 9px 15px);
		background-size: 100% 1px;
	}

	.b-dp-row {
		grid-template-columns: 44px 1fr;
	}

	.b-dp-row__aside {
		grid-column: 2;
		margin-top: 8px;
	}

	.b-dp-map {
		height: 340px;
	}
}

/*
 * Ниже 600 знаки остаются в двух колонках: четыре знака — это и есть ярлык,
 * и в один столбец он перестаёт читаться с первого экрана.
 */
@media (max-width: 600px) {
	.b-dp-field {
		padding: 10px;
	}

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

	.b-dp-marks__sign {
		width: 44px;
		height: 44px;
		margin-bottom: 12px;
	}

	.b-dp-marks__name {
		font-size: 11.5px;
		letter-spacing: .1em;
	}

	.b-dp-marks__value {
		font-size: 18px;
	}

	.b-dp-marks__hint {
		font-size: 13px;
	}

	.b-dp-marks__item {
		padding: 18px 12px 4px 0;
	}

	.b-dp-marks__item:nth-child(even) {
		padding-right: 0;
		padding-left: 14px;
	}

	.b-dp-row {
		grid-template-columns: 32px 1fr;
		gap: 0 14px;
	}

	.b-dp-row__sign {
		width: 26px;
		height: 26px;
	}

	.b-dp-row__sign .b-dp-ink,
	.b-dp-row__sign .b-dp-paper {
		stroke-width: 1.2;
	}

	/*
	 * На знаке в 26 пикселей два ряда стежков слипаются в две смазанные полосы,
	 * и главный мотив страницы читается как шум. Второй ряд убираем — рисунок
	 * знака от этого не меняется, а строчка остаётся строчкой.
	 */
	.b-dp-row__sign .b-dp-fine {
		display: none;
	}

	.b-dp-key__title {
		font-size: 22px;
	}

	.b-dp-map {
		height: 300px;
	}
}

/* End */
/* /bitrix/templates/template.nadel/css/pages/delivery.css?178877647019410 */