/* Каталог и карточки авто. Поверх общего ui.css, ничего из него не переопределяет.
   Тёмная тема сайта, красный акцент — из фирменных цветов Sunrise. */

:root {
	--sa-red: #c81414;
	--sa-red-hot: #ff0000;
	--sa-ink: #ffffff;
	--sa-muted: #9a9aa2;
	--sa-bg: #000000;
	--sa-panel: #171717;
	--sa-line: rgba(255, 255, 255, .10);
	--sa-ok: #35c07a;
}

.container { width: min(1520px, 94vw); margin-inline: auto; }
.accent { color: var(--sa-red-hot); }

/* ---- шапка ---- */
.sa-head { position: sticky; top: 0; z-index: 40; background: rgba(11, 11, 13, .92);
	backdrop-filter: blur(10px); border-bottom: 1px solid var(--sa-line); }
.sa-head__row { display: flex; align-items: center; gap: 22px; height: 64px; }
.sa-head__logo img { display: block; height: 34px; width: auto; }
.sa-head__nav { display: none; gap: 20px; margin-left: 8px; }
.sa-head__nav a { color: var(--sa-ink); text-decoration: none; font-size: 15px; opacity: .88; }
.sa-head__nav a:hover { opacity: 1; color: #fff; }
.sa-head__phone { margin-left: auto; color: var(--sa-ink); text-decoration: none; font-weight: 600; font-size: 15.5px; }
.sa-head__cta { flex: none; }
.sa-head__burger { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.sa-head__burger span { width: 22px; height: 2px; background: var(--sa-ink); border-radius: 2px; }
@media (min-width: 980px) { .sa-head__nav { display: flex; } .sa-head__burger { display: none; } }

/* ---- заголовок лент ---- */
.sa-reels-head { padding: 30px 0 6px; }
.sa-reels-head h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 6px; color: #fff; }
.sa-reels-head p { color: var(--sa-muted); margin: 0; }

/* ---- лента (карусель) ---- */
.sa-reel { padding: 26px 0; }
.sa-reel__head { font-size: clamp(19px, 2.4vw, 26px); color: #fff; margin: 0 0 16px; font-weight: 700; }
.sa-reel__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
	gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 10px; scrollbar-width: thin;
}
.sa-reel__track > * { scroll-snap-align: start; }
@media (min-width: 980px) { .sa-reel__track { grid-auto-columns: minmax(0, 1fr); grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; overflow: visible; } }
.sa-reel__all { display: inline-flex; margin-top: 16px; }

/* ---- сетка каталога ---- */
.sa-catalog { padding: 26px 0 50px; }
.sa-catalog__head h1 { font-size: clamp(24px, 3vw, 34px); color: #fff; margin: 0 0 4px; }
.sa-catalog__head p { color: var(--sa-muted); margin: 0 0 18px; }
.sa-catalog__filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sa-catalog__filters label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--sa-muted); }
.sa-catalog__filters select { background: var(--sa-panel); color: var(--sa-ink); border: 1px solid var(--sa-line);
	border-radius: 10px; padding: 9px 12px; font-size: 14.5px; }
.sa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Сначала сужаются поля страницы (контейнер держит 94vw), и лишь потом падает число колонок. */
@media (max-width: 1180px) { .sa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 520px) { .sa-grid { grid-template-columns: minmax(0, 1fr); } }
.sa-empty { color: var(--sa-muted); padding: 40px 0; }

/* ---- карточка ---- */
.sa-card { display: flex; flex-direction: column; background: var(--sa-panel); border: 1px solid var(--sa-line);
	border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--sa-ink);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.sa-card:hover { transform: translateY(-3px); border-color: rgba(255, 0, 0, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.sa-card__photo { position: relative; aspect-ratio: 4 / 3; background: #1c1c20; overflow: hidden; }
.sa-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-card__photo.is-empty img { display: none; }
.sa-card__photo.is-empty::after { content: "нет фото"; position: absolute; inset: 0; display: grid; place-items: center; color: #55555c; font-size: 13px; }
.sa-card__flag { position: absolute; top: 10px; left: 10px; font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.sa-card__count { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, .62);
	color: #fff; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; }
.sa-card__body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; }
.sa-card__price { font-size: 19px; font-weight: 800; color: #fff; }
.sa-card__title { font-size: 14.5px; font-weight: 600; }
.sa-card__specs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--sa-muted); font-size: 12.5px; }
.sa-card__specs span:not(:last-child)::after { content: "·"; margin-left: 6px; opacity: .5; }
.sa-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sa-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.sa-tag--ok { background: rgba(53, 192, 122, .14); color: var(--sa-ok); }

/* ---- пагинация ---- */
.sa-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; color: var(--sa-muted); }

/* ---- карточка авто ---- */
.sa-car { padding: 26px 0 50px; }
.sa-car__grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sa-car__grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.sa-car__swiper { border-radius: 16px; overflow: hidden; background: #181818; }
.sa-car__swiper img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sa-car__panel { background: var(--sa-panel); border: 1px solid var(--sa-line); border-radius: 16px; padding: 22px; }
.sa-car__flag { color: var(--sa-muted); font-size: 14px; margin-bottom: 8px; }
.sa-car__panel h1 { font-size: 24px; color: #fff; margin: 0 0 12px; }
.sa-car__price { font-size: 30px; font-weight: 800; color: #fff; }
.sa-car__note { color: var(--sa-muted); font-size: 13.5px; margin: 8px 0 18px; }
.sa-car__cta { width: 100%; justify-content: center; margin-bottom: 20px; }
.sa-car__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; }
.sa-car__specs dt { color: var(--sa-muted); font-size: 12.5px; }
.sa-car__specs dd { margin: 0; font-size: 15px; color: var(--sa-ink); font-weight: 600; }

/* ---- меню-шторка ---- */
.sa-menu { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); }
.sa-menu[hidden] { display: none; }
.sa-menu__panel { position: absolute; inset: 0 0 0 auto; width: min(420px, 88vw); background: #141418;
	border-left: 1px solid var(--sa-line); padding: 20px 24px; overflow-y: auto; }
.sa-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.sa-menu__close { background: none; border: 0; color: var(--sa-ink); font-size: 30px; line-height: 1; cursor: pointer; }
.sa-menu__cols { display: grid; gap: 22px; }
.sa-menu__col h4 { color: var(--sa-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.sa-menu__col a, .sa-menu__home { display: block; color: var(--sa-ink); text-decoration: none; padding: 7px 0; font-size: 16px; }
.sa-menu__home { margin-top: 22px; color: var(--sa-red-hot); font-weight: 700; }

/* ---- подвал ---- */
/* ---- футер: две карточки ---- */
.sa-foot { padding: 26px 0 40px; background: var(--sa-bg, var(--sa-bg, #000)); }
.sa-foot__cards { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .sa-foot__cards { flex-direction: row; align-items: stretch; } }

.sa-foot__card { border-radius: 20px; padding: 26px 24px; }

/* Левая: красная визитка с зернистой фактурой */
.sa-foot__card--red {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, var(--sa-red, #c81414), var(--sa-red-deep));
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 34px;
}
@media (min-width: 900px) { .sa-foot__card--red { width: 33%; } }

.sa-foot__brandtop, .sa-foot__brandbot { position: relative; z-index: 1; }
.sa-foot__brandbot h3 { color: #fff; font-size: 18px; line-height: 1.35; margin: 0 0 14px; }
.sa-foot__copy { color: rgba(255,255,255,.65); font-size: 12px; margin: 14px 0 0; }

/* Соцсети: белые кружки, при наведении — фирменный цвет сервиса */
.sa-foot__socs { display: flex; gap: 12px; }
.sa-foot__soc {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.14); color: #fff;
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.sa-foot__soc:hover { transform: translateY(-3px) scale(1.06); }
.sa-foot__soc--tg:hover { background: #229ED9; box-shadow: 0 8px 18px rgba(34,158,217,.45); }
.sa-foot__soc--wa:hover { background: #25D366; box-shadow: 0 8px 18px rgba(37,211,102,.45); }
.sa-foot__soc--yt:hover { background: #f00;    box-shadow: 0 8px 18px rgba(255,0,0,.4); }

/* Правая: тёмная карточка с разделами */
.sa-foot__card--dark {
	flex: 1; background: #141417; border: 1px solid rgba(255,255,255,.09);
	display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.sa-foot__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 18px; }
@media (min-width: 700px) { .sa-foot__cols { grid-template-columns: repeat(4, 1fr); } }
.sa-foot h5 { color: #fff; font-size: 14.5px; margin: 0 0 12px; }
.sa-foot__col a { display: block; color: var(--sa-muted, #95959c); text-decoration: none;
	padding: 5px 0; font-size: 14px; transition: color .15s; }
.sa-foot__col a:hover { color: #fff; }

.sa-foot__ask h4 { color: #fff; font-size: 17px; margin: 0 0 6px; }
.sa-foot__ask > p { color: var(--sa-muted, #95959c); font-size: 13.5px; margin: 0 0 12px; }
.sa-foot__askrow { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.sa-foot__askphone { color: #fff; text-decoration: none; font-size: 21px; font-weight: 700; line-height: 1; }
.sa-foot__askrow .sa-btn { flex: none; }
/* Юридическая приписка отделена линией, чтобы кнопка не «прилипала» к абзацу. */
.sa-foot__ask > p.sa-foot__legal, .sa-foot__legal { color: rgba(255,255,255,.38); font-size: 11.5px; margin: 20px 0 0;
	padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }


body { background: var(--sa-bg); color: var(--sa-ink);
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; }

/* ---- слайдер первого экрана (свой, без Swiper) ---- */
.sa-hero { position: relative; overflow: hidden; background: var(--sa-bg, #000); }
.sa-hero__swiper { position: relative; }
.sa-hero .swiper-wrapper { display: flex; }
.sa-hero .swiper-slide { flex: 0 0 100%; }
.sa-hero__slide { position: relative; display: block; }
.sa-hero__pic img { width: 100%; height: auto; display: block; }
/* Заголовки и кнопка теперь текстом поверх фото (на самих снимках надписей нет):
   блок внизу слева, под ним тёмная вуаль, чтобы белый текст читался на любом сюжете. */
.sa-hero__slide::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, 0)); }
/* Первый экран: баннер + бегущая строка покупок ровно в высоту окна; фото подрезано сверху (низ сюжета важнее). */
@media (min-width: 768px) {
	.sa-first { display: flex; flex-direction: column; height: 100svh; }
	.sa-first .sa-hero { flex: 1 1 auto; min-height: 0; }
	.sa-first .sa-hero__swiper, .sa-first .sa-hero .swiper-wrapper, .sa-first .swiper-slide, .sa-first .sa-hero__slide, .sa-first .sa-hero__pic { height: 100%; }
	.sa-first .sa-hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
	.sa-first .sa-ticker { flex: none; }
}
.sa-hero__copy { position: absolute; left: 0; right: 0; top: 0; bottom: auto; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.8vw, 24px);
	padding: clamp(96px, 11vw, 150px) clamp(16px, 5vw, 84px) 0; }
.sa-hero__slide::after { top: 0; bottom: auto; height: 58%; background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, .4) 42%, rgba(0, 0, 0, 0)); }
.sa-hero__title { margin: 0; max-width: 16em; color: #fff; font-weight: 800; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance;
	font-size: clamp(30px, 5.6vw, 78px); text-shadow: 0 4px 22px rgba(0, 0, 0, .55); }
.sa-hero__title em { color: var(--sa-red-hot); font-style: normal; }
/* Флаг на кнопке — как на основном сайте: маленький скруглённый прямоугольник слева от подписи. */
.sa-flag { flex: none; display: block; width: 22px; height: 15.4px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.sa-flag svg { display: block; width: 100%; height: 100%; }
.sa-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: none;
	align-items: center; justify-content: center; background: rgba(0,0,0,.4); color: #fff; }
.sa-hero__nav--prev { left: 18px; } .sa-hero__nav--next { right: 18px; }
@media (min-width: 768px) { .sa-hero__nav { display: flex; } }
.sa-hero__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 8px; z-index: 3; }
.sa-hero__dot { width: 26px; height: 4px; border-radius: 3px; border: 0; cursor: pointer;
	background: rgba(255,255,255,.4); padding: 0; }
.sa-hero__dot.is-on { background: var(--sa-red-hot); }
/* Точки → полоски-истории, как в TG: активная заполняется за время автопрокрутки (7 с в ui.js),
   пройденные — заполнены, будущие — пустые. Клик по полоске переключает слайд (обработчик уже в ui.js). */
.sa-hero__dots { left: 16px; right: 16px; width: auto; transform: none; gap: 6px; bottom: 14px; }
.sa-hero__dot { flex: 1 1 0; min-width: 0; width: auto; height: 3px; border-radius: 3px; position: relative; overflow: hidden; background: rgba(255, 255, 255, .28); padding: 6px 0; background-clip: content-box; }
.sa-hero__dot::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; border-radius: 3px; background: var(--sa-red-hot); transform: scaleX(0); transform-origin: left; }
.sa-hero__dot.is-on { background-color: rgba(255, 255, 255, .28); }
.sa-hero__dot.is-on::after { animation: saStory 7s linear forwards; }
.sa-hero__dot:has(~ .is-on)::after { transform: scaleX(1); }
@keyframes saStory { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .sa-hero__dot.is-on::after { animation: none; transform: scaleX(1); } }
@media (min-width: 768px) { .sa-hero__dots { left: 50%; right: auto; transform: translateX(-50%); width: min(420px, 60vw); bottom: 18px; } }

/* ---- кнопки ---- */
.sa-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
	border-radius: 999px; font-weight: 700; font-size: 14.5px; padding: 12px 24px; border: 0; }
.sa-btn--red { background: var(--sa-red); color: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 var(--sa-red-deep), 0 8px 18px rgba(200,20,20,.3); }
.sa-btn--red:active { transform: translateY(2px); }
.sa-btn--ghost { background: var(--sa-panel); color: var(--sa-ink); border: 1px solid var(--sa-line); }
.sa-btn--ghost:hover { border-color: rgba(232,34,28,.5); }

/* ═══════════════  КАТАЛОГ v2: лента фото, штамп, фильтры, лот, главная  ═══════════════ */

/* Лента фото на карточке: кадры друг под другом, виден только .on;
   наведение по ширине переключает, полоски сверху показывают позицию. */
.sa-card__strip { position: absolute; inset: 0; }
.sa-card__strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s; }
.sa-card__strip img.on { opacity: 1; }
.sa-card__zones { position: absolute; inset: 0; display: flex; z-index: 2; }
.sa-card__zones span { flex: 1; }
.sa-card__bars { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; opacity: 0; transition: opacity .2s; }
.sa-card__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.sa-card__bars i.on { background: #fff; }
.sa-card:hover .sa-card__bars { opacity: 1; }
@media (hover: none) { .sa-card__bars { opacity: 1; } }
.sa-card__more { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 700; font-size: 15px; }
.sa-card__more.on { display: grid; }
.sa-card__flag, .sa-card__count { z-index: 3; }

/* Штамп «Продан» — поверх всего лота, фото приглушено. */
.sa-card.is-sold .sa-card__strip img { filter: saturate(.4) brightness(.55); }
.sa-card__stamp { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none;
	padding: 6px 18px; border: 3px solid var(--sa-red-hot); border-radius: 8px; color: var(--sa-red-hot);
	font-weight: 900; font-size: 22px; letter-spacing: .14em; text-transform: uppercase;
	background: rgba(10, 10, 12, .55); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .5); }
.sa-card__stamp::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255, 0, 0, .5); border-radius: 5px; }

/* Ряды на главной */
.sa-reel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sa-reel__head { margin: 0; }
.sa-reel__nav { display: flex; gap: 6px; }
.sa-reel__arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--sa-ink); cursor: pointer; font-size: 16px; transition: background-color .2s, border-color .2s; }
.sa-reel__arrow:hover { background: rgba(200, 20, 20, .16); border-color: rgba(255, 0, 0, .45); color: #fff; }
.sa-reel__track { scroll-snap-type: x proximity; }
.sa-reel__track .sa-card { scroll-snap-align: start; }
.sa-reel__all { display: flex; width: 100%; justify-content: center; margin-top: 16px; }

/* Бегущая строка купленных авто */
/* Строка стоит над шапкой: при скролле уезжает, и плашка прилипает к верху окна. */
.sa-ticker { position: relative; z-index: 1; padding: 10px 0; background: linear-gradient(180deg, rgba(22, 4, 5, .9), rgba(11, 11, 13, .6)); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sa-ticker__label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; padding: 6px 12px; border-radius: 999px;
	background: linear-gradient(135deg, var(--sa-red), var(--sa-ember)); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(200, 20, 20, .35); }
.sa-ticker__mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 96%, transparent); padding-left: 190px; }
.sa-ticker__row { display: flex; gap: 12px; width: max-content; animation: saTicker 90s linear infinite; }
.sa-ticker:hover .sa-ticker__row { animation-play-state: paused; }
@keyframes saTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sa-ticker__item { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); white-space: nowrap; }
.sa-ticker__item b { color: #fff; font-size: 13.5px; }
.sa-ticker__item span { color: var(--sa-ember); font-weight: 700; font-size: 13px; }
.sa-ticker__item small { color: var(--sa-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .sa-ticker__row { animation: none; } }

/* Промо-баннер «бюджетные авто» */
.sa-promo { padding: 26px 0 6px; }
.sa-promo__card { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
	background: linear-gradient(160deg, #3a0909 0%, var(--sa-red-deep) 45%, var(--sa-red) 85%, var(--sa-ember) 140%); box-shadow: 0 20px 50px rgba(200, 20, 20, .25); }
.sa-promo__card h3 { margin: 0 0 6px; color: #fff; font-size: clamp(20px, 2.4vw, 28px); }
.sa-promo__card p { margin: 0; color: rgba(255, 255, 255, .78); }
.sa-promo__text { flex: 1; min-width: 240px; }
.sa-promo__card .sa-btn { --c1: #1a0404; --c2: #3a0808; --c3: #a01010; --c4: var(--sa-red-deep); --c5: #c81414; }

/* Блок «как купить» и преимущества */
.sa-how { padding: 40px 0; }
.sa-how h4 { color: #fff; font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 10px; }
.sa-how__lead { color: var(--sa-muted); max-width: 760px; line-height: 1.6; }
.sa-how__steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 22px 0; }
.sa-how__step { border-radius: 16px; padding: 18px; }
.sa-how__step i { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; align-items: center; justify-content: center; font-style: normal; font-weight: 800;
	background: linear-gradient(135deg, var(--sa-red), var(--sa-ember)); color: #fff; margin-bottom: 10px; }
.sa-how__step b { display: block; color: #fff; margin-bottom: 4px; }
.sa-how__step p { margin: 0; color: var(--sa-muted); font-size: 13.5px; line-height: 1.5; }
/* Первый шаг — кнопка справа от номера вместо заголовка: заявка в один клик. */
.sa-how__step--cta { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
.sa-how__step--cta i { margin-bottom: 0; }
.sa-how__step--cta p { grid-column: 1 / -1; margin-top: 10px; }
.sa-how__btn { margin: 0; padding: 9px 18px; font-size: 14px; justify-self: start; }

/* Консультация + видео */
.sa-consult { padding: 30px 0; }
.sa-consult__grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .sa-consult__grid { grid-template-columns: 1.1fr 1fr; } }
.sa-consult h2 { color: #fff; margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); }
.sa-consult p { color: var(--sa-muted); line-height: 1.6; margin: 0 0 16px; }
.sa-consult__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-consult__media { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sa-consult__video { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; text-decoration: none; color: #fff; background: #1c1c1c; }
.sa-consult__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-consult__video span { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.sa-consult__video::before { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(200, 20, 20, .85); color: #fff; font-size: 16px; }

/* Статистика, площадки отзывов, две бегущие строки марок */
.sa-stats { padding: 30px 0 40px; text-align: center; }
/* Амбассадор слева от заголовков статистики и отзывов: стоит на нижней границе шапки блока,
   только на широких экранах — на планшете и телефоне под него нет места. */
.sa-stats .container, .sa-reviews .container { position: relative; }
.sa-amb { display: none; position: absolute; left: 0; bottom: 0; width: auto; pointer-events: none; z-index: 1;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45)); }
@media (min-width: 1100px) {
	.sa-amb { display: block; }
	.sa-stats .container { padding-left: 220px; }
	/* Статистика: стоит под карточкой «Оставить заявку», руки у плашки «10 лет»; ниже пояса растворяется маской перед бегущими марками. */
	.sa-amb--stats { height: 540px; left: -10px; top: 0; bottom: auto;
		-webkit-mask-image: linear-gradient(to bottom, #000 48%, rgba(0, 0, 0, .6) 58%, transparent 70%); mask-image: linear-gradient(to bottom, #000 48%, rgba(0, 0, 0, .6) 58%, transparent 70%); }
}
@media (min-width: 1400px) { .sa-amb--stats { height: 600px; top: 0; } }
.sa-stats h2 { color: #fff; margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); }
.sa-stats__sub { color: var(--sa-muted); margin: 0 0 18px; }
.sa-stats__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 18px; }
.sa-stats__num { border-radius: 16px; padding: 16px 22px; min-width: 150px; }
.sa-stats__num b { display: block; color: #fff; font-size: 28px; font-weight: 800; }
.sa-stats__num span { color: var(--sa-muted); font-size: 13px; }
.sa-stats__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
.sa-marq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 6px 0; }
.sa-marq__row { display: flex; gap: 10px; width: max-content; min-width: 200%; animation: saTicker 60s linear infinite; }
/* Обратная строка стартует с половины цикла — на первом кадре она уже заполнена, а не въезжает пустой. */
.sa-marq--rev .sa-marq__row { animation-direction: reverse; animation-delay: -30s; }
.sa-marq__item { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--sa-ink); font-weight: 700; font-size: 13px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }

/* Каталог: фильтры */
.sa-catalog__lead { color: var(--sa-muted); margin: -6px 0 18px; }
.sa-filter { border-radius: 18px; padding: 16px; margin-bottom: 18px; }
.sa-filter__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sa-filter label { display: flex; flex-direction: column; gap: 4px; color: var(--sa-muted); font-size: 12px; }
.sa-filter select, .sa-filter input { background: rgba(255, 255, 255, .05); color: var(--sa-ink); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 14px; }
.sa-filter__range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
.sa-filter label:has(.sa-filter__range) { grid-column: span 2; }
.sa-filter select, .sa-filter input { min-width: 0; width: 100%; box-sizing: border-box; }
.sa-filter__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sa-filter__grid > label { min-width: 0; }
.sa-filter__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.sa-filter__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sa-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--sa-ink); font-size: 12.5px; text-decoration: none; transition: background-color .2s, border-color .2s; }
.sa-chip:hover, .sa-chip.is-on { background: rgba(200, 20, 20, .18); border-color: rgba(255, 0, 0, .5); color: #fff; }
.sa-brands { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 18px; }
.sa-brands a { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); color: var(--sa-ink); text-decoration: none; font-size: 12.5px; }
.sa-brands a:hover, .sa-brands a.is-on { background: rgba(200, 20, 20, .16); border-color: rgba(255, 0, 0, .45); color: #fff; }
.sa-brands a small { color: var(--sa-muted); margin-left: 4px; }
.sa-catalog__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--sa-muted); font-size: 13.5px; }
/* Старое правило пагинации убрано: оно давало текущей странице и подписи «Страница N из M» лишние отступы и рамку. */

/* Лот: структура как у образца — галерея, факты, цена, расчёт, комплектация, похожие */
.sa-car__grid > * { min-width: 0; }
.sa-car__title { color: #fff; font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 6px; }
.sa-car__sub { color: var(--sa-muted); margin: 0 0 16px; font-size: 14px; }
.sa-car__main { position: relative; border-radius: 16px; overflow: hidden; background: #181818; aspect-ratio: 16 / 9; cursor: zoom-in; }
.sa-car__main img { width: 100%; height: 100%; object-fit: cover; display: block; background: #0e0e10; }
.sa-car__thumbs { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; padding-bottom: 4px; }
.sa-car__thumbs img { width: 92px; height: 68px; object-fit: cover; border-radius: 8px; flex: none; cursor: pointer; opacity: .6; border: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.sa-car__thumbs img.on, .sa-car__thumbs img:hover { opacity: 1; border-color: var(--sa-red-hot); }
.sa-car__stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); z-index: 3; pointer-events: none; padding: 10px 26px; border: 4px solid var(--sa-red-hot); border-radius: 10px; color: var(--sa-red-hot); font-weight: 900; font-size: 34px; letter-spacing: .14em; background: rgba(10, 10, 12, .55); }
.sa-car__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin: 0 0 18px; }
.sa-car__facts div { border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.sa-car__facts dt { color: var(--sa-muted); font-size: 12px; }
.sa-car__facts dd { margin: 2px 0 0; color: #fff; font-weight: 600; font-size: 14.5px; }
.sa-car__price-box { border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.sa-car__price-box .sa-car__price { font-size: 32px; }
.sa-car__price-src { color: var(--sa-muted); font-size: 13px; margin-top: 4px; }
.sa-car__ctas { display: grid; gap: 8px; margin-top: 14px; }
.sa-car__ctas .sa-btn { width: 100%; }
.sa-car__section { margin-top: 30px; }
.sa-car__section h2 { color: #fff; font-size: 20px; margin: 0 0 12px; }
.sa-car__calc { border-radius: 16px; padding: 18px; }
.sa-car__calc dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; }
.sa-car__calc dt { color: var(--sa-muted); } .sa-car__calc dd { margin: 0; color: #fff; font-weight: 600; text-align: right; }
.sa-car__calc .is-total dt, .sa-car__calc .is-total dd { color: #fff; font-weight: 800; font-size: 17px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 8px; }
.sa-car__calc-city { display: flex; align-items: center; gap: 8px; color: var(--sa-muted); font-size: 13px; margin-bottom: 10px; }
.sa-car__features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.sa-car__features span { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); font-size: 13.5px; }
.sa-car__ext { color: var(--sa-muted); font-size: 12.5px; }
.sa-car__ext a { color: var(--sa-ember); }

/* ═══ Лот v2: слева фото + док миниатюр, справа вся информация ═══ */
@media (min-width: 900px) { .sa-car__grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); } .sa-car__gallery { position: sticky; top: 96px; } }
/* Форма в узкой боковой колонке: имя и телефон в строку, кнопка на всю ширину — иначе «Рассчитать» вылезала за панель. */
.sa-car__panel .sa-lead__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sa-car__panel .sa-lead input:not([type=hidden]) { min-width: 0; width: 100%; box-sizing: border-box; }
.sa-car__panel .sa-lead__row .sa-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
@media (max-width: 599px) { .sa-car__panel .sa-lead__row { grid-template-columns: 1fr; } }
.sa-car__panel .sa-car__section { margin-top: 22px; }
.sa-car__panel .sa-car__section h2 { font-size: 17px; }
.sa-car__panel .sa-car__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
/* Характеристики: первые 4 видны, остальные под «Показать все». */
.sa-car__facts-more { margin: -4px 0 12px; }
.sa-car__facts-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--sa-ink); font-size: 13px; font-weight: 600; transition: background-color .2s, border-color .2s; }
.sa-car__facts-more summary::-webkit-details-marker { display: none; }
.sa-car__facts-more summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.sa-car__facts-more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.sa-car__facts-more summary:hover { background: rgba(200, 20, 20, .16); border-color: rgba(255, 0, 0, .45); color: #fff; }
.sa-car__facts-more .sa-car__facts-close, .sa-car__facts-more[open] .sa-car__facts-open { display: none; }
.sa-car__facts-more[open] .sa-car__facts-close { display: inline; }
.sa-car__facts-more[open] summary { margin-bottom: 10px; }
.sa-car__facts-more .sa-car__facts { margin-bottom: 0; }
/* Проверка авто: сводка + две кнопки, открывающие отчёты. */
.sa-car__check { display: flex; flex-direction: column; gap: 12px; }
.sa-car__check-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.sa-car__check-row > div { padding: 10px 12px; min-width: 0; }
.sa-car__check-row > div + div { border-left: 1px solid rgba(255, 255, 255, .07); }
.sa-car__check-row dt { color: var(--sa-muted); font-size: 11.5px; }
.sa-car__check-row dd { margin: 3px 0 0; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-car__check-row dd.is-ok { color: var(--sa-ok); } .sa-car__check-row dd.is-warn { color: var(--sa-ember); }
.sa-car__check-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-car__check-btns .sa-btn { width: 100%; justify-content: center; }
@media (max-width: 599px) { .sa-car__check-row { grid-template-columns: 1fr 1fr; } .sa-car__check-row > div:nth-child(3) { border-left: 0; } .sa-car__check-row > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .07); } }
/* Попапы (нативный popover, без JS): расчёт, заявка, страховые выплаты, отчёт осмотра. */
.sa-pop { position: fixed; inset: 0; margin: auto; width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border-radius: 18px;
	background: #15151a; border: 1px solid rgba(255, 255, 255, .1); color: var(--sa-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .65); }
.sa-pop--narrow { width: min(520px, calc(100% - 32px)); }
.sa-pop::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sa-pop:popover-open { animation: saPopIn .18s ease-out; }
@keyframes saPopIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sa-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sa-pop__head h3 { color: #fff; margin: 0; font-size: 20px; }
.sa-pop__close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--sa-ink); cursor: pointer; font-size: 20px; line-height: 1; transition: background-color .2s, border-color .2s; }
.sa-pop__close:hover { background: rgba(200, 20, 20, .16); border-color: rgba(255, 0, 0, .45); color: #fff; }
.sa-pop__total { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; margin-bottom: 14px; border-radius: 14px; background: rgba(200, 20, 20, .12); border: 1px solid rgba(255, 0, 0, .35); }
.sa-pop__total span { color: var(--sa-muted); font-size: 13px; } .sa-pop__total b { color: #fff; font-size: 30px; font-weight: 800; }
.sa-pop .sa-car__calc { margin-bottom: 10px; }
.sa-pop__lot { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.sa-pop__lot b { color: #fff; font-size: 15px; } .sa-pop__lot span { color: var(--sa-muted); font-size: 12.5px; }
.sa-pop .sa-lead { padding: 0; }
.sa-pop .sa-lead__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sa-pop .sa-lead__row .sa-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
.sa-pop .sa-lead input:not([type=hidden]) { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 599px) { .sa-pop .sa-lead__row { grid-template-columns: 1fr; } .sa-pop { padding: 18px; } }
.sa-car__check-row--pop { margin-bottom: 14px; }
/* Таблица в попапах */
.sa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 12px; }
.sa-table th { text-align: left; color: var(--sa-muted); font-weight: 500; font-size: 12px; padding: 0 10px 8px; }
.sa-table td { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--sa-ink); vertical-align: top; }
.sa-table td:last-child, .sa-table th:last-child { text-align: right; white-space: nowrap; color: #fff; font-weight: 600; }
/* Схема кузова: контурная картинка (вид сверху) + отметки в точках панелей. X — замена, W — сварка, A — ремонт/окрас.
   Позиция отметки задаётся классом панели (.sa-body__mark--hood и т. д.), сервер выводит класс и data-mark. */
.sa-body { position: relative; width: min(100%, 620px); margin: 24px auto 12px; }
.sa-body__img { display: block; width: 100%; height: auto; border-radius: 14px; }
.sa-body__cap { position: absolute; top: -22px; transform: translateX(-50%); color: var(--sa-muted); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.sa-body__cap--skin { left: 26%; } .sa-body__cap--frame { left: 74%; }
.sa-body__mark { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--sa-red); box-shadow: 0 0 0 3px rgba(11, 11, 13, .9), 0 4px 14px rgba(0, 0, 0, .5); cursor: help; }
.sa-body__mark::after, .sa-body__legend span::before { content: attr(data-mark); }
.sa-body__mark[data-mark="W"], .sa-body__legend span[data-mark="W"]::before { background: var(--sa-ember); }
.sa-body__mark[data-mark="A"], .sa-body__legend span[data-mark="A"]::before { background: #4a4a52; }
/* Координаты панелей на левом виде (панели кузова) схемы 3:2; перёд сверху. Усреднены по легковым кузовам;
   под автобус/грузовик уточняются модификатором .sa-body--<type>. */
.sa-body__mark--bumper-f { --x: 26%; --y: 9%; } .sa-body__mark--hood { --x: 26%; --y: 22%; } .sa-body__mark--roof { --x: 26%; --y: 50%; }
.sa-body__mark--trunk { --x: 26%; --y: 79%; } .sa-body__mark--bumper-r { --x: 26%; --y: 91%; }
.sa-body__mark--fender-fl { --x: 16%; --y: 22%; } .sa-body__mark--fender-fr { --x: 36%; --y: 22%; }
.sa-body__mark--door-fl { --x: 15%; --y: 43%; } .sa-body__mark--door-fr { --x: 37%; --y: 43%; }
.sa-body__mark--door-rl { --x: 15%; --y: 60%; } .sa-body__mark--door-rr { --x: 37%; --y: 60%; }
.sa-body__mark--fender-rl { --x: 16%; --y: 79%; } .sa-body__mark--fender-rr { --x: 36%; --y: 79%; }
.sa-body--truck .sa-body__mark--trunk, .sa-body--pickup .sa-body__mark--trunk { --y: 70%; }
.sa-body--bus .sa-body__mark--hood, .sa-body--minibus .sa-body__mark--hood { --y: 14%; }
.sa-body__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0 16px; color: var(--sa-muted); font-size: 12.5px; }
.sa-body__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sa-body__legend span::before { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: var(--sa-red); }
/* Пункты раскрывающегося меню — тот же gradient-button, что и .sa-btn: скругление 11px,
   радиальный градиент, точка которого «переезжает» при наведении. В покое палитра тёмная (как у промо-блока). */
.sa-hbtn {
	--c1: #101013; --c2: #181818; --c3: #1f1f24; --c4: #2a1214; --c5: #3a0a0c;
	position: relative; isolation: isolate; display: flex; align-items: center; min-height: 44px; padding: 10px 16px 10px 18px; overflow: hidden;
	border: 0; border-radius: 11px; color: rgba(255, 255, 255, .88); font-weight: 600; font-size: clamp(14px, 1.15vw, 17px); letter-spacing: .01em; text-decoration: none; cursor: pointer;
	background: radial-gradient(var(--sa-spread-x) var(--sa-spread-y) at var(--sa-pos-x) var(--sa-pos-y),
		var(--c1) var(--sa-stop-1), var(--c2) var(--sa-stop-2), var(--c3) var(--sa-stop-3), var(--c4) var(--sa-stop-4), var(--c5) var(--sa-stop-5));
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
	transition: --sa-pos-x .5s, --sa-pos-y .5s, --sa-spread-x .5s, --sa-spread-y .5s, --sa-stop-1 .5s, --sa-stop-2 .5s, --sa-stop-3 .5s, --sa-stop-4 .5s, --sa-stop-5 .5s,
		--sa-border-angle .5s, --sa-border-c1 .5s, --sa-border-c2 .5s, box-shadow .3s var(--sa-soft), transform .18s var(--sa-soft);
}
.sa-hbtn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none;
	background: linear-gradient(var(--sa-border-angle), var(--sa-border-c1), var(--sa-border-c2));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; }
.sa-hbtn:hover, .sa-hbtn:focus-visible, .sa-hbtn.is-current, .sa-hbtn[aria-current="page"] {
	--c1: #1a0404; --c2: #3a0808; --c3: #a01010; --c4: var(--sa-red-deep); --c5: #c81414; color: #fff;
	--sa-pos-x: 0%; --sa-pos-y: 91.51%; --sa-spread-x: 120.24%; --sa-spread-y: 103.18%;
	--sa-stop-1: 0%; --sa-stop-2: 8.8%; --sa-stop-3: 21.44%; --sa-stop-4: 71.34%; --sa-stop-5: 85.76%;
	--sa-border-angle: 190deg; --sa-border-c1: rgba(255, 0, 0, .6); --sa-border-c2: rgba(255, 255, 255, .08);
	box-shadow: 0 8px 22px rgba(200, 20, 20, .3), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px); }
/* Старая анимация «уезжающего» текста и точки не нужна: подпись стоит на месте, стрелка выезжает справа. */
.sa-hbtn__t { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; transform: none; opacity: 1; }
.sa-hbtn__t .sa-ico { color: rgba(255, 255, 255, .7); }
.sa-hbtn:hover .sa-hbtn__t { transform: none; opacity: 1; }
.sa-hbtn__t2 { position: absolute; inset: auto 12px auto auto; top: 50%; transform: translate(6px, -50%); opacity: 0; z-index: 2; display: flex; color: #fff; transition: transform .3s, opacity .3s; }
.sa-hbtn__t2 > span { display: none; }
.sa-hbtn:hover .sa-hbtn__t2, .sa-hbtn.is-current .sa-hbtn__t2, .sa-hbtn[aria-current="page"] .sa-hbtn__t2 { transform: translate(0, -50%); opacity: 1; }
.sa-hbtn__dot { display: none; }
/* Текущий раздел: рамка ярче и маркер-точка справа, чтобы отличался от наведения. */
.sa-hbtn.is-current::after, .sa-hbtn[aria-current="page"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; z-index: 3; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.sa-hbtn.is-current .sa-hbtn__t2, .sa-hbtn[aria-current="page"] .sa-hbtn__t2 { opacity: 0; }
.sa-city__main .sa-hbtn { font-weight: 600; }


/* Док миниатюр: все фото лота в один ряд по ширине большого фото, без прокрутки.
   Наведение — как в маковском доке: миниатюра растёт вверх поверх большого фото, соседи — чуть меньше; само большое фото не двигается. */
.sa-car__thumbs { overflow: visible; margin-top: 6px; padding: 0; gap: 5px; align-items: flex-end; position: relative; z-index: 2; }
/* Ширина миниатюры не зависит от их числа: у лота с тремя кадрами плитки такие же, как у лота
   с двадцатью, а строка просто не занимает всю ширину (просьба владельца). */
.sa-car__thumbs img { flex: 0 1 var(--sa-thumb, 92px); min-width: 0; width: auto; max-width: var(--sa-thumb, 92px); height: auto; aspect-ratio: 4 / 3; border-radius: 6px; border-width: 1.5px; opacity: .55;
	transform-origin: 50% 100%; transition: transform .16s ease-out, opacity .2s, border-color .2s; will-change: transform; }
.sa-car__thumbs img.on { opacity: 1; }
.sa-car__thumbs img:hover { transform: scale(2.2); opacity: 1; z-index: 6; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
.sa-car__thumbs img:has(+ img:hover), .sa-car__thumbs img:hover + img { transform: scale(1.6); opacity: .9; z-index: 5; }
.sa-car__thumbs img:has(+ img + img:hover), .sa-car__thumbs img:hover + img + img { transform: scale(1.25); opacity: .75; z-index: 4; }
/* Узкая галерея (планшет, телефон): миниатюры не уже 72px — обычная прокручиваемая лента без дока. */
@media (max-width: 979px) {
	.sa-car__thumbs { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
	.sa-car__thumbs img { flex: none; width: 72px; aspect-ratio: auto; height: 54px; }
	.sa-car__thumbs img:hover, .sa-car__thumbs img:has(+ img:hover), .sa-car__thumbs img:hover + img, .sa-car__thumbs img:has(+ img + img:hover), .sa-car__thumbs img:hover + img + img { transform: none; box-shadow: none; }
}

/* Форма заявки */
/* Единый попап заявки: способ связи → логин ТГ (только для ТГ) → имя и телефон.
   Вместо врезанных форм по сайту — .sa-lead-cta: одна кнопка, которая открывает этот попап. */
.sa-lead-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sa-lead-cta .sa-lead__note { margin: 0; }
.sa-btn--wide { padding: 15px 30px; font-size: 15.5px; }
.sa-pop--lead .sa-lead__row--pop { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sa-ways { margin: 0; padding: 0; border: 0; }
.sa-ways legend { padding: 0 0 8px; color: var(--sa-muted); font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; }
.sa-ways__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 599px) { .sa-ways__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-way { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 8px; border-radius: 12px; cursor: pointer;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--sa-ink); font-size: 14px; text-align: center; transition: background-color .18s, border-color .18s, color .18s; }
.sa-way input { position: absolute; opacity: 0; pointer-events: none; }
.sa-way:hover { border-color: rgba(255, 0, 0, .45); }
.sa-way:has(input:checked) { background: rgba(200, 20, 20, .18); border-color: var(--sa-red); color: #fff; font-weight: 600; }
.sa-way:has(input:focus-visible) { outline: 2px solid rgba(255, 0, 0, .7); outline-offset: 2px; }
.sa-lead__tg { display: flex; flex-direction: column; gap: 5px; }
.sa-lead__tg small { color: var(--sa-muted); font-size: 12px; }
.sa-lead__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 599px) { .sa-lead__pair { grid-template-columns: 1fr; } }
.sa-lead__submit { width: 100%; justify-content: center; }
.sa-lead { border-radius: 16px; padding: 16px; }
.sa-lead__row { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sa-lead__row { grid-template-columns: 1fr 1fr auto; } }
.sa-lead input:not([type=hidden]) { background: rgba(255, 255, 255, .05); color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; padding: 12px 14px; font: inherit; font-size: 15px; }
.sa-lead__hp { position: absolute; left: -9999px; }
.sa-lead__note { color: var(--sa-muted); font-size: 12px; margin: 10px 0 0; } .sa-lead__note a { color: var(--sa-ember); }
.sa-lead__done { color: #4ec97f; font-weight: 600; margin: 10px 0 0; }
.sa-lead.is-error input[name=phone] { border-color: var(--sa-red-hot); }

/* Подвал: офисы */
.sa-foot__offices { margin-top: 4px; }
.sa-foot__offices h5 { margin-bottom: 8px; }
.sa-foot__offices-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sa-foot__office { display: block; text-decoration: none; border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); transition: border-color .2s, background-color .2s, transform .2s; }
.sa-foot__office:hover { border-color: rgba(255, 0, 0, .5); background: rgba(200, 20, 20, .1); transform: translateY(-2px); }
.sa-foot__office.is-main { border-color: rgba(255, 0, 0, .4); }
.sa-foot__office h6 { margin: 0 0 4px; color: var(--sa-ember); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sa-foot__office p { margin: 0; color: var(--sa-ink); font-size: 13.5px; } .sa-foot__office p b { color: #fff; }
.sa-foot__office small { color: var(--sa-muted); font-size: 12px; }
.sa-foot__soc--vk:hover { background: #0077FF; box-shadow: 0 8px 18px rgba(0, 119, 255, .45); }
.sa-foot__soc--max:hover { background: #6E4AFF; box-shadow: 0 8px 18px rgba(110, 74, 255, .45); }

/* 3D-кольцо карточек на главной */
.sa-ring { position: relative; height: 600px; perspective: 2400px; overflow: hidden; margin: 0 -16px; touch-action: pan-y; cursor: grab; user-select: none; }
.sa-ring:active { cursor: grabbing; }
.sa-ring__stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
/* Карточка центрируется по вертикали своей высотой (translateY(-50%)) — карточки разной высоты
   стоят ровно, а не «пляшут» относительно фиксированного смещения. */
.sa-ring__item { position: absolute; width: var(--w, 250px); left: calc(var(--w, 250px) / -2); top: 0;
	transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r, 480px)) translateY(-50%); transition: opacity .3s linear; backface-visibility: hidden; }
.sa-ring__item .sa-card { width: 100%; height: var(--card-h, auto); }
/* Одна высота у всех карточек кольца: характеристики не выше двух строк, кнопка прижата к низу. */
.sa-ring__item .sa-card__body { flex: 1; min-height: 0; }
.sa-ring__item .sa-card__specs { max-height: 2.9em; overflow: hidden; }
.sa-ring__item .sa-card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-reel--ring .sa-reel__all { margin-top: 6px; }
@media (max-width: 599px) { .sa-ring { height: 540px; } }

/* Карточка: плашки состояния столбиком в правом верхнем углу фото, знак S слева, флаг перед названием. */
.sa-card__tags--photo { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Плашки состояния — зелёные, с лёгким миганием по очереди. */
.sa-card__tags--photo .sa-tag { background: rgba(10, 30, 18, .82); color: #7ef0a6; border: 1px solid rgba(53, 192, 122, .5); box-shadow: 0 0 10px rgba(53, 192, 122, .16); font-weight: 600;
	animation: saTagPulse 2.6s ease-in-out infinite; }
.sa-card__tags--photo .sa-tag:nth-child(2) { animation-delay: .5s; }
.sa-card__tags--photo .sa-tag:nth-child(3) { animation-delay: 1s; }
@keyframes saTagPulse { 0%, 100% { border-color: rgba(53, 192, 122, .5); box-shadow: 0 0 10px rgba(53, 192, 122, .16); } 50% { border-color: rgba(53, 192, 122, .95); box-shadow: 0 0 16px rgba(53, 192, 122, .4); } }
@media (prefers-reduced-motion: reduce) { .sa-card__tags--photo .sa-tag { animation: none; } }
.sa-card__mark { position: absolute; top: 8px; left: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.sa-card__mark img { width: 100%; height: 100%; display: block; }
.sa-card__title .sa-card__flag { position: static; font-size: 15px; filter: none; margin-right: 2px; }

/* Карточка: ссылка на лот — прозрачный слой поверх, кнопка «Хочу этот авто» — над ним. */
.sa-card { position: relative; }
.sa-card__link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.sa-card__want { position: relative; z-index: 5; width: 100%; justify-content: center; margin-top: 8px; padding: 10px 12px; font-size: 13px; min-width: 0; }
.sa-card__tags--photo, .sa-card__count, .sa-card__mark { pointer-events: none; }

/* «Хочу этот авто» парит: уже тела карточки, с воздухом по бокам и снизу, на тени-свечении; при наведении отрывается выше. */
.sa-card__want { width: auto; min-width: 78%; align-self: center; margin: 12px 0 4px; padding: 11px 26px; border-radius: 999px;
	box-shadow: 0 10px 24px -6px rgba(200, 20, 20, .55), 0 3px 8px rgba(0, 0, 0, .4); transition: transform .22s var(--sa-soft), box-shadow .22s var(--sa-soft); }
.sa-card__want:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -6px rgba(255, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .45); }
.sa-ring__item .sa-card__body, .sa-reel__track--home .sa-card__body, .sa-grid .sa-card__body, .sa-reel__track .sa-card__body { gap: 7px; }
/* Цена — крупной белой цифрой без плашки: в плитке каталога главный акцент, но без лишнего цвета. */
.sa-card__price { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 4px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 19px; letter-spacing: -.01em; }
.sa-card:hover .sa-card__price { background: none; }
/* Кнопка заявки в плитке не выводится: клиент открывает карточку лота, там она одна и главная. */
.sa-card__want { display: none; }

/* Прожектор по кромке карточки: точка (--gx/--gy) приходит из glow.js только для карточки под курсором.
   Один псевдоэлемент с маской «только рамка», без blur и fixed-фона — дёшево для GPU. */
.sa-card::before { content: ""; position: absolute; inset: -1px; z-index: 6; pointer-events: none; border-radius: inherit; padding: 2px; opacity: 0; transition: opacity .2s;
	background: radial-gradient(260px 260px at var(--gx, 50%) var(--gy, 50%), #fff, rgba(255, 140, 90, .95) 18%, rgba(255, 0, 0, .8) 45%, rgba(255, 0, 0, .18) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.sa-card.is-glow::before { opacity: 1; }
.sa-card.is-glow { box-shadow: 0 0 0 1px rgba(255, 0, 0, .35), 0 14px 40px -8px rgba(255, 0, 0, .45), 0 12px 30px rgba(0, 0, 0, .45); }
/* Подсветка тела карточки под точкой — заметная, но не перекрывает текст и фото. */
.sa-card.is-glow .sa-card__body { background-image: radial-gradient(260px 200px at var(--gx, 50%) var(--gy, 50%), rgba(255, 0, 0, .22), transparent 70%); }
.sa-card.is-glow .sa-card__photo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(240px 240px at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .12), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .sa-card::before { transition: none; } }

/* Амбассадор в свободном поле красной карточки: между логотипом сверху и подписью
   снизу; ноги уходят под блок с подписью и соцсетями, размеры карточки не меняются. */
.sa-foot__card--red { position: relative; overflow: hidden; }
.sa-foot__amb { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; height: calc(100% - 8px); width: auto; max-width: 92%; object-fit: contain; object-position: center bottom; z-index: 0; pointer-events: none;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35)); }
.sa-foot__brandtop { position: relative; z-index: 2; }
.sa-foot__brandbot { position: relative; z-index: 2; margin: 0 -26px -26px; padding: 26px 26px 26px;
	background: linear-gradient(180deg, rgba(120, 12, 12, 0) 0%, rgba(120, 12, 12, .96) 26%, rgba(143, 13, 13, 1) 100%); }
@media (max-width: 899px) { .sa-foot__amb { top: 6px; height: calc(100% - 6px); max-width: 80%; } }

/* Везде: карточка — колонка, тело растягивается, кнопка на одном расстоянии от низа. */
.sa-card { display: flex; flex-direction: column; height: 100%; }
/* Без кнопки в плитке тело не растягивается — карточка обжимает содержимое, характеристики прижаты к низу. */
.sa-card__body { display: flex; flex-direction: column; flex: 1; justify-content: flex-start; }
.sa-card__specs { margin-top: auto; }
.sa-grid { align-items: stretch; }
.sa-reel__track .sa-card { height: auto; align-self: stretch; }

/* ═══════════════  ОТЗЫВЫ: вкладки площадок + три бегущие колонки  ═══════════════ */
.sa-reviews { padding: 40px 0 30px; position: relative; overflow: hidden; }
.sa-reviews__head { max-width: 560px; margin: 0 auto 26px; text-align: center; }
.sa-reviews__eyebrow { display: inline-block; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
	color: var(--sa-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sa-reviews__head h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); margin: 14px 0 8px; letter-spacing: -.01em; }
.sa-reviews__head p { color: var(--sa-muted); font-size: 16px; line-height: 1.6; margin: 0; }
.sa-reviews__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #fff; font-weight: 700; }
.sa-reviews__rating .sa-stars { color: #f5b301; letter-spacing: 1px; }
.sa-reviews__rating small { color: var(--sa-muted); font-weight: 500; }

/* Вкладки площадок: пилюля с бегущим «горбом» под активной вкладкой (clip-path из образца). */
.sa-tabs { --dur: .7s; position: relative; margin: 0 auto 22px; width: max-content; max-width: 100%; display: flex; justify-content: center; gap: 4px;
	padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.sa-tabs__item { --bg: var(--sa-red); position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px;
	border: 0; background: transparent; color: var(--sa-muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: color .3s, transform .5s var(--sa-spring); }
.sa-tabs__item svg { width: 18px; height: 18px; flex: none; }
.sa-tabs__item.is-active { color: #fff; transform: translateY(-3px); }
.sa-tabs__item.is-active svg { color: var(--bg); filter: drop-shadow(0 0 8px var(--bg)); }
.sa-tabs__border { position: absolute; left: 0; bottom: -1px; width: 110px; height: 24px; z-index: 0; pointer-events: none;
	background: var(--bg, var(--sa-red)); clip-path: url(#sa-tab-clip); transform: translate3d(0, 0, 0); transition: transform var(--dur) var(--sa-spring), background-color .4s; }
.sa-tabs__item .sa-tabs__count { font-size: 11.5px; color: var(--sa-muted); font-weight: 600; }
.sa-tabs__item.is-active .sa-tabs__count { color: rgba(255, 255, 255, .8); }

/* Три колонки, каждая бесконечно едет вверх; края растворяются маской. */
.sa-reviews__cols { display: flex; justify-content: center; gap: 18px; max-height: 700px; overflow: hidden;
	mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.sa-reviews__col { width: 330px; max-width: 100%; }
.sa-reviews__col:nth-child(2) { display: none; } .sa-reviews__col:nth-child(3) { display: none; }
@media (min-width: 760px) { .sa-reviews__col:nth-child(2) { display: block; } }
@media (min-width: 1100px) { .sa-reviews__col:nth-child(3) { display: block; } }
.sa-reviews__list { list-style: none; margin: 0; padding: 0 0 18px; display: flex; flex-direction: column; gap: 18px; animation: saColUp var(--dur, 30s) linear infinite; }
.sa-reviews__cols:hover .sa-reviews__list { animation-play-state: paused; }
@keyframes saColUp { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .sa-reviews__list { animation: none; } }

.sa-review { --acc: var(--sa-red); border-radius: 22px; padding: 24px; background: rgba(22, 22, 26, .96); border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .3s var(--sa-spring), box-shadow .3s, border-color .3s; cursor: default; }
.sa-review:hover { transform: translateY(-8px) scale(1.02); border-color: color-mix(in srgb, var(--acc) 45%, transparent); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent); }
.sa-review--2gis { --acc: #19aa1e; }
.sa-review--site { --acc: var(--sa-red); }
.sa-review--yandex { --acc: #fc3f1d; }
.sa-review__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sa-review__stars { color: #f5b301; font-size: 14px; letter-spacing: 1px; }
.sa-review__src { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.sa-review__src svg { width: 14px; height: 14px; }
.sa-review p { margin: 0; color: #cfcfd4; line-height: 1.6; font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.sa-review__photos { display: flex; gap: 6px; margin-top: 12px; }
.sa-review__photos img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.sa-review__foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.sa-review__ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: linear-gradient(135deg, var(--acc), #333);
	display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); transition: box-shadow .3s; }
.sa-review:hover .sa-review__ava { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); }
.sa-review__who { display: flex; flex-direction: column; min-width: 0; }
.sa-review__who b { color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-review__who span { color: var(--sa-muted); font-size: 12.5px; }
.sa-review__reply { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--acc); color: var(--sa-muted); font-size: 13px; line-height: 1.5; }
.sa-review__reply b { color: #fff; display: block; font-size: 12px; margin-bottom: 2px; }
.sa-reviews__more { text-align: center; margin-top: 18px; }
.sa-reviews__panel[hidden] { display: none; }

/* ═══════════════  FAQ: аккордеон, который раскрывается по мере скролла  ═══════════════ */
.sa-faq { padding: 40px 0 60px; }
.sa-faq__head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.sa-faq__head h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; }
.sa-faq__head p { color: var(--sa-muted); margin: 0; }
.sa-faq__list { max-width: 900px; margin: 0 auto; }
.sa-faq__item { margin-bottom: 14px; }
.sa-faq__q { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: var(--sa-ink); }
.sa-faq__q > div { flex: 1; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-weight: 600; font-size: 15px; line-height: 1.4;
	transition: background-color .3s, border-color .3s, color .3s; }
.sa-faq__item.is-open .sa-faq__q > div { background: rgba(200, 20, 20, .18); border-color: rgba(255, 0, 0, .5); color: #fff; }
.sa-faq__q > span { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--sa-muted); }
.sa-faq__q > span svg { width: 20px; height: 20px; transition: transform .35s var(--sa-spring), color .3s; }
.sa-faq__item.is-open .sa-faq__q > span svg { transform: rotate(180deg); color: var(--sa-ember); }
.sa-faq__q .i-minus { display: none; } .sa-faq__item.is-open .sa-faq__q .i-minus { display: block; } .sa-faq__item.is-open .sa-faq__q .i-plus { display: none; }
.sa-faq__a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--sa-soft), opacity .35s; }
.sa-faq__item.is-open .sa-faq__a { grid-template-rows: 1fr; opacity: 1; }
.sa-faq__a > div { overflow: hidden; }
.sa-faq__bubble { margin: 12px 0 0 auto; max-width: 620px; padding: 14px 18px; border-radius: 18px 18px 4px 18px; color: #fff; font-size: 15px; line-height: 1.6;
	background: linear-gradient(135deg, var(--sa-red), var(--sa-red-deep)); box-shadow: 0 12px 30px rgba(200, 20, 20, .25); white-space: pre-line; }
@media (min-width: 700px) { .sa-faq__bubble { margin-left: 64px; } }

/* ═══════════════  Статические страницы  ═══════════════ */
.sa-page { padding: 30px 0 60px; }
.sa-page h1 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 8px; }
.sa-page__lead { color: var(--sa-muted); font-size: 17px; line-height: 1.6; max-width: 760px; margin: 0 0 26px; }
.sa-page h2 { color: #fff; font-size: 22px; margin: 34px 0 12px; }
.sa-page p { color: #cfcfd4; line-height: 1.7; max-width: 800px; }
.sa-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.sa-facts span { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: #fff; font-weight: 600; font-size: 14px; }
.sa-adv { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sa-adv div { border-radius: 16px; padding: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.sa-adv b { display: block; color: #fff; margin-bottom: 6px; } .sa-adv p { margin: 0; font-size: 14px; color: var(--sa-muted); }
.sa-team { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sa-team > div { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.sa-team i { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sa-red), var(--sa-ember)); }
.sa-team > div > div { min-width: 0; } .sa-team b { display: block; color: #fff; font-size: 14px; } .sa-team span { color: var(--sa-muted); font-size: 12.5px; }
.sa-steps { counter-reset: step; display: grid; gap: 14px; }
.sa-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.sa-step i { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--sa-red), var(--sa-ember)); }
.sa-step b { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; } .sa-step p { margin: 0; color: var(--sa-muted); font-size: 14.5px; }
.sa-offices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sa-office { border-radius: 16px; padding: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); text-decoration: none; display: block; transition: border-color .2s, transform .2s; }
.sa-office:hover { border-color: rgba(255, 0, 0, .5); transform: translateY(-2px); }
.sa-office h6 { margin: 0 0 6px; color: var(--sa-ember); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sa-office p { margin: 0; color: #fff; font-weight: 600; } .sa-office small { color: var(--sa-muted); }
.sa-legal p { font-size: 14px; color: #b8b8be; } .sa-legal h2 { font-size: 18px; }

.sa-reviews__grid { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 18px; } .sa-reviews__grid .sa-review { break-inside: avoid; margin-bottom: 18px; } .sa-reviews__grid .sa-review p { -webkit-line-clamp: unset; }

.sa-facts a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); } .sa-facts a:hover { color: var(--sa-ember); border-color: var(--sa-ember); }

/* ---- лента: подпись под покупкой вместо плашки ---- */
.sa-ticker__label { display: none; }
.sa-ticker__item small { color: #d6d6db; }
/* ---- герой: стрелка на кнопке не сжимается ---- */
.sa-hero__cta svg { flex: none; width: 16px; height: 16px; }
.sa-hero__cta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* «Жидкий металл» по кромке кнопок героя: коническое кольцо с двумя бликами медленно вращается,
   при наведении — быстрее. Только рамка (маска), без WebGL — дёшево для GPU. */
@property --sa-metal { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.sa-hero__cta { isolation: isolate; }
.sa-hero__cta::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: 0; pointer-events: none;
	background: conic-gradient(from var(--sa-metal), rgba(255, 255, 255, .06), rgba(255, 235, 225, .95) 10%, rgba(255, 255, 255, .08) 20%, rgba(255, 0, 0, .85) 38%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, .9) 68%, rgba(255, 60, 60, .5) 80%, rgba(255, 255, 255, .06));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: saMetal 5s linear infinite; }
.sa-hero__cta:hover::after { animation-duration: 1.6s; }
.sa-hero__cta::before { z-index: 1; }
/* Угол для металлической кромки: без регистрации свойства браузер не умеет его анимировать —
   кольцо стояло на месте, а кнопка заявки выглядела неподвижной. */
@property --sa-metal { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes saMetal { from { --sa-metal: 0deg; } to { --sa-metal: 360deg; } }
/* Та же металлическая кромка у «Заявки» в шапке (кнопка круглая-пилюля, кольцо по её радиусу). */
.sa-xbtn--req::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: 2; pointer-events: none;
	background: conic-gradient(from var(--sa-metal), rgba(255, 255, 255, .06), rgba(255, 235, 225, .95) 10%, rgba(255, 255, 255, .08) 20%, rgba(255, 0, 0, .85) 38%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, .9) 68%, rgba(255, 60, 60, .5) 80%, rgba(255, 255, 255, .06));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	animation: saMetal 5s linear infinite; }
.sa-xbtn--req:hover::after { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .sa-hero__cta::after, .sa-xbtn--req::after { animation: none; } }
/* Фото героя без надписей — прежние сдвиги под логотип и привязка кнопки к процентам картинки не нужны:
   подпись и кнопка живут в .sa-hero__copy и верстаются потоком. */
.sa-hero__actions { position: static; width: auto; max-width: none; left: auto; top: auto; transform: none; }
.sa-hero__cta { width: auto; gap: 12px; padding: clamp(14px, 1.5vw, 20px) clamp(22px, 2.4vw, 38px); font-size: clamp(14px, 1.35vw, 20px); }
.sa-hero__cta svg { width: 18px; height: 18px; }
@media (min-width: 768px) { .sa-hero__cta { font-size: clamp(14px, 1.05vw, 17px); padding: 14px 26px; } }
/* ---- отзывы v2: аватар слева, оценка справа, текст свёрнут, фото во весь экран ---- */
.sa-review__top { align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sa-review__ava { width: 44px; height: 44px; }
.sa-review__who { flex: 1; }
.sa-review__mark { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sa-review__text { display: block; }
.sa-review.is-clamped .sa-review__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sa-review.is-clamped .sa-review__replytext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-reviews__grid .sa-review p { -webkit-line-clamp: 5; }
.sa-review__more { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--acc); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sa-review__more:hover { text-decoration: underline; }
.sa-review__ph { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.sa-review__ph img { display: block; width: 72px; height: 54px; object-fit: cover; transition: transform .25s; }
.sa-review__ph:hover img { transform: scale(1.06); }
.sa-reviews__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.sa-btn--2gis { border-color: rgba(25, 170, 30, .6) !important; color: #4ade4f !important; }
.sa-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); padding: 24px; cursor: zoom-out; }
.sa-lightbox[hidden] { display: none; }
.sa-lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.sa-lightbox__close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
/* ---- кольцо команды ---- */
.sa-reel--team { margin-top: 26px; }
.sa-reel--team .sa-reel__head { font-size: 22px; }
.sa-ring--team { height: 420px; }
.sa-ring--team .sa-ring__item { transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r, 480px)) translateY(-50%); }
.sa-person { width: 100%; border-radius: 18px; overflow: hidden; background: #181818; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sa-person img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sa-person__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.sa-person__body b { color: #fff; font-size: 15px; } .sa-person__body span { color: var(--sa-muted); font-size: 12.5px; }
/* Руководители над кольцом команды: две вырезанные фигуры в пропорциях амбассадоров главной, подпись под ними. Блок выводится бэком только при is_lead. */
.sa-leads { display: flex; justify-content: center; gap: clamp(24px, 6vw, 96px); margin: 8px 0 28px; }
.sa-lead { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sa-lead__photo { display: block; height: clamp(260px, 30vw, 420px); width: auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .45));
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.sa-lead figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: -24px; }
.sa-lead figcaption b { color: #fff; font-size: 17px; } .sa-lead figcaption span { color: var(--sa-muted); font-size: 13px; }
@media (max-width: 599px) { .sa-leads { gap: 12px; } .sa-lead__photo { height: 200px; } .sa-lead figcaption b { font-size: 14px; } }
@media (max-width: 599px) { .sa-ring--team { height: 380px; } }
/* ---- форма загрузки ---- */
.sa-upload { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.sa-upload__drop { display: flex; align-items: center; justify-content: center; min-height: 140px; border: 2px dashed rgba(255, 255, 255, .25); border-radius: 16px; color: var(--sa-muted); cursor: pointer; position: relative; }
.sa-upload__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---- страница отзывов: колонки фиксированной высоты, свой скролл, автопрокрутка из JS ---- */
.sa-reviews__cols--page { max-height: none; height: min(78vh, 900px); }
.sa-reviews__col--scroll { height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding: 40px 2px; }
.sa-reviews__col--scroll::-webkit-scrollbar { display: none; }
/* Со скриптом колонка не прокручивается сама — карточки едут transform-ом (плавно, без рывков по пикселю). */
.sa-reviews__col--scroll.is-js { overflow: hidden; touch-action: pan-x pinch-zoom; cursor: default; }
.sa-reviews__list--static { animation: none !important; }
.sa-reviews__cols--page .sa-reviews__col:nth-child(2), .sa-reviews__cols--page .sa-reviews__col:nth-child(3) { display: block; }
@media (max-width: 1099px) { .sa-reviews__cols--page { flex-wrap: wrap; height: auto; } .sa-reviews__cols--page .sa-reviews__col { height: min(70vh, 720px); } }

/* ---- привезённые: карточки в стиле отзывов ---- */
.sa-case { --acc: var(--sa-red); }
.sa-case__flag { font-size: 22px; background: rgba(255, 255, 255, .06); }
.sa-case__price { color: var(--sa-ember); font-weight: 800; font-size: 16px; white-space: nowrap; }
.sa-case__meta { margin: 0 0 6px !important; color: var(--sa-muted) !important; font-size: 13.5px !important; }
.sa-case__client { color: #fff !important; font-weight: 600; font-size: 14px !important; }
.sa-tabs__flag { font-size: 16px; }
/* ---- активный раздел в меню ---- */
.sa-hbtn.is-active { color: #fff; }
.sa-hbtn.is-active .sa-hbtn__dot { opacity: 1; transform: scale(1); background: var(--sa-red); box-shadow: 0 0 10px var(--sa-red); }
.sa-hbtn.is-active .sa-hbtn__t > span:last-child { color: #fff; text-decoration: underline; text-decoration-color: var(--sa-red); text-underline-offset: 4px; }

.sa-founders { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); }
.sa-founders .sa-person__body b { font-size: 17px; }
/* Первая строка команды: директора и амбассадор между ними. */
.sa-lead-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 26px; }
.sa-person--lead .sa-person__body b { font-size: 17px; }
/* «Брошены на стол»: разлёт — это своя ячейка сетки (высота блока считается от карточек, ряды не налезают),
   а в покое карточки собраны в кучу по центру: сдвиг — целое число ячеек (--dx/--dy) от своего бокса. */
.sa-pile { --pile-gap: 14px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pile-gap); margin-bottom: 30px; }
.sa-pile__card { margin: 0; z-index: 1;
	transform: translate(calc(var(--dx, 0) * (100% + var(--pile-gap))), calc(var(--dy, 0) * (100% + var(--pile-gap)))) rotate(var(--r0, 0deg));
	transition: transform .75s cubic-bezier(.18, .9, .2, 1) var(--d, 0ms), box-shadow .3s;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .55); will-change: transform; }
.sa-pile:hover .sa-pile__card, .sa-pile:focus-within .sa-pile__card { transform: rotate(var(--r, 0deg)); }
.sa-pile__card:hover { z-index: 20; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 26px rgba(200, 20, 20, .3); }
.sa-pile:hover .sa-pile__card:hover { transform: rotate(0deg) scale(1.1); transition-delay: 0ms; }
/* Число колонок в hover-диапазоне не меняем: --dx/--dy в разметке посчитаны под 6 колонок. */
/* Телефон, планшет и устройства без наведения: обычная сетка — разлёт там нечем вызвать. */
@media (max-width: 979px), (hover: none) {
	.sa-pile { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.sa-pile__card { transform: none !important; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .sa-pile__card { transition: none; transform: none; } }

/* ---- подвал на телефоне: амбассадор (сидящее фото) отдельным блоком между логотипом и текстом ---- */
@media (max-width: 599px) {
	.sa-foot__card--red picture { display: block; position: relative; z-index: 1; }
	.sa-foot__amb { position: static; transform: none; height: auto; width: min(78%, 330px); max-width: none; margin: 8px auto -14px; display: block; }
}

/* высота кольца задаётся из JS по самой высокой карточке (--ring-h); значения ниже — до первого расчёта */
.sa-ring { height: var(--ring-h, 600px); }
@media (max-width: 599px) { .sa-ring { height: var(--ring-h, 540px); } }

/* колонки отзывов на главной под управлением JS: без CSS-анимации, вертикальный жест наш, горизонтальный — страницы */
.sa-reviews__list.is-js { animation: none !important; will-change: transform; }
.sa-reviews__cols:not(.sa-reviews__cols--page) .sa-reviews__col { touch-action: pan-x pinch-zoom; cursor: grab; user-select: none; }
.sa-reviews__cols:not(.sa-reviews__cols--page) .sa-reviews__col:active { cursor: grabbing; }

/* ═══ Ленты на главной вместо 3D-колец: нативный скролл, без JS-цикла ═══ */
/* Один ряд с горизонтальной прокруткой на любой ширине (базовый .sa-reel__track на десктопе — сетка 4×N, тут это не нужно).
   Края ленты мягко гаснут маской; скроллбар спрятан — листают жестом или стрелками. */
.sa-reel__track--home {
	display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
	margin: 0 -16px; padding: 12px 16px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	perspective: 1400px; perspective-origin: 50% 40%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.sa-reel__track--home::-webkit-scrollbar { display: none; }
.sa-reel__track--home > .sa-card { flex: 0 0 var(--sa-home-card, 250px); width: var(--sa-home-card, 250px); height: auto; scroll-snap-align: start; scroll-snap-stop: normal; will-change: transform; }
/* Одна высота ряда: характеристики не выше двух строк, кнопка прижата к низу — как было в кольце. */
.sa-reel__track--home .sa-card__body { flex: 1; min-height: 0; }
.sa-reel__track--home .sa-card__specs { max-height: 2.9em; overflow: hidden; }
.sa-reel__track--home .sa-card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Карточки внутри ленты — непрозрачные, без размытия фона: composited-скролл без просадок. */
.sa-reel__track--home .sa-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 22, 26, .96); contain: layout paint; }
.sa-reel__track--home .sa-card::after { display: none; }
/* Coverflow: центральная карточка смотрит на нас, соседи развёрнуты и уходят вглубь, край — почти в профиль.
   Позиция каждой карточки в скроллпорте и есть таймлайн (view(inline)): 50% — карточка по центру.
   Считает компоузитор, JS не нужен. Где scroll-driven animations нет — ряд остаётся ровной лентой. */
@supports (animation-timeline: view(inline)) {
	.sa-reel__track--home { gap: 18px; scroll-padding-inline: 16px; }
	.sa-reel__track--home > .sa-card { scroll-snap-align: start;
		animation: sa-coverflow linear both; animation-timeline: view(inline); animation-range: cover; transform-origin: 50% 50%; }
	/* Карточка целиком в кадре — стоит ровно. Уходя за левый край — разворачивается и тонет влево, въезжая справа — выходит из глубины. */
	@keyframes sa-coverflow {
		entry 0%   { transform: translateZ(-180px) rotateY(-55deg); opacity: .4; }
		entry 100% { transform: none; opacity: 1; }
		exit 0%    { transform: none; opacity: 1; }
		exit 100%  { transform: translateZ(-180px) rotateY(55deg); opacity: .4; }
	}
	.sa-reel__track--home > .sa-card:hover { transform: none; }
	@media (max-width: 599px) { .sa-reel__track--home { gap: 12px; } }
}
@media (prefers-reduced-motion: reduce) { .sa-reel__track--home > .sa-card { animation: none; } }
@media (max-width: 979px) { .sa-reel__track--home { --sa-home-card: 240px; } }
@media (max-width: 599px) { .sa-reel__track--home { --sa-home-card: 70vw; gap: 12px; } }

.sa-card__ask { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sa-ink); padding: 4px 10px 4px 8px; border: 1px solid var(--sa-line); border-radius: 999px; background: rgba(255, 255, 255, .04); cursor: help; }
.sa-card__warn { font-style: normal; font-size: 14px; line-height: 1; animation: saWarnBlink 1.1s ease-in-out infinite; }
@keyframes saWarnBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sa-card__warn { animation: none; } }
/* Подсказка у курсора (ui.js → tips): один узел на страницу */
.sa-tip { position: fixed; z-index: 90; max-width: 260px; padding: 8px 11px; border-radius: 10px; background: #1b1b1f; border: 1px solid var(--sa-line); color: #fff; font-size: 12.5px; line-height: 1.35; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); pointer-events: none; opacity: 0; transform: translate(14px, 14px); transition: opacity .12s; }
.sa-tip.is-on { opacity: 1; }
/* Бегущая строка вне экрана не крутится (ui.js вешает is-off) */
.sa-ticker.is-off .sa-ticker__row { animation-play-state: paused; }
/* Карточки каталога за экраном не рендерятся — легче прокрутка длинных списков */
.sa-grid > .sa-card { content-visibility: auto; contain-intrinsic-size: auto 330px; }
.sa-card__note { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--sa-muted); }

/* ═══ Поздние переопределения (должны стоять после базовых правил отзывов и подвала) ═══ */
/* Отзывы на широком: три колонки слева в пределах контейнера, справа полоса 280px под амбассадора в полный рост. */
@media (min-width: 1100px) {
	.sa-reviews__cols:not(.sa-reviews__cols--page) { justify-content: flex-start; padding-right: 280px; }
	.sa-reviews__cols:not(.sa-reviews__cols--page) .sa-reviews__col { width: calc((100% - 36px) / 3); flex: 0 0 auto; }
	.sa-reviews__cols:not(.sa-reviews__cols--page) .sa-reviews__col:nth-child(3) { display: block; }
	.sa-amb--reviews { height: auto; width: 250px; left: auto; right: 0; top: auto; bottom: 30px; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1400px) { .sa-amb--reviews { width: 270px; right: 4px; } }
/* Амбассадор в подвале крупнее на 12%: верх головы на том же месте, низ уходит под подпись (overflow карточки). */
@media (min-width: 600px) { .sa-foot__amb { height: calc((100% - 8px) * 1.12); max-width: none; } }
@media (min-width: 600px) and (max-width: 899px) { .sa-foot__amb { height: calc((100% - 6px) * 1.12); } }
/* Соцсети подвала — как в меню: квадрат 10px, фирменный градиент, бегущий блик по очереди. */
.sa-foot__socs { gap: 8px; }
.sa-foot__soc { position: relative; overflow: hidden; width: 36px; height: 36px; border-radius: 10px; border: 0; color: #fff; box-shadow: none; }
.sa-foot__soc::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 55%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: saShine2 4.5s ease infinite; pointer-events: none; }
.sa-foot__soc--tg { background: linear-gradient(135deg, #37AEE2, #1E96C8); } .sa-foot__soc--wa { background: linear-gradient(135deg, #5FE07E, #25B34A); }
.sa-foot__soc--yt { background: linear-gradient(135deg, #FF4E45, #D90000); } .sa-foot__soc--vk { background: linear-gradient(135deg, #2F8CFF, #0055CC); } .sa-foot__soc--max { background: linear-gradient(135deg, #8C6BFF, #5B3BE8); }
.sa-foot__soc--wa::after { animation-delay: .6s; } .sa-foot__soc--yt::after { animation-delay: 1.2s; } .sa-foot__soc--vk::after { animation-delay: 1.8s; } .sa-foot__soc--max::after { animation-delay: 2.4s; }
.sa-foot__soc:hover { transform: translateY(-3px) scale(1.12); }
.sa-foot__soc--tg:hover { background: linear-gradient(135deg, #37AEE2, #1E96C8); box-shadow: 0 8px 22px rgba(42, 171, 238, .5); }
.sa-foot__soc--wa:hover { background: linear-gradient(135deg, #5FE07E, #25B34A); box-shadow: 0 8px 22px rgba(37, 211, 102, .5); }
.sa-foot__soc--yt:hover { background: linear-gradient(135deg, #FF4E45, #D90000); box-shadow: 0 8px 22px rgba(255, 0, 0, .45); }
.sa-foot__soc--vk:hover { background: linear-gradient(135deg, #2F8CFF, #0055CC); box-shadow: 0 8px 22px rgba(0, 119, 255, .45); }
.sa-foot__soc--max:hover { background: linear-gradient(135deg, #8C6BFF, #5B3BE8); box-shadow: 0 8px 22px rgba(110, 74, 255, .45); }
.sa-foot__soc svg { width: 17px; height: 17px; }

/* ═══ Ролики: карточки парят на 3D-сфере (transform из videos.js), тянешь — вращается, клик — плеер в попапе ═══ */
.sa-videos { padding: 30px 0 40px; overflow: hidden; }
/* Сцена на всю ширину; края не режут карточки резко, а растворяют маской по четырём сторонам. */
.sa-videos .container { width: 100%; }
.sa-videos .sa-reel__top { width: min(1240px, 92vw); margin: 0 auto; }
.sa-videos__hint { margin: 0; color: var(--sa-muted); font-size: 13px; }
.sa-vstack { position: relative; height: 520px; margin: 0 auto; perspective: 1200px; perspective-origin: 50% 45%; touch-action: pan-y; cursor: grab; user-select: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.sa-vstack:active { cursor: grabbing; }
/* Карточка стоит в центре сцены, скрипт только сдвигает и масштабирует. Высота обложки — по превью, какое отдаст ссылка. */
.sa-vcard { position: absolute; left: 50%; top: 50%; width: var(--vcard-w, 200px); margin: calc(var(--vcard-w, 200px) * -0.375) 0 0 calc(var(--vcard-w, 200px) / -2); border-radius: 14px; overflow: hidden; cursor: pointer;
	background: rgba(22, 22, 26, .96); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
	transition: box-shadow .3s, border-color .3s; will-change: transform, opacity; backface-visibility: hidden; }
.sa-vcard:hover { border-color: rgba(255, 0, 0, .55); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 0, 0, .25); }
.sa-vcard__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #1c1c1c; }   /* height:auto — иначе атрибут height=540 растягивает обложку в столбик */
.sa-vcard__play { position: absolute; left: 50%; top: calc(50% - 24px); width: 42px; height: 42px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(200, 20, 20, .92); box-shadow: 0 8px 24px rgba(200, 20, 20, .5); transition: transform .25s, background-color .25s; pointer-events: none; }
.sa-vcard__play::after { content: ""; position: absolute; left: 16px; top: 12px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.sa-vcard:hover .sa-vcard__play { transform: translate(-50%, -50%) scale(1.1); background: var(--sa-red-hot); }
.sa-vcard__body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.sa-vcard__body b { color: #fff; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-vcard__body span { color: var(--sa-muted); font-size: 11.5px; }
.sa-pop--video { width: min(960px, calc(100% - 32px)); padding: 16px 18px 18px; }
.sa-pop--video .sa-pop__head { margin-bottom: 12px; }
.sa-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.sa-video__frame iframe, .sa-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.sa-video__err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--sa-muted); font-size: 15px; }
.sa-video__err a { color: var(--sa-ember); }
.sa-video__more { margin: 12px 0 0; text-align: center; }
.sa-video__more .sa-video__ext { color: var(--sa-muted); font-size: 13.5px; text-decoration: none; }
.sa-video__more .sa-video__ext:hover { color: var(--sa-ember); }
/* Планшет/телефон и устройства без наведения: обычная лента с прокруткой (скрипт 3D не включает). */
@media (max-width: 979px), (hover: none) {
	.sa-videos .container { width: min(1520px, 94vw); }
	.sa-vstack:not(.is-3d) { height: auto; display: flex; gap: 12px; overflow-x: auto; margin: 10px -16px 0; padding: 4px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none; cursor: default; -webkit-mask-image: none; mask-image: none; }
	.sa-vstack:not(.is-3d)::-webkit-scrollbar { display: none; }
	.sa-vstack:not(.is-3d) .sa-vcard { position: static; flex: 0 0 min(78vw, 260px); margin: 0; transform: none !important; opacity: 1 !important; scroll-snap-align: start; }
}

/* воронка на телефоне */
@media (max-width: 599px) {
	.sa-vstack.is-3d { height: 400px; touch-action: none; --vcard-w: 132px; }
	.sa-videos { overflow: hidden; }
	.sa-vcard__body { padding: 6px 8px 8px; }
	.sa-vcard__body b { font-size: 11px; } .sa-vcard__body span { font-size: 10.5px; }
	.sa-vcard__play { width: 34px; height: 34px; }
	.sa-vcard__play::after { left: 13px; top: 9px; border-width: 7px 0 7px 12px; }
}
@media (max-width: 599px) and (max-height: 750px) { .sa-vstack.is-3d { height: 340px; } }
/* подвал: амбассадор ближе к логотипу и тексту на телефоне */
@media (max-width: 599px) {
	.sa-foot__amb { margin: -16px auto -30px !important; width: min(88%, 340px) !important; }
	.sa-foot__brandbot h3 { margin-top: 2px; }
}

/* подсказка в окне города для заходов не из России (VPN) */
.sa-city__vpn { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 0, 0, .12); border: 1px solid rgba(255, 0, 0, .35); color: #fff; font-size: 12.5px; line-height: 1.35; }

/* пока тянем ленту мышью — без привязки, иначе прокрутка отскакивает к ближайшей карточке на каждом движении */
.sa-reel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }

/* ---- галерея лота: стрелки, счётчик, «все фото», полноэкранный просмотр ---- */
.sa-car__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s, background-color .2s; }
.sa-car__nav svg { width: 18px; height: 18px; }
.sa-car__nav--prev { left: 12px; } .sa-car__nav--next { right: 12px; }
.sa-car__main:hover .sa-car__nav { opacity: 1; }
.sa-car__nav:hover { background: var(--sa-red-hot); border-color: var(--sa-red-hot); }
@media (hover: none) { .sa-car__nav { opacity: .9; } }
.sa-car__count { position: absolute; right: 12px; bottom: 10px; z-index: 4; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.sa-car__all { display: flex; width: 100%; justify-content: center; margin-top: 10px; }
.sa-car__allgrid[hidden] { display: none; }
.sa-car__allgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.sa-car__allgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #181818; cursor: zoom-in; }
@media (min-width: 900px) { .sa-car__gallery { position: static; } }
.sa-viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .95); display: flex; align-items: center; justify-content: center; }
.sa-viewer[hidden] { display: none; }
.sa-viewer img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 8px; }
.sa-viewer__close, .sa-viewer__nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sa-viewer__close { top: 16px; right: 16px; font-size: 26px; }
.sa-viewer__nav { top: 50%; transform: translateY(-50%); } .sa-viewer__nav--prev { left: 16px; } .sa-viewer__nav--next { right: 16px; }
.sa-viewer__close:hover, .sa-viewer__nav:hover { background: var(--sa-red-hot); border-color: var(--sa-red-hot); }
.sa-viewer__count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: .8; }
@media (max-width: 599px) { .sa-viewer__nav { width: 40px; height: 40px; } .sa-viewer img { border-radius: 0; max-width: 100vw; } }

/* ---- лоадер поверх кадра, пока грузится следующее фото ---- */
.sa-loader { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 10, .62); backdrop-filter: blur(2px); pointer-events: none; }
.sa-loader[hidden] { display: none; }
.sa-loader__def { width: 0; height: 0; position: absolute; }
.sa-loader__snurra, .sa-loader__skugga { width: 110px; height: 110px; }
.sa-loader__snurra { filter: url(#sa-gegga); }
.sa-viewer .sa-loader__snurra { filter: url(#sa-gegga2); }
.sa-loader__halvan { animation: saSnurra 10s infinite linear; stroke-dasharray: 180 800; fill: none; stroke: url(#sa-gradient); stroke-width: 23; stroke-linecap: round; }
.sa-loader__strecken { animation: saSnurra 3s infinite linear; stroke-dasharray: 26 54; fill: none; stroke: url(#sa-gradient); stroke-width: 23; stroke-linecap: round; }
.sa-viewer .sa-loader__halvan, .sa-viewer .sa-loader__strecken { stroke: url(#sa-gradient2); }
.sa-loader__skugga { filter: blur(5px); opacity: .3; position: absolute; transform: translate(3px, 3px); }
@keyframes saSnurra { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -403px; } }
.sa-viewer .sa-loader { background: rgba(0, 0, 0, .55); }

/* ---- лоадер перехода между страницами: логотип + полоса в фирменных цветах ----
   Показывается по клику на внутреннюю ссылку и на новой странице до события load (класс html.sa-nav ставит inline-скрипт в <head>). */
.sa-pageload { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: rgba(11, 11, 13, .96); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
html.sa-nav .sa-pageload { opacity: 1; visibility: visible; transition: opacity .12s; }
.sa-pageload__logo { width: min(220px, 56vw); height: auto; }
.sa-pageload__bar { position: relative; width: min(340px, 72vw); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45), inset 0 -1px 2px rgba(255, 255, 255, .05); overflow: hidden; }
.sa-pageload__fill { position: relative; height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--sa-red) 0%, #f04a1e 35%, #ff8000 55%, #f04a1e 78%, var(--sa-red) 100%);
	box-shadow: 0 0 18px rgba(255, 0, 0, .55), 0 0 32px rgba(255, 128, 0, .4), inset 0 1.5px 0 rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(80, 0, 0, .35); }
.sa-pageload__fill { transition: width .35s cubic-bezier(.22, 1, .36, 1); }   /* ширину ведёт ui.js по реальному ходу загрузки */
.sa-pageload__sheen { position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); mix-blend-mode: screen; animation: saSheen 1.6s linear infinite; }
@keyframes saSheen { 0% { transform: translateX(-110%); } 100% { transform: translateX(210%); } }
@media (prefers-reduced-motion: reduce) { .sa-pageload__sheen { animation: none; } }

/* ═══ Скорость первой отрисовки ═══
   Тяжёлые секции ниже первого экрана не считаются и не рисуются, пока не подъехали к вьюпорту
   (content-visibility), поэтому браузер отдаёт первый экран сразу. contain-intrinsic-size держит
   высоту скроллбара стабильной, чтобы страница не «прыгала». Картинки грузятся лениво (loading="lazy"),
   у всех есть width/height — верстка не дрожит. */
.sa-videos, .sa-ring, .sa-reviews, .sa-faq, .sa-cases, .sa-stats, .sa-how, .sa-foot { content-visibility: auto; }
.sa-videos { contain-intrinsic-size: auto 620px; }
.sa-ring { contain-intrinsic-size: auto 560px; }
.sa-reviews { contain-intrinsic-size: auto 900px; }
.sa-faq { contain-intrinsic-size: auto 700px; }
.sa-cases { contain-intrinsic-size: auto 800px; }
.sa-stats { contain-intrinsic-size: auto 420px; }
.sa-how { contain-intrinsic-size: auto 560px; }
.sa-foot { contain-intrinsic-size: auto 900px; }
/* Пока фото лота не загрузилось — ровная тёмная подложка вместо белой вспышки. */
.sa-card__media, .sa-hero__pic { background: #101013; }


/* Дополнение стенда: первый экран главной — ровно окно целиком, фото начинается от самого верха
   и уходит под шапку (шапка-пилюля плавает поверх него), бегущая строка прижата к нижней кромке окна.
   Дизайн включает .sa-first только с 768px — у нас телефон ведёт себя так же. */
.sa-first { display: flex; flex-direction: column; height: 100svh; }
.sa-first .sa-hero { flex: 1 1 auto; min-height: 0; }
.sa-first .sa-hero__swiper, .sa-first .sa-hero .swiper-wrapper, .sa-first .swiper-slide, .sa-first .sa-hero__slide, .sa-first .sa-hero__pic { height: 100%; }
.sa-first .sa-hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sa-first .sa-ticker { flex: none; }
/* Шапка у нас в потоке (sticky, 78px до 1024 и 100px дальше) — поднимаем экран под неё. */
.sa-home .sa-first { margin-top: -78px; }
@media (min-width: 1024px) { .sa-home .sa-first { margin-top: -100px; } }
.sa-home .sa-topbar { z-index: 60; }
/* Кнопка первого экрана не должна нырять под бегущую строку. */
.sa-first .sa-hero__copy { padding-bottom: clamp(20px, 3vw, 44px); }

/* Страница загрузки: превью нескольких файлов сеткой. */
.sa-upload { max-width: 760px; }
.sa-upload__drop { flex-wrap: wrap; gap: 12px; padding: 12px; align-content: flex-start; }
.sa-upload__drop.is-over { border-color: var(--sa-red-hot); background: rgba(200, 20, 20, .08); }
.sa-upload__item { display: flex; flex-direction: column; gap: 6px; width: 150px; color: var(--sa-muted); font-size: 12px; word-break: break-word; }
.sa-upload__item img { width: 150px; height: 100px; object-fit: cover; border-radius: 10px; background: #1a1a1a; }

/* Флаги стран — SVG (эмодзи не рисуются в Chrome на Windows), поэтому там, где раньше
   был символ, задаём размер картинке. */
.sa-ticker__item .sa-flag { display: inline-block; width: 18px; height: 12.6px; vertical-align: -1px; margin-right: 4px; }
.sa-card__title .sa-card__flag .sa-flag { width: 18px; height: 12.6px; display: inline-block; vertical-align: -1px; }
.sa-case__flag { display: flex; align-items: center; justify-content: center; }
.sa-case__flag .sa-flag { width: 26px; height: 18px; }
.sa-tabs__flag { display: inline-flex; align-items: center; }
.sa-tabs__flag .sa-flag { width: 20px; height: 14px; }

/* Куки: полоска в правом нижнем углу и её окно с подробностями. */
.sa-cookie { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: min(360px, calc(100vw - 32px));
	display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 16px;
	background: rgba(18, 18, 20, .96); border: 1px solid var(--sa-line); box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
	backdrop-filter: blur(10px); opacity: 0; transform: translateY(14px); transition: opacity .3s var(--sa-ease), transform .3s var(--sa-ease); }
.sa-cookie.is-on { opacity: 1; transform: none; }
.sa-cookie p { margin: 0; color: var(--sa-muted); font-size: 13.5px; line-height: 1.5; }
.sa-cookie__more { background: none; border: 0; padding: 0; color: var(--sa-red-hot); font: inherit; cursor: pointer; text-decoration: underline; }
.sa-cookie__row { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-cookie__row .sa-btn { flex: 1 1 auto; justify-content: center; }
.sa-cookie__list { display: grid; gap: 12px; margin: 14px 0 16px; }
.sa-cookie__list dt { color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.sa-cookie__list dd { margin: 0; color: var(--sa-muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 599px) { .sa-cookie { right: 10px; left: 10px; bottom: 10px; width: auto; } }
.sa-pop__body a { color: var(--sa-red-hot); }

/* Привезённые: карточка повторяет чип бегущей строки — название может занять две строки,
   лишнего пустого места под ним нет. */
.sa-case .sa-review__who b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.sa-case .sa-review__top { margin-bottom: 8px; }
.sa-case .sa-case__client { margin: 0 !important; }
/* Текст и кнопка стоят примерно по середине кадра, а не под самой шапкой. Первый экран поднят
   под неё, поэтому в отступ сверху добавляем её высоту — иначе «середина» уезжает вверх.
   Текст держим в левой части: справа сюжет. */
.sa-first .sa-hero__copy { top: 0; bottom: 0; justify-content: flex-start;
	padding-block: calc(78px + clamp(96px, 14vh, 130px)) clamp(80px, 9vw, 130px); }
@media (min-width: 1024px) { .sa-first .sa-hero__copy { padding-top: calc(100px + clamp(120px, 16vh, 168px)); } }
.sa-first .sa-hero__title { max-width: min(16em, 60%); font-size: clamp(30px, 4.6vw, 64px); }
@media (max-width: 767px) { .sa-first .sa-hero__title { max-width: 100%; } }
/* Кадр не затемняем целиком: подложка лежит ровно под текстом (габариты считает heroFit в ui.js
   и кладёт в --vl/--vt/--vw/--vh), края мягкие, размер меняется вместе с текстом. */
.sa-first .sa-hero__slide::after { content: none; }
.sa-hero__veil { position: absolute; z-index: 1; pointer-events: none;
	left: var(--vl, -4%); top: var(--vt, 4%); width: var(--vw, 62%); height: var(--vh, 74%);
	background: radial-gradient(ellipse 62% 60% at 42% 50%, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .46) 45%, rgba(0, 0, 0, .26) 72%, rgba(0, 0, 0, 0) 100%);
	filter: blur(18px); opacity: 1; }
.sa-hero__veil.is-on { opacity: 1; }

/* Печатающийся хвост заголовка: курсор стоит вплотную к тексту, во время набора горит ровно,
   после — мигает. Без анимации (системная настройка) текст просто стоит целиком. */
.sa-type { white-space: nowrap; }
.sa-type__cur { display: inline-block; width: .06em; min-width: 3px; height: .82em; margin-left: .06em;
	background: var(--sa-red-hot); vertical-align: -.06em; animation: saCaret 1s steps(1, end) infinite; }
.sa-type.is-typing .sa-type__cur { animation: none; }
@keyframes saCaret { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sa-type__cur { display: none; } }

/* Заголовок первого экрана строго в две строки: «Закажи автомобиль» всегда первая,
   название страны всегда вторая. Высота второй строки зарезервирована, поэтому пока
   текст печатается, кнопка стоит на месте и не прыгает. */
.sa-hero__l1, .sa-hero__l2 { display: block; }
.sa-hero__l2 { min-height: 1.06em; }
.sa-hero__title { max-width: none; }
/* Полоски-истории: на светлых кадрах белая линия терялась — даём тёмную подложку и делаем толще. */
.sa-hero__dot { height: 5px; background-color: rgba(0, 0, 0, .38); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.sa-hero__dot::after { top: 5px; bottom: 5px; box-shadow: 0 0 8px rgba(255, 0, 0, .5); }
.sa-hero__dot.is-on { background-color: rgba(0, 0, 0, .38); }
.sa-hero__dot:has(~ .is-on)::after { background: rgba(255, 255, 255, .85); }
/* На телефоне низ кадра занимает полоска о куках — поднимаем полоски-истории выше, чтобы их было видно. */
@media (max-width: 599px) { .sa-first .sa-hero__dots { bottom: 92px; } }

/* Способы связи — кругляшки со значком: при наведении и после выбора кнопка разъезжается
   и показывает название, у выбранной появляется галочка. Поля ниже открываются только после выбора. */
.sa-ways__row { display: flex; flex-wrap: wrap; gap: 10px; grid-template-columns: none; }
.sa-way { min-height: 0; width: 46px; height: 46px; padding: 0; border-radius: 999px; gap: 0; overflow: hidden;
	justify-content: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid var(--sa-line);
	transition: width .28s var(--sa-ease), background-color .2s, border-color .2s; }
.sa-way__ico { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #fff; }
.sa-way__ico svg { width: 21px; height: 21px; }
.sa-way__label { white-space: nowrap; opacity: 0; transition: opacity .2s .06s; font-size: 14px; padding-right: 6px; }
.sa-way__ok { flex: none; width: 0; opacity: 0; color: #fff; font-size: 13px; transition: opacity .2s, width .2s; }
.sa-way:hover, .sa-way:has(input:focus-visible) { width: auto; padding-right: 14px; }
.sa-way:hover .sa-way__label, .sa-way:has(input:focus-visible) .sa-way__label { opacity: 1; }
.sa-way:has(input:checked) { width: auto; padding-right: 12px; background: rgba(200, 20, 20, .2); border-color: var(--sa-red); }
.sa-way:has(input:checked) .sa-way__label { opacity: 1; font-weight: 600; }
.sa-way:has(input:checked) .sa-way__ok { width: 18px; opacity: 1; }
.sa-way--tg:has(input:checked), .sa-way--tg:hover { background: rgba(42, 171, 238, .22); border-color: rgba(42, 171, 238, .7); }
.sa-way--wa:has(input:checked), .sa-way--wa:hover { background: rgba(37, 211, 102, .2); border-color: rgba(37, 211, 102, .65); }
.sa-way--max:has(input:checked), .sa-way--max:hover { background: rgba(140, 107, 255, .22); border-color: rgba(140, 107, 255, .7); }
.sa-way--mail:has(input:checked), .sa-way--mail:hover { background: rgba(200, 20, 20, .2); border-color: var(--sa-red); }
.sa-lead__fields { display: flex; flex-direction: column; gap: 10px; }
.sa-lead__fields[hidden] { display: none; }
.sa-lead__mail input { width: 100%; }
/* Ловушка для ботов не должна занимать место в форме, а плашка лота — показываться пустой. */
.sa-lead__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.sa-pop__lot[hidden] { display: none !important; }
.sa-lead__tg[hidden], .sa-lead__mail[hidden] { display: none !important; }

/* ---- верхняя плашка: правки владельца (02.09 и 07.09) ----
   Сетки на плашке быть не должно, соцсети — мелкими значками, заметно меньше личного кабинета,
   бликование с кнопок убрано, логотип занимает почти всю высоту плашки. */
.sa-menubar__wave { display: none !important; }
.sa-menubar .sa-xbtn--soc { width: 32px; height: 32px; border-radius: 9px; }
.sa-menubar .sa-xbtn--soc .sa-xbtn__ico svg { width: 14px; height: 14px; }
.sa-menubar .sa-xbtn--soc .sa-xbtn__bg::after { content: none !important; }   /* блик убран */
.sa-menubar .sa-account__login, .sa-menubar .sa-account__avatar { width: 46px; height: 46px; }
.sa-menubar .sa-burger, .sa-menubar .sa-city__btn { width: 44px; height: 44px; }
.sa-menubar__logo img { height: 58px; }
@media (max-width: 979px) { .sa-menubar__logo img { height: 46px; } }
.sa-menubar__side--r { gap: 8px; align-items: center; }

/* Соцсети в плашке — без цвета в покое (акцент на плашке один: «Оставить заявку»).
   Фирменный цвет загорается только при наведении, вместе с раскрытием подписи. */
.sa-menubar .sa-xbtn--soc { border-color: rgba(255, 255, 255, .16); }
.sa-menubar .sa-xbtn--soc .sa-xbtn__bg { opacity: 0; }
.sa-menubar .sa-xbtn--soc .sa-xbtn__glow { opacity: 0; }
.sa-menubar .sa-xbtn--soc:hover, .sa-menubar .sa-xbtn--soc:focus-visible { border-color: transparent; }
.sa-menubar .sa-xbtn--soc:hover .sa-xbtn__bg, .sa-menubar .sa-xbtn--soc:focus-visible .sa-xbtn__bg { opacity: 1; }
.sa-menubar .sa-xbtn--soc:hover .sa-xbtn__glow, .sa-menubar .sa-xbtn--soc:focus-visible .sa-xbtn__glow { opacity: .5; }
.sa-menubar .sa-xbtn--soc:hover .sa-xbtn__bg::after { animation: saShine2 4.5s ease infinite; }
.sa-menubar .sa-xbtn--soc .sa-xbtn__bg::after { animation: none; }

/* Город показан всегда: значок метки и название рядом, высота как у соцсетей. */
.sa-menubar .sa-city__btn { width: auto !important; height: 34px; border-radius: 999px; padding: 0 12px 0 9px;
	gap: 6px; justify-content: flex-start; border-color: rgba(255, 255, 255, .16); }
.sa-menubar .sa-city__btn .sa-xbtn__ico { position: static; transform: none !important; }
.sa-menubar .sa-city__btn .sa-xbtn__ico svg { width: 16px; height: 16px; }
.sa-menubar .sa-city__btn .sa-xbtn__label { position: static; inset: auto; transform: none !important;
	font-size: 12px; letter-spacing: .04em; padding: 0; }
.sa-menubar .sa-city__btn .sa-xbtn__bg, .sa-menubar .sa-city__btn .sa-xbtn__glow { opacity: 0; }
.sa-menubar .sa-city__btn:hover .sa-xbtn__bg, .sa-menubar .sa-city__btn[aria-expanded="true"] .sa-xbtn__bg { opacity: 1; }
.sa-menubar .sa-city__btn:hover, .sa-menubar .sa-city__btn[aria-expanded="true"] { border-color: transparent; }
/* Наш размер соцсетей задан с большей силой, поэтому раскрытие по наведению повторяем здесь же,
   иначе подпись рисуется поверх соседних кнопок. */
.sa-menubar .sa-xbtn--soc { --w: 128px; }
.sa-menubar .sa-xbtn--soc:hover, .sa-menubar .sa-xbtn--soc:focus-visible { width: var(--w); }
.sa-menubar .sa-xbtn--soc .sa-xbtn__label { font-size: 11px; }

/* Наши размеры кнопок сильнее исходного правила раскрытия, поэтому повторяем раскрытие здесь:
   меню и личный кабинет при наведении разъезжаются в подпись, как остальные кнопки плашки. */
.sa-menubar .sa-burger:hover, .sa-menubar .sa-burger:focus-visible, .sa-menubar .sa-burger[aria-expanded="true"],
.sa-menubar .sa-account__login:hover, .sa-menubar .sa-account__login:focus-visible,
.sa-menubar .sa-account__avatar:hover, .sa-menubar .sa-account__avatar:focus-visible { width: var(--w); }

/* Бегущая строка покупок — спокойнее: за 90 секунд лента пробегала слишком быстро. */
.sa-ticker__row { animation-duration: 170s; }
/* Длинное название города («Южно-Сахалинск») удлиняет левую колонку и кнопка заявки
   упиралась в логотип. Даём боковым колонкам расти и держим воздух вокруг логотипа. */
/* Боковые колонки — по содержимому, логотип в средней и центрируется в оставшемся месте.
   При длинном городе он просто становится чуть меньше, но кнопки на него не наезжают. */
.sa-menubar { grid-template-columns: auto minmax(0, 1fr) auto; }
.sa-menubar__logo { padding: 0 18px; min-width: 0; }
.sa-menubar__logo img { max-width: 100%; height: auto; max-height: 58px; }
.sa-menubar__side--l { min-width: 0; flex-wrap: nowrap; }
.sa-menubar__side--l .sa-menubar__phone { min-width: 0; }
@media (min-width: 980px) and (max-width: 1319px) {
	.sa-menubar .sa-city__btn .sa-xbtn__label { font-size: 11px; }
	.sa-menubar__logo img { height: 50px; }
}

/* Ответы в вопросах-ответах бывают длинными: держим абзацы и списки читаемыми. */
.sa-faq__bubble p { margin: 0 0 10px; }
.sa-faq__bubble p:last-child { margin-bottom: 0; }
.sa-faq__bubble ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.sa-faq__bubble li { list-style: disc; }

/* Под заголовком героя — выгода и срок доставки, как было на прежних баннерах. */
.sa-hero__deal { margin: 0; color: #fff; font-weight: 600; font-size: clamp(15px, 1.9vw, 26px); text-shadow: 0 3px 14px rgba(0, 0, 0, .55); }
.sa-hero__deal b { color: #fff; font-weight: 800; }
.sa-hero__term { margin: 0; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .92);
	font-size: clamp(13px, 1.25vw, 17px); font-weight: 600; text-shadow: 0 3px 14px rgba(0, 0, 0, .55); }
.sa-hero__dash { display: block; width: clamp(18px, 2vw, 34px); height: 2px; border-radius: 2px; background: var(--sa-red-hot); }
.sa-hero__sub { margin: 0; color: rgba(255, 255, 255, .72); font-size: clamp(11.5px, 1vw, 14px); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.sa-hero__copy { gap: clamp(10px, 1.2vw, 18px); }

/* Блок про телеграм-канал — в цветах Telegram, чтобы было ясно, куда он ведёт. */
.sa-promo__card--tg { position: relative; margin-bottom: 14px; padding: 16px 20px 16px 74px; overflow: hidden;
	background: linear-gradient(135deg, #2AABEE 0%, #229ED9 55%, #1B8AC4 100%) !important; border-color: rgba(255, 255, 255, .22) !important;
	box-shadow: 0 12px 34px rgba(34, 158, 217, .35); }
.sa-promo__card--tg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .18), transparent 55%); pointer-events: none; }
.sa-promo__tgico { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; background: #fff; color: #229ED9; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.sa-promo__tgico svg { width: 22px; height: 22px; }
.sa-promo__card--tg h3 { color: #fff !important; font-size: 16px; margin: 0 0 4px; }
.sa-promo__card--tg p { color: rgba(255, 255, 255, .9) !important; }
.sa-btn--tg { background: #fff !important; color: #1B8AC4 !important; border-color: transparent !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important; }
.sa-btn--tg::before { display: none; }
.sa-btn--tg:hover { background: #f3fbff !important; color: #1479ad !important; }
@media (max-width: 599px) { .sa-promo__card--tg { padding-left: 20px; padding-top: 64px; } .sa-promo__tgico { top: 16px; transform: none; } }

/* Текст первого экрана: --hz (заголовок), --hl (строки под ним), --hgap (промежутки) ставит heroFit
   в ui.js, подбирая размер по свободному месту до автомобиля; без JS остаются прежние clamp(). */
.sa-first .sa-hero__title { font-size: var(--hz, clamp(30px, 4.6vw, 64px)); }
.sa-first .sa-hero__deal { font-size: calc(var(--hl, 44px) * .58); }
.sa-first .sa-hero__term { font-size: calc(var(--hl, 44px) * .42); gap: calc(var(--hl, 44px) * .2); }
.sa-first .sa-hero__dash { width: calc(var(--hl, 44px) * .55); height: max(2px, calc(var(--hl, 44px) * .045)); }
.sa-first .sa-hero__sub { font-size: calc(var(--hl, 44px) * .28); }
.sa-first .sa-hero__copy { gap: var(--hgap, clamp(10px, 1.2vw, 18px)); }
.sa-first .sa-hero__cta { font-size: calc(var(--hl, 44px) * .36); padding: calc(var(--hl, 44px) * .28) calc(var(--hl, 44px) * .56); gap: calc(var(--hl, 44px) * .24); white-space: nowrap; }
.sa-first .sa-hero__cta svg { width: calc(var(--hl, 44px) * .34); height: calc(var(--hl, 44px) * .34); }
.sa-first .sa-hero__cta .sa-flag { width: calc(var(--hl, 44px) * .38); height: calc(var(--hl, 44px) * .38); }
.sa-first .sa-hero__l1 { white-space: nowrap; }

/* Плашка: логотип всегда по центру — боковые группы равной ширины, заявка справа от логотипа. */
.sa-menubar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.sa-menubar__side--r { min-width: 0; justify-content: flex-end; flex-wrap: nowrap; }
.sa-menubar__side--r .sa-xbtn--req { margin-right: 6px; }

/* Соцсети в плашке: при наведении только загораются цветом, размер не меняют (просьба владельца, 11.09.2026). */
.sa-menubar .sa-xbtn--soc:hover, .sa-menubar .sa-xbtn--soc:focus-visible { width: 32px !important; }
.sa-menubar .sa-xbtn--soc .sa-xbtn__label { display: none !important; }
.sa-menubar .sa-xbtn--soc:hover .sa-xbtn__ico, .sa-menubar .sa-xbtn--soc:focus-visible .sa-xbtn__ico { transform: none !important; opacity: 1 !important; }

/* Бегущая строка покупок — в цветах Телеграма и целиком ссылка на канал. */
.sa-ticker--tg { background: linear-gradient(180deg, rgba(14, 40, 62, .96), rgba(10, 26, 40, .9)); border-bottom: 1px solid rgba(42, 171, 238, .28); border-top: 1px solid rgba(42, 171, 238, .18); }
.sa-ticker__link { display: block; color: inherit; text-decoration: none; position: relative; }
.sa-ticker__tg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px;
	background: linear-gradient(135deg, #2aabee, #229ed9); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 6px 18px rgba(42, 171, 238, .35); }
.sa-ticker--tg .sa-ticker__mask { padding-left: 196px; }
.sa-ticker--tg .sa-ticker__item { border-color: rgba(42, 171, 238, .28); background: rgba(42, 171, 238, .08); }
.sa-ticker--tg .sa-ticker__item span { color: #6dd1ff; }
.sa-ticker--tg .sa-ticker__item small { color: #b9dcf2; }
.sa-ticker__link:hover .sa-ticker__item { border-color: rgba(42, 171, 238, .55); }
@media (max-width: 599px) { .sa-ticker__tg span { display: none; } .sa-ticker__tg { padding: 7px 9px; } .sa-ticker--tg .sa-ticker__mask { padding-left: 62px; } }

/* Карточка каталога: структура как у образца — название, цена с подсказкой, год·пробег·КПП, двигатель. */
.sa-card__body { gap: 8px; padding: 12px 14px 14px; }
.sa-card__title { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.sa-card__badge { color: var(--sa-muted); font-weight: 500; font-size: 12.5px; }
.sa-card__price { font-size: 20px; gap: 8px; align-items: center; }
.sa-card__info { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: help; }
.sa-card__info:hover { border-color: var(--sa-red-hot); color: #fff; }
.sa-card__row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #d6d6db; margin-top: auto; }
.sa-card__ym { padding: 2px 7px; border-radius: 5px; background: var(--sa-red-hot); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .01em; }
.sa-card__km { flex: 1 1 auto; text-align: center; }
.sa-card__gear { color: var(--sa-muted); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.sa-card__engine { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sa-muted); }
.sa-card__engine svg { flex: none; opacity: .8; }
.sa-card__specs { display: none; }

/* Фильтр каталога: вид полей как у образца. */
.sa-filter--v2 { padding: 22px 22px 18px; border-radius: 22px; }
.sa-filter--v2 .sa-filter__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 18px; }
.sa-filter__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sa-filter__field--wide { grid-column: span 1; }
.sa-filter__label { color: var(--sa-muted); font-size: 12.5px; }
.sa-filter--v2 select, .sa-filter--v2 input { height: 48px; padding: 0 40px 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9c9cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; font-size: 14.5px; }
.sa-filter--v2 select:disabled { opacity: .5; }
.sa-filter--v2 .sa-filter__range { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; }
.sa-filter--v2 .sa-filter__side { display: flex; align-items: center; min-width: 0; color: var(--sa-muted); font-size: 13px; }
.sa-filter--v2 .sa-filter__side + .sa-filter__side { border-left: 1px solid rgba(255, 255, 255, .12); }
.sa-filter--v2 .sa-filter__side span { padding-left: 12px; }
.sa-filter--v2 .sa-filter__side select { border: 0; border-radius: 0; background-color: transparent; padding-left: 8px; height: 46px; }
.sa-filter--v2 .sa-filter__side select:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .45); }
.sa-filter__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.sa-filter--v2 .sa-filter__quick { margin-top: 0; flex: 1 1 420px; }
.sa-filter--v2 .sa-filter__actions { margin-top: 0; justify-content: flex-end; flex: 0 0 auto; gap: 14px; }
.sa-filter__reset { color: var(--sa-muted); font-size: 13px; text-decoration: underline dotted; }
.sa-filter__reset:hover { color: #fff; }
.sa-filter__search { min-width: 260px; height: 54px; font-size: 16px; border-radius: 12px; }
.sa-chip--note { opacity: .7; }
@media (max-width: 1099px) { .sa-filter--v2 .sa-filter__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sa-filter--v2 { padding: 16px; } .sa-filter--v2 .sa-filter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sa-filter__search { min-width: 0; width: 100%; } .sa-filter--v2 .sa-filter__actions { width: 100%; } }
@media (max-width: 479px) { .sa-filter--v2 .sa-filter__grid { grid-template-columns: 1fr; } }

/* Живой фон первого экрана: холст с лепестками/листьями поверх фотографии, под текстом.
   Кадрирование фотографии считает ui.js (heroBox) и кладёт в --hpos, чтобы автомобиль был целиком. */
.sa-hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sa-first .sa-hero__copy { z-index: 3; }
.sa-first .sa-hero__pic img { object-position: var(--hpos, 50% 50%); }

/* Каталог новых авто из Китая (cn-new-pages.mjs). */
.sa-newcn__h { margin: 28px 0 14px; font-size: 22px; } .sa-newcn__h small { color: var(--sa-muted); font-size: 14px; font-weight: 500; margin-left: 8px; }
.sa-newcn__cn { color: var(--sa-muted); font-size: .55em; font-weight: 500; }
.sa-newcn__brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sa-newcn__brand { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--sa-ink); }
.sa-newcn__brand img { grid-row: span 2; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; }
.sa-newcn__brand b { font-size: 14px; } .sa-newcn__brand small { grid-column: 2; color: var(--sa-muted); font-size: 11.5px; } .sa-newcn__brand span { grid-row: span 2; color: var(--sa-muted); font-size: 12px; }
.sa-newcn__brand:hover { background: rgba(200, 20, 20, .14); }
.sa-ncard__new { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: rgba(200, 20, 20, .9); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.sa-ncard__y { font-size: 16px; color: #fff; }
.sa-chip--new { border-color: rgba(255, 0, 0, .55); background: rgba(200, 20, 20, .2); color: #fff; }
.sa-newcn__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; } .sa-newcn__head h1 { margin: 0; } .sa-newcn__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-newcn__gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: 8px; margin: 10px 0 18px; }
.sa-newcn__pic { display: block; border-radius: 12px; overflow: hidden; background: #101013; } .sa-newcn__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-newcn__pic.is-main { grid-column: span 3; grid-row: span 3; }
.sa-newcn__prices { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 8px; }
.sa-newcn__prices span { display: block; color: var(--sa-muted); font-size: 12.5px; } .sa-newcn__prices b { font-size: 22px; color: #fff; }
.sa-newcn__trims, .sa-newcn__specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.sa-newcn__trims th, .sa-newcn__trims td, .sa-newcn__specs th, .sa-newcn__specs td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); text-align: left; vertical-align: middle; }
.sa-newcn__trims thead th { color: var(--sa-muted); font-weight: 500; font-size: 12.5px; } .sa-newcn__trims td small { display: block; color: var(--sa-muted); font-size: 12px; }
.sa-newcn__specs th { color: var(--sa-muted); font-weight: 500; width: 46%; }
.sa-newcn__note { color: var(--sa-muted); font-size: 12.5px; margin-top: 16px; }
.sa-newcn__trims { display: block; overflow-x: auto; } .sa-newcn__trims table { min-width: 720px; }
@media (max-width: 767px) { .sa-newcn__gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; } .sa-newcn__pic.is-main { grid-column: span 3; grid-row: span 2; } .sa-newcn__brands { grid-template-columns: repeat(2, 1fr); } }

/* Вторая кнопка первого экрана: тот же размер, но прозрачная — акцент остаётся на первой. */
.sa-hero__actions { display: grid; grid-template-columns: max-content; gap: calc(var(--hl, 44px) * .22); justify-items: stretch; }
.sa-first .sa-hero__cta { width: 100%; justify-content: center; box-sizing: border-box; }
.sa-hero__cta--ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .45); box-shadow: none; color: #fff; backdrop-filter: blur(6px); cursor: pointer; }
.sa-hero__cta--ghost::before, .sa-hero__cta--ghost::after { content: none !important; }
.sa-hero__cta--ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }

/* Подвал: написать нам (личные чаты) отдельно от наших каналов. */
.sa-foot__ways { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.sa-foot__way { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .05); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s; }
.sa-foot__way svg { flex: none; }
.sa-foot__way:hover { transform: translateY(-1px); }
.sa-foot__way--tg:hover { background: #229ed9; border-color: #229ed9; }
.sa-foot__way--wa:hover { background: #25b34a; border-color: #25b34a; }
.sa-foot__way--max:hover { background: #6b46ff; border-color: #6b46ff; }
.sa-foot__col--contacts .sa-foot__phone { font-size: 17px; font-weight: 800; color: #fff; }

/* Раскрытие телефона в шапке: звонок, мессенджеры, бесплатный номер. */
.sa-phone__ways { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.sa-phone__way { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--sa-ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.sa-phone__way:hover { background: rgba(255, 255, 255, .07); }
.sa-phone__way--tg svg { color: #37aee2; } .sa-phone__way--wa svg { color: #4bd06a; } .sa-phone__way--max svg { color: #8c6bff; }
.sa-phone__main--free { opacity: .78; }

/* Офисы: карта-миниатюра и отметка «открыт/закрыт». */


.sa-foot__mapcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)); color: #fff; font-size: 13px; }
.sa-foot__mapcap b { font-size: 14.5px; } .sa-foot__mapcap i { font-style: normal; color: rgba(255, 255, 255, .75); }
.sa-foot__mapcap em { margin-left: auto; font-style: normal; color: var(--sa-red-hot); font-weight: 700; }
.sa-foot__map:hover .sa-foot__mapcap em { text-decoration: underline; }
.sa-foot__open { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: lowercase;
	background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); vertical-align: 2px; }
.sa-foot__open.is-open { background: rgba(53, 192, 122, .18); color: #6ee7a0; }

/* Кто сделал сайт — маленькая плашка, пока без ссылки. */
.sa-foot__made { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); font-size: 12px; }
.sa-foot__made b { color: rgba(255, 255, 255, .85); font-weight: 700; }

/* Согласие на обработку персональных данных: явная галочка, без неё форма не отправляется. */
.sa-lead__consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin: 2px 0 4px; color: var(--sa-muted); font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.sa-lead__consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--sa-red-hot); cursor: pointer; }
.sa-lead__consent > span { min-width: 0; text-align: left; }
.sa-lead__consent a { color: var(--sa-ink); text-decoration: underline; }
.sa-lead__consent:has(input:focus-visible) { outline: 2px solid var(--sa-red-hot); outline-offset: 4px; border-radius: 8px; }

/* Колонка «Написать нам» шире остальных: в ней кнопки мессенджеров, а не список ссылок. */
@media (min-width: 700px) { .sa-foot__cols { grid-template-columns: repeat(3, 1fr) 1.4fr; } }
.sa-foot__col--contacts { min-width: 0; }
.sa-foot__col--contacts .sa-foot__way { padding: 7px 11px; font-size: 12.5px; }
.sa-foot__col--contacts .sa-foot__phone { display: inline-block; margin-top: 6px; }
.sa-foot__col--contacts a { padding: 3px 0; }
@media (max-width: 699px) { .sa-foot__ways { gap: 6px; } }

/* Ссылки в юридическом абзаце подвала — читаемые, не акцентные. */
.sa-foot__legal a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 2px; }
.sa-foot__legal a:hover { color: #fff; }
/* Кнопки мессенджеров переносятся аккуратно и не вылезают из колонки. */
.sa-foot__ways { row-gap: 6px; }
.sa-foot__col--contacts .sa-foot__way span { white-space: nowrap; }

.sa-lead__note a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 2px; }
.sa-lead__note a:hover { color: #fff; }

/* Офисы в подвале: слева карта, справа список офисов колонкой. */
.sa-foot__maprow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sa-foot__maprow .sa-foot__offices-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sa-foot__maprow .sa-foot__office { padding: 10px 12px; }
.sa-foot__maprow .sa-foot__office p { margin: 2px 0 0; }
@media (max-width: 899px) { .sa-foot__maprow { grid-template-columns: 1fr; } }

/* Карта офисов: холст с тайлами, метки поверх, кнопки масштаба. */
.sa-map { position: relative; height: 300px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1);
	background: #0c0c0f; cursor: grab; touch-action: none; user-select: none; }
.sa-map.is-drag { cursor: grabbing; }
.sa-map__canvas { display: block; width: 100%; height: 100%; }
.sa-map__pins { position: absolute; inset: 0; pointer-events: none; }
.sa-map__pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px;
	pointer-events: auto; text-decoration: none; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sa-map__pin b { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.sa-map__pin span { padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .72); opacity: 0; transition: opacity .2s; }
.sa-map__pin:hover span, .sa-map__pin.is-main span { opacity: 1; }
.sa-map__pin.is-main b { background: var(--sa-red-hot); box-shadow: 0 0 0 6px rgba(232, 34, 28, .25), 0 2px 6px rgba(0, 0, 0, .6); }
.sa-map__ctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.sa-map__ctrl button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(12, 12, 15, .8);
	color: #fff; font-size: 16px; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
.sa-map__ctrl button:hover { background: var(--sa-red-hot); border-color: transparent; }
.sa-map__by { position: absolute; left: 8px; bottom: 6px; color: rgba(255, 255, 255, .45); font-size: 10.5px; pointer-events: none; }
@media (max-width: 899px) { .sa-map { height: 240px; } }

/* Плашка офиса: кликом показывает офис на карте, отдельная кнопка ведёт в 2ГИС. */
.sa-foot__office { position: relative; cursor: pointer; }
.sa-foot__office.is-shown { border-color: rgba(255, 255, 255, .35); }
.sa-foot__gis { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px 5px 6px; border-radius: 999px;
	background: rgba(25, 170, 30, .14); border: 1px solid rgba(25, 170, 30, .45); color: #7ee88a; font-size: 12px; font-weight: 700; text-decoration: none; }
.sa-foot__gis i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: #19aa1e; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; }
.sa-foot__gis:hover { background: #19aa1e; color: #fff; border-color: transparent; }

/* Кнопки мессенджеров: значок и подпись в ряд, без наложения. */
.sa-foot__way { position: relative; }
.sa-foot__way svg { position: static !important; width: 18px; height: 18px; flex: none; }
.sa-foot__way span { position: static !important; white-space: nowrap; }

/* Сноска о Meta под каналами. */
.sa-foot__meta { margin: 8px 0 0; color: rgba(255, 255, 255, .55); font-size: 10.5px; line-height: 1.4; max-width: 42ch; }

/* Амбассадор в подвале: виден целиком, без обрезки по краям. */
.sa-foot__amb { object-fit: contain !important; object-position: center bottom !important; }

/* Выбор способа связи: все кнопки сразу с подписью, при наведении загораются своим цветом,
   у выбранной — галочка. Кнопки стоят на месте, поля появляются ниже, поэтому окно не прыгает. */
.sa-pop--lead .sa-ways__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-pop--lead .sa-way { width: auto !important; height: auto; min-height: 44px; padding: 0 14px 0 0; border-radius: 999px; overflow: visible; gap: 2px; }
.sa-pop--lead .sa-way__ico { width: 44px; height: 44px; }
.sa-pop--lead .sa-way__ico svg { width: 19px; height: 19px; }
.sa-pop--lead .sa-way__label { opacity: 1 !important; font-size: 13.5px; padding-right: 0; }
.sa-pop--lead .sa-way__ok { width: 0; opacity: 0; margin-left: 4px; }
.sa-pop--lead .sa-way:has(input:checked) .sa-way__ok { width: 14px; opacity: 1; }
.sa-pop--lead .sa-way:hover { transform: translateY(-1px); }
.sa-way--tg:hover { background: rgba(42, 171, 238, .22); border-color: rgba(42, 171, 238, .75); }
.sa-way--wa:hover { background: rgba(37, 179, 74, .22); border-color: rgba(37, 179, 74, .75); }
.sa-way--max:hover { background: rgba(107, 70, 255, .22); border-color: rgba(107, 70, 255, .75); }
.sa-way--mail:hover { background: rgba(255, 160, 60, .2); border-color: rgba(255, 160, 60, .7); }
.sa-way--call:hover, .sa-way--call:has(input:checked) { background: rgba(53, 192, 122, .2); border-color: rgba(53, 192, 122, .75); }
.sa-way--wa:has(input:checked) { background: rgba(37, 179, 74, .22); border-color: rgba(37, 179, 74, .75); }
.sa-way--max:has(input:checked) { background: rgba(107, 70, 255, .22); border-color: rgba(107, 70, 255, .75); }
.sa-way--mail:has(input:checked) { background: rgba(255, 160, 60, .2); border-color: rgba(255, 160, 60, .7); }

/* Попап заявки прижат к верху: при появлении полей вниз растёт только низ, кнопки остаются на месте. */
.sa-pop--lead { inset: 6vh auto auto 50%; transform: translateX(-50%); margin: 0; max-height: 88dvh; }
@media (max-width: 599px) { .sa-pop--lead { inset: 3vh auto auto 50%; max-height: 94dvh; } }

/* Удобное время для звонка. */
.sa-lead__when { display: flex; flex-direction: column; gap: 6px; color: var(--sa-muted); font-size: 12.5px; }
.sa-lead__when small { color: rgba(255, 255, 255, .4); font-size: 11.5px; }
.sa-lead__when select { background: rgba(255, 255, 255, .05); color: var(--sa-ink); border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 14px; }
.sa-lead__call[hidden] { display: none !important; }

/* Карточка новой машины из Китая: слева галерея, справа цена и характеристики — как у лотов. */
.sa-ncar__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.sa-ncar__head h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: clamp(22px, 3vw, 34px); }
.sa-ncar__brand { padding: 4px 12px; border-radius: 10px; background: var(--sa-red-hot); color: #fff; }
.sa-ncar__model { padding: 4px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.sa-ncar__row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sa-ncar__side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 112px; }
.sa-ncar__prices { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 10px; }
.sa-ncar__prices span { display: block; color: var(--sa-muted); font-size: 12.5px; }
.sa-ncar__prices b { font-size: 20px; color: #fff; }
.sa-ncar__rub b { font-size: 26px; color: #fff; }
.sa-ncar__note { margin: 0; color: var(--sa-muted); font-size: 12px; line-height: 1.5; }
.sa-ncar__specs { padding: 4px 2px; }
.sa-ncar__specs h2 { font-size: 17px; margin: 0 0 8px; } .sa-ncar__specs h2 small { color: var(--sa-muted); font-size: 12.5px; font-weight: 500; margin-left: 6px; }
.sa-ncar__specs table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sa-ncar__specs th, .sa-ncar__specs td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); text-align: left; }
.sa-ncar__specs th { color: var(--sa-muted); font-weight: 500; width: 52%; }
.sa-ncar__trims { overflow-x: auto; }
.sa-ncar__trims table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 14px; }
.sa-ncar__trims th, .sa-ncar__trims td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); text-align: left; vertical-align: middle; }
.sa-ncar__trims thead th { color: var(--sa-muted); font-weight: 500; font-size: 12.5px; }
.sa-ncar__trims td small { display: block; color: var(--sa-muted); font-size: 12px; }
@media (max-width: 899px) { .sa-ncar__row { grid-template-columns: 1fr; } .sa-ncar__side { position: static; } }

/* Первый экран: текст и кнопки — один блок поверх карусели, поэтому при смене кадра
   они стоят пиксель в пиксель на месте. Меняется только название страны и флаг. */
.sa-first .sa-hero { position: relative; }
.sa-first [data-hero-copy] { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: flex-start;
	justify-content: flex-start; gap: var(--hgap, 14px); pointer-events: none; }
.sa-first [data-hero-copy] > * { pointer-events: auto; }
.sa-first [data-hero-copy] .sa-hero__veil { pointer-events: none; }
.sa-first .sa-hero__slide .sa-hero__copy { display: none; }

/* Флаг на кнопке каталога: крупнее, с лёгким «развеванием» и плавной сменой. */
.sa-hero__cta .sa-flag--wave { display: inline-flex; width: calc(var(--hl, 44px) * .52); height: calc(var(--hl, 44px) * .36); border-radius: 3px;
	overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: opacity .22s ease, transform .22s ease; transform-origin: left center; }
.sa-hero__cta .sa-flag--wave svg, .sa-hero__cta .sa-flag--wave img { width: 100%; height: 100%; object-fit: cover; display: block;
	animation: saFlagWave 3.4s ease-in-out infinite; transform-origin: left center; }
.sa-hero__cta .sa-flag--wave.is-swap { opacity: 0; transform: rotateY(85deg) scale(.85); }
@keyframes saFlagWave {
	0%, 100% { transform: perspective(220px) rotateY(0deg) skewY(0deg); }
	28% { transform: perspective(220px) rotateY(-9deg) skewY(1.4deg); }
	58% { transform: perspective(220px) rotateY(7deg) skewY(-1.2deg); }
	80% { transform: perspective(220px) rotateY(-3deg) skewY(.5deg); }
}
@media (prefers-reduced-motion: reduce) { .sa-hero__cta .sa-flag--wave svg { animation: none; } }

/* Подложка лежит под текстом, а не поверх: иначе она гасила надписи и перекрывала кнопки. */
.sa-first [data-hero-copy] .sa-hero__veil { z-index: 0; }
.sa-first [data-hero-copy] > *:not(.sa-hero__veil) { position: relative; z-index: 1; }

/* Кнопки раньше проявлялись вместе со слайдом (.sa-hero__slide.is-ready), а теперь живут
   в общем блоке поверх карусели — показываем их сразу. */
.sa-first [data-hero-copy] .sa-hero__actions { opacity: 1; visibility: visible; }

/* Кнопки «Написать нам»: значок и подпись по одной линии (подпись съезжала вниз). */
.sa-foot__way { align-items: center; line-height: 1; }
.sa-foot__way svg { display: block; align-self: center; }
.sa-foot__way span { display: inline-block; line-height: 1; align-self: center; }

/* Амбассадор в подвале виден целиком: раньше его растягивали на 112 % высоты без ограничения
   по ширине, и вытянутая рука уходила за край карточки. */
.sa-foot__amb { max-width: 100% !important; width: auto; }
@media (min-width: 600px) { .sa-foot__amb { height: calc(100% - 8px) !important; max-width: 100% !important; } }
@media (min-width: 600px) and (max-width: 899px) { .sa-foot__amb { height: calc(100% - 6px) !important; } }

/* Кнопка «написать нам» — строка: значок и подпись рядом (а не друг под другом). */
.sa-foot__way { display: inline-flex !important; align-items: center; gap: 7px; }

/* Instagram: свой фирменный градиент — и в подвале, и в шапке. */
.sa-foot__soc--ig:hover, .sa-foot__way--ig:hover { background: linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7); border-color: transparent; color: #fff; }
.sa-menubar .sa-xbtn--ig .sa-xbtn__bg { background: linear-gradient(135deg, #F9CE34, #EE2A7B 55%, #6228D7) !important; }

/* Личный кабинет, как и соцсети, при наведении только подсвечивается и не раздвигается. */
.sa-menubar .sa-account__login:hover, .sa-menubar .sa-account__login:focus-visible,
.sa-menubar .sa-account__avatar:hover, .sa-menubar .sa-account__avatar:focus-visible { width: 46px !important; }
.sa-menubar .sa-account__login .sa-xbtn__label { display: none !important; }

/* Навигация в каталоге новых авто — плашками, а не синими ссылками. */
.sa-crumbs--chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sa-crumbs--chips a, .sa-crumbs--chips span { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; text-decoration: none; line-height: 1.3;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: var(--sa-muted); }
.sa-crumbs--chips a:hover { background: rgba(200, 20, 20, .18); border-color: rgba(255, 0, 0, .45); color: #fff; }
.sa-crumbs--chips span { background: rgba(200, 20, 20, .2); border-color: rgba(255, 0, 0, .45); color: #fff; font-weight: 600; }
.sa-crumbs--chips i { display: none; }
.sa-ncar__head h1 { font-size: clamp(22px, 3vw, 34px); }

/* Лента миниатюр с эффектом дока: соседи приподнимаются под курсором. */
.sa-dock { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.sa-dock img { transition: transform .16s cubic-bezier(.2, .7, .3, 1); transform-origin: center bottom; will-change: transform; }
.sa-ncar__gal { margin-bottom: 4px; }
.sa-ncar__gal .sa-car__main { aspect-ratio: 4 / 3; }

/* Док-лента: анимируем только transform и заранее выносим миниатюры на свой слой —
   так браузер не пересобирает вёрстку при наведении. */
.sa-dock img { transition: transform .14s cubic-bezier(.2, .7, .3, 1); transform-origin: center bottom;
	will-change: transform; backface-visibility: hidden; contain: paint; }

/* Instagram в подвале окрашен сразу, как и остальные каналы. */
.sa-foot__soc--ig { background: linear-gradient(45deg, #F9CE34, #EE2A7B 55%, #6228D7); }
.sa-foot__soc--ig:hover { box-shadow: 0 8px 18px rgba(238, 42, 123, .45); }

/* Кнопка 2ГИС — короткая и приколота к правому нижнему углу плашки офиса. */
.sa-foot__office { padding-bottom: 34px; }
.sa-foot__gis { position: absolute; right: 10px; bottom: 10px; margin: 0; padding: 4px 9px 4px 5px; font-size: 11.5px; gap: 5px; }
.sa-foot__gis i { width: 15px; height: 15px; font-size: 10px; }
.sa-foot__maprow .sa-foot__office { padding-bottom: 34px; }

/* Длинные списки каталога: браузер не рассчитывает то, что за экраном, — прокрутка не спотыкается. */
.sa-newcn .sa-grid--cards > .sa-card, .sa-newcn__brands > .sa-newcn__brand { content-visibility: auto; }
.sa-newcn .sa-grid--cards > .sa-card { contain-intrinsic-size: 320px 360px; }
.sa-newcn__brands > .sa-newcn__brand { contain-intrinsic-size: 180px 62px; }

/* Плашка бренда: значок слева, название по центру строки, счётчик справа. */
.sa-newcn__brand { grid-template-rows: auto; align-items: center; min-height: 60px; }
.sa-newcn__brand img { grid-row: auto; }
.sa-newcn__brand b { grid-column: 2; align-self: center; }
.sa-newcn__brand span { grid-row: auto; align-self: center; }

/* Бренды сгруппированы по первой букве. */
.sa-newcn__group { margin-bottom: 18px; }
.sa-newcn__letter { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; color: var(--sa-red-hot); text-transform: uppercase; }

/* 🔴 Стекло (.sa-glass) — это backdrop-filter плюс SVG-фильтр: одна плашка красива, двести
   кладут прокрутку (было 25 кадров/с). В длинных списках каталога рисуем обычный фон. */
.sa-newcn__brand { position: relative; background: rgba(18, 18, 22, .72); border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.sa-newcn .sa-card.sa-glass, .sa-newcn .sa-card.sa-glass::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.sa-newcn .sa-card.sa-glass { background: rgba(18, 18, 22, .78); }

/* Единая карточка: шапка с плашками и строки цены над основной суммой. */
.sa-car__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 6px; }
.sa-car__head .sa-car__title { margin: 0; }
.sa-car__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-car__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px;
	color: var(--sa-muted); font-size: 12.5px; }
.sa-car__price-row b { color: #fff; font-size: 15px; font-weight: 700; }
.sa-ncar .sa-car__section h2 small { color: var(--sa-muted); font-size: 13px; font-weight: 500; margin-left: 6px; }

/* Комплектации по модификациям: свёрнутые группы, первая открыта. */
.sa-mods__item { border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; margin-bottom: 8px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.sa-mods__item > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
	padding: 13px 16px; cursor: pointer; list-style: none; }
.sa-mods__item > summary::-webkit-details-marker { display: none; }
.sa-mods__item > summary::after { content: "⌄"; margin-left: auto; color: var(--sa-muted); transition: transform .2s; }
.sa-mods__item[open] > summary::after { transform: rotate(180deg); }
.sa-mods__item[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sa-mods__name { font-weight: 700; font-size: 14.5px; color: #fff; }
.sa-mods__meta { color: var(--sa-muted); font-size: 12.5px; }
.sa-mods__item:hover { border-color: rgba(255, 255, 255, .2); }
.sa-mods__item .sa-ncar__trims table { min-width: 620px; }
.sa-mods__item .sa-ncar__trims tr:last-child td { border-bottom: 0; }

/* Свои выпадающие списки: системный <select> спрятан, но остаётся носителем значения. */
.sa-sel { position: relative; min-width: 0; }
/* Системный select под своим списком спрятан жёстко: правила плашек (.sa-jp__fitem select и т. п.)
   задают ему высоту и фон, и без !important он проступал вторым полем под кнопкой. */
.sa-sel__native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important;
	min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
.sa-sel__btn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
	height: 48px; padding: 0 38px 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .05); color: var(--sa-ink); font: inherit; font-size: 14.5px;
	text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sa-sel__btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px;
	margin-top: -6px; border-right: 2px solid var(--sa-muted); border-bottom: 2px solid var(--sa-muted);
	transform: rotate(45deg); transition: transform .18s; }
.sa-sel.is-open .sa-sel__btn::after { transform: rotate(-135deg); margin-top: -2px; }
.sa-sel__btn:hover { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); }
.sa-sel__btn:focus-visible { outline: none; border-color: rgba(255, 40, 40, .7); box-shadow: 0 0 0 3px rgba(255, 40, 40, .18); }
.sa-sel.is-open .sa-sel__btn { border-color: rgba(255, 40, 40, .6); background: rgba(255, 255, 255, .08); }
.sa-sel__btn[disabled] { opacity: .45; cursor: default; }
.sa-sel__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-sel:not(.is-set) .sa-sel__val { color: var(--sa-muted); }

.sa-sel__pop { position: fixed; z-index: 2000; display: flex; flex-direction: column; min-width: 0;
	/* Внутри заявки список показывается как popover, а браузер красит такой слой своим цветом
	   (чёрный текст на нашем тёмном фоне). Поэтому цвет задаём явно. */
	color: var(--sa-ink);
	border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: #14141a;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6); overflow: hidden; animation: sa-sel-in .14s ease-out; }
@keyframes sa-sel-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sa-sel__pop { animation: none; } .sa-sel__btn::after { transition: none; } }
.sa-sel__search { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sa-sel__search input { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; font: inherit; font-size: 14px;
	color: var(--sa-ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; }
.sa-sel__search input:focus { outline: none; border-color: rgba(255, 40, 40, .55); }
.sa-sel__list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
.sa-sel__opt { color: var(--sa-ink); padding: 9px 11px; border-radius: 9px; font-size: 14px; line-height: 1.25; cursor: pointer;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-sel__opt.is-cur { background: rgba(255, 255, 255, .1); }
.sa-sel__opt.is-on { color: #fff; font-weight: 600; background: rgba(255, 40, 40, .2); }
.sa-sel__opt.is-on.is-cur { background: rgba(255, 40, 40, .32); }
.sa-sel__grp { padding: 10px 11px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sa-muted); }
.sa-sel__grp + .sa-sel__opt { margin-top: 0; }
.sa-sel__empty { padding: 14px 12px; color: var(--sa-muted); font-size: 13.5px; text-align: center; }

/* В паре «от — до» кнопка встраивается в общую рамку. */
.sa-filter--v2 .sa-filter__side .sa-sel { flex: 1 1 auto; }
.sa-filter--v2 .sa-filter__side .sa-sel__btn { height: 46px; border: 0; border-radius: 0; background: transparent; padding-left: 8px; padding-right: 30px; }
.sa-filter--v2 .sa-filter__side .sa-sel__btn::after { right: 10px; width: 7px; height: 7px; }
.sa-filter--v2 .sa-filter__side .sa-sel__btn:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 40, 40, .45); }
.sa-filter--v2 .sa-filter__side .sa-sel.is-open .sa-sel__btn { background: rgba(255, 255, 255, .07); }

/* «от — до» одной строкой: подпись слева, значение рядом — поле перестаёт растягиваться по высоте. */
.sa-filter--v2 .sa-filter__side { flex-direction: row; gap: 0; }
.sa-filter--v2 .sa-filter__side > span { flex: 0 0 auto; padding-left: 12px; padding-right: 2px; }
.sa-filter--v2 .sa-filter__range { height: 48px; align-items: stretch; }
.sa-filter--v2 .sa-filter__side .sa-sel__btn { height: 100%; }

/* На телефоне список открывается листом снизу — удобнее пальцем, не спорит с клавиатурой. */
@media (max-width: 559px) {
	.sa-sel__pop--sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto !important; max-height: 72vh !important;
		border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom);
		animation: sa-sel-up .18s ease-out; }
	@keyframes sa-sel-up { from { transform: translateY(12px); opacity: 0; } }
	.sa-sel__pop--sheet .sa-sel__opt { padding: 13px 12px; font-size: 15px; }
	.sa-sel__pop--sheet .sa-sel__search input { height: 42px; font-size: 16px; }
}

/* Заявка открывается в top-layer, поэтому её список рисуем тоже поверх. */
.sa-lead__when .sa-sel__btn { height: 44px; }

/* Когда список сам показан как popover, браузер даёт ему свои отступы — снимаем. */
.sa-sel__pop:popover-open { margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .14); }

.sa-sel__veil { position: fixed; inset: 0; z-index: 1999; background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px); animation: sa-sel-veil .18s ease-out; }
@keyframes sa-sel-veil { from { opacity: 0; } }
.sa-sel__head { display: none; }
@media (max-width: 559px) {
	.sa-sel__pop--sheet .sa-sel__head { display: block; padding: 14px 16px 10px; font-size: 15px; font-weight: 600; color: #fff; }
	.sa-sel__pop--sheet::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px;
		margin-left: -19px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
	.sa-sel__pop--sheet .sa-sel__head { padding-top: 18px; }
}

/* Числовое поле фильтра: внутри общей рамки пары «от — до» и отдельным полем для цены. */
.sa-filter--v2 input.sa-num { height: 46px; width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-radius: 0;
	background: transparent; color: var(--sa-ink); font: inherit; font-size: 14.5px; padding: 0 10px 0 8px;
	appearance: none; -webkit-appearance: none; }
.sa-filter--v2 input.sa-num::placeholder { color: var(--sa-muted); }
.sa-filter--v2 input.sa-num:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(255, 40, 40, .45); }
.sa-filter--v2 .sa-filter__one { display: flex; height: 48px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; }
.sa-filter--v2 .sa-filter__one input.sa-num { height: 100%; padding-left: 14px; }
.sa-filter--v2 .sa-filter__one:focus-within { border-color: rgba(255, 40, 40, .6); }
.sa-filter--v2 .sa-filter__one input.sa-num:focus { box-shadow: none; }
.sa-sel__pop--num .sa-sel__opt { text-align: left; }
.sa-sel__pop--num .sa-sel__head { display: block; padding: 9px 12px 6px; font-size: 11.5px; letter-spacing: .04em;
	text-transform: uppercase; color: var(--sa-muted); border-bottom: 1px solid rgba(255, 255, 255, .07); margin-bottom: 4px; }
.sa-sel__pop--num { padding: 4px; overflow-y: auto; }
/* Попап — flex-колонка, а подсказки лежат в нём напрямую: без flex: none 19 лет сжимались
   в 255 px и цифры резались пополам. Список должен прокручиваться, а не ужиматься. */
.sa-sel__pop--num .sa-sel__opt { flex: 0 0 auto; }

/* Подсвечиваем активную половину ячейки, а не рисуем прямую рамку внутри скруглённой. */
.sa-filter--v2 input.sa-num:focus { box-shadow: none; background: rgba(255, 255, 255, .07); }
.sa-filter--v2 .sa-filter__side:focus-within { background: rgba(255, 255, 255, .07); }
.sa-filter--v2 .sa-filter__side:focus-within > span { color: #fff; }
.sa-filter--v2 .sa-filter__range:focus-within { border-color: rgba(255, 40, 40, .55); }
/* Заголовок нужен листу на телефоне; на десктопе список и так стоит под своим полем. */
.sa-sel__pop--num .sa-sel__head { display: none; }
@media (max-width: 559px) { .sa-sel__pop--num.sa-sel__pop--sheet .sa-sel__head { display: block; padding: 18px 16px 10px;
	font-size: 15px; font-weight: 600; color: #fff; text-transform: none; letter-spacing: 0; } }

@media (max-width: 559px) { .sa-sel__pop--num.sa-sel__pop--sheet { max-height: 55vh !important; } }

/* Кадр героя листается перетаскиванием: по горизонтали ведём мы, по вертикали — страница. */
.sa-first { touch-action: pan-y; }
.sa-first .sa-hero { cursor: grab; }
.sa-first.is-dragging, .sa-first.is-dragging .sa-hero { cursor: grabbing; user-select: none; }
.sa-first.is-dragging .sa-hero__pic img { pointer-events: none; }

/* Кнопка заявки внутри первого шага — справа, по центру карточки. */
.sa-step--cta { align-items: center; }
.sa-step__cta { margin-left: auto; flex: 0 0 auto; padding-left: 18px; }
.sa-step__cta .sa-btn { white-space: nowrap; }
@media (max-width: 700px) {
	.sa-step__cta { margin-left: 0; padding-left: 0; width: 100%; }
	.sa-step__cta .sa-btn { width: 100%; }
}

.sa-catalog__mode { color: var(--sa-muted); font-size: 13px; }
.sa-catalog__mode a { color: #fff; text-decoration: underline dotted; }

/* Сводка плитками в правой колонке карточки. */
.sa-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.sa-tile { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.sa-tile span { display: block; color: var(--sa-muted); font-size: 11.5px; margin-bottom: 3px; }
.sa-tile b { font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sa-tile.is-ok b { color: #67d98b; }
.sa-tile.is-warn b { color: #ffb15c; }

/* Предварительная стоимость: расходы двумя колонками, итог отдельной строкой. */
.sa-cost { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
@media (min-width: 900px) { .sa-cost { grid-template-columns: 1fr 1fr; } }
.sa-cost__row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.sa-cost__row span { color: var(--sa-muted); font-size: 13.5px; }
.sa-cost__row b { font-size: 14.5px; white-space: nowrap; }
.sa-cost__total { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px;
	padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(255, 40, 40, .35);
	background: linear-gradient(90deg, rgba(255, 40, 40, .16), rgba(255, 40, 40, .05)); }
.sa-cost__total b { font-size: 20px; color: #fff; white-space: nowrap; }
.sa-cost__note { color: var(--sa-muted); font-size: 12.5px; margin: 10px 0 0; }

/* Шкала оценки цены среди похожих. */
.sa-gauge__bar { position: relative; height: 10px; border-radius: 6px;
	background: linear-gradient(90deg, #21c06b, #8ec63f, #ffc93c, #ff8a3c, #ff3b30); }
.sa-gauge__pin { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.sa-gauge__marks { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--sa-muted); font-size: 12.5px; }
.sa-gauge__marks .is-on { color: #fff; font-weight: 700; }

/* Опции — плотным списком в три колонки. */
.sa-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 22px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sa-opts li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--sa-ink); }
.sa-opts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
	border-radius: 50%; background: var(--sa-red-hot); }

/* Комплектация — всегда с новой строки под маркой и моделью; цена по центру плитки. */
.sa-card__badge { display: block; margin-top: 2px; }
.sa-card__price { justify-content: center; text-align: center; }

/* Пока блок за пределами экрана, его бесконечные анимации стоят — иначе Safari
   перерисовывает их всю прокрутку и теряет кадры. */
.sa-paused, .sa-paused *, .sa-paused::before, .sa-paused::after, .sa-paused *::before, .sa-paused *::after { animation-play-state: paused !important; }

/* В покое ничего не крутится: блики шапки играют только под курсором, пульсация плашек
   и блик скрытого загрузчика выключены. Постоянная анимация поверх sticky-шапки
   заставляла Safari перерисовывать экран каждый кадр прокрутки. */
.sa-soc::after, .sa-xbtn__glyph::after, .sa-xbtn::after { animation-play-state: paused; }
.sa-soc:hover::after, .sa-xbtn:hover .sa-xbtn__glyph::after, .sa-xbtn:hover::after { animation-play-state: running; }
.sa-pageload:not(.is-on) .sa-pageload__sheen, .sa-pageload:not(.is-on) * { animation-play-state: paused !important; }
.sa-tag--ok { animation: none !important; }

/* Зернистость — готовой плиткой, а не живым SVG-фильтром: feTurbulence на площади 457×900
   пересчитывался в Safari при каждой перерисовке и съедал прокрутку всего сайта. */
.sa-foot__noise { position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background: url("/images/noise.webp") repeat; background-size: 160px 160px; mix-blend-mode: overlay; }
.sa-foot__amb { filter: none; }

/* Цена в плитке каталога занимает всю ширину — иначе центрировать нечего. */
.sa-card__price { width: 100%; }
/* Текст на пункт крупнее: экран стал шире, мелкий шрифт на нём читается тяжело. */
body { font-size: 16.5px; }
.sa-card__title { font-size: 15.5px; }
.sa-card__price { font-size: 19px; }
.sa-card__row, .sa-card__spec { font-size: 13px; }
.sa-filter--v2 .sa-sel__btn, .sa-filter--v2 input.sa-num { font-size: 15px; }
.sa-filter__label { font-size: 13px; }

.sa-tile a { color: var(--sa-ember, #ff7a45); text-decoration: none; }
.sa-tile a:hover { text-decoration: underline; }

/* Переключатель вида каталога. */
.sa-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.sa-view__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 8px;
	background: transparent; color: var(--sa-muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.sa-view__btn:hover { color: #fff; }
.sa-view__btn[aria-pressed="true"] { background: rgba(255, 40, 40, .22); color: #fff; }
@media (max-width: 640px) { .sa-view__btn span { display: none; } }

/* Вид списком: фото слева, данные в колонку, цена справа — как в каталогах коллег. */
.sa-grid--list { display: flex; flex-direction: column; gap: 10px; }
.sa-grid--list .sa-card { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) minmax(190px, 250px);
	align-items: stretch; gap: 0; }
.sa-grid--list .sa-card__photo { height: 100%; min-height: 168px; border-radius: 16px 0 0 16px; }
.sa-grid--list .sa-card__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 20px; }
.sa-grid--list .sa-card__title { font-size: 17px; }
.sa-grid--list .sa-card__badge { color: var(--sa-muted); font-size: 13px; }
.sa-grid--list .sa-card__row { gap: 18px; font-size: 13.5px; }
.sa-grid--list .sa-card__spec { font-size: 13.5px; }

@media (max-width: 860px) {
	.sa-grid--list .sa-card { grid-template-columns: 140px minmax(0, 1fr); }
	.sa-grid--list .sa-card__price { position: static; width: auto; border-left: 0; align-items: flex-start; }
	.sa-grid--list .sa-card__body { padding-right: 16px; }
	.sa-grid--list .sa-card__photo { min-height: 130px; }
}

/* Список: данные идут сверху вниз без провалов, характеристики — компактной строкой. */
.sa-grid--list .sa-card__body { justify-content: flex-start; gap: 7px; padding-top: 18px; padding-bottom: 18px; }
.sa-grid--list .sa-card__row { justify-content: flex-start; gap: 22px; flex-wrap: wrap; margin-top: 0; }
.sa-grid--list .sa-card__spec { justify-content: flex-start; gap: 18px; }
.sa-grid--list .sa-card__tags { position: static; margin-top: 2px; }

.sa-grid--list .sa-card__ym { margin-right: 0; }

/* Список: тело карточки — сетка «данные | цена», без абсолютного позиционирования:
   в WebKit absolute внутри flex давал цену, прилипшую к верху. */
.sa-grid--list .sa-card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
	align-items: center; column-gap: 22px; row-gap: 7px; padding: 18px 20px; }
.sa-grid--list .sa-card__title, .sa-grid--list .sa-card__badge,
.sa-grid--list .sa-card__row, .sa-grid--list .sa-card__spec, .sa-grid--list .sa-card__tags { grid-column: 1; }
.sa-grid--list .sa-card__price { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center;
	border-left: 1px solid rgba(255, 255, 255, .08); width: 100%; min-height: 64px; font-size: 21px; }
@media (max-width: 860px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr); }
	.sa-grid--list .sa-card__price { grid-column: 1; grid-row: auto; border-left: 0; min-height: 0; justify-content: flex-start; }
}

/* Список: данные плотной колонкой сверху, без растягивания по высоте. */
.sa-grid--list .sa-card__body { align-content: center; }
.sa-grid--list .sa-card__row, .sa-grid--list .sa-card__spec { margin-top: 0; justify-content: flex-start; }
.sa-grid--list .sa-card__title { margin-bottom: 0; }

/* В списке характеристики идут подряд слева, а не расползаются по ширине строки. */
.sa-grid--list .sa-card__km { flex: 0 0 auto; text-align: left; }
.sa-grid--list .sa-card__gear { max-width: none; }
.sa-grid--list .sa-card__row > *, .sa-grid--list .sa-card__spec > * { flex: 0 0 auto; }

/* Значок «i» и плашка «по запросу» должны быть выше невидимой ссылки карточки,
   иначе подсказка не всплывает — курсор попадает на ссылку. */
.sa-card__info, .sa-card__ask { position: relative; z-index: 5; }

/* Список: справа от фото — название с комплектацией, столбец характеристик и цена,
   чтобы строка была заполнена, а не пустовала. */
.sa-grid--list .sa-card__body { grid-template-columns: minmax(210px, 1.15fr) minmax(190px, 1fr) minmax(180px, 230px);
	align-items: center; column-gap: 26px; row-gap: 6px; }
.sa-grid--list .sa-card__title { grid-column: 1; grid-row: 1; }
.sa-grid--list .sa-card__badge { grid-column: 1; grid-row: 2; }
.sa-grid--list .sa-card__row { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 4px; }
.sa-grid--list .sa-card__spec { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 4px; }
.sa-grid--list .sa-card__price { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1100px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr) minmax(170px, 210px); }
	.sa-grid--list .sa-card__row { grid-column: 1; grid-row: 3; flex-direction: row; gap: 18px; }
	.sa-grid--list .sa-card__spec { grid-column: 1; grid-row: 4; flex-direction: row; gap: 18px; }
	.sa-grid--list .sa-card__price { grid-column: 2; grid-row: 1 / span 4; }
}
@media (max-width: 860px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr); }
	.sa-grid--list .sa-card__price { grid-column: 1; grid-row: auto; }
}

/* Список: четыре зоны — название, год-пробег, двигатель, цена. Строка заполнена по всей ширине. */
.sa-grid--list .sa-card__body { grid-template-columns: minmax(200px, 1.1fr) minmax(150px, .8fr) minmax(170px, .9fr) minmax(180px, 230px); }
.sa-grid--list .sa-card__engine { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-content: flex-start; }
.sa-grid--list .sa-card__spec { display: none; }
.sa-grid--list .sa-card__row { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.sa-grid--list .sa-card__price { grid-column: 4; }
@media (max-width: 1100px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr) minmax(170px, 210px); }
	.sa-grid--list .sa-card__row { grid-column: 1; grid-row: 3; flex-direction: row; gap: 18px; }
	.sa-grid--list .sa-card__engine { grid-column: 1; grid-row: 4; }
	.sa-grid--list .sa-card__price { grid-column: 2; grid-row: 1 / span 4; }
}
@media (max-width: 860px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr); }
	.sa-grid--list .sa-card__price { grid-column: 1; grid-row: auto; }
	.sa-grid--list .sa-card__engine { grid-row: auto; }
}

/* Карточки стали крупнее — текст в них тоже. */
.sa-card__title { font-size: 17px; line-height: 1.25; }
.sa-card__badge { font-size: 14px; }
.sa-card__price { font-size: 23px; }
.sa-card__row { font-size: 14px; }
.sa-card__ym { font-size: 13px; padding: 3px 8px; }
.sa-card__engine { font-size: 13.5px; }
.sa-card__ask { font-size: 15px; }
.sa-tag { font-size: 12.5px; }
@media (max-width: 820px) {
	.sa-card__title { font-size: 15.5px; }
	.sa-card__price { font-size: 20px; }
}

/* Постраничная навигация: края, соседние страницы и общее число. */
.sa-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 26px 0 8px; }
.sa-pager__nums { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sa-pager a, .sa-pager__cur, .sa-pager__gap { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex;
	align-items: center; justify-content: center; border-radius: 11px; font-size: 14.5px; text-decoration: none; }
.sa-pager a { color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.sa-pager a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); }
.sa-pager__cur { background: linear-gradient(180deg, var(--sa-red, #d81e1e), var(--sa-red-deep, #8f0f0f)); color: #fff; font-weight: 700; border: 1px solid transparent; }
.sa-pager a, .sa-pager__cur, .sa-pager__gap { box-sizing: border-box; }
.sa-pager__gap { color: var(--sa-muted); min-width: 24px; padding: 0 4px; }
.sa-pager__total { color: var(--sa-muted); font-size: 13px; margin-left: 8px; }
@media (max-width: 560px) { .sa-pager__edge[title] { display: none; } .sa-pager__total { width: 100%; text-align: center; margin: 4px 0 0; } }

/* Ленты на главной — того же масштаба, что плитки каталога: четыре карточки в строку,
   остальные листаются стрелками. Сначала ужимаются поля, потом падает число колонок. */
.sa-reel__track, .sa-reel__track--home {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4);
	grid-template-columns: none; gap: 18px; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity; padding-bottom: 10px;
}
.sa-reel__track--home > .sa-card { flex: none; width: auto; }
@media (max-width: 1180px) { .sa-reel__track, .sa-reel__track--home { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 820px) { .sa-reel__track, .sa-reel__track--home { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; } }
@media (max-width: 520px) { .sa-reel__track, .sa-reel__track--home { grid-auto-columns: 86%; } }

/* Подложка меняет размеры плавно — даже редкий пересчёт не бросается в глаза. */
.sa-hero__veil { transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }

/* Витрина направления: три каталога плитками. */
.sa-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 26px; }
.sa-hub__card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .1); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.sa-hub__card:hover { border-color: rgba(255, 40, 40, .55); transform: translateY(-2px); }
.sa-hub__card h3 { margin: 0; font-size: 20px; color: #fff; }
.sa-hub__card p { margin: 0; color: var(--sa-muted); font-size: 14px; }
.sa-hub__go { margin-top: auto; color: var(--sa-ember, #ff7a45); font-size: 14px; font-weight: 600; }
@media (max-width: 820px) { .sa-hub { grid-template-columns: 1fr; } }

/* Характеристики комплектации: группы-аккордеоны. */
.sa-spec { display: grid; gap: 8px; }
.sa-spec__g { border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.sa-spec__g > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 600; color: #fff; }
.sa-spec__g > summary::-webkit-details-marker { display: none; }
.sa-spec__g > summary span { color: var(--sa-muted); font-weight: 400; font-size: 13px; }
.sa-spec__g > summary::after { content: "⌄"; margin-left: auto; color: var(--sa-muted); transition: transform .2s; }
.sa-spec__g[open] > summary::after { transform: rotate(180deg); }
.sa-spec__g[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sa-spec__g .sa-car__facts { padding: 6px 16px 14px; }
.sa-spec__h { margin: 16px 0 6px; font-size: 15px; color: #fff; }

/* Команда: фильтр по отделам и сетка карточек. */
.sa-team { margin-top: 18px; }
.sa-team__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sa-team__chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 11px;
	border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--sa-muted);
	font: inherit; font-size: 14px; cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.sa-team__chip span { font-size: 12px; opacity: .75; }
.sa-team__chip:hover { color: #fff; border-color: rgba(255, 255, 255, .28); }
.sa-team__chip.is-on { background: linear-gradient(180deg, var(--sa-red, #d81e1e), var(--sa-red-deep, #8f0f0f)); color: #fff; border-color: transparent; }
.sa-team__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sa-team__card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
	animation: sa-team-in .32s ease-out both; animation-delay: var(--d, 0ms); }
.sa-team__card.is-off { display: none; }
.sa-team__photo { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 8px; background: rgba(255, 255, 255, .05); }
.sa-team__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sa-team__card:hover .sa-team__photo img { transform: scale(1.05); }
.sa-team__card b { font-size: 15.5px; color: #fff; }
.sa-team__card span { font-size: 13.5px; color: var(--sa-muted); }
.sa-team__card i { margin-top: 6px; align-self: flex-start; padding: 3px 9px; border-radius: 8px; font-style: normal;
	font-size: 11.5px; color: #fff; background: rgba(255, 40, 40, .2); }
@keyframes sa-team-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (max-width: 1180px) { .sa-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .sa-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sa-team__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sa-team__card { animation: none; } }

/* Опция, которой в этой версии нет — приглушённой строкой. */
.sa-car__facts .is-no dt, .sa-car__facts .is-no dd { opacity: .45; }

/* Полоса лоадера догоняет цель плавно — рывков между вехами не видно. */
.sa-pageload__fill { transition: width .45s cubic-bezier(.25, .8, .35, 1); }

/* Вид списком — структура как в каталоге коллег: фото · название с пробегом и датой
   · две колонки характеристик · цена. Прожектор и подъём карточки в списке выключены. */
.sa-card__extra { display: none; }
.sa-grid--list .sa-card { transform: none !important; }
.sa-grid--list .sa-card:hover { transform: none !important; box-shadow: none; border-color: rgba(255, 255, 255, .16); }
.sa-grid--list .sa-card.is-glow .sa-card__body { background-image: none !important; }
.sa-grid--list .sa-card.is-glow .sa-card__photo::after { display: none !important; }
.sa-grid--list .sa-card__body { grid-template-columns: minmax(200px, 1fr) minmax(150px, .8fr) minmax(170px, .9fr) minmax(190px, 240px);
	grid-template-rows: auto auto auto; align-items: start; column-gap: 24px; row-gap: 4px; padding: 20px 22px; }
.sa-grid--list .sa-card__title { grid-column: 1; grid-row: 1; font-size: 18px; }
.sa-grid--list .sa-card__badge { grid-column: 1; grid-row: 2; }
.sa-grid--list .sa-card__row { grid-column: 1; grid-row: 3; margin-top: 6px; }
.sa-grid--list .sa-card__engine { grid-column: 2; grid-row: 1 / span 3; align-self: center; flex-direction: column; align-items: flex-start; gap: 4px;
	padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .08); }
.sa-grid--list .sa-card__extra { display: grid; grid-column: 3; grid-row: 1 / span 3; align-self: center; grid-template-columns: 1fr 1fr;
	gap: 5px 14px; margin: 0; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; }
.sa-grid--list .sa-card__extra div { display: flex; flex-direction: column; min-width: 0; }
.sa-grid--list .sa-card__extra dt { color: var(--sa-muted); font-size: 11.5px; }
.sa-grid--list .sa-card__extra dd { margin: 0; color: var(--sa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-grid--list .sa-card__price { grid-column: 4; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px;
	border-left: 1px solid rgba(255, 255, 255, .08); padding-left: 20px; }
@media (max-width: 1100px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr) minmax(170px, 210px); }
	.sa-grid--list .sa-card__engine { grid-column: 1; grid-row: 4; flex-direction: row; gap: 18px; padding-left: 0; border-left: 0; }
	.sa-grid--list .sa-card__extra { grid-column: 1; grid-row: 5; grid-template-columns: repeat(3, 1fr); padding-left: 0; border-left: 0; }
	.sa-grid--list .sa-card__price { grid-column: 2; grid-row: 1 / span 5; }
}
@media (max-width: 860px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr); }
	.sa-grid--list .sa-card__price { grid-column: 1; grid-row: auto; border-left: 0; padding-left: 0; align-items: flex-start; }
	.sa-grid--list .sa-card__extra { grid-row: auto; }
}

/* Список: год · пробег · топливо одной строкой, двигатель одной строкой, характеристикам больше места. */
.sa-grid--list .sa-card__body { grid-template-columns: minmax(230px, 1fr) minmax(150px, .7fr) minmax(230px, 1.1fr) minmax(180px, 220px); column-gap: 18px; }
.sa-grid--list .sa-card__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.sa-grid--list .sa-card__engine { flex-direction: row; align-items: center; gap: 8px; padding-left: 18px; white-space: nowrap; }
.sa-grid--list .sa-card__extra { padding-left: 18px; gap: 6px 16px; }
.sa-grid--list .sa-card__extra dd { white-space: normal; }
.sa-grid--list .sa-card__price { padding-left: 16px; }

/* Список: у фото жёсткая высота — иначе WebKit зацикливает «фото 100% от карточки,
   карточка от фото» и раздувает строку вдвое. */
.sa-grid--list .sa-card__photo { height: 225px; min-height: 0; max-height: 225px; aspect-ratio: auto; }
.sa-grid--list .sa-card__strip, .sa-grid--list .sa-card__zones { height: 225px; }
.sa-grid--list .sa-card__strip img { height: 225px; object-fit: cover; }
.sa-grid--list .sa-card { align-items: stretch; }
.sa-grid--list .sa-card__body { align-self: stretch; align-content: center; }
@media (max-width: 860px) {
	.sa-grid--list .sa-card__photo, .sa-grid--list .sa-card__strip, .sa-grid--list .sa-card__zones, .sa-grid--list .sa-card__strip img { height: 105px; max-height: 105px; }
}

/* Список: ряд карточки ровно 225 px в любом движке — WebKit иначе трактует
   базовое height: 100% у карточки и раздувал строку вдвое. */
.sa-grid--list .sa-card { height: auto; min-height: 0; grid-template-rows: 225px; }
.sa-grid--list .sa-card__body { height: 225px; min-height: 0; box-sizing: border-box; overflow: hidden; }
@media (max-width: 860px) {
	.sa-grid--list .sa-card { grid-template-rows: auto auto; }
	.sa-grid--list .sa-card__body { height: auto; overflow: visible; }
}

/* В списке карточка целиком на экране и своей высоты не знает заранее: content-visibility
   в WebKit подставлял запомненный размер плитки (330–427 px) вместо реального.
   Для плиток оптимизация остаётся — там размер одинаковый. */
.sa-grid--list .sa-card { content-visibility: visible; contain-intrinsic-size: auto; }

/* Ожидание конфигуратора на китайском лоте: страница отдаётся сразу, блок догружается */
.sa-wait { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; color: var(--sa-muted, #8a8f98); font-size: 15px; }
.sa-wait span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: saWaitSpin .8s linear infinite; flex: none; }
@keyframes saWaitSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-wait span { animation: none; } }

/* Плашки над фото лота: все / кузов / салон / прочее */
.sa-car__cats { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sa-car__cats::-webkit-scrollbar { display: none; }
.sa-car__cats button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; }
.sa-car__cats button b { font-weight: 600; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.sa-car__cats button:hover { background: rgba(255, 255, 255, .11); color: #fff; transform: translateY(-1px); }
.sa-car__cats button.on { background: var(--sa-red-hot); border-color: var(--sa-red-hot); color: #fff; }
.sa-car__cats button.on b { background: rgba(0, 0, 0, .22); color: #fff; }
.sa-car__cats button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sa-car__thumbs img[hidden], .sa-car__allgrid img[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sa-car__cats button { transition: none; } }

/* Шапка карточки: марка с моделью, под ней комплектация, под ней — флаг и «Авто из …». */
.sa-card__from { display: flex; align-items: center; gap: 7px; color: var(--sa-muted); font-size: 13px; line-height: 1.2; }
.sa-card__from .sa-card__flag { position: static; top: auto; left: auto; font-size: 1.05em; line-height: 1; filter: none; flex: none; }
.sa-card__from .sa-card__flag .sa-flag { width: 1.35em; height: .95em; display: inline-block; vertical-align: -.12em; border-radius: 2px; }
.sa-card__badge { display: block; color: var(--sa-ink); opacity: .92; line-height: 1.2; }

/* Вид списком: текст тянется за шириной самой карточки (контейнерные запросы), пустых
   полей по краям больше нет — строка заполнена от фото до цены. */
.sa-grid--list .sa-card { grid-template-columns: minmax(180px, 290px) minmax(0, 1fr); container-type: inline-size; }
.sa-grid--list .sa-card__body {
	grid-template-columns: minmax(170px, .82fr) minmax(150px, .95fr) minmax(190px, 1.1fr) minmax(150px, .9fr);
	grid-template-rows: auto auto auto;
	column-gap: clamp(12px, 1.5cqw, 28px); row-gap: 3px;
	padding: clamp(14px, 1.5cqw, 26px) clamp(14px, 1.7cqw, 30px);
	align-items: start; align-content: center;
}
.sa-grid--list .sa-card__title { grid-column: 1; grid-row: 1; font-size: clamp(16px, 1.5cqw, 27px); font-weight: 700; margin-bottom: 2px; }
.sa-grid--list .sa-card__badge { grid-column: 1; grid-row: 2; font-size: clamp(13px, 1.12cqw, 20px); }
.sa-grid--list .sa-card__from { grid-column: 1; grid-row: 3; font-size: clamp(12px, 1cqw, 17px); }
.sa-grid--list .sa-card__row { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; font-size: clamp(12.5px, 1.05cqw, 18px); }
.sa-grid--list .sa-card__ym { font-size: clamp(12px, 1cqw, 17px); padding: .28em .6em; }
.sa-grid--list .sa-card__engine { grid-column: 2; grid-row: 3; align-self: start; margin-top: clamp(6px, .6cqw, 12px); font-size: clamp(12.5px, 1.05cqw, 18px); }
.sa-grid--list .sa-card__extra { grid-column: 3; grid-row: 1 / span 3; font-size: clamp(12.5px, 1.05cqw, 18px); gap: clamp(4px, .5cqw, 10px) clamp(10px, 1.1cqw, 22px); }
.sa-grid--list .sa-card__extra dt { font-size: clamp(11px, .85cqw, 15px); }
.sa-grid--list .sa-card__price { grid-column: 4; grid-row: 1 / span 3; align-items: center; justify-content: center;
	text-align: center; padding: 0 clamp(8px, 1cqw, 20px); font-size: clamp(19px, 1.85cqw, 36px); }
.sa-grid--list .sa-card__ask { font-size: clamp(13px, 1.05cqw, 18px); }
@media (max-width: 1100px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr) minmax(160px, 34%); }
	.sa-grid--list .sa-card__row { grid-column: 1; grid-row: 4; align-self: start; }
	.sa-grid--list .sa-card__engine { grid-column: 1; grid-row: 5; margin-top: 0; }
	.sa-grid--list .sa-card__extra { grid-column: 1; grid-row: 6; }
	.sa-grid--list .sa-card__price { grid-column: 2; grid-row: 1 / span 6; }
}
@media (max-width: 860px) {
	.sa-grid--list .sa-card__body { grid-template-columns: minmax(0, 1fr); }
	.sa-grid--list .sa-card__price { grid-column: 1; grid-row: auto; align-items: flex-start; text-align: left; padding: 0; }
	.sa-grid--list .sa-card__engine, .sa-grid--list .sa-card__extra { grid-row: auto; }
}

/* Попап опций: на широком экране раскладываем в несколько колонок, чтобы не тянуть
   список на три экрана вниз; сверху — поиск по названию. */
.sa-pop--opts { width: min(1240px, calc(100% - 32px)); }
.sa-pop--opts .sa-car__facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); margin-bottom: 14px; }
.sa-pop--opts .sa-spec__h { margin: 16px 0 8px; }
.sa-pop--opts .sa-opts__g:first-child .sa-spec__h { margin-top: 4px; }
.sa-pop__filter { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 15px; }
.sa-pop__filter::placeholder { color: var(--sa-muted); }
.sa-pop__filter:focus { outline: none; border-color: var(--sa-red-hot); background: rgba(255, 255, 255, .07); }
.sa-pop__empty { color: var(--sa-muted); text-align: center; padding: 22px 0; margin: 0; }
.sa-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 7px; font-size: 13px; font-weight: 700; cursor: help; }
.sa-opt--yes { color: #8ff0a4; background: rgba(60, 200, 110, .16); border: 1px solid rgba(60, 200, 110, .3); }
.sa-opt--extra { color: #ffd479; background: rgba(255, 190, 60, .14); border: 1px solid rgba(255, 190, 60, .28); }
.sa-opt--no { color: var(--sa-muted); background: transparent; border: 1px solid transparent; }

/* Отзывы на странице лота: три карточки с высшей оценкой и переход к полному списку. */
.sa-revmini h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.sa-revmini__rate { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 500; color: var(--sa-muted); }
.sa-revmini__rate b { color: #fff; font-size: 17px; }
.sa-revmini__rate .sa-stars { color: #f5b301; letter-spacing: 1px; }
.sa-revmini__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px;
	list-style: none; margin: 0; padding: 0; }
.sa-revmini__list .sa-review { break-inside: avoid; margin: 0; }
.sa-revmini__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Комплектация под заголовком лота — отдельной строкой, как в карточках каталога. */
.sa-car__trimline { margin: 4px 0 0; color: var(--sa-ink); font-size: clamp(15px, 1.15vw, 19px); font-weight: 600; }
.sa-car__trimline + .sa-car__sub { margin-top: 4px; }
/* Флаг в строке «Авто из …» — в одну строку с текстом: сам по себе он блочный. */
.sa-car__sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sa-car__sub .sa-flag { flex: none; }

/* Наш знак на самой галерее: он привязан к окну просмотра, а не к файлу фотографии,
   поэтому виден всегда и остаётся чётким при любом масштабе. */
/* Счётчик кадров уступает место знаку — уходит в левый нижний угол. */
.sa-car__main .sa-car__count { right: 12px; left: auto; }
.sa-viewer .sa-car__count { right: auto; left: 26px; }
.sa-car__gallery { container-type: inline-size; }
.sa-car__brand { position: absolute; inset: 12px 12px auto auto; display: inline-flex; z-index: 6; pointer-events: none;
	padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .34);
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.sa-car__brand img { display: block; width: clamp(88px, 13cqw, 150px); height: auto; }
/* В полноэкранном просмотре знак рисуем фоном: лишний узел ломал раскладку окна. */
.sa-viewer:not([hidden])::after { content: ""; position: fixed; right: 26px; bottom: 22px; z-index: 5; pointer-events: none;
	width: clamp(120px, 11vw, 220px); aspect-ratio: 495 / 120; padding: 8px 14px; box-sizing: content-box;
	background: rgba(0, 0, 0, .34) url("/images/brand/logo.webp") center / calc(100% - 28px) auto no-repeat;
	border-radius: 12px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
@media (max-width: 720px) { .sa-car__brand { inset: 8px 8px auto auto; padding: 4px 8px; } .sa-car__brand img { width: 88px; } }

/* Команда: переключатели отделов сверху, карточки крупные — четыре в ряд на широком экране.
   Старое правило делало из .sa-team сетку, и переключатели с карточками вставали в две колонки. */
.sa-team { display: block; }
.sa-team__chips { justify-content: flex-start; margin-bottom: 20px; }
/* Старое правило .sa-team > div делало из этих блоков флекс-полоски с рамкой — гасим его. */
.sa-team > div { display: block; padding: 0; background: none; border: 0; }
/* Команда: три карточки в ряд на широком экране, дальше два и один (просьба владельца 18.09).
   Ширину не ограничиваем — ряд совпадает с тремя карточками руководителей над ним. */
.sa-team > .sa-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.sa-team > .sa-team__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-team__card { padding: 0 0 16px; border-radius: 18px; overflow: hidden; gap: 2px; }
.sa-team__photo { aspect-ratio: 1 / 1; border-radius: 0; margin: 0 0 12px; }   /* квадратные портреты */
.sa-team__card b { font-size: clamp(15px, 1.15vw, 19px); padding: 0 16px; }
.sa-team__card span { font-size: clamp(13px, .95vw, 15.5px); padding: 0 16px; }
/* Прежняя вёрстка команды делала из этого элемента круглый аватар 40×40 — из-за него
   название отдела обрезалось до пары букв. Сбрасываем размеры и рисуем плашку по тексту. */
.sa-team__card i + i { margin-top: 6px; }   /* два отдела — плашки одна под другой */
.sa-team__card i { display: inline-flex; align-items: center; width: auto; height: auto; min-width: 0; flex: 0 0 auto;
	align-self: flex-start; margin: 10px 16px 0; padding: 4px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 600;
	white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 780px) { .sa-team > .sa-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 470px) { .sa-team > .sa-team__grid { grid-template-columns: minmax(0, 1fr); } }

/* Кнопка заявки в шапке снова живая: мягкая пульсация плюс пробегающий блик. */
/* Пульсирует свечение, а не сама кнопка: двигать кнопку под курсором — значит по ней промахиваться. */
.sa-xbtn--req .sa-xbtn__glow { animation: saReqGlow 3.2s ease-in-out infinite; }
.sa-xbtn--req .sa-xbtn__bg { overflow: hidden; }
.sa-xbtn--req .sa-xbtn__bg::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 55%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg); animation: saShine2 3.4s ease infinite; pointer-events: none; }
@keyframes saReqGlow { 0%, 100% { opacity: .18; } 50% { opacity: .78; } }
/* Общее правило глушит блики в шапке до наведения (лечение фризов Safari). Для кнопки заявки
   делаем исключение: она должна звать к действию сама, без курсора. */
.sa-xbtn--req::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .sa-xbtn--req::after, .sa-xbtn--req .sa-xbtn__glow, .sa-xbtn--req .sa-xbtn__bg::after { animation: none; } }

/* Панель лота встаёт вровень с галереей: плитки идут в три колонки, лишнее — под раскрытием. */
.sa-car__panel .sa-tiles { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.sa-car__tiles-more .sa-tiles { margin-top: 10px; }

/* Заслон от вычитывания: простая проверка перед продолжением. */
.sa-kapcha { padding: 60px 0; }
.sa-kapcha__box { max-width: 520px; margin: 0 auto; padding: 28px; border-radius: 18px; text-align: center; }
.sa-kapcha__box h1 { font-size: clamp(20px, 2.2vw, 28px); margin: 0 0 10px; }
.sa-kapcha__box p { color: var(--sa-muted); margin: 0 0 18px; }
.sa-kapcha__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; }
.sa-kapcha__form label { display: flex; flex-direction: column; gap: 6px; text-align: left; flex: 1 1 220px; }
.sa-kapcha__form input[type="text"] { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: inherit; }
.sa-kapcha__note { font-size: 13px; margin-top: 14px; }
/* Та же проверка внутри заявки. */
.sa-lead__kapcha { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 13.5px; color: var(--sa-muted); }
.sa-lead__kapcha b { color: #fff; }
.sa-lead__kapcha input { padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12); color: #fff; font: inherit; }

/* Каталог японских аукционов: переключатель режима и форма поиска. */
.sa-jp__modes { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.sa-jp__mode { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 11px; text-decoration: none;
	color: var(--sa-ink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; font-weight: 600; }
.sa-jp__mode:hover { color: #fff; border-color: rgba(255, 255, 255, .28); }
.sa-jp__mode.is-on { background: linear-gradient(180deg, var(--sa-red, #d81e1e), var(--sa-red-deep, #8f0f0f)); color: #fff; border-color: transparent; }
.sa-jp__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; align-items: end;
	padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 22px; }
.sa-jp__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sa-jp__f > span { color: var(--sa-muted); font-size: 12.5px; }
.sa-jp__f input, .sa-jp__f select { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); color: #fff; font: inherit; font-size: 14.5px; }
.sa-jp__f input:focus, .sa-jp__f select:focus { outline: none; border-color: var(--sa-red-hot); }
.sa-jp__days { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-jp__days > span { color: var(--sa-muted); font-size: 12.5px; margin-right: 4px; }
.sa-jp__day { position: relative; display: inline-flex; }
.sa-jp__day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sa-jp__day i { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 8px 12px;
	border-radius: 10px; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--sa-ink);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.sa-jp__day input:checked + i { background: var(--sa-red-hot); border-color: var(--sa-red-hot); color: #fff; }
.sa-jp__day input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; }
.sa-jp__btns { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .sa-jp__form { padding: 14px; gap: 10px; } }

/* Аукционная выдача Японии: узкие строки — так торги и смотрят. */
.sa-jt { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; container-type: inline-size; }
.sa-jt__head, .sa-jt__row { display: grid;
	grid-template-columns: var(--sa-jt-cols, minmax(150px, 240px) minmax(64px, 88px) minmax(150px, 1.3fr) minmax(96px, 136px) minmax(96px, 1fr) minmax(74px, 100px) minmax(120px, 150px) minmax(92px, 128px));
	gap: clamp(6px, .8cqw, 16px); align-items: center; }
/* Светлая подложка строк: на глухо-чёрном фоне глаза уставали. Не белая — приподнятый графит,
   текст крупнее и контрастнее, высота строки больше. */
.sa-jt__head { padding: 11px clamp(8px, 1cqw, 16px); color: #cfd0d8; font-size: clamp(12px, .92cqw, 14px);
	line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, .14); position: sticky; top: 0; z-index: 2;
	background: #2b2b34; border-radius: 12px 12px 0 0; }
.sa-jt__head i { font-style: normal; opacity: .75; }
.sa-jt__row { padding: 10px clamp(8px, 1cqw, 16px); border-radius: 12px; text-decoration: none; color: #eceef4;
	background: #23232b; border: 1px solid rgba(255, 255, 255, .09);
	font-size: clamp(13px, 1.02cqw, 16px); transition: background .16s, border-color .16s; }
.sa-jt__row:nth-child(even) { background: #272730; }
.sa-jt__row:hover { background: #30303b; border-color: rgba(255, 255, 255, .26); }
.sa-jt__row b { display: block; color: #fff; font-weight: 700; }
.sa-jt__row i, .sa-jt__row u { display: block; font-style: normal; text-decoration: none; color: #b9bbc6;
	font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-jt__photos { display: flex; gap: 3px; }
.sa-jt__photos img { width: calc((100% - 6px) / 3); max-width: 78px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #17171b; flex: none; }
.sa-jt__lot b { color: #a9abb6; font-weight: 600; font-size: 1em; }
/* Цифра оценки всегда яркая: мигает свечение плашки, а не сам текст. Серый цвет номера лота
   на неё не распространяется (у правила ниже специфичность выше, чем у .sa-jt__lot b). */
.sa-jt__lot .sa-jt__rate, .sa-jt__rate { display: inline-block; margin-top: 3px; padding: 2px 10px; border-radius: 7px; font-size: .95em; font-weight: 800;
	color: #fff; background: rgba(255, 255, 255, .18); text-shadow: 0 1px 1px rgba(0, 0, 0, .45); animation: sa-rate 1.6s ease-in-out infinite; }
.sa-jt__lot .sa-jt__rate--bad { background: #e0242f; --sa-glow: 224, 36, 47; }
.sa-jt__lot .sa-jt__rate--mid { background: #7a7a85; --sa-glow: 170, 170, 180; }
.sa-jt__lot .sa-jt__rate--ok { background: #f2b705; color: #111; text-shadow: none; animation: none; }
.sa-jt__lot .sa-jt__rate--good { background: #22a854; --sa-glow: 34, 168, 84; }
@keyframes sa-rate { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sa-glow, 255, 255, 255), .0); filter: brightness(1); } 50% { box-shadow: 0 0 0 5px rgba(var(--sa-glow, 255, 255, 255), .35); filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .sa-jt__rate { animation: none; } }
.sa-jt__yen .sa-jt__sold { color: #74e694; font-weight: 700; }
.sa-jt__yen u.sa-jt__avg { color: #b9bbc6; font-weight: 500; }

.sa-jt__rub { color: #fff; font-weight: 700; text-align: right; }
.sa-jt__ask { display: inline-flex; align-items: center; gap: 4px; color: #b9bbc6; font-weight: 500; font-size: .9em; cursor: help; }
.sa-jt__ask i { font-style: normal; font-size: .95em; filter: saturate(.85); }
.sa-car__why { display: inline-block; margin-left: 6px; font-size: .62em; vertical-align: middle; cursor: help; }
.sa-jt__sorts { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-jt__sorts a { padding: 6px 12px; border-radius: 9px; font-size: 13px; text-decoration: none; color: var(--sa-ink);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.sa-jt__sorts a.is-on { background: var(--sa-red-hot); border-color: var(--sa-red-hot); color: #fff; }
/* Оценка — короткая плашка, а не полоса во всю колонку: блочный b её растягивал. */
.sa-jt__lot .sa-jt__rate { display: inline-block; width: fit-content; }
@media (max-width: 1000px) {
	.sa-jt__head { display: none; }
	/* На телефоне столбцы не помещаются — раскладываем строку в аккуратную карточку:
	   слева фотографии, справа сверху вниз лот, машина, мотор и цены. */
	.sa-jt__row { grid-template-columns: 138px minmax(0, 1fr); grid-auto-flow: row; row-gap: 5px; column-gap: 10px; padding: 10px; align-items: start; }
	.sa-jt__row > * { grid-column: 2; }
	.sa-jt__row > .sa-jt__photos { grid-column: 1; grid-row: 1 / span 8; align-self: start; }
	.sa-jt__photos { flex-wrap: nowrap; }
	.sa-jt__photos img { max-width: none; width: calc((100% - 6px) / 3); flex: none; }
	.sa-jt__lot { display: flex; align-items: center; gap: 8px; }
	.sa-jt__lot b { font-size: 1.15em; }
	.sa-jt__rate { margin-top: 0; }
	.sa-jt__when b, .sa-jt__when i { display: inline; }
	.sa-jt__when i::before { content: ' '; }
	.sa-jt__when u { display: block; }
	.sa-jt__car b, .sa-jt__car i { display: block; }
	.sa-jt__eng b, .sa-jt__eng i { display: inline; white-space: nowrap; }
	.sa-jt__eng i::before { content: ' · '; }
	.sa-jt__eng { min-width: 0; }
	.sa-jt__km { white-space: nowrap; }
	.sa-jt__yen { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
	.sa-jt__yen b, .sa-jt__yen i, .sa-jt__yen u { display: inline; }
	.sa-jt__rub { text-align: left; font-size: 1.15em; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
}
.sa-jt__rub i { font-style: normal; font-weight: 500; color: var(--sa-muted); font-size: .85em; }

/* Списки с галочками: несколько значений в один фильтр, рядом — сколько лотов. */
.sa-multi { position: relative; }
.sa-multi > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
	padding: 0; color: var(--sa-muted); font-size: 13px; }
.sa-multi > summary::-webkit-details-marker { display: none; }
.sa-multi > summary b { display: flex; align-items: center; justify-content: space-between; gap: 8px;
	min-height: 44px; padding: 0 34px 0 14px; border-radius: 12px; font-weight: 500; font-size: 15px;
	color: var(--sa-ink); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-multi > summary::after { content: ''; position: absolute; right: 14px; bottom: 18px; width: 9px; height: 9px;
	border-right: 2px solid var(--sa-muted); border-bottom: 2px solid var(--sa-muted); transform: rotate(45deg);
	transition: transform .16s; pointer-events: none; }
.sa-multi[open] > summary::after { transform: rotate(-135deg); }
.sa-multi.is-on > summary b { border-color: var(--sa-red-hot); color: #fff; }
.sa-multi__pop { position: absolute; z-index: 95; left: 0; right: 0; top: calc(100% + 6px); padding: 8px;   /* выше полоски про куки, как и свои списки */
	border-radius: 12px; background: #15151a; border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55); min-width: 220px; }
.sa-multi.is-right .sa-multi__pop { left: auto; right: 0; min-width: 240px; }
.sa-multi__find { width: 100%; height: 36px; margin-bottom: 6px; padding: 0 10px; border-radius: 9px;
	color: var(--sa-ink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.sa-multi__list { max-height: 260px; overflow: auto; overscroll-behavior: contain; }
.sa-multi__opt { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px;
	padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--sa-ink); font-size: 14px; }
.sa-multi__opt:hover { background: rgba(255, 255, 255, .07); }
.sa-multi__opt input { width: 16px; height: 16px; accent-color: var(--sa-red-hot); }
.sa-multi__opt i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-multi__opt u { text-decoration: none; color: var(--sa-muted); font-size: 12.5px;
	font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
	.sa-multi__pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; max-height: 60vh; z-index: 95; }
	.sa-multi__list { max-height: 44vh; }
}

/* Ждём, пока источник посчитает редкую выборку. */
.sa-empty--wait { display: flex; align-items: center; gap: 10px; }
.sa-empty--wait::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--sa-red-hot); animation: sa-spin 1s linear infinite; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-empty--wait::before { animation: none; } }

/* Ошибка заявки — строкой в самой форме, а не системным окном. */
.sa-lead__err { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; color: #ffd7d7;
	background: rgba(220, 40, 40, .16); border: 1px solid rgba(220, 40, 40, .4); }

/* Сортировка по шапке таблицы аукционов: щелчок по названию столбца, стрелка у активного. */
.sa-jt__head a.sa-jt__sort { color: #cfd0d8; text-decoration: none; cursor: pointer; }
.sa-jt__head a.sa-jt__sort:hover { color: #fff; }
.sa-jt__head a.sa-jt__sort.is-on { color: #fff; }
.sa-jt__head a.sa-jt__sort b { font-weight: 700; color: var(--sa-red-hot); }
.sa-jt__head a.sa-jt__sort i { display: block; font-style: normal; opacity: .75; }
.sa-jt__head a.sa-jt__sort--sub { display: inline; }
.sa-jt__head a.sa-jt__sort--sub.is-on { color: #fff; }

/* Аукционный лист в строке: пока не подтянулся — тихий прямоугольник, появился — обычная миниатюра. */
.sa-jt__photos .sa-jt__sheet { background: #17171b url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23555' stroke-width='1.5'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M8 8h8M8 12h8M8 16h5'/></svg>") center / 22px no-repeat; object-fit: contain; }
.sa-jt__photos .sa-jt__sheet.is-on { background: #fff; }
.sa-car__sheet img { display: block; max-width: 420px; width: 100%; border-radius: 10px; background: #fff; }
.sa-car__sheetlink { display: block; max-width: 420px; cursor: zoom-in; }
.sa-jt__hcell i { display: block; font-style: normal; opacity: .75; }
.sa-jt__hcell i a.sa-jt__sort { display: inline; }

/* Кнопка аукционного листа: размером с миниатюру, лупа на бумаге; после просмотра — сам лист. */
.sa-jt__photos .sa-jt__sheetbtn { display: flex; align-items: center; justify-content: center; width: calc((100% - 6px) / 3); max-width: 78px; aspect-ratio: 4 / 3; flex: none;
	border-radius: 6px; background: #1d1d22 center / cover no-repeat; color: #fff; cursor: pointer; user-select: none; line-height: 1;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
.sa-jt__photos .sa-jt__sheetbtn i, .sa-jt__photos .sa-jt__sheetbtn u { font-style: normal; text-decoration: none; position: absolute; }
.sa-jt__photos .sa-jt__sheetbtn i { font-size: 26px; left: 50%; top: 50%; transform: translate(-58%, -54%); }
.sa-jt__photos .sa-jt__sheetbtn u { font-size: 17px; right: 8%; bottom: 8%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.sa-jt__photos .sa-jt__sheetbtn.is-on i, .sa-jt__photos .sa-jt__sheetbtn.is-on u { display: none; }
.sa-jt__photos .sa-jt__sheetbtn:hover { box-shadow: inset 0 0 0 2px var(--sa-red-hot); }
.sa-jt__photos .sa-jt__sheetbtn:focus-visible { outline: 2px solid var(--sa-red-hot); outline-offset: 2px; }
.sa-jt__photos .sa-jt__sheetbtn::after { content: attr(title); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
	padding: 4px 8px; border-radius: 6px; white-space: nowrap; font-size: 12px; color: #fff; background: #15151a; border: 1px solid rgba(255,255,255,.16);
	opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.sa-jt__photos .sa-jt__sheetbtn:hover::after { opacity: 1; }
.sa-jt__photos .sa-jt__sheetbtn.is-on { background-color: #fff; }
@media (max-width: 1000px) { .sa-jt__photos .sa-jt__sheetbtn { max-width: none; width: calc((100% - 6px) / 3); aspect-ratio: 4 / 3; } }

/* Попап с листом */
.sa-sheetpop { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; }
.sa-sheetpop::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.sa-sheetpop__box { background: #15151a; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; max-height: 94vh; }
.sa-sheetpop__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; }
.sa-sheetpop__head > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* заголовок тянется, крестик всегда у правого края */
/* Пока показана миниатюра, справа сверху крутится тот же лоадер, что на фото лота, с подсказкой. */
.sa-sheetpop__load { display: inline-flex; align-items: center; gap: 8px; color: var(--sa-muted); font-size: 12.5px; cursor: help; flex: none; }
.sa-sheetpop__load[hidden] { display: none; }
.sa-sheetpop__load i { font-style: normal; }
.sa-sheetpop__load .sa-loader { position: relative; inset: auto; width: 30px; height: 30px; background: none; backdrop-filter: none; display: block; flex: none; }
.sa-sheetpop__load .sa-loader__snurra, .sa-sheetpop__load .sa-loader__skugga { width: 30px; height: 30px; }
/* В 30 px «желейный» фильтр большого лоадера размывает кольцо в пятно — тут он без фильтра и без тени. */
.sa-sheetpop__load .sa-loader__snurra { filter: none; position: relative; z-index: 1; }
.sa-sheetpop__load .sa-loader__halvan, .sa-sheetpop__load .sa-loader__strecken { stroke: url(#sa-gradient3); stroke-width: 26; }
.sa-sheetpop__load .sa-loader__skugga { display: none; }
.sa-sheetpop__close { flex: none; margin-left: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.sa-sheetpop__body { overflow: auto; background: #fff; min-height: 200px; display: grid; place-items: start center; }
.sa-sheetpop__body img { display: block; max-width: 100%; height: auto; }
.sa-sheetpop__wait { margin: 60px 20px; color: #444; }

/* Планшет: строка ещё складывается в карточку, но места больше — плитки крупнее. */
@media (min-width: 700px) and (max-width: 1000px) {
	.sa-jt__row { grid-template-columns: 210px minmax(0, 1fr) minmax(0, auto); }
}
@media (max-width: 420px) {
	.sa-jt__row { grid-template-columns: 118px minmax(0, 1fr) minmax(0, auto); column-gap: 8px; padding: 8px; }
}
.sa-jt__name { font-style: normal; color: #fff; font-weight: 700; }
.sa-jt__car b { white-space: normal; }

/* Страница входа на стенд: только логотип и форма, ничего лишнего до входа. */
.sa-page--gate { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.sa-page--gate .sa-gate__logo { height: 54px; width: auto; margin: 0 auto 22px; display: block; }
.sa-page--gate h1 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 18px; }
.sa-page--gate form { text-align: left; }
.sa-page--gate input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; color: var(--sa-ink);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); font: inherit; }
.sa-page--gate .sa-lead__err { margin-bottom: 4px; }

/* Марка и модель — первой строкой белым, год плашкой, кузов и комплектация серым. */
.sa-jt__car .sa-jt__name { display: block; color: #fff; font-weight: 700; white-space: normal; }
.sa-jt__car i { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sa-jt__car i > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sa-jt__year { font-style: normal; color: #fff; background: rgba(255, 255, 255, .12); padding: 0 6px; border-radius: 5px; font-weight: 600; flex: none; }

/* Значок аукционного листа на кнопке — документ с лупой. */
.sa-jt__photos .sa-jt__sheetbtn { background-image: url('/images/ui/sheet-icon.svg'); background-size: 62% auto; background-position: center; background-repeat: no-repeat; }
.sa-jt__photos .sa-jt__sheetbtn.is-on { background-size: cover; }
.sa-jt__photos .sa-jt__sheetbtn i, .sa-jt__photos .sa-jt__sheetbtn u { display: none; }

/* Шестерёнка и попап столбцов */
.sa-jt__gear { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font-size: 20px; cursor: pointer; }
.sa-jt__gear:hover { border-color: var(--sa-red-hot); }
.sa-cols { border: 0; padding: 0; margin: auto; background: transparent; }
.sa-cols::backdrop { background: rgba(0, 0, 0, .6); }
.sa-cols__box { width: min(92vw, 420px); background: #15151a; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 14px 16px 16px; color: var(--sa-ink); }
.sa-cols__head { display: flex; align-items: center; justify-content: space-between; color: #fff; margin-bottom: 6px; }
.sa-cols__hint { color: var(--sa-muted); font-size: 13px; margin: 0 0 10px; }
.sa-cols__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sa-cols__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, .05); }
.sa-cols__list label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sa-cols__list input { width: 17px; height: 17px; accent-color: var(--sa-red-hot); }
.sa-cols__mv button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
.sa-cols__btns { display: flex; gap: 8px; margin-top: 12px; }
.sa-cols__btns .sa-btn { flex: 1; }

/* Страница входа и заслон: поле и кнопка одной ширины и высоты. */
.sa-gate__form { display: grid; gap: 12px; }
.sa-gate__form input, .sa-kapcha__form input[type="text"] { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; color: var(--sa-ink);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); font: inherit; box-sizing: border-box; }
.sa-gate__form .sa-btn, .sa-kapcha__form .sa-btn { width: 100%; height: 48px; box-sizing: border-box; }
.sa-kapcha__form { display: grid; gap: 12px; }
.sa-kapcha__form label { display: grid; gap: 6px; text-align: left; }
.sa-cap { display: flex; justify-content: center; min-height: 100px; }
.sa-cap .smart-captcha { width: 100%; max-width: 100%; }
.sa-lead .sa-cap { margin: 4px 0; }

/* Фото в строке увеличиваются щелчком; счётчик кадров в просмотрщике. */
.sa-jt__photos img { cursor: zoom-in; }
.sa-lightbox[data-n]::after { content: attr(data-n); position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); color: #fff; font-size: 14px; background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 8px; pointer-events: none; }

/* Диапазон «от — до» с двойным бегунком: общий для всех каталогов. */
.sa-range { display: grid; gap: 4px; }
.sa-range__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa-range__side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sa-range__side > span { color: var(--sa-muted); font-size: 12px; flex: none; }
.sa-range__side input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--sa-ink);
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); font: inherit; box-sizing: border-box; }
.sa-range__slider { position: relative; height: 22px; margin: 16px 8px 0; }
/* Дорожка от центра левого ползунка до центра правого: ход ползунка в обоих движках — 4 px от краёв,
   так что концы полосы совпадают с точками бегунков. */
.sa-range__track { position: absolute; left: 4px; right: 4px; top: 9px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.sa-range__fill { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--sa-red-hot); }
.sa-range__slider input[type="range"] { position: absolute; left: -8px; right: -8px; width: calc(100% + 16px); top: 0; height: 22px; margin: 0;
	background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.sa-range__slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 2px solid var(--sa-red-hot); pointer-events: auto; cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.sa-range__slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--sa-red-hot); pointer-events: auto; cursor: grab; }
.sa-range__slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
/* Общие правила полей (.sa-filter--v2 input, .sa-jp__f input) давали бегунку внутренние отступы и рамку:
   ход ползунка сужался на 54 px, и концы красной полосы не совпадали с точками бегунка. */
.sa-range__slider input[type="range"], .sa-filter input.sa-range__in, .sa-filter--v2 .sa-range__slider input[type="range"], .sa-jp__f .sa-range__slider input[type="range"], .sa-jp__fitem .sa-range__slider input[type="range"] {
	padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; height: 22px !important; min-height: 0 !important; box-shadow: none !important; }
.sa-range__slider input[type="range"]::-moz-range-track { background: transparent; }
.sa-jp__f--wide { grid-column: span 2; }
.sa-jp__f input[type="datetime-local"] { height: 40px; padding: 0 10px; border-radius: 10px; color: var(--sa-ink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); font: inherit; width: 100%; box-sizing: border-box; color-scheme: dark; }
@media (max-width: 700px) { .sa-jp__f--wide { grid-column: span 2; } }

/* Шестерёнка сидит в шапке таблицы у правого края и не занимает колонку. */
.sa-jt__head { padding-right: 52px; }
/* Шестерёнка стоит первой в шапке слева, а не у правого края: так её находят сразу. */
.sa-jt__head .sa-jt__hd:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Вход менеджера: неприметная строка в подвале и модальное окно. */
.sa-foot__mgr { margin: 6px 0 0; font-size: 12px; color: rgba(255, 255, 255, .38); }
.sa-foot__mgr button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .18); text-underline-offset: 3px; }
.sa-foot__mgr button:hover, .sa-foot__mgr button:focus-visible { color: rgba(255, 255, 255, .7); }
.sa-mgr { border: 0; padding: 0; background: transparent; color: var(--sa-ink, #eceef4); max-width: calc(100vw - 24px); }
.sa-mgr::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.sa-mgr__box { box-sizing: border-box; width: min(92vw, 400px); background: #15151a; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; padding: 18px 18px 20px; display: grid; gap: 12px; }
.sa-mgr__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sa-mgr__head h3 { margin: 0; font-size: 18px; color: #fff; }
.sa-mgr__lead { margin: 0; font-size: 13px; color: var(--sa-muted, #9a9aa6); }
.sa-mgr__f { display: grid; gap: 6px; font-size: 13px; color: var(--sa-muted, #9a9aa6); }
.sa-mgr__f input { height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; padding: 0 12px; font: inherit; font-size: 15px; }
.sa-mgr__f input:focus { outline: none; border-color: var(--sa-red-hot, #ff2d2d); }
.sa-mgr__err { margin: 0; color: #ff8a8a; font-size: 13px; }
.sa-mgr .sa-cap { min-height: 100px; }
.sa-jt__head .sa-jt__gear { flex: none; width: 30px; height: 30px; font-size: 16px; line-height: 1; padding: 0; }
[data-jt-area].is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* Диапазоны в фильтрах Кореи и Китая — в той же рамке, что и остальные поля формы. */
.sa-filter--v2 .sa-range__fields { gap: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; }
.sa-filter--v2 .sa-range__side { display: flex; align-items: center; height: 48px; min-width: 0; color: var(--sa-muted); font-size: 13px; }
.sa-filter--v2 .sa-range__side + .sa-range__side { border-left: 1px solid rgba(255, 255, 255, .12); }
.sa-filter--v2 .sa-range__side > span { padding-left: 12px; flex: none; }
.sa-filter--v2 .sa-range__side input { border: 0; border-radius: 0; background: transparent; height: 46px; padding: 0 8px; width: 100%; min-width: 0; }
.sa-filter--v2 .sa-range__side input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .45); }
.sa-filter--v2 .sa-range__slider { margin: 16px 10px 0; }
.sa-filter--v2 label.sa-range__side, .sa-filter label.sa-range__side { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 0; margin: 0; }
.sa-filter--v2 .sa-range__side > span { font-size: 13px; }

/* ──────────────────────────────────────────────────────────────────────────
   Фильтры плашками: каждый фильтр в своей рамке, подпись сверху, поля ввода
   на одной линии во всём ряду, а под ними всегда одна и та же полоса —
   с бегунком или пустая. Тогда ряды не разъезжаются по высоте.
   ────────────────────────────────────────────────────────────────────────── */
.sa-jp__form { align-items: stretch; }
.sa-jp__f, .sa-filter--v2 .sa-filter__field {
	display: grid; grid-template-rows: auto auto 26px; gap: 8px; align-content: start;
	padding: 12px 14px 10px; border-radius: 14px; min-width: 0;
	background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.sa-jp__f > span, .sa-filter--v2 .sa-filter__label {
	color: var(--sa-muted); font-size: 12.5px; line-height: 1.2; min-height: 15px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-jp__f--pair > span, .sa-filter--v2 .sa-filter__field--wide .sa-filter__label {
	white-space: normal; }
/* Поле ввода, список и пара «от — до» стоят во второй строке — на одном уровне во всём ряду. */
.sa-jp__f > input, .sa-jp__f > select, .sa-jp__f > .sa-sel, .sa-jp__f > .sa-range,
.sa-filter--v2 .sa-filter__field > input, .sa-filter--v2 .sa-filter__field > select,
.sa-filter--v2 .sa-filter__field > .sa-sel, .sa-filter--v2 .sa-filter__field > .sa-range { grid-row: 2; align-self: start; }
/* Диапазон занимает вторую и третью строки: поля сверху, бегунок в отведённой полосе. */
.sa-jp__f > .sa-range, .sa-filter--v2 .sa-filter__field > .sa-range { grid-row: 2 / span 2; display: grid; grid-template-rows: auto 34px; gap: 0; }
.sa-range__slider { align-self: center; margin-top: 12px; }
/* Дата и время торгов — такая же пара полей во второй строке. */
.sa-jp__f > .sa-range__fields { grid-row: 2; }
/* Дни торгов и кнопки плашками не оформляем. */
.sa-jp__days, .sa-jp__btns { background: none; border: 0; padding: 0; }
.sa-filter--v2 .sa-filter__field { gap: 10px; }
@media (max-width: 720px) {
	.sa-jp__f, .sa-filter--v2 .sa-filter__field { padding: 10px 12px 8px; grid-template-rows: auto auto 24px; }
	.sa-jp__f > .sa-range, .sa-filter--v2 .sa-filter__field > .sa-range { grid-template-rows: auto 32px; }
}

/* Списки с галочками — такая же плашка, как у обычных полей: подпись сверху, кнопка во второй
   строке, под ней та же пустая полоса. Иначе они выпадали из ряда и стрелка уезжала вниз. */
.sa-jp__form > .sa-multi {
	display: grid; grid-template-rows: auto auto 26px; gap: 8px; align-content: start;
	padding: 12px 14px 10px; border-radius: 14px; min-width: 0;
	background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.sa-jp__form > .sa-multi > summary { display: contents; }
.sa-jp__form > .sa-multi > summary > span { grid-row: 1; color: var(--sa-muted); font-size: 12.5px; line-height: 1.2;
	min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-jp__form > .sa-multi > summary > b { grid-row: 2; align-self: start; min-height: 44px; }
.sa-jp__form > .sa-multi > summary::after { top: auto; bottom: auto; right: 26px;
	margin-top: 40px; }
.sa-jp__form > .sa-multi .sa-multi__pop { top: auto; }
@media (max-width: 720px) {
	.sa-jp__form > .sa-multi { padding: 10px 12px 8px; grid-template-rows: auto auto 24px; }
}

/* Связанные поля в одной плашке: марка над моделью, дата «от» над «до». */
.sa-jp__f--pair { grid-template-rows: auto auto auto 8px; grid-column: span 2; }   /* марка с моделью и даты — вдвое шире, чтобы название марки не резалось */
/* Все поля формы Японии одной высоты и с одной стрелкой: свой список (марка, модель, итог торгов) —
   такая же кнопка 40px с той же стрелкой фоном, что у select и списков с галочками. */
.sa-jp__form .sa-sel__btn { height: 40px; padding: 0 34px 0 12px; border-radius: 10px; font-size: 14px;
	background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9c9cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; }
.sa-jp__form .sa-sel__btn::after { content: none; }
.sa-jp__form .sa-sel.is-open .sa-sel__btn { border-color: var(--sa-red-hot); }
.sa-jp__f--pair > select, .sa-jp__f--pair > input, .sa-jp__f--pair > .sa-sel, .sa-jp__f--pair > .sa-jp__side { grid-row: auto; align-self: start; }
.sa-jp__side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sa-jp__side > i { font-style: normal; color: var(--sa-muted); font-size: 12px; width: 16px; flex: none; }
.sa-jp__side input { width: 100%; min-width: 0; }
.sa-jp__f > span em { font-style: normal; display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 10px; cursor: help; vertical-align: middle; }

/* Порядок столбцов перетаскиванием */
.sa-cols__list li { cursor: grab; user-select: none; }
.sa-cols__list li.is-drag { opacity: .5; }
.sa-cols__grip { color: var(--sa-muted); font-size: 18px; letter-spacing: 1px; }
.sa-jt__hp { font-style: normal; color: #b9bbc6; font-weight: 500; font-size: .88em; }

/* ──────────────────────────────────────────────────────────────────────────
   Стопка из двух коротких полей в одной плашке: список/кузов/цвет и т. п.
   не тянутся на всю высоту соседних диапазонов с бегунком, а делят одну
   плашку пополам — так меньше пустого места и короче форма в целом.
   ────────────────────────────────────────────────────────────────────────── */
.sa-jp__stack {
	display: grid; grid-template-rows: 1fr 1fr; gap: 0; min-width: 0;
	padding: 0; border-radius: 14px;   /* без overflow: hidden — иначе он режет выпадающие списки */
	background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.sa-jp__stack > * { padding: 10px 14px; min-width: 0; }
.sa-jp__stack > *:first-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sa-jp__fitem { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.sa-jp__fitem > span { color: var(--sa-muted); font-size: 12.5px; line-height: 1.2; }
.sa-jp__fitem input, .sa-jp__fitem select { width: 100%; box-sizing: border-box; padding: 9px 34px 9px 12px; border-radius: 10px;
	background-color: rgba(255, 255, 255, .06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9c9cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; appearance: none; -webkit-appearance: none;
	border: 1px solid rgba(255, 255, 255, .13); color: #fff; font: inherit; font-size: 14px; height: 40px; }
.sa-jp__fitem input:focus, .sa-jp__fitem select:focus { outline: none; border-color: var(--sa-red-hot); }
/* Список с галочками внутри стопки: без своей плашки и рамки — только подпись сверху и значение. */
.sa-jp__stack > .sa-multi { padding: 10px 14px; position: relative; }
.sa-jp__stack > .sa-multi > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column;
	gap: 6px; justify-content: center; height: 100%; }
.sa-jp__stack > .sa-multi > summary::-webkit-details-marker { display: none; }
.sa-jp__stack > .sa-multi > summary > span { color: var(--sa-muted); font-size: 12.5px; line-height: 1.2; }
.sa-jp__stack > .sa-multi > summary > b { display: block; box-sizing: border-box; width: 100%; height: 40px; min-height: 40px; line-height: 38px;
	padding: 0 34px 0 12px; border-radius: 10px; font-weight: 500; font-size: 14px; color: #fff;
	background-color: rgba(255, 255, 255, .06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9c9cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; border: 1px solid rgba(255, 255, 255, .13);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Стрелка нарисована фоном кнопки (как у select рядом) — псевдоэлемент базового правила тут не нужен. */
.sa-jp__stack > .sa-multi > summary::after { content: none; }
.sa-jp__stack > .sa-multi[open] > summary > b, .sa-jp__stack > .sa-multi.is-on > summary > b { border-color: var(--sa-red-hot); color: #fff; }
.sa-jp__stack > .sa-multi > .sa-multi__pop { left: 0; right: auto; }
/* У правого края экрана список прижимаем к правому краю кнопки, иначе он вылезает за экран. */
.sa-jp__stack > .sa-multi.is-right > .sa-multi__pop { left: auto; right: 0; }
@media (max-width: 700px) {
	/* На телефоне список — лист снизу во всю ширину; правило стопки выше его не перебивает. */
	.sa-jp__stack > .sa-multi > .sa-multi__pop, .sa-jp__stack > .sa-multi.is-right > .sa-multi__pop { left: 12px; right: 12px; }
}
/* Поле модели до выбора марки выключено: список моделей зависит от марки. */
.sa-jp__f input:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
	.sa-jp__stack > * { padding: 8px 12px; }
}

/* Проверка лота по истории торгов: подсказка меняется, когда установлен наш скрипт для браузера */
.sa-jstat__yes { display: none; }
html[data-sa-lotcheck] .sa-jstat__no { display: none; }
html[data-sa-lotcheck] .sa-jstat__yes { display: inline; color: #35c07a; }
.sa-helper { max-width: 820px; }
.sa-helper__status { font-weight: 600; margin: 8px 0 22px; }
.sa-helper__steps { display: grid; gap: 16px; }
.sa-helper__step { padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); }
.sa-helper__step b { display: block; font-size: 17px; margin-bottom: 8px; }
.sa-helper__step p { margin: 8px 0 0; color: #cfd0d8; line-height: 1.5; }
.sa-helper__step a:not(.sa-btn) { color: var(--sa-ember); }
.sa-helper__step code { background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 6px; }

/* Куки: после трёх минут без ответа окно становится обязательным — без крестика, с просьбой ответить. */
.sa-pop--cookie.is-must .sa-pop__close { display: none; }
.sa-pop--cookie.is-must::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(4px); }
.sa-cookie__must { padding: 10px 12px; border-radius: 10px; background: rgba(232, 34, 28, .12); border: 1px solid rgba(232, 34, 28, .4); color: #fff; }

/* Цена в фильтре Японии: переключатель «¥ лота / ₽ под ключ» в подписи плашки. */
.sa-jp__f--price > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sa-jp__cur { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .06); }
.sa-jp__cur button { border: 0; background: none; color: var(--sa-muted); font: inherit; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.sa-jp__cur button.is-on { background: var(--sa-red-hot); color: #fff; }
.sa-jp__f--price .sa-range[hidden] { display: none; }
.sa-jp__cur-note { grid-column: 1 / -1; font-style: normal; color: var(--sa-muted); font-size: 11px; line-height: 1.3; }
.sa-jp__cur-note[hidden] { display: none; }

/* Отклик на вакансию: обычная анкета — поля в столбик, короткие парами. */
.sa-resume { display: grid; gap: 12px; }
.sa-resume label { display: grid; gap: 5px; font-size: 13px; color: var(--sa-muted); }
.sa-resume label { grid-auto-flow: row; }
.sa-resume label > i { font-style: normal; }
.sa-resume label > span { color: var(--sa-red-hot); }
.sa-resume .sa-lead__consent span { color: #cfd0d8; }   /* согласие обычным текстом, не тревожно-красным */
.sa-resume .sa-lead__consent a { color: var(--sa-ember); }
.sa-resume input[type="text"], .sa-resume input[type="tel"], .sa-resume input[type="email"], .sa-resume input[type="url"], .sa-resume textarea, .sa-resume select {
	width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .13); color: #fff; font: inherit; font-size: 14.5px; }
.sa-resume textarea { resize: vertical; min-height: 72px; }
.sa-resume input[type="file"] { padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .22); color: #cfd0d8; font-size: 13px; }
.sa-resume small { color: var(--sa-muted); font-size: 11.5px; }
.sa-resume__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sa-resume .sa-lead__consent { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; font-size: 12.5px; }
.sa-resume__msg { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; background: rgba(53, 192, 122, .14); border: 1px solid rgba(53, 192, 122, .4); color: #fff; }
.sa-resume__msg.is-bad { background: rgba(232, 34, 28, .14); border-color: rgba(232, 34, 28, .45); }
.sa-resume__msg[hidden] { display: none; }
@media (max-width: 560px) { .sa-resume__two { grid-template-columns: 1fr; } }

/* Порядок столбцов можно менять и перетаскиванием заголовков прямо в шапке таблицы. */
.sa-jt__hd { cursor: grab; user-select: none; }
.sa-jt__hd.is-drag { opacity: .45; }
.sa-jt__hd.is-over { box-shadow: inset 2px 0 0 var(--sa-red-hot); }