/* ============================================================================
   SerialCars — портал. Слой ПРИМИТИВОВ поверх assets/portal/tokens.css.
   Сырых значений здесь нет: только var(--sc-*, фолбэк).
   Движение — исключительно opacity/transform, гасится через --sc-dur-* в токенах
   (в @keyframes нет !important — он убивает анимацию).
   ========================================================================== */

/* ── База ───────────────────────────────────────────────────────────────── */
.sc *,.sc *::before,.sc *::after{box-sizing:border-box}
.sc{
  margin:0;
  background:var(--sc-surface-1,#0E0D11);
  color:var(--sc-text,#F6F3F1);
  font-family:var(--sc-font-text,system-ui,sans-serif);
  font-size:var(--sc-fs-16,16px);
  line-height:var(--sc-lh-16,25px);
  font-weight:var(--sc-fw-regular,400);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.sc img,.sc svg{display:block;max-width:100%}
.sc button,.sc input,.sc select,.sc textarea{font:inherit;color:inherit}

/* Единое кольцо фокуса на всём ките. */
.sc :focus-visible{outline:2px solid var(--sc-focus,#3DE0FF);outline-offset:2px;border-radius:var(--sc-r-sm,8px)}
.sc :focus:not(:focus-visible){outline:none}

/* ── Типографика ────────────────────────────────────────────────────────── */
.sc-display{font-family:var(--sc-font-display,sans-serif);font-size:var(--sc-fs-display,56px);line-height:var(--sc-lh-tight,1.08);letter-spacing:var(--sc-track-display,-.03em);font-weight:var(--sc-fw-bold,700);margin:0}
.sc-h1{font-family:var(--sc-font-display,sans-serif);font-size:var(--sc-fs-44,44px);line-height:var(--sc-lh-44,50px);letter-spacing:var(--sc-track-tight,-.015em);font-weight:var(--sc-fw-bold,700);margin:0}
.sc-h2{font-family:var(--sc-font-display,sans-serif);font-size:var(--sc-fs-30,30px);line-height:var(--sc-lh-30,36px);letter-spacing:var(--sc-track-tight,-.015em);font-weight:var(--sc-fw-semibold,600);margin:0}
.sc-h3{font-family:var(--sc-font-display,sans-serif);font-size:var(--sc-fs-20,20px);line-height:var(--sc-lh-20,28px);font-weight:var(--sc-fw-semibold,600);margin:0}
.sc-body{font-size:var(--sc-fs-16,16px);line-height:var(--sc-lh-16,25px);margin:0}
.sc-small{font-size:var(--sc-fs-14,14px);line-height:var(--sc-lh-14,21px);margin:0}
.sc-muted{color:var(--sc-text-muted,#BDB5B0)}
.sc-faint{color:var(--sc-text-faint,#998F87)}
/* Метка прописными: межстрочный 1.35 — иначе кириллический капс слипается. */
.sc-label{
  font-family:var(--sc-font-mono,monospace);
  font-size:var(--sc-fs-12,12px);
  line-height:var(--sc-lh-caps,1.35);
  letter-spacing:var(--sc-track-caps,.10em);
  text-transform:uppercase;
  color:var(--sc-text-faint,#998F87);
  margin:0;
}
.sc-num{font-family:var(--sc-font-mono,monospace);font-variant-numeric:tabular-nums;letter-spacing:var(--sc-track-normal,0)}
.sc-accent-text{color:var(--sc-accent-text,#FF5240)}
.sc-electric-text{color:var(--sc-electric-text,#3DE0FF)}

/* ── Раскладочные помощники (минимум, чтобы дизайнеры не изобретали свой) ── */
.sc-stack{display:flex;flex-direction:column;gap:var(--sc-sp-4,16px)}
.sc-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sc-sp-3,12px)}
.sc-wrap{width:100%;max-width:var(--sc-page,1320px);margin-inline:auto;padding-inline:var(--sc-gutter,16px)}

/* ── 1. Кнопки ──────────────────────────────────────────────────────────── */
.sc-btn{
  --_h:var(--sc-control-md,44px);
  --_px:var(--sc-sp-5,20px);
  --_fs:var(--sc-fs-14,14px);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sc-sp-2,8px);
  height:var(--_h,44px);padding-inline:var(--_px,20px);
  border:1px solid transparent;border-radius:var(--sc-r-full,999px);
  font-family:var(--sc-font-text,sans-serif);
  font-size:var(--_fs,14px);line-height:1.2;font-weight:var(--sc-fw-semibold,600);
  letter-spacing:var(--sc-track-normal,0);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  background:transparent;color:var(--sc-text,#F6F3F1);
  transition:var(--sc-tr-control,all 160ms ease);
  -webkit-tap-highlight-color:transparent;
}
.sc-btn:active{transform:translateY(1px)}
.sc-btn[disabled],.sc-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.sc-btn .sc-btn__ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8}

.sc-btn--primary{
  background:var(--sc-accent,#E02D1F);color:var(--sc-text-on-accent,#FFFFFF);
  box-shadow:var(--sc-edge-top-strong,inset 0 1px 0 rgba(255,255,255,.14)),var(--sc-shadow-2,0 8px 20px rgba(0,0,0,.34));
}
.sc-btn--primary:hover{background:var(--sc-accent-hover,#F03A2A);box-shadow:var(--sc-edge-top-strong,inset 0 1px 0 rgba(255,255,255,.14)),var(--sc-shadow-accent,0 10px 30px rgba(224,45,31,.34))}
.sc-btn--primary:active{background:var(--sc-accent-press,#C0241A)}

.sc-btn--secondary{
  background:var(--sc-surface-4,#221F26);color:var(--sc-text,#F6F3F1);
  border-color:var(--sc-border,rgba(255,255,255,.08));
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-1,0 2px 6px rgba(0,0,0,.26));
}
.sc-btn--secondary:hover{background:var(--sc-surface-5,#2B2831);border-color:var(--sc-border-strong,rgba(255,255,255,.16))}

.sc-btn--ghost{background:transparent;color:var(--sc-text-muted,#BDB5B0);border-color:transparent}
.sc-btn--ghost:hover{background:var(--sc-surface-3,#1A181D);color:var(--sc-text,#F6F3F1)}

.sc-btn--icon{--_px:0;width:var(--_h,44px);padding:0;border-radius:var(--sc-r-full,999px);background:var(--sc-surface-3,#1A181D);border-color:var(--sc-border,rgba(255,255,255,.08));color:var(--sc-text-muted,#BDB5B0)}
.sc-btn--icon:hover{background:var(--sc-surface-4,#221F26);color:var(--sc-text,#F6F3F1);border-color:var(--sc-border-strong,rgba(255,255,255,.16))}

.sc-btn--sm{--_h:var(--sc-control-sm,36px);--_px:var(--sc-sp-4,16px);--_fs:var(--sc-fs-13,13px)}
.sc-btn--lg{--_h:var(--sc-control-lg,56px);--_px:var(--sc-sp-7,32px);--_fs:var(--sc-fs-16,16px)}
.sc-btn--lg .sc-btn__ico{width:20px;height:20px}
.sc-btn--sm .sc-btn__ico{width:16px;height:16px}
.sc-btn--block{width:100%}

/* ── 2. Поля ввода и выпадающие списки ──────────────────────────────────── */
.sc-field{display:flex;flex-direction:column;gap:var(--sc-sp-2,8px)}
.sc-field__label{font-size:var(--sc-fs-13,13px);line-height:var(--sc-lh-13,20px);color:var(--sc-text-muted,#BDB5B0);font-weight:var(--sc-fw-medium,500)}
.sc-field__hint{font-size:var(--sc-fs-12,12px);line-height:var(--sc-lh-12,18px);color:var(--sc-text-faint,#998F87)}
.sc-field__hint--error{color:var(--sc-danger,#FF6B5C)}

.sc-input,.sc-select,.sc-textarea{
  width:100%;height:var(--sc-control-md,44px);
  padding-inline:var(--sc-sp-4,16px);
  background:var(--sc-surface-4,#221F26);
  color:var(--sc-text,#F6F3F1);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));
  border-radius:var(--sc-r-sm,8px);
  font-size:var(--sc-fs-16,16px);
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07));
  transition:var(--sc-tr-control,all 160ms ease);
  appearance:none;-webkit-appearance:none;
}
.sc-textarea{height:auto;min-height:112px;padding-block:var(--sc-sp-3,12px);line-height:var(--sc-lh-16,25px);resize:vertical}
.sc-input::placeholder,.sc-textarea::placeholder{color:var(--sc-text-faint,#998F87)}
.sc-input:hover,.sc-select:hover,.sc-textarea:hover{border-color:var(--sc-border-strong,rgba(255,255,255,.16))}
.sc-input:focus-visible,.sc-select:focus-visible,.sc-textarea:focus-visible{
  outline:none;
  border-color:var(--sc-focus,#3DE0FF);
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-focus-ring-flat,0 0 0 2px #3DE0FF);
}
.sc-input[aria-invalid="true"],.sc-select[aria-invalid="true"]{border-color:var(--sc-danger-line,rgba(255,107,92,.40))}
.sc-input[disabled],.sc-select[disabled],.sc-textarea[disabled]{opacity:.5;cursor:not-allowed}

/* стрелка выпадающего списка рисуется фоном, чтобы не зависеть от системы */
.sc-select{
  padding-right:var(--sc-sp-8,40px);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--sc-text-muted,#BDB5B0) 50%),linear-gradient(135deg,var(--sc-text-muted,#BDB5B0) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.sc-select option{background:var(--sc-surface-5,#2B2831);color:var(--sc-text,#F6F3F1)}

/* крупный поиск первого экрана */
.sc-search{position:relative;display:flex;align-items:center;gap:var(--sc-sp-3,12px);
  height:var(--sc-control-lg,56px);padding-inline:var(--sc-sp-5,20px);
  background:var(--sc-surface-4,#221F26);
  border:1px solid var(--sc-border-strong,rgba(255,255,255,.16));
  border-radius:var(--sc-r-full,999px);
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-2,0 8px 20px rgba(0,0,0,.34));
  transition:var(--sc-tr-control,all 160ms ease);
}
.sc-search:focus-within{border-color:var(--sc-focus,#3DE0FF);box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-focus-ring-flat,0 0 0 2px #3DE0FF)}
.sc-search__ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--sc-text-faint,#998F87);stroke-width:1.8}
.sc-search__input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--sc-text,#F6F3F1);font-size:var(--sc-fs-16,16px)}
.sc-search__input::placeholder{color:var(--sc-text-faint,#998F87)}
.sc-search__input:focus{outline:none}
.sc-search__count{flex:0 0 auto;font-family:var(--sc-font-mono,monospace);font-size:var(--sc-fs-13,13px);color:var(--sc-electric-text,#3DE0FF);font-variant-numeric:tabular-nums}

/* ── 3. Переключатели-чипы ──────────────────────────────────────────────── */
.sc-chips{display:flex;flex-wrap:wrap;gap:var(--sc-sp-2,8px)}
.sc-chip{
  display:inline-flex;align-items:center;gap:var(--sc-sp-2,8px);
  height:var(--sc-control-sm,36px);padding-inline:var(--sc-sp-4,16px);
  background:var(--sc-surface-3,#1A181D);
  color:var(--sc-text-muted,#BDB5B0);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));
  border-radius:var(--sc-r-full,999px);
  font-size:var(--sc-fs-13,13px);line-height:1.2;font-weight:var(--sc-fw-medium,500);
  cursor:pointer;white-space:nowrap;
  transition:var(--sc-tr-control,all 160ms ease);
}
.sc-chip:hover{background:var(--sc-surface-4,#221F26);color:var(--sc-text,#F6F3F1);border-color:var(--sc-border-strong,rgba(255,255,255,.16))}
.sc-chip[aria-pressed="true"],.sc-chip.is-on{
  background:var(--sc-accent-soft,rgba(224,45,31,.16));
  border-color:var(--sc-accent-line,rgba(224,45,31,.42));
  color:var(--sc-accent-text,#FF5240);
}
.sc-chip__dot{width:8px;height:8px;border-radius:var(--sc-r-full,999px);background:currentColor;flex:0 0 auto}
.sc-chip__n{font-family:var(--sc-font-mono,monospace);font-size:var(--sc-fs-12,12px);color:var(--sc-text-faint,#998F87);font-variant-numeric:tabular-nums}
.sc-chip[aria-pressed="true"] .sc-chip__n,.sc-chip.is-on .sc-chip__n{color:inherit;opacity:.8}

/* ── 4. Вкладки ─────────────────────────────────────────────────────────── */
.sc-tabs{display:inline-flex;gap:var(--sc-sp-1,4px);padding:var(--sc-sp-1,4px);
  background:var(--sc-surface-2,#141317);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));
  border-radius:var(--sc-r-full,999px);
  max-width:100%;overflow:auto;scrollbar-width:none;
}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-tab{
  display:inline-flex;align-items:center;gap:var(--sc-sp-2,8px);
  height:36px;padding-inline:var(--sc-sp-5,20px);
  border:0;border-radius:var(--sc-r-full,999px);
  background:transparent;color:var(--sc-text-muted,#BDB5B0);
  font-size:var(--sc-fs-14,14px);line-height:1.2;font-weight:var(--sc-fw-medium,500);
  cursor:pointer;white-space:nowrap;
  transition:var(--sc-tr-control,all 160ms ease);
}
.sc-tab:hover{color:var(--sc-text,#F6F3F1)}
.sc-tab[aria-selected="true"],.sc-tab.is-on{
  background:var(--sc-surface-4,#221F26);color:var(--sc-text,#F6F3F1);
  font-weight:var(--sc-fw-semibold,600);
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-1,0 2px 6px rgba(0,0,0,.26));
}
/* подчёркнутый вариант — для длинных рядов */
.sc-tabs--line{background:transparent;border:0;border-bottom:1px solid var(--sc-border,rgba(255,255,255,.08));border-radius:0;padding:0;gap:var(--sc-sp-6,24px);display:flex}
.sc-tabs--line .sc-tab{border-radius:0;padding-inline:0;height:44px;box-shadow:none;background:transparent;position:relative}
.sc-tabs--line .sc-tab[aria-selected="true"]::after,.sc-tabs--line .sc-tab.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--sc-accent,#E02D1F);border-radius:var(--sc-r-full,999px);
}

/* ── 5. Бейджи ──────────────────────────────────────────────────────────── */
.sc-badge{
  display:inline-flex;align-items:center;gap:var(--sc-sp-1,4px);
  height:24px;padding-inline:var(--sc-sp-3,12px);
  border-radius:var(--sc-r-full,999px);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));
  background:var(--sc-surface-4,#221F26);
  color:var(--sc-text-muted,#BDB5B0);
  font-family:var(--sc-font-mono,monospace);
  font-size:var(--sc-fs-12,12px);
  line-height:var(--sc-lh-caps,1.35);
  letter-spacing:var(--sc-track-caps,.10em);
  text-transform:uppercase;white-space:nowrap;
}
.sc-badge--accent{background:var(--sc-accent-soft,rgba(224,45,31,.16));border-color:var(--sc-accent-line,rgba(224,45,31,.42));color:var(--sc-accent-text,#FF5240)}
.sc-badge--electric{background:var(--sc-electric-soft,rgba(61,224,255,.14));border-color:var(--sc-electric-line,rgba(61,224,255,.38));color:var(--sc-electric-text,#3DE0FF)}
.sc-badge--success{background:var(--sc-success-soft,rgba(61,220,132,.14));border-color:var(--sc-success-line,rgba(61,220,132,.38));color:var(--sc-success,#3DDC84)}
.sc-badge--warning{background:var(--sc-warning-soft,rgba(255,176,32,.14));border-color:var(--sc-warning-line,rgba(255,176,32,.38));color:var(--sc-warning,#FFB020)}
.sc-badge--danger{background:var(--sc-danger-soft,rgba(255,107,92,.15));border-color:var(--sc-danger-line,rgba(255,107,92,.40));color:var(--sc-danger,#FF6B5C)}
.sc-badge--solid{background:var(--sc-accent,#E02D1F);border-color:transparent;color:var(--sc-text-on-accent,#FFFFFF)}

/* ── 6. Полоса-разделитель ──────────────────────────────────────────────── */
.sc-rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--sc-border-strong,rgba(255,255,255,.16)) 12%,var(--sc-border-strong,rgba(255,255,255,.16)) 88%,transparent)}
.sc-rule--flat{background:var(--sc-border,rgba(255,255,255,.08))}
.sc-rule--v{width:1px;height:auto;align-self:stretch;background:var(--sc-border,rgba(255,255,255,.08))}
.sc-rule--accent{background:linear-gradient(90deg,transparent,var(--sc-accent,#E02D1F) 50%,transparent)}

/* ── 7. Карточка машины: пустая оболочка ────────────────────────────────── */
.sc-card{
  display:flex;flex-direction:column;
  background:var(--sc-surface-3,#1A181D);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));
  border-radius:var(--sc-r-lg,24px);
  overflow:hidden;position:relative;
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-2,0 8px 20px rgba(0,0,0,.34));
  transition:var(--sc-tr-surface,all 200ms ease);
  will-change:transform;
}
.sc-card:hover{transform:translateY(-4px);border-color:var(--sc-border-strong,rgba(255,255,255,.16));box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-3,0 18px 44px rgba(0,0,0,.44))}
.sc-card__media{position:relative;aspect-ratio:16/10;background:var(--sc-surface-0,#08070A);overflow:hidden}
.sc-card__media > img{width:100%;height:100%;object-fit:cover;transition:transform var(--sc-dur-4,260ms) var(--sc-ease,ease)}
.sc-card__media--studio{background:radial-gradient(96% 70% at 50% 8%,rgba(255,255,255,.08),transparent 62%),linear-gradient(180deg,var(--sc-surface-3,#1A181D),var(--sc-surface-0,#08070A))}
.sc-card__media--studio > img{object-fit:contain;padding:var(--sc-sp-6,24px) var(--sc-sp-5,20px)}
.sc-card:hover .sc-card__media > img{transform:scale(1.04)}
.sc-card__tags{position:absolute;left:var(--sc-sp-3,12px);top:var(--sc-sp-3,12px);display:flex;flex-wrap:wrap;gap:var(--sc-sp-2,8px);z-index:var(--sc-z-raised,10)}
.sc-card__fav{position:absolute;right:var(--sc-sp-3,12px);top:var(--sc-sp-3,12px);z-index:var(--sc-z-raised,10)}
.sc-card__body{display:flex;flex-direction:column;gap:var(--sc-sp-3,12px);padding:var(--sc-sp-5,20px)}
.sc-card__title{font-family:var(--sc-font-display,sans-serif);font-size:var(--sc-fs-18,18px);line-height:var(--sc-lh-18,28px);font-weight:var(--sc-fw-semibold,600);letter-spacing:var(--sc-track-tight,-.015em);margin:0;overflow-wrap:anywhere}
.sc-card__sub{font-size:var(--sc-fs-13,13px);line-height:var(--sc-lh-13,20px);color:var(--sc-text-faint,#998F87);margin:0}
.sc-card__specs{display:flex;flex-wrap:wrap;gap:var(--sc-sp-2,8px) var(--sc-sp-4,16px);font-size:var(--sc-fs-13,13px);color:var(--sc-text-muted,#BDB5B0);margin:0;padding:0;list-style:none}
.sc-card__specs li{display:flex;align-items:center;gap:var(--sc-sp-2,8px)}
.sc-card__specs li + li::before{content:"";width:3px;height:3px;border-radius:var(--sc-r-full,999px);background:var(--sc-text-disabled,#6B6560);margin-right:var(--sc-sp-2,8px)}
.sc-card__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sc-sp-4,16px);
  padding:var(--sc-sp-4,16px) var(--sc-sp-5,20px);border-top:1px solid var(--sc-border-faint,rgba(255,255,255,.05));background:var(--sc-surface-2,#141317)}
.sc-card__price{font-family:var(--sc-font-mono,monospace);font-size:var(--sc-fs-20,20px);line-height:var(--sc-lh-20,28px);font-weight:var(--sc-fw-medium,500);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-card__price small{display:block;font-family:var(--sc-font-text,sans-serif);font-size:var(--sc-fs-12,12px);line-height:var(--sc-lh-12,18px);color:var(--sc-text-faint,#998F87);font-weight:var(--sc-fw-regular,400)}
/* ссылка-растяжка: вся карточка кликабельна, но role="button" на неё не вешаем */
.sc-card__link::after{content:"";position:absolute;inset:0;z-index:var(--sc-z-raised,10)}
.sc-card__link{text-decoration:none;color:inherit}
.sc-card:focus-within{border-color:var(--sc-border-strong,rgba(255,255,255,.16))}

/* ── 8. Всплывающая подсказка ───────────────────────────────────────────── */
.sc-tip{position:relative;display:inline-flex}
.sc-tip__bubble{
  position:absolute;left:50%;bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  /* width:max-content вместе с max-width; min-width:max-content нельзя —
     минимальная ширина в CSS сильнее максимальной, и пузырь распухает. */
  width:max-content;max-width:min(280px,calc(100vw - 32px));
  padding:var(--sc-sp-3,12px) var(--sc-sp-4,16px);
  background:var(--sc-surface-5,#2B2831);
  color:var(--sc-text,#F6F3F1);
  border:1px solid var(--sc-border-strong,rgba(255,255,255,.16));
  border-radius:var(--sc-r-sm,8px);
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-3,0 18px 44px rgba(0,0,0,.44));
  font-size:var(--sc-fs-13,13px);line-height:var(--sc-lh-13,20px);
  opacity:0;pointer-events:none;z-index:var(--sc-z-tooltip,700);
  transition:opacity var(--sc-dur-3,200ms) var(--sc-ease,ease),transform var(--sc-dur-3,200ms) var(--sc-ease,ease);
}
.sc-tip__bubble::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;
  background:var(--sc-surface-5,#2B2831);border-right:1px solid var(--sc-border-strong,rgba(255,255,255,.16));border-bottom:1px solid var(--sc-border-strong,rgba(255,255,255,.16));transform:rotate(45deg)}
.sc-tip:hover .sc-tip__bubble,.sc-tip:focus-within .sc-tip__bubble,.sc-tip.is-on .sc-tip__bubble{opacity:1;transform:translateX(-50%) translateY(0)}
/* прижать пузырь к краю кнопки — у края экрана или колонки.
   Эти правила идут ПОСЛЕ показа: побеждает последнее объявление. */
.sc-tip__bubble--start{left:0;right:auto;transform:translateX(0) translateY(4px)}
.sc-tip__bubble--start::after{left:28px}
.sc-tip__bubble--end{left:auto;right:0;transform:translateX(0) translateY(4px)}
.sc-tip__bubble--end::after{left:auto;right:28px}
.sc-tip:hover .sc-tip__bubble--start,.sc-tip:focus-within .sc-tip__bubble--start,.sc-tip.is-on .sc-tip__bubble--start,
.sc-tip:hover .sc-tip__bubble--end,.sc-tip:focus-within .sc-tip__bubble--end,.sc-tip.is-on .sc-tip__bubble--end{opacity:1;transform:translateX(0) translateY(0)}
@media (max-width:520px){
  .sc-tip__bubble:not(.sc-tip__bubble--end){left:0;right:auto;transform:translateX(0) translateY(4px)}
  .sc-tip__bubble:not(.sc-tip__bubble--end)::after{left:28px}
  .sc-tip:hover .sc-tip__bubble:not(.sc-tip__bubble--end),.sc-tip:focus-within .sc-tip__bubble:not(.sc-tip__bubble--end),.sc-tip.is-on .sc-tip__bubble:not(.sc-tip__bubble--end){transform:translateX(0) translateY(0)}
}

/* ── 9. Модальное окно ──────────────────────────────────────────────────── */
.sc-modal{position:fixed;inset:0;z-index:var(--sc-z-modal,500);display:grid;place-items:center;padding:var(--sc-sp-4,16px)}
.sc-modal[hidden]{display:none}
.sc-modal__scrim{position:absolute;inset:0;background:var(--sc-scrim,rgba(6,5,8,.78));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:sc-fade-in var(--sc-dur-3,200ms) var(--sc-ease,ease) both}
.sc-modal__win{
  position:relative;width:100%;max-width:560px;max-height:86vh;overflow:auto;
  background:var(--sc-surface-5,#2B2831);
  border:1px solid var(--sc-border-strong,rgba(255,255,255,.16));
  border-radius:var(--sc-r-lg,24px);
  box-shadow:var(--sc-edge-top-strong,inset 0 1px 0 rgba(255,255,255,.14)),var(--sc-shadow-4,0 40px 88px rgba(0,0,0,.56));
  animation:sc-rise var(--sc-dur-4,260ms) var(--sc-ease,ease) both;
}
.sc-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sc-sp-4,16px);padding:var(--sc-sp-6,24px) var(--sc-sp-6,24px) var(--sc-sp-4,16px)}
.sc-modal__body{padding:0 var(--sc-sp-6,24px) var(--sc-sp-6,24px);display:flex;flex-direction:column;gap:var(--sc-sp-4,16px)}
.sc-modal__foot{display:flex;flex-wrap:wrap;gap:var(--sc-sp-3,12px);justify-content:flex-end;padding:var(--sc-sp-4,16px) var(--sc-sp-6,24px) var(--sc-sp-6,24px);border-top:1px solid var(--sc-border-faint,rgba(255,255,255,.05))}
/* статический показ модалки внутри витрины */
.sc-modal--inline{position:relative;inset:auto;display:block;padding:0}
.sc-modal--inline .sc-modal__scrim{position:absolute;border-radius:var(--sc-r-lg,24px)}
.sc-modal--inline .sc-modal__win{margin-inline:auto;max-height:none}

/* ── 10. Скелетон загрузки ──────────────────────────────────────────────── */
.sc-skel{
  position:relative;overflow:hidden;
  background:var(--sc-surface-4,#221F26);
  border-radius:var(--sc-r-sm,8px);
}
.sc-skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--sc-border-strong,rgba(255,255,255,.16)),transparent);
  transform:translateX(-100%);
  animation:sc-sweep 1400ms var(--sc-ease-in-out,ease) infinite;
}
.sc-skel--line{height:12px;border-radius:var(--sc-r-full,999px)}
.sc-skel--title{height:20px;width:62%;border-radius:var(--sc-r-full,999px)}
.sc-skel--text{height:12px;width:88%;border-radius:var(--sc-r-full,999px)}
.sc-skel--media{aspect-ratio:16/10;width:100%;border-radius:0}
.sc-skel--chip{height:36px;width:104px;border-radius:var(--sc-r-full,999px)}

/* ── 11. Подиум-студия для вырезанной машины ────────────────────────────── */
/* Фон, мягкий свет сверху, контактная тень и отражение перевёрнутой копией.
   Высота машины задана токеном --sc-podium-car: за счёт неё ряд подиумов
   выстраивается ровно, какой бы ни была пропорция исходной вырезки. */
.sc-podium{
  --sc-podium-car:clamp(132px,15vw,206px);
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--sc-r-lg,24px);
  border:1px solid var(--sc-border,rgba(255,255,255,.08));
  background:
    radial-gradient(118% 74% at 50% 2%,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 34%,transparent 62%),
    radial-gradient(64% 26% at 50% 62%,rgba(255,255,255,.06) 0%,transparent 74%),
    radial-gradient(72% 40% at 50% 98%,rgba(224,45,31,.09) 0%,transparent 72%),
    linear-gradient(180deg,var(--sc-surface-3,#1A181D) 0%,var(--sc-surface-2,#141317) 52%,var(--sc-surface-0,#08070A) 100%);
  box-shadow:var(--sc-edge-top,inset 0 1px 0 rgba(255,255,255,.07)),var(--sc-shadow-3,0 18px 44px rgba(0,0,0,.44));
  padding:var(--sc-sp-7,32px) var(--sc-sp-6,24px) var(--sc-sp-6,24px);
  transition:var(--sc-tr-surface,all 200ms ease);
}
/* источник света — всегда сверху */
.sc-podium::after{
  content:"";position:absolute;left:50%;top:-38%;width:136%;aspect-ratio:2/1;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 70%);
  z-index:var(--sc-z-base,0);pointer-events:none;
}
.sc-podium__stage{position:relative;z-index:var(--sc-z-raised,10);display:flex;flex-direction:column;align-items:center;width:100%}
.sc-podium__shot{position:relative;width:100%;height:var(--sc-podium-car,180px);display:flex;justify-content:center}
.sc-podium__img{
  height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));
  transition:transform var(--sc-dur-4,260ms) var(--sc-ease,ease);
}
/* контактная тень под колёсами */
.sc-podium__shadow{
  position:absolute;left:50%;bottom:-6px;width:74%;height:26px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.70),rgba(0,0,0,.26) 58%,transparent 80%);
  filter:blur(7px);z-index:var(--sc-z-below,-1);pointer-events:none;
}
/* отражение: та же картинка, перевёрнутая, под маской-градиентом */
.sc-podium__echo{
  position:relative;width:100%;height:calc(var(--sc-podium-car,180px) * .5);
  overflow:hidden;display:flex;justify-content:center;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.34) 40%,transparent 76%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.34) 40%,transparent 76%);
}
/* линия горизонта ровно на стыке машины и отражения */
.sc-podium__echo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:var(--sc-z-raised,10);
  background:linear-gradient(90deg,transparent,var(--sc-border-strong,rgba(255,255,255,.16)) 26%,var(--sc-border-strong,rgba(255,255,255,.16)) 74%,transparent);
}
.sc-podium__echo img{height:var(--sc-podium-car,180px);width:auto;max-width:100%;object-fit:contain;transform:scaleY(-1);opacity:.62;filter:blur(1.2px) saturate(.72) brightness(.92)}
/* подпись прижата к низу — ряд подиумов заканчивается одной линией */
.sc-podium__cap{position:relative;z-index:var(--sc-z-raised,10);margin-top:auto;padding-top:var(--sc-sp-6,24px);display:flex;flex-direction:column;gap:var(--sc-sp-2,8px)}
.sc-podium__name{font-family:var(--sc-font-display,sans-serif);font-size:var(--sc-fs-20,20px);line-height:var(--sc-lh-20,28px);font-weight:var(--sc-fw-semibold,600);letter-spacing:var(--sc-track-tight,-.015em);margin:0;overflow-wrap:anywhere}
.sc-podium__meta{font-size:var(--sc-fs-13,13px);line-height:var(--sc-lh-13,20px);color:var(--sc-text-faint,#998F87);margin:0;min-height:calc(var(--sc-lh-13,20px) * 2)}
.sc-podium__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sc-sp-3,12px);margin-top:var(--sc-sp-2,8px);padding-top:var(--sc-sp-4,16px);border-top:1px solid var(--sc-border-faint,rgba(255,255,255,.05))}
.sc-podium__price{font-family:var(--sc-font-mono,monospace);font-size:var(--sc-fs-18,18px);line-height:var(--sc-lh-18,28px);color:var(--sc-text,#F6F3F1);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-podium:hover{border-color:var(--sc-border-strong,rgba(255,255,255,.16))}
.sc-podium:hover .sc-podium__img{transform:translateY(-6px)}
/* варианты */
.sc-podium--quiet{background:linear-gradient(180deg,var(--sc-surface-2,#141317) 0%,var(--sc-surface-0,#08070A) 100%)}
.sc-podium--tall{--sc-podium-car:clamp(180px,24vw,300px)}
.sc-podium--float .sc-podium__stage{animation:sc-hover 7s var(--sc-ease-in-out,ease) infinite alternate}

/* ── Движение ───────────────────────────────────────────────────────────── */
/* Внутри @keyframes нет !important — он гасит анимацию целиком. */
@keyframes sc-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sc-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sc-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes sc-hover{from{transform:translateY(0)}to{transform:translateY(-8px)}}

/* Появление при прокрутке: прячем только opacity/transform.
   clip-path до нуля здесь запрещён — он прячет элемент от IntersectionObserver. */
.sc-reveal{opacity:0;transform:translateY(18px);transition:opacity var(--sc-dur-4,260ms) var(--sc-ease,ease),transform var(--sc-dur-4,260ms) var(--sc-ease,ease)}
.sc-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .sc *,.sc *::before,.sc *::after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}
  .sc-podium--float .sc-podium__stage{animation:none}
  .sc-podium:hover .sc-podium__img{transform:none}
  .sc-skel::after{animation:none;opacity:.5;transform:none}
  .sc-card:hover{transform:none}
  .sc-card:hover .sc-card__media > img{transform:none}
  .sc-reveal{opacity:1;transform:none}
}

/* ── Мелочи под телефон ─────────────────────────────────────────────────── */
@media (max-width:520px){
  .sc-search{height:var(--sc-control-md,44px);padding-inline:var(--sc-sp-4,16px);gap:var(--sc-sp-2,8px)}
  .sc-search__input{font-size:var(--sc-fs-14,14px);text-overflow:ellipsis}
  .sc-search__count{font-size:var(--sc-fs-12,12px)}
  .sc-podium{padding:var(--sc-sp-6,24px) var(--sc-sp-4,16px) var(--sc-sp-5,20px)}
}