/* Compare — every van in one table; phones scroll it sideways with the labels pinned. */
.lr.cmp { --lr-cmp-hl: var(--lr-amber); padding: 112px 0; background: var(--lr-white); color: var(--lr-ink); }
.lr .cmp__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 40px; }
.lr .cmp__head .lead { margin: 0; max-width: 32em; }

.lr .cmp__scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--lr-line); border-radius: 20px; background: var(--lr-white); }
.lr .cmp__scroll:focus-visible { outline: 3px solid var(--lr-amber); outline-offset: 3px; }
.lr .cmp__table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 15.5px; table-layout: fixed; }
.lr .cmp__table th, .lr .cmp__table td { padding: 16px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--lr-line); background: var(--lr-white); line-height: 1.45; }
.lr .cmp__table tbody tr:last-child th, .lr .cmp__table tbody tr:last-child td { border-bottom: 0; }
.lr .cmp__table thead th { vertical-align: bottom; padding-top: 28px; }
.lr .cmp__table tbody th { font-weight: 500; font-size: 14px; color: var(--lr-steel); }
.lr .cmp__table th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; border-right: 1px solid var(--lr-line); }
.lr .cmp__corner { font-weight: 500; font-size: 14px; color: var(--lr-steel); }

.lr .cmp__van { position: relative; }
.lr .cmp__pic { display: flex; align-items: flex-end; height: 96px; margin-bottom: 14px; }
.lr .cmp__pic.is-drawing { height: calc(96px * var(--lr-h, 1)); margin-top: calc(96px * (1 - var(--lr-h, 1))); }
.lr .cmp__pic .cmp__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: 0 100%; }
.lr .cmp__pic:not(.is-drawing) .cmp__img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.lr .cmp__name { display: block; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--lr-ink); text-decoration: none; }
.lr a.cmp__name:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lr-amber); }
.lr .cmp__badge { position: absolute; top: 10px; left: 18px; font-size: 12.5px; font-weight: 600; color: var(--lr-night); background: var(--lr-cmp-hl); border-radius: 999px; padding: 3px 10px; }

.lr .cmp__table .is-hl { background: #fffaf0; }
.lr .cmp__table thead .is-hl { box-shadow: inset 0 4px 0 var(--lr-cmp-hl); }
.lr .cmp__row--vol td, .lr .cmp__row--len td, .lr .cmp__row--h td, .lr .cmp__row--pay td { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lr .cmp__row--good td { color: var(--lr-ink-2); }
.lr .cmp__row--price b { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.lr .cmp__per, .lr .cmp__call { color: var(--lr-steel); font-size: 14px; }
.lr .cmp__row--link a { color: var(--lr-ink); font-size: 14.5px; }
.lr .cmp__row--link a:hover { color: var(--lr-amber-d); }

@media (max-width: 1100px) {
	.lr .cmp__head { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.lr.cmp { padding: 64px 0; }
	.lr .cmp__head { margin-bottom: 24px; gap: 12px; }
	.lr .cmp__scroll { border-radius: 16px; }
	.lr .cmp__table { min-width: 760px; font-size: 14.5px; }
	.lr .cmp__table th, .lr .cmp__table td { padding: 14px 14px; }
	.lr .cmp__table th:first-child { width: 104px; }
	.lr .cmp__pic { height: 64px; }
	.lr .cmp__pic.is-drawing { height: calc(64px * var(--lr-h, 1)); margin-top: calc(64px * (1 - var(--lr-h, 1))); }
}