/* Avtonomera22 — Design tokens
Single source of truth for colors, type, spacing, radii, shadows.
Accent CTA color is swappable via .accent-graphite / .accent-blue / .accent-gold
class on , set by the Tweaks panel. */
:root {
/* Surfaces */
--bg: #F7F6F2; /* warm off-white */
--surface: #FFFFFF;
--surface-2: #FBFAF6;
--line: #E5E3DD;
--line-2: #EFEDE7;
/* Text */
--ink: #1A1A1A;
--ink-2: #3A3A3A;
--muted: #6B6B6B;
--muted-2: #9A9893;
/* Brand / functional */
--accent: #0F1419; /* default — graphite */
--accent-ink: #FFFFFF;
--gold: #B8965A;
--gold-soft: #E9D8B0;
--success: #4A7C59;
--alert: #B8553A;
/* Radii */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-full: 999px;
/* Shadows */
--shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
--shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);
--ring: 0 0 0 3px rgba(15,20,25,0.12);
/* Type */
--font-display: 'Manrope', 'Inter Tight', 'Inter', system-ui, sans-serif;
--font-text: 'Inter', 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Spacing scale (8px base, with 4 for fine-tuning) */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
}
.accent-graphite { --accent: #0F1419; --accent-ink: #FFFFFF; }
.accent-blue { --accent: #1B2A4E; --accent-ink: #FFFFFF; }
.accent-gold { --accent: #8A6A2E; --accent-ink: #FFFFFF; }
/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-text);
color: var(--ink);
-webkit-font-smoothing: antialiased;
font-feature-settings: "ss01", "cv11";
}
/* Type roles */
.t-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.04; }
.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.05; letter-spacing: -0.024em; }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.t-h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.18; letter-spacing: -0.015em; }
.t-h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.t-body { font-size: 16px; line-height: 1.5; }
.t-body-lg { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.t-small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.t-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ── Landing base ──────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
a { color: inherit; }
button { font-family: inherit; }
::selection { background: rgba(184,150,90,0.28); }
/* Focus visible — visible without hover (TZ accessibility) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
*:focus:not(:focus-visible) { outline: none; }
/* Catalog card interactions */
.plate-card { position: relative; }
.plate-card__more { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.plate-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); border-color: #DAD7CF; }
.plate-card:hover .plate-card__more { opacity: 1; transform: translateY(0); }
/* Generic field focus */
.field:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
/* Hero plate-search cells — fluid so 6 cells + region fit small screens */
.hero-cell { width: clamp(40px, 11.5vw, 58px); height: clamp(64px, 16vw, 84px); font-size: clamp(32px, 9vw, 52px); }
@media (max-width: 540px) {
.hero-region { border-left: none !important; padding-left: 0 !important; height: auto !important; }
}
/* Intro motion — transform only, so resting state is always visible
(an animation paused before it runs must never leave content hidden). */
@keyframes modal-in { from { transform: translateY(14px) scale(.985) } to { transform: none } }
@keyframes toast-in { from { transform: translateY(16px) } to { transform: none } }
.section { scroll-margin-top: 84px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 760px) {
.t-h1 { font-size: 34px; }
.t-h2 { font-size: 28px; }
.t-h3 { font-size: 22px; }
.wrap { padding-left: 18px; padding-right: 18px; }
}
/* Plate-detail modal: stack to one column on narrow screens so the
rendered plate never forces horizontal scroll. */
@media (max-width: 640px) {
.modal-grid { grid-template-columns: minmax(0, 1fr) !important; }
.modal-grid .modal-photo {
min-height: 200px !important;
padding: 24px 18px !important;
border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
}
.modal-grid .modal-info { padding: 24px 20px 26px !important; }
}
/* ── Каталог: горизонтальная строка номера ───────────────────────── */
/* Внимание: .plate-row — это (для SEO/индексации ссылок на страницу
номера). Поэтому явно сбрасываем браузерные дефолты ссылок (подчёркивание
и синий цвет), наследуя текст/цвет родителя — как было в div-версии. */
.plate-row {
display: grid;
grid-template-columns: 232px minmax(0,1fr) auto 44px;
align-items: center; gap: 20px;
padding: 13px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
cursor: pointer; position: relative;
text-decoration: none; /* сброс */
color: inherit; /* сброс */
transition: box-shadow .16s, transform .16s, border-color .16s, background .16s;
}
.plate-row:hover { box-shadow: var(--shadow-2); border-color: #DAD7CF; transform: translateY(-1px); }
.plate-row,
.plate-row * { text-decoration: none; } /* полный сброс подчёркивания внутри строки-ссылки */
.plate-row__plate { display: flex; flex-direction: column; gap: 7px; }
.plate-row__date { font-size: 12px; color: var(--muted-2); letter-spacing: .02em; }
.plate-row__city { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.plate-row__cityname { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.plate-row__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plate-tag {
display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line);
font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: .01em;
}
.plate-row__price { font-family: var(--font-display); font-weight: 700; font-size: 21px;
letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
/* Закреплённый (featured) — тёплая золотистая подсветка бренда */
.plate-row.is-pinned {
background: linear-gradient(180deg, #FDF7E9, #FBF1D9);
border-color: var(--gold-soft);
box-shadow: inset 3px 0 0 var(--gold);
}
.plate-row.is-pinned:hover { border-color: var(--gold); }
/* Индикатор «закреплён» — статичная звезда (закрепление задаётся в админке) */
.pin-flag { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
.plate-row { grid-template-columns: 1fr auto; gap: 12px 14px; padding: 16px; align-items: center; }
.plate-row__plate { grid-column: 1 / -1; order: 1; }
.plate-row__plate svg { max-width: 100%; height: auto; }
.plate-row__city { grid-column: 1; order: 2; min-width: 0; }
.plate-row__price { grid-column: 2; order: 3; align-self: center; }
.plate-row .pin-flag { position: absolute; top: 12px; right: 12px; width: auto; height: auto; }
}
/* ── Hero v2: two-column layout (heading + Telegram widget) ──────── */
.hero2 { background: var(--bg); padding-top: 64px; padding-bottom: 64px; }
.hero2__grid {
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
@media (max-width: 980px) {
.hero2__grid { grid-template-columns: 1fr; gap: 36px; }
.hero2 { padding-top: 44px; padding-bottom: 48px; }
}
/* ── "Оцени свой госномер" — Telegram banner ─────────────────────── */
.tg-banner{
--card-bg:#0F1620; --card-bg-2:#0A0F16; --tg-ink:#EAF1F8; --tg-ink-2:#9AAABE;
--tg-line:rgba(196,214,235,0.10); --tg-line-strong:rgba(196,214,235,0.18);
--tg-gold:#C9A35C; --tg-gold-soft:#F0DDA8; --tg-gold-deep:#9C7B3C;
--tg:#2AABEE; --tg-2:#229ED9; --tg-deep:#1C84B6;
--tg-font:'Golos Text', system-ui, -apple-system, sans-serif;
--tg-plate:'Oswald','Arial Narrow', sans-serif;
position:relative; isolation:isolate; width:100%; display:flex; align-items:center;
gap:clamp(16px,2.6vw,28px); padding:clamp(22px,3vw,34px); border-radius:22px;
text-decoration:none; overflow:hidden;
background:linear-gradient(158deg, var(--card-bg) 0%, var(--card-bg-2) 100%);
border:1px solid var(--tg-line);
box-shadow:0 2px 8px rgba(0,0,0,0.4), 0 24px 60px rgba(0,0,0,0.5);
transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s;
}
.tg-banner:hover{ transform:translateY(-3px); border-color:var(--tg-line-strong);
box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 30px 70px rgba(0,0,0,0.55); }
.tg-banner:focus-visible{ outline:2px solid var(--tg-gold); outline-offset:3px; }
.tg-banner__plate{ position:absolute; inset:0; z-index:-1; overflow:hidden;
-webkit-mask-image:linear-gradient(95deg,#000 0%,#000 42%,transparent 78%);
mask-image:linear-gradient(95deg,#000 0%,#000 42%,transparent 78%); }
.tg-banner__plate span{ position:absolute; font-family:var(--tg-plate); font-weight:700;
color:rgba(220,232,246,0.05); letter-spacing:.04em; white-space:nowrap; text-transform:uppercase; line-height:1; }
.tg-banner__plate .p1{ top:-14px; left:-30px; font-size:120px; transform:rotate(-7deg); filter:blur(1px); }
.tg-banner__plate .p2{ bottom:-26px; left:54px; font-size:88px; transform:rotate(-7deg); color:rgba(220,232,246,0.035); }
.tg-banner__glow{ position:absolute; z-index:-1; top:-40%; right:-14%; width:60%; height:180%; border-radius:50%;
background:radial-gradient(closest-side, rgba(42,171,238,0.18), transparent 72%); pointer-events:none; }
.tg-banner__main{ flex:1 1 auto; min-width:0; }
.tg-banner__title{ margin:0; font-family:var(--tg-plate); font-weight:700; text-transform:uppercase;
font-size:clamp(28px,4.4vw,44px); line-height:0.96; letter-spacing:0.005em; color:var(--tg-ink);
text-shadow:0 2px 14px rgba(0,0,0,0.5); }
.tg-banner__title b{ display:block; font-weight:700;
background:linear-gradient(180deg, var(--tg-gold-soft), var(--tg-gold));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tg-banner__sub{ margin:10px 0 0; font-size:clamp(13px,1.5vw,14.5px); color:var(--tg-ink-2); line-height:1.45; max-width:30ch; }
.tg-banner__cta{ margin-top:clamp(16px,2.6vw,22px); display:inline-flex; align-items:center; gap:10px;
padding:14px 26px; border-radius:12px; font-weight:600; font-size:clamp(13px,1.6vw,15px);
letter-spacing:0.06em; text-transform:uppercase; color:#06283B;
background:linear-gradient(168deg, #7FD0F5 0%, var(--tg) 58%, var(--tg-deep) 100%);
box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.12) inset, 0 10px 24px rgba(28,132,182,0.36);
transition:transform .2s, box-shadow .2s, filter .2s; }
.tg-banner:hover .tg-banner__cta{ transform:translateY(-1px); filter:brightness(1.05);
box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 -2px 0 rgba(0,0,0,0.12) inset, 0 14px 30px rgba(28,132,182,0.46); }
.tg-banner__cta svg{ width:18px; height:18px; flex:0 0 auto; }
.tg-icon{ position:relative; flex:0 0 auto; width:clamp(86px,16vw,120px); aspect-ratio:1; border-radius:26px;
display:grid; place-items:center;
background:linear-gradient(155deg, var(--tg) 0%, var(--tg-2) 55%, var(--tg-deep) 100%);
box-shadow:0 2px 0 rgba(255,255,255,0.45) inset, 0 -10px 22px rgba(0,0,0,0.18) inset, 0 14px 34px rgba(28,132,182,0.45);
transition:transform .26s cubic-bezier(.2,.7,.2,1); }
.tg-banner:hover .tg-icon{ transform:scale(1.04) rotate(-2deg); }
.tg-icon::before{ content:""; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(150deg, rgba(255,255,255,0.32), transparent 46%); pointer-events:none; }
.tg-icon svg{ width:60%; height:60%; position:relative; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.22)); }
.tg-icon__badge{ position:absolute; top:-9px; right:-9px; min-width:30px; height:30px; padding:0 8px;
border-radius:999px; display:grid; place-items:center; font-family:var(--tg-font);
font-size:14px; font-weight:700; line-height:1; color:#fff;
background:linear-gradient(160deg,#3FB5F2,#1C84B6);
box-shadow:0 4px 12px rgba(28,132,182,0.5); }
@media (max-width:520px){
.tg-banner{ flex-direction:column-reverse; align-items:flex-start; text-align:left; }
.tg-banner__plate{ -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); }
.tg-banner__glow{ top:-20%; right:auto; left:-20%; }
}
/* ════════════════════════════════════════════════════════════════════
SSR-слой (server-side render). Раньше эти стили были inline в JSX-компонентах
(ui.jsx Button/Field/Input, catalog.jsx FilterPanel/Chips, contacts-footer
PlateDetail). Перенесены сюда для серверного вывода без React.
════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
/* ── Кнопки (.btn) — перенос ui.jsx → Button ────────────────────────── */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:48px; padding:0 22px; border-radius:var(--r-md);
font-family:var(--font-display); font-weight:600; font-size:15px;
cursor:pointer; white-space:nowrap; text-decoration:none;
background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
transition:filter .15s, box-shadow .15s, background .15s;
}
.btn:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:0.55; cursor:not-allowed; filter:none; }
.btn-sm{ height:40px; padding:0 16px; font-size:14px; }
.btn-secondary{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
/* ── Поля форм (input/textarea/select) — перенос ui.jsx inputBase ──── */
.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card input[type="number"],
.form-card textarea,
.form-card select{
width:100%; height:48px; padding:0 14px;
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-md); font-size:15px; color:var(--ink);
font-family:var(--font-text); outline:none;
transition:border-color .15s, box-shadow .15s; box-sizing:border-box;
}
.form-card textarea{ height:auto; padding:12px 14px; resize:vertical; line-height:1.5; }
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus{ border-color:var(--accent); box-shadow:var(--ring); }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:clamp(24px,3vw,36px); }
.form-label{ display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
.form-row{ height:18px; }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-3col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.consent{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none; font-size:14px; color:var(--ink-2); line-height:1.45; }
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.consent .consent__box{
flex:none; width:18px; height:18px; border-radius:var(--r-sm); margin-top:1px;
background:var(--surface); border:1.5px solid var(--line);
display:flex; align-items:center; justify-content:center;
color:var(--accent-ink); font-size:11px; line-height:1;
transition:background .12s, border-color .12s;
}
.consent input:checked ~ .consent__box{ background:var(--accent); border-color:var(--accent); }
.consent input:checked ~ .consent__box::after{ content:'✓'; }
.consent:hover .consent__box{ border-color:var(--accent); }
/* Поле загрузки фото (FileDrop) — перенос из ui.jsx. */
.file-drop{ display:block; margin-top:8px; }
.file-drop__zone{
display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
padding:24px 18px; text-align:center;
border:1.5px dashed var(--line); border-radius:var(--r-md); background:var(--surface-2);
transition:border-color .15s, background .15s;
}
.file-drop:hover .file-drop__zone{ border-color:var(--accent); }
.file-drop.is-over .file-drop__zone,
.file-drop.is-over .file-drop__zone:hover{ border-color:var(--accent); background:var(--surface); }
.file-drop.has-file .file-drop__zone{ display:none; }
.file-drop__icon{
width:40px; height:40px; border-radius:10px; background:var(--surface);
border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.file-drop__text{ font-size:13px; color:var(--muted); max-width:240px; }
.file-drop__hint{ font-size:11px; color:var(--muted-2); }
/* Состояние «файл выбран» — превью с кнопками «Заменить»/«Удалить». */
.file-drop__preview{
display:none; align-items:center; gap:14px;
border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:12px 14px;
}
.file-drop.has-file .file-drop__preview{ display:flex; }
.file-drop__preview img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.file-drop__preview .file-drop__info{ flex:1; min-width:0; }
.file-drop__preview .file-drop__name{ font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop__preview .file-drop__meta{ font-size:12px; color:var(--muted); }
.file-drop__replace{
background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
padding:6px 12px; font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer;
}
.file-drop__clear{
background:transparent; border:none; cursor:pointer; color:var(--muted); padding:4px;
display:flex; align-items:center; justify-content:center;
}
.file-drop__error{ display:block; font-size:12px; color:var(--alert); margin-top:8px; }
.file-drop__error[hidden]{ display:none; }
/* ── Быстрые теги hero ─────────────────────────────────────────────── */
.quick-tag{
padding:9px 16px; background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-full); font-size:13.5px; font-weight:500; color:var(--ink-2);
cursor:pointer; transition:border-color .15s, color .15s; text-decoration:none;
}
.quick-tag:hover{ border-color:var(--accent); color:var(--ink); }
/* ── Каталог: табы ─────────────────────────────────────────────────── */
.cat-tabs{
display:inline-flex; gap:4px; padding:4px; margin-bottom:28px; flex-wrap:wrap;
background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
}
.cat-tabs button{
height:44px; padding:0 22px; border-radius:var(--r-md); border:none; cursor:pointer;
font-family:var(--font-display); font-weight:600; font-size:15px;
background:transparent; color:var(--muted);
transition:background .15s, color .15s;
}
.cat-tabs button.is-active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
/* ── Панель фильтра ────────────────────────────────────────────────── */
.flt-section-title{ font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px; }
.flt-divider{ height:1px; background:var(--line); margin:20px 0; }
/* Селекты позиций знака (Буква/цифры) — крупные центрированные символы,
как LetterDigitFilter в оригинале (catalog.jsx): fontSize 20, Oswald,
без шеврона, фон var(--surface-2). */
.flt-positions{ display:flex; gap:4px; }
.flt-pos{
position:relative; display:flex; align-items:center; justify-content:center;
flex:1; min-width:0; height:48px; margin-left:0;
border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2);
color:var(--ink); font-size:20px;
transition:border-color .12s, box-shadow .12s, background .12s;
}
.flt-pos.is-lead{ margin-left:6px; }
.flt-pos:focus-within{ border-color:var(--accent); box-shadow:var(--ring); background:var(--surface); }
.flt-pos select{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
border:none; background:transparent; width:100%; height:100%;
text-align:center; text-align-last:center;
font-family:'Oswald','Roboto Condensed',sans-serif; font-weight:500; font-size:20px;
color:var(--ink); outline:none; cursor:pointer; padding:0;
}
.flt-pos select option{ font-family:inherit; }
/* Пустое значение (*) — приглушённое, как placeholder оригинала (#BDBAB2) */
.flt-pos select:invalid,
.flt-pos select.has-empty{ color:var(--muted-2); }
.flt-tags{ display:flex; flex-direction:column; gap:11px; }
.flt-tag{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none; font-size:14px; color:var(--ink-2); line-height:1.45; }
.flt-tag input{ position:absolute; opacity:0; width:0; height:0; } /* скрываем нативный, рисуем кастомный */
.flt-tag .flt-tag__box{
flex:none; width:18px; height:18px; border-radius:var(--r-sm); margin-top:0;
background:var(--surface); border:1.5px solid var(--line);
display:flex; align-items:center; justify-content:center;
color:var(--accent-ink); font-size:11px; line-height:1;
transition:background .12s, border-color .12s;
}
.flt-tag input:checked ~ .flt-tag__box{ background:var(--accent); border-color:var(--accent); }
.flt-tag input:checked ~ .flt-tag__box::after{ content:'✓'; }
.flt-tag:hover .flt-tag__box{ border-color:var(--accent); }
.flt-tag:focus-within .flt-tag__box{ border-color:var(--accent); box-shadow:var(--ring); }
.flt-region{
flex:1; height:40px; border-radius:var(--r-md); cursor:pointer;
font-family:var(--font-mono); font-weight:600; font-size:14px;
background:var(--surface); color:var(--ink-2); border:1px solid var(--line);
}
.flt-region.is-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* Чипы активных фильтров + «сбросить всё» */
.active-filters{ display:none; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px; }
.active-filters.is-show{ display:flex; }
.flt-lead{ font-size:13px; color:var(--muted); margin-right:2px; }
.flt-chip{
display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 6px 0 13px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full);
font-size:13px; font-weight:500; color:var(--ink-2);
}
.flt-chip__x{
display:flex; align-items:center; justify-content:center; width:20px; height:20px;
border-radius:var(--r-full); border:none; background:var(--surface-2); color:var(--muted); cursor:pointer; padding:0;
}
.flt-chip__x:hover{ background:var(--ink); color:#fff; }
.flt-reset{
display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px;
border-radius:var(--r-full); cursor:pointer;
background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
font-family:var(--font-display); font-weight:600; font-size:13px;
}
/* Селект-обёртка с шевроном — перенос ui.jsx Select */
.avto22-select{ position:relative; height:48px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); display:flex; align-items:center; transition:border-color .12s, box-shadow .12s; }
.avto22-select:focus-within{ border-color:var(--accent); box-shadow:var(--ring); background:var(--surface); }
.avto22-select select{ appearance:none; -webkit-appearance:none; border:none; background:transparent; width:100%; height:100%; padding:0 38px 0 14px; font-size:15px; color:var(--ink); font-family:var(--font-text); outline:none; cursor:pointer; }
.avto22-select__chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; display:flex; }
/* «Показать ещё» / «Пусто» */
.show-more{ display:none; }
.show-more.is-show{ display:inline-flex; }
.cat-empty{ display:none; }
.cat-empty.is-show{ display:block; }
/* Строки каталога: скрытие при фильтре/пагинации (но в DOM для индексации) */
.plate-row.flt-out{ display:none !important; }
.plate-row.pg-hidden{ display:none; }
.cat-pinned.is-empty{ display:none; }
/* ── Страница номера (single) ──────────────────────────────────────── */
.sp-hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:start; }
.sp-hero > *{ min-width:0; }
.sp-photo{
position:relative; min-height:320px; padding:36px;
background:linear-gradient(180deg,#ECEAE3 0%,#DDD9CF 100%);
border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.sp-photo__decor{ position:absolute; inset:0; opacity:0.25; background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(0,0,0,0.04) 44px 46px); }
.sp-photo__plate{ width:100%; display:flex; justify-content:center; position:relative; }
.sp-photo__plate > div{ max-width:100%; }
.sp-similar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
/* Карточка похожего номера (перенос plate.jsx PlateCard) */
.similar-card{
background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
overflow:hidden; display:flex; flex-direction:column; text-align:left; text-decoration:none;
color:inherit; transition:box-shadow .18s, transform .18s, border-color .18s;
}
.similar-card,
.similar-card *{ text-decoration:none; } /* сброс */
.similar-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); border-color:#DAD7CF; }
.similar-card__photo{
position:relative; aspect-ratio:4/3; background:linear-gradient(180deg,#ECEAE3 0%,#DDD9CF 100%);
display:flex; align-items:center; justify-content:center; padding:22px; overflow:hidden;
}
.similar-card__info{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.similar-card__code{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0.06em; }
.similar-card__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line-2); }
.similar-card__price{ font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.similar-card__city{ font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
/* ── Toast ─────────────────────────────────────────────────────────── */
.avto22-toast{
position:fixed; left:0; right:0; bottom:28px; z-index:300;
display:none; align-items:center; justify-content:center; pointer-events:none; padding:0 16px;
}
.avto22-toast.is-show{ display:flex; }
#avto22-toast > span + div{
display:flex; align-items:center; gap:14px; max-width:min(440px,100%);
background:var(--ink); color:#fff; padding:14px 18px; border-radius:var(--r-md);
box-shadow:0 16px 48px rgba(0,0,0,0.28); pointer-events:auto;
}
.avto22-toast__ico{ flex:none; width:30px; height:30px; border-radius:var(--r-full); background:var(--success); display:flex; align-items:center; justify-content:center; }
.avto22-toast__title{ font-weight:600; font-size:14px; }
.avto22-toast__text{ font-size:13px; color:rgba(255,255,255,0.7); margin-top:2px; }
/* ── Адаптив SSR-блоков ────────────────────────────────────────────── */
@media (max-width:960px){
.catalog-layout{ grid-template-columns:1fr !important; }
.catalog-layout > aside{ position:static !important; }
.hero2-grid{ grid-template-columns:1fr !important; gap:36px; }
}
@media (max-width:860px){
.contacts-grid{ grid-template-columns:1fr !important; }
.sp-hero{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:1080px){ .sp-similar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
.form-2col, .form-3col{ grid-template-columns:1fr !important; }
.sp-similar-grid{ grid-template-columns:minmax(0,1fr) !important; }
.catalog-head{ flex-direction:column; align-items:flex-start !important; }
.catalog-head > div{ width:100% !important; }
}
@media (max-width:600px){
.sp-photo{ padding:22px; min-height:0; }
}
@media (max-width:920px){
.nav-desktop{ display:none !important; }
.nav-mobile-btn{ display:flex !important; }
}
/* ── SEO-блоки (v3.1.0): преимущества, FAQ ─────────────────────────── */
.features__grid { gap: 18px; }
.features__item { transition: border-color .2s ease; }
.features__item:hover { border-color: var(--gold); }
.faq__item {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 0;
overflow: hidden;
transition: border-color .2s ease;
}
.faq__item[open] { border-color: var(--gold); }
.faq__q {
cursor: pointer;
list-style: none;
padding: 20px 24px;
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
color: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: "";
flex: none;
width: 9px; height: 9px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform .2s ease;
margin-right: 4px;
}
.faq__item[open] .faq__q::after { transform: rotate(225deg); margin-top: 5px; }
.faq__a {
padding: 0 24px 22px;
font-size: 14.5px;
line-height: 1.6;
color: var(--muted);
}
.seo-about__text p,
.seo-text__body p { margin: 0 0 14px; }
.seo-about__text p:last-child,
.seo-text__body p:last-child { margin-bottom: 0; }
/* ── SEO collapse (v3.2.0): сворачиваемые «О площадке» и SEO-текст ────
Текст всегда в HTML (индексируется). Без JS (.no-js) — развёрнут.
С JS (.js) сворачивается до 0; JS выставляет max-height=scrollHeight. */
.seo-collapse { overflow: hidden; transition: max-height .3s ease; }
.no-js .seo-collapse { max-height: none; }
.js .seo-collapse:not(.is-open) { max-height: 0; }
.seo-toggle {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px; padding: 10px 18px;
background: transparent; border: 1px solid var(--line);
border-radius: var(--r-full); color: var(--ink);
font-family: var(--font-display); font-weight: 600; font-size: 14px;
cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.seo-toggle:hover { border-color: var(--gold); color: var(--gold); }
.seo-toggle svg { width: 16px; height: 16px; transition: transform .25s ease; }
.seo-toggle.is-open svg { transform: rotate(180deg); }
/* Кнопка нужна только при JS (без JS текст и так развёрнут). */
.no-js .seo-toggle { display: none; }
/* ── Страница номера: шаги «Как купить» (v3.1.0) ───────────────────── */
.sp-step {
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 22px;
}
.sp-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
margin-bottom: 14px;
}
.sp-step__t {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
margin: 0 0 8px;
color: var(--ink);
}
.sp-step__d {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
@media (max-width: 860px) { .sp-steps { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .sp-steps { grid-template-columns: 1fr !important; } }
@media (max-width: 860px) {
.features__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.features__grid { grid-template-columns: 1fr !important; }
}