/**
 * Компоненты интерфейса.
 *
 * Правила группировки: расстояние между группами минимум вдвое больше
 * расстояния внутри группы. Разделительные линии — крайняя мера для плотных
 * таблиц, где место дороже воздуха.
 */

@layer components {

	/* ================================================================== */
	/*  Кнопки                                                            */
	/* ================================================================== */

	.dp-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		padding-inline: 1.5rem;
		padding-block: 0.75rem;
		min-height: 2.75rem;
		font-family: var(--font-sans);
		font-size: var(--text-small-size);
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.01em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		border: 0;
		border-radius: var(--radius-sm);
		cursor: pointer;
		/* Убирает задержку 300 мс на двойное касание. */
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-button {
			transition-property: background-color, color, box-shadow, scale, border-color;
			transition-duration: var(--duration-fast);
			transition-timing-function: var(--ease-out);
		}

		.dp-button:active:not(:disabled) {
			scale: 0.96;
		}
	}

	/* Сплошной медицинский синий, белый текст. Цвет текста задан явно, чтобы
	   он не мог унаследоваться от ссылки и слиться с фоном. */
	.dp-button--primary {
		background: var(--brand);
		color: var(--text-on-brand);
		box-shadow: 0 1px 2px rgba(0, 45, 91, 0.12);
	}

	.dp-button--primary:hover,
	.dp-button--primary:focus-visible {
		background: var(--brand-hover);
		color: var(--text-on-brand);
	}

	/* Конверсионная лазурь — только для лид-форм. */
	.dp-button--accent {
		background: var(--accent);
		color: #ffffff;
		box-shadow: 0 4px 14px rgba(0, 163, 255, 0.3);
	}

	.dp-button--accent:hover,
	.dp-button--accent:focus-visible {
		background: var(--accent-hover);
		color: #ffffff;
	}

	/* Инверсная: белая кнопка на синей плашке (бенто-карточка методики). */
	.dp-button--on-brand {
		background: #ffffff;
		color: var(--brand);
	}

	.dp-button--on-brand:hover,
	.dp-button--on-brand:focus-visible {
		background: var(--surface-sunken);
		color: var(--brand);
	}

	/* Вторичная: обводка и синий текст, прозрачный фон. */
	.dp-button--ghost {
		background: transparent;
		color: var(--brand);
		box-shadow: inset 0 0 0 2px var(--brand);
	}

	.dp-button--ghost:hover,
	.dp-button--ghost:focus-visible {
		background: color-mix(in oklab, var(--brand) 8%, transparent);
		color: var(--brand);
	}

	/* Тихая: только текст, без фона. */
	.dp-button--quiet {
		background: transparent;
		color: var(--brand);
		padding-inline: var(--space-2);
		min-height: 2.25rem;
	}

	.dp-button--quiet:hover {
		color: var(--brand-hover);
		text-decoration: underline;
	}

	.dp-button--wide {
		width: 100%;
	}

	.dp-button:disabled,
	.dp-button[aria-busy="true"] {
		opacity: 0.55;
		cursor: default;
	}

	.dp-button svg {
		flex: none;
	}

	/* ================================================================== */
	/*  Шапка                                                             */
	/* ================================================================== */

	/* Стеклянная шапка: полупрозрачный фон с размытием — как в макете. */
	.dp-header {
		position: sticky;
		top: 0;
		z-index: 40;
		background: var(--surface-glass);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--separator);
	}

	.dp-header__inner {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		min-height: var(--header-height);
	}

	.dp-header__logo {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		flex: none;
	}

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

	.dp-logo {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}

	.dp-logo__mark {
		flex: none;
		color: var(--brand);
	}

	.dp-logo__word {
		font-weight: 700;
		font-size: 1.25rem;
		letter-spacing: -0.02em;
		line-height: 1;
		white-space: nowrap;
	}

	.dp-logo__word-name {
		color: var(--text-primary);
	}

	.dp-logo__word-tld {
		color: var(--brand);
	}

	@media (max-width: 26rem) {
		.dp-logo__word {
			font-size: 1.0625rem;
		}
	}

	/* Поиск занимает гибкую середину строки — так на ноутбуке ему хватает
	   ширины, а не остаётся обрезок между меню и телефоном. */
	.dp-header__search {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		justify-content: flex-end;
	}

	@media (min-width: 64rem) {
		.dp-header__search {
			justify-content: center;
		}
	}

	.dp-header__actions {
		flex: none;
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.dp-header__phone {
		font-weight: 600;
		font-size: var(--text-small-size);
		text-decoration: none;
		color: var(--text-primary);
		white-space: nowrap;
	}

	/* --- Кнопка мега-меню --------------------------------------------- */

	.dp-nav {
		display: none;
	}

	@media (min-width: 64rem) {
		.dp-nav {
			display: block;
			flex: none;
		}
	}

	.dp-mega__trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding-inline: var(--space-3);
		min-block-size: 2.5rem;
		font-size: var(--text-small-size);
		font-weight: 600;
		color: var(--text-primary);
		background: var(--surface);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-border);
		white-space: nowrap;
		touch-action: manipulation;
	}

	.dp-mega__trigger:hover,
	.dp-mega__trigger[aria-expanded="true"] {
		background: var(--surface-sunken);
	}

	.dp-mega__trigger-icon {
		color: var(--brand);
		display: inline-flex;
	}

	.dp-mega__trigger-chevron {
		display: inline-flex;
		color: var(--text-tertiary);
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-mega__trigger-chevron {
			transition: rotate var(--duration-fast) var(--ease-out);
		}
	}

	.dp-mega__trigger[aria-expanded="true"] .dp-mega__trigger-chevron {
		rotate: 180deg;
	}

	/* --- Панель мега-меню --------------------------------------------- */

	/* Панель висит под шапкой во всю её ширину. Абсолют, потому что
	   .dp-header — sticky, а значит позиционированный предок. */
	.dp-mega {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		z-index: 39;
		background: var(--surface-raised);
		border-block-end: 1px solid var(--separator);
		box-shadow: var(--shadow-overlay);
	}

	.dp-mega[hidden] {
		display: none;
	}

	.dp-mega__inner {
		display: grid;
		gap: var(--space-6);
		padding-block: var(--space-6);
		grid-template-columns: minmax(0, 1fr) 16rem;
	}

	@media (max-width: 79.999rem) {
		/* На узком десктопе колонку помощи убираем под сетку, а не рядом. */
		.dp-mega__inner {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.dp-mega__sections {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-2);
	}

	.dp-mega__section {
		display: flex;
		gap: var(--space-3);
		padding: var(--space-3);
		border-radius: var(--radius-md);
		text-decoration: none;
		color: inherit;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-mega__section {
			transition: background-color var(--duration-fast) var(--ease-out);
		}
	}

	.dp-mega__section:hover {
		background: var(--surface-sunken);
	}

	.dp-mega__icon {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: var(--radius-sm);
		background: var(--surface-brand-soft);
		color: var(--brand);
	}

	.dp-mega__section-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.dp-mega__section-title {
		font-weight: 620;
	}

	.dp-mega__section-text {
		font-size: var(--text-caption-size);
		line-height: 1.4;
		color: var(--text-secondary);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.dp-mega__aside {
		border-inline-start: 1px solid var(--separator);
		padding-inline-start: var(--space-6);
	}

	@media (max-width: 79.999rem) {
		.dp-mega__aside {
			border-inline-start: 0;
			border-block-start: 1px solid var(--separator);
			padding-inline-start: 0;
			padding-block-start: var(--space-5);
		}
	}

	.dp-mega__aside-title {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-tertiary);
		margin-block-end: var(--space-3);
	}

	.dp-mega__aside-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	@media (max-width: 79.999rem) {
		.dp-mega__aside-list {
			flex-direction: row;
			flex-wrap: wrap;
			gap: var(--space-2);
		}
	}

	.dp-mega__aside-link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-sm);
		font-size: var(--text-small-size);
		font-weight: 500;
		text-decoration: none;
		color: var(--text-primary);
	}

	.dp-mega__aside-link:hover {
		background: var(--surface-sunken);
	}

	.dp-mega__aside-icon {
		color: var(--brand);
		display: inline-flex;
	}

	/* --- Мобильное меню ----------------------------------------------- */

	.dp-menu-toggle {
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: var(--radius-sm);
		color: var(--text-primary);
	}

	@media (min-width: 64rem) {
		.dp-menu-toggle {
			display: none;
		}
	}

	.dp-drawer {
		border: 0;
		padding: 0;
		margin: 0;
		inline-size: min(22rem, 90vw);
		max-inline-size: none;
		block-size: 100dvh;
		max-block-size: none;
		margin-inline-start: auto;
		background: var(--surface);
		color: var(--text-primary);
		box-shadow: var(--shadow-overlay);
		/* Прокрутка внутри ящика не должна прокручивать страницу под ним. */
		overscroll-behavior: contain;
	}

	.dp-drawer::backdrop {
		background: oklch(0 0 0 / 0.45);
	}

	.dp-drawer__inner {
		padding: var(--space-5) var(--space-4) var(--space-8);
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.dp-drawer__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.dp-drawer__list a {
		display: block;
		padding: var(--space-3);
		border-radius: var(--radius-sm);
		font-weight: 500;
		text-decoration: none;
		color: var(--text-primary);
	}

	.dp-drawer__list a:hover {
		background: var(--surface-sunken);
	}

	/* ================================================================== */
	/*  Поиск                                                             */
	/* ================================================================== */

	.dp-searchbar {
		display: flex;
		align-items: stretch;
		gap: 0;
		flex: 1 1 auto;
		min-width: 0;
		max-inline-size: 34rem;
		background: var(--surface);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-border);
	}

	/* Рамка загорается, когда фокус внутри — независимо от того, попал он
	   в поле ввода или в переключатель области. */
	.dp-searchbar:focus-within {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.dp-searchbar__field {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		border-start-start-radius: var(--radius-sm);
		border-end-start-radius: var(--radius-sm);
	}

	.dp-searchbar__field:focus-visible {
		outline: none;
	}

	/* Фильтр области стоит вплотную к строке: переключение сразу меняет и
	   выдачу, и набор доступных фасетов. */
	.dp-searchbar__scope {
		flex: none;
		border: 0;
		border-inline-start: 1px solid var(--separator);
		background: transparent;
		border-radius: 0;
		font-size: var(--text-small-size);
		color: var(--text-secondary);
		padding-inline: var(--space-3);
		max-inline-size: 9rem;
	}

	.dp-searchbar__submit {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		color: var(--text-secondary);
	}

	.dp-searchbar__submit:hover {
		color: var(--brand);
	}

	/* --- Оверлей мгновенного поиска ----------------------------------- */

	.dp-search-overlay {
		border: 0;
		padding: 0;
		inline-size: min(44rem, 94vw);
		max-inline-size: none;
		background: var(--surface-raised);
		color: var(--text-primary);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-overlay);
		overscroll-behavior: contain;
	}

	.dp-search-overlay::backdrop {
		background: oklch(0 0 0 / 0.4);
		backdrop-filter: blur(2px);
	}

	.dp-search-overlay__head {
		padding: var(--space-4);
		border-bottom: 1px solid var(--separator);
	}

	.dp-search-overlay__results {
		max-block-size: min(60vh, 32rem);
		overflow-y: auto;
		padding: var(--space-2);
	}

	.dp-search-result {
		display: flex;
		gap: var(--space-3);
		align-items: flex-start;
		padding: var(--space-3);
		border-radius: var(--radius-sm);
		text-decoration: none;
		color: inherit;
	}

	.dp-search-result:hover,
	.dp-search-result[aria-selected="true"] {
		background: var(--surface-sunken);
	}

	.dp-search-result__thumb {
		flex: none;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--radius-xs);
		object-fit: cover;
	}

	.dp-search-result__type {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-tertiary);
	}

	.dp-search-result__title {
		font-weight: 600;
		margin-block-start: 2px;
	}

	.dp-search-result__excerpt {
		font-size: var(--text-small-size);
		color: var(--text-secondary);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.dp-search-overlay__footer {
		padding: var(--space-3) var(--space-4);
		border-top: 1px solid var(--separator);
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.dp-kbd {
		display: inline-block;
		padding: 1px 5px;
		border-radius: 4px;
		background: var(--surface-sunken);
		box-shadow: var(--shadow-border);
		font-family: var(--font-mono);
		font-size: 0.75rem;
	}

	/* ================================================================== */
	/*  Карточка каталога                                                 */
	/* ================================================================== */

	.dp-grid {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	}

	.dp-card {
		container-type: inline-size;
		display: flex;
		flex-direction: column;
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		box-shadow: var(--shadow-border);
		overflow: hidden;
		position: relative;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-card {
			transition: box-shadow var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
		}

		.dp-card:hover {
			translate: 0 -3px;
		}
	}

	.dp-card:hover {
		box-shadow: var(--shadow-border-hover);
	}

	.dp-card--recommended {
		box-shadow: var(--shadow-border-hover);
	}

	.dp-card__flag {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		padding: 5px var(--space-4);
		background: var(--recommended);
		color: var(--text-on-recommended);
		font-size: var(--text-caption-size);
		font-weight: 600;
	}

	.dp-card__flag svg {
		fill: currentColor;
	}

	/* Рендер на мягком градиенте — как в макете каталога. */
	.dp-card__media {
		aspect-ratio: 4 / 3;
		background: linear-gradient(135deg, #ffffff, #eef3fb);
		position: relative;
		display: grid;
		place-items: center;
	}

	.dp-card__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
		mix-blend-mode: multiply;
	}

	.dp-card__media-icon {
		color: var(--brand);
		opacity: 0.4;
	}

	.dp-card__brand {
		position: absolute;
		inset-block-start: var(--space-3);
		inset-inline-start: var(--space-3);
		z-index: 1;
		padding: 3px 0.6rem;
		border-radius: var(--radius-sm);
		background: var(--surface-glass);
		backdrop-filter: blur(8px);
		font-size: var(--text-caption-size);
		font-weight: 600;
		color: var(--text-primary);
	}

	/* Сердечко избранного в углу рендера. Пустое — контур, отмеченное —
	   заливка бренд-цветом. */
	.dp-card__fav {
		position: absolute;
		inset-block-start: var(--space-3);
		inset-inline-end: var(--space-3);
		z-index: 1;
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--surface-glass);
		backdrop-filter: blur(8px);
		color: var(--text-secondary);
		cursor: pointer;
		box-shadow: 0 1px 3px rgba(0, 45, 91, 0.12);
		touch-action: manipulation;
	}

	.dp-card__fav:hover {
		color: var(--brand);
	}

	.dp-card__fav.is-active {
		color: var(--brand);
	}

	.dp-card__fav.is-active svg {
		fill: currentColor;
	}

	.dp-card__fav:focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-card__fav {
			transition: color 150ms ease, scale 150ms ease;
		}

		.dp-card__fav:active {
			scale: 0.9;
		}
	}

	.dp-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-4) var(--space-2);
		flex: 1;
	}

	.dp-card__title {
		font-size: 1.125rem;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: -0.01em;
	}

	.dp-card__title a {
		color: inherit;
		text-decoration: none;
	}

	.dp-card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	/* Рейтинг: звезда, число, максимум и количество отзывов. */
	.dp-card__rating {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-small-size);
	}

	.dp-card__rating .dp-rating__stars {
		color: var(--warning);
	}

	.dp-card__rating-value {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.dp-card__rating-max {
		color: var(--text-tertiary);
	}

	.dp-card__reviews {
		margin-inline-start: var(--space-1);
		color: var(--text-tertiary);
		font-size: var(--text-caption-size);
	}

	/* Две плитки характеристик через тонкую линию. */
	.dp-card__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		margin: 0;
		padding-block: var(--space-3);
		border-block: 1px solid var(--separator);
	}

	.dp-card__stats dt {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-card__stats dd {
		margin: 2px 0 0;
		font-weight: 600;
		font-size: var(--text-small-size);
	}

	.dp-card__foot {
		margin-block-start: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	.dp-card__stock {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: var(--text-caption-size);
		font-weight: 600;
		color: var(--positive);
	}

	.dp-card__stock--negative {
		color: var(--negative);
	}

	.dp-card__stock--warning {
		color: var(--warning);
	}

	.dp-card__price {
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.dp-card__price small {
		font-size: var(--text-caption-size);
		font-weight: 400;
		color: var(--text-tertiary);
	}

	.dp-card__actions {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-3) var(--space-4) var(--space-4);
	}

	/* ================================================================== */
	/*  Метки статуса                                                     */
	/* ================================================================== */

	.dp-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		padding: 3px 0.5rem;
		border-radius: var(--radius-pill);
		font-size: var(--text-caption-size);
		font-weight: 600;
		line-height: 1.35;
		white-space: nowrap;
	}

	/* У цвета всегда есть дублирующий сигнал — значок или слово. Один только
	   цвет не читается при дальтонизме и в принудительных цветах. */
	.dp-badge--positive {
		background: var(--positive-soft);
		color: var(--positive);
	}

	.dp-badge--warning {
		background: var(--warning-soft);
		color: var(--warning);
	}

	.dp-badge--negative {
		background: var(--negative-soft);
		color: var(--negative);
	}

	.dp-badge--neutral {
		background: var(--surface-sunken);
		color: var(--text-secondary);
	}

	.dp-availability {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-small-size);
		color: var(--positive);
		font-weight: 600;
	}

	/* ================================================================== */
	/*  Фильтр                                                            */
	/* ================================================================== */

	.dp-filter {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.dp-filter__group {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-filter__legend {
		font-size: var(--text-caption-size);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-tertiary);
	}

	.dp-filter__hint {
		font-size: var(--text-caption-size);
		color: var(--text-secondary);
		line-height: 1.45;
	}

	.dp-check {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		/* Метка и сам чекбокс — одна мишень: мёртвой зоны между ними нет. */
		padding: 0.4rem var(--space-2);
		min-height: 2.5rem;
		border-radius: var(--radius-xs);
		cursor: pointer;
		text-decoration: none;
		color: var(--text-primary);
		font-size: var(--text-small-size);
	}

	.dp-check:hover {
		background: var(--surface-sunken);
	}

	.dp-check__box {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		border-radius: 5px;
		border: 1.5px solid var(--separator-strong);
		background: var(--surface);
		position: relative;
	}

	/* Видимый квадрат остаётся маленьким, а мишень расширяется псевдо-
	   элементом до 44px. */
	.dp-check__box::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		transform: translate(-50%, -50%);
	}

	.dp-check[aria-pressed="true"] .dp-check__box,
	.dp-check.is-active .dp-check__box {
		background: var(--brand);
		border-color: var(--brand);
		color: var(--text-on-brand);
	}

	.dp-check__count {
		margin-inline-start: auto;
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
		font-variant-numeric: tabular-nums;
	}

	.dp-check.is-empty {
		opacity: 0.45;
	}

	.dp-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.dp-chip {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: 0.375rem 0.75rem;
		min-height: 2.25rem;
		border-radius: var(--radius-pill);
		background: var(--surface-sunken);
		font-size: var(--text-small-size);
		text-decoration: none;
		color: var(--text-primary);
	}

	.dp-chip--active {
		background: var(--brand);
		color: var(--text-on-brand);
	}

	/* ================================================================== */
	/*  Форма захвата                                                     */
	/* ================================================================== */

	.dp-lead {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		box-shadow: var(--shadow-border);
	}

	.dp-lead--sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}

	.dp-lead__head {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-lead__headline {
		font-size: 1.125rem;
		font-weight: 640;
		line-height: 1.3;
		text-wrap: balance;
	}

	.dp-lead__subtext {
		font-size: var(--text-small-size);
		line-height: 1.5;
		color: var(--text-secondary);
		text-wrap: pretty;
	}

	.dp-field {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-field__label {
		font-size: var(--text-caption-size);
		font-weight: 600;
		color: var(--text-secondary);
	}

	.dp-field__hint {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-consent {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
		font-size: var(--text-caption-size);
		line-height: 1.45;
		color: var(--text-secondary);
		cursor: pointer;
	}

	.dp-consent__box {
		flex: none;
		inline-size: 1.125rem;
		block-size: 1.125rem;
		margin-block-start: 1px;
		accent-color: var(--brand);
	}

	.dp-lead__note {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
		text-align: center;
	}

	.dp-lead__status:empty {
		display: none;
	}

	.dp-lead__status {
		font-size: var(--text-small-size);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-xs);
	}

	.dp-lead__status[data-state="success"] {
		background: var(--positive-soft);
		color: var(--positive);
	}

	.dp-lead__status[data-state="error"] {
		background: var(--negative-soft);
		color: var(--negative);
	}

	/* Ловушка для ботов. display:none часть скриптов пропускает,
	   поэтому поле уводится за пределы экрана. */
	.dp-lead__trap {
		position: absolute;
		inset-inline-start: -9999px;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
	}

	/* --- Мобильная панель и шторка ------------------------------------ */

	.dp-lead-bar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 45;
		padding: var(--space-3) var(--layout-margin);
		/* Учитываем зону жестов и вырез. */
		padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
		background: color-mix(in oklab, var(--surface) 94%, transparent);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--separator);
		translate: 0 100%;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-lead-bar {
			transition: translate var(--duration-slow) var(--ease-out);
		}
	}

	.dp-lead-bar.is-visible {
		translate: 0 0;
	}

	@media (min-width: 64rem) {
		.dp-lead-bar {
			display: none;
		}
	}

	.dp-lead-bar__inner {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		max-inline-size: var(--layout-max);
		margin-inline: auto;
	}

	.dp-lead-bar__text {
		font-size: var(--text-small-size);
		font-weight: 600;
		line-height: 1.3;
		min-width: 0;
	}

	.dp-lead-bar__button {
		flex: none;
	}

	.dp-lead-sheet {
		border: 0;
		padding: 0;
		inline-size: min(30rem, 100vw);
		max-inline-size: none;
		margin-block-end: 0;
		margin-inline: auto;
		background: var(--surface);
		color: var(--text-primary);
		border-start-start-radius: var(--radius-xl);
		border-start-end-radius: var(--radius-xl);
		box-shadow: var(--shadow-overlay);
		overscroll-behavior: contain;
	}

	.dp-lead-sheet::backdrop {
		background: oklch(0 0 0 / 0.45);
	}

	.dp-lead-sheet__inner {
		position: relative;
		padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
	}

	.dp-lead-sheet__grip {
		inline-size: 2.5rem;
		block-size: 4px;
		border-radius: var(--radius-pill);
		background: var(--separator-strong);
		margin: 0 auto var(--space-4);
	}

	.dp-lead-sheet__close {
		position: absolute;
		inset-inline-end: var(--space-3);
		top: var(--space-3);
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: var(--radius-sm);
		color: var(--text-secondary);
	}

	.dp-lead-sheet .dp-lead {
		box-shadow: none;
		padding: 0;
		background: transparent;
	}

	/* ================================================================== */
	/*  Блок доверия                                                      */
	/* ================================================================== */

	/* --- Аватар ------------------------------------------------------- */

	.dp-avatar {
		flex: none;
		display: inline-grid;
		place-items: center;
		inline-size: var(--dp-avatar-size, 3.5rem);
		block-size: var(--dp-avatar-size, 3.5rem);
		border-radius: var(--radius-pill);
		overflow: hidden;
		background: var(--surface-container);
	}

	.dp-avatar__img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		outline: none;
	}

	.dp-avatar--initials {
		background: var(--dp-avatar-bg, var(--brand));
		color: #fff;
		font-weight: 700;
		font-size: calc(var(--dp-avatar-size, 3.5rem) * 0.38);
		letter-spacing: 0.02em;
	}

	/* --- Блок доверия ------------------------------------------------- */

	.dp-trust {
		display: flex;
		gap: var(--space-4);
		align-items: center;
		padding: var(--space-4) var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-border);
	}

	.dp-trust__avatar {
		flex: none;
		inline-size: 3.5rem;
		block-size: 3.5rem;
		border-radius: var(--radius-pill);
		object-fit: cover;
	}

	.dp-trust__label {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: var(--text-caption-size);
		font-weight: 600;
		color: var(--positive);
	}

	.dp-trust__label svg {
		color: var(--positive);
	}

	.dp-trust__name {
		font-weight: 620;
		margin-block-start: 2px;
	}

	.dp-trust__role,
	.dp-trust__date {
		font-size: var(--text-small-size);
		color: var(--text-secondary);
	}

	.dp-sources {
		margin-block-start: var(--space-5);
		padding: var(--space-4);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-border);
	}

	.dp-sources ol {
		margin: var(--space-3) 0 0;
		padding-inline-start: var(--space-5);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-size: var(--text-small-size);
		color: var(--text-secondary);
	}

	/* ================================================================== */
	/*  Рейтинг                                                           */
	/* ================================================================== */

	.dp-rating {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-variant-numeric: tabular-nums;
	}

	.dp-rating__value {
		font-size: 1.25rem;
		font-weight: 650;
	}

	.dp-rating__stars {
		display: inline-flex;
		gap: 2px;
		color: var(--warning);
	}

	.dp-axes {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-axis {
		display: grid;
		grid-template-columns: minmax(8rem, 12rem) 1fr auto;
		align-items: center;
		gap: var(--space-3);
		font-size: var(--text-small-size);
	}

	.dp-axis__track {
		block-size: 6px;
		border-radius: var(--radius-pill);
		background: var(--surface-sunken);
		overflow: hidden;
	}

	.dp-axis__fill {
		block-size: 100%;
		border-radius: var(--radius-pill);
		background: var(--brand);
	}

	.dp-axis__value {
		font-variant-numeric: tabular-nums;
		font-weight: 600;
	}

	@container (max-width: 26rem) {
		.dp-axis {
			grid-template-columns: 1fr auto;
		}

		.dp-axis__track {
			grid-column: 1 / -1;
		}
	}

	/* ================================================================== */
	/*  Контент статьи                                                    */
	/* ================================================================== */

	.dp-prose {
		max-inline-size: var(--measure);
	}

	.dp-prose > * + * {
		margin-block-start: var(--space-4);
	}

	.dp-prose h2 {
		margin-block-start: var(--space-7);
	}

	.dp-prose h3 {
		margin-block-start: var(--space-5);
	}

	.dp-prose p {
		text-wrap: pretty;
	}

	.dp-prose ul,
	.dp-prose ol {
		padding-inline-start: var(--space-5);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-lede {
		font-size: 1.125rem;
		line-height: 1.55;
		color: var(--text-secondary);
		text-wrap: pretty;
	}

	.dp-prose table {
		display: block;
		/* Широкая таблица прокручивается внутри себя, а не растягивает
		   страницу по горизонтали. */
		overflow-x: auto;
		white-space: nowrap;
		font-size: var(--text-small-size);
	}

	@media (min-width: 48rem) {
		.dp-prose table {
			display: table;
			white-space: normal;
		}
	}

	.dp-prose th,
	.dp-prose td {
		padding: var(--space-3);
		text-align: start;
		border-bottom: 1px solid var(--separator);
		vertical-align: top;
	}

	.dp-prose th {
		font-weight: 600;
		color: var(--text-secondary);
		font-size: var(--text-caption-size);
	}

	.dp-prose td:has(+ td),
	.dp-prose td:last-child:not(:first-child) {
		font-variant-numeric: tabular-nums;
	}

	.dp-inline-link {
		font-weight: 500;
	}

	.dp-callout {
		padding: var(--space-4);
		border-radius: var(--radius-md);
		border-inline-start: 3px solid var(--brand);
		background: var(--surface-sunken);
		font-size: var(--text-small-size);
		line-height: 1.55;
	}

	.dp-callout--warning {
		border-inline-start-color: var(--warning);
		background: var(--warning-soft);
	}

	/* ================================================================== */
	/*  Медиа                                                             */
	/* ================================================================== */

	.dp-media {
		margin-block-start: var(--space-7);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-media__title {
		font-size: var(--text-heading-size);
	}

	.dp-media__description {
		font-size: var(--text-small-size);
		color: var(--text-secondary);
	}

	/* ================================================================== */
	/*  Хлебные крошки                                                    */
	/* ================================================================== */

	.dp-crumbs {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-crumbs ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		list-style: none;
		padding: 0;
	}

	.dp-crumbs a {
		color: var(--text-secondary);
		text-decoration: none;
	}

	.dp-crumbs a:hover {
		color: var(--brand);
	}

	.dp-crumbs li + li::before {
		content: "/";
		margin-inline-end: var(--space-2);
		color: var(--separator-strong);
	}

	/* ================================================================== */
	/*  Комментарии                                                       */
	/* ================================================================== */

	.dp-comments {
		margin-block-start: var(--space-8);
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.dp-comment {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-4);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-border);
	}

	.dp-comment__head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.dp-comment__author {
		font-weight: 600;
	}

	.dp-comment__date {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-comment__body {
		font-size: var(--text-small-size);
		line-height: 1.6;
		text-wrap: pretty;
	}

	.dp-comment-note {
		font-size: var(--text-small-size);
		color: var(--text-secondary);
	}

	.dp-comment .children {
		margin-block-start: var(--space-4);
		margin-inline-start: var(--space-5);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		list-style: none;
		padding: 0;
	}

	/* ================================================================== */
	/*  Подвал                                                            */
	/* ================================================================== */

	.dp-footer {
		margin-block-start: var(--section-gap);
		padding-block: var(--space-8);
		background: var(--surface);
		border-top: 1px solid var(--separator);
		font-size: var(--text-small-size);
	}

	.dp-footer__grid {
		display: grid;
		gap: var(--space-6);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	}

	.dp-footer__brand {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	@media (min-width: 64rem) {
		/* Брендовая колонка шире остальных. */
		.dp-footer__brand {
			grid-column: span 2;
			max-inline-size: 22rem;
		}
	}

	.dp-footer__logo {
		text-decoration: none;
	}

	.dp-footer__about {
		color: var(--text-secondary);
		line-height: 1.55;
		font-size: var(--text-caption-size);
	}

	.dp-footer__title {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-tertiary);
		margin-block-end: var(--space-3);
	}

	.dp-footer a {
		color: var(--text-secondary);
		text-decoration: none;
	}

	.dp-footer a:hover {
		color: var(--brand);
	}

	.dp-footer__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-footer__legal {
		margin-block-start: var(--space-6);
		padding-block-start: var(--space-5);
		border-top: 1px solid var(--separator);
		color: var(--text-tertiary);
		font-size: var(--text-caption-size);
		line-height: 1.55;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	/* Ссылка «Настройки cookie» — кнопка, стилизованная под текстовую ссылку. */
	.dp-cookie-link {
		border: 0;
		background: none;
		padding: 0;
		margin-inline-start: var(--space-2);
		color: inherit;
		font: inherit;
		text-decoration: underline;
		cursor: pointer;
	}

	.dp-cookie-link:hover {
		color: var(--brand);
	}

	.dp-cookie-link:focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	/* ================================================================== */
	/*  Нижняя навигация (мобайл)                                         */
	/* ================================================================== */

	.dp-bottomnav {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 43;
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		gap: var(--space-1);
		padding: var(--space-2) var(--space-2);
		padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
		background: var(--surface-glass);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-top: 1px solid var(--separator);
		box-shadow: 0 -4px 20px rgba(0, 45, 91, 0.05);
	}

	@media (min-width: 64rem) {
		.dp-bottomnav {
			display: none;
		}
	}

	.dp-bottomnav__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: var(--space-1);
		min-block-size: 3rem;
		border: 0;
		background: none;
		color: var(--text-tertiary);
		text-decoration: none;
		font-size: 0.6875rem;
		font-weight: 600;
		cursor: pointer;
		border-radius: var(--radius-md);
	}

	.dp-bottomnav__item:hover {
		color: var(--brand);
	}

	.dp-bottomnav__item--primary {
		color: var(--brand);
	}

	/* Контент не должен прятаться за нижней панелью. */
	@media (max-width: 63.999rem) {
		body {
			padding-bottom: 4.25rem;
		}
	}

	/* Иконка с бейджем-счётчиком избранного. */
	.dp-bottomnav__ic {
		position: relative;
		display: inline-grid;
		place-items: center;
	}

	.dp-fav-count {
		position: absolute;
		inset-block-start: -6px;
		inset-inline-start: 60%;
		min-inline-size: 1rem;
		block-size: 1rem;
		padding-inline: 3px;
		display: grid;
		place-items: center;
		border-radius: 9999px;
		background: var(--accent, #00a3ff);
		color: #fff;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 1;
	}

	/* ================================================================== */
	/*  Панель избранного                                                 */
	/* ================================================================== */

	.dp-favpanel {
		position: fixed;
		inset: 0;
		z-index: 70;
	}

	.dp-favpanel[hidden] {
		display: none;
	}

	.dp-favpanel-open {
		overflow: hidden;
	}

	.dp-favpanel__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 20, 45, 0.4);
	}

	.dp-favpanel__dialog {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: min(24rem, 92vw);
		display: flex;
		flex-direction: column;
		background: var(--surface-raised);
		box-shadow: -8px 0 40px rgba(0, 45, 91, 0.18);
		padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-favpanel__dialog {
			animation: dp-favpanel-in 250ms cubic-bezier(0.2, 0, 0, 1) both;
		}

		@keyframes dp-favpanel-in {
			from {
				transform: translateX(100%);
			}
		}
	}

	.dp-favpanel__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		margin-block-end: var(--space-4);
	}

	.dp-favpanel__title {
		font-size: 1.125rem;
		font-weight: 640;
	}

	.dp-favpanel__close {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 0;
		border-radius: 50%;
		background: var(--surface-sunken);
		color: var(--text-secondary);
		cursor: pointer;
	}

	.dp-favpanel__close:focus-visible,
	.dp-favpanel__remove:focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.dp-favpanel__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.dp-favpanel__item {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-3);
		border-radius: var(--radius-md);
		background: var(--surface-sunken);
	}

	.dp-favpanel__link {
		flex: 1 1 auto;
		min-inline-size: 0;
		color: var(--text-primary);
		text-decoration: none;
		font-weight: 600;
	}

	.dp-favpanel__link:hover {
		color: var(--brand);
	}

	.dp-favpanel__remove {
		flex: none;
		inline-size: 2rem;
		block-size: 2rem;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--text-tertiary);
		font-size: 1.35rem;
		line-height: 1;
		cursor: pointer;
	}

	.dp-favpanel__remove:hover {
		background: var(--surface-raised);
		color: var(--brand);
	}

	.dp-favpanel__empty {
		color: var(--text-secondary);
		font-size: 0.9375rem;
		padding-block: var(--space-4);
	}

	/* ================================================================== */
	/*  Пустые состояния                                                  */
	/* ================================================================== */

	.dp-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-8) var(--space-4);
		text-align: center;
	}

	.dp-empty__title {
		font-size: 1.125rem;
		font-weight: 620;
	}

	.dp-empty__text {
		color: var(--text-secondary);
		max-inline-size: var(--measure-narrow);
	}

	/* ================================================================== */
	/*  Изображения                                                       */
	/* ================================================================== */

	/* Обводка внутренней тенью, а не бордером: бордер добавляет пиксели к
	   размеру и сдвигает соседей. */
	.dp-image {
		display: block;
		max-inline-size: 100%;
		block-size: auto;
		border-radius: inherit;
		box-shadow: inset 0 0 0 1px var(--image-outline);
	}

	.dp-figure {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin: 0;
	}

	.dp-figure figcaption {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
		line-height: 1.45;
	}

	/* ================================================================== */
	/*  Вопросы и ответы                                                  */
	/* ================================================================== */

	.dp-faq {
		margin-block-start: var(--space-7);
	}

	.dp-faq__list {
		margin-block-start: var(--space-4);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-faq__item {
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-border);
		background: var(--surface-raised);
	}

	.dp-faq__question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		/* Мишень во всю ширину строки и высотой от 44px. */
		padding: var(--space-4);
		min-height: 2.75rem;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		list-style: none;
	}

	.dp-faq__question::-webkit-details-marker {
		display: none;
	}

	/* Значок рисуем сами: встроенный треугольник в разных браузерах разного
	   размера и цвета. */
	.dp-faq__question::after {
		content: "";
		flex: none;
		inline-size: 0.6rem;
		block-size: 0.6rem;
		border-inline-end: 2px solid var(--text-tertiary);
		border-block-end: 2px solid var(--text-tertiary);
		rotate: 45deg;
		translate: 0 -2px;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-faq__question::after {
			transition: rotate var(--duration-fast) var(--ease-out);
		}
	}

	.dp-faq__item[open] .dp-faq__question::after {
		rotate: 225deg;
		translate: 0 2px;
	}

	.dp-faq__answer {
		padding: 0 var(--space-4) var(--space-4);
		font-size: var(--text-small-size);
		line-height: 1.6;
		color: var(--text-secondary);
		text-wrap: pretty;
	}

	.dp-faq__answer > * + * {
		margin-block-start: var(--space-3);
	}

	/* ================================================================== */
	/*  Характеристики и рейтинг                                          */
	/* ================================================================== */

	.dp-specs,
	.dp-rating-block {
		margin-block-start: var(--space-7);
		container-type: inline-size;
	}

	.dp-specs .dp-compare,
	.dp-specs .dp-compare th {
		min-inline-size: 0;
	}

	.dp-specs th {
		inline-size: 40%;
		font-weight: 500;
		color: var(--text-secondary);
	}

	.dp-specs td {
		font-variant-numeric: tabular-nums;
	}

	.dp-specs td small {
		display: block;
		margin-block-start: 2px;
	}

	.dp-rating-block .dp-rating {
		margin-block: var(--space-3) var(--space-5);
	}

	.dp-sources summary {
		cursor: pointer;
		font-weight: 600;
		font-size: var(--text-small-size);
		min-height: 2.75rem;
		display: flex;
		align-items: center;
	}

	.dp-sources .dp-trust__label {
		margin-block-start: var(--space-4);
	}

	/* ================================================================== */
	/*  Боковая колонка                                                   */
	/* ================================================================== */

	.dp-sidebar {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	/* Форма в сайдбаре липкая только там, где для этого есть высота экрана:
	   на коротком окне она перекрывала бы собой весь столбец. */
	@media (max-width: 63.999rem) {
		.dp-lead--sidebar {
			position: static;
		}
	}

	/* ================================================================== */
	/*  Выдача поиска                                                     */
	/* ================================================================== */

	.dp-search-results {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		max-inline-size: var(--measure);
	}

	.dp-search-results .dp-search-result {
		box-shadow: var(--shadow-border);
	}

	/* ================================================================== */
	/*  Панель сравнения                                                  */
	/* ================================================================== */

	.dp-compare-bar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 44;
		padding-block: var(--space-3);
		padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
		background: var(--surface-inverse);
		color: var(--text-on-inverse);
	}

	.dp-compare-bar__inner {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		flex-wrap: wrap;
	}

	.dp-compare-bar__count {
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.dp-compare-bar__notice:empty {
		display: none;
	}

	.dp-compare-bar__notice {
		font-size: var(--text-caption-size);
		color: var(--warning);
	}

	.dp-compare-bar__actions {
		margin-inline-start: auto;
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.dp-compare-bar .dp-button--quiet {
		color: var(--text-on-inverse);
	}

	/* Две плавающие панели не должны наезжать друг на друга. */
	.dp-compare-bar:not([hidden]) ~ .dp-lead-bar.is-visible {
		bottom: 4.5rem;
	}

	.dp-compare__thumb {
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--radius-xs);
		object-fit: cover;
		margin-block-end: var(--space-2);
	}

	/* ================================================================== */
	/*  Мелочи, дополняющие блоки выше                                    */
	/* ================================================================== */

	.dp-comments__list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-comment-form {
		margin-block-start: var(--space-5);
	}

	.dp-consent__text {
		line-height: 1.45;
	}

	.dp-field--consent {
		margin-block-start: calc(var(--space-2) * -1);
	}

	/* Вердикт — якорь для speakable-разметки, поэтому у него есть отдельное
	   имя, даже если визуально он совпадает с лидом. */
	.dp-verdict {
		max-inline-size: var(--measure);
	}

	.dp-video__chapter-label {
		min-width: 0;
	}

	/* ================================================================== */
	/*  Подборщики                                                        */
	/* ================================================================== */

	.dp-tool {
		margin-block: var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.dp-tool__form {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	/* Каждый шаг — отдельная карточка. Сплошной список радиокнопок читается
	   как анкета, а пронумерованные шаги — как последовательность решений,
	   и по ним видно, сколько осталось. */
	.dp-tool__group {
		border: 0;
		margin: 0;
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface-raised);
		box-shadow: var(--shadow-border);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.dp-tool__legend {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: 0;
		font-size: 1.0625rem;
		font-weight: 620;
		line-height: 1.35;
	}

	.dp-tool__step {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		border-radius: var(--radius-pill);
		background: var(--surface-brand-soft);
		color: var(--brand);
		font-size: var(--text-caption-size);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	.dp-tool__question {
		min-width: 0;
		text-wrap: balance;
	}

	.dp-tool__hint {
		font-size: var(--text-small-size);
		line-height: 1.5;
		color: var(--text-secondary);
		max-inline-size: var(--measure-narrow);
	}

	.dp-tool__options {
		display: grid;
		gap: var(--space-2);
	}

	@media (min-width: 30rem) {
		.dp-tool__options {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		}
	}

	/* Мишень — вся плашка целиком, а не кружок радиокнопки: подборщик чаще
	   открывают с телефона. */
	.dp-tool__option {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		min-block-size: 3rem;
		border-radius: var(--radius-sm);
		background: var(--surface);
		box-shadow: var(--shadow-border);
		cursor: pointer;
		font-size: var(--text-small-size);
		line-height: 1.4;
		touch-action: manipulation;
	}

	@media (prefers-reduced-motion: no-preference) {
		.dp-tool__option {
			transition: box-shadow var(--duration-fast) var(--ease-out),
				background-color var(--duration-fast) var(--ease-out);
		}
	}

	.dp-tool__option:hover {
		background: var(--surface-sunken);
	}

	/* Выбранный вариант отмечен и кольцом, и самой радиокнопкой: одним
	   цветом состояние не читается. */
	.dp-tool__option:has(:checked) {
		box-shadow: 0 0 0 2px var(--brand);
		background: var(--surface-brand-soft);
	}

	.dp-tool__option:has(:focus-visible) {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.dp-tool__radio {
		flex: none;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		margin: 0;
		accent-color: var(--brand);
	}

	.dp-tool__option-label {
		min-width: 0;
	}

	.dp-tool__submit {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		flex-wrap: wrap;
	}

	.dp-tool__duration {
		font-size: var(--text-caption-size);
		color: var(--text-tertiary);
	}

	.dp-tool__result {
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		background: var(--surface-brand-soft);
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		scroll-margin-top: calc(var(--header-height) + var(--space-4));
	}

	.dp-tool__result:focus-visible {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	.dp-tool__result-label {
		font-size: var(--text-caption-size);
		text-transform: uppercase;
		letter-spacing: var(--text-label-tracking);
		color: var(--text-secondary);
	}

	.dp-tool__verdict {
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.dp-tool__verdict-title {
		font-size: var(--text-title-size);
		font-weight: 650;
		line-height: 1.2;
		letter-spacing: var(--text-title-tracking);
	}

	.dp-tool__price {
		font-size: var(--text-small-size);
		font-weight: 600;
		color: var(--text-secondary);
		font-variant-numeric: tabular-nums;
	}

	.dp-tool__text {
		line-height: 1.6;
		text-wrap: pretty;
		max-inline-size: var(--measure);
	}

	.dp-tool__note {
		font-size: var(--text-small-size);
		line-height: 1.55;
		color: var(--text-secondary);
		text-wrap: pretty;
		max-inline-size: var(--measure);
	}

	.dp-tool__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-2);
	}

	/* Врезка со ссылкой на подборщик внутри статьи. */
	.dp-tool-teaser {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-tool-teaser p {
		margin: 0;
	}

	/* ================================================================== */
	/*  Оценка в форме отзыва                                             */
	/* ================================================================== */

	.dp-stars {
		border: 0;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.dp-stars__options {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	/* Под звёздами настоящие радиокнопки: группа работает с клавиатуры и в
	   программе чтения с экрана без единой строки скрипта. */
	.dp-stars__option {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.75rem;
		padding-inline: var(--space-3);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-border);
		background: var(--surface);
		cursor: pointer;
		touch-action: manipulation;
	}

	.dp-stars__input {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		opacity: 0;
	}

	.dp-stars__mark {
		font-size: 1rem;
		letter-spacing: 0.05em;
		color: var(--text-tertiary);
		white-space: nowrap;
	}

	.dp-stars__option:hover .dp-stars__mark {
		color: var(--warning);
	}

	.dp-stars__option:has( :checked ) {
		box-shadow: 0 0 0 2px var(--brand);
		background: var(--surface-brand-soft);
	}

	.dp-stars__option:has( :checked ) .dp-stars__mark {
		color: var(--warning);
	}

	/* Кольцо фокуса рисуем на плашке: сама радиокнопка скрыта. */
	.dp-stars__option:has( :focus-visible ) {
		outline: 2px solid var(--focus-ring);
		outline-offset: 2px;
	}

	/* ================================================================== */
	/*  Полировка вертикального ритма (воздух между блоками)              */
	/* ================================================================== */

	/* Крупные блоки на странице системы и статьи разделяются щедрым
	   промежутком — из макета: section-gap. Раньше он был тесным и неровным. */
	.dp-system {
		gap: var(--space-8);
	}

	.dp-system > * {
		scroll-margin-top: calc(var(--header-height) + var(--space-4));
	}

	.dp-shell {
		padding-block: var(--space-7) var(--space-9);
	}

	/* Заголовок раздела/статьи получает воздух сверху и снизу. */
	.dp-page-head {
		gap: var(--space-4);
		padding-block: var(--space-7) var(--space-2);
	}

	/* Характеристики, рейтинг, сравнение — каждый как самостоятельная
	   карточка с внутренними полями, чтобы не сливались друг с другом. */
	.dp-specs,
	.dp-rating-block {
		padding: var(--space-6);
		border-radius: var(--radius-lg);
		background: var(--surface);
		box-shadow: var(--shadow-border);
	}

	.dp-specs {
		gap: var(--space-4);
	}

	/* Таблица характеристик: разреженные строки, ровные колонки. */
	.dp-specs__table th,
	.dp-specs__table td {
		padding: var(--space-3) var(--space-2);
	}

	/* Заголовки внутри длинного текста — больше воздуха перед ними. */
	.dp-prose h2 {
		margin-block-start: var(--space-8);
		padding-block-start: var(--space-2);
	}

	.dp-prose h3 {
		margin-block-start: var(--space-6);
	}

	/* Блок отзывов явно отделён: фон, линия и заголовок с отбивкой. */
	.dp-comments {
		margin-block-start: var(--section-gap);
		padding-block-start: var(--space-7);
		border-top: 1px solid var(--separator);
	}

	/* Нижние плавающие панели встают над мобильной навигацией, а не на неё. */
	@media (max-width: 63.999rem) {
		.dp-lead-bar,
		.dp-compare-bar {
			bottom: 4.25rem;
			padding-bottom: var(--space-3);
		}
	}
}