/* Start:/bitrix/templates/oxy/components/bitrix/news/oxy_sales/style.css?17936619565653*/
/* ==========================================================================
   oxy_sales — точечные добавки к макету.
   Основная вёрстка (.f-*, .pp-*, .e-*) приходит из promo.css,
   promo-page.css и expert.css. Здесь только то, чего в макете не было:
   данные из инфоблока дают ссылки внутри заголовков и вкладки-ссылки.
   ========================================================================== */

/* Название акции в карточке — ссылка на посадочную. В макете заголовок
 * был текстом, рядом лежала отдельная ссылка «Подробнее». */
.f-card h3 a,
.f-feature-body h2 a {
	color: inherit;
	text-decoration: none;
}

/* Такой карточки в макете не было: у .f-feature задан display:grid, а это
 * правило сильнее атрибута hidden. Без строки ниже «Предложение месяца»
 * остаётся на экране при фильтре по другому направлению. */
.f-feature[hidden],
.f-card[hidden],
.f-empty[hidden] {
	display: none !important;
}

/* Ссылка «Подробнее» внутри .f-card-actions. В макете она подписана
 * инлайновым style="border:0;margin:0;padding:0", потому что базовое
 * правило .e-card-link (expert.css) добавляет рамку сверху, отступы и
 * margin-top — в строке с кнопкой из-за них карточка вырастает на 15–30 px.
 * Здесь то же самое, но в CSS шаблона. */
.f-card-actions .e-card-link,
.f-card-actions .e-card-link:hover {
	border: 0;
	margin: 0;
	padding: 0;
}

.f-card h3 a:hover,
.f-feature-body h2 a:hover {
	color: var(--purple);
}

/* Вкладки-ссылки на странице раздела: разметка та же, что у кнопок,
 * но это <a>, поэтому нужны те же размеры и состояния. */
.f-tabs a {
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--text);
	padding: 11px 18px;
	font-size: 13px;
	min-height: 44px;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}

.f-tabs a span {
	font-size: 11px;
	color: var(--muted);
}

.f-tabs a:hover {
	border-color: var(--purple);
}

.f-tabs a.selected {
	background: var(--plum);
	color: #fff;
	border-color: var(--plum);
}

.f-tabs a.selected span {
	color: var(--lilac);
}

/* Плашка предложения в баннере: в макете там короткие значения («0 ₽»,
 * «−20%»). Данные инфоблока дают и текст («Бесплатная консультация»),
 * который кеглем 32px в одну строку не влезает — уменьшаем. */
.f-banner-offers b.f-small {
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: 0;
}

/* На мобильном макет ставит значение и подпись в две колонки, рассчитывая
 * на короткое значение в 74px. Текстовое значение туда не влезает и
 * наезжает на подпись, поэтому такому варианту отдаём всю строку. */
@media (max-width: 760px) {
	.f-banner-offers a {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.f-banner-offers b.f-small,
	.f-banner-offers b.f-small + span {
		flex: 1 1 100%;
		min-width: 0;
	}

	.f-banner-offers b.f-small {
		font-size: 19px;
		line-height: 1.2;
	}
}

/* Крупная плашка скидки в баннере посадочной: значение может быть текстом
 * («Бесплатная консультация»), а не коротким «−20%». В макете такие
 * значения не встречались, шрифт 54px в одну строку их не вмещает. */
.pp-offer.pp-offer--text b {
	font-size: 30px;
	white-space: normal;
	line-height: 1.1;
	max-width: 300px;
}

/* Список услуг акции: ссылки внутри .pp-conds не должны терять цвет. */
.pp-conds li a {
	color: var(--purple);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.pp-conds li a:hover {
	border-bottom-color: var(--purple);
}

/* Описание акции (DETAIL_TEXT из админки) — HTML, может содержать
 * заголовки и картинки из визуального редактора. */
.pp-side-text h2 {
	font: 400 30px/1.2 var(--serif);
	margin: 0 0 14px;
}

.pp-side-text h3,
.pp-side-text h4 {
	font: 400 23px/1.25 var(--serif);
	margin: 26px 0 10px;
}

.pp-side-text p {
	margin: 0 0 12px;
}

.pp-side-text img {
	max-width: 100%;
	height: auto;
}

.pp-side-text > :first-child {
	margin-top: 0;
}

.pp-side-text > :last-child {
	margin-bottom: 0;
}

/* Карточка специалиста: имя и отчество на второй строке. */
.pp-doc h3 span {
	display: block;
	font-size: 15px;
	color: var(--muted);
	margin-top: 2px;
}

@media (max-width: 620px) {
	.pp-offer.pp-offer--text b {
		font-size: 24px;
		max-width: none;
	}
}

/* End */
/* /bitrix/templates/oxy/components/bitrix/news/oxy_sales/style.css?17936619565653 */