/* Start:/local/templates/.default/css/favorites.css?1789924653899*/
.td-heart {
	padding: 0;
	border: 0;
	background: none;
	color: #cdc6d5;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s;
}

.td-heart:hover {
	color: #e0868a;
}

.td-heart--on {
	color: #d64550;
}

.td-fav-counter {
	position: relative;
	display: inline-block;
	margin-left: 10px;
	color: #d64550;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.td-fav-counter--empty {
	color: var(--td-muted);
}

.td-fav-counter__value {
	margin-left: 3px;
	font-size: 12px;
	font-weight: 600;
	vertical-align: super;
}

.td-fav-counter--floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 900;
	padding: 10px 14px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(var(--td-ink-rgb), .18);
}

.td-favorites__empty,
.td-favorites__error {
	color: #6f6878;
}

.td-favorites__actions {
	margin-bottom: 16px;
}

/* End */


/* Start:/local/templates/timediamond/css/header.css?17899823707287*/
/* Шапка: десктоп по 15-HeaderFooter.png, мобайл — бургер с аккордеонами. */

.td-header {
	position: relative;
	z-index: 100;
	background: var(--td-surface);
	border-bottom: 1px solid var(--td-border);
}

.td-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--td-header-height);
}

/* --- навигация слева --- */

.td-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: 1 1 0;
	min-width: 0;
}

.td-nav__item {
	position: relative;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--td-ink-soft);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.td-nav__item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--td-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--td-transition);
}

.td-nav__item:hover,
.td-nav__item[aria-expanded="true"],
.td-nav__item.is-active {
	color: var(--td-ink);
}

.td-nav__item:hover::after,
.td-nav__item[aria-expanded="true"]::after,
.td-nav__item.is-active::after {
	transform: scaleX(1);
}

/* --- логотип по центру --- */

.td-header__logo {
	flex: 0 0 auto;
}

/* --- действия справа --- */

.td-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	flex: 1 1 0;
	min-width: 0;
}

.td-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--td-ink-soft);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	white-space: nowrap;
}

.td-action:hover { color: var(--td-accent); }

.td-action__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.td-action__icon svg { width: 100%; height: 100%; }

/* круглый счётчик, как в макете */
.td-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--td-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
}

/*
 * Пустой счётчик. Класс td-fav-counter--empty вешает favorites.js — виджет
 * избранного из З-8; шаблон подстраивается под его контракт, а не наоборот.
 */
/*
 * Пустой счётчик по макету не показывается вовсе. Элемент при этом остаётся
 * в разметке: favorites.js из З-8 ищет его по data-td-favorites-counter
 * и сам снимает класс td-fav-counter--empty, когда избранное наполнилось.
 */
.td-badge--empty,
.td-badge.td-fav-counter--empty {
	display: none;
}

.td-badge[data-td-favorites-counter]:not(.td-fav-counter--empty) {
	display: inline-flex;
	background: var(--td-ink);
	color: #fff;
	border: 0;
}

/* --- раскрытое меню --- */

.td-mega {
	display: none;
	border-top: 1px solid var(--td-border);
	background: var(--td-surface);
	box-shadow: 0 18px 30px -22px rgba(var(--td-ink-rgb), .35);
}

.td-mega.is-open { display: block; }

.td-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 380px;
	gap: 48px;
	padding: 40px 0 48px;
}

.td-mega__title {
	margin-bottom: 20px;
}

.td-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.td-mega__list li { margin-bottom: 12px; }

.td-mega__list a { font-size: var(--td-text); }

.td-mega__promo {
	padding: 28px;
	background: var(--td-page);
}

.td-mega__promo h3 {
	margin: 14px 0 22px;
	font-size: 25px;
}

/* --- мобильная шапка --- */

.td-header__burger,
.td-header__mobile-actions {
	display: none;
}

.td-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--td-ink-soft);
	cursor: pointer;
}

.td-icon-btn svg { width: 20px; height: 20px; }

.td-icon-btn__badge {
	position: absolute;
	top: -2px;
	right: -4px;
}

/*
 * 1024–1279: три блока шапки — меню, логотип, действия — в одну строку
 * помещаются только с более тесными отступами. Ниже 1024 раскладка
 * переключается на бургер, и это уже не нужно.
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.td-header__bar { gap: 16px; }
	.td-header__nav { gap: 20px; }
	.td-header__actions { gap: 16px; }
}

@media (max-width: 1023.98px) {
	.td-header__nav,
	.td-header__actions {
		display: none;
	}

	.td-header__burger,
	.td-header__mobile-actions {
		display: flex;
		align-items: center;
		gap: 4px;
		flex: 1 1 0;
		min-width: 0;
	}

	.td-header__mobile-actions { justify-content: flex-end; }

	.td-header__bar { gap: 8px; }
}

/* на узких экранах иконки ужимаются, иначе строка шапки не влезает в 390px */
@media (max-width: 389.98px) {
	.td-icon-btn { width: 30px; height: 30px; }
	.td-icon-btn svg { width: 18px; height: 18px; }
	.td-header__bar { gap: 6px; }
}

/* --- выезжающее меню --- */

.td-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	background: var(--td-surface);
	overflow-y: auto;
}

.td-drawer.is-open { display: block; }

.td-drawer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: var(--td-header-height);
	padding: 0 var(--td-gutter-mobile);
	border-bottom: 1px solid var(--td-border);
}

.td-drawer__section {
	border-bottom: 1px solid var(--td-border);
}

.td-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 20px var(--td-gutter-mobile);
	border: 0;
	background: none;
	color: var(--td-ink);
	font-size: var(--td-text-sm);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
}

.td-drawer__chevron {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform var(--td-transition);
}

.td-drawer__toggle[aria-expanded="true"] .td-drawer__chevron {
	transform: rotate(180deg);
}

.td-drawer__panel {
	display: none;
	padding: 0 var(--td-gutter-mobile) 18px;
}

.td-drawer__panel.is-open { display: block; }

.td-drawer__panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.td-drawer__panel li { margin-bottom: 12px; }

.td-drawer__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 20px var(--td-gutter-mobile);
}

.td-drawer__contacts {
	padding: 0 var(--td-gutter-mobile) 32px;
}

.td-drawer__phone {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 17px;
	color: var(--td-ink);
}

.td-social {
	display: flex;
	gap: 16px;
	font-size: var(--td-text-sm);
	color: var(--td-muted);
}

body.td-drawer-open { overflow: hidden; }

/* пункт бургера без вложенного списка — обычная ссылка в той же строке */
.td-drawer__toggle--plain { text-decoration: none; }

/* End */


/* Start:/local/templates/timediamond/css/footer.css?17899249943413*/
/* Подвал по 15-HeaderFooter.png: тёмная плашка, четыре колонки, нижняя строка. */

.td-footer {
	background: var(--td-ink);
	color: var(--td-muted-dark);
	font-size: var(--td-text-sm);
}

.td-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
	padding: 64px 0 40px;
}

.td-footer .td-logo,
.td-footer h3 {
	color: #fff;
}

.td-footer__about {
	max-width: 280px;
	margin: 20px 0 0;
	line-height: 1.6;
}

/* тёплая линейка под слоганом — единственный акцентный элемент подвала */
.td-footer__rule {
	width: 56px;
	height: 1px;
	margin-top: 26px;
	background: var(--td-accent);
}

.td-footer__title {
	/* по макету 15-HeaderFooter.png заголовки колонок светлее ссылок под ними */
	color: #fff;
	margin-bottom: 20px;
	font-family: var(--td-font-text);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
}

.td-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.td-footer__list li { margin-bottom: 11px; }

.td-footer a:hover { color: #fff; }

.td-footer__contact {
	margin-bottom: 11px;
}

.td-footer__contact--strong {
	color: #fff;
	font-size: 15px;
}

.td-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 0 40px;
	border-top: 1px solid var(--td-border-dark);
	font-size: 12px;
}

.td-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

@media (max-width: 1023.98px) {
	.td-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 0 28px;
	}

	.td-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 32px;
	}

	.td-footer__legal { gap: 18px; }
}

/* --- колонки-аккордеоны --- */

/*
 * На десктопе заголовок колонки — просто заголовок, списки всегда раскрыты.
 * Кнопкой он становится только на мобильном, где по макету колонки
 * сворачиваются; обработчик клика — общий, из js/header.js.
 */
.td-footer__title {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: default;
}

.td-footer__chevron { display: none; }

@media (max-width: 1023.98px) {
	.td-footer__col + .td-footer__col { border-top: 1px solid var(--td-border-dark); }

	.td-footer__col:has(.td-footer__panel) { padding-bottom: 0; }

	button.td-footer__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 0;
		margin: 0;
		cursor: pointer;
	}

	.td-footer__chevron {
		display: block;
		flex: 0 0 auto;
		width: 14px;
		height: 14px;
		transition: transform var(--td-transition);
	}

	.td-footer__title[aria-expanded="true"] .td-footer__chevron { transform: rotate(180deg); }

	/* «Контакты» не сворачиваются, но строку заголовка держат ту же */
	.td-footer__title--static { padding: 18px 0 12px; }

	.td-footer__panel { display: none; padding-bottom: 18px; }
	.td-footer__panel.is-open { display: block; }

	.td-footer__grid { gap: 0; }

	.td-footer__grid > div:first-child { padding-bottom: 24px; }
}

/* End */


/* Start:/local/templates/timediamond/css/textpage.css?17901399247348*/
/*
 * Типовая текстовая страница: боковое меню разделов, контент и плашка
 * «Остались вопросы?». Макеты design/13-TextPage.png и 14-TextPageMobile.png.
 *
 * Отдельная часть — .td-prose: оформление того, что клиент набирает
 * в визуальном редакторе. Спец-блоков шаблон не знает, он даёт типографику.
 */

.td-textpage { padding: 28px 0 80px; }

.td-textpage__title {
	margin: 20px 0 34px;
	font-size: 46px;
	font-weight: 400;
}

.td-textpage__body {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 64px;
	align-items: start;
}

.td-textpage__content { min-width: 0; }

.td-textpage__lead {
	margin: 0 0 28px;
	color: var(--td-ink-soft);
	font-size: 17px;
	line-height: 1.7;
}

/* --- боковое меню --- */

/* кнопка-раскрывашка нужна только мобильному, на десктопе её нет */
.td-sidemenu__toggle { display: none; }

.td-sidemenu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--td-border);
}

.td-sidemenu__list li + li { border-top: 1px solid var(--td-border); }

.td-sidemenu__item {
	display: block;
	padding: 16px 20px;
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
	text-decoration: none;
	transition: background var(--td-transition), color var(--td-transition);
}

.td-sidemenu__item:hover { background: var(--td-page); color: var(--td-ink); }

.td-sidemenu__item.is-active {
	background: var(--td-ink);
	color: #fff;
	font-weight: 600;
}

/* --- типографика контента из редактора --- */

.td-prose {
	color: var(--td-ink-soft);
	font-size: var(--td-text);
	line-height: 1.75;
}

.td-prose > *:first-child { margin-top: 0; }
.td-prose > *:last-child { margin-bottom: 0; }

.td-prose h2 {
	margin: 44px 0 18px;
	font-family: var(--td-font-display);
	font-size: 30px;
	font-weight: 400;
	color: var(--td-ink);
}

.td-prose h3 {
	margin: 34px 0 14px;
	font-size: 20px;
	font-weight: 600;
	font-family: var(--td-font-text);
	color: var(--td-ink);
}

.td-prose h4 {
	margin: 26px 0 12px;
	font-size: 17px;
	font-weight: 600;
	font-family: var(--td-font-text);
	color: var(--td-ink);
}

.td-prose p { margin: 0 0 18px; }

.td-prose a {
	color: var(--td-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.td-prose a:hover { color: var(--td-accent); }

.td-prose ul,
.td-prose ol {
	margin: 0 0 20px;
	padding-left: 0;
	list-style: none;
}

.td-prose li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
}

.td-prose ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--td-accent);
}

/* нумерация своя: списки лишены маркеров, чтобы отступы были общими */
.td-prose ol { counter-reset: td-prose-item; }

.td-prose ol > li { counter-increment: td-prose-item; }

.td-prose ol > li::before {
	content: counter(td-prose-item) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--td-accent);
	font-weight: 600;
}

.td-prose blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--td-accent);
	color: var(--td-ink);
	font-family: var(--td-font-display);
	font-size: 21px;
	line-height: 1.55;
}

.td-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 28px 0;
}

.td-prose table {
	width: 100%;
	margin: 28px 0;
	border-collapse: collapse;
	font-size: var(--td-text-sm);
}

.td-prose th,
.td-prose td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--td-border);
	text-align: left;
	vertical-align: top;
}

.td-prose th {
	color: var(--td-muted);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
}

.td-prose hr {
	margin: 36px 0;
	border: 0;
	border-top: 1px solid var(--td-border);
}

.td-prose code {
	padding: 2px 6px;
	background: var(--td-page);
	font-size: 13px;
}

/* --- плашка «Остались вопросы?» --- */

.td-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 56px;
	padding: 40px 48px;
	background: var(--td-ink);
	color: #fff;
}

.td-cta__title {
	margin: 0 0 8px;
	font-family: var(--td-font-display);
	font-size: 28px;
	font-weight: 400;
	color: #fff;
}

.td-cta__text {
	margin: 0;
	color: var(--td-muted-dark);
	font-size: var(--td-text-sm);
}

.td-cta__button {
	flex: 0 0 auto;
	display: inline-block;
	padding: 17px 32px;
	background: #fff;
	color: var(--td-ink);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-decoration: none;
	text-transform: uppercase;
}

/* наведение — лёгкий фиолетовый оттенок вместо тёплого акцента:
   золотой на чернильной плашке выбивался из палитры */
.td-cta__button:hover { background: var(--td-fill-hover); color: var(--td-ink); }

/* --------------------------------------------------------- мобайл --- */

@media (max-width: 1023.98px) {
	.td-textpage { padding: 18px 0 48px; }
	.td-textpage__title { margin: 14px 0 20px; font-size: 30px; }

	.td-textpage__body { grid-template-columns: 1fr; gap: 22px; }

	/* меню сворачивается в выпадающий список над контентом */
	.td-sidemenu__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		padding: 18px 20px;
		border: 1px solid var(--td-border);
		background: var(--td-surface);
		color: var(--td-ink);
		font: inherit;
		font-size: var(--td-text);
		font-weight: 600;
		text-align: left;
		cursor: pointer;
	}

	.td-sidemenu__chevron { display: inline-flex; color: var(--td-muted); }
	.td-sidemenu__chevron svg { width: 16px; height: 16px; transition: transform var(--td-transition); }
	.td-sidemenu__toggle[aria-expanded="true"] .td-sidemenu__chevron svg { transform: rotate(180deg); }

	.td-sidemenu__list { display: none; border-top: 0; }
	.td-sidemenu__list.is-open { display: block; }

	.td-textpage__lead { font-size: var(--td-text); margin-bottom: 22px; }

	.td-prose h2 { margin: 32px 0 14px; font-size: 24px; }
	.td-prose h3 { margin: 26px 0 12px; font-size: 18px; }

	.td-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		margin-top: 40px;
		padding: 28px 22px;
	}

	.td-cta__title { font-size: 24px; }
	.td-cta__button { width: 100%; text-align: center; }
}

/* --- страница «не найдено» --- */

.td-notfound { padding: 8px 0 80px; }

.td-notfound__text {
	margin: 0 0 28px;
	max-width: 520px;
	color: var(--td-muted);
	font-size: 17px;
	line-height: 1.6;
}

/*
 * Кнопка по содержимому, а не во всю ширину. Селектор составной
 * намеренно: базовое правило .td-btn-dark лежит в template_styles.css,
 * который Битрикс склеивает последним, и при равной специфичности
 * победило бы оно.
 */
.td-notfound .td-notfound__action {
	display: inline-block;
	width: auto;
	padding: 16px 36px;
}


/* End */


/* Start:/local/templates/timediamond/template_styles.css?179118801920919*/
/*
 * TIME DIAMOND — токены оформления и база.
 *
 * Здесь и только здесь заданы цвета, шрифты, размеры и сетка. Всё остальное
 * оформление ссылается на эти переменные, поэтому смена палитры или шрифта —
 * правка одного файла.
 *
 * Цвета сняты пипеткой с макетов (design/15-HeaderFooter.png, 01-Main.png).
 */

/*
 * Веб-шрифты лежат в шаблоне (fonts/), а не на внешнем CDN: стенд работает
 * без интернета, и лишнего блокирующего запроса нет. Оба шрифта бесплатные
 * (SIL OFL 1.1, тексты лицензий рядом), вариативные — один файл на все
 * насыщенности. Каждый разбит на кириллицу и латиницу: браузер по
 * unicode-range качает только то, что есть на странице.
 * Пара подобрана по образцу alrosadiamond.ru (Canela + Suisse Int'l):
 * Cormorant Garamond — антиква для заголовков, Golos Text — гротеск для текста.
 */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/local/templates/timediamond/fonts/cormorant-garamond-cyrillic-wght.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("/local/templates/timediamond/fonts/cormorant-garamond-latin-wght.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;
}

@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/local/templates/timediamond/fonts/golos-text-cyrillic-wght.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/local/templates/timediamond/fonts/golos-text-latin-wght.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 {
	/*
	 * Палитра. Основной тон — тёмный фиолетовый #1B0B27: им залиты подвал,
	 * кнопки, тёмные блоки и он же база всех градиентов. Остальные тона
	 * выведены из него — тот же тон (~270°), разная светлота, так что
	 * серые и границы чуть уходят в фиолетовый, а не в синий.
	 * Менять фирменный цвет нужно здесь: всё, что залито основным тоном,
	 * ссылается на эти переменные. Мимо палитры идут цвета состояний
	 * (ошибка, успех), красный у сердечка избранного и несколько разовых
	 * оттенков серого внутри отдельных блоков — они выведены из того же
	 * тона, но в палитре не нужны.
	 */
	--td-ink: #1B0B27;          /* подвал, кнопки, тёмные плашки */
	--td-ink-deep: #100717;     /* дно градиентов и затемнений поверх фото */
	--td-ink-soft: #2A1540;     /* основной текст и навигация */
	--td-muted: #8B8494;        /* второстепенный текст */
	--td-muted-dark: #A9A1B4;   /* второстепенный текст на тёмном */
	--td-accent: #B08D57;       /* тёплый акцент: линейки, активные метки */
	--td-page: #F8F7FA;         /* фон страницы */
	--td-surface: #FFFFFF;      /* карточки, шапка */
	--td-border: #E6E2EB;
	--td-border-dark: #331D44;  /* границы внутри тёмных блоков */

	/* светлая заливка пустых медиа-слотов: фото камня, баннера, превью */
	--td-fill-from: #F0EDF4;
	--td-fill-to: #E3DEEA;
	--td-fill-hover: #EAE5F0;   /* та же заливка как подсветка чипов и кнопок */

	/*
	 * Те же два тёмных тона в виде компонент — для rgba(): полупрозрачные
	 * тени и затемнения поверх фотографий цвет через var() не берут.
	 */
	--td-ink-rgb: 27, 11, 39;
	--td-ink-deep-rgb: 16, 7, 23;

	/*
	 * Шрифты. Первые имена — веб-шрифты из @font-face выше; остальное —
	 * запас на время загрузки и для знаков вне их наборов (например, ₽).
	 * Сменить шрифт — положить файлы в fonts/, поправить @font-face
	 * и первое имя в переменной.
	 */
	--td-font-display: "Cormorant Garamond", "Playfair Display", "P052",
		"Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;
	--td-font-text: "Golos Text", Inter, "Helvetica Neue", "Nimbus Sans",
		"Liberation Sans", Arial, sans-serif;

	/* типографика */
	--td-text: 15px;
	--td-text-sm: 13px;
	--td-text-xs: 11px;
	--td-lh: 1.55;
	--td-tracking: .12em;       /* разрядка мелких прописных подписей */
	--td-tracking-logo: .28em;  /* разрядка логотипа */

	/* сетка */
	--td-container: 1440px;
	--td-gutter: 64px;
	--td-gutter-mobile: 16px;

	/* прочее */
	--td-header-height: 72px;
	--td-radius: 2px;
	--td-transition: .18s ease;
}

@media (max-width: 1023.98px) {
	:root {
		--td-gutter: var(--td-gutter-mobile);
		--td-header-height: 56px;
	}
}

/* --- база --- */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--td-surface);
	color: var(--td-ink-soft);
	font-family: var(--td-font-text);
	font-size: var(--td-text);
	line-height: var(--td-lh);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0 0 16px;
	font-family: var(--td-font-display);
	font-weight: 400;
	line-height: 1.2;
	color: var(--td-ink);
}

h1 { font-size: 38px; }
h2 { font-size: 28px; }
h3 { font-size: 21px; }

p { margin: 0 0 14px; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--td-transition);
}

a:hover { color: var(--td-accent); }

img { max-width: 100%; }

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	/*
	 * Цвет тоже наследуем. Без этого браузер красит текст и иконки кнопки
	 * системным buttontext (чёрный), и на тёмных плашках — в подвале,
	 * поверх первого экрана — подписи проваливаются в фон.
	 * Кнопки, у которых цвет задан своим правилом, это не затрагивает.
	 */
	color: inherit;
}

/*
 * Системные цвета браузера — туда же, в фирменный тон.
 *
 * Галку в чекбоксе, точку в радиокнопке и заливку ползунка браузер красит
 * своим синим (в Chrome это заметный #3B5FE0) — на фоне чернильного
 * интерфейса это выглядело чужим пятном и читалось как «кнопки остались
 * тёмно-синими». accent-color переводит их на основной тон.
 */
:root {
	accent-color: var(--td-ink);
}

/*
 * Кольцо фокуса. Браузерное — тоже синее, поэтому задаём своё: тёплый
 * акцент одинаково виден и на светлом фоне, и на тёмных плашках.
 * Появляется только при навигации с клавиатуры, мышь его не вызывает.
 */
:focus-visible {
	outline: 2px solid var(--td-accent);
	outline-offset: 2px;
}

/* выделение текста — по умолчанию тоже синее */
::selection {
	background: var(--td-ink);
	color: #fff;
}

/* --- сетка --- */

.td-container {
	width: 100%;
	max-width: var(--td-container);
	margin: 0 auto;
	padding: 0 var(--td-gutter);
}

.td-page-body {
	min-height: 50vh;
	padding: 40px 0 72px;
	background: var(--td-surface);
}

@media (max-width: 1023.98px) {
	.td-page-body { padding: 24px 0 48px; }
	h1 { font-size: 27px; }
	h2 { font-size: 22px; }
}

/* --- мелкие прописные подписи, как в макете --- */

.td-eyebrow {
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	color: var(--td-muted);
}

/* --- логотип --- */

.td-logo {
	font-family: var(--td-font-display);
	font-size: 22px;
	letter-spacing: var(--td-tracking-logo);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--td-ink);
}

.td-logo:hover { color: var(--td-ink); }

/*
 * Мобильный размер логотипа живёт здесь, а не в css/header.css: Битрикс
 * склеивает template_styles.css последним в общий бандл, поэтому правило
 * .td-logo отсюда перебивает одноимённое из подключённых файлов независимо
 * от медиазапроса. Переопределения базовых классов — только в этом файле.
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	/* в этой полосе логотип делит строку с меню и действиями — чуть скромнее,
	   иначе встаёт вплотную к иконке чата */
	.td-logo { font-size: 20px; letter-spacing: .22em; }
}

@media (max-width: 1023.98px) {
	.td-logo { font-size: 17px; letter-spacing: .2em; }
}

@media (max-width: 389.98px) {
	.td-logo { font-size: 15px; letter-spacing: .14em; }
}

/*
 * Название камня в карточке списка: слово и форма отдельными строками,
 * капсом, на чистом фоне карточки. Используется и каталогом, и витриной
 * на главной, поэтому живёт здесь, а не в наборе одной страницы.
 */
.td-stone__name-word,
.td-stone__name-shape {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	line-height: 1.45;
	text-transform: uppercase;
}

.td-stone__name-shape { color: var(--td-muted); font-weight: 500; }

@media (max-width: 1023.98px) {
	.td-stone__name-word,
	.td-stone__name-shape { font-size: 12px; }
}

/* --- кнопки --- */

.td-btn-dark,
.td-btn-ghost {
	display: block;
	width: 100%;
	padding: 18px 24px;
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.td-btn-dark {
	border: 1px solid var(--td-ink);
	background: var(--td-ink);
	color: #fff;
}

.td-btn-dark:hover { background: var(--td-ink-soft); color: #fff; }

.td-btn-ghost {
	border: 1px solid var(--td-ink);
	background: none;
	color: var(--td-ink);
}

.td-btn-ghost:hover { background: var(--td-ink); color: #fff; }

.td-note {
	margin: 0;
	padding: 12px 14px;
	font-size: var(--td-text-sm);
	line-height: 1.5;
}

.td-note--ok { background: #EAF4EE; color: #1F7A4D; }
.td-note--error { background: #FBEDEE; color: #A8323A; }
.td-note--info { background: var(--td-page); color: var(--td-ink-soft); }
.td-note a { color: inherit; text-decoration: underline; }


.td-btn {
	display: inline-block;
	padding: 13px 28px;
	border: 1px solid var(--td-ink);
	border-radius: var(--td-radius);
	background: var(--td-ink);
	color: #fff;
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background var(--td-transition), color var(--td-transition);
}

.td-btn:hover {
	background: transparent;
	color: var(--td-ink);
}

.td-btn--ghost {
	background: transparent;
	color: var(--td-ink);
}

.td-btn--ghost:hover {
	background: var(--td-ink);
	color: #fff;
}

/* невидимо для глаза, доступно скринридеру */
.td-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Модальные окна: вход и быстрый заказ                                */
/*                                                                      */
/* Общая оболочка на всё: затемнение, белая панель по центру, крестик.  */
/* Живёт здесь, а не в разделе, потому что окно входа открывается       */
/* с любой страницы сайта.                                              */
/* ------------------------------------------------------------------ */

.td-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

.td-modal[hidden] { display: none; }

.td-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--td-ink-deep-rgb), .55);
}

.td-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 48px);
	background: var(--td-surface);
	box-shadow: 0 30px 70px -30px rgba(var(--td-ink-deep-rgb), .5);
}

.td-modal__panel--wide { max-width: 620px; }

.td-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--td-muted);
	cursor: pointer;
	transition: color var(--td-transition);
}

.td-modal__close:hover { color: var(--td-ink); }
.td-modal__close svg { width: 16px; height: 16px; }

/*
 * Форма внутри окна тоже колонка: иначе кнопка отправки, лежащая рядом
 * с прокручиваемым телом, не растянется на всю ширину панели.
 */
.td-modal__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * Прокручивается только содержимое: кнопка отправки остаётся на виду.
 * flex-grow нужен мобильному, где окно растянуто на весь экран, —
 * иначе кнопка встаёт сразу под текстом, а под ней остаётся пустота.
 */
.td-modal__body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 44px 44px 36px;
}

.td-modal__title {
	margin: 0 0 26px;
	font-family: var(--td-font-display);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--td-ink);
}

.td-modal__subject {
	margin: -16px 0 26px;
	font-size: var(--td-text-sm);
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	color: var(--td-ink-soft);
}

.td-modal__note {
	margin: 0 0 24px;
	color: var(--td-muted);
	font-size: var(--td-text-sm);
	line-height: 1.5;
}

.td-modal__error { margin: 0 0 24px; }

/* кнопка во всю ширину, вплотную к нижнему краю окна — как в макете */
.td-modal__submit {
	flex: 0 0 auto;
	padding: 22px 24px;
	border: 0;
	background: var(--td-ink);
	color: #fff;
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--td-transition);
}

.td-modal__submit:hover { background: var(--td-ink-soft); }
.td-modal__submit[disabled] { background: var(--td-muted); cursor: default; }

/* ссылка-действие внутри окна: «забыли пароль», «зарегистрироваться» */
.td-modal__link {
	display: inline-block;
	border: 0;
	background: none;
	padding: 0;
	color: var(--td-ink-soft);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--td-transition);
}

.td-modal__link:hover { color: var(--td-accent); }

.td-modal__links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
	text-align: center;
}

body.td-modal-open { overflow: hidden; }

/* --- поля с подчёркиванием: только внутри модальных окон --- */

.td-fieldline {
	display: block;
	margin-bottom: 26px;
}

.td-fieldline > span {
	display: block;
	margin-bottom: 8px;
	color: var(--td-muted);
	font-size: var(--td-text-sm);
}

.td-fieldline > span i {
	font-style: normal;
	color: var(--td-accent);
}

.td-fieldline input,
.td-fieldline textarea {
	display: block;
	width: 100%;
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid var(--td-border);
	border-radius: 0;
	background: none;
	color: var(--td-ink);
	font-size: var(--td-text);
	line-height: 1.5;
}

.td-fieldline textarea {
	min-height: 132px;
	resize: vertical;
}

.td-fieldline input:focus,
.td-fieldline textarea:focus {
	outline: none;
	border-bottom-color: var(--td-ink);
}

.td-fieldline input::placeholder,
.td-fieldline textarea::placeholder { color: var(--td-muted); }

/*
 * Автозаполнение. Chrome заливает подставленные поля своим голубым фоном
 * и красит текст системным цветом — поверх подчёркнутых полей это выглядит
 * чужеродно. Фон подменяем толстой внутренней тенью: сам background
 * браузер в этом состоянии перебить не даёт.
 */
.td-fieldline input:-webkit-autofill,
.td-fieldline input:-webkit-autofill:hover,
.td-fieldline input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--td-ink);
	-webkit-box-shadow: 0 0 0 40px var(--td-surface) inset;
	box-shadow: 0 0 0 40px var(--td-surface) inset;
	caret-color: var(--td-ink);
}

/* два поля в строку — e-mail и телефон в быстром заказе */
.td-fieldline-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}

@media (max-width: 599.98px) {
	.td-modal { padding: 0; align-items: stretch; }

	.td-modal__panel {
		max-width: none;
		max-height: 100vh;
		min-height: 100vh;
	}

	.td-modal__body { padding: 56px 20px 28px; }
	.td-modal__title { font-size: 22px; }
	.td-fieldline-pair { grid-template-columns: 1fr; }
}

/* --- форма входа внутри окна --- */

.td-login__error { margin-bottom: 24px; }

.td-login__captcha img {
	display: block;
	margin-bottom: 10px;
}

.td-login__remember {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	color: var(--td-muted);
	font-size: var(--td-text-sm);
	cursor: pointer;
}

/*
 * Кнопка входа не прилипает к низу окна: под ней идут ссылки на
 * восстановление пароля и регистрацию, как в макете.
 */
.td-login__submit {
	width: 100%;
	padding: 18px 24px;
}

/*
 * Согласие с офертой. Лежит здесь, а не в css/checkout.css: тот же блок
 * нужен в окне быстрого заказа на карточке камня, а стили оформления
 * туда не подключаются.
 */
.td-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	color: var(--td-muted);
	font-size: var(--td-text-sm);
	line-height: 1.5;
	cursor: pointer;
}

.td-consent a { color: var(--td-ink-soft); text-decoration: underline; }
.td-consent a:hover { color: var(--td-accent); }

/* --- страница входа: запасной путь к той же форме --- */

.td-authpage {
	max-width: 420px;
	margin: 0 auto;
	padding: 40px 0 72px;
}

.td-authpage__done { margin: 0 0 24px; font-size: 17px; }
.td-authpage__action { display: inline-block; padding: 16px 32px; }


/* End */
/* /local/templates/.default/css/favorites.css?1789924653899 */
/* /local/templates/timediamond/css/header.css?17899823707287 */
/* /local/templates/timediamond/css/footer.css?17899249943413 */
/* /local/templates/timediamond/css/textpage.css?17901399247348 */
/* /local/templates/timediamond/template_styles.css?179118801920919 */