/* ============================================================
   Autoportal frontend — page styles (mobile-first)
   Зависит от theme.css (токены + reset + container).
   ============================================================ */

/* ─────  TOPBAR (dark utility bar)  ───── */
.topbar {
    background: var(--color-ink-950);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--text-xs);
    line-height: 1.2;
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.topbar-links {
    display: none;          /* hidden on mobile, shown ≥640 */
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.topbar-links a {
    color: rgba(255, 255, 255, 0.65);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.topbar-links a:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.06); }
.topbar-cta { color: var(--color-accent-500) !important; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}
.topbar-live {
    display: none;            /* mobile: hidden */
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.topbar-live::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success-500);
    animation: ap-pulse 2s ease-in-out infinite;
}
@keyframes ap-pulse {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; box-shadow: 0 0 0 4px rgba(0, 163, 108, .2); }
}

.lang-switch {
    display: inline-flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    padding: 2px;
}
.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .06em;
    min-height: 28px;
    text-decoration: none;
    line-height: 1;
}
.lang-btn:hover { text-decoration: none; }
.lang-btn.is-active {
    background: var(--color-accent-500);
    color: var(--color-ink-950);
}

@media (min-width: 640px) {
    .topbar-links { display: flex; }
    .topbar-live  { display: inline-flex; }
}


/* ─────  HEADER (sticky на десктопе)  ───── */
.site-header {
    background: var(--surface-base);
    border-bottom: 1px solid var(--border-subtle);
    /* position нужен и без sticky: без него z-index не работает и
       раскрытое бургер-меню уезжает под контент страницы. */
    position: relative;
    z-index: 50;
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 64px;
    position: relative;
}

/* Logo (works on light and dark via modifiers) */
.logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
/* Высота задаётся здесь, ширина считается сама: пропорции знака не наши,
   чтобы их подгонять. Атрибуты width/height в разметке оставлены ради
   резерва места — без них шапка дёргается, пока грузится картинка. */
.logo img {
    display: block;
    height: 26px;
    width: auto;
}

/* Burger button (mobile only) */
.header-burger {
    margin-left: auto;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--radius-sm);
}
.header-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-ink-900);
    border-radius: 2px;
    transition: transform var(--duration-base), opacity var(--duration-base);
}
.header-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header-burger.is-open span:nth-child(2) { opacity: 0; }
.header-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav (drawer) */
.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--surface-base);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) 0;
}
.site-nav.is-open { display: block; }
.site-nav-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.site-nav-link {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
    min-height: 44px;
}
.site-nav-link:hover { background: var(--color-ink-100); }
.site-nav-link.is-active { color: var(--color-brand-500); background: var(--color-brand-50); }

@media (min-width: 1024px) {
    /* На мобильном шапка едет со страницей: экран низкий, и 64px липкой
       панели забирают у чтения заметную долю, а меню и так в бургере. */
    .site-header { position: sticky; top: 0; }

    .site-header-inner { gap: var(--space-8); min-height: 72px; }
    .logo img { height: 32px; }

    .header-burger { display: none; }

    .site-nav {
        display: block !important;
        position: static;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        flex: 1;
    }
    .site-nav-list {
        flex-direction: row;
        gap: 2px;
        padding: 0;
        flex-wrap: wrap;
    }
    .site-nav-link {
        min-height: 0;
        padding: 7px 12px;
        font-size: var(--text-sm);
    }
}

body.has-nav-open { overflow: hidden; }
@media (min-width: 1024px) {
    body.has-nav-open { overflow: auto; }
}


/* ─────  SECTION HEAD (kicker + h2 + see-all)  ───── */
.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.section-head .kicker {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-brand-500);
    letter-spacing: .12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.section-head .kicker::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--color-brand-500);
}
.section-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}
.see-all {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    align-self: flex-start;
    min-height: 40px;
}
.see-all:hover { background: var(--color-ink-950); color: var(--color-white); border-color: var(--color-ink-950); }

@media (min-width: 768px) {
    .section-head {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        gap: var(--space-4);
    }
    .section-head h2 { font-size: var(--text-3xl); }
    .see-all { align-self: auto; }
}

/* ─────  PAGE SECTIONS  ───── */
.section {
    padding: var(--space-10) 0;
}
@media (min-width: 1024px) {
    .section { padding: var(--space-16) 0; }
}

/* placeholder card for «soon» content */
.soon-card {
    background: var(--surface-base);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--text-secondary);
}
.soon-card strong {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--text-md);
}
.soon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .soon-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (min-width: 1024px) {
    .soon-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─────  FOOTER  ───── */
.site-footer {
    background: var(--color-ink-950);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-12) 0 var(--space-6);
    margin-top: var(--space-6);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}
.footer-brand .logo { margin-bottom: var(--space-4); }
.footer-brand .logo img { height: 34px; }
/* Поиск в подвале: фон тёмный, поэтому поле рисуем осветлением, а не рамкой —
   рамка на ink-950 читается как щель, а не как поле ввода. */
.footer-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 14px;
    max-width: 420px;
}
.footer-search:focus-within { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.footer-search svg { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; }
.footer-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-white);
    font-family: inherit;
    font-size: var(--text-sm);
}
.footer-search input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-search button {
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand-500);
    color: var(--color-white);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
}
.footer-search button:hover { background: var(--color-brand-600); }
.footer-intro {
    font-size: var(--text-sm);
    line-height: 1.6;
    max-width: 360px;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}
.footer-col-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--color-white);
    margin: 0 0 var(--space-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--text-sm);
    padding: 6px 0;
    display: inline-block;
    min-height: 32px;
    line-height: 1.4;
}
.footer-links a:hover { color: var(--color-white); }

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--text-xs);
}
.footer-copy { color: rgba(255, 255, 255, 0.55); }
.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.footer-legal a {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--text-xs);
}
.footer-legal a:hover { color: var(--color-white); }

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: var(--space-8);
    }
    .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    }
    .footer-brand { grid-column: auto; }
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ─────  ERROR PAGE  ───── */
.error-page { text-align: center; padding: var(--space-8) 0 var(--space-12); }
.error-code { font-size: var(--text-6xl); font-weight: 700; color: var(--color-ink-300); margin: 0; line-height: 1; }
.error-title { margin: var(--space-4) 0 var(--space-3); }
.error-text  { color: var(--text-secondary); max-width: 480px; margin: 0 auto var(--space-6); }
.error-cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 12px 24px; min-height: 44px;
    background: var(--color-brand-500); color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: 600; font-size: var(--text-sm);
    transition: background var(--duration-base);
}
.error-cta:hover { background: var(--color-brand-600); }

/* ─────  BLOG (слайс 1, plan-frontend.md §4)  ───── */

/* Хлебные крошки */
.breadcrumbs { padding-top: var(--space-4); }
/* Одна строка и обрезка: путь — это ориентир, а не контент. Второй строкой он
   на мобильном отъедал место у заголовка, а перенос длинного последнего пункта
   ещё и растягивал страницу по горизонтали. */
.breadcrumbs-list {
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2);
    list-style: none; margin: 0; padding: 0;
    font-size: var(--text-xs); color: var(--text-muted);
    overflow: hidden;
}
.breadcrumbs-list li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 0 0 auto; }
.breadcrumbs-list li + li::before { content: '/'; color: var(--color-ink-300); }
.breadcrumbs-list a { color: var(--text-secondary); transition: color var(--duration-base); }
.breadcrumbs-list a:hover { color: var(--color-brand-500); }
.breadcrumbs-list span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
/* Текущая страница — единственный пункт, которому разрешено сжиматься:
   обрезка приходится на неё и заканчивается многоточием, а не рубленым
   краем контейнера. */
.breadcrumbs-list li:last-child { flex: 0 1 auto; }
.breadcrumbs-list li:last-child span { min-width: 0; max-width: 100%; }

/* Заголовок секции листинга */
.blog-section { padding-top: var(--space-6); padding-bottom: var(--space-12); }
.section-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
    margin-bottom: var(--space-6); padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-ink-950);
}
.section-title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0; }
.section-meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* Палитра рубрик: бейджи карточек + точки табов (CategoryColor::classFor) */
.cat-c0 { background: var(--color-brand-500); }
.cat-c1 { background: var(--color-success-500); }
.cat-c2 { background: var(--color-secondary-500); }
.cat-c3 { background: #6D28D9; }
.cat-c4 { background: var(--color-accent-700); }
.cat-c5 { background: var(--color-ink-950); }

/* Градиенты-заглушки медиа без обложки (по id материала) */
.a-media-fallback.grad-0 { background: linear-gradient(135deg, #18181b, #475569); }
.a-media-fallback.grad-1 { background: linear-gradient(135deg, #064e3b, #10b981); }
.a-media-fallback.grad-2 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.a-media-fallback.grad-3 { background: linear-gradient(135deg, #581c87, #a855f7); }
.a-media-fallback.grad-4 { background: linear-gradient(135deg, #7c2d12, #f97316); }
.a-media-fallback.grad-5 { background: linear-gradient(135deg, #0c4a6e, #0ea5e9); }

/* Аватар-инициалы автора */
.avatar {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: var(--color-brand-500); color: var(--color-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 10px;
}
/* Фото персоны в том же кружке: пропорции не тянем, режем по центру —
   аватары приходят произвольного соотношения (940×788 у первых заведённых). */
img.avatar { object-fit: cover; }

/* Шапка листинга (дизайн: page-head) */
.page-head { background: var(--color-ink-50); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-6); }
.page-head .breadcrumbs { padding-top: var(--space-4); }
.ph-title { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-4); }
/* Счётчик — сосед h1, а не его часть: заголовок для поисковика должен быть
   смысловым («Автоновини»), без «11 127 матеріалів» внутри (аудит SEO
   2026-08-15). Визуально остаётся там же — inline рядом с заголовком. */
.ph-h1 {
    display: inline; font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-3xl); letter-spacing: -0.025em; line-height: 1.05; margin: 0;
}
@media (min-width: 768px) { .ph-h1 { font-size: var(--text-4xl); } }
.ph-count {
    display: inline-block; vertical-align: super; margin-left: var(--space-2);
    padding: 4px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
    background: var(--surface-base); color: var(--text-muted);
    font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0;
    white-space: nowrap;
}
.ph-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.5; margin: var(--space-2) 0 0; max-width: 560px; }

/* Hero-карточка витрины (дизайн: feat-card) */
.featured { padding-top: var(--space-8); }
.feat-card {
    display: grid; grid-template-columns: 1fr; overflow: hidden;
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
    color: var(--text-primary); transition: box-shadow var(--duration-base);
}
.feat-card:hover { box-shadow: var(--shadow-md); }
@media (min-width: 1024px) { .feat-card { grid-template-columns: 1.3fr 1fr; } }
.feat-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-ink-100); }
.feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-media .a-cat { top: var(--space-4); left: var(--space-4); }
.feat-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
@media (min-width: 1024px) { .feat-body { padding: var(--space-8) var(--space-10); } }
.feat-eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: 11px; font-weight: 700; color: var(--color-brand-500);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.feat-eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--color-brand-500); }
.feat-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.02em;
}
@media (min-width: 1024px) { .feat-title { font-size: var(--text-2xl); } }
.feat-card:hover .feat-title { color: var(--color-brand-500); }
.feat-excerpt { font-size: 15px; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.feat-meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding-top: var(--space-4); border-top: 1px solid var(--border-subtle);
}
.feat-meta .avatar { width: 36px; height: 36px; font-size: 13px; }
.feat-meta .a-author { font-size: var(--text-sm); }

/* Табы категорий (дизайн: cat-tabs) */
.cat-tabs {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    padding: var(--space-6) 0 var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.cat-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; min-height: 36px;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--surface-base); color: var(--text-primary);
    font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: all var(--duration-fast);
}
.cat-tab:hover { border-color: var(--border-strong); background: var(--color-ink-50); }
.cat-tab.is-active { background: var(--color-ink-950); border-color: var(--color-ink-950); color: var(--color-white); }
.cat-tab .dot { width: 6px; height: 6px; border-radius: 50%; }
.cat-tab .num { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: 2px; }
.cat-tab.is-active .num { color: rgba(255, 255, 255, 0.5); }

/* Лейаут ленты: mobile — колонка, десктоп — грид + сайдбар */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-16); }
@media (min-width: 1024px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); } }

.article-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }

/* Карточка материала (дизайн: a-card) */
.a-card {
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: all var(--duration-base);
}
.a-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-ink-300); }
.a-card-link { display: flex; flex-direction: column; flex: 1; color: var(--text-primary); }
.a-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-ink-100); }
.a-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-base); }
.a-card-link:hover .a-media img { transform: scale(1.03); }
.a-cat {
    position: absolute; top: var(--space-3); left: var(--space-3);
    padding: 5px 10px; border-radius: var(--radius-xs);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-white);
}
.a-readtime {
    position: absolute; bottom: var(--space-3); right: var(--space-3);
    padding: 4px 8px; border-radius: var(--radius-xs);
    background: rgba(10, 15, 28, 0.7); color: var(--color-white);
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.a-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; }
.a-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-md); line-height: 1.3; letter-spacing: -0.015em;
}
.a-card-link:hover .a-title { color: var(--color-brand-500); }
.a-excerpt { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.a-meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding-top: var(--space-3); margin-top: auto;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs); color: var(--text-muted);
}
.a-author { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-weight: 500; min-width: 0; }
/* Подпись в одну строку: «Анна Ткач» ломалась пополам и растила карточку
   на строку, а ряд карточек — на всю эту строку разом. */
.a-author-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a-stats { display: flex; align-items: center; gap: var(--space-3); font-size: 11px; white-space: nowrap; }
.a-stats span, .a-stats time { display: inline-flex; align-items: center; gap: 4px; }
.a-stats svg { width: 12px; height: 12px; }
.blog-empty { color: var(--text-muted); padding: var(--space-8) 0; }

/* Сайдбар листинга (дизайн: side-block / trending) */
.blog-sidebar { display: flex; flex-direction: column; gap: var(--space-6); align-self: start; }
.side-block { background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.side-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; margin: 0; }
.trending { display: flex; flex-direction: column; }
.trend-item { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); color: var(--text-primary); }
.trend-item:first-child { border-top: 0; padding-top: 0; }
.trend-item:last-child { padding-bottom: 0; }
.trend-num { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.04em; color: var(--color-ink-300); }
.trend-item:hover .trend-num { color: var(--color-brand-500); }
.trend-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.35; letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.trend-item:hover .trend-title { color: var(--color-brand-500); }
.trend-meta { display: inline-flex; gap: var(--space-3); font-size: 11px; color: var(--text-muted); }
.trend-meta span { display: inline-flex; align-items: center; gap: 4px; }
.trend-meta svg { width: 11px; height: 11px; }

/* Пагинация (дизайн: pagination) */
.pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
    margin-top: var(--space-8); padding-top: var(--space-8);
    border-top: 1px solid var(--border-subtle);
}
.pg-info { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.pg-info b { color: var(--text-primary); font-weight: 700; }
.pg-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-pages a, .pg-cur, .pg-gap, .pg-nav {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 38px; min-height: 38px; padding: 0 var(--space-3);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    background: var(--surface-base); color: var(--text-primary);
    font-size: 13px; font-weight: 600;
    transition: all var(--duration-fast);
}
.pg-pages a:hover { border-color: var(--color-ink-950); background: var(--color-ink-50); }
.pg-cur { background: var(--color-ink-950); color: var(--color-white); border-color: var(--color-ink-950); }
.pg-gap { border: 0; background: transparent; color: var(--text-muted); }
.pg-nav[aria-disabled='true'] { opacity: 0.3; }
.pg-pages svg { width: 14px; height: 14px; }

.article-source { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-8); }
/* Типографика тела материала (дизайн: .article) */
.rich-text { font-size: 17px; line-height: 1.75; color: var(--text-primary); }
.rich-text p { margin: 0 0 var(--space-5); }
.rich-text h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.02em;
    margin: var(--space-10) 0 var(--space-4); scroll-margin-top: 96px;
}
.rich-text h3 {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em;
    margin: var(--space-8) 0 var(--space-3);
}
.rich-text img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-6) 0; }

/* Embed-врізки в тілі матеріалу (YouTube, TikTok, Instagram, X…).
   Ширина завжди 100% контейнера: embed-коди приходять із фіксованими
   width/height, і на мобільному вилазили б за екран. Вертикальні формати
   (TikTok/Reels) — 9:16 і по центру, решта — 16:9. */
.rich-text iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
}
.rich-text iframe[src*="tiktok.com"],
.rich-text iframe[src*="instagram.com"] {
  aspect-ratio: 9 / 16;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* Соц-embed як blockquote+widget-скрипт: скрипт сам підміняє блок на свій
   iframe, до того часу тримаємо блок по центру й без «голого» вигляду цитати. */
.rich-text .tiktok-embed,
.rich-text .instagram-media,
.rich-text .twitter-tweet {
  margin: var(--space-6) auto;
  max-width: 605px;
}
.rich-text a { color: var(--color-secondary-500); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rich-text a:hover { color: var(--color-secondary-700); }
.rich-text strong, .rich-text b { font-weight: 700; color: var(--color-ink-950); }
.rich-text ul, .rich-text ol { margin: 0 0 var(--space-6); padding-left: 0; list-style: none; }
.rich-text li { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-8); line-height: 1.6; }
.rich-text ul li::before {
    content: ''; position: absolute; left: 6px; top: 15px;
    width: 8px; height: 8px; background: var(--color-brand-500);
    border-radius: 2px; transform: rotate(45deg);
}
.rich-text ol { counter-reset: rt-ol; }
.rich-text ol li { counter-increment: rt-ol; }
.rich-text ol li::before {
    content: counter(rt-ol, decimal-leading-zero); position: absolute; left: 0; top: 7px;
    font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--color-brand-500);
}
.rich-text blockquote {
    margin: var(--space-8) 0; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
    background: var(--color-ink-50); border-left: 4px solid var(--color-brand-500);
    border-radius: var(--radius-lg); position: relative;
}
.rich-text blockquote::before {
    content: '\201C'; position: absolute; top: 0; left: 14px;
    font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 1;
    color: var(--color-brand-500);
}
.rich-text blockquote p { font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; line-height: 1.4; color: var(--color-ink-950); margin: 0; }
.rich-text table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-sm); }
.rich-text td, .rich-text th { border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); }
.rich-text th { background: var(--color-ink-50); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }

/* ─────  Разворот материала (дизайн: article.html)  ───── */

/* Прогресс чтения */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress-bar { height: 100%; width: 0; background: var(--color-brand-500); }

/* Шапка статьи — живёт в левой колонке, сайдбар идёт по всей высоте */
.art-head { padding-bottom: var(--space-2); }
.art-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.art-cat {
    display: inline-flex; align-items: center; padding: 6px 12px;
    border-radius: var(--radius-xs); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--color-white);
}
.eyebrow-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.art-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.03em;
    margin: 0 0 var(--space-4); text-wrap: balance;
}
@media (min-width: 768px)  { .art-title { font-size: var(--text-3xl); } }
@media (min-width: 1024px) { .art-title { font-size: var(--text-4xl); line-height: 1.08; } }
.art-deck { font-size: var(--text-md); line-height: 1.55; color: var(--text-secondary); margin: 0 0 var(--space-5); max-width: 820px; }
@media (min-width: 768px) { .art-deck { font-size: 19px; } }

.art-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-5); }
.art-tag {
    font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary);
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--color-ink-50); border: 1px solid var(--border-subtle);
}
.art-tag::before { content: '#'; opacity: .5; margin-right: 1px; }

.art-meta-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
    /* Стоїть одразу під заголовком — тримає повітря до анонсу. */
    margin: 0 0 var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
}
.author-card { display: flex; align-items: center; gap: var(--space-3); }
.avatar-lg { width: 44px; height: 44px; font-size: var(--text-sm); }
.avatar-xl { width: 72px; height: 72px; font-size: var(--text-xl); }
@media (min-width: 768px) { .avatar-xl { width: 96px; height: 96px; font-size: var(--text-3xl); } }
.author-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; }
.author-role { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.meta-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: 13px; color: var(--text-muted); }
.meta-stats .stat { display: inline-flex; align-items: center; gap: 6px; }
.meta-stats .stat svg { width: 15px; height: 15px; }
.meta-stats .stat b { color: var(--text-primary); font-weight: 600; }
.meta-stats .stat.date { font-family: var(--font-mono); font-size: var(--text-xs); }

/* Hero-обложка (в колонке текста) */
.hero-wrap { padding: var(--space-4) 0 var(--space-6); }
.hero { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-ink-100); }
.hero img { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) { .hero { aspect-ratio: 16 / 9; } .hero img { height: 100%; object-fit: cover; } }
.hero-cap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
    color: rgba(255, 255, 255, 0.85); font-size: var(--text-xs);
}
.hero-cap .src { font-family: var(--font-mono); color: rgba(255, 255, 255, 0.7); }

/* Лейаут: текст + правая колонка */
.art-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-top: var(--space-4); padding-bottom: var(--space-12); align-items: start; }
@media (min-width: 1024px) { .art-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); } }

/* Правая колонка: sticky «Зміст» + блоки */
.toc-sticky { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1024px) { .toc-sticky { position: sticky; top: 96px; } }
/* «Зміст» — карточка в колонке текста, сразу под hero-обложкой */
.toc { background: var(--color-ink-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); }
.toc-head {
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 var(--space-3);
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--space-2);
    padding: 7px 0 7px 10px; margin-left: -10px;
    font-size: 13px; line-height: 1.4; color: var(--text-secondary);
    border-left: 2px solid transparent; transition: all var(--duration-fast);
}
.toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono); font-weight: 700; font-size: 10px;
    color: var(--color-ink-300); padding-top: 2px;
}
.toc a:hover { color: var(--color-ink-950); border-left-color: var(--color-ink-300); }
.toc a.active { color: var(--color-brand-500); border-left-color: var(--color-brand-500); font-weight: 600; }
.toc a.active::before { color: var(--color-brand-500); }

/* Низ статьи: шер, био автора, prev/next */
.art-footer { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.share-row {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill); background: var(--surface-base);
}
.share-row .lbl { font-size: 11px; color: var(--text-muted); padding: 0 var(--space-2) 0 var(--space-3); }
.share-row a, .share-row button {
    width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent;
    color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--duration-fast);
}
.share-row a:hover, .share-row button:hover { background: var(--color-ink-950); color: var(--color-white); }
.share-row svg { width: 14px; height: 14px; }
.share-row button.is-copied { background: var(--color-success-500); color: var(--color-white); }

.author-bio {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
    padding: var(--space-6); margin-top: var(--space-6);
    background: var(--color-ink-50); border-radius: var(--radius-xl);
}
.author-bio h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-1); letter-spacing: -0.01em; }
.author-bio .bio-role { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-3); }
.author-bio .bio-text { font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); margin: 0 0 var(--space-3); }
.author-bio .bio-stats { display: flex; gap: var(--space-5); font-size: var(--text-xs); color: var(--text-muted); }
.author-bio .bio-stats b { display: block; color: var(--text-primary); font-family: var(--font-display); font-weight: 700; font-size: 15px; }

.pn-nav { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-8); }
@media (min-width: 768px) { .pn-nav { grid-template-columns: 1fr 1fr; } }
.pn-card {
    display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); align-items: center;
    padding: var(--space-4); background: var(--surface-base);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    color: var(--text-primary); transition: all var(--duration-base);
}
.pn-card.next { grid-template-columns: 1fr 80px; text-align: right; }
.pn-card.next .pn-thumb { order: 2; }
.pn-card:hover { border-color: var(--color-ink-950); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pn-thumb { display: block; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--color-ink-100); }
.pn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-label { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; }
.pn-card-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.3; letter-spacing: -0.01em; margin-top: var(--space-2); }
.pn-card:hover .pn-card-title { color: var(--color-brand-500); }

/* Секции «Рекомендуємо» внизу разворота */
.recommended { padding: var(--space-10) 0 var(--space-12); background: var(--color-ink-50); border-top: 1px solid var(--border-subtle); }
.recommended + .recommended { border-top: 0; padding-top: 0; }
.rec-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.rec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); letter-spacing: -0.02em; margin: 0; }
.rec-head a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--surface-base); font-size: 13px; font-weight: 600; color: var(--text-primary);
    transition: all var(--duration-fast);
}
.rec-head a:hover { background: var(--color-ink-950); color: var(--color-white); border-color: var(--color-ink-950); }
.rec-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px)  { .rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rec-grid { grid-template-columns: repeat(4, 1fr); } }
.rec-grid .a-excerpt { display: none; }

/* Блок «Про це авто» в сайдбаре разворота */
.car-name {
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
    letter-spacing: -0.01em; margin-bottom: var(--space-4);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle);
}
.car-links { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.car-link {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) 0; font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.car-link svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.car-link b {
    margin-left: auto; font-weight: 600; font-size: 10px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
    padding: 2px 8px; border: 1px dashed var(--border-default); border-radius: var(--radius-pill);
}
.car-link.is-stub { color: var(--text-muted); cursor: default; }
a.car-link:hover { color: var(--color-brand-500); }
a.car-link:hover svg { color: var(--color-brand-500); }

/* Сайдбар: список категорий витрины со счётчиками */
.side-cats { display: flex; flex-direction: column; }
.side-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle);
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    transition: color var(--duration-fast);
}
.side-cats a:first-child { border-top: 0; }
.side-cats a:hover { color: var(--color-brand-500); }
.side-cats a.is-active { color: var(--color-brand-500); font-weight: 700; }
.side-cats .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* Сайдбар «#Статті» — мини-карточки (прод: small-news) */
.small-news { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--text-primary); }
.small-news-media {
    flex: 0 0 96px; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--color-ink-100);
}
.small-news-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.small-news-name { font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.small-news:hover .small-news-name { color: var(--color-brand-500); }

/* ─────  CATALOG (слайс 2a: бренды)  ───── */

/* Сетка брендов */
.brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding: var(--space-8) 0 var(--space-16); }
@media (min-width: 640px)  { .brand-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(5, 1fr); } }
.brand-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
    padding: var(--space-5) var(--space-3);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    color: var(--text-primary); transition: all var(--duration-base);
}
.brand-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-ink-300); }
.brand-logo { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-logo-letter {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-ink-100); color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: -0.01em; }
.brand-card:hover .brand-name { color: var(--color-brand-500); }
.brand-count { font-size: 11px; color: var(--text-muted); }

/* Сетка поколений на странице бренда */
.gen-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px)  { .gen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gen-grid { grid-template-columns: repeat(4, 1fr); } }
.gen-card .a-media { aspect-ratio: 16 / 10; }
.gen-card:hover .a-title { color: var(--color-brand-500); }
.gen-card .a-body { padding: var(--space-3) var(--space-4) var(--space-4); gap: var(--space-1); }
.gen-card .a-title { font-size: var(--text-sm); }
.gen-year { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.gen-status {
    position: absolute; top: var(--space-2); left: var(--space-2);
    padding: 4px 8px; border-radius: var(--radius-xs);
    background: rgba(10, 15, 28, 0.7); color: var(--color-white);
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.gen-grid-archive .a-media { opacity: .75; }

/* Вкладки поколения (прод: subnav) */
.gen-tabs { border-bottom: 1px solid var(--border-subtle); }
.cat-tab.is-soon { color: var(--text-muted); border-style: dashed; cursor: default; }
.cat-tab.is-soon .num { margin-left: 4px; }

/* Резюме модели (прод: model_resume): фото + факты */
.car-resume { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) 0 var(--space-2); }
@media (min-width: 1024px) { .car-resume { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: start; } }
.car-resume-media .a-media { aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden; display: block; position: relative; background: var(--color-ink-100); }
.car-resume-media .a-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car-resume-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
.strip-item { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-ink-100); display: flex; align-items: center; justify-content: center; }
.strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-more { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); color: var(--text-secondary); background: var(--color-ink-50); border: 1px dashed var(--border-default); }
.car-resume-facts { background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-5); }
.fact-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.fact-row:first-child { border-top: 0; }
.fact-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.fact-value { font-weight: 700; font-size: var(--text-sm); text-align: right; }
.fact-value a { color: var(--color-brand-500); }
.fact-value .fact-note { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); margin-left: var(--space-2); }

/* Ключевые плашки модификации (дизайн-кит: spec-row) */
.key-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); align-content: start; }
.key-spec { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-base); }
.key-spec-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: var(--space-1); }
.key-spec-value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }

/* Лого бренда в шапке (прод: brand_logo) */
.brand-page-logo {
    flex-shrink: 0; width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    padding: var(--space-2);
}
@media (min-width: 768px) { .brand-page-logo { width: 96px; height: 96px; padding: var(--space-3); } }
.brand-page-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* «Про бренд» — история производителя спойлером */
.brand-about { margin-top: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-base); }
.brand-about summary {
    padding: var(--space-4) var(--space-5); cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
    list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.brand-about summary::-webkit-details-marker { display: none; }
.brand-about summary::after { content: '+'; font-size: var(--text-lg); color: var(--text-muted); }
.brand-about[open] summary::after { content: '–'; }
.brand-about summary:hover { color: var(--color-brand-500); }
.brand-about-body { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); }
.brand-about-body h2 { font-size: var(--text-lg); margin-top: var(--space-6); }

/* «О бренде» + дилеры */
.brand-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-6); }
.brand-facts b { font-weight: 700; margin-left: 4px; }
a.brand-site:hover { border-color: var(--color-brand-500); color: var(--color-brand-500); }
.dealer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px)  { .dealer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dealer-grid { grid-template-columns: repeat(3, 1fr); } }
.dealer-card {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.dealer-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.dealer-city { font-size: var(--text-xs); font-weight: 600; color: var(--color-secondary-500); }
.dealer-addr { font-size: var(--text-xs); color: var(--text-secondary); }
.dealer-phone { font-size: var(--text-xs); color: var(--text-muted); }
/* Организации (слайс 7): карточка как ссылка — сброс link-стилей */
a.dealer-card { color: inherit; text-decoration: none; }
a.dealer-card:hover { border-color: var(--color-brand-500); }
/* Первый блок под шапкой страниц справочника (чипсы городов / грид города) — воздух сверху и снизу */
.org-cities { margin: var(--space-6) 0; }
/* Страница поиска: крупная форма */
.search-page-form { display: flex; gap: var(--space-2); max-width: 640px; }
.search-page-input {
    flex: 1; padding: var(--space-3) var(--space-4);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    font-size: var(--text-base); color: var(--text-primary);
}
.search-page-input:focus { outline: 2px solid var(--color-brand-500); outline-offset: -1px; }
.search-page-btn {
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand-500); color: #fff; border: 0; border-radius: var(--radius-lg);
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}
.search-page-btn:hover { filter: brightness(1.05); }

/* Соседние модификации */
.sibling-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sibling-item {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--surface-base); font-size: 13px; font-weight: 500; color: var(--text-primary);
    transition: all var(--duration-fast);
}
.sibling-item:hover { border-color: var(--color-ink-950); background: var(--color-ink-50); }
.sibling-item .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* Лейаут поколения: контент + сайдбар (цены/комплектации) */
.gen-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-6) 0 var(--space-12); align-items: start; }
@media (min-width: 1024px) { .gen-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); } }
/* Prices: галерея вужча, сайдбар з цінами ширший (як на проді) */
@media (min-width: 1024px) { .prices-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } }
.gen-grid-narrow, .rec-grid-narrow { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .gen-grid-narrow, .rec-grid-narrow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gen-grid-narrow, .rec-grid-narrow { grid-template-columns: repeat(3, 1fr); } }

/* Галерея-слайдер поколения: scroll-snap трек, свайпается на мобильном */
.gallery { position: relative; min-width: 0; }
.gallery-track {
    min-width: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    border-radius: var(--radius-xl); background: var(--color-ink-100);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { margin: 0; scroll-snap-align: center; aspect-ratio: 16 / 9; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-arrow {
    position: absolute; top: 0; bottom: 0; margin: auto 0; height: 44px; width: 44px;
    display: none; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(10, 15, 28, 0.55); color: var(--color-white);
    transition: background var(--duration-fast); z-index: 2;
}
.gallery-arrow:hover { background: rgba(10, 15, 28, 0.8); }
.gallery-arrow svg { width: 20px; height: 20px; }
.gallery-prev { left: var(--space-3); }
.gallery-next { right: var(--space-3); }
@media (min-width: 768px) { .gallery-arrow { display: inline-flex; } }
.gallery-counter {
    position: absolute; right: var(--space-3); top: var(--space-3);
    padding: 4px 10px; border-radius: var(--radius-pill);
    background: rgba(10, 15, 28, 0.6); color: var(--color-white);
    font-family: var(--font-mono); font-size: var(--text-xs); z-index: 2;
}
.gallery-thumbs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 88px;
    gap: var(--space-2); margin-top: var(--space-2);
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
    padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--color-ink-100); cursor: pointer;
    aspect-ratio: 4 / 3; opacity: .7; transition: all var(--duration-fast);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active { border-color: var(--color-brand-500); opacity: 1; }

/* Велика галерея на окремій сторінці фото (прод-паритет) */
.gallery-lg { margin: var(--space-6) 0; }
.gallery-lg .gallery-slide { aspect-ratio: 16 / 10; background: var(--color-ink-100); border-radius: var(--radius-md); overflow: hidden; }
.gallery-lg .gallery-slide img { object-fit: contain; background: var(--color-ink-50); }
.gallery-thumbs-top { margin: 0 0 var(--space-3); grid-auto-columns: 96px; }
@media (min-width: 768px) { .gallery-lg .gallery-slide { aspect-ratio: 16 / 9; } }

/* Особенности поколения — features.html (легаси-страница, живая на проде).
   Mobile-first: картинка над текстом, с планшета — колонкой слева. */
.feature-item {
    display: grid; gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-ink-100);
}
.feature-item:last-child { border-bottom: 0; }
.feature-media {
    margin: 0; border-radius: var(--radius-md); overflow: hidden;
    background: var(--color-ink-100);
}
.feature-media img { width: 100%; height: auto; display: block; }
.feature-body .section-title { margin: 0 0 var(--space-2); }
@media (min-width: 768px) {
    .feature-item { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
}

/* Фото-галерея поколения (2c) + лайтбокс */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 640px)  { .photo-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-item {
    padding: 0; border: 0; cursor: pointer;
    aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden;
    background: var(--color-ink-100);
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-base); }
.photo-item:hover img { transform: scale(1.04); }

/* `hidden` мусить перемагати: без цього рядка оверлей висить розкритим
   на кожній сторінці, де є лайтбокс (display у класі б'є UA-стиль [hidden]). */
.lightbox[hidden] { display: none; }
.lightbox {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 15, 28, 0.92);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
}
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--radius-md); }
.lightbox .gallery-arrow { display: inline-flex; }
.lightbox-close {
    position: absolute; top: var(--space-4); right: var(--space-4);
    width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.12); color: var(--color-white);
    font-size: var(--text-2xl); line-height: 1; z-index: 2;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

/* Видео (слайс 4) */
.video-card .a-media::after { content: ''; position: absolute; inset: 0; background: rgba(10, 15, 28, 0.12); transition: background var(--duration-fast); }
.video-card .a-card-link:hover .a-media::after { background: rgba(10, 15, 28, 0); }
.video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%; z-index: 1;
    background: rgba(10, 15, 28, 0.72); color: var(--color-white);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--duration-fast);
}
.video-play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-card .a-card-link:hover .video-play { background: var(--color-brand-500); transform: translate(-50%, -50%) scale(1.08); }
.video-player { border-radius: var(--radius-xl); overflow: hidden; background: var(--color-ink-950); aspect-ratio: 16 / 9; }
.video-player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Мёртвый YouTube (решение №6): плашка на месте плеера */
.video-player--dead { display: flex; align-items: center; justify-content: center; background: var(--surface-muted); padding: var(--space-6); }
.video-player--dead .blog-empty { margin: 0; text-align: center; }

/* Отзывы (2d) — карточка з відчутною ієрархією і кольоровим аватаром */
.review-list { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) 0 var(--space-12); }
.review-card {
    background: var(--surface-base); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: var(--space-6);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}
.review-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }
.review-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.review-head .avatar {
    width: 48px; height: 48px; font-size: var(--text-lg); color: var(--color-white);
    background: var(--color-brand-500); border: 0;
}
/* Кольоровий фон аватара за градієнтом-хешем імені автора */
.review-head .avatar.grad-0 { background: linear-gradient(135deg, #18181b, #475569); }
.review-head .avatar.grad-1 { background: linear-gradient(135deg, #064e3b, #10b981); }
.review-head .avatar.grad-2 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.review-head .avatar.grad-3 { background: linear-gradient(135deg, #581c87, #a855f7); }
.review-head .avatar.grad-4 { background: linear-gradient(135deg, #7c2d12, #f97316); }
.review-head .avatar.grad-5 { background: linear-gradient(135deg, #0c4a6e, #0ea5e9); }
.review-author { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--text-primary); }
.review-meta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.review-meta a { color: var(--color-secondary-500); font-weight: 600; }
.review-meta a:hover { color: var(--color-brand-500); }

/* Оцінки — сітка чипів */
.review-ratings {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px var(--space-3);
    margin: 0 0 var(--space-4); padding: var(--space-3);
    background: var(--color-ink-50); border-radius: var(--radius-md);
}
@media (min-width: 640px) { .review-ratings { grid-template-columns: repeat(4, 1fr); } }
.review-rating { display: flex; flex-direction: column; gap: 2px; }
.review-rating .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin: 0; }
.review-rating .stars { color: var(--color-warning-500); font-size: var(--text-sm); letter-spacing: 1px; }
.review-rating .stars-off { color: var(--color-ink-200); }

/* Плюси/мінуси — плашки з іконкою */
.review-pros, .review-cons {
    display: flex; gap: var(--space-2); margin: 0 0 var(--space-2);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    font-size: var(--text-sm); line-height: 1.55;
}
.review-pros { background: var(--color-success-50); color: var(--color-success-700); border-left: 3px solid var(--color-success-500); }
.review-cons { background: var(--color-danger-50); color: var(--color-danger-700); border-left: 3px solid var(--color-danger-500); }
.review-pros b, .review-cons b {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.review-pros b { background: var(--color-success-500); color: var(--color-white); }
.review-cons b { background: var(--color-danger-500); color: var(--color-white); }

.review-body {
    margin-top: var(--space-3); padding-left: var(--space-4);
    border-left: 3px solid var(--border-subtle);
    font-size: var(--text-base); line-height: 1.65; color: var(--text-primary);
}

/* Отзыв без текста: только оценки — карточка ужимается, чтобы список не
   выглядел как набор пустых блоков (таких 2 058 из 6 040). */
.review-card-compact { padding: var(--space-3) var(--space-4); }
.review-card-compact .review-head { margin-bottom: var(--space-2); }
.review-card-compact .review-head .avatar { width: 28px; height: 28px; font-size: var(--text-xs); }
.review-card-compact .review-ratings { margin-bottom: 0; gap: var(--space-1) var(--space-4); }
.review-no-text { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }

/* Фото автора отзыва (легаси comment_images) — компактнее галереи поколения. */
.review-photos { margin-top: var(--space-3); grid-template-columns: repeat(3, 1fr); max-width: 420px; }
.review-photos .photo-item { aspect-ratio: 1 / 1; }

/* Страница модельного ряда: плитка ссылок на другие модели марки. */
.model-line-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.model-line-list a {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--text-primary); background: var(--surface-base);
}
.model-line-list a:hover { border-color: var(--color-brand-500); color: var(--color-brand-600); }

/* Хаб отзывов /catalogue/comments.html (слайс 5) */
.hub-section { padding: var(--space-6) 0 0; }
.hub-section:last-child { padding-bottom: var(--space-12); }
.hub-h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.hub-section .review-list { padding: 0; }
.review-car {
    display: inline-block; font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-sm); color: var(--color-secondary-500); margin-bottom: var(--space-3);
}
.review-car:hover { color: var(--color-brand-500); }
.rev-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rev-top a {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4);
    align-items: center; padding: var(--space-3) var(--space-4);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    color: var(--text-primary);
}
.rev-top a:hover .rev-top-name { color: var(--color-brand-500); }
.rev-top-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.rev-top-n { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.rev-top-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--color-ink-100); overflow: hidden; }
.rev-top-fill { display: block; height: 100%; border-radius: 2px; background: var(--color-brand-500); }
.rev-top-fill.p0 { width: 2%; } .rev-top-fill.p10 { width: 10%; } .rev-top-fill.p20 { width: 20%; }
.rev-top-fill.p30 { width: 30%; } .rev-top-fill.p40 { width: 40%; } .rev-top-fill.p50 { width: 50%; }
.rev-top-fill.p60 { width: 60%; } .rev-top-fill.p70 { width: 70%; } .rev-top-fill.p80 { width: 80%; }
.rev-top-fill.p90 { width: 90%; } .rev-top-fill.p100 { width: 100%; }
.quick-find {
    display: grid; grid-template-columns: 1fr; gap: var(--space-3);
    padding: var(--space-4); background: var(--surface-base);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.quick-find-field .lbl { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.quick-find select:disabled { color: var(--text-muted); background-color: var(--color-ink-50); }
.qf-go {
    align-self: end; padding: var(--space-2) var(--space-5);
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
    color: #fff; background: var(--color-brand-500); border: 0; border-radius: var(--radius-md);
}
.qf-go:hover { background: var(--color-brand-600, var(--color-brand-500)); }
.qf-go:disabled { background: var(--color-ink-200); cursor: default; }
@media (min-width: 768px) { .quick-find { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.brand-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
@media (min-width: 640px) { .brand-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .brand-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.chip-n { color: var(--text-muted); font-size: 10px; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    display: inline-block; padding: var(--space-1) var(--space-3);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: 999px;
    font-size: var(--text-xs); color: var(--text-primary);
}
.chip:hover { border-color: var(--color-brand-500); color: var(--color-brand-500); }
@media (min-width: 768px) {
    .hub-section .review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Глоссарий (слайс 6) */
.gloss-alpha { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-5) 0 var(--space-2); }
.gloss-alpha a {
    min-width: 32px; padding: var(--space-1) var(--space-2); text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
    color: var(--text-primary); background: var(--surface-base);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.gloss-alpha a:hover { border-color: var(--color-brand-500); color: var(--color-brand-500); }
.gloss-groups { padding-bottom: var(--space-12); }
.gloss-group { padding-top: var(--space-5); }
.gloss-letter {
    font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2);
    color: var(--color-brand-500); border-bottom: 1px solid var(--border-subtle); padding-bottom: var(--space-1);
}
.gloss-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-1); }
.gloss-list a { font-weight: 600; color: var(--text-primary); }
.gloss-list a:hover { color: var(--color-brand-500); }
.gloss-full { color: var(--text-muted); font-size: var(--text-xs); margin-left: var(--space-2); }
@media (min-width: 768px) { .gloss-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gloss-term { padding-bottom: var(--space-12); }
.gloss-body { max-width: 72ch; padding-top: var(--space-5); }
.gloss-related { padding-top: var(--space-6); }

/* ПДД-тренажёр (слайс 6) */
.pdd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.pdd-cta .qf-go { align-self: auto; }
.pdd-rules-link { color: var(--color-secondary-500); font-size: var(--text-sm); }
.pdd-note { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.pdd-tickets { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pdd-ticket {
    min-width: 40px; padding: var(--space-2); text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
    color: var(--text-primary); background: var(--surface-base);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.pdd-ticket:hover { border-color: var(--color-brand-500); color: var(--color-brand-500); }
.pdd-topics { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 768px) { .pdd-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdd-topic { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.pdd-topic-n { color: var(--text-muted); font-size: var(--text-xs); }
.pdd-topics .qf-go { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-2); }
.pdd-trainer { padding-bottom: var(--space-12); }
.pdd-bar {
    position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-4); padding: var(--space-3) 0; background: var(--surface-page, #fff);
    border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-4);
}
.pdd-progress { font-size: var(--text-sm); color: var(--text-muted); }
.pdd-timer { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.pdd-questions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.pdd-q { background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.pdd-q.q-right { border-color: var(--color-success-700); }
.pdd-q.q-wrong { border-color: var(--color-danger-600); }
.pdd-q-num { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.pdd-q-title { font-family: var(--font-display); font-size: var(--text-base); margin: 0 0 var(--space-2); }
.pdd-q-topic { font-size: var(--text-xs); color: var(--text-muted); margin: 0 0 var(--space-3); }
.pdd-q-img { max-width: 100%; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.pdd-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pdd-answer {
    width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
    font: inherit; font-size: var(--text-sm); color: var(--text-primary);
    background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.pdd-answer:hover:not(:disabled) { border-color: var(--color-brand-500); }
.pdd-answer:disabled { cursor: default; opacity: .85; }
.pdd-answer.is-right { border-color: var(--color-success-700); background: color-mix(in srgb, var(--color-success-700) 10%, var(--surface-base)); }
.pdd-answer.is-wrong { border-color: var(--color-danger-600); background: color-mix(in srgb, var(--color-danger-600) 10%, var(--surface-base)); }
.pdd-answer img { max-width: 200px; display: block; margin-bottom: var(--space-1); }
.pdd-help { margin-top: var(--space-3); font-size: var(--text-sm); }
.pdd-help summary { color: var(--color-secondary-500); cursor: pointer; }
.pdd-help-body { padding: var(--space-2) 0 0; color: var(--text-muted); }
.pdd-result { margin-top: var(--space-6); background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.pdd-rules-list { padding: var(--space-4) 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.pdd-rules-list a { color: var(--text-primary); font-weight: 600; }
.pdd-rules-list a:hover { color: var(--color-brand-500); }
.pdd-rules-back { padding-top: var(--space-5); }

/* Сравнение, подбор, фото-хаб (слайс 9) */
.compare-page { padding-bottom: var(--space-12); }

/* Форма: блоки авто рядом — как на проде (марка → модель → комплектация). */
.compare-form { padding-top: var(--space-5); }
.compare-slots { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .compare-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .compare-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.compare-slot {
    position: relative; display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4); background: var(--surface-base);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.compare-slot select:disabled { color: var(--text-muted); background-color: var(--color-ink-50); }
.compare-slot-remove {
    position: absolute; top: var(--space-2); right: var(--space-2);
    width: 24px; height: 24px; line-height: 1; font-size: var(--text-base);
    color: var(--text-muted); background: none; border: 0; border-radius: 50%;
}
.compare-slot-remove:hover { color: var(--color-danger-600); background: var(--surface-muted); }
.compare-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-4); }
.compare-add {
    padding: var(--space-2) var(--space-4); font: inherit; font-size: var(--text-sm); font-weight: 600;
    color: var(--color-secondary-500); background: none;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
}
.compare-add:hover:not(:disabled) { border-color: var(--color-secondary-500); }
.compare-add:disabled { opacity: .5; cursor: default; }

/* Результат: шапка с фото и ценой + переключатель параметров. */
.compare-corner { width: 220px; min-width: 180px; }
.compare-car { vertical-align: top; min-width: 200px; }
.compare-car a { display: block; color: var(--text-primary); }
.compare-car-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-muted); margin-bottom: var(--space-2); }
.compare-car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-car-brand { display: block; font-size: var(--text-xs); color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.compare-car-name { display: block; font-family: var(--font-display); font-size: var(--text-sm); }
.compare-car a:hover .compare-car-name { color: var(--color-brand-500); }
.compare-car-price { display: block; padding-top: var(--space-1); font-size: var(--text-sm); font-weight: 700; color: var(--color-brand-500); text-transform: none; letter-spacing: 0; }
.compare-group th { background: var(--surface-subtle); font-family: var(--font-display); color: var(--text-primary); font-size: var(--text-sm); }
.compare-differs td { background: color-mix(in srgb, var(--color-accent-500) 8%, transparent); }
.compare-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
    padding: var(--space-4) 0 0; font-size: var(--text-sm);
}
.compare-toggle { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.compare-toggle button {
    padding: 2px var(--space-2); font: inherit; font-size: var(--text-sm);
    color: var(--color-secondary-500); background: none; border: 0; border-bottom: 1px dashed currentColor;
}
.compare-toggle button.is-current { color: var(--text-primary); font-weight: 700; border-bottom-color: transparent; }
.compare-diff-count { color: var(--text-muted); }
.compare-add-more { color: var(--color-secondary-500); font-weight: 600; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-6) 0 var(--space-12); }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-card { display: block; color: var(--text-primary); }
.gallery-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-muted); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery-card:hover .gallery-thumb img { transform: scale(1.04); }
.gallery-count {
    position: absolute; right: var(--space-2); bottom: var(--space-2);
    padding: 2px var(--space-2); font-size: var(--text-xs); color: #fff;
    background: rgba(17, 24, 39, .75); border-radius: var(--radius-sm);
}
.gallery-name { display: block; padding-top: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.gallery-card:hover .gallery-name { color: var(--color-brand-500); }

/* Калькуляторы + хаб «Корисне» (слайс 8) */
.tool-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-card {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-base); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); color: var(--text-primary);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tool-card-ic {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-brand-50); color: var(--color-brand-500);
    transition: background .15s ease, color .15s ease;
}
.tool-card-ic svg { width: 24px; height: 24px; }
.tool-card-b { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tool-card:hover { border-color: var(--color-brand-500); box-shadow: var(--shadow-sm); }
.tool-card:hover .tool-title { color: var(--color-brand-500); }
.tool-card:hover .tool-card-ic { background: var(--color-brand-500); color: var(--color-white); }
.tool-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.tool-text { font-size: var(--text-sm); color: var(--text-muted); }
.calc-page { padding-bottom: var(--space-12); }
.calc-form {
    display: grid; grid-template-columns: 1fr; gap: var(--space-3);
    padding: var(--space-5); margin-top: var(--space-5);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
    .calc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    .calc-form--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.calc-form .qf-go { align-self: end; }
.calc-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.calc-result {
    margin-top: var(--space-5); padding: var(--space-5);
    background: var(--surface-base); border: 1px solid var(--color-brand-500); border-radius: var(--radius-lg);
}
.calc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.calc-lines li {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle);
}
.calc-line-label { font-size: var(--text-sm); }
.calc-line-note { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.calc-line-sum { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.calc-total {
    display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline;
    margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--text-lg);
}
.calc-total strong { color: var(--color-brand-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-footnote { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.calc-text { max-width: 72ch; padding-top: var(--space-8); }

/* Рейтинг продаж (слайс 6) */
.rate-archive {
    display: inline-block; margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs); color: var(--text-muted);
    background: var(--surface-muted); border-radius: var(--radius-sm);
}
.rate-filter { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-5) 0 0; max-width: 560px; }
@media (min-width: 640px) { .rate-filter { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.rate-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-12); }
@media (min-width: 1024px) { .rate-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.rate-side { display: flex; flex-direction: column; gap: var(--space-4); }
.rate-side .hub-h2 { font-size: var(--text-base); }
.rate-table-wrap { overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.rate-table th, .rate-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.rate-table th { font-family: var(--font-display); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.rate-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-table a { color: var(--text-primary); font-weight: 600; }
.rate-table a:hover { color: var(--color-brand-500); }
.rate-table .rate-total td { font-weight: 700; background: var(--surface-subtle); }
.rate-more { padding-top: var(--space-4); }
.rate-more .qf-go { display: inline-block; text-decoration: none; }

/* Вопросы-ответы (2d) */
.qna-list { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0 var(--space-12); }
.qna-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-base); }
.qna-item summary { padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; }
.qna-item summary::-webkit-details-marker { display: none; }
.qna-item summary:hover .qna-title { color: var(--color-brand-500); }
.qna-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.qna-meta { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.qna-body { padding: 0 var(--space-5) var(--space-4); font-size: var(--text-sm); line-height: 1.6; }
.qna-answer {
    margin: 0 var(--space-5) var(--space-4); padding: var(--space-3) var(--space-4);
    background: var(--color-ink-50); border-left: 3px solid var(--color-secondary-500);
    border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.6;
}
.qna-answer-meta { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }

/* Краш-тест (2d) */
.crash-scores { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding-top: var(--space-6); }
@media (min-width: 640px) { .crash-scores { grid-template-columns: repeat(3, 1fr); } }
.crash-stars { color: var(--color-accent-500); }
.crash-points { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.crash-cell { color: var(--color-accent-500); white-space: nowrap; }

/* Комплектации в сайдбаре */
.mods-side { display: flex; flex-direction: column; max-height: 480px; overflow-y: auto; }
.mods-side a {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle);
    font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.mods-side a:first-child { border-top: 0; }
.mods-side a:hover .mods-side-name { color: var(--color-brand-500); }
.mods-side a.is-active { color: var(--color-brand-500); font-weight: 700; }
.mods-side a.is-active .mods-side-name { color: var(--color-brand-500); }
.mods-side .n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Хед модифікації — дві колонки (галерея / ціна+CTA) */
.mod-hero {
    display: grid; grid-template-columns: 1fr; gap: var(--space-6);
    padding: var(--space-6) 0;
}
@media (min-width: 900px) {
    .mod-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--space-8); align-items: start; }
}
.mod-hero-price {
    padding: var(--space-5); background: var(--surface-alt);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: var(--space-3);
}
.mod-price-label { margin: 0; color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mod-price-value { margin: 0; font-family: var(--font-mono); font-size: clamp(18px, 1.6vw, var(--text-xl)); white-space: nowrap; }
.mod-price-value b { font-weight: 700; color: var(--text-primary); }
.mod-price-alt { margin: 0; font-family: var(--font-mono); color: var(--text-muted); font-size: var(--text-sm); }
.mod-price-empty { color: var(--text-muted); font-weight: 400; }
.mod-price-note { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }
.mod-price-others { margin: 0; padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); font-size: var(--text-sm); }
.mod-price-others a { color: var(--text-primary); font-weight: 600; }
.mod-price-others a:hover { color: var(--color-brand-500); }
.mod-price-cta { justify-content: center; }

/* Факти-key-specs всередині плашки ціни (як у прода) */
.mod-hero-facts {
    margin: 0; padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle);
    display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-3);
    font-size: var(--text-sm);
}
.mod-hero-facts dt { color: var(--text-muted); font-weight: 500; }
.mod-hero-facts dd { margin: 0; color: var(--text-primary); font-weight: 600; }

/* Тіло модифікації: конкуренти-сайдбар + характеристики */
.mod-body {
    display: grid; grid-template-columns: 1fr; gap: var(--space-6);
    padding-bottom: var(--space-12);
}
@media (min-width: 1024px) {
    .mod-body { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}
.mod-rivals .side-head h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 700; }
.mod-rivals-list { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 1024px) { .mod-rivals { position: sticky; top: var(--space-6); } }
.mod-rival { display: flex; align-items: center; gap: var(--space-3); color: var(--text-primary); }
.mod-rival:hover .mod-rival-name { color: var(--color-brand-500); }
.mod-rival-media {
    display: inline-block; width: 64px; height: 44px; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--surface-alt); flex: 0 0 auto;
}
.mod-rival-media img { width: 100%; height: 100%; object-fit: cover; }
.mod-rival-name { font-size: var(--text-sm); font-weight: 600; }

.mod-specs-title { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.mod-specs .spec-sheet { padding: 0; gap: var(--space-5); }
.mod-specs .spec-group { margin: 0; }
.mod-specs .spec-group-title {
    margin: 0; padding: 0 0 6px;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
}
.mod-specs .spec-table { width: 100%; border: 0; border-radius: 0; font-size: var(--text-sm); }
.mod-specs .spec-table td {
    padding: 6px 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0;
    line-height: 1.35; vertical-align: top;
}
.mod-specs .spec-table tr:nth-child(odd) td { background: transparent; }
.mod-specs .spec-table tr:last-child td { border-bottom: 0; }
.mod-specs .spec-table td.spec-name { color: var(--text-muted); width: 40%; font-weight: 400; }
.mod-specs .spec-table td.spec-value { color: var(--text-primary); font-weight: 500; padding-left: var(--space-4); }

/* Хед поколения — три колонки (як на проді: галерея / опис / ціна) */
.gen-hero-3col {
    display: grid; grid-template-columns: 1fr; gap: var(--space-6);
    padding: var(--space-6) 0;
}
@media (min-width: 900px) {
    .gen-hero-3col { grid-template-columns: minmax(0, 440px) minmax(0, 1fr) minmax(240px, 280px); gap: var(--space-6); align-items: stretch; }
}
/* Grid-елемент за замовчуванням має min-width: auto, тому трек галереї
   розпирало натуральною шириною картинок — на 375px сторінка їхала
   вбік на 2 408px. Обидві колонки мусять уміти стискатися. */

/* ---- Підбір авто: ліва колонка фільтрів + результат ------------------ */
/* Мобільний спершу: фільтри згорнуті в один блок, щоб не відсувати
   результат на екран нижче. З 900px — класична бічна колонка, як на проді. */
.sel-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) 0; }
@media (min-width: 900px) {
    .sel-layout { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
}
.sel-side { min-width: 0; }
.sel-main { min-width: 0; }
.sel-side-toggle > summary {
    cursor: pointer; font-weight: 600; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--surface-base); display: flex; align-items: center; gap: var(--space-2);
}
.sel-side-toggle[open] > summary { margin-bottom: var(--space-4); }
@media (min-width: 900px) { .sel-side-toggle > summary { display: none; } }
.sel-count {
    background: var(--color-brand-500); color: #fff; border-radius: var(--radius-pill);
    font-size: var(--text-xs); padding: 1px 8px;
}
.sel-reset { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.sel-group { margin-bottom: var(--space-5); }
.sel-group-title {
    font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
    margin: 0 0 var(--space-2); padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
}
.sel-filter { margin-bottom: var(--space-3); }
.sel-filter-label { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.sel-options { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) { .sel-options { display: block; } }
.sel-option {
    display: inline-block; padding: 4px 10px; font-size: var(--text-sm);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
    color: var(--text-secondary); text-decoration: none;
}
@media (min-width: 900px) {
    .sel-option { display: block; border: 0; border-radius: 0; padding: 2px 0; }
}
.sel-option:hover { color: var(--color-brand-500); }
.sel-option.is-active { color: var(--color-brand-500); font-weight: 600; }
.sel-option.is-active::after { content: ' ×'; }
.sel-intro { margin-bottom: var(--space-5); color: var(--text-secondary); line-height: 1.6; }
.sel-intro p { margin: 0 0 var(--space-3); }
.sel-total { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }

/* Результати підбору — картки з фото: без знімка список машин читається
   як таблиця запчастин, а фото покоління в нас уже є. */
.sel-results { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 560px) { .sel-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sel-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sel-card {
    display: flex; gap: var(--space-3); align-items: center; min-width: 0;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--surface-base); overflow: hidden;
}
.sel-card-media {
    flex: 0 0 96px; width: 96px; aspect-ratio: 4 / 3; display: block;
    background: var(--color-ink-100); overflow: hidden;
}
.sel-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sel-card-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); }
.sel-card-body { min-width: 0; padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.sel-card-title { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.sel-card-title a { color: inherit; text-decoration: none; }
.sel-card-title a:hover { color: var(--color-brand-500); }
.sel-card-mod { display: block; font-weight: 400; color: var(--text-secondary); }
.sel-card-price { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.sel-card-noprice { color: var(--text-muted); }
/* Ціна, відновлена моделлю: «≈» і підпис — щоб її не читали як офіційну. */
.mod-price-estimate { color: var(--text-muted); font-size: var(--text-xs); margin: 0; }
.price-est { border: 0; text-decoration: none; cursor: help; color: var(--text-muted); }

.gen-hero-media,
.mod-hero-media { min-width: 0; }
.gen-hero-info { min-width: 0; }
.gen-hero-desc { font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }
.gen-hero-price { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gen-hero-price .gen-price-value { font-size: clamp(18px, 1.6vw, var(--text-xl)); }
.gen-price-cta { margin: 0; }
.gen-price-cta-primary {
    background: var(--color-ink-950); color: var(--color-white); border-color: var(--color-ink-950);
    font-weight: 700;
}
.gen-price-cta-primary:hover { background: var(--color-brand-500); border-color: var(--color-brand-500); color: var(--color-white); }
/* Бейдж статусу в шапці (in-flow, не absolute як .gen-status на картках) */
.status-badge {
    display: inline-flex; align-items: center; padding: 4px 12px;
    background: var(--color-success-100, #e8f7ee); color: var(--color-success-700, #167c3c);
    border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
}

/* Логотип бренда справа в page-head (прод-паритет) */
.ph-brand-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ph-brand-logo img { max-height: 40px; width: auto; display: block; }
@media (min-width: 480px) { .ph-brand-logo img { max-height: 56px; } }
@media (min-width: 768px) { .ph-brand-logo img { max-height: 72px; } }

/* Шапка з логотипом марки: логотип завжди праворуч від заголовка.
   Загальний `.ph-title` має flex-wrap, і на вузькому екрані логотип
   зривався під текст — тут перенесення вимикаємо, а текст стискаємо. */
.ph-title-aside { flex-wrap: nowrap; align-items: center; gap: var(--space-4); }
.ph-title-aside .ph-title-text { min-width: 0; }

.gen-price-cta { justify-content: center; margin-top: var(--space-3); }

/* Модельний ряд: країна виробник + карточки поколінь */
.ph-country { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-sm); }
.ph-country-flag { font-size: var(--text-lg); line-height: 1; }
.model-line-generations {
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 640px)  { .model-line-generations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .model-line-generations { grid-template-columns: repeat(3, 1fr); } }
.mlg-card {
    display: flex; flex-direction: column; gap: var(--space-3);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    overflow: hidden;
}
.mlg-media { display: block; aspect-ratio: 16 / 10; background: var(--color-ink-100); overflow: hidden; }
.mlg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlg-body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.mlg-title { color: var(--text-primary); font-weight: 700; font-size: var(--text-base); }
.mlg-title:hover { color: var(--color-brand-500); }
.mlg-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.mlg-links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.mlg-links a { color: var(--text-secondary); font-size: var(--text-sm); }
.mlg-links a:hover { color: var(--color-brand-500); }
.gen-hero-desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.gen-hero-price {
    padding: var(--space-5); background: var(--surface-alt); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
/* Ціна — одним рядком: «$» відривався від суми, і блок читався як два числа. */
.gen-price-value { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-lg); white-space: nowrap; }
.gen-price-value b { font-weight: 700; color: var(--text-primary); }
.gen-price-note { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }

/* Таблиця комплектацій, розбита по типу пального */
.mod-table-fuel { margin-bottom: var(--space-6); }
.mod-table-caption {
    padding: var(--space-2) var(--space-4);
    background: var(--surface-alt); border: 1px solid var(--border-subtle); border-bottom: 0;
    border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md);
    font-weight: 700; font-size: var(--text-sm);
}
.mod-table-fuel table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle); }
.mod-table-fuel th, .mod-table-fuel td {
    padding: var(--space-2) var(--space-3); text-align: left;
    border-top: 1px solid var(--border-subtle); font-size: var(--text-sm);
}
.mod-table-fuel th { background: var(--surface-alt); color: var(--text-muted); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.mod-table-fuel td.mod-price { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.mod-table-fuel a { color: var(--text-primary); font-weight: 600; }
.mod-table-fuel a:hover { color: var(--color-brand-500); }

/* «Ще про [модель]» — блок-паритет із проду */
.more-about { margin: var(--space-10) 0 var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.more-about-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px)  { .more-about-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .more-about-cols { grid-template-columns: repeat(3, 1fr); } }
.more-about-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.more-about-cols a { color: var(--text-secondary); font-size: var(--text-sm); }
.more-about-cols a:hover { color: var(--color-brand-500); }

/* Заводська ціна модифікації (аналог прод-плашки «Официальная цена в Украине») */
.price-hero {
    margin: var(--space-6) 0;
    padding: var(--space-5) var(--space-6);
    background: var(--surface-alt); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.price-hero p { margin: 0; }
.price-hero p + p { margin-top: var(--space-2); }
.price-hero b { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); font-size: var(--text-lg); }
.price-hero-alt { font-family: var(--font-mono); color: var(--text-muted); margin-left: var(--space-2); }
.price-hero-note { color: var(--text-muted); font-size: var(--text-sm); }

/* Поколение-хаб + модификация (2b) */
.gen-badge {
    display: inline-flex; align-items: center; padding: 5px 12px; margin-right: var(--space-2);
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--surface-base); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
}
.gen-badge-year { font-family: var(--font-mono); }
.gen-hero { padding-top: var(--space-6); padding-bottom: 0; }

.mod-table { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
.mod-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.mod-table th {
    text-align: left; padding: var(--space-3) var(--space-4);
    background: var(--color-ink-50); border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
}
.mod-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.mod-table tr:last-child td { border-bottom: 0; }
.mod-table td a { font-weight: 600; color: var(--text-primary); }
.mod-table td a:hover { color: var(--color-brand-500); }
.mod-year { font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.mod-price { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }

.spec-sheet { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) 0 var(--space-4); }
.spec-group-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.spec-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table tr:nth-child(odd) td { background: var(--color-ink-50); }
.spec-name { color: var(--text-secondary); width: 55%; }
.spec-value { font-weight: 600; }
.spec-unit { color: var(--text-muted); font-weight: 400; font-size: var(--text-xs); margin-left: 2px; }
.mod-back { padding: var(--space-4) 0 var(--space-12); font-weight: 600; }
.mod-back a:hover { color: var(--color-brand-500); }

/* ─────  HEADER: компактная полоса 1024–1439 (меню в одну строку)  ───── */
@media (min-width: 1024px) and (max-width: 1439px) {
    .site-header-inner { gap: var(--space-4); }
    .site-nav-link { padding: 7px 10px; }
    .logo img { height: 28px; }
}

/* ─────  ФОРУМ-АРХИВ (слайс 10)  ───── */
.forum-page { padding-bottom: var(--space-12); }
.forum-cat { padding-top: var(--space-6); }
.forum-cat-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.forum-branches { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.forum-branch { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4); align-items: baseline; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.forum-branch:last-child { border-bottom: 0; }
.forum-branch:nth-child(odd) { background: var(--color-ink-50); }
.forum-branch-name { font-weight: 600; }
.forum-branch-name:hover { color: var(--color-brand-500); }
.forum-branch-desc { grid-column: 1; color: var(--text-muted); font-size: var(--text-sm); }
.forum-branch-count { grid-row: 1; grid-column: 2; color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }

.forum-latest { padding-top: var(--space-8); }
.forum-topics { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.forum-topic-row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.forum-topic-row:last-child { border-bottom: 0; }
.forum-topic-row:nth-child(odd) { background: var(--color-ink-50); }
.forum-topic-row a { font-weight: 600; }
.forum-topic-row a:hover { color: var(--color-brand-500); }
.forum-topic-meta { color: var(--text-muted); font-size: var(--text-sm); }

.forum-post { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin: var(--space-4) 0; overflow: hidden; }
.forum-post-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-ink-50); border-bottom: 1px solid var(--border-subtle); }
.forum-post-author { font-weight: 600; font-size: var(--text-sm); }
.forum-post-date { color: var(--text-muted); font-size: var(--text-sm); }
.forum-tags { color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-3) 0; }
.forum-tags .lbl { color: var(--text-strong); }
.forum-post-body { padding: var(--space-4); }
/* Легаси-тела без разметки: переносы строк — единственная разбивка на абзацы. */
.forum-post-body.is-plain { white-space: pre-line; }
.forum-post-body p { margin: 0 0 var(--space-3); }
.forum-post-body p:last-child { margin-bottom: 0; }
.forum-back { padding: var(--space-4) 0 0; font-weight: 600; }
.forum-back a:hover { color: var(--color-brand-500); }

@media (min-width: 768px) {
    .forum-topic-row { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
}

/* ─────  ГЛАВНАЯ  ─────
   Состав блоков повторяет прод (свежее, популярные модели, марки, отзывы,
   «о сайте»), но каждый блок получил собственную форму. Раньше семь секций
   подряд были одной и той же сеткой карточек «обложка + заголовок», и
   страница читалась как один длинный список. Теперь чередуются: обложка
   выпуска, нумерованная лента, тёмная полоса плиток, рельса каталога,
   плитки марок, горизонтальные строки, тёмная видеополоса, цитаты, облако
   ссылок. */

.section-alt { background: var(--surface-subtle); }

/* ---------- Первый экран: заголовок портала + ведущий материал ---------- */

.home-top { padding: var(--space-6) 0 var(--space-10); }
.home-masthead {
    display: flex; flex-direction: column; gap: var(--space-4);
    padding-bottom: var(--space-5); margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}
.home-h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.025em; margin: 0;
}
.home-h1 em { font-style: normal; color: var(--color-brand-500); }
.home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.home-stats a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; min-width: 0; }
.home-stats b { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1; letter-spacing: -0.02em; }
.home-stats span { font-size: 11px; color: var(--text-muted); }
.home-stats a:hover b { color: var(--color-brand-500); }

.home-lead { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }

/* Ведущая карточка: обложка во всю карточку, текст поверх неё. */
.lead-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-ink-950); }
.lead-link { position: relative; display: block; color: var(--color-white); }
.lead-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.lead-link:hover .lead-media img { transform: scale(1.04); }
.lead-body {
    position: absolute; inset: auto 0 0 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-10) var(--space-4) var(--space-4);
    background: linear-gradient(0deg, rgba(10, 15, 28, .94) 0%, rgba(10, 15, 28, .78) 45%, rgba(10, 15, 28, 0) 100%);
}
.lead-chip { padding: 5px 10px; border-radius: var(--radius-xs); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-white); }
.lead-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.02em; }
.lead-link:hover .lead-title { color: var(--color-accent-500); }
.lead-excerpt { display: none; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.lead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: rgba(255, 255, 255, .62); }
.lead-dot { color: rgba(255, 255, 255, .32); }
.lead-author { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: rgba(255, 255, 255, .82); }

/* Стрічка: номер + заголовок, без превью — иначе рядом с большой обложкой
   получается ещё одна сетка карточек. */
.home-feed { display: flex; flex-direction: column; min-width: 0; }
.feed-head { margin: 0 0 var(--space-2); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { border-top: 1px solid var(--border-subtle); }
.feed-item:first-child { border-top: 0; }
.feed-link { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-3) 0; min-height: 44px; }
.feed-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-xs); color: var(--color-ink-300); padding-top: 3px; }
.feed-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feed-title { font-weight: 600; font-size: var(--text-sm); line-height: 1.35; }
.feed-link:hover .feed-title { color: var(--color-brand-500); }
.feed-link:hover .feed-num { color: var(--color-brand-500); }
.feed-meta { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); font-size: 11px; color: var(--text-muted); }
.feed-meta span, .feed-meta time { display: inline-flex; align-items: center; gap: 4px; }
.feed-meta svg { width: 11px; height: 11px; }
.feed-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-brand-500); }
.feed-all:hover { text-decoration: underline; }

@media (min-width: 640px) {
    .home-h1 { font-size: var(--text-2xl); }
    .home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lead-title { font-size: var(--text-xl); }
}
@media (min-width: 1024px) {
    .home-top { padding: var(--space-8) 0 var(--space-16); }
    .home-masthead { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-10); }
    .home-h1 { font-size: var(--text-3xl); max-width: 18ch; }
    .home-stats { flex: 0 0 auto; gap: var(--space-8); }
    .home-lead { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-8); }
    .lead-media { aspect-ratio: 16 / 9; }
    .lead-body { padding: var(--space-16) var(--space-6) var(--space-6); gap: var(--space-3); }
    .lead-title { font-size: var(--text-3xl); }
    .lead-excerpt { display: block; }
}

/* ---------- Шапка секции (виджет SectionHead) ---------- */

.sec-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.sec-head-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sec-kicker { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-500); }
.sec-kicker::before { content: ''; flex: 0 0 auto; width: 22px; height: 2px; background: currentColor; }
.sec-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.sec-all {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 10px 16px; min-height: 44px;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    font-weight: 600; font-size: var(--text-sm); white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.sec-all svg { width: 16px; height: 16px; }
.sec-all:hover { background: var(--color-ink-950); border-color: var(--color-ink-950); color: var(--color-white); }
.sec-head-dark .sec-title { color: var(--color-white); }
.sec-head-dark .sec-kicker { color: var(--color-accent-500); }
.sec-head-dark .sec-all { color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .25); }
.sec-head-dark .sec-all:hover { background: var(--color-white); color: var(--color-ink-950); border-color: var(--color-white); }

@media (min-width: 768px) {
    .sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
    .sec-all { align-self: auto; }
    .sec-title { font-size: var(--text-3xl); }
}

/* ---------- Инструменты: тёмная полоса-разделитель ---------- */

.home-tools {
    color: var(--color-white);
    background:
        radial-gradient(ellipse at 15% 0%, rgba(248, 86, 86, .18), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(255, 184, 0, .12), transparent 60%),
        linear-gradient(135deg, #0A0F1C 0%, #131c33 100%);
}
.tool-tiles { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.tool-tile {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: center;
    padding: var(--space-4); min-width: 0;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    color: var(--color-white);
    transition: border-color var(--duration-base), transform var(--duration-base), background var(--duration-base);
}
.tool-tile:hover { border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.tool-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); }
.tool-ic svg { width: 22px; height: 22px; }
.tool-tile .tool-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-tile .tool-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.tool-tile .tool-text { font-size: var(--text-xs); color: rgba(255, 255, 255, .6); }
.tone-brand .tool-ic   { background: rgba(248, 86, 86, .18);  color: var(--color-brand-400); }
.tone-info .tool-ic    { background: rgba(26, 86, 240, .22);  color: var(--color-secondary-300); }
.tone-accent .tool-ic  { background: rgba(255, 184, 0, .18);  color: var(--color-accent-500); }
.tone-success .tool-ic { background: rgba(0, 163, 108, .18);  color: var(--color-success-500); }

@media (min-width: 640px) { .tool-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .tool-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Рельса каталога ---------- */

.model-rail, .video-rail {
    display: grid; grid-auto-flow: column; gap: var(--space-3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--space-4) * -1); padding: 0 var(--space-4) var(--space-2);
    scrollbar-width: none;
}
.model-rail::-webkit-scrollbar, .video-rail::-webkit-scrollbar { display: none; }
.model-rail { grid-auto-columns: 74%; }
.model-rail > *, .video-rail > * { scroll-snap-align: start; }

.model-card {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    transition: box-shadow var(--duration-base), border-color var(--duration-base), transform var(--duration-base);
}
.model-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-ink-300); transform: translateY(-2px); }
.model-media { display: block; aspect-ratio: 4 / 3; padding: var(--space-3); background: var(--color-ink-50); }
.model-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.model-body-text { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border-subtle); }
.model-brand { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.model-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.25; }
.model-card:hover .model-name { color: var(--color-brand-500); }
.model-price { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-md); color: var(--color-ink-950); margin-top: var(--space-2); }
.model-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 11px; color: var(--text-muted); }
.model-body { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-ink-100); color: var(--text-secondary); font-weight: 600; }

@media (min-width: 640px) { .model-rail { grid-auto-columns: 42%; } }
@media (min-width: 1024px) {
    .model-rail {
        grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4); overflow: visible; margin-inline: 0; padding: 0;
    }
}

/* ---------- Плитки марок ---------- */

.brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.brand-tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-4) var(--space-2); min-width: 0; text-align: center;
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    transition: border-color var(--duration-base), transform var(--duration-base);
}
.brand-tile:hover { border-color: var(--color-ink-400); transform: translateY(-2px); }
.brand-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--duration-base), opacity var(--duration-base); }
.brand-tile:hover .brand-logo img { filter: none; opacity: 1; }
.brand-letter { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-ink-400); }
.brand-name { max-width: 100%; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-count { font-size: 11px; color: var(--text-muted); }

@media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Секция «шапка сбоку — лента строк» ---------- */

.home-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.home-split-text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }

@media (min-width: 1024px) {
    .home-split { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-12); }
    .home-split-head { position: sticky; top: 96px; align-self: start; }
    .home-split-head .sec-head { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
    .home-split-head .sec-title { font-size: var(--text-2xl); }
}

/* ---------- Горизонтальная карточка (виджет MediaRow) ---------- */

.row-list { display: flex; flex-direction: column; gap: var(--space-3); }
.row-card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); align-items: center;
    padding: var(--space-3);
    background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.row-card:hover { border-color: var(--color-ink-300); box-shadow: var(--shadow-sm); }
.row-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-ink-100); }
.row-media img { width: 100%; height: 100%; object-fit: cover; }
.row-badge {
    position: absolute; top: 6px; left: 6px; padding: 3px 7px; border-radius: var(--radius-xs);
    background: rgba(10, 15, 28, .72); color: var(--color-white);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.row-b { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.row-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-secondary-500); }
.row-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.3; }
.row-card:hover .row-title { color: var(--color-brand-500); }
.row-meta { font-size: var(--text-xs); color: var(--text-muted); }

@media (min-width: 640px) {
    .row-card { grid-template-columns: 168px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
    .row-title { font-size: var(--text-md); }
}

/* ---------- Видео: тёмная полоса ---------- */

.home-video { background: var(--color-ink-950); color: var(--color-white); }
.video-rail { grid-auto-columns: 80%; }
.video-rail .a-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.video-rail .a-card:hover { border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.video-rail .a-card-link { color: var(--color-white); }
.video-rail .a-title { font-size: var(--text-base); }
.video-rail .a-card-link:hover .a-title { color: var(--color-accent-500); }
.video-rail .a-meta { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); }
.video-rail .a-author { color: rgba(255, 255, 255, .78); }

@media (min-width: 640px) { .video-rail { grid-auto-columns: 46%; gap: var(--space-4); } }
@media (min-width: 1024px) {
    .video-rail {
        grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible; margin-inline: 0; padding: 0;
    }
}

/* ---------- Отзывы владельцев — цитатами ---------- */

.quote-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.quote-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); overflow: hidden;
    background: var(--surface-base); border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--color-accent-500); border-radius: var(--radius-md);
}
.quote-mark { position: absolute; top: 2px; right: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--color-ink-100); }
.quote-text {
    position: relative; margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.quote-foot { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
/* Фото моделі, про яку відгук — ліворуч у підвалі картки. */
.quote-thumb {
    flex: 0 0 auto; width: 64px; height: 44px; overflow: hidden;
    border-radius: var(--radius-sm); background: var(--surface-muted);
}
.quote-thumb img { width: 100%; height: 100%; object-fit: cover; }
.quote-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.quote-author { font-weight: 600; font-size: var(--text-sm); }
.quote-sub { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-car { color: var(--color-secondary-500); }
.quote-car:hover { text-decoration: underline; }
.quote-rate { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.quote-rate .stars { font-size: var(--text-sm); color: var(--color-accent-500); }
.quote-rate .stars-off { color: var(--color-ink-200); }
.quote-score { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); }

@media (min-width: 768px) { .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Статьи: одна большая + лента строк ---------- */

.home-articles { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 1024px) { .home-articles { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); } }

/* ---------- Разделы портала — облако ссылок ---------- */

.link-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.link-chip {
    display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--surface-base); font-size: var(--text-sm); font-weight: 500;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.link-chip:hover { background: var(--color-ink-950); border-color: var(--color-ink-950); color: var(--color-white); }

/* ---------- «Про сайт» — SEO-текст прода, читаемая ширина ---------- */

.home-about { max-width: 76ch; }
.home-about h2 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.home-about p { color: var(--color-ink-600); line-height: 1.7; margin: 0 0 var(--space-4); }
.home-about a { color: var(--color-brand-500); font-weight: 600; }
.home-about a:hover { text-decoration: underline; }

/* Свёртка длинного текста (виджет ReadMore).
   Прячем только когда скрипт отработал и повесил `is-ready`: иначе текст
   исчезнет у того, у кого JS не выполнился. */
.read-more-btn { display: none; }
.read-more.is-ready .read-more-rest { display: none; }
.read-more.is-ready.is-open .read-more-rest { display: block; }
.read-more.is-ready .read-more-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0;
    background: none; border: 0;
    color: var(--color-brand-500); font-family: inherit; font-weight: 600; font-size: var(--text-sm);
}
.read-more.is-ready .read-more-btn:hover span { text-decoration: underline; }
.read-more-btn svg { width: 18px; height: 18px; transition: transform var(--duration-base); }
.read-more.is-open .read-more-btn svg { transform: rotate(180deg); }

/* ─────  СТАТИЧЕСКИЕ СТРАНИЦЫ (слайс 12)  ─────
   Полотна юридического текста: оферта — 19 тыс. знаков. Читаемая ширина
   важнее ширины экрана. */

.page-text { max-width: 76ch; padding-bottom: var(--space-12); color: var(--color-ink-700); line-height: 1.75; }
.page-text p { margin-bottom: var(--space-4); }
.page-text h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); color: var(--color-ink-900); }
.page-text h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); color: var(--color-ink-900); }
.page-text ul, .page-text ol { margin: 0 0 var(--space-4) var(--space-5); }
.page-text li { margin-bottom: var(--space-2); }
.page-text a { color: var(--color-brand-500); }
.page-text table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.page-text th, .page-text td { border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); text-align: left; }

/* Форма обратной связи. */
.feedback-form { max-width: 560px; }
.feedback-form .form-group { margin-bottom: var(--space-4); }
.feedback-form label { display: block; margin-bottom: var(--space-1); font-weight: 600; font-size: var(--text-sm); }
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form textarea {
    width: 100%; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-base); color: var(--color-ink-900);
    font-family: inherit; font-size: var(--text-base);
}
.feedback-form textarea { resize: vertical; min-height: 160px; }
.feedback-form .help-block { color: var(--color-brand-500); font-size: var(--text-sm); }

/* Honeypot: человеку не видно, боту — обычное поле формы. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   ПОЛЯ ФОРМ — випадаючі списки (єдине джерело правди)
   Рідний <select> і Select2 (підключений із CDN на select[data-search])
   мають виглядати однаково: та сама висота, рамка, радіус, шрифт і
   власна «галочка» замість системної. Окремі блоки (.quick-find,
   .compare-slot, .calc-form, .rate-filter) своїх копій більше не тримають.
   ============================================================ */
.quick-find select,
.compare-slot select,
.calc-form select,
.calc-form input[type="number"],
.rate-filter select,
.select2-container--default .select2-selection--single {
    width: 100%; min-height: 40px; height: auto;
    padding: var(--space-2) var(--space-3);
    font: inherit; font-size: var(--text-sm); line-height: 22px;
    color: var(--text-primary);
    background-color: var(--surface-base);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
.quick-find select,
.compare-slot select,
.calc-form select,
.rate-filter select,
.select2-container--default .select2-selection--single {
    /* Системну стрілку прибираємо на користь власної; number-поле лишає
       свої стрілки-лічильники — це рідна поведінка поля, не декор. */
    -webkit-appearance: none; appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 16px;
}
.quick-find select:focus,
.compare-slot select:focus,
.calc-form select:focus,
.calc-form input[type="number"]:focus,
.rate-filter select:focus {
    outline: none; border-color: var(--color-brand-500); box-shadow: var(--shadow-focus);
}
.calc-form select:disabled,
.rate-filter select:disabled { color: var(--text-muted); background-color: var(--color-ink-50); }

/* — Select2: приводимо CDN-скін до токенів кіта — */
.select2-container { width: 100% !important; font-family: var(--font-body); }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0; line-height: 22px; color: var(--text-primary);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: var(--space-4); color: var(--text-muted); font-weight: 400;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-brand-500); box-shadow: var(--shadow-focus);
}
.select2-container--default.select2-container--open .select2-selection--single { border-radius: var(--radius-md); }
.select2-container--default.select2-container--disabled .select2-selection--single {
    color: var(--text-muted); background-color: var(--color-ink-50);
}
.select2-container--default .select2-dropdown {
    margin-top: var(--space-1);
    background: var(--surface-base);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); overflow: hidden;
}
.select2-container--default .select2-search--dropdown { padding: var(--space-2); }
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: var(--space-2) var(--space-3);
    font: inherit; font-size: var(--text-sm); color: var(--text-primary);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none; border-color: var(--color-brand-500);
}
.select2-container--default .select2-results__option {
    padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-primary);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--color-brand-50); color: var(--text-primary);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--surface-muted); font-weight: 600;
}
.select2-container--default .select2-results__message { color: var(--text-muted); font-size: var(--text-sm); }