/* 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/catalog.css?179007957319853*/
/*
 * Каталог: панель, сайдбар фильтра, сетка карточек, листалка.
 * Макеты design/03-Catalog.png, 04-CatalogCollapsed.png, 05/06-CatalogMobile.
 */

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

/* --- шапка страницы --- */

.td-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--td-muted);
	font-size: var(--td-text-sm);
}

.td-crumbs a { color: var(--td-muted); }
.td-crumbs a:hover { color: var(--td-accent); }
.td-crumbs b { color: var(--td-ink); font-weight: 400; }

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

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

/* --- панель над каталогом --- */

.td-toolbar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 34px 0 0;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--td-border);
}

.td-toolbar__spacer { flex: 1 1 auto; }

.td-toolbar__count {
	color: var(--td-muted);
	font-size: var(--td-text-sm);
}

.td-toolbar__count b { color: var(--td-ink); font-weight: 600; }

.td-toolbar__filters {
	display: none;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border: 1px solid var(--td-ink);
	background: none;
	color: var(--td-ink);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	cursor: pointer;
}

.td-toolbar__filters-icon { display: inline-flex; }
.td-toolbar__filters-icon svg { width: 16px; height: 16px; }

/* копия чипсов в панели нужна только там, где сайдбара не видно */
.td-toolbar__chips { display: none; }
.td-toolbar__chips .td-chips { margin: 0; }

/* свёрнутый сайдбар: кнопка «Фильтры» занимает его место в панели */
.td-catalog.is-collapsed .td-toolbar__filters { display: inline-flex; }
.td-catalog.is-collapsed .td-toolbar__chips { display: block; }
.td-catalog.is-collapsed .td-catalog__aside { display: none; }
.td-catalog.is-collapsed .td-catalog__body { grid-template-columns: 1fr; }

/* --- переключатель шкалы --- */

.td-scale {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

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

.td-scale__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	padding: 9px 12px;
	border: 1px solid var(--td-border);
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
	font-weight: 500;
	text-decoration: none;
}

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

.td-scale__option.is-active {
	background: var(--td-ink);
	border-color: var(--td-ink);
	color: #fff;
}

/* --- плотность сетки --- */

.td-density { display: inline-flex; }

.td-density__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--td-border);
	background: none;
	color: var(--td-ink-soft);
	cursor: pointer;
}

.td-density__option + .td-density__option { border-left: 0; }
.td-density__option svg { width: 18px; height: 18px; }

.td-density__option.is-active {
	background: var(--td-ink);
	border-color: var(--td-ink);
	color: #fff;
}

/* --- сортировка --- */

.td-sort { position: relative; }

.td-sort__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--td-border);
	background: none;
	color: var(--td-ink);
	font-size: var(--td-text-sm);
	cursor: pointer;
}

.td-sort__label { color: var(--td-muted); }
.td-sort__button svg { width: 14px; height: 14px; transition: transform var(--td-transition); }
.td-sort__button[aria-expanded="true"] svg { transform: rotate(180deg); }

.td-sort__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	display: none;
	min-width: 220px;
	padding: 6px 0;
	border: 1px solid var(--td-border);
	background: var(--td-surface);
	box-shadow: 0 12px 32px rgba(var(--td-ink-rgb), .1);
}

.td-sort.is-open .td-sort__menu { display: block; }

.td-sort__item {
	display: block;
	padding: 10px 16px;
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
	text-decoration: none;
}

.td-sort__item:hover { background: var(--td-page); color: var(--td-ink); }
.td-sort__item.is-active { color: var(--td-ink); font-weight: 600; }

/* --- плашка о шкале --- */

.td-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 20px;
	border-left: 2px solid var(--td-accent);
	background: var(--td-page);
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
}

.td-notice__icon { display: inline-flex; color: var(--td-muted); }
.td-notice__icon svg { width: 18px; height: 18px; }

/* --- раскладка --- */

.td-catalog__body {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	margin-top: 28px;
	align-items: start;
}

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

/* --- фильтр --- */

.td-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.td-filter__reset {
	color: var(--td-muted);
	font-size: var(--td-text-sm);
}

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

.td-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.td-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--td-page);
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
	text-decoration: none;
}

.td-chip:hover { background: var(--td-fill-hover); color: var(--td-ink); }
.td-chip svg { width: 12px; height: 12px; color: var(--td-muted); }

.td-scale-box {
	padding: 16px;
	margin-bottom: 22px;
	background: var(--td-page);
}

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

.td-filter__block { border-top: 1px solid var(--td-border); }
.td-filter__block:first-of-type { border-top: 0; }

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

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

.td-filter__panel { display: none; padding-bottom: 20px; }
.td-filter__panel.is-open { display: block; }

/* плитка форм */

.td-shape-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.td-shape-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 84px;
	padding: 12px 6px;
	border: 1px solid var(--td-border);
	color: var(--td-muted);
	cursor: pointer;
	transition: border-color var(--td-transition), color var(--td-transition);
}

.td-shape-tile input { position: absolute; opacity: 0; pointer-events: none; }
.td-shape-tile .td-shape__icon { width: 26px; height: 26px; }

.td-shape-tile__name {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-align: center;
	text-transform: uppercase;
}

.td-shape-tile:hover { border-color: var(--td-ink-soft); color: var(--td-ink-soft); }

.td-shape-tile.is-on {
	border-color: var(--td-ink);
	border-width: 2px;
	color: var(--td-ink);
}

.td-shape-tile.is-off { opacity: .4; cursor: default; }

/* лишние формы скрыты до нажатия «Показать все формы» */
.td-shape-tile--extra { display: none; }
.td-filter__block--shapes.is-expanded .td-shape-tile--extra { display: flex; }

.td-filter__more {
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
	text-decoration: underline;
	cursor: pointer;
}

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

/* значения-кнопки */

.td-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.td-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	padding: 10px 12px;
	border: 1px solid var(--td-border);
	color: var(--td-ink-soft);
	font-size: var(--td-text-sm);
	cursor: pointer;
	transition: border-color var(--td-transition);
}

.td-option input { position: absolute; opacity: 0; pointer-events: none; }
.td-option:hover { border-color: var(--td-ink-soft); }

.td-option.is-on {
	background: var(--td-ink);
	border-color: var(--td-ink);
	color: #fff;
}

.td-option.is-off { opacity: .35; cursor: default; }

/* диапазоны */

.td-range__track {
	position: relative;
	height: 24px;
	margin: 6px 4px 14px;
}

.td-range__track::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--td-border);
}

.td-range__fill {
	position: absolute;
	top: 11px;
	height: 2px;
	background: var(--td-ink);
}

/*
 * Два <input type="range"> лежат друг на друге: сама дорожка прозрачная,
 * ловят события только бегунки — иначе верхний ползунок перехватывал бы
 * все клики и нижний стал бы недоступен.
 */
.td-range__handle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.td-range__handle::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--td-ink);
	border-radius: 50%;
	background: var(--td-surface);
	cursor: pointer;
	pointer-events: auto;
}

.td-range__handle::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--td-ink);
	border-radius: 50%;
	background: var(--td-surface);
	cursor: pointer;
	pointer-events: auto;
}

.td-range__inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.td-range__field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--td-border);
}

.td-range__field span { color: var(--td-muted); font-size: var(--td-text-sm); }

.td-range__field input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--td-ink);
	font: inherit;
	font-size: var(--td-text-sm);
}

.td-range__field input:focus { outline: none; }

/* кнопки фильтра */

.td-filter__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 22px;
	border-top: 1px solid var(--td-border);
}

.td-filter__submit {
	padding: 15px 20px;
	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;
}

.td-filter__submit:hover { background: var(--td-ink-soft); }

.td-filter__clear {
	padding: 12px 20px;
	border: 1px solid var(--td-border);
	background: none;
	color: var(--td-ink-soft);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	cursor: pointer;
}

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

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

.td-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}

.td-catalog.is-collapsed .td-grid { grid-template-columns: repeat(4, 1fr); }
.td-catalog.is-dense .td-grid { grid-template-columns: repeat(4, 1fr); }
.td-catalog.is-dense.is-collapsed .td-grid { grid-template-columns: repeat(5, 1fr); }

.td-stone { display: flex; flex-direction: column; min-width: 0; }

.td-stone__pic {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(160deg, var(--td-fill-from), var(--td-fill-to));
}

.td-stone__pic-link { display: block; width: 100%; height: 100%; }

.td-stone__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.td-stone__pic-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--td-muted);
	font-size: var(--td-text-xs);
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
	pointer-events: none;
}

.td-stone__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	/* 5px + рамка 1px даёт тот же внешний размер, что прежние 6px без рамки */
	padding: 5px 10px;
	border: 1px solid var(--td-ink);
	background: none;
	color: var(--td-ink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
}

.td-stone__heart { position: absolute; top: 12px; right: 12px; }

/* Название на чистом фоне карточки: никакой подложки под ним нет,
   поэтому оно не зависит от того, светлое фото или тёмное. */
.td-stone__name {
	display: block;
	padding: 16px 0 14px;
	color: var(--td-ink);
	text-decoration: none;
}

.td-stone__name:hover .td-stone__name-word,
.td-stone__name:hover .td-stone__name-shape { color: var(--td-accent); }

.td-stone__specs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 0;
	border-top: 1px solid var(--td-border);
	border-bottom: 1px solid var(--td-border);
}

.td-stone__spec { padding: 10px 12px 12px 0; }
.td-stone__spec + .td-stone__spec { padding-left: 12px; border-left: 1px solid var(--td-border); }

.td-stone__spec dt {
	margin: 0 0 5px;
	color: var(--td-muted);
	font-size: 10px;
	letter-spacing: var(--td-tracking);
	text-transform: uppercase;
}

.td-stone__spec dd { margin: 0; font-size: var(--td-text-sm); }

.td-stone__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.td-stone__price { font-size: 17px; font-weight: 600; }

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

.td-list__empty { padding: 48px 0; color: var(--td-muted); }

/* --- листалка --- */

.td-pager {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 48px;
}

.td-pager__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 264px;
	padding: 16px 28px;
	border: 1px solid var(--td-ink);
	color: var(--td-ink);
	font-size: var(--td-text-xs);
	font-weight: 600;
	letter-spacing: var(--td-tracking);
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.td-pager__more:hover { background: var(--td-ink); color: #fff; }
.td-pager__more.is-busy { opacity: .5; pointer-events: none; }

.td-pager__pages {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--td-text-sm);
}

.td-pager__page { color: var(--td-muted); text-decoration: none; }
.td-pager__page:hover { color: var(--td-accent); }
.td-pager__page.is-current { color: var(--td-ink); font-weight: 600; }
.td-pager__gap { color: var(--td-muted); }

/* --- мобильный поповер фильтра --- */

.td-sheet {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: flex-end;
}

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

.td-sheet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--td-ink-rgb), .45);
}

.td-sheet__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 92vh;
	background: var(--td-surface);
}

.td-sheet__grip {
	width: 46px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 2px;
	background: var(--td-border);
}

.td-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px var(--td-gutter-mobile) 10px;
}

.td-sheet__title {
	font-family: var(--td-font-display);
	font-size: 26px;
}

.td-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 var(--td-gutter-mobile) 20px;
}

/* кнопки фильтра в поповере прилипают к низу, как на макете */
.td-sheet__body .td-filter__actions {
	position: sticky;
	bottom: 0;
	flex-direction: row-reverse;
	padding: 14px 0;
	background: var(--td-surface);
}

.td-sheet__body .td-filter__submit { flex: 1 1 auto; }
.td-sheet__body .td-filter__clear { flex: 0 0 40%; }
.td-sheet__body .td-filter__head { display: none; }
body.td-sheet-open { overflow: hidden; }

/* --------------------------------------------------------- планшет --- */

/* по макету сайдбар живёт от 1280px, ниже фильтр уезжает в поповер */
@media (max-width: 1279.98px) {
	.td-catalog__aside { display: none; }
	.td-catalog__body { grid-template-columns: 1fr; }
	.td-toolbar__filters { display: inline-flex; }
	.td-toolbar__chips { display: block; }
	.td-grid { grid-template-columns: repeat(3, 1fr); }
	.td-catalog.is-dense .td-grid { grid-template-columns: repeat(4, 1fr); }
}

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

@media (max-width: 1023.98px) {
	.td-catalog { padding: 18px 0 56px; }
	.td-catalog__title { margin: 14px 0 8px; font-size: 32px; }
	.td-catalog__lead { display: none; }

	.td-toolbar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-top: 20px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.td-toolbar__spacer { display: none; }

	.td-toolbar__filters {
		order: 1;
		justify-content: center;
		background: var(--td-ink);
		color: #fff;
	}

	.td-toolbar__filters .td-badge { background: #fff; color: var(--td-ink); }

	.td-sort { order: 2; }
	.td-sort__button { width: 100%; justify-content: center; }
	.td-sort__label { display: none; }
	.td-sort__menu { left: 0; right: auto; width: 100%; }

	/* строка со шкалой и счётчиком — отдельной полосой под кнопками */
	.td-toolbar__count {
		order: 4;
		align-self: center;
		justify-self: end;
		padding: 12px 0;
	}

	/* порядок и рамка — только для панели каталога: тот же .td-scale
	   стоит в карточке камня, и там он не должен переезжать */
	.td-toolbar .td-scale { order: 3; padding: 8px 0; }

	/* на мобильном чипсы идут отдельной строкой под кнопками */
	.td-toolbar__chips { grid-column: 1 / -1; order: 5; }
	.td-scale__option { min-width: 46px; padding: 7px 10px; }
	.td-density { display: none; }

	.td-toolbar__count,
	.td-toolbar .td-scale { border-top: 1px solid var(--td-border); }

	.td-notice { margin-top: 14px; padding: 12px 14px; }

	.td-catalog__body { margin-top: 16px; }

	.td-grid,
	.td-catalog.is-dense .td-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }

	.td-stone__name { padding: 12px 0 10px; }
	.td-stone__spec { padding: 8px 6px 10px 0; }
	.td-stone__spec + .td-stone__spec { padding-left: 6px; }
	.td-stone__spec dt { font-size: 9px; letter-spacing: .06em; }

	.td-pager__more { width: 100%; min-width: 0; }
}

@media (max-width: 479.98px) {
	/* на макете мобильного каталога две колонки и на 390px — в одну
	   сетка складывается только на совсем узких экранах */
	.td-sheet__body .td-shape-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 359.98px) {
	.td-grid,
	.td-catalog.is-dense .td-grid { grid-template-columns: 1fr; }
}

/* End */


/* Start:/local/templates/timediamond/css/search.css?17901413383088*/
/*
 * Поиск по сайту. Макета не было — страница собрана из готовых элементов,
 * поэтому здесь только своё: форма запроса, текстовые результаты и отбивки
 * между группами. Карточки камней и листалку рисуют стили каталога,
 * страница подключает их вместе с этим файлом.
 */

.td-search__title { margin: 0 0 28px; }

/* --- строка запроса --- */

.td-search__form {
	display: flex;
	gap: 16px;
	max-width: 760px;
	margin-bottom: 36px;
}

.td-search__field {
	flex: 1 1 auto;
	min-width: 0;
}

.td-search__field input {
	width: 100%;
	padding: 17px 20px;
	border: 1px solid var(--td-border);
	border-radius: 0;
	background: var(--td-surface);
	color: var(--td-ink);
	font-size: var(--td-text);
	line-height: 1.4;
	/* крестик очистки в Chrome ломает выравнивание поля */
	appearance: none;
	-webkit-appearance: none;
}

.td-search__field input:focus { outline: none; border-color: var(--td-ink); }
.td-search__field input::placeholder { color: var(--td-muted); }
.td-search__field input::-webkit-search-cancel-button { appearance: none; }

.td-search .td-search__submit {
	flex: 0 0 auto;
	width: auto;
	padding: 17px 40px;
}

.td-search__count {
	margin: 0 0 32px;
	color: var(--td-muted);
	font-size: var(--td-text-sm);
}

.td-search__count b { color: var(--td-ink); font-weight: 600; }

.td-search__error { margin-bottom: 32px; }

/* --- ничего не нашлось --- */

.td-search__empty { padding: 4px 0 72px; }

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

.td-search .td-search__action {
	display: inline-block;
	width: auto;
	padding: 16px 36px;
}

/* --- группы находок --- */

.td-search__group { margin-bottom: 56px; }

.td-search__group-title {
	padding-bottom: 14px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--td-border);
}

/* --- текстовые результаты --- */

.td-results {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.td-result { max-width: 860px; }

.td-result__title {
	display: inline-block;
	margin-bottom: 8px;
	font-family: var(--td-font-display);
	font-size: 21px;
	color: var(--td-ink);
}

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

.td-result__text {
	margin: 0;
	color: var(--td-muted);
	line-height: 1.6;
}

/* подсветку совпадений ставит сам поиск тегом <b> */
.td-result__title b,
.td-result__text b { color: var(--td-ink); font-weight: 600; }

.td-search__pager { margin-top: 8px; }

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

@media (max-width: 1023.98px) {
	.td-search__form { flex-direction: column; gap: 12px; margin-bottom: 28px; }
	.td-search .td-search__submit { width: 100%; }
	.td-search__group { margin-bottom: 40px; }
	.td-result__title { font-size: 18px; }
}

/* 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/catalog.css?179007957319853 */
/* /local/templates/timediamond/css/search.css?17901413383088 */
/* /local/templates/timediamond/template_styles.css?179118801920919 */