/* um-reviews — Mercedes skin.
 *
 * Same block as on bmw.union-motors.ru and the Nissan test bed: geometry, structure and
 * interaction come from the design document "Nissan Union Motors — Главная", section
 * «Отзывы» (desktop artboard 1440 / 64px gutters, mobile 390 / 20px, one responsive
 * implementation with a single 900px breakpoint). Only the SKIN is Mercedes, and every
 * value below that differs from the BMW file was MEASURED on mercedes.union-motors.ru
 * (11.08.2026, /maintenance/ at 1920/1440/1024/900/768/390), not invented:
 *
 *   heading font  daimlercac-regular — the site's real brand face (theme
 *                 assets/fonts/daimler-cac-regular.woff2, document.fonts reports it
 *                 LOADED). Every section heading on the site uses it: «Отзывы клиентов —
 *                 лучшая рекомендация» and «Примеры работ» both compute to
 *                 daimlercac-regular 50px/60px weight 500 #262626 — this block copies that.
 *   body font     MBCorpoS, Arial, sans-serif — the stack the site's body copy declares
 *                 (.wc-item-text 16px/24px). 🔴 MBCorpoS has NO @font-face anywhere on the
 *                 site, so it renders in Arial; the stack is written as the site writes it
 *                 so this block picks up the same face, and any future real MBCorpoS
 *                 automatically applies here too.
 *   accent        #3366cc = --main-color as the page prints it (the site's link/price/CTA
 *                 blue: .wc-btn-phone background, .cs-case-price colour, active .csf-chip).
 *   stars         #FFCC00 = the filled-star fill of the SmartWidgets widget already on
 *                 every Mercedes page, so both review surfaces read as one set.
 *   ink           #1a1a1a headings (.cs-heading), #262626 body (--text-main-color).
 *   line          #E0E3E8 = the site's own hairline (.csf-chip border).
 *   radius        tabs 999px (the site's own filter pills .csf-chip), buttons 8px
 *                 (.wc-btn), the «Читать полностью» word stays a 0-radius underline.
 *   gutters       --umr-pad = 9.1145833333vw, i.e. exactly half of what .wrapper leaves
 *                 free (width: 81.7708333333vw in main.css), so the full-bleed band's
 *                 content lines up with the page's text column at every width; below the
 *                 site's own 768px breakpoint .wrapper widens to 86.25vw and the pad
 *                 follows it to 6.875vw.
 *
 * 🔴 Two deliberate deviations from "copy the site literally", both recorded here and in
 * ДОКУМЕНТАЦИЯ/um-reviews.md:
 *   1. WITHDRAWN 18.08.2026 (owner). Below 699px the site's section headings compute to
 *      «MBCorpoA, Georgia, serif» 26px/40px — MBCorpoA has no @font-face either, so the
 *      site's mobile headings actually render in Georgia SERIF. This block used to keep the
 *      brand face there; it now copies the site literally, because the brand face is
 *      condensed and read as a smaller, different-style heading next to the others.
 *   2. The heading is not wired to --um-h2-fs/--um-h2-lh: unlike BMW, this site defines no
 *      such variables (checked in the computed style of :root and body), so the size is
 *      written out at the values measured above.
 *
 * Every selector is prefixed `.umr[data-umr]` for the same reason as on the other sites:
 * the block is printed inside page content, where theme rules on bare tags outrank a plain
 * class and would silently reset font size, colour and margins.
 */

/* The gutter lives on :root as well as on the block: the showcase page (/rev-showcase/) has to
   indent its own headings and insert codes by exactly the same amount, and that CSS is printed by
   um-reviews-blocks.php, which is one shared file across sites — so the value has to travel as a
   variable, not as a number. Breakpoint mirrors main.css: .wrapper is 81.7708333333vw and widens
   to 86.25vw at 768px. */
/* 18.08.2026: both steps gained `- var(--umr-sbw)/2`. vw counts the scrollbar and the centred
   .wrapper does not, so the plain vw gutter left the block's content ~7px inside the page column
   on a scrollbar browser (measured at a 1440 viewport: page column 124…1301, block content
   131…1294). --umr-sbw is measured and published on :root by um-reviews.js and is 0 where the
   platform draws overlay scrollbars, so the term simply vanishes there. Same fix applied to BMW,
   where the mismatch was 60px per side rather than 7 (see that file's header). */
:root { --umr-gutter: calc(9.1145833333vw - var(--umr-sbw, 0px) / 2); }
@media (max-width: 768px) { :root { --umr-gutter: calc(6.875vw - var(--umr-sbw, 0px) / 2); } }

.umr[data-umr] {
	--umr-accent: #3366cc;
	--umr-accent-dark: #274f9e;   /* darker step of the accent for :hover — the site has no
	                                 hover state of its own on .wc-btn to copy */
	--umr-star: #FFCC00;
	--umr-line: #E0E3E8;
	--umr-ink: #1a1a1a;
	--umr-ink-2: #262626;
	--umr-ink-3: #6E6E6E;
	--umr-ink-4: #949494;
	--umr-soft: #F7F7F7;
	--umr-soft-2: #F1F1F1;
	--umr-pad: var(--umr-gutter, 9.1145833333vw);   /* = (100 - 81.7708333333) / 2, the .wrapper gutter */
	--umr-font: MBCorpoS, Arial, sans-serif;
	--umr-font-h: daimlercac-regular, MBCorpoS, Arial, sans-serif;

	font-family: var(--umr-font);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	padding: 96px 0;
	color: var(--umr-ink);
	background: #FFFFFF;

	/* The design is a full-width band, but the block is dropped inside the page's
	   centred `.wrapper`, which would squeeze the row down to two cards. 50% resolves
	   against that wrapper's content box and 50vw against the viewport, so the
	   difference is exactly its margin plus padding — the band spans the site width
	   again without needing to know either number. */
	/* --umr-sbw is published by um-reviews.js: 50vw counts the scrollbar, so without it the
	   band runs past the visible page and the document gains a horizontal scroll. */
	margin-left: calc(50% - 50vw + var(--umr-sbw, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--umr-sbw, 0px) / 2);
}

.umr[data-umr] *,
.umr[data-umr] *::before,
.umr[data-umr] *::after { box-sizing: border-box; }

/* main.css sets `-webkit-appearance: button`, which lets Chrome paint its own chrome
   under ours — visible as ticks at the corners of a button we only gave a bottom rule to. */
.umr[data-umr] button {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.umr[data-umr] .umr__track,
.umr[data-umr] .umr__tabs {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.umr[data-umr] .umr__track::-webkit-scrollbar,
.umr[data-umr] .umr__tabs::-webkit-scrollbar { width: 0; height: 0; }

.umr[data-umr] .umr-star { flex: none; color: var(--umr-line); }
.umr[data-umr] .umr-star.is-on { color: var(--umr-star); }

/* ------------------------------------------------------------------ header */

.umr[data-umr] .umr__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 56px;
	padding: 0 var(--umr-pad);
	margin-bottom: 32px;
}

/* The site's own section heading, measured: daimlercac-regular 50px/60px weight 500.
   This site defines no --um-h2-fs/--um-h2-lh variables (BMW does), so the numbers are
   written out here and the mobile size lives in the 900px block below. */
.umr[data-umr] .umr__title {
	margin: 0 0 12px;
	font-family: var(--umr-font-h);
	font-size: 50px;
	line-height: 60px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--umr-ink);
}

.umr[data-umr] .umr__lead {
	margin: 0;
	font: 400 17px/1.6 var(--umr-font);
	color: var(--umr-ink-2);
	max-width: 60ch;
}

.umr[data-umr] .umr__leave {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font: 500 16px/1 var(--umr-font);
	color: var(--umr-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--umr-ink);
	padding-bottom: 4px;
	transition: color .18s cubic-bezier(.2,0,.2,1), border-color .18s cubic-bezier(.2,0,.2,1);
}
.umr[data-umr] .umr__leave:hover { color: var(--umr-accent); border-color: var(--umr-accent); }
.umr[data-umr] .umr__leave svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------ tabs + overall rating box */

.umr[data-umr] .umr__panel {
	display: flex;
	flex-direction: column;
	margin: 0 var(--umr-pad) 40px;
	border: 1px solid var(--umr-line);
}

.umr[data-umr] .umr__tabs {
	display: flex;
	gap: 8px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--umr-line);
	overflow-x: auto;
}

.umr[data-umr] .umr__tab {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--umr-line);
	border-radius: 999px;   /* the site's own filter pill, .csf-chip */
	background: #FFFFFF;
	color: var(--umr-ink);
	font: 400 15px/1 var(--umr-font);
	cursor: pointer;
	transition: background .18s cubic-bezier(.2,0,.2,1), color .18s cubic-bezier(.2,0,.2,1), border-color .18s cubic-bezier(.2,0,.2,1);
}
.umr[data-umr] .umr__tab b { font-weight: 700; }

/* Platform mark in front of the tab label. The marks are the platforms' own, kept as
   local files so the block still paints with no third-party request; «Все отзывы» has no
   platform behind it and carries none. */
.umr[data-umr] .umr__tab-ico {
	width: 18px;
	height: 18px;
	flex: none;
	display: block;
	object-fit: contain;
}
/* The design fills the active tab with its ink; here the accent takes that role — the
   site's own active filter pill (.csf-chip.is-active) is exactly #3366cc on white text. */
.umr[data-umr] .umr__tab.is-active {
	background: var(--umr-accent);
	color: #FFFFFF;
	border-color: var(--umr-accent);
}

/* A platform the collector has a rating for, but whose reviews this block's rules filtered
   out. Its ratings are inside «На основе N оценок», so the chip stays and states the score —
   there is just nothing to switch to, hence inert rather than hidden (owner, 17.08.2026). */
.umr[data-umr] .umr__tab.is-empty {
	cursor: default;
	background: var(--umr-soft);
	color: var(--umr-ink-4);
}
.umr[data-umr] .umr__tab.is-empty .umr__tab-ico { opacity: .5; }

.umr[data-umr] .umr__summary {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 26px 28px;
}

.umr[data-umr] .umr__score-wrap {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.umr[data-umr] .umr__score {
	font: 500 44px/1 var(--umr-font-h);
	letter-spacing: 0;
	color: var(--umr-ink);
}
.umr[data-umr] .umr__of {
	font: 400 20px/1 var(--umr-font);
	color: var(--umr-ink-4);
}
/* «из 5» and the star row live in ONE flex row (`.umr__of-row`, markup in
   um-reviews-render.php), so `align-items: center` centres the stars on the «5» itself.
   This replaces the measured `margin-top` offsets used until 17.08.2026, which centred the
   star row against the 44px `.umr__score` and then had to be re-measured per site and per
   font-size change. Star size raised 22 → 26px (owner, 18.08.2026: «звёзды сделать
   побольше размером и отцентрировать по центру пятёрки»). */
.umr[data-umr] .umr__of-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.umr[data-umr] .umr__stars {
	display: flex;
	gap: 5px;
}
.umr[data-umr] .umr__stars .umr-star { width: 26px; height: 26px; }
/* Same row-vs-`.umr__of` mismatch as `.umr__stars` above (this item is also centred against
   the 44px `.umr__score`, not against `.umr__of` next to it). Centring this one on `.umr__of`'s
   BOX (17px, box-centre match) put it visually below the row — the owner still read the stars
   as "low" with it there, because a long caption with full-height Cyrillic glyphs (unlike the
   short "из 5") reads heavier toward its own box-bottom than the box-centre metric captures.
   margin-top: 22px instead matches `.umr__basis`'s BOTTOM edge to `.umr__of`'s BOTTOM edge
   (getBoundingClientRect, 17.08.2026) — i.e. it sits on the same line as "из 5" rather than
   centred against it. Below 900px `.umr__basis` gets `flex-basis: 100%` and wraps to its own
   line, so it never needs this: nothing there to level it against. */
.umr[data-umr] .umr__basis {
	font: 400 15px/1 var(--umr-font);
	color: var(--umr-ink-3);
	margin-top: 22px;
}

/* ------------------------------------------------------------------ slider */

.umr[data-umr] .umr__frame {
	margin: 0 var(--umr-pad);
	border: 1px solid var(--umr-line);
}

/* gap:1px over a grey backdrop draws the hairlines between cards */
.umr[data-umr] .umr__track {
	display: flex;
	gap: 1px;
	background: var(--umr-line);
	overflow-x: auto;
	/* The row scrolls sideways only. The mobile motion sinks off-centre cards, and a
	   scroll container counts that as content — without this the row would take a
	   vertical swipe and drift up and down inside its own frame. The padding below
	   leaves the sunken card room, so nothing is clipped by this. */
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	cursor: grab;
}
.umr[data-umr] .umr__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

/* Exactly three cards per view at any desktop width: three cards plus the two 1px
   hairlines between them have to add up to the track's full width, hence -2px and not
   more. Subtracting 4px (as this did until 04.08.2026) left 2px over at the right edge
   — one pixel of track backdrop plus the first pixel of the next card — which read as a
   second hairline running alongside the frame border, and as a doubled line on the left
   once the row was scrolled. */
.umr[data-umr] .umr__slide {
	flex: none;
	width: calc((100% - 2px) / 3);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	padding: 36px 32px 32px;
	will-change: transform, opacity;
	/* On mobile the transform is recomputed every scroll frame — a transition here
	   would make the row lag behind the finger. */
	transition: none;
}
.umr[data-umr] .umr__slide[hidden] { display: none; }

.umr[data-umr] .umr-card__head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 22px;
}

.umr[data-umr] .umr-card__ava {
	flex: none;
	width: 48px;
	height: 48px;
	background: var(--umr-soft-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 18px/1 var(--umr-font);
	color: var(--umr-ink-3);
	object-fit: cover;
}

.umr[data-umr] .umr-card__name {
	font: 700 17px/1.3 var(--umr-font);
	color: var(--umr-ink);
	margin-bottom: 8px;
}

.umr[data-umr] .umr-card__stars {
	display: flex;
	gap: 3px;
	margin-bottom: 8px;
}
.umr[data-umr] .umr-card__stars .umr-star { width: 14px; height: 14px; }

.umr[data-umr] .umr-card__meta {
	font: 400 13px/1.4 var(--umr-font);
	color: var(--umr-ink-4);
}

/* The text box is FIXED at four lines: clamped from above and held from below by the same
   number. Cards are a stretched flex row, so before this the tallest text in a row set the
   height of every card in it and a short review left a band of empty white above «Читать
   полностью». Equal text boxes make every card the same height by construction, and the
   card is shorter than it used to be — the point of the 04.08.2026 pass. */
.umr[data-umr] .umr-card__text {
	margin: 0 0 20px;
	font: 400 16px/1.6 var(--umr-font);
	color: var(--umr-ink-2);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 4;
	min-height: 6.4em;   /* 4 lines × 1.6 line-height */
	max-width: none;
	white-space: pre-line;
}
.umr[data-umr] .umr__slide.is-open .umr-card__text {
	-webkit-line-clamp: 40;
	min-height: 0;
}

/* Most reviews carry no photos, so a card that has them would stand taller and — since
   the cards are a stretched flex row — drag every neighbour up with it. They live behind
   «Читать полностью» instead, which is also what reveals the full text. */
.umr[data-umr] .umr-card__photos {
	display: none;
	gap: 8px;
	margin: 0 0 20px;
}
.umr[data-umr] .umr__slide.is-open .umr-card__photos { display: flex; }
.umr[data-umr] .umr-card__photos img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	background: var(--umr-soft-2);
	display: block;
}

.umr[data-umr] .umr-card__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 24px;
}

/* A plain word with a 1px rule under it — see the appearance reset at the top of the
   file, without which Chrome draws its own button frame around this. */
.umr[data-umr] .umr-card__more {
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font: 400 15px/1 var(--umr-font);
	color: var(--umr-ink);
	border-bottom: 1px solid var(--umr-ink);
	padding: 0 0 3px;
	transition: color .18s cubic-bezier(.2,0,.2,1), border-color .18s cubic-bezier(.2,0,.2,1);
}
.umr[data-umr] .umr-card__more:hover { color: var(--umr-accent); border-color: var(--umr-accent); }
.umr[data-umr] .umr-card__more[hidden] { display: none; }

.umr[data-umr] .umr-card__src {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 13px/1 var(--umr-font);
	color: var(--umr-ink-3);
	text-decoration: none;
}
.umr[data-umr] .umr-card__src .umr-star { width: 12px; height: 12px; color: var(--umr-star); }
.umr[data-umr] .umr-card__src:hover { color: var(--umr-ink); }

/* trailing card: hands out the next batch, and is hidden once the tab has none left —
   the design's "open all reviews on the platform" state was dropped (owner, 17.08.2026) */
.umr[data-umr] .umr__more-card {
	background: var(--umr-soft);
	justify-content: flex-end;
}
.umr[data-umr] .umr__more-title {
	font: 500 52px/1 var(--umr-font-h);
	letter-spacing: 0;
	color: var(--umr-ink);
}
.umr[data-umr] .umr__more-sub {
	margin: 16px 0 0;
	font: 400 16px/1.6 var(--umr-font);
	color: var(--umr-ink-2);
	max-width: none;
}
.umr[data-umr] .umr__more-cta {
	margin-top: 28px;
	align-self: flex-start;
	height: 48px;
	display: inline-flex;
	align-items: center;
	padding: 0 22px;
	background: var(--umr-accent);
	border: none;
	border-radius: 8px;   /* the site's own primary button, .wc-btn */
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	font: 500 16px/1 var(--umr-font);
	transition: background .18s cubic-bezier(.2,0,.2,1);
}
.umr[data-umr] .umr__more-cta:hover { background: var(--umr-accent-dark); color: #FFFFFF; }

/* -------------------------------------------------------------- navigation */

.umr[data-umr] .umr__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 var(--umr-pad);
	margin-top: 32px;
}

.umr[data-umr] .umr__arrows {
	display: flex;
	gap: 12px;
	flex: none;
}

.umr[data-umr] .umr__arrow {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid var(--umr-ink);
	border-radius: 8px;   /* same 8px as the site's buttons */
	color: var(--umr-ink);
	cursor: pointer;
	transition: background .18s cubic-bezier(.2,0,.2,1), color .18s cubic-bezier(.2,0,.2,1), border-color .18s cubic-bezier(.2,0,.2,1);
}
.umr[data-umr] .umr__arrow:hover { background: var(--umr-accent); border-color: var(--umr-accent); color: #FFFFFF; }
.umr[data-umr] .umr__arrow svg { width: 20px; height: 20px; }

.umr[data-umr] .umr__progress {
	flex: 1;
	height: 2px;
	background: var(--umr-line);
	position: relative;
	overflow: hidden;
}
.umr[data-umr] .umr__bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	background: var(--umr-accent);
	transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.umr[data-umr] .umr__shown,
.umr[data-umr] .umr__pos {
	flex: none;
	font: 400 14px/1 var(--umr-font);
	color: var(--umr-ink-3);
}
.umr[data-umr] .umr__pos { display: none; }

/* The gutter is a vw fraction of the site's own .wrapper, so it needs no breakpoint of its
   own until the site moves its wrapper: main.css widens .wrapper to 86.25vw at 768px. */
/* --umr-pad follows --umr-gutter, whose own 768px step is declared at the top of this file
   next to the .wrapper numbers it comes from. */

/* Heading size follows the SITE, not this block's layout breakpoint. main.css switches every
   section heading at `@media (max-width: 699px)` (measured 11.08.2026: 50px at 700, 26px at 699),
   while the card row has to become a carousel already at 900px. Keeping the two apart is what
   stops the block printing a 26px heading in the 700–900 band where every other heading on the
   page is still 50px.
   🔴 18.08.2026 — deviation 1 from the file header REVERSED by the owner: below 699px the
   heading now copies `.editor h2` literally (main.css:18691 — MBCorpoA, Georgia, serif / 26px /
   400 / line-height calc(32px + 8px) = 40px). The brand face daimlercac-regular is CONDENSED
   (measured: the same 26px string renders 392px in it vs 526px in Georgia), so keeping it here
   made this heading read visibly smaller and stylistically apart from «Примеры работ» and
   «Наша команда» right next to it — the owner's report was «размер заголовка меньше, чем
   остальные заголовки на стр». Above 699px nothing changes: there the site's own heading IS
   daimlercac-regular 50px/60px, which the base rule already matches. */
@media (max-width: 699px) {
	.umr[data-umr] .umr__title {
		font-family: MBCorpoA, Georgia, serif;
		font-size: 26px;
		line-height: 40px;
		font-weight: 400;
	}
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 900px) {
	.umr[data-umr] {
		padding: 56px 0;
	}

	.umr[data-umr] .umr__head { margin-bottom: 0; }
	.umr[data-umr] .umr__title { margin: 0 0 14px; }
	.umr[data-umr] .umr__lead,
	.umr[data-umr] .umr__leave { display: none; }

	/* the mobile artboard puts the score above the platform tabs */
	.umr[data-umr] .umr__panel {
		flex-direction: column-reverse;
		margin: 0 0 20px;
		border: none;
	}

	.umr[data-umr] .umr__tabs {
		padding: 0 var(--umr-pad);
		border-bottom: none;
		margin-top: 20px;
	}
	.umr[data-umr] .umr__tab {
		height: 34px;
		padding: 0 14px;
		gap: 8px;
		font: 400 14px/1 var(--umr-font);
	}
	.umr[data-umr] .umr__tab-ico { width: 16px; height: 16px; }

	.umr[data-umr] .umr__summary {
		flex-wrap: wrap;
		align-items: baseline;
		gap: 8px;
		padding: 0 var(--umr-pad);
	}
	.umr[data-umr] .umr__score { font: 500 30px/1 var(--umr-font-h); }
	.umr[data-umr] .umr__of { font: 400 15px/1 var(--umr-font); }
	/* Stars are centred on «из 5» by `.umr__of-row` (see the desktop rule) — no measured
	   offset here any more. Size raised 17 → 22px with the desktop step. */
	.umr[data-umr] .umr__of-row { gap: 8px; }
	.umr[data-umr] .umr__stars .umr-star { width: 22px; height: 22px; }
	.umr[data-umr] .umr__basis {
		flex-basis: 100%;
		margin-top: 2px;
		font: 400 13px/1.4 var(--umr-font);
	}

	.umr[data-umr] .umr__frame { margin: 0; border: none; }

	.umr[data-umr] .umr__track {
		gap: 12px;
		background: transparent;
		/* The motion below sinks off-centre cards by up to 30px. Without room for it the
		   track — a scroll container — would gain 20px of vertical scroll and swallow
		   upward swipes. The nav row is pulled back up by the same amount so the gap
		   under the cards stays the 20px the design draws. */
		padding: 0 var(--umr-pad) 30px;
		scroll-padding-left: var(--umr-pad);
	}

	.umr[data-umr] .umr__slide {
		width: 290px;
		background: var(--umr-soft);
		padding: 20px;
	}

	.umr[data-umr] .umr-card__head { gap: 12px; margin-bottom: 14px; }
	.umr[data-umr] .umr-card__ava {
		width: 38px;
		height: 38px;
		background: #FFFFFF;
		font: 700 15px/1 var(--umr-font);
	}
	.umr[data-umr] .umr-card__name { font: 700 15px/1.3 var(--umr-font); margin-bottom: 6px; }
	.umr[data-umr] .umr-card__stars { margin-bottom: 6px; }
	.umr[data-umr] .umr-card__stars .umr-star { width: 12px; height: 12px; }
	.umr[data-umr] .umr-card__meta { font: 400 12px/1.4 var(--umr-font); }
	/* Phones read one card at a time, so the card has to fit the screen with the section
	   heading and the nav row still in view — four lines here too, not seven. */
	.umr[data-umr] .umr-card__text {
		margin: 0 0 14px;
		font: 400 15px/1.6 var(--umr-font);
		-webkit-line-clamp: 4;
		min-height: 6.4em;
	}
	.umr[data-umr] .umr-card__photos { margin: 0 0 16px; }
	.umr[data-umr] .umr-card__photos img { width: 62px; height: 62px; }
	.umr[data-umr] .umr-card__foot { gap: 10px; padding-top: 14px; }
	.umr[data-umr] .umr-card__more { font: 400 14px/1 var(--umr-font); }
	.umr[data-umr] .umr-card__src { gap: 6px; font: 400 12px/1 var(--umr-font); }
	.umr[data-umr] .umr-card__src .umr-star { width: 11px; height: 11px; }

	.umr[data-umr] .umr__more-card { background: var(--umr-soft-2); }
	.umr[data-umr] .umr__more-title { font: 500 34px/1 var(--umr-font-h); }
	.umr[data-umr] .umr__more-sub { margin: 12px 0 0; font: 400 14px/1.5 var(--umr-font); }
	.umr[data-umr] .umr__more-cta {
		margin-top: 20px;
		height: 44px;
		padding: 0 18px;
		font: 500 15px/1 var(--umr-font);
	}

	.umr[data-umr] .umr__nav {
		margin: -10px var(--umr-pad) 0;
		padding: 0;
		gap: 14px;
	}
	.umr[data-umr] .umr__arrows { order: 3; gap: 8px; }
	.umr[data-umr] .umr__arrow { width: 44px; height: 44px; }
	.umr[data-umr] .umr__arrow svg { width: 18px; height: 18px; }
	.umr[data-umr] .umr__progress { order: 1; }
	.umr[data-umr] .umr__shown { display: none; }
	.umr[data-umr] .umr__pos {
		display: block;
		order: 2;
		font: 400 13px/1 var(--umr-font);
	}
}

/* ==================================================================== view=col
   Тот же блок в узкой колонке: правая треть первого экрана (.um-hero2-rev) и
   колонка рядом с видео на странице кейса (.cs-tcv-rev). Отличия только в
   раскладке: полосы во всю ширину нет (--umr-pad = 0, поля обнулены), в кадре
   одна карточка, текст отзыва режется по трём строкам вместо четырёх, чтобы
   колонка была ровно той же высоты, что видео 16:9 рядом.
   Правила стоят В КОНЦЕ файла и все идут по .umr[data-umr].umr--col: медиазапросы
   выше объявляют те же свойства с меньшей силой, иначе на 900px колонка вернулась
   бы к раскладке полосы. */
.umr[data-umr].umr--col {
	--umr-pad: 0px;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}
.umr[data-umr].umr--col .umr__head { display: none; }

.umr[data-umr].umr--col .umr__panel { margin: 0 0 10px; }
.umr[data-umr].umr--col .umr__tabs { gap: 6px; padding: 10px 12px; }
.umr[data-umr].umr--col .umr__tab { height: 34px; padding: 0 12px; gap: 7px; font-size: 13px; }
.umr[data-umr].umr--col .umr__tab-ico { width: 16px; height: 16px; }
.umr[data-umr].umr--col .umr__summary { gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.umr[data-umr].umr--col .umr__score { font-size: 30px; }
.umr[data-umr].umr--col .umr__of { font-size: 15px; }
.umr[data-umr].umr--col .umr__of-row { gap: 8px; }
.umr[data-umr].umr--col .umr__stars { gap: 3px; }
.umr[data-umr].umr--col .umr__stars .umr-star { width: 17px; height: 17px; }
.umr[data-umr].umr--col .umr__basis { margin-top: 0; font-size: 13px; }
/* «Все отзывы» — та же ссылка на раздел, что раньше дорисовывал скрипт в шапке виджета
   вендора. Прижата к правому краю нижнего ряда, рядом со счётчиком. */
.umr[data-umr] .umr__all {
	margin-left: auto;
	flex: none;
	font: 400 14px/1 var(--umr-font);
	color: var(--umr-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--umr-ink);
	padding-bottom: 3px;
	transition: color .18s cubic-bezier(.2,0,.2,1), border-color .18s cubic-bezier(.2,0,.2,1);
}
.umr[data-umr] .umr__all:hover { color: var(--umr-accent); border-color: var(--umr-accent); }
.umr[data-umr].umr--dark .umr__all { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.umr[data-umr].umr--dark .umr__all:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.umr[data-umr].umr--col .umr__frame { margin: 0; flex: 1 1 auto; min-height: 0; }
.umr[data-umr].umr--col .umr__track { height: 100%; }
.umr[data-umr].umr--col .umr__slide { width: 100%; padding: 16px 16px 14px; }
.umr[data-umr].umr--col .umr-card__head { gap: 12px; margin-bottom: 12px; }
.umr[data-umr].umr--col .umr-card__ava { width: 40px; height: 40px; font-size: 16px; }
.umr[data-umr].umr--col .umr-card__text {
	margin: 0 0 12px;
	font-size: 15px;
	-webkit-line-clamp: 3;
	min-height: 4.8em;   /* 3 строки × 1.6 */
}
.umr[data-umr].umr--col .umr__slide.is-open .umr-card__text { min-height: 0; }
.umr[data-umr].umr--col .umr-card__foot { gap: 10px; padding-top: 12px; }
.umr[data-umr].umr--col .umr-card__more { font-size: 14px; }

.umr[data-umr].umr--col .umr__more-card { padding: 18px; }
.umr[data-umr].umr--col .umr__more-title { font-size: 26px; }
.umr[data-umr].umr--col .umr__more-sub { margin: 8px 0 0; font-size: 13px; }
.umr[data-umr].umr--col .umr__more-cta { margin-top: 14px; height: 42px; font-size: 14px; }

.umr[data-umr].umr--col .umr__nav { margin: 10px 0 0; padding: 0; gap: 14px; }
.umr[data-umr].umr--col .umr__arrow { width: 40px; height: 40px; }
.umr[data-umr].umr--col .umr__arrow svg { width: 17px; height: 17px; }
.umr[data-umr].umr--col .umr__shown { display: none; }
.umr[data-umr].umr--col .umr__pos { display: block; font-size: 13px; }

/* ============================================================ skin=dark
   Первый экран стоит на чёрной полосе (.um-hero2 background #000), поэтому
   колонка в нём берёт тёмные токены. Значения повторяют прежнюю тёмную правку
   виджета вендора в custom.css: карточка #1E1E1E, текст #E6E6E6, подписи
   #9E9E9E, активная точка #36C. Меняются только переменные и три фона, вся
   геометрия общая с обычным блоком. */
.umr[data-umr].umr--dark {
	--umr-line: #333333;
	--umr-ink: #FFFFFF;
	--umr-ink-2: #E6E6E6;
	--umr-ink-3: #9E9E9E;
	--umr-ink-4: #7A7A7A;
	--umr-soft: #1E1E1E;
	--umr-soft-2: #2A2A2A;
	background: transparent;
	color: #FFFFFF;
}
.umr[data-umr].umr--dark .umr__slide,
.umr[data-umr].umr--dark .umr__more-card { background: #1E1E1E; }
.umr[data-umr].umr--dark .umr__tab { background: transparent; color: #FFFFFF; }
.umr[data-umr].umr--dark .umr__tab.is-active { background: #FFFFFF; color: #141414; border-color: #FFFFFF; }
.umr[data-umr].umr--dark .umr__arrow { background: transparent; color: #FFFFFF; }
.umr[data-umr].umr--dark .umr__arrow:hover { background: #FFFFFF; border-color: #FFFFFF; color: #141414; }
.umr[data-umr].umr--dark .umr-card__more { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.umr[data-umr].umr--dark .umr-card__more:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }
.umr[data-umr].umr--dark .umr-card__src:hover { color: #FFFFFF; }
.umr[data-umr].umr--dark .umr__bar { background: #36C; }