/* Components of the mosdisplay.ru design system. Markup — only inc/ds/components.php.
   Values — only var(--mds-*) from md-tokens.css (declared on .md-ds). No hex, no literal sizes,
   radii, shadows or z-index, no !important, no capsules (owner's decision A3). No motion here at all:
   every transition and animation lives in md-motion.css (part 3, rule DS-M1a), on top of the states below.
   @media uses the token numbers literally: 768px = breakpoint.md, 1100px = breakpoint.lg.
   Checked by tools/design-lint.py in «запрет сразу» mode (DS-C4: --mds-color-action-* only as a fill,
   border, outline or accent; a rule with the action fill sets the label to on-action, fs.button, bold).
   The class .md-ds goes on <body> of a page cohort: every variable is declared on it.
   Not enqueued by any page yet. */

/* ---------- base inside the design-system scope ---------- */
.md-ds {
	font-family: var(--mds-font-family);
	/* One Inter file with the live site (InterVariable.woff2); the design system keeps the text cut of the
	   accepted 28.09 layouts: optical size stays at the font's default 14 instead of following the size. */
	font-optical-sizing: none;
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-regular);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-primary);
	background-color: var(--mds-color-surface-base);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
}

.mds-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mds-size-container);
	margin-inline: auto;
	padding-inline: var(--mds-space-4);
}

.mds-link {
	color: var(--mds-color-text-link);
	text-decoration: underline;
	text-decoration-thickness: var(--mds-size-border);
	text-underline-offset: var(--mds-space-1);
}

.mds-link:focus-visible,
.mds-button:focus-visible,
.mds-rating__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

/* ---------- button: primary / secondary / text, compact for the sticky bar ---------- */
.mds-action {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mds-space-2);
	margin: 0;
}

.mds-action__context {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mds-space-2);
	min-height: var(--mds-size-control);
	margin: 0;
	padding: 0 var(--mds-space-5);
	border: var(--mds-size-border) solid transparent;
	border-radius: var(--mds-radius-md);
	font-family: inherit;
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* White on the logo blue passes only as large text: the label is always fs.button + bold. */
.mds-button--primary {
	width: 100%;
	background-color: var(--mds-color-action-fill);
	color: var(--mds-color-text-on-action);
	font-size: var(--mds-fs-button);
	font-weight: var(--mds-fw-bold);
}

/* Theme rules like WoodMart's a:hover / a:visited (0,1,1) must not recolour a label ("blue on blue",
   DONT.md): inside .md-ds the label colour is pinned at (0,3,0). */
.md-ds .mds-button--primary:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-on-action);
}

.md-ds .mds-button--secondary:is(:link, :visited, :hover, :focus, :active),
.md-ds .mds-button--text:is(:link, :visited, :hover, :focus, :active),
.md-ds .mds-link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-link);
}

.mds-button--primary:active {
	background-color: var(--mds-color-action-pressed);
}

.mds-button--secondary {
	background-color: var(--mds-color-surface-base);
	border-color: var(--mds-color-border-control);
	color: var(--mds-color-text-link);
}

.mds-button--secondary:active {
	border-color: var(--mds-color-action-fill);
	background-color: var(--mds-color-surface-muted);
}

.mds-button--text {
	min-height: var(--mds-size-hit);
	padding: 0;
	background-color: transparent;
	color: var(--mds-color-text-link);
}

.mds-button--compact {
	width: auto;
	padding: 0 var(--mds-space-4);
	white-space: nowrap;
}

/* States from the plan: unavailable (aria-disabled / disabled) and «В списке» (done). */
.mds-button[aria-disabled="true"],
.mds-button:disabled {
	border-color: var(--mds-color-border-line);
	background-color: var(--mds-color-surface-muted);
	color: var(--mds-color-text-tertiary);
	cursor: not-allowed;
}

.md-ds .mds-button[aria-disabled="true"]:is(:link, :visited, :hover, :focus, :active),
.md-ds .mds-button:disabled:is(:hover, :focus, :active) {
	background-color: var(--mds-color-surface-muted);
	color: var(--mds-color-text-tertiary);
}

.mds-button--done {
	border-color: var(--mds-color-border-line);
	background-color: var(--mds-color-surface-muted);
	color: var(--mds-color-text-primary);
}

.md-ds .mds-button--done:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-action__form {
	display: contents;
}

@media (hover: hover) {
	.mds-button--primary:hover {
		background-color: var(--mds-color-action-hover);
	}

	.mds-button--secondary:hover {
		background-color: var(--mds-color-surface-muted);
	}

	/* Blue text stays text.link (A1); hover only thickens the underline. */
	.mds-link:hover {
		text-decoration-thickness: var(--mds-size-focus-ring);
	}

	.mds-button--text:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-focus-ring);
		text-underline-offset: var(--mds-space-1);
	}
}

@media (min-width: 768px) {
	.mds-action {
		align-items: flex-start;
	}

	.mds-button--primary {
		width: auto;
	}
}

/* ---------- price and its states ---------- */
.mds-price {
	font-weight: var(--mds-fw-semibold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--mds-color-text-primary);
}

.mds-price--ask,
.mds-price--after-inspection {
	font-weight: var(--mds-fw-regular);
	white-space: normal;
	color: var(--mds-color-text-secondary);
}

.mds-price--out-of-stock {
	font-weight: var(--mds-fw-regular);
	white-space: normal;
	color: var(--mds-color-text-tertiary);
}

/* ---------- first screen: text column + photo; two columns from breakpoint.lg ---------- */
.mds-first-screen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-6);
	padding-block: var(--mds-space-5) var(--mds-space-7);
}

.mds-first-screen__text {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-5);
	min-width: 0;
}

.mds-first-screen__title {
	margin: 0;
	font-size: var(--mds-fs-title-2);
	font-weight: var(--mds-fw-bold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
	text-wrap: balance;
}

.mds-first-screen__media {
	min-width: 0;
	max-width: var(--mds-size-measure);
}

@media (min-width: 768px) {
	.mds-first-screen__title {
		font-size: var(--mds-fs-title-1);
		line-height: var(--mds-lh-tight);
	}
}

@media (min-width: 1100px) {
	.mds-first-screen {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
		gap: var(--mds-space-7);
		padding-block: var(--mds-space-7) var(--mds-space-8);
	}
}

/* ---------- passport of the first screen ---------- */
.mds-passport {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: var(--mds-space-1) var(--mds-space-4);
	border-radius: var(--mds-radius-lg);
	background-color: var(--mds-color-surface-muted);
}

.mds-passport__row {
	display: contents;
}

.mds-passport__term {
	padding-top: var(--mds-space-3);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

.mds-passport__value {
	margin: 0;
	padding: var(--mds-space-1) 0 var(--mds-space-3);
	font-size: var(--mds-fs-body);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

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

.mds-passport__price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mds-space-4);
}

.mds-passport__price-label {
	min-width: 0;
}

.mds-passport__price .mds-price {
	font-size: var(--mds-fs-lead);
}

.mds-passport__row + .mds-passport__row > .mds-passport__term {
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-passport__note {
	margin: var(--mds-space-2) 0 0;
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

.mds-passport__why {
	white-space: nowrap;
}

@media (min-width: 768px) {
	.mds-passport {
		grid-template-columns: max-content minmax(0, 1fr);
		padding: var(--mds-space-1) var(--mds-space-5);
	}

	.mds-passport__term,
	.mds-passport__value {
		padding: var(--mds-space-3) 0;
	}

	.mds-passport__term {
		padding-right: var(--mds-space-6);
	}

	.mds-passport__row + .mds-passport__row > .mds-passport__value {
		border-top: var(--mds-size-border) solid var(--mds-color-border-line);
	}

	.mds-passport__term {
		font-size: var(--mds-fs-body);
		font-weight: var(--mds-fw-regular);
		line-height: var(--mds-lh-title);
		color: var(--mds-color-text-secondary);
	}
}

/* ---------- variant card: radio inside the label ---------- */
.mds-variant {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: var(--mds-space-3);
	padding: var(--mds-space-4);
	border: var(--mds-size-focus-ring) solid var(--mds-color-border-line);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
	cursor: pointer;
}

.mds-variant--selected,
.mds-variant:has(.mds-variant__input:checked) {
	border-color: var(--mds-color-action-fill);
}

.mds-variant:has(.mds-variant__input:focus-visible) {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-variant--unavailable {
	background-color: var(--mds-color-surface-muted);
	cursor: not-allowed;
}

.mds-variant__input {
	flex: none;
	width: var(--mds-space-5);
	height: var(--mds-space-5);
	margin: 0;
	accent-color: var(--mds-color-action-fill);
	cursor: inherit;
}

.mds-variant__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	min-width: 0;
	flex: 1;
}

.mds-variant__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mds-space-1) var(--mds-space-4);
	font-size: var(--mds-fs-lead);
	line-height: var(--mds-lh-title);
}

.mds-variant__title {
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-primary);
}

.mds-variant--unavailable .mds-variant__title {
	color: var(--mds-color-text-tertiary);
}

.mds-variant__text {
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-variant__facts {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	padding-top: var(--mds-space-2);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
}

.mds-variant__fact {
	display: block;
}

.mds-variant__term {
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-primary);
}

.mds-variant__detail {
	color: var(--mds-color-text-secondary);
}

/* ---------- chat answer line (A9) ---------- */
.mds-answer-line {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

/* ---------- visit line and «Как пройти» ---------- */
.mds-visit {
	color: var(--mds-color-text-primary);
}

.mds-visit .mds-link {
	white-space: nowrap;
}

.mds-visit--guide {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
	max-width: var(--mds-size-measure);
}

.mds-visit__title {
	margin: 0;
	font-size: var(--mds-fs-title-3);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-visit__facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
}

.mds-visit__row {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	padding: var(--mds-space-3) 0;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-visit__term {
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-tertiary);
}

.mds-visit__value {
	margin: 0;
	line-height: var(--mds-lh-title);
}

.mds-visit__route {
	margin: 0;
}

@media (min-width: 768px) {
	.mds-visit__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: var(--mds-space-5);
	}

	.mds-visit__term {
		font-size: var(--mds-fs-body);
		font-weight: var(--mds-fw-regular);
		color: var(--mds-color-text-secondary);
	}
}

/* ---------- photo with «что видно · модель · этап» ---------- */
.mds-photo {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
}

.mds-photo__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
}

.mds-photo__caption {
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

/* ---------- neutral model-code tag (A4 default) ---------- */
.mds-code-tag {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--mds-space-2);
	min-height: var(--mds-space-5);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-sm);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-tight);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-primary);
	white-space: nowrap;
}

/* ---------- warranty (A7) ---------- */
.mds-guarantee {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-5);
}

.mds-guarantee__promise {
	margin: 0;
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-guarantee__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-5);
}

.mds-guarantee__column {
	padding-top: var(--mds-space-3);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-guarantee__title {
	margin: 0 0 var(--mds-space-2);
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-guarantee__list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
	padding-left: var(--mds-space-5);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

@media (min-width: 1100px) {
	.mds-guarantee__columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mds-space-6);
	}
}

/* ---------- model hub rows «работа — цена — срок» ---------- */
.mds-work-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-work-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mds-space-1) var(--mds-space-4);
	padding: var(--mds-space-3) 0;
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	line-height: var(--mds-lh-title);
}

.mds-work-row__name {
	grid-column: 1 / -1;
	font-weight: var(--mds-fw-semibold);
}

.mds-work-row__link {
	text-decoration: none;
}

.mds-work-row__duration {
	justify-self: end;
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-secondary);
}

@media (hover: hover) {
	.mds-work-row__link:hover {
		text-decoration: underline;
	}
}

@media (min-width: 768px) {
	.mds-work-row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
		align-items: baseline;
	}

	.mds-work-row__price,
	.mds-work-row__duration {
		text-align: end;
	}

	.mds-work-row__name {
		grid-column: auto;
	}

	.mds-work-row__price {
		justify-self: end;
	}
}

/* ---------- rating: number, count, source, date ---------- */
.mds-rating {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-rating__value {
	font-weight: var(--mds-fw-bold);
	color: var(--mds-color-text-primary);
}

.mds-rating__link {
	box-sizing: border-box;
	display: inline-block;
	min-height: var(--mds-size-hit);
	padding-block: var(--mds-space-3);
	color: inherit;
	text-decoration: none;
}

.md-ds .mds-rating__link:is(:link, :visited, :hover, :focus, :active) {
	color: inherit;
}

@media (hover: hover) {
	.mds-rating__link:hover {
		text-decoration: underline;
	}
}

/* ---------- sticky bar: ≤ size.sticky-bar plus the safe area, room for the chat widget ---------- */
.mds-sticky-bar {
	position: sticky;
	bottom: 0;
	z-index: var(--mds-z-sticky);
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
	background-color: var(--mds-color-surface-base);
	box-shadow: var(--mds-shadow-sticky);
}

.mds-sticky-bar__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mds-space-3);
	max-width: var(--mds-size-container);
	max-height: var(--mds-size-sticky-bar);
	margin-inline: auto;
	/* The right end is kept free for the chat bubble — part 4 below (O4). */
	padding: var(--mds-space-2) var(--mds-space-4);
}

.mds-sticky-bar__summary {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
}

.mds-sticky-bar__service {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--mds-color-text-secondary);
}

.mds-sticky-bar__separator {
	display: none;
	color: var(--mds-color-text-tertiary);
}

@media (min-width: 768px) {
	.mds-sticky-bar__inner {
		padding-inline: var(--mds-space-6);
	}

	.mds-sticky-bar__summary {
		flex-direction: row;
		gap: var(--mds-space-2);
		font-size: var(--mds-fs-body);
	}

	.mds-sticky-bar__separator {
		display: inline;
	}
}

/* ---------- empty state ---------- */
.mds-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mds-space-3);
	padding: var(--mds-space-5);
	border-radius: var(--mds-radius-lg);
	background-color: var(--mds-color-surface-muted);
}

.mds-empty__text {
	margin: 0;
	max-width: var(--mds-size-measure);
	color: var(--mds-color-text-secondary);
}

/* =====================================================================================================
   Rework 28.09, part 1 of 3: data display (tables, key — value), forms, feedback.
   Tables on a phone never scroll sideways and never get their own scroll area (rule of the roast:
   no inner scroll areas on a phone; NN/g, Baymard): the price table becomes a list of rows, the
   comparison keeps two value columns with the feature as a full-width row header (as apple.com/compare),
   a wide article table turns each row into a card of «label — value» pairs. From 768 they are tables.
   ===================================================================================================== */

/* ---------- screen-reader-only text: «Ошибка:», kind of a notice, hidden column heads ---------- */
.mds-visually-hidden {
	position: absolute;
	width: var(--mds-size-border);
	height: var(--mds-size-border);
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- key — value list (GOV.UK «Summary list») ---------- */
.mds-kv {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--mds-size-measure);
	margin: 0;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-kv__row {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	padding: var(--mds-space-3) 0;
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-kv--dense .mds-kv__row {
	padding: var(--mds-space-2) 0;
}

.mds-kv__term {
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

.mds-kv__value {
	margin: 0;
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

@media (min-width: 768px) {
	.mds-kv__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: baseline;
		gap: var(--mds-space-5);
	}

	.mds-kv__term {
		font-size: var(--mds-fs-body);
		color: var(--mds-color-text-secondary);
	}

	.mds-kv--dense .mds-kv__term {
		font-size: var(--mds-fs-small);
	}

	.mds-kv--columns {
		max-width: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mds-space-6);
	}

	.mds-kv--columns .mds-kv__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ---------- price table of a service hub: model — price — duration, rows open to variants ----------
   Tabular figures only on prices (.mds-price) and durations: Inter's tnum also widens the hyphen in words. */
.mds-price-table {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-6);
	max-width: var(--mds-size-measure);
}

.mds-price-table__group {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	min-width: 0;
}

.mds-price-table__group[hidden] {
	display: none;
}

.mds-price-table__group-title {
	margin: 0;
	font-size: var(--mds-fs-title-3);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-price-table__head {
	display: none;
}

.mds-price-table__head-cell {
	min-width: 0;
}

.mds-price-table__rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-price-table__row {
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-price-table__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mds-space-5);
	align-items: center;
	gap: var(--mds-space-1) var(--mds-space-3);
	min-height: var(--mds-size-hit);
	padding: var(--mds-space-3) 0;
	line-height: var(--mds-lh-title);
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mds-price-table__summary::-webkit-details-marker {
	display: none;
}

.mds-price-table__summary:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-price-table__summary--static {
	cursor: auto;
}

.mds-price-table__model {
	grid-column: 1;
	min-width: 0;
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-primary);
}

.mds-price-table__meta {
	grid-column: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--mds-space-2);
	min-width: 0;
}

.mds-price-table__separator {
	color: var(--mds-color-text-tertiary);
}

.mds-price-table__duration {
	font-size: var(--mds-fs-small);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-secondary);
}

/* A model that links to its card reads as a row title: link blue without underline, underline on hover. */
.mds-price-table__model.mds-link {
	text-decoration: none;
}

/* Chevron: the shared icon chevron-down (part 2), the same as in the accordion; it points down when closed
   and flips up when open — instantly, no turn (motion rules: no rotation). */
.mds-price-table__chevron {
	grid-column: 2;
	grid-row: 1 / span 2;
	justify-self: center;
	color: var(--mds-color-text-tertiary);
}

.mds-price-table__details[open] > .mds-price-table__summary .mds-price-table__chevron {
	transform: scaleY(-1);
}

.mds-price-table__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	padding: 0 0 var(--mds-space-4);
}

.mds-price-table__variants {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.mds-price-table__variant {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 var(--mds-space-3);
	padding-block: var(--mds-space-2);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
	line-height: var(--mds-lh-title);
}

.mds-price-table__variant-label {
	min-width: 0;
	color: var(--mds-color-text-secondary);
}

.mds-price-table__variant-price {
	margin: 0;
	text-align: end;
}

.mds-price-table__note {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-price-table__link {
	margin: 0;
}

@media (hover: hover) {
	.mds-price-table__summary:not(.mds-price-table__summary--static):hover .mds-price-table__model,
	.mds-price-table__model.mds-link:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-border);
		text-underline-offset: var(--mds-space-1);
	}
}

@media (min-width: 768px) {
	.mds-price-table__head,
	.mds-price-table__summary,
	.mds-price-table__variant {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) var(--mds-space-5);
		column-gap: var(--mds-space-4);
	}

	.mds-price-table__variant-label {
		grid-column: 1;
	}

	.mds-price-table__variant-price {
		grid-column: 2;
	}

	/* The column head says «Цена» / «Срок»: the cell shows only the state («Уточнить в чате»). The prefix
	   stays for screen readers — the column head is aria-hidden. */
	.mds-price-table .mds-state__prefix {
		position: absolute;
		width: var(--mds-size-border);
		height: var(--mds-size-border);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.mds-price-table .mds-state__rest {
		display: inline-block;
	}

	.mds-price-table .mds-state__rest::first-letter {
		text-transform: uppercase;
	}

	.mds-price-table__head {
		padding-bottom: var(--mds-space-2);
		font-size: var(--mds-fs-small);
		font-weight: var(--mds-fw-semibold);
		line-height: var(--mds-lh-title);
		color: var(--mds-color-text-tertiary);
	}

	.mds-price-table__head-cell--num,
	.mds-price-table__price,
	.mds-price-table__duration {
		text-align: end;
	}

	.mds-price-table__meta {
		display: contents;
	}

	.mds-price-table__separator {
		display: none;
	}

	.mds-price-table__duration {
		font-size: var(--mds-fs-body);
	}

	.mds-price-table__chevron {
		grid-column: 4;
		grid-row: 1;
	}

	.mds-price-table__link,
	.mds-price-table__note {
		padding-right: calc(var(--mds-space-5) + var(--mds-space-4));
	}
}

/* ---------- comparison of variants (аналог / оригинал) ---------- */
.mds-compare {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	min-width: 0;
}

.mds-compare__table {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.mds-compare__caption {
	display: block;
	padding-bottom: var(--mds-space-3);
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-align: start;
	color: var(--mds-color-text-primary);
}

.mds-compare__head,
.mds-compare__body {
	display: block;
}

.mds-compare__head-row,
.mds-compare__row {
	display: grid;
	column-gap: var(--mds-space-3);
}

.mds-compare--2 .mds-compare__head-row,
.mds-compare--2 .mds-compare__row {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mds-compare--single .mds-compare__caption {
	margin: 0;
}

.mds-compare--3 .mds-compare__row {
	grid-template-columns: minmax(0, 1fr);
}

.mds-compare--3 .mds-compare__head-row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mds-compare__row {
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-compare__corner {
	display: none;
}

.mds-compare__variant {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	padding: var(--mds-space-2) 0 var(--mds-space-3);
	border-bottom: var(--mds-size-focus-ring) solid var(--mds-color-border-line);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-align: start;
	vertical-align: top;
	color: var(--mds-color-text-primary);
}

.mds-compare__variant--selected {
	border-bottom-color: var(--mds-color-action-fill);
}

.mds-compare__variant-price {
	font-size: var(--mds-fs-lead);
}

.mds-compare__selected {
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-regular);
	color: var(--mds-color-text-secondary);
}

.mds-compare__feature {
	grid-column: 1 / -1;
	padding: var(--mds-space-3) 0 0;
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-align: start;
	color: var(--mds-color-text-tertiary);
}

.mds-compare__value {
	display: block;
	padding: var(--mds-space-1) 0 var(--mds-space-3);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	vertical-align: top;
	color: var(--mds-color-text-primary);
}

.mds-compare--3 .mds-compare__value::before {
	content: attr(data-mds-label);
	display: block;
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

.mds-compare__note {
	margin: 0;
	max-width: var(--mds-size-measure);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

@media (min-width: 768px) {
	.mds-compare__table {
		display: table;
		table-layout: fixed;
	}

	.mds-compare__caption {
		display: table-caption;
		caption-side: top;
	}

	.mds-compare__head {
		display: table-header-group;
	}

	.mds-compare__body {
		display: table-row-group;
	}

	.mds-compare__head-row,
	.mds-compare__row,
	.mds-compare--3 .mds-compare__head-row,
	.mds-compare--3 .mds-compare__row {
		display: table-row;
	}

	.mds-compare__corner {
		display: table-cell;
		width: 30%;
		border-bottom: var(--mds-size-focus-ring) solid var(--mds-color-border-line);
	}

	.mds-compare__variant,
	.mds-compare__feature,
	.mds-compare__value {
		display: table-cell;
		padding: var(--mds-space-3) var(--mds-space-4) var(--mds-space-3) 0;
	}

	.mds-compare__variant-name,
	.mds-compare__variant-price,
	.mds-compare__selected {
		display: block;
	}

	.mds-compare__variant-price {
		margin-top: var(--mds-space-1);
	}

	.mds-compare__feature {
		font-size: var(--mds-fs-body);
		font-weight: var(--mds-fw-regular);
		color: var(--mds-color-text-secondary);
		vertical-align: top;
		border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	}

	.mds-compare__value {
		font-size: var(--mds-fs-body);
		border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	}

	.mds-compare--3 .mds-compare__value::before {
		content: none;
	}
}

/* ---------- article table: caption, headed columns, numbers on the right ---------- */
.mds-data-table {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
	min-width: 0;
}

.mds-data-table__table {
	width: 100%;
	border-collapse: collapse;
	line-height: var(--mds-lh-title);
}

.mds-data-table__caption {
	padding-bottom: var(--mds-space-3);
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-align: start;
	color: var(--mds-color-text-primary);
}

.mds-data-table__cell {
	padding: var(--mds-space-3) var(--mds-space-3) var(--mds-space-3) 0;
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	text-align: start;
	vertical-align: top;
	color: var(--mds-color-text-primary);
}

.mds-data-table__cell:last-child {
	padding-right: 0;
}

.mds-data-table__cell--head {
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	vertical-align: bottom;
	color: var(--mds-color-text-secondary);
	border-bottom-color: var(--mds-color-border-control);
}

.mds-data-table__cell--row {
	font-weight: var(--mds-fw-semibold);
}

.mds-data-table__cell--num {
	padding-right: var(--mds-space-6);
	font-variant-numeric: tabular-nums;
	text-align: end;
	white-space: nowrap;
}

.mds-data-table__source {
	margin: 0;
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

/* More than three columns on a phone: every row becomes a card of «label — value» pairs. */
.mds-data-table--stack .mds-data-table__table,
.mds-data-table--stack .mds-data-table__body,
.mds-data-table--stack .mds-data-table__row,
.mds-data-table--stack .mds-data-table__cell {
	display: block;
}

.mds-data-table--stack .mds-data-table__caption {
	display: block;
}

.mds-data-table--stack .mds-data-table__head {
	position: absolute;
	width: var(--mds-size-border);
	height: var(--mds-size-border);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mds-data-table--stack .mds-data-table__body {
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-data-table--stack .mds-data-table__row {
	padding: var(--mds-space-3) 0;
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-data-table--stack .mds-data-table__cell {
	padding: var(--mds-space-1) 0;
	border-bottom: 0;
}

.mds-data-table--stack .mds-data-table__cell:not(.mds-data-table__cell--row) {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mds-space-4);
	white-space: normal;
}

.mds-data-table--stack .mds-data-table__cell:not(.mds-data-table__cell--row)::before {
	content: attr(data-mds-label);
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-tertiary);
	text-align: start;
}

@media (min-width: 768px) {
	.mds-data-table--stack .mds-data-table__table {
		display: table;
	}

	.mds-data-table--stack .mds-data-table__caption {
		display: table-caption;
	}

	.mds-data-table--stack .mds-data-table__head {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.mds-data-table--stack .mds-data-table__body {
		display: table-row-group;
		border-top: 0;
	}

	.mds-data-table--stack .mds-data-table__row {
		display: table-row;
		padding: 0;
		border-bottom: 0;
	}

	.mds-data-table--stack .mds-data-table__cell,
	.mds-data-table--stack .mds-data-table__cell:not(.mds-data-table__cell--row) {
		display: table-cell;
		padding: var(--mds-space-3) var(--mds-space-3) var(--mds-space-3) 0;
		border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	}

	.mds-data-table--stack .mds-data-table__cell--num:not(.mds-data-table__cell--row) {
		padding-right: var(--mds-space-6);
		white-space: nowrap;
	}

	.mds-data-table--stack .mds-data-table__cell:not(.mds-data-table__cell--row)::before {
		content: none;
	}
}

/* ---------- form field: label, hint «зачем», error above the input, input 48 high, 17 px ---------- */
.mds-field {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	max-width: var(--mds-size-measure);
	min-width: 0;
}

.mds-field__label {
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-field__optional {
	font-weight: var(--mds-fw-regular);
	color: var(--mds-color-text-secondary);
}

.mds-field__hint,
.mds-fieldset__hint {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-field__error,
.mds-fieldset__error {
	margin: 0;
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-error);
}

/* Font size 17 on every width: below 16 px Safari on iPhone zooms the page into the field. */
.mds-field__input {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--mds-size-control);
	margin: var(--mds-space-1) 0 0;
	padding: 0 var(--mds-space-3);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
	font-family: inherit;
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-regular);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
	-webkit-appearance: none;
	appearance: none;
}

.mds-field__input::placeholder {
	color: var(--mds-color-text-tertiary);
	opacity: 1;
}

.mds-field__input--multiline {
	padding: var(--mds-space-3);
	line-height: var(--mds-lh-body);
	resize: vertical;
}

.mds-field__input:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-field--error .mds-field__input {
	border: var(--mds-size-focus-ring) solid var(--mds-color-border-error);
}

.mds-field__input:disabled {
	border-color: var(--mds-color-border-line);
	background-color: var(--mds-color-surface-muted);
	color: var(--mds-color-text-tertiary);
	cursor: not-allowed;
}

.mds-field__input:read-only:not(:disabled) {
	border-color: var(--mds-color-border-line);
	background-color: var(--mds-color-surface-muted);
}

.mds-field--disabled .mds-field__label {
	color: var(--mds-color-text-tertiary);
}

/* «Как узнать модель» is the quiet disclosure of part 2 (.mds-disclosure--quiet.mds-help, below). */

/* ---------- group of choices: legend, hint, error, items (checkboxes, variant cards) ---------- */
.mds-fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	min-width: 0;
	max-width: var(--mds-size-measure);
	margin: 0;
	padding: 0;
	border: 0;
}

.mds-fieldset__legend {
	margin-bottom: var(--mds-space-2);
	padding: 0;
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-fieldset__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-3);
}

.mds-fieldset--checkboxes .mds-fieldset__items {
	gap: 0;
}

/* The error of a group is said in words (line above the items + the summary); the cards keep their
   border: a red frame on every card is the «тревога» the owner does not want. */

/* ---------- checkbox: native box 24 px in the logo blue (accent), zone 44 ---------- */
.mds-checkbox {
	display: grid;
	grid-template-columns: var(--mds-space-5) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--mds-space-3);
	min-height: var(--mds-size-hit);
}

.mds-checkbox__input {
	width: var(--mds-space-5);
	height: var(--mds-space-5);
	margin: 0;
	accent-color: var(--mds-color-action-fill);
	cursor: pointer;
}

.mds-checkbox__input:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-checkbox__label {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	padding: var(--mds-space-2) 0;
	font-size: var(--mds-fs-body);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
	cursor: pointer;
}

.mds-checkbox__hint {
	grid-column: 2;
	margin: calc(-1 * var(--mds-space-2)) 0 var(--mds-space-2);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-checkbox--disabled .mds-checkbox__label,
.mds-checkbox--disabled .mds-checkbox__input {
	color: var(--mds-color-text-tertiary);
	cursor: not-allowed;
}

/* ---------- error summary (GOV.UK): top of the form, links to the fields, gets the focus ---------- */
.mds-error-summary {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	max-width: var(--mds-size-measure);
	padding: var(--mds-space-4) var(--mds-space-5);
	border: var(--mds-size-focus-ring) solid var(--mds-color-border-error);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
}

.mds-error-summary[hidden] {
	display: none;
}

.mds-error-summary:focus {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-error-summary__title {
	margin: 0;
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-error-summary__list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
	padding-left: var(--mds-space-5);
	color: var(--mds-color-text-error);
}

.mds-error-summary__link {
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-error);
	text-decoration: underline;
	text-decoration-thickness: var(--mds-size-border);
	text-underline-offset: var(--mds-space-1);
}

.md-ds .mds-error-summary__link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-error);
}

.mds-error-summary__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

/* ---------- search with suggestions: the list lies under the field, in the page flow ---------- */
.mds-search {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	max-width: var(--mds-size-measure);
	margin: 0;
}

.mds-search__control {
	display: flex;
	align-items: flex-end;
	gap: var(--mds-space-2);
	margin-top: var(--mds-space-1);
}

.mds-search__control .mds-field__input {
	flex: 1;
	min-width: 0;
	margin: 0;
}

.mds-search__control .mds-button {
	flex: none;
	width: auto;
}

.mds-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: var(--mds-size-border) solid var(--mds-color-border-line);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
	overflow: hidden;
}

.mds-search__list[hidden],
.mds-search__empty[hidden] {
	display: none;
}

.mds-search__option + .mds-search__option {
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-search__option-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 var(--mds-space-3);
	min-height: var(--mds-size-control);
	padding: var(--mds-space-2) var(--mds-space-3);
	line-height: var(--mds-lh-title);
	text-decoration: none;
	color: var(--mds-color-text-primary);
}

.md-ds .mds-search__option-link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-search__option--active .mds-search__option-link,
.mds-search__option-link:focus-visible {
	background-color: var(--mds-color-surface-muted);
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: calc(-1 * var(--mds-size-focus-ring));
}

.mds-search__option-name {
	min-width: 0;
}

.mds-search__option-model {
	font-weight: var(--mds-fw-semibold);
}

.mds-search__option-service {
	color: var(--mds-color-text-secondary);
}

.mds-search__option-price {
	justify-self: end;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mds-search__status {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

@media (hover: hover) {
	.mds-search__option-link:hover {
		background-color: var(--mds-color-surface-muted);
	}
}

/* ---------- notice in the text: info / success / warning / error — no coloured fills, no stripe ---------- */
.mds-notice {
	display: grid;
	grid-template-columns: var(--mds-space-5) minmax(0, 1fr);
	align-items: start;
	gap: var(--mds-space-3);
	max-width: var(--mds-size-measure);
	padding: var(--mds-space-4);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
}

.mds-notice__icon {
	display: flex;
	width: var(--mds-space-5);
	height: var(--mds-space-5);
	color: var(--mds-color-text-secondary);
}

.mds-notice__svg {
	width: 100%;
	height: 100%;
}

.mds-notice__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	min-width: 0;
}

.mds-notice__title {
	margin: 0;
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-notice__text {
	margin: 0;
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-primary);
}

.mds-notice__action {
	margin: var(--mds-space-1) 0 0;
}

.mds-notice--success .mds-notice__icon,
.mds-notice--success .mds-notice__title {
	color: var(--mds-color-text-positive);
}

.mds-notice--warning .mds-notice__icon,
.mds-notice--warning .mds-notice__title {
	color: var(--mds-color-text-warning);
}

.mds-notice--error .mds-notice__icon,
.mds-notice--error .mds-notice__title {
	color: var(--mds-color-text-error);
}

/* ---------- toast «Скопировано»: over the sticky bar, doubles a status line, 4 s ---------- */
.mds-toast {
	position: fixed;
	right: var(--mds-space-4);
	bottom: calc(var(--mds-size-sticky-bar) + var(--mds-space-3) + env(safe-area-inset-bottom));
	left: var(--mds-space-4);
	z-index: var(--mds-z-overlay);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mds-space-1) var(--mds-space-4);
	max-width: var(--mds-size-measure);
	margin-inline: auto;
	padding: var(--mds-space-3) var(--mds-space-4);
	border: var(--mds-size-border) solid var(--mds-color-border-line);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
	box-shadow: var(--mds-shadow-sticky);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-toast[hidden] {
	display: none;
}

.mds-toast--static {
	position: static;
	margin-inline: 0;
}

.mds-toast__text {
	margin: 0;
	font-weight: var(--mds-fw-semibold);
}

.mds-toast__action {
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	white-space: nowrap;
}

/* ---------- inline status (aria-live): loading / done / error with «Повторить» ---------- */
.mds-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--mds-space-3);
	min-height: var(--mds-size-hit);
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-status--loading {
	color: var(--mds-color-text-secondary);
}

.mds-status--done {
	color: var(--mds-color-text-primary);
}

.mds-status--error .mds-status__text {
	color: var(--mds-color-text-error);
}

.mds-status .mds-button--text {
	font-size: var(--mds-fs-small);
}

/* ---------- skeleton: static grey lines of the row heights, no shimmer (complaint 03.09 «мерцают») ---------- */
.mds-skeleton {
	display: flex;
	flex-direction: column;
}

.mds-skeleton__rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-skeleton__row {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	padding: var(--mds-space-3) 0;
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-skeleton__line {
	display: block;
	width: 55%;
	height: calc(var(--mds-fs-body) * var(--mds-lh-title));
	border-radius: var(--mds-radius-sm);
	background-color: var(--mds-color-surface-muted);
}

.mds-skeleton__line--short {
	width: 35%;
	height: calc(var(--mds-fs-small) * var(--mds-lh-title));
}

/* ---------- wizard steps «Шаг 1 из 2 · Модель» and what was chosen before ---------- */
.mds-steps {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
}

.mds-steps__line {
	margin: 0;
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-secondary);
}

.mds-steps__chosen {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	margin: 0;
}

.mds-steps__choice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--mds-space-2);
}

.mds-steps__term {
	color: var(--mds-color-text-tertiary);
}

.mds-steps__value {
	margin: 0;
	color: var(--mds-color-text-primary);
}

/* ---------- empty state: route link as its one action ---------- */
.mds-empty__route {
	margin: 0;
}

/* =====================================================================================================
   Rework 28.09, part 2 of 3: icons, disclosure, navigation, media, overlays.
   Nothing moves here: states are attributes ([open], [hidden], aria-selected, aria-pressed, aria-current,
   data-mds-state) and part 3 adds the motion layer md-motion.css on top. Runtime numbers written by
   md-components.js are read through var(--js-*, fallback): they are state, not style values.
   ===================================================================================================== */

/* ---------- line icons: 24 grid, line 1.8, currentColor; 28 next to a service name, 32 next to a section;
   1em inside a link. Device drawings 48/64/96 are another role: native-device-icons.css, not here ---------- */
.mds-icon {
	display: inline-block;
	flex: none;
	width: var(--mds-size-icon);
	height: var(--mds-size-icon);
	vertical-align: middle;
}

.mds-icon--service {
	width: var(--mds-size-icon-service);
	height: var(--mds-size-icon-service);
}

.mds-icon--large {
	width: var(--mds-size-icon-large);
	height: var(--mds-size-icon-large);
}

.mds-icon--text {
	width: 1em;
	height: 1em;
	/* Relative to the text it sits in, not a style value: puts a 1em icon on the baseline of that text. */
	vertical-align: -0.125em;
}

/* ---------- icon button: 44 × 44, no fill, a muted square on hover (radius 12, not a circle) ---------- */
.mds-button--icon {
	width: var(--mds-size-hit);
	min-width: var(--mds-size-hit);
	min-height: var(--mds-size-hit);
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--mds-color-text-primary);
}

.md-ds .mds-button--icon:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-button--icon:active {
	background-color: var(--mds-color-surface-muted);
}

@media (hover: hover) {
	.mds-button--icon:hover {
		background-color: var(--mds-color-surface-muted);
	}
}

/* ---------- copy button: hidden until the script can copy ---------- */
.mds-copy[hidden] {
	display: none;
}

/* ---------- links: anchor ↓, back ←, external ↗; the arrow never wraps alone ---------- */
.mds-link__tail {
	white-space: nowrap;
}

.mds-link--anchor .mds-icon--text,
.mds-link--external .mds-icon--text {
	margin-left: var(--mds-space-1);
}

.mds-link--back .mds-icon--text {
	margin-right: var(--mds-space-1);
}

/* An anchor keeps its heading clear of the edge of the window (the header is not sticky). */
.md-ds [id] {
	scroll-margin-top: var(--mds-space-4);
}

/* ---------- disclosure: row (questions) and quiet («Подробнее», «Как узнать модель») ---------- */
.mds-disclosure {
	margin: 0;
}

.mds-disclosure__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mds-space-3);
	min-height: var(--mds-size-hit);
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mds-disclosure__summary::-webkit-details-marker {
	display: none;
}

.mds-disclosure__summary:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-disclosure__icon {
	color: var(--mds-color-text-tertiary);
}

/* Open: the chevron flips at once — no turn (motion rules forbid rotation). */
.mds-disclosure[open] > .mds-disclosure__summary .mds-disclosure__icon {
	transform: scaleY(-1);
}

/* The panel is a one-row grid: its height is laid out by the browser; part 3 animates the row, not a height. */
.mds-disclosure__panel {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
}

.mds-disclosure__content {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	min-height: 0;
}

.mds-disclosure__text {
	margin: 0;
	max-width: var(--mds-size-measure);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-primary);
}

.mds-disclosure__checked {
	margin: 0;
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

.mds-accordion {
	max-width: var(--mds-size-measure);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-disclosure--row {
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-disclosure--row > .mds-disclosure__summary {
	padding: var(--mds-space-3) 0;
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-disclosure--row .mds-disclosure__content {
	padding: 0 var(--mds-space-6) var(--mds-space-4) 0;
}

.mds-disclosure--quiet > .mds-disclosure__summary {
	display: inline-flex;
	justify-content: flex-start;
	gap: var(--mds-space-1);
	color: var(--mds-color-text-link);
}

.mds-disclosure--quiet .mds-disclosure__title {
	text-decoration: underline;
	text-decoration-thickness: var(--mds-size-border);
	text-underline-offset: var(--mds-space-1);
}

/* Inside a link-like control the chevron takes the colour of its text (blue only inside an action). */
.mds-disclosure--quiet .mds-disclosure__icon {
	color: inherit;
}

.mds-disclosure--quiet .mds-disclosure__content {
	padding-bottom: var(--mds-space-2);
}

.mds-disclosure--quiet.mds-help {
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-disclosure--quiet.mds-help .mds-disclosure__text {
	color: var(--mds-color-text-secondary);
}

@media (hover: hover) {
	.mds-disclosure--row > .mds-disclosure__summary:hover .mds-disclosure__title {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-border);
		text-underline-offset: var(--mds-space-1);
	}

	.mds-disclosure--quiet > .mds-disclosure__summary:hover .mds-disclosure__title {
		text-decoration-thickness: var(--mds-size-focus-ring);
	}
}

/* ---------- «Показать ещё N»: a <details> under the list, full-width text control ---------- */
.mds-more {
	display: flex;
	flex-direction: column;
}

.mds-more__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-more__rest > .mds-more__list {
	border-top: 0;
}

.mds-more__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mds-size-hit);
	margin-top: var(--mds-space-2);
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-link);
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mds-more__summary::-webkit-details-marker {
	display: none;
}

.mds-more__summary:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

/* Everything shown: the control goes away (the script has moved the focus to the first new item). */
.mds-more__rest[open] > .mds-more__summary {
	display: none;
}

@media (hover: hover) {
	.mds-more__summary:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-border);
		text-underline-offset: var(--mds-space-1);
	}
}

/* ---------- segmented control: second surface, selected segment white with a control border ---------- */
.mds-segmented {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mds-segmented__legend {
	margin-bottom: var(--mds-space-2);
	padding: 0;
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-primary);
}

.mds-segmented__track {
	box-sizing: border-box;
	display: flex;
	gap: var(--mds-space-1);
	max-width: var(--mds-size-measure);
	margin: 0;
	padding: var(--mds-space-1);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
	list-style: none;
}

.mds-segmented__cell {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
}

.mds-segmented__item {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--mds-size-hit);
	padding: 0 var(--mds-space-2);
	border: var(--mds-size-border) solid transparent;
	border-radius: var(--mds-radius-sm);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-align: center;
	text-decoration: none;
	color: var(--mds-color-text-secondary);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.md-ds .mds-segmented__item:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-secondary);
}

/* The native radio stays over the whole segment: a tap anywhere selects it, arrows move between segments. */
.mds-segmented__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.mds-segmented__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mds-segmented__item:has(.mds-segmented__input:checked),
.mds-segmented__item[aria-current="page"] {
	border-color: var(--mds-color-border-control);
	background-color: var(--mds-color-surface-base);
	color: var(--mds-color-text-primary);
}

.md-ds .mds-segmented__item[aria-current="page"]:is(:link, :visited, :hover, :focus, :active),
.md-ds .mds-segmented__item[aria-selected="true"]:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-segmented__item:has(.mds-segmented__input:focus-visible),
.mds-segmented__item:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: 0;
}

.mds-segmented__item--disabled {
	color: var(--mds-color-text-tertiary);
	cursor: not-allowed;
}


/* ---------- chips: height 44, radius 8, wrap (no sideways ribbon); selected — a 2 px blue frame ---------- */
.mds-chips {
	min-width: 0;
}

.mds-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mds-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-chips__item {
	display: flex;
}

.mds-chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	padding: 0 var(--mds-space-4);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-sm);
	background-color: var(--mds-color-surface-base);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-decoration: none;
	white-space: nowrap;
	color: var(--mds-color-text-primary);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.md-ds .mds-chip:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

/* White on the logo blue needs 19 px bold — too big for a chip: the selected chip keeps its dark label and
   gets a 2 px frame of the logo blue (border + an inner outline of 1 px). */
.mds-chip[aria-current="page"],
.mds-chip[aria-pressed="true"] {
	border-color: var(--mds-color-action-fill);
	outline: var(--mds-size-border) solid var(--mds-color-action-fill);
	outline-offset: calc(-1 * var(--mds-size-focus-ring));
}

.mds-chip:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

@media (hover: hover) {
	.mds-chip:hover {
		background-color: var(--mds-color-surface-muted);
	}
}

/* ---------- skip link: the first link of the page, visible on focus ---------- */
.mds-skip-link {
	position: absolute;
	top: var(--mds-space-2);
	left: var(--mds-space-4);
	z-index: var(--mds-z-overlay);
	padding: var(--mds-space-2) var(--mds-space-4);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-link);
}

.mds-skip-link:not(:focus) {
	width: var(--mds-size-border);
	height: var(--mds-size-border);
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mds-skip-link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

/* ---------- breadcrumbs: phone — «← parent» only; from 768 the whole path wraps ---------- */
.mds-breadcrumbs {
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-breadcrumbs__item {
	display: none;
}

.mds-breadcrumbs__item--parent {
	display: flex;
}

.mds-breadcrumbs__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	color: var(--mds-color-text-link);
	text-decoration: underline;
	text-decoration-thickness: var(--mds-size-border);
	text-underline-offset: var(--mds-space-1);
}

.md-ds .mds-breadcrumbs__link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-link);
}

.mds-breadcrumbs__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-breadcrumbs__back {
	margin-right: var(--mds-space-1);
}

.mds-breadcrumbs__item--current {
	color: var(--mds-color-text-secondary);
}

@media (hover: hover) {
	.mds-breadcrumbs__link:hover {
		text-decoration-thickness: var(--mds-size-focus-ring);
	}
}

@media (min-width: 768px) {
	.mds-breadcrumbs__item {
		display: flex;
		align-items: center;
	}

	.mds-breadcrumbs__back {
		display: none;
	}

	/* Separator: a small chevron drawn by two borders, decorative (not read aloud). */
	.mds-breadcrumbs__item + .mds-breadcrumbs__item::before {
		content: "";
		box-sizing: border-box;
		width: var(--mds-space-2);
		height: var(--mds-space-2);
		margin: 0 var(--mds-space-3) 0 var(--mds-space-2);
		border-top: var(--mds-size-border) solid var(--mds-color-text-tertiary);
		border-right: var(--mds-size-border) solid var(--mds-color-text-tertiary);
		transform: rotate(45deg);
	}
}

/* ---------- anchor navigation of a page: a column on a phone, a wrapped line from 768 ---------- */
.mds-toc {
	min-width: 0;
}

.mds-toc__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Inline-block, not flex: a flex link would drop the spaces between the words and the glued arrow. */
.mds-toc__link {
	box-sizing: border-box;
	display: inline-block;
	min-height: var(--mds-size-hit);
	padding-block: var(--mds-space-2);
}

@media (min-width: 768px) {
	.mds-toc__list {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: var(--mds-space-5);
	}
}

/* ---------- header: white, a line below, no glass, no shadow, not sticky ---------- */
.mds-header {
	position: relative;
	z-index: var(--mds-z-header);
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	background-color: var(--mds-color-surface-base);
}

.mds-header__bar {
	display: flex;
	align-items: center;
	gap: var(--mds-space-1);
	min-height: calc(var(--mds-size-control) + 2 * var(--mds-space-2));
}

.mds-header__brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	margin-right: auto;
	text-decoration: none;
	color: var(--mds-color-text-primary);
}

.md-ds .mds-header__brand:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-header__brand:focus-visible,
.mds-header__tool:focus-visible,
.mds-header__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-header__logo {
	display: block;
	width: auto;
	height: var(--mds-space-6);
}

.mds-header__wordmark {
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-bold);
	line-height: var(--mds-lh-title);
}

.mds-header__nav {
	display: none;
}

.mds-header__links {
	display: flex;
	gap: var(--mds-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-header__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	font-size: var(--mds-fs-small);
	text-decoration: none;
	color: var(--mds-color-text-primary);
}

.md-ds .mds-header__link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-header__link[aria-current="page"] {
	font-weight: var(--mds-fw-semibold);
}

.mds-header__tools {
	display: flex;
	align-items: center;
	gap: var(--mds-space-1);
}

.mds-header__tool {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mds-space-2);
	min-width: var(--mds-size-hit);
	min-height: var(--mds-size-hit);
	padding: 0 var(--mds-space-2);
	border-radius: var(--mds-radius-md);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	text-decoration: none;
	color: var(--mds-color-text-primary);
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mds-header__tool::-webkit-details-marker {
	display: none;
}

.md-ds .mds-header__tool:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-header__disclosure[open] > .mds-header__tool {
	background-color: var(--mds-color-surface-muted);
}

/* A phone shows icons; the names are read aloud (hidden text), shown from 768 / 1100. */
.mds-header__tool-label {
	position: absolute;
	width: var(--mds-size-border);
	height: var(--mds-size-border);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mds-header__count {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mds-space-5);
	height: var(--mds-space-5);
	padding: 0 var(--mds-space-1);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-sm);
	background-color: var(--mds-color-surface-base);
	font-size: var(--mds-fs-caption);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-tight);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-primary);
}

.mds-header__menu-close,
.mds-header__menu[open] .mds-header__menu-open {
	display: none;
}

.mds-header__menu[open] .mds-header__menu-close {
	display: inline-block;
}

.mds-header__chat {
	display: none;
}

/* Panels of «Поиск» and «Меню» lie under the bar over the page; the header is not sticky, so a tall
   menu simply extends the page — no inner scroll area. */
.mds-header__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: var(--mds-z-overlay);
	padding-block: var(--mds-space-4) var(--mds-space-6);
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	background-color: var(--mds-color-surface-base);
}

@media (hover: hover) {
	.mds-header__tool:hover {
		background-color: var(--mds-color-surface-muted);
	}

	.mds-header__link:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-border);
		text-underline-offset: var(--mds-space-1);
	}
}

@media (min-width: 768px) {
	.mds-header__tool-label--md {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

@media (min-width: 1100px) {
	.mds-header__brand {
		margin-right: var(--mds-space-6);
	}

	.mds-header__nav {
		display: block;
		margin-right: auto;
	}

	.mds-header__tool-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.mds-header__chat {
		display: inline-flex;
		margin-left: var(--mds-space-2);
	}

	.mds-header__menu {
		display: none;
	}
}

/* ---------- menu: groups of 48-high links, the visit, the chat ---------- */
.mds-menu {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-5);
}

.mds-menu__title {
	margin: 0 0 var(--mds-space-1);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

.mds-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mds-space-3);
	min-height: var(--mds-size-control);
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	text-decoration: none;
	color: var(--mds-color-text-primary);
}

.md-ds .mds-menu__link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-primary);
}

.mds-menu__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: calc(-1 * var(--mds-size-focus-ring));
}

.mds-menu__arrow {
	color: var(--mds-color-text-tertiary);
}

.mds-menu__visit {
	margin: 0;
	line-height: var(--mds-lh-title);
}

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

@media (hover: hover) {
	.mds-menu__link:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-border);
		text-underline-offset: var(--mds-space-1);
	}
}

@media (min-width: 768px) {
	.mds-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mds-space-6);
	}

	.mds-menu__chat {
		grid-column: 1 / -1;
	}
}

/* ---------- footer: second surface, groups stack on a phone ---------- */
.mds-footer {
	background-color: var(--mds-color-surface-muted);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-primary);
}

.mds-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-6);
	padding-block: var(--mds-space-7);
}

.mds-footer__contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-6);
}

.mds-footer__block {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	min-width: 0;
}

.mds-footer__title {
	margin: 0;
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-footer__address {
	font-style: normal;
}

.mds-footer__line {
	margin: 0;
}

.mds-footer__nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-5);
	padding-top: var(--mds-space-6);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-footer__group-title {
	margin: 0 0 var(--mds-space-1);
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

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

.mds-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	text-decoration: none;
	color: var(--mds-color-text-secondary);
}

.md-ds .mds-footer__link:is(:link, :visited, :hover, :focus, :active) {
	color: var(--mds-color-text-secondary);
}

.mds-footer__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	padding-top: var(--mds-space-5);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
	font-size: var(--mds-fs-caption);
	color: var(--mds-color-text-tertiary);
}

.mds-footer__legal-line {
	margin: 0;
}

@media (hover: hover) {
	.mds-footer__link:hover {
		text-decoration: underline;
		text-decoration-thickness: var(--mds-size-border);
		text-underline-offset: var(--mds-space-1);
	}
}

@media (min-width: 768px) {
	.mds-footer__contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mds-footer__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- photo report / gallery: 2 columns on a phone, 3 from 768; each frame links to the large photo ---------- */
.mds-gallery__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mds-space-4) var(--mds-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.mds-gallery__link {
	display: block;
	border-radius: var(--mds-radius-md);
}

.mds-gallery__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mds-ratio-step);
	object-fit: cover;
	object-position: var(--crop-x, 50%) var(--crop-y, 50%);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
}

.mds-gallery--square .mds-gallery__img {
	aspect-ratio: var(--mds-ratio-square);
}

.mds-gallery__caption {
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

/* Three columns only where the gallery itself is wider than the text column (a container query, not the
   window): in a half-width column of a desktop page it keeps two. 680 = size.measure — a query cannot read
   var(), so the number is written as in the breakpoints (DESIGN.md «Сетка и формы»). */
.mds-gallery {
	container-type: inline-size;
}

@container (min-width: 680px) {
	.mds-gallery__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mds-space-5) var(--mds-space-4);
	}
}

/* Viewer: a white full-screen <dialog> — the whole frame, its caption, «Фото 2 из 5», ← →. No dark lightbox. */
.mds-viewer {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--mds-color-surface-base);
	color: var(--mds-color-text-primary);
}

.mds-viewer[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.mds-viewer::backdrop {
	background-color: var(--mds-color-surface-base);
}

.mds-viewer__bar,
.mds-viewer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mds-space-3);
	padding: var(--mds-space-2) var(--mds-space-4);
}

.mds-viewer__bar {
	padding-top: calc(var(--mds-space-2) + env(safe-area-inset-top));
}

.mds-viewer__foot {
	padding-bottom: calc(var(--mds-space-2) + env(safe-area-inset-bottom));
}

.mds-viewer__counter {
	margin: 0;
	font-size: var(--mds-fs-small);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-secondary);
}

.mds-viewer__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 var(--mds-space-4);
}

.mds-viewer__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--mds-radius-md);
}

.mds-viewer__caption {
	flex: 1;
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	text-align: center;
	color: var(--mds-color-text-secondary);
}

/* ---------- «до / после»: the «после» frame over «до», the divider follows the finger or the keys ---------- */
.mds-before-after {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
}

.mds-before-after__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
	touch-action: pan-y;
	cursor: ew-resize;
	-webkit-user-select: none;
	user-select: none;
}

.mds-before-after__layer {
	position: relative;
}

.mds-before-after__layer--after {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--js-pos, 50%));
}

.mds-before-after__img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.mds-before-after__tag {
	position: absolute;
	bottom: var(--mds-space-3);
	left: var(--mds-space-3);
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-space-5);
	padding: 0 var(--mds-space-2);
	border-radius: var(--mds-radius-sm);
	background-color: var(--mds-color-surface-base);
	font-size: var(--mds-fs-caption);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-tight);
	color: var(--mds-color-text-primary);
}

.mds-before-after__layer--after .mds-before-after__tag {
	right: var(--mds-space-3);
	left: auto;
}

/* The native range gives the keyboard and the screen reader; the finger is handled by the script. */
.mds-before-after__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.mds-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--js-pos, 50%);
	width: var(--mds-size-focus-ring);
	margin-left: calc(-1 * var(--mds-size-border));
	background-color: var(--mds-color-surface-base);
	pointer-events: none;
}

.mds-before-after__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mds-size-hit);
	height: var(--mds-size-hit);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-base);
	color: var(--mds-color-text-primary);
	transform: translate(-50%, -50%);
}

.mds-before-after__range:focus-visible ~ .mds-before-after__handle .mds-before-after__knob {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-before-after__caption {
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

/* Without scripts: the two frames one after the other (side by side from 768), each with its word. */
@media (scripting: none) {
	.mds-before-after__frame {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mds-space-3);
		overflow: visible;
		background-color: transparent;
		cursor: auto;
	}

	.mds-before-after__layer--after {
		position: relative;
		clip-path: none;
	}

	.mds-before-after__layer--after .mds-before-after__tag {
		right: auto;
		left: var(--mds-space-3);
	}

	.mds-before-after__img {
		border-radius: var(--mds-radius-md);
	}

	.mds-before-after__range,
	.mds-before-after__handle {
		display: none;
	}
}

@media (scripting: none) and (min-width: 768px) {
	.mds-before-after__frame {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- video 9:16: native player, poster, subtitles, no autoplay, at most 80 % of the screen high ---------- */
.mds-video {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
}

.mds-video__player {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80svh;
	aspect-ratio: var(--mds-ratio-video);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
}

.mds-video__caption {
	font-size: var(--mds-fs-caption);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-tertiary);
}

/* ---------- static map: our image, the address, the route; an interactive map only after a tap ---------- */
.mds-map {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	max-width: var(--mds-size-measure);
	margin: 0;
}

.mds-map__link {
	display: block;
	border-radius: var(--mds-radius-md);
}

.mds-map__link:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-map__img,
.mds-map__frame {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mds-ratio-step);
	object-fit: cover;
	border: 0;
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
}

.mds-map--text {
	gap: var(--mds-space-1);
}

.mds-map__caption {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-map__actions {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--mds-space-5);
	margin: 0;
}

.mds-map__actions .mds-link {
	box-sizing: border-box;
	display: inline-block;
	min-height: var(--mds-size-hit);
	padding-block: var(--mds-space-2);
}

/* ---------- sheet «Запись через Telegram»: bottom sheet on a phone, a window from 768 ---------- */
.mds-sheet {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: 90dvh;
	margin: auto auto 0;
	padding: var(--mds-space-4) var(--mds-space-4) calc(var(--mds-space-5) + env(safe-area-inset-bottom));
	border: 0;
	border-radius: var(--mds-radius-lg) var(--mds-radius-lg) 0 0;
	background-color: var(--mds-color-surface-base);
	box-shadow: var(--mds-shadow-sticky);
	color: var(--mds-color-text-primary);
	overscroll-behavior: contain;
}

.mds-sheet[open] {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
}

/* Backdrop: the main text colour at 40 % (candidate color.overlay.backdrop), no blur. */
.mds-sheet::backdrop {
	background-color: var(--mds-color-overlay-backdrop);
}

/* Scroll lock only under a modal window (showModal): a <dialog open> placed in the markup — a static
   sample or a non-modal panel — must never freeze the page (finding 28.09: the showcase could not scroll). */
body.md-ds:has(.mds-sheet:modal),
body.md-ds:has(.mds-viewer:modal) {
	overflow: hidden;
}

.mds-sheet__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mds-space-3);
}

.mds-sheet__title {
	margin: 0;
	padding-top: var(--mds-space-2);
	font-size: var(--mds-fs-title-3);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-sheet__title:focus {
	outline: none;
}

.mds-sheet__title:focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-size-focus-ring);
}

.mds-sheet__close {
	margin: calc(-1 * var(--mds-space-2)) calc(-1 * var(--mds-space-2)) 0 0;
}

.mds-sheet__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
}

.mds-sheet__lead {
	margin: 0;
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-sheet__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--mds-space-4);
}

.mds-sheet__status {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

@media (min-width: 768px) {
	.mds-sheet {
		max-width: var(--mds-size-measure);
		max-height: 85dvh;
		margin: auto;
		padding: var(--mds-space-5) var(--mds-space-6) var(--mds-space-6);
		border-radius: var(--mds-radius-lg);
	}
}

/* =====================================================================================================
   Rework 28.09, part 3 of 3: content (article, lists, quote and review, case, checklist, process,
   «Чего мы не делаем», «Если найдём ещё — сначала согласуем», callout, footnotes), model identity,
   repair list, the answer line of the home first screen. Still no movement here: md-motion.css.
   ===================================================================================================== */

/* ---------- home first screen: which answer the passport shows ---------- */
.mds-first-screen__answer {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

/* ---------- article: H1, lead, «Проверено …»; the text column is size.measure ---------- */
.mds-article {
	max-width: var(--mds-size-measure);
}

.mds-article__head {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	padding-bottom: var(--mds-space-6);
}

.mds-article__title {
	margin: 0;
	font-size: var(--mds-fs-title-2);
	font-weight: var(--mds-fw-bold);
	line-height: var(--mds-lh-title);
	text-wrap: balance;
}

.mds-article__lead {
	margin: 0;
	font-size: var(--mds-fs-lead);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-article__meta {
	margin: 0;
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-tertiary);
}

@media (min-width: 768px) {
	.mds-article__title {
		font-size: var(--mds-fs-title-1);
		line-height: var(--mds-lh-tight);
	}
}

/* ---------- prose: H2 28 · H3 24 · H4 20 on every width, space.7 above a H2; paragraphs 17 / 1.5 ---------- */
.mds-prose {
	max-width: var(--mds-size-measure);
}

/* Doubled class: the prose rhythm wins over the zero margins of the blocks inside (lists, callout). */
.mds-prose.mds-prose > * {
	margin-bottom: var(--mds-space-4);
}

.mds-prose.mds-prose > :last-child {
	margin-bottom: 0;
}

.mds-prose__h2 {
	margin-top: var(--mds-space-7);
	font-size: var(--mds-fs-title-2);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-wrap: balance;
}

.mds-prose__h3 {
	margin-top: var(--mds-space-6);
	font-size: var(--mds-fs-title-3);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-prose__h4 {
	margin-top: var(--mds-space-5);
	margin-bottom: var(--mds-space-2);
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-prose > :first-child {
	margin-top: 0;
}

.mds-prose__p {
	margin-top: 0;
	line-height: var(--mds-lh-body);
}

.mds-prose.mds-prose > .mds-photo,
.mds-prose.mds-prose > .mds-quote,
.mds-prose.mds-prose > .mds-data-table {
	margin-block: var(--mds-space-5);
}

@media (min-width: 768px) {
	.mds-prose > .mds-photo {
		max-width: calc(var(--mds-size-measure) * 2 / 3);
	}
}

/* ---------- lists: bullet, number, check (входит), cross (не входит) — the mark is the line icon ---------- */
.mds-list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
	padding-left: var(--mds-space-5);
	line-height: var(--mds-lh-body);
}

.mds-list--number > .mds-list__item::marker {
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-secondary);
}

.mds-list--check,
.mds-list--cross {
	padding-left: 0;
	list-style: none;
}

.mds-list--check > .mds-list__item,
.mds-list--cross > .mds-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mds-space-2);
}

.mds-list__mark {
	flex: none;
	margin-top: var(--mds-space-1);
	color: var(--mds-color-text-secondary);
}

.mds-list--cross .mds-list__mark {
	color: var(--mds-color-text-tertiary);
}

.mds-list__text {
	min-width: 0;
}

/* ---------- callout: «Совет:» in bold, 15 px, secondary colour; no frame, no stripe, no lamp ---------- */
.mds-callout {
	margin: 0;
	max-width: var(--mds-size-measure);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-callout__label {
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-primary);
}

/* ---------- footnotes: a small number in the text, the notes under a line at the end ---------- */
.mds-footnote-ref {
	font-size: var(--mds-fs-caption);
	line-height: 0;
}

.mds-footnote-ref .mds-link {
	text-decoration: none;
}

.mds-footnotes {
	margin-top: var(--mds-space-7);
	padding-top: var(--mds-space-4);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-footnotes__title {
	margin: 0 0 var(--mds-space-2);
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-footnotes__list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
	padding-left: var(--mds-space-5);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-footnotes__back {
	white-space: nowrap;
}

/* ---------- quote of the founder or the workshop: «…» in the lead size, the source under it ---------- */
.mds-quote {
	margin: 0;
	max-width: var(--mds-size-measure);
}

.mds-quote__text {
	margin: 0;
}

.mds-quote__text p {
	margin: 0;
	font-size: var(--mds-fs-lead);
	line-height: var(--mds-lh-title);
	text-wrap: pretty;
}

.mds-quote__source {
	margin-top: var(--mds-space-2);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

/* ---------- reviews: verbatim quotes in a column, lines between; no stars, avatars or carousel ---------- */
.mds-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
	max-width: var(--mds-size-measure);
}

.mds-reviews__title {
	margin: 0;
	font-size: var(--mds-fs-title-2);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-reviews__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-reviews__item {
	padding-block: var(--mds-space-4);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-reviews__all {
	margin: 0;
}

.mds-review {
	margin: 0;
}

.mds-review__text {
	margin: 0;
}

.mds-review__text p {
	margin: 0;
	line-height: var(--mds-lh-body);
	text-wrap: pretty;
}

.mds-review__meta {
	margin-top: var(--mds-space-2);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-tertiary);
}

.mds-review__rating {
	color: var(--mds-color-text-secondary);
}

.mds-review__date {
	white-space: nowrap;
}

/* ---------- case from practice: the second surface, the client's phrase as the heading ---------- */
.mds-case {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	max-width: var(--mds-size-measure);
	padding: var(--mds-space-5) var(--mds-space-4);
	border-radius: var(--mds-radius-lg);
	background-color: var(--mds-color-surface-muted);
}

.mds-case__label {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-case__title {
	margin: 0;
	font-size: var(--mds-fs-title-3);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-wrap: balance;
}

.mds-case__text {
	margin: 0;
	line-height: var(--mds-lh-body);
}

.mds-case__source {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-tertiary);
}

@media (min-width: 768px) {
	.mds-case {
		padding: var(--mds-space-6);
	}
}

/* ---------- checklist: numbered like a printed sheet, lines between, «при вас» on the right ---------- */
.mds-checklist {
	max-width: var(--mds-size-measure);
}

.mds-checklist__title {
	margin: 0 0 var(--mds-space-2);
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-checklist__list {
	margin: 0;
	padding-left: var(--mds-space-6);
}

.mds-checklist__item {
	padding-block: var(--mds-space-3);
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
	line-height: var(--mds-lh-title);
}

.mds-checklist__item::marker {
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-tertiary);
}

.mds-checklist__mark {
	margin-left: var(--mds-space-2);
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-secondary);
	white-space: nowrap;
}

.mds-checklist__note {
	margin: var(--mds-space-3) 0 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

/* ---------- process: one number per step in the body size, the title, the text, a real photo ---------- */
.mds-process {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
	max-width: var(--mds-size-measure);
}

.mds-process__summary {
	margin: 0;
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-secondary);
}

.mds-process__list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-process__step {
	display: grid;
	grid-template-columns: var(--mds-space-6) minmax(0, 1fr);
	gap: var(--mds-space-2);
}

.mds-process__number {
	font-weight: var(--mds-fw-semibold);
	font-variant-numeric: tabular-nums;
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-process__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	min-width: 0;
}

.mds-process__title {
	margin: 0;
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-process__text {
	margin: 0;
	line-height: var(--mds-lh-body);
}

.mds-process__body > .mds-photo {
	margin-top: var(--mds-space-2);
}

.mds-process__note {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

/* ---------- «Чего мы не делаем»: a cross, what we do not do, why ---------- */
.mds-not-list {
	max-width: var(--mds-size-measure);
}

.mds-not-list__title {
	margin: 0 0 var(--mds-space-3);
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-not-list__lead {
	margin: 0 0 var(--mds-space-4);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-not-list__list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-not-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mds-space-3);
}

.mds-not-list__mark {
	flex: none;
	margin-top: var(--mds-space-1);
	color: var(--mds-color-text-tertiary);
}

.mds-not-list__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	min-width: 0;
}

.mds-not-list__not {
	margin: 0;
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-not-list__why {
	margin: 0;
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

/* ---------- «Если найдём ещё — сначала согласуем»: stands by the price, a line above ---------- */
.mds-agree {
	display: flex;
	align-items: flex-start;
	gap: var(--mds-space-3);
	max-width: var(--mds-size-measure);
	padding-top: var(--mds-space-3);
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-agree__icon {
	flex: none;
	color: var(--mds-color-text-secondary);
}

.mds-agree__body {
	min-width: 0;
}

.mds-agree__title {
	margin: 0;
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-agree__text {
	margin: var(--mds-space-1) 0 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

/* ---------- model identity: «это обычный iPhone 13», the codes, «Как узнать модель» ---------- */
.mds-model-id {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	max-width: var(--mds-size-measure);
}

.mds-model-id__text {
	margin: 0;
	line-height: var(--mds-lh-body);
}

.mds-model-id__codes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mds-space-2);
	margin: 0;
}

.mds-model-id__term {
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-secondary);
}

/* ---------- repair list: rows «модель — работа — вариант — цена», the total of known prices ----------
   A row is a one-row grid: its place can open and close (md-motion.js) without measuring a height. */
.mds-repair-list {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-5);
	max-width: var(--mds-size-measure);
}

.mds-repair-list__rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-repair-list__row {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	border-bottom: var(--mds-size-border) solid var(--mds-color-border-line);
}

.mds-repair-list__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mds-space-2) var(--mds-space-4);
	min-height: 0;
	padding-block: var(--mds-space-4);
}

.mds-repair-list__main {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-1);
	min-width: 0;
}

.mds-repair-list__model {
	margin: 0;
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-repair-list__service,
.mds-repair-list__variant {
	margin: 0;
	line-height: var(--mds-lh-title);
}

.mds-repair-list__variant {
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-secondary);
}

.mds-repair-list__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--mds-space-1);
	margin-left: auto;
	text-align: right;
}

.mds-repair-list__price {
	font-weight: var(--mds-fw-semibold);
	white-space: nowrap;
}

.mds-repair-list__remove {
	display: inline-flex;
	align-items: center;
	min-height: var(--mds-size-hit);
	font-size: var(--mds-fs-small);
}

.mds-repair-list__summary {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
}

.mds-repair-list__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mds-space-2);
	font-size: var(--mds-fs-lead);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
}

.mds-repair-list__total[hidden] {
	display: none;
}

.mds-repair-list__total-term {
	font-size: var(--mds-fs-body);
	font-weight: var(--mds-fw-regular);
}

.mds-repair-list__rest,
.mds-repair-list__note {
	margin: 0;
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-repair-list__note {
	color: var(--mds-color-text-tertiary);
}

/* =====================================================================================================
   Rework 28.09, part 4 (review of the showcase): page frame (F2), label (D8), room for the chat bubble
   (O4), the chat on the site (A4), high contrast (F8). Nothing here moves.
   ===================================================================================================== */

/* ---------- page: <main>, full width; sections carry their own container ---------- */
.mds-page {
	display: block;
	padding-bottom: var(--mds-space-8);
}

/* ---------- page title: the same offset under the header as the first screen, on every template ---------- */
.mds-page-title {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-3);
	padding-top: var(--mds-space-5);
}

.mds-page-title__above {
	min-width: 0;
}

.mds-page-title__h1 {
	margin: 0;
	font-size: var(--mds-fs-title-2);
	font-weight: var(--mds-fw-bold);
	line-height: var(--mds-lh-title);
	text-wrap: balance;
	color: var(--mds-color-text-primary);
}

.mds-page-title__lead {
	max-width: var(--mds-size-measure);
	margin: 0;
	font-size: var(--mds-fs-lead);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-page-title__meta {
	margin: 0;
	font-size: var(--mds-fs-small);
	color: var(--mds-color-text-tertiary);
}

.mds-page-title__after {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-5);
	min-width: 0;
	padding-top: var(--mds-space-2);
}

@media (min-width: 768px) {
	.mds-page-title__h1 {
		font-size: var(--mds-fs-title-1);
		line-height: var(--mds-lh-tight);
	}
}

@media (min-width: 1100px) {
	.mds-page-title {
		padding-top: var(--mds-space-7);
	}
}

/* ---------- section: rhythm 48 / 64, no lines between sections, blocks space.5 apart ---------- */
.mds-section__inner {
	padding-block: var(--mds-space-7);
}

.mds-section--muted {
	background-color: var(--mds-color-surface-muted);
}

.mds-section--first > .mds-section__inner {
	padding-block: 0;
}

/* The first screen inside a page ends where the next section begins: its own bottom offset would double
   the rhythm (48 + 48). */
.mds-section--first > .mds-section__inner > .mds-first-screen {
	padding-bottom: 0;
}

.mds-section--follow > .mds-section__inner {
	padding-top: var(--mds-space-5);
}

.mds-section__title {
	max-width: 24ch;
	margin: 0 0 var(--mds-space-5);
	font-size: var(--mds-fs-title-2);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	text-wrap: balance;
	color: var(--mds-color-text-primary);
}

.mds-section__title:has(+ .mds-section__lead) {
	margin-bottom: var(--mds-space-3);
}

.mds-section__lead {
	max-width: var(--mds-size-measure);
	margin: 0 0 var(--mds-space-5);
	color: var(--mds-color-text-secondary);
}

.mds-section__body {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-5);
	min-width: 0;
}

.mds-section__body > :where(p, ul, ol, dl, figure) {
	margin-block: 0;
}

.mds-section__body > :where(p, ul, ol) {
	max-width: var(--mds-size-measure);
}

@media (min-width: 768px) {
	.mds-section__inner {
		padding-block: var(--mds-space-8);
	}

	.mds-section--follow > .mds-section__inner {
		padding-top: var(--mds-space-5);
	}
}

/* ---------- «текст + фото»: one column, two from 1100 (7 : 5 as the first screen) ---------- */
.mds-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mds-space-6);
}

.mds-split__text {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-5);
	min-width: 0;
}

.mds-split__media {
	min-width: 0;
}

@media (min-width: 1100px) {
	.mds-split {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
		gap: var(--mds-space-7);
	}
}

/* ---------- label: type of the part, availability — a frame, no fill, never wraps ---------- */
.mds-label {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--mds-space-2);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-sm);
	font-size: var(--mds-fs-caption);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-body);
	white-space: nowrap;
	color: var(--mds-color-text-primary);
}

.mds-label--positive {
	color: var(--mds-color-text-positive);
}

.mds-label--muted {
	color: var(--mds-color-text-secondary);
}

/* ---------- the chat on the site (A4, Jivo): its sentence needs the widget, the widget needs JS ---------- */
.mds-answer-line__site {
	display: block;
}

@media (scripting: none) {
	.mds-answer-line__site {
		display: none;
	}
}

/* ---------- room for the chat bubble (O4): the sticky bar keeps its right end free on a phone ----------
   The Jivo bubble sits in the bottom right corner over the page. The bar keeps size.sticky-bar (a square
   as tall as the bar) free at its right end on every width up to the container, so the bubble never covers
   the button; the toast stands above the bar. The widget's own position is set in Jivo (bottom right,
   above the safe area) — not by this file. */
.mds-sticky-bar__inner {
	padding-right: calc(var(--mds-space-4) + var(--mds-size-sticky-bar));
}

@media (min-width: 768px) {
	.mds-sticky-bar__inner {
		padding-right: calc(var(--mds-space-6) + var(--mds-size-sticky-bar));
	}
}

/* ---------- high contrast (F8): Windows contrast themes remove fills and shadows ----------
   Without a line the logo-blue button, the selected variant, segment and chip, the sticky bar and the
   windows would lose their edges: they get a system-colour line; the selected one — Highlight. */
@media (forced-colors: active) {
	.mds-button,
	.mds-chip,
	.mds-variant,
	.mds-segmented__item,
	.mds-label,
	.mds-header__count {
		border: var(--mds-size-border) solid ButtonText;
	}

	.mds-variant:has(.mds-variant__input:checked),
	.mds-segmented__item:has(.mds-segmented__input:checked),
	.mds-segmented__item[aria-current="page"],
	.mds-chip[aria-current="page"],
	.mds-chip[aria-pressed="true"] {
		border-color: Highlight;
		outline: var(--mds-size-border) solid Highlight;
	}

	.mds-sticky-bar,
	.mds-sheet,
	.mds-toast,
	.mds-viewer {
		border: var(--mds-size-border) solid CanvasText;
	}

	.mds-icon {
		forced-color-adjust: auto;
	}
}

/* =====================================================================================================
   Rework 28.09, part 5 (plan b5, step 2): what the accepted templates need — the card v4 and its version
   28.09, the hubs /battery/ and /model/. Device drawings keep the classes of native-device-icons.css
   (.md-device-*): this file only gives them room. Crops of photos are --crop-* numbers printed by
   mds_crop_style() and read here with fallbacks (the only inline style of the system).
   ===================================================================================================== */

/* ---------- photo in a frame of a ratio (tokens ratio.*), cropped per phone and computer ---------- */
.mds-photo__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--mds-ratio-square);
	border-radius: var(--mds-radius-md);
	background-color: var(--mds-color-surface-muted);
}

.mds-photo__frame--square {
	aspect-ratio: var(--mds-ratio-square);
}

.mds-photo__frame--step {
	aspect-ratio: var(--mds-ratio-step);
}

.mds-photo__frame--pair {
	aspect-ratio: var(--mds-ratio-pair);
}

.mds-photo__frame--portrait {
	aspect-ratio: var(--mds-ratio-portrait);
}

.mds-photo__frame .mds-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--crop-x, 50%) var(--crop-y, 50%);
	transform: scale(var(--crop-scale, 1));
	transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
	border-radius: 0;
}

@media (min-width: 768px) {
	.mds-photo__frame .mds-photo__img {
		object-position: var(--crop-dx, var(--crop-x, 50%)) var(--crop-dy, var(--crop-y, 50%));
		transform: scale(var(--crop-dscale, var(--crop-scale, 1)));
		transform-origin: var(--crop-dx, var(--crop-x, 50%)) var(--crop-dy, var(--crop-y, 50%));
	}
}

/* ---------- first screen of the accepted card: crumbs, introduction, facts, closed booking, other models ---------- */
.mds-first-screen__above {
	grid-column: 1 / -1;
	min-width: 0;
}

.mds-first-screen__lead {
	margin: 0;
	max-width: var(--mds-size-measure);
	font-size: var(--mds-fs-lead);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-first-screen__facts {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mds-first-screen__fact {
	display: flex;
	align-items: flex-start;
	gap: var(--mds-space-2);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-first-screen__fact-mark {
	flex: none;
	color: var(--mds-color-text-positive);
}

.mds-first-screen__fact-term {
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-primary);
}

.mds-first-screen__closed {
	margin: 0;
	max-width: var(--mds-size-measure);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

/* Д1, left out by the owner 28.09 (С1): the label above the H1 of v4 — a quiet line, never a capsule. */
.mds-first-screen__tag {
	margin: 0;
	font-size: var(--mds-fs-small);
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

.mds-other-models {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mds-space-2) var(--mds-space-5);
	line-height: var(--mds-lh-title);
}

.mds-other-models__label {
	color: var(--mds-color-text-secondary);
}

.mds-other-models__link {
	display: inline-flex;
	align-items: center;
	gap: var(--mds-space-2);
	min-height: var(--mds-size-hit);
}

/* ---------- warranty: the line under «Покрывает»; the conditional price ---------- */
.mds-guarantee__after {
	margin: var(--mds-space-3) 0 0;
	font-weight: var(--mds-fw-semibold);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-primary);
}

.mds-addon {
	display: block;
	margin: 0;
	max-width: var(--mds-size-measure);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-addon__price {
	font-weight: var(--mds-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-primary);
	white-space: nowrap;
}

/* Price and term share one line on a phone too: the bar stays within size.sticky-bar. */
.mds-sticky-bar__offer {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--mds-space-1);
}

.mds-sticky-bar__offer .mds-sticky-bar__separator {
	display: inline;
}

.mds-sticky-bar__duration {
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-secondary);
	white-space: nowrap;
}

/* ---------- price table of the accepted hubs: drawing of the model, what the row hides, term per variant ---------- */
.mds-price-table__identity {
	display: flex;
	align-items: center;
	gap: var(--mds-space-4);
	min-width: 0;
}

.mds-price-table__media {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	color: var(--mds-color-text-link);
}

.mds-price-table__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mds-price-table__hint {
	display: block;
	margin-top: var(--mds-space-1);
	font-size: var(--mds-fs-caption);
	font-weight: var(--mds-fw-regular);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-tertiary);
}

.mds-price-table__variant-duration {
	margin: 0;
	font-size: var(--mds-fs-small);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-secondary);
}

.mds-price-table__variant-note {
	flex-basis: 100%;
	margin: 0;
	max-width: var(--mds-size-measure);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-price-table__conditions {
	max-width: none;
}

.mds-kv__text {
	margin: 0;
}

.mds-kv__text + .mds-kv__text {
	margin-top: var(--mds-space-2);
}

@media (min-width: 768px) {
	.mds-price-table__variant-duration {
		grid-column: 3;
		text-align: end;
	}

	.mds-price-table__variant-note {
		grid-column: 1 / -1;
	}
}

/* ---------- places of device drawings: model identity 64, neighbouring models 48, families, list, search ---------- */
.mds-model-id__device {
	margin: 0;
}

.mds-chip--device {
	gap: var(--mds-space-2);
	padding-block: var(--mds-space-1);
}

.mds-segmented__item--family {
	flex-direction: column;
	gap: var(--mds-space-1);
	padding-block: var(--mds-space-2);
}

.mds-repair-list__media {
	display: flex;
	flex: none;
	align-items: flex-start;
}

.mds-search__option-link--device {
	gap: var(--mds-space-3);
}

/* ---------- «до / после»: start 25 % (the accepted card), a ready collage ---------- */
.mds-before-after--start-25 .mds-before-after__layer--after {
	clip-path: inset(0 0 0 var(--js-pos, 25%));
}

.mds-before-after--start-25 .mds-before-after__handle {
	left: var(--js-pos, 25%);
}

.mds-before-after--start-75 .mds-before-after__layer--after {
	clip-path: inset(0 0 0 var(--js-pos, 75%));
}

.mds-before-after--start-75 .mds-before-after__handle {
	left: var(--js-pos, 75%);
}

.mds-before-after--collage .mds-before-after__img {
	border-radius: var(--mds-radius-md);
}

.mds-before-after__frame--collage {
	touch-action: auto;
	cursor: auto;
}

.mds-before-after__tag--after {
	right: var(--mds-space-3);
	left: auto;
}

/* ---------- С1 (owner 28.09): Apple documentation and bars of terms in the card; the line of three numbers left out ---------- */
.mds-apple-links {
	margin: 0;
	max-width: var(--mds-size-measure);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-body);
	color: var(--mds-color-text-secondary);
}

.mds-apple-links__label {
	font-weight: var(--mds-fw-semibold);
	color: var(--mds-color-text-primary);
}

.mds-time-bars {
	display: flex;
	flex-direction: column;
	gap: var(--mds-space-4);
	margin: 0;
	max-width: var(--mds-size-measure);
}

.mds-time-bars__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mds-space-2) var(--mds-space-3);
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
}

.mds-time-bars__label {
	color: var(--mds-color-text-secondary);
}

.mds-time-bars__value {
	margin: 0;
	font-weight: var(--mds-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-primary);
	white-space: nowrap;
}

.mds-time-bars__track {
	grid-column: 1 / -1;
	margin: 0;
}

.mds-time-bars__meter {
	display: block;
	width: 100%;
	height: var(--mds-space-2);
	border: 0;
	border-radius: var(--mds-radius-sm);
	background: var(--mds-color-surface-muted);
	-webkit-appearance: none;
	appearance: none;
}

.mds-time-bars__meter::-webkit-meter-bar {
	height: var(--mds-space-2);
	border: 0;
	border-radius: var(--mds-radius-sm);
	background: var(--mds-color-surface-muted);
}

.mds-time-bars__meter::-webkit-meter-optimum-value {
	border-radius: var(--mds-radius-sm);
	background: var(--mds-color-text-tertiary);
}

.mds-time-bars__meter::-moz-meter-bar {
	border-radius: var(--mds-radius-sm);
	background: var(--mds-color-text-tertiary);
}

.mds-time-bars__row--accent .mds-time-bars__meter::-webkit-meter-optimum-value {
	background: var(--mds-color-text-primary);
}

.mds-time-bars__row--accent .mds-time-bars__meter::-moz-meter-bar {
	background: var(--mds-color-text-primary);
}

.mds-stat-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mds-space-4);
	margin: 0;
	max-width: var(--mds-size-measure);
}

.mds-stat-row__item {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--mds-space-1);
	min-width: 0;
}

.mds-stat-row__value {
	margin: 0;
	font-size: var(--mds-fs-title-3);
	font-weight: var(--mds-fw-bold);
	line-height: var(--mds-lh-tight);
	font-variant-numeric: tabular-nums;
	color: var(--mds-color-text-primary);
}

.mds-stat-row__label {
	font-size: var(--mds-fs-small);
	line-height: var(--mds-lh-title);
	color: var(--mds-color-text-secondary);
}

/* WordPress adapters for the accepted local cohort. No new page stylesheet. */
/* Keep the real search/navigation and footer, using the accepted DS type and control tokens. */
body.md-ds { margin: 0; font-family: var(--mds-font-family); font-size: var(--mds-fs-body); line-height: var(--mds-lh-body); }
.md-ds .md-header, .md-ds .md-footer { font-family: var(--mds-font-family); }
.md-ds .md-header__nav, .md-ds .md-header__repair-list, .md-ds .md-search__status, .md-ds .md-search__hint { font-size: var(--mds-fs-small); }
.md-ds .md-search input[type="search"] { font-size: var(--mds-fs-body); }
.md-ds .md-search__form, .md-ds .md-search button { border-radius: var(--mds-radius-md); }
.md-ds .md-search__form:focus-within { box-shadow: none; border-color: var(--mds-color-focus-ring); outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring); outline-offset: var(--mds-space-1); }
.md-ds .md-main { letter-spacing: normal; }
.md-ds .md-local-notice { margin: 0; padding: var(--mds-space-2) var(--mds-space-4); font-size: var(--mds-fs-small); background: var(--mds-color-surface-muted); color: var(--mds-color-text-secondary); }
.md-ds .md-header__nav a, .md-ds .md-header__repair-list { white-space: normal; }
/* Glue for the native Woo/contact controller; all visual values come from the accepted DS. */
.md-ds [data-md-ds-battery] [hidden] { display: none !important; }
.md-ds [data-md-ds-battery] .md-contact-panel {
	width: 100%;
	min-width: 0;
	margin-top: var(--mds-space-5);
	padding: var(--mds-space-5);
	border: var(--mds-size-border) solid var(--mds-color-border-line);
	border-radius: var(--mds-radius-md);
	background: var(--mds-color-surface-base);
	color: var(--mds-color-text-primary);
	text-align: start;
}
.md-ds [data-md-ds-battery] .md-contact-panel h3 {
	margin: 0 0 var(--mds-space-4);
	font-size: var(--mds-fs-title-3);
	line-height: var(--mds-lh-title);
}
.md-ds [data-md-ds-battery] .md-contact-panel p,
.md-ds [data-md-ds-battery] .md-contact-panel label {
	margin: 0 0 var(--mds-space-3);
	font-size: var(--mds-fs-body);
	line-height: var(--mds-lh-body);
}
.md-ds [data-md-ds-battery] .md-contact-panel label { display: block; }
.md-ds [data-md-ds-battery] .md-contact-message {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: calc(var(--mds-size-control) * 4);
	margin-block: var(--mds-space-3) var(--mds-space-4);
	padding: var(--mds-space-3);
	border: var(--mds-size-border) solid var(--mds-color-border-control);
	border-radius: var(--mds-radius-sm);
	background: var(--mds-color-surface-base);
	color: var(--mds-color-text-primary);
	font: inherit;
	font-size: var(--mds-fs-body);
	line-height: var(--mds-lh-body);
	resize: vertical;
}
.md-ds [data-md-ds-battery] .capture-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mds-space-3);
	align-items: center;
}
.md-ds [data-md-ds-battery] #md-service-retry {
	min-height: var(--mds-size-hit);
	padding: var(--mds-space-2) 0;
	border: 0;
	background: transparent;
	color: var(--mds-color-text-link);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.md-ds [data-md-ds-battery] :is(.md-contact-message, #md-service-retry):focus-visible {
	outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring);
	outline-offset: var(--mds-space-1);
}
.md-ds [data-md-ds-battery] #selection-error { color: var(--mds-color-text-error); }
.md-ds [data-md-ds-battery] .md-battery-nojs + .md-battery-nojs { margin-top: var(--mds-space-3); }
.md-ds [data-md-ds-battery] .md-battery-reviews iframe {
	display: block;
	width: 100%;
	max-width: var(--mds-size-measure);
	border: 0;
	border-radius: var(--mds-radius-md);
}
.md-ds [data-md-ds-battery].md-battery-has-sticky { padding-bottom: calc(var(--mds-size-sticky-bar) + var(--mds-space-6)); }
@media (max-width: 767px) {
	.md-ds [data-md-ds-battery] .md-contact-panel { padding: var(--mds-space-4); }
	.md-ds [data-md-ds-battery] .capture-actions > .mds-button { width: 100%; }
}
/* Accepted detailed hub table. Values come from the shared DS tokens. */
.mds-price-table--detailed { max-width: none; }
.mds-price-table--detailed [hidden], .md-ds [data-hub-filter][hidden],
.md-ds [data-hub-categories][hidden], .md-ds [data-hub-jump][hidden],
.md-ds [data-hub-advice][hidden], .md-ds [data-hub-wrong-model][hidden],
.md-ds [data-hub-empty][hidden] { display: none; }
.mds-price-table--detailed .mds-state__prefix { position: absolute; width: var(--mds-size-border); height: var(--mds-size-border); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mds-price-table--detailed .mds-state__rest { display: inline-block; }
.mds-price-table--detailed .mds-state__rest::first-letter { text-transform: uppercase; }
.mds-price-table__identity { display: flex; align-items: center; gap: var(--mds-space-4); min-width: 0; }
.mds-price-table__media { display: flex; flex: none; align-items: center; justify-content: center; }
.mds-price-table__media img { width: var(--mds-space-8); height: var(--mds-space-8); object-fit: contain; }
.mds-price-table__media svg { display: block; width: var(--mds-size-icon-large); height: var(--mds-size-icon-large); color: var(--mds-color-text-link); }
.mds-price-table__name { min-width: 0; overflow-wrap: anywhere; }
.mds-price-table__disclosure-label { display: block; margin-top: var(--mds-space-1); font-size: var(--mds-fs-caption); font-weight: var(--mds-fw-regular); line-height: var(--mds-lh-body); color: var(--mds-color-text-tertiary); }
.mds-price-table--detailed .mds-price-table__summary { row-gap: var(--mds-space-4); padding-block: var(--mds-space-5); }
.mds-price-table--detailed .mds-price-table__meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mds-space-4); grid-column: 1 / -1; }
.mds-price-table--detailed .mds-price-table__price,
.mds-price-table--detailed .mds-price-table__duration,
.mds-price-table__variant-price, .mds-price-table__variant-duration { display: flex; flex-direction: column; gap: var(--mds-space-1); text-align: start; min-width: 0; }
.mds-price-table--detailed .mds-price { font-size: var(--mds-fs-body); line-height: var(--mds-lh-title); font-weight: var(--mds-fw-bold); font-variant-numeric: tabular-nums; }
.mds-price-table--detailed .mds-price-table__duration,
.mds-price-table__variant-duration { font-size: var(--mds-fs-body); line-height: var(--mds-lh-title); font-variant-numeric: tabular-nums; color: var(--mds-color-text-secondary); }
.mds-price-table__field-label { display: block; font-size: var(--mds-fs-caption); font-weight: var(--mds-fw-regular); line-height: var(--mds-lh-body); color: var(--mds-color-text-tertiary); }
.mds-price-table--detailed .mds-price-table__chevron { grid-row: 1; }
.mds-price-table--detailed .mds-price-table__body { gap: var(--mds-space-5); padding-bottom: var(--mds-space-6); }
.mds-price-table--detailed .mds-price-table__variant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mds-space-3) var(--mds-space-4); padding-block: var(--mds-space-4); }
.mds-price-table--detailed .mds-price-table__variant-label { grid-column: 1 / -1; margin: 0; font-size: var(--mds-fs-body); line-height: var(--mds-lh-title); font-weight: var(--mds-fw-semibold); color: var(--mds-color-text-primary); }
.mds-price-table--detailed .mds-price-table__variant-price { grid-column: 1; }
.mds-price-table__variant-duration { grid-column: 2; }
.mds-price-table__variant-note { grid-column: 1 / -1; margin: 0; max-width: var(--mds-size-measure); font-size: var(--mds-fs-small); line-height: var(--mds-lh-body); color: var(--mds-color-text-secondary); }
.mds-price-table--detailed .mds-kv__value p { margin: 0; }
.mds-price-table--detailed .mds-kv__value { line-height: var(--mds-lh-body); }
.mds-price-table--detailed .mds-kv__value p + p { margin-top: var(--mds-space-2); }
.mds-price-table--detailed .mds-kv { max-width: none; }
.mds-inline-nav { display: flex; flex-wrap: wrap; gap: var(--mds-space-2) var(--mds-space-5); align-items: center; }
.mds-inline-nav .mds-link { display: inline-flex; align-items: center; gap: var(--mds-space-2); min-height: var(--mds-size-hit); }
.mds-inline-nav img { width: var(--mds-space-7); height: var(--mds-space-7); object-fit: contain; }
.mds-inline-nav svg { width: var(--mds-size-icon); height: var(--mds-size-icon); flex: none; }
.mds-filter { display: flex; flex-direction: column; gap: var(--mds-space-2); max-width: var(--mds-size-measure); }
.mds-filter__control { display: flex; align-items: center; gap: var(--mds-space-2); }
.mds-filter__control .mds-field__input { min-width: 0; flex: 1; }
.mds-filter__control .mds-field__input::-webkit-search-cancel-button { display: none; }
.mds-filter__clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--mds-size-control); height: var(--mds-size-control); padding: 0; border: var(--mds-size-border) solid var(--mds-color-border-control); border-radius: var(--mds-radius-md); background: var(--mds-color-surface-base); color: var(--mds-color-text-primary); cursor: pointer; }
.mds-filter__clear[hidden] { display: inline-flex; visibility: hidden; pointer-events: none; }
.mds-filter__clear:focus-visible { outline: var(--mds-size-focus-ring) solid var(--mds-color-focus-ring); outline-offset: var(--mds-size-focus-ring); }
.mds-model-heading { display: flex; align-items: center; gap: var(--mds-space-4); }
.mds-model-heading__image { flex: none; width: var(--mds-space-8); height: var(--mds-space-8); object-fit: contain; }
.mds-model-heading .mds-page-title__h1 { min-width: 0; }
@media (min-width: 768px) {
	.mds-price-table--detailed .mds-price-table__head,
	.mds-price-table--detailed .mds-price-table__summary,
	.mds-price-table--detailed .mds-price-table__variant { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) var(--mds-space-5); }
	.mds-price-table--detailed .mds-price-table__meta { display: contents; }
	.mds-price-table--detailed .mds-price-table__price,
	.mds-price-table--detailed .mds-price-table__variant-price { grid-column: 2; text-align: end; }
	.mds-price-table--detailed .mds-price-table__duration,
	.mds-price-table__variant-duration { grid-column: 3; text-align: end; }
	.mds-price-table--detailed .mds-price-table__variant-label { grid-column: 1; }
	.mds-price-table--detailed .mds-price-table__summary .mds-price-table__field-label { position: absolute; width: var(--mds-size-border); height: var(--mds-size-border); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.mds-price-table--detailed .mds-price-table__summary { padding-block: var(--mds-space-4); }
}