/* ============================================================================
   generation-page.css — страница поколения (/catalog/МАРКА/МОДЕЛЬ/complectations/ID/),
   шаблон include/complectations/generation_page.php, поведение js/generation-page.js.
   Подключается в include/head.php только на этой странице ($generationPage).
   Сетка отступов кратна 8px: между разделами 64px (на телефоне 40px), внутри карточек 24px (16px),
   радиусы 20 / 14 / 10. Тёмная тема — html[data-theme="dark"], как на всём сайте.
   Файл общий для desktop и mobile (правится в desktop и копируется).
   ============================================================================ */

.gp {
    --gp-ink: #0b1220;
    --gp-text: #1d2433;
    --gp-sub: #5b6472;
    --gp-faint: #8b93a5;
    --gp-line: #e4e8ef;
    --gp-line-soft: #eef1f5;
    --gp-card: #ffffff;
    --gp-soft: #f4f6fa;
    --gp-soft-2: #eceff5;
    --gp-accent: #1e4fe0;
    --gp-accent-b: #3e7bff;
    --gp-accent-bg: rgba(30, 79, 224, .08);
    --gp-ok: #16a34a;
    --gp-ok-bg: rgba(22, 163, 74, .12);
    --gp-opt: #d97706;
    --gp-opt-bg: rgba(217, 119, 6, .12);
    --gp-no: #a3abb8;
    --gp-no-bg: #eef0f4;
    --gp-best: #0f8a4f;
    --gp-best-bg: rgba(16, 185, 129, .13);
    --gp-cta-a: #ff5470;
    --gp-cta-b: #ff2f52;
    --gp-nav-bg: rgba(255, 255, 255, .88);
    --gp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 30px -18px rgba(16, 24, 40, .22);
    --gp-shadow-lg: 0 24px 60px -24px rgba(16, 24, 40, .35);
    --gp-head: 'Unbounded', 'Manrope', sans-serif;
    --gp-top: var(--hdr-height, 78px);
    --gp-gap: 64px;
    --gp-pad: 24px;
    color: var(--gp-text);
    font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html[data-theme="dark"] .gp {
    --gp-ink: #eef1f6;
    --gp-text: #dfe4ec;
    --gp-sub: #9aa4b2;
    --gp-faint: #6b7482;
    --gp-line: #262b36;
    --gp-line-soft: #1f2430;
    --gp-card: #151922;
    --gp-soft: #1b202a;
    --gp-soft-2: #222835;
    --gp-accent: #6f9bff;
    --gp-accent-b: #8b6bff;
    --gp-accent-bg: rgba(91, 140, 255, .15);
    --gp-ok: #34d399;
    --gp-ok-bg: rgba(52, 211, 153, .15);
    --gp-opt: #fbbf24;
    --gp-opt-bg: rgba(251, 191, 36, .14);
    --gp-no: #5d6574;
    --gp-no-bg: #20252f;
    --gp-best: #34d399;
    --gp-best-bg: rgba(52, 211, 153, .14);
    --gp-nav-bg: rgba(21, 25, 34, .88);
    --gp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7);
    --gp-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
}

.gp *, .gp *::before, .gp *::after { box-sizing: border-box; }
.gp [hidden] { display: none !important; }
.gp button { font-family: inherit; }
.gp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gp .is-muted { color: var(--gp-faint); }
.gp-scroll-x { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gp-scroll-x::-webkit-scrollbar { display: none; }

/* ---------- заголовки, кнопки, чипы ---------- */
.gp-h2 { font-family: var(--gp-head); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--gp-ink); margin: 0; display: flex; align-items: center; gap: 12px; }
.gp-h3 { font-size: 17px; font-weight: 800; color: var(--gp-ink); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.gp-h3 > i { color: var(--gp-accent); font-size: 15px; }
.gp-sub { margin: 8px 0 0; color: var(--gp-sub); font-size: 14.5px; line-height: 1.5; }
.gp-sub b { color: var(--gp-ink); }
.gp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--gp-accent-bg); color: var(--gp-accent); font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0; }
.gp-eyebrow { display: block; margin-bottom: 8px; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-accent); }

.gp .gp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 14px; border: 0; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s, color .15s; }
.gp .gp-btn:hover { transform: scale(1.01); }
.gp .gp-btn-primary, .gp a.gp-btn-primary { background: linear-gradient(90deg, var(--gp-cta-a), var(--gp-cta-b)); color: #fff; box-shadow: 0 12px 26px -10px rgba(255, 47, 82, .6); }
.gp .gp-btn-ghost, .gp a.gp-btn-ghost { background: transparent; color: var(--gp-ink); box-shadow: inset 0 0 0 1.5px var(--gp-line); }
.gp a.gp-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gp-accent); color: var(--gp-accent); }
.gp .gp-btn-soft { background: var(--gp-accent-bg); color: var(--gp-accent); }
.gp .gp-btn-soft:hover { background: var(--gp-accent); color: #fff; }
.gp .gp-btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; gap: 8px; }
.gp .gp-link-btn, .gp a.gp-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--gp-accent); font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.gp .gp-link-btn:hover { text-decoration: underline; }
.gp .gp-link-btn i { font-size: 11px; transition: transform .2s; }
.gp .gp-link-btn[aria-expanded="true"] i { transform: rotate(180deg); }

.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chips.gp-scroll-x { flex-wrap: nowrap; }
.gp-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--gp-soft); color: var(--gp-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none; }
.gp-chip.is-accent { background: var(--gp-accent-bg); color: var(--gp-accent); font-weight: 800; }
.gp-chip-sm { height: 26px; padding: 0 10px; font-size: 12.5px; }

.gp-card { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 20px; padding: var(--gp-pad); box-shadow: var(--gp-shadow); }
.gp-section { margin-top: var(--gp-gap); scroll-margin-top: 64px; } /* + scroll-padding-top у html (высота шапки) */
.gp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.gp-empty { margin: 16px 0 0; padding: 24px; border-radius: 16px; background: var(--gp-soft); color: var(--gp-sub); font-size: 14.5px; text-align: center; }

/* значки состояний: ✓ есть, ○ опция, ✕ нет, • значение */
.gp-state { position: relative; display: inline-flex; flex: none; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; }
.gp-state.k-yes { background: var(--gp-ok); }
.gp-state.k-yes::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gp-state.k-opt { box-shadow: inset 0 0 0 2px var(--gp-opt); }
.gp-state.k-no { background: var(--gp-no-bg); }
.gp-state.k-no::before, .gp-state.k-no::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; border-radius: 1px; background: var(--gp-no); transform: rotate(45deg); }
.gp-state.k-no::after { transform: rotate(-45deg); }
.gp-state.k-text, .gp-state.k-num { width: 18px; background: none; }
.gp-state.k-text::after, .gp-state.k-num::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gp-accent); opacity: .55; }
.gp-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.gp-badge.k-opt { background: var(--gp-opt-bg); color: var(--gp-opt); }
.gp-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--gp-accent-bg); color: var(--gp-accent); font-size: 15px; }
.gp-ico-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12.5px; }

/* ---------- назад ---------- */
.gp-back { margin: 0 0 16px; }
.gp-back a { display: inline-flex; align-items: center; gap: 8px; color: var(--gp-sub); font-size: 14px; font-weight: 700; text-decoration: none; }
.gp-back a:hover { color: var(--gp-accent); }

/* ---------- 1. обложка ---------- */
.gp-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.gp-gallery { min-width: 0; }
.gp-gallery-main { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--gp-soft); }
.gp-gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gp-gallery-open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.gp-gallery-open img.is-swap { opacity: .35; }
.gp-gallery-empty { display: flex; align-items: center; justify-content: center; color: var(--gp-faint); font-size: 56px; }
.gp-gallery-nav { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); color: #111; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity .2s, transform .2s; }
.gp-gallery-nav.is-prev { left: 16px; }
.gp-gallery-nav.is-next { right: 16px; }
.gp-gallery-main:hover .gp-gallery-nav, .gp-gallery-nav:focus-visible { opacity: 1; }
.gp-gallery-nav:hover { transform: scale(1.06); }
.gp-gallery-count { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(10, 12, 20, .6); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); pointer-events: none; }
.gp-thumbs { gap: 8px; margin-top: 8px; padding-bottom: 2px; }
.gp-thumb { flex: none; width: 88px; height: 62px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--gp-soft); cursor: pointer; opacity: .62; box-shadow: inset 0 0 0 2px transparent; transition: opacity .15s, box-shadow .15s; position: relative; }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-thumb:hover { opacity: 1; }
.gp-thumb.is-active { opacity: 1; }
.gp-thumb.is-active::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--gp-accent); }

.gp-hero-info { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.gp-title { font-family: var(--gp-head); font-size: 32px; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; color: var(--gp-ink); margin: 0; text-wrap: balance; }
.gp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gp-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--gp-card); border: 1px solid var(--gp-line); text-decoration: none; color: inherit; }
.gp-tile-label { display: flex; align-items: center; gap: 6px; color: var(--gp-sub); font-size: 12.5px; font-weight: 600; }
.gp-tile-label i { color: var(--gp-accent); font-size: 12px; width: 14px; text-align: center; }
.gp-tile-value { font-family: var(--gp-head); letter-spacing: -.01em; font-size: 19px; font-weight: 800; color: var(--gp-ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-tile-note { color: var(--gp-faint); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp a.gp-tile-link, .gp a.gp-tile-sale { transition: border-color .15s, transform .15s; color: inherit; }
.gp a.gp-tile-link:hover, .gp a.gp-tile-sale:hover { border-color: var(--gp-accent); transform: scale(1.01); }
.gp a.gp-tile-link .gp-tile-note { color: var(--gp-accent); }
.gp-tile-sale { background: linear-gradient(135deg, var(--gp-accent-bg), transparent 70%), var(--gp-card); }
.gp-tile-sale .gp-tile-value { color: var(--gp-accent); font-size: 16px; line-height: 1.35; white-space: normal; }
.gp-tile-sale.is-loading .gp-tile-value { width: 70%; border-radius: 6px; background: linear-gradient(90deg, var(--gp-soft) 0%, var(--gp-soft-2) 50%, var(--gp-soft) 100%); background-size: 200% 100%; animation: gpShimmer 1.2s linear infinite; }
@keyframes gpShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* плитка «В продаже» добирает пустые ячейки последнего ряда (плиток 4–6, в зависимости от данных) */
.gp-tiles .gp-tile-sale:nth-child(3n+1) { grid-column: span 3; }
.gp-tiles .gp-tile-sale:nth-child(3n+2) { grid-column: span 2; }
@media (min-width: 768px) { .gp-hero .gp-chips.gp-scroll-x { flex-wrap: wrap; overflow: visible; } }
.gp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.gp-hero-cta .gp-btn { flex: 1 1 auto; }

/* ---------- 2. липкая навигация ---------- */
.gp-nav { position: sticky; top: var(--gp-top); z-index: 20; margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px; border-radius: 16px; background: var(--gp-nav-bg); border: 1px solid var(--gp-line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .2s, border-radius .2s; }
.gp-nav.is-stuck { box-shadow: var(--gp-shadow-lg); }
.gp-nav-links { gap: 4px; min-width: 0; }
.gp .gp-nav-links a { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 16px; border-radius: 11px; color: var(--gp-sub); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.gp .gp-nav-links a:hover { color: var(--gp-ink); background: var(--gp-soft); }
.gp .gp-nav-links a.is-active { color: var(--gp-accent); background: var(--gp-accent-bg); }
.gp-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gp-soft-2); color: var(--gp-sub); font-size: 11.5px; font-weight: 800; }
.gp-nav-cta { display: flex; align-items: center; gap: 12px; flex: none; opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.gp-nav.has-cta .gp-nav-cta { opacity: 1; transform: none; pointer-events: auto; }
.gp-nav-price { font-size: 14px; color: var(--gp-sub); white-space: nowrap; }
.gp-nav-price b { color: var(--gp-ink); font-weight: 800; }

/* ---------- 3. базовая информация и обзор ---------- */
.gp-overview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; margin-top: 40px; }
.gp-kv { margin: 0; }
.gp-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--gp-line-soft); }
.gp-kv-row:first-child { border-top: 0; padding-top: 0; }
.gp-kv-row dt { color: var(--gp-sub); font-size: 14px; font-weight: 500; }
.gp-kv-row dd { margin: 0; color: var(--gp-ink); font-size: 14px; font-weight: 700; text-align: right; }
.gp-about-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--gp-text); }
.gp-about-text p:last-child { margin-bottom: 0; }
.gp-about-text ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.gp-about-text li { position: relative; padding: 10px 12px 10px 34px; border-radius: 12px; background: var(--gp-soft); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.gp-about-text li::before { content: ""; position: absolute; left: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--gp-accent); opacity: .6; }

/* ---------- 4. комплектации ---------- */
.gp-select { display: inline-flex; align-items: center; gap: 8px; color: var(--gp-sub); font-size: 13.5px; font-weight: 600; margin: 0; }
.gp-select select { height: 40px; padding: 0 36px 0 14px; border-radius: 12px; border: 1px solid var(--gp-line); background: var(--gp-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--gp-ink); font: inherit; font-weight: 700; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 320px; }
/* фильтр версий — в стиле фильтра главной (include/top/filter/partials/css.php): карточка с полоской
   сверху, подписи капсом, поля 50px с рамкой 1.5px, выпадающие списки с галочками. Свои имена классов:
   .popover/.field на сайте заняты (Bootstrap, фильтр главной). */
.gp-fcard { position: relative; margin-bottom: 24px; padding: 24px; border-radius: 20px; background: var(--gp-card); border: 1px solid var(--gp-line); box-shadow: 0 1px 2px rgba(20, 25, 40, .04), 0 24px 60px -34px rgba(20, 25, 40, .45); }
.gp-fcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #163fbf, #1e4fe0 45%, #3e7bff); }
.gp-fcard-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.gp-ftools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.gp-fbody { display: grid; gap: 16px; }
.gp-frow { display: grid; grid-template-columns: repeat(var(--gp-fcols, 4), minmax(0, 1fr)); gap: 12px; }
.gp-fcol { position: relative; min-width: 0; }
.gp-flabel { display: block; margin: 0 0 6px 2px; color: #6b7280; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-ficon { flex: none; width: 18px; margin-right: 10px; color: #8b93a5; font-size: 14px; text-align: center; }
.gp .gp-field { position: relative; display: flex; align-items: center; width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #d6d9e0; background: var(--gp-card); color: var(--gp-ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; margin: 0; }
.gp .gp-field:hover, .gp-split:hover { border-color: #a9b1c2; }
.gp-fcol.is-open .gp-field, .gp .gp-field:focus-within, .gp-split:focus-within { border-color: var(--gp-accent); box-shadow: 0 0 0 4px var(--gp-accent-bg); }
.gp-fcol.is-open .gp-ficon, .gp-field:focus-within .gp-ficon, .gp-split:focus-within .gp-ficon { color: var(--gp-accent); }
.gp-ftext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8b93a5; }
.gp-field.has-value .gp-ftext { color: var(--gp-ink); font-weight: 600; }
.gp-fclear { display: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; border-radius: 50%; background: var(--gp-soft); color: var(--gp-sub); font-size: 11px; }
.gp-fclear:hover { background: var(--gp-soft-2); color: var(--gp-ink); }
.gp-field.has-value .gp-fclear { display: inline-flex; }
.gp-field.has-value .gp-chev { display: none; }
.gp-chev { flex: none; margin-left: 6px; color: #9d9fa5; cursor: pointer; transition: transform .15s; }
.gp-fcol.is-open .gp-field .gp-chev { transform: rotate(180deg); }
.gp-field-input input { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--gp-ink); font: inherit; font-size: 14.5px; padding: 0; }
.gp-field-input input::placeholder { color: #8b93a5; }
.gp .gp-field-input { cursor: text; }
.gp-fsearch { flex: 1 1 360px; min-width: 0; max-width: 560px; }
.gp-split { display: flex; align-items: center; height: 50px; padding-left: 14px; border-radius: 12px; border: 1.5px solid #d6d9e0; background: var(--gp-card); transition: border-color .15s, box-shadow .15s; }
.gp-half { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; padding: 0 10px; position: relative; }
.gp-half + .gp-half { border-left: 1px solid var(--gp-line); }
.gp-half.is-open { background: var(--gp-accent-bg); border-radius: 8px; }
.gp-half input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: none; background: none; padding: 0; color: var(--gp-ink); font: inherit; font-size: 14.5px; font-weight: 600; }
.gp-half input::placeholder { color: #8b93a5; font-weight: 500; }
.gp-half .gp-chev { margin-left: 4px; }
.gp-fcol.has-value .gp-split { border-color: color-mix(in srgb, var(--gp-accent) 55%, #d6d9e0); }
.gp-fcol.is-invalid .gp-split { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .12); animation: gpShake .3s; }
@keyframes gpShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gp-ferr { margin: 6px 0 0 2px; color: #e11d48; font-size: 12px; font-weight: 700; }
.gp-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 100%; max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--gp-card); box-shadow: 0 20px 50px -20px rgba(20, 25, 40, .45), 0 0 0 1px rgba(20, 25, 40, .06); animation: gpFade .12s ease; }
.gp-pop-clear { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 9px 12px; border-bottom: 1px solid var(--gp-line); border-radius: 8px 8px 0 0; color: var(--gp-sub); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gp-pop-clear:hover { background: var(--gp-accent-bg); color: var(--gp-accent); }
.gp-pop-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; cursor: pointer; transition: background .12s; }
.gp-pop-item:hover { background: var(--gp-accent-bg); color: var(--gp-accent); }
.gp-pop-item.is-selected { background: var(--gp-accent-bg); }
.gp-pop-item.is-selected .gp-pi-name { color: var(--gp-accent); }
.gp-pop-item.is-zero { opacity: .45; }
.gp-pi-check { position: relative; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid #d7d8dc; }
.gp-pop-item.is-selected .gp-pi-check { background: var(--gp-accent); border-color: var(--gp-accent); }
.gp-pop-item.is-selected .gp-pi-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.gp-pi-name { flex: 1; font-weight: 700; }
.gp-pi-count { flex: none; color: #9aa2b1; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.gp-pop-empty { padding: 14px 12px; color: var(--gp-sub); font-size: 13.5px; text-align: center; }
.gp-ffoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 20px; }
.gp-ffoot-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gp-found { color: var(--gp-sub); font-size: 14px; font-weight: 600; }
.gp-found b { color: var(--gp-ink); font-weight: 800; }
.gp .gp-freset { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--gp-line); background: none; color: var(--gp-sub); font-size: 13px; font-weight: 700; cursor: pointer; }
.gp .gp-freset:hover { border-color: #e11d48; color: #e11d48; }
.gp .gp-ftoggle { display: none; }
.gp-fbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gp-accent); color: #fff; font-size: 11.5px; font-weight: 800; }
.gp-view { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--gp-soft); }
.gp-view button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--gp-sub); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gp-view button:hover { color: var(--gp-ink); }
.gp-view button.is-active { background: var(--gp-card); color: var(--gp-accent); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.gp mark { padding: 0 1px; border-radius: 3px; background: rgba(255, 196, 0, .35); color: inherit; }
html[data-theme="dark"] .gp-flabel { color: #9aa4b2; }
html[data-theme="dark"] .gp .gp-field, html[data-theme="dark"] .gp-split, html[data-theme="dark"] .gp .gp-ftoggle { background: #1e2430; border-color: #333a48; }
html[data-theme="dark"] .gp-pop { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px #262b36; }
html[data-theme="dark"] .gp-pi-check { border-color: #3a4252; }
html[data-theme="dark"] .gp mark { background: rgba(255, 196, 0, .28); }
.gp-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 360px; margin: 0; }
.gp-search i { position: absolute; left: 14px; color: var(--gp-faint); font-size: 13px; pointer-events: none; }
.gp-search input { width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: 12px; border: 1px solid var(--gp-line); background: var(--gp-card); color: var(--gp-ink); font: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.gp-search input:focus { border-color: var(--gp-accent); box-shadow: 0 0 0 3px var(--gp-accent-bg); }
.gp-search-sm { flex: 0 1 280px; }
.gp-param-filter { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--gp-accent); color: #fff; font-size: 13px; font-weight: 700; max-width: 100%; }
.gp-param-filter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-param-filter button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer; flex: none; }

/* вид «Таблица» — строится в js/generation-page.js из data-атрибутов карточек */
/* position: relative — иначе скрытые input галочек «Сравнить» (position: absolute) не обрезаются лентой и раздвигают страницу на телефоне */
.gp-ttable-scroll { position: relative; overflow-x: auto; border-radius: 20px; border: 1px solid var(--gp-line); background: var(--gp-card); box-shadow: var(--gp-shadow); }
.gp-ttable { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.gp-ttable th, .gp-ttable td { padding: 12px 16px; border-bottom: 1px solid var(--gp-line-soft); text-align: left; vertical-align: middle; }
.gp-ttable tbody tr:last-child td { border-bottom: 0; }
.gp-ttable thead th { background: var(--gp-soft); color: var(--gp-sub); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border-bottom-color: var(--gp-line); }
.gp-ttable th[data-sort] { cursor: pointer; user-select: none; }
.gp-ttable th[data-sort]:hover { color: var(--gp-ink); }
.gp-ttable th[data-sort]::after { content: "↕"; margin-left: 6px; opacity: .35; }
.gp-ttable th.is-sorted { color: var(--gp-accent); }
.gp-ttable th.is-sorted[data-dir="asc"]::after { content: "↑"; opacity: 1; }
.gp-ttable th.is-sorted[data-dir="desc"]::after { content: "↓"; opacity: 1; }
.gp-ttable td { color: var(--gp-text); }
.gp-ttable td small { display: block; margin-top: 2px; color: var(--gp-faint); font-size: 12px; font-weight: 600; }
.gp-ttable .is-num { text-align: right; white-space: nowrap; }
.gp-ttable .is-num b { color: var(--gp-ink); font-weight: 800; }
.gp-ttable tbody tr:hover td { background: var(--gp-soft); }
.gp-trow.is-selected td { background: var(--gp-accent-bg); }
.gp-trow.is-flash td { animation: gpFlashRow 2.2s ease; }
.gp .gp-tname-btn { padding: 0; border: 0; background: none; color: var(--gp-ink); font-size: 14.5px; font-weight: 800; text-align: left; cursor: pointer; }
.gp .gp-tname-btn:hover { color: var(--gp-accent); text-decoration: underline; }
.gp-ttable .gp-tcmp { width: 1%; text-align: center; }

/* зоны прокрутки у краёв ленты — таблица сравнения, карусель «Другие поколения» (как на главной) */
.gp-edge { position: relative; }
.gp-edge-btn { position: absolute; top: 0; bottom: 0; z-index: 6; display: flex; align-items: center; width: 64px; padding: 0 6px; border: 0; cursor: pointer; background: none; transition: opacity .2s; }
.gp-edge-btn.is-left { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--gp-edge-bg, var(--gp-card)) 30%, transparent); }
.gp-edge-btn.is-right { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--gp-edge-bg, var(--gp-card)) 30%, transparent); }
.gp-edge-btn.is-hidden { opacity: 0; pointer-events: none; }
.gp-edge-btn span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gp-card); color: var(--gp-ink); font-size: 13px; box-shadow: 0 4px 14px rgba(20, 20, 25, .18); transition: background .15s, color .15s, transform .15s; }
.gp-edge-btn:hover span { background: var(--gp-ink); color: var(--gp-card); transform: scale(1.08); }
.gp .gx-carousel { --gp-edge-bg: var(--bg-body, #f8f9fa); }
.gp .gx-carousel .gx-gens { scrollbar-width: none; gap: 16px; padding: 4px 2px 16px; scroll-snap-type: none; cursor: grab; }
.gp .gx-carousel .gx-gens::-webkit-scrollbar { display: none; }
.gp .gx-carousel .gx-gens.is-dragging { cursor: grabbing; user-select: none; }
.gp .gx-carousel .gx-gens.is-dragging a { pointer-events: none; }
.gp .gx-carousel .gx-gen { flex: 0 0 260px; }
.gp .gx-carousel .gx-gen img { -webkit-user-drag: none; }
.gp .gx-carousel .gp-edge-btn { bottom: 16px; }
html[data-theme="dark"] .gp .gx-carousel { --gp-edge-bg: #10131a; }
@media (hover: none) {
    .gp-edge-btn { display: none; }
    .gp .gx-carousel .gx-gens { scroll-snap-type: x mandatory; cursor: auto; }
}

.gp-trims { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.gp-trim { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--gp-card); border: 1px solid var(--gp-line); transition: box-shadow .2s, transform .2s, border-color .2s; scroll-margin-top: 72px; }
.gp-trim:hover { box-shadow: var(--gp-shadow-lg); transform: scale(1.02); }
.gp-trim.is-selected { border-color: color-mix(in srgb, var(--gp-accent) 45%, var(--gp-line)); }
.gp-trim.is-flash { animation: gpFlashCard 2s ease; }
@keyframes gpFlashCard { 0%, 30% { box-shadow: 0 0 0 3px var(--gp-accent); } 100% { box-shadow: none; } }
.gp-trim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gp-trim-name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--gp-ink); }
.gp-trim-years { flex: none; color: var(--gp-faint); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gp-trim-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-trim-metrics { display: grid; grid-template-columns: repeat(var(--gp-metrics, 3), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px; border-radius: 12px; background: var(--gp-soft); }
.gp-trim-metrics div { min-width: 0; }
.gp-trim-metrics dt { color: var(--gp-faint); font-size: 11.5px; font-weight: 600; }
.gp-trim-metrics dd { margin: 2px 0 0; color: var(--gp-ink); font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-trim-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.gp-cmp-check { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--gp-sub); font-size: 14px; font-weight: 700; cursor: pointer; user-select: none; }
.gp-cmp-check input { position: absolute; opacity: 0; pointer-events: none; }
.gp-cmp-check span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--gp-line); color: transparent; font-size: 11px; transition: background .15s, box-shadow .15s, color .15s; }
.gp-cmp-check input:checked + span { background: var(--gp-accent); box-shadow: none; color: #fff; }
.gp-cmp-check input:focus-visible + span { outline: 2px solid var(--gp-accent); outline-offset: 2px; }
.gp-cmp-check:hover { color: var(--gp-ink); }
.gp-more { margin-top: 24px; }
.gp-more-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; border-radius: 14px; border: 1.5px dashed var(--gp-line); background: transparent; color: var(--gp-accent); font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s; }
.gp-more-btn:hover { background: var(--gp-accent-bg); border-color: var(--gp-accent); }
.gp-more-btn small { color: var(--gp-faint); font-size: 14px; font-weight: 700; }

/* ---------- 5. характеристики: общее и отличия ---------- */
.gp-specs-block + .gp-specs-block { margin-top: 48px; }
.gp-specs-title { flex-wrap: wrap; gap: 16px; }
.gp-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--gp-sub); font-size: 13px; font-weight: 600; }
.gp-legend .gp-state { margin-right: -8px; }
.gp-spec-grid { columns: 2; column-gap: 24px; }
.gp-spec-card, .gp-diff-sec { break-inside: avoid; margin-bottom: 24px; background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: 20px; padding: 20px 24px; box-shadow: var(--gp-shadow); }
.gp-spec-card-head, .gp-diff-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.gp-spec-card-head h4, .gp-diff-sec-head h4 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--gp-ink); }
.gp-spec-count { flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--gp-soft); color: var(--gp-sub); font-size: 12px; font-weight: 700; }
.gp-plist { list-style: none; margin: 0; padding: 0; }
.gp-prow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--gp-line-soft); font-size: 14px; }
.gp-prow:first-child { border-top: 0; }
.gp-pname { color: var(--gp-text); line-height: 1.4; }
.gp-prow.k-no .gp-pname { color: var(--gp-faint); }
.gp-pval { color: var(--gp-ink); font-weight: 700; text-align: right; max-width: 260px; line-height: 1.35; }
.gp-pval.is-muted { font-weight: 600; }
.gp-plist-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--gp-accent); font-size: 13.5px; font-weight: 800; cursor: pointer; }
.gp-plist-more:hover { text-decoration: underline; }
[data-gp-collapse]:not(.is-open) .is-extra { display: none; }
.gp-specs.is-searching .is-extra { display: grid; }
.gp-specs.is-searching .gp-diff-row.is-extra { display: grid; }
.gp-specs.is-searching .gp-plist-more { display: none; }
.gp-specs.is-searching .is-miss { display: none !important; }
.gp-prow.is-hit, .gp-diff-row.is-hit { background: linear-gradient(90deg, var(--gp-accent-bg), transparent); }

.gp-diff-row { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--gp-line-soft); scroll-margin-top: 72px; }
.gp-diff-sec-head + .gp-diff-row { border-top: 0; }
.gp-diff-name span { display: block; color: var(--gp-ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.gp-diff-name small { display: block; margin-top: 2px; color: var(--gp-faint); font-size: 12.5px; font-weight: 600; }
.gp-diff-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.gp-range { color: var(--gp-accent); font-size: 15px; font-weight: 800; margin-right: 4px; }
.gp-vchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px 10px; border-radius: 999px; background: var(--gp-soft); color: var(--gp-text); font-size: 13px; font-weight: 600; line-height: 1.3; }
.gp-vchip small { color: var(--gp-faint); font-weight: 800; font-size: 11.5px; }
.gp-vchip .gp-state { width: 14px; height: 14px; vertical-align: 0; }
.gp-vchip .gp-state.k-yes::after { left: 4.5px; top: 2px; width: 4px; height: 7px; }
.gp-vchip .gp-state.k-no::before, .gp-vchip .gp-state.k-no::after { left: 3px; top: 6px; width: 8px; }
.gp-vchip.is-extra-v { display: none; }
.gp-vmore { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--gp-line); color: var(--gp-sub); font-size: 12.5px; font-weight: 800; cursor: pointer; }
.gp-diff-actions { display: flex; align-items: center; gap: 16px; justify-self: end; }
.gp-breakdown { grid-column: 1 / -1; margin-top: 8px; padding: 16px; border-radius: 14px; background: var(--gp-soft); display: grid; gap: 16px; }
.gp-bd-group { min-width: 0; }
.gp-bd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.gp-bd-head b { color: var(--gp-ink); font-weight: 800; }
.gp-bd-head span { color: var(--gp-faint); font-weight: 600; font-size: 13px; }
.gp-bd-trims { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-bd-trims button { height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--gp-line); background: var(--gp-card); color: var(--gp-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.gp-bd-trims button:hover { border-color: var(--gp-accent); color: var(--gp-accent); }

/* ---------- 6. сравнение ---------- */
.gp-cmp-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gp-switch { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--gp-ink); font-size: 14px; font-weight: 700; cursor: pointer; user-select: none; }
.gp-switch input { position: absolute; opacity: 0; pointer-events: none; }
.gp-switch-ui { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--gp-soft-2); transition: background .2s; flex: none; }
.gp-switch-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.gp-switch input:checked + .gp-switch-ui { background: var(--gp-accent); }
.gp-switch input:checked + .gp-switch-ui::after { transform: translateX(18px); }
.gp-switch input:focus-visible + .gp-switch-ui { outline: 2px solid var(--gp-accent); outline-offset: 2px; }
.gp-cmp { position: relative; transition: opacity .2s; }
.gp-cmp.is-loading { opacity: .45; pointer-events: none; }
.gp-cmp-scroll { max-height: min(78vh, 920px); overflow: auto; border-radius: 20px; border: 1px solid var(--gp-line); background: var(--gp-card); box-shadow: var(--gp-shadow); overscroll-behavior: contain; }
.gp-cmp-table { width: 100%; min-width: calc(260px + var(--gp-cols, 4) * 190px); border-collapse: separate; border-spacing: 0; font-size: 14px; }
.gp-cmp-table th, .gp-cmp-table td { padding: 12px 16px; border-bottom: 1px solid var(--gp-line-soft); text-align: left; vertical-align: middle; background: var(--gp-card); }
.gp-cmp-table tbody th { position: sticky; left: 0; z-index: 2; width: 260px; min-width: 220px; color: var(--gp-sub); font-weight: 600; line-height: 1.4; box-shadow: 1px 0 0 var(--gp-line); }
.gp-cmp-table thead th { position: sticky; top: 0; z-index: 3; vertical-align: top; border-bottom: 1px solid var(--gp-line); box-shadow: 0 1px 0 var(--gp-line); }
.gp-cmp-table thead th.gp-cmp-corner { left: 0; z-index: 4; box-shadow: 1px 1px 0 var(--gp-line); }
.gp-cmp-corner span { display: block; color: var(--gp-ink); font-size: 15px; font-weight: 800; }
.gp-cmp-corner small { display: block; margin-top: 2px; color: var(--gp-faint); font-size: 12.5px; font-weight: 600; }
.gp-cmp-trim { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.gp-cmp-trim b { color: var(--gp-ink); font-size: 15px; font-weight: 800; line-height: 1.3; }
.gp-cmp-trim > span { color: var(--gp-faint); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.gp-cmp-trim-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.gp-cmp-remove { width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--gp-soft); color: var(--gp-sub); cursor: pointer; flex: none; }
.gp-cmp-remove:hover { background: #ffe4e8; color: #e11d48; }
.gp-cmp-table td { color: var(--gp-ink); font-weight: 600; line-height: 1.4; }
.gp-cmp-table td.is-best { background: var(--gp-best-bg); color: var(--gp-best); font-weight: 800; }
.gp-cmp-sec th, .gp-cmp-sec td { background: var(--gp-soft); border-bottom-color: var(--gp-line); padding-top: 10px; padding-bottom: 10px; }
.gp-cmp-sec-name { display: inline-flex; align-items: center; gap: 8px; color: var(--gp-ink); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.gp-cmp-sec-name i { color: var(--gp-accent); }
.gp-cmp.only-diff .is-same:not(.is-forced) { display: none; }
.gp-cmp-row.is-flash th, .gp-cmp-row.is-flash td { animation: gpFlashRow 2.4s ease; }
@keyframes gpFlashRow { 0%, 35% { background: var(--gp-accent-bg); box-shadow: inset 0 2px 0 var(--gp-accent), inset 0 -2px 0 var(--gp-accent); } 100% { } }
.gp-cmp-allsame { margin: 16px 0 0; color: var(--gp-sub); font-size: 14px; text-align: center; }
.gp-cmp:not(.only-diff) .gp-cmp-allsame { display: none; }

/* ---------- шторка характеристик версии ---------- */
.gp-sheet { position: fixed; inset: 0; z-index: 1065; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gp-sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 20, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: gpFade .2s ease; }
.gp-sheet-panel { position: relative; width: min(1040px, 100%); max-height: min(88vh, 960px); overflow: auto; overscroll-behavior: contain; border-radius: 24px; background: var(--gp-card); box-shadow: var(--gp-shadow-lg); animation: gpPop .25s cubic-bezier(.2, .8, .3, 1); }
.gp-sheet.is-closing .gp-sheet-panel { animation: gpPopOut .18s ease forwards; }
.gp-sheet.is-closing .gp-sheet-backdrop { animation: gpFadeOut .18s ease forwards; }
@keyframes gpFade { from { opacity: 0; } }
@keyframes gpFadeOut { to { opacity: 0; } }
@keyframes gpPop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes gpPopOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }
.gp-sheet-grab { display: none; }
.gp-sheet-x { position: sticky; top: 16px; float: right; margin: 16px 16px 0 0; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--gp-soft); color: var(--gp-ink); font-size: 16px; cursor: pointer; }
.gp-sheet-x:hover { background: var(--gp-soft-2); }
.gp-sheet-content { min-height: 240px; }
.gp-sheet-content.is-loading { display: flex; align-items: center; justify-content: center; }
.gp-sheet-content.is-loading::after { content: ""; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--gp-accent-bg); border-top-color: var(--gp-accent); animation: gpSpin .8s linear infinite; }
@keyframes gpSpin { to { transform: rotate(360deg); } }
.gp-sheet-head { padding: 32px 32px 0; }
.gp-sheet-title { font-family: var(--gp-head); font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--gp-ink); margin: 0 56px 4px 0; }
.gp-sheet-sub { margin: 0 0 16px; color: var(--gp-sub); font-size: 14px; }
.gp-summary { display: flex; gap: 16px; margin: 24px 32px 0; padding: 16px 20px; border-radius: 16px; background: var(--gp-soft); border: 1px solid var(--gp-line-soft); }
.gp-summary p { margin: 0; color: var(--gp-text); font-size: 14.5px; line-height: 1.65; }
.gp-summary-more { display: none; margin-top: 6px; }
.gp-summary.is-open .gp-summary-more i { transform: rotate(180deg); }
.gp-show-sm { display: none; }
.gp-tabs { gap: 6px; margin: 24px 32px 0; padding-bottom: 2px; }
.gp-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--gp-line); background: var(--gp-card); color: var(--gp-sub); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gp-tabs button i { font-size: 12px; }
.gp-tabs button small { color: var(--gp-faint); font-size: 11.5px; }
.gp-tabs button:hover { color: var(--gp-ink); }
.gp-tabs button.is-active { background: var(--gp-ink); border-color: var(--gp-ink); color: var(--gp-card); }
.gp-tabs button.is-active small { color: inherit; opacity: .7; }
.gp-sheet-sections { padding: 8px 32px 24px; }
.gp-sheet-sec { margin-top: 24px; }
.gp-sheet-sec h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--gp-ink); }
.gp-sheet-sections[data-active] .gp-sheet-sec { display: none; }
.gp-sheet-sections[data-active] .gp-sheet-sec.is-active { display: block; }
.gp-kv-2col { columns: 2; column-gap: 40px; }
.gp-kv-2col .gp-kv-row { break-inside: avoid; }
.gp-kv-2col .gp-kv-row:first-child { padding-top: 10px; border-top: 1px solid var(--gp-line-soft); }
.gp-kv-row.k-no dt, .gp-kv-row.k-no dd { color: var(--gp-faint); }
.gp-sheet-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 12px; padding: 16px 32px; background: var(--gp-card); border-top: 1px solid var(--gp-line); }

/* ---------- панель выбора для сравнения, уведомление ---------- */
.gp-cmpbar { position: fixed; left: 50%; bottom: 24px; z-index: 1040; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: #0b1220; color: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); transform: translateX(-50%); animation: gpBarIn .25s cubic-bezier(.2, .8, .3, 1); }
@keyframes gpBarIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.gp-cmpbar-text { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.gp-cmpbar-text b { font-weight: 800; }
.gp .gp-cmpbar .gp-btn { border-radius: 999px; }
.gp-cmpbar-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
html[data-theme="dark"] .gp-cmpbar { background: #eef1f6; color: #0b1220; }
html[data-theme="dark"] .gp-cmpbar-x { background: rgba(0, 0, 0, .08); color: #0b1220; }
.gp-toast { position: fixed; left: 50%; bottom: 96px; z-index: 1070; transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: #0b1220; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); animation: gpBarIn .2s ease; }

/* мобильная липкая кнопка «Подобрать» (есть только в шаблоне mobile) */
.gp-mcta { position: fixed; left: 12px; right: 12px; bottom: calc(var(--m-nav-h, 0px) + var(--m-safe-b, 0px) + 10px); z-index: 1025; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--gp-card); border: 1px solid var(--gp-line); box-shadow: var(--gp-shadow-lg); transform: translateY(calc(100% + 120px)); transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.gp-mcta.is-visible { transform: none; }
.gp-mcta-price { min-width: 0; display: flex; flex-direction: column; }
.gp-mcta-price small { color: var(--gp-sub); font-size: 12px; font-weight: 600; }
.gp-mcta-price b { color: var(--gp-ink); font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- блоки ниже (include/complectations/generation_extras.php) в том же ритме ---------- */
.gp .gx-section, .gp .gx-cta { margin-top: 64px; }
#gxOnSale, #gxGens { scroll-margin-top: 64px; }

/* ---------- адаптив ---------- */
@media (max-width: 1199.98px) {
    .gp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gp-tiles .gp-tile-sale:nth-child(n) { grid-column: auto; }
    .gp-tiles .gp-tile-sale:nth-child(odd) { grid-column: span 2; }
    .gp-title { font-size: 28px; }
}
@media (max-width: 991.98px) {
    .gp { --gp-gap: 48px; }
    .gp-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .gp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gp-tiles .gp-tile-sale:nth-child(n) { grid-column: auto; }
    .gp-tiles .gp-tile-sale:nth-child(3n+1) { grid-column: span 3; }
    .gp-tiles .gp-tile-sale:nth-child(3n+2) { grid-column: span 2; }
    .gp-overview { grid-template-columns: minmax(0, 1fr); }
    .gp-spec-grid { columns: 1; }
    .gp-diff-row { grid-template-columns: minmax(0, 1fr) auto; }
    .gp-diff-vals { grid-column: 1 / -1; grid-row: 2; }
    .gp-diff-actions { grid-row: 1; grid-column: 2; }
    .gp-kv-2col { columns: 1; }
    .gp-nav-cta .gp-btn { padding: 0 14px; }
    .gp-nav-price { display: none; }
}
@media (max-width: 767.98px) {
    .gp { --gp-gap: 40px; --gp-pad: 16px; --gp-top: var(--hdr-height, 64px); }
    .gp-h2 { font-size: 21px; }
    .gp-title { font-size: 23px; }
    .gp-eyebrow { font-size: 11px; margin-bottom: 6px; }
    .gp-hero-info { gap: 16px; }
    .gp-gallery-main { border-radius: 16px; aspect-ratio: 4 / 3; margin: 0 -4px; }
    .gp-gallery-nav { opacity: 1; width: 36px; height: 36px; margin-top: -18px; }
    .gp-gallery-nav.is-prev { left: 10px; }
    .gp-gallery-nav.is-next { right: 10px; }
    .gp-thumb { width: 72px; height: 52px; }
    .gp-chips.gp-scroll-x, .gp-thumbs { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .gp-nav-links { padding: 0 16px; scroll-padding: 0 16px; }
    /* хлебные крошки над страницей: длинная цепочка («… / 1 поколение Купе») растягивала flex-строку и всю страницу — пусть листается сама */
    .catalog-toolbar-row > * { min-width: 0; max-width: 100%; }
    .gp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .gp-tiles .gp-tile-sale:nth-child(n) { grid-column: auto; }
    .gp-tiles .gp-tile-sale:nth-child(odd) { grid-column: span 2; }
    .gp-tile { padding: 12px 14px; }
    .gp-tile-value { font-size: 16px; }
    .gp-hero-cta .gp-btn { width: 100%; }
    .gp-nav { margin: 24px -16px 0; border-radius: 0; border-left: 0; border-right: 0; padding: 6px 0; }
    .gp-nav-cta { display: none; }
    .gp .gp-nav-links a { height: 36px; padding: 0 14px; font-size: 13.5px; }
    .gp-overview { margin-top: 32px; gap: 16px; }
    .gp-sec-head { gap: 16px; margin-bottom: 16px; }
    /* фильтр на телефоне: строка поиска + «Фильтры» (раскрывает поля), сортировка и вид — строкой ниже */
    .gp-fcard { padding: 16px; border-radius: 18px; margin-bottom: 16px; }
    .gp-fcard::before { border-radius: 18px 18px 0 0; }
    .gp-fcard-bar { margin-bottom: 0; gap: 10px; }
    .gp-fsearch { flex: 1 1 0; max-width: none; }
    .gp .gp-fsearch { height: 46px; }
    .gp .gp-ftoggle { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #d6d9e0; background: var(--gp-card); color: var(--gp-ink); font-size: 14px; font-weight: 700; }
    .gp .gp-ftoggle i { color: var(--gp-accent); }
    .gp-fcard.is-open .gp-ftoggle { border-color: var(--gp-accent); color: var(--gp-accent); }
    .gp-ftools { width: 100%; margin-left: 0; justify-content: space-between; }
    .gp-ftools .gp-select span { display: none; }
    .gp-ftools .gp-select select { max-width: 190px; }
    .gp-view button { padding: 0 12px; }
    .gp-view button span { display: none; }
    .gp-fbody { display: none; margin-top: 16px; }
    .gp-fcard.is-open .gp-fbody { display: grid; }
    .gp-frow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
    .gp-ffoot { margin-top: 12px; }
    .gp-split, .gp .gp-field { height: 46px; }
    .gp-split { padding-left: 10px; }
    .gp-ficon { margin-right: 4px; width: 16px; font-size: 13px; }
    .gp-half { padding: 0 6px; }
    .gp-half .gp-chev { display: none; }
    .gp-flabel { font-size: 10.5px; }
    .gp-ttable { font-size: 13px; min-width: 700px; }
    .gp-ttable th, .gp-ttable td { padding: 10px 12px; }
    .gp-ttable td:first-child, .gp-ttable th:first-child { position: sticky; left: 0; z-index: 1; background: var(--gp-card); box-shadow: 1px 0 0 var(--gp-line); }
    .gp-ttable thead th:first-child { z-index: 2; background: var(--gp-soft); }
    .gp-ttable td:first-child { min-width: 136px; }
    .gp-ttable-scroll { border-radius: 16px; }
    .gp-search, .gp-search-sm { max-width: none; flex: 1 1 auto; width: 100%; }
    .gp-trims { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .gp-trim { padding: 16px; gap: 12px; }
    .gp-trim:hover { transform: none; box-shadow: none; }
    .gp-spec-card, .gp-diff-sec { padding: 16px; margin-bottom: 16px; border-radius: 18px; }
    .gp-prow { font-size: 13.5px; gap: 10px; }
    .gp-pval { max-width: 50%; }
    .gp-diff-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .gp-diff-actions { grid-row: auto; grid-column: 1; justify-self: start; }
    .gp-legend { font-size: 12px; }
    .gp-cmp-tools { width: 100%; justify-content: space-between; }
    .gp-cmp-tools .gp-select { flex: 1; }
    .gp-cmp-tools .gp-select select { width: 100%; max-width: none; }
    .gp-sheet { padding: 0; align-items: flex-end; }
    .gp-sheet-panel { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; animation: gpSheetUp .3s cubic-bezier(.2, .8, .3, 1); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .gp-sheet.is-closing .gp-sheet-panel { animation: gpSheetDown .2s ease forwards; }
    @keyframes gpSheetUp { from { transform: translateY(100%); } }
    @keyframes gpSheetDown { to { transform: translateY(100%); } }
    .gp-sheet-grab { display: block; position: sticky; top: 0; z-index: 4; height: 22px; background: var(--gp-card); }
    .gp-sheet-grab::after { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--gp-line); }
    .gp-sheet-x { top: 22px; width: 34px; height: 34px; margin: 0 12px 0 0; font-size: 14px; }
    .gp-sheet-head { padding: 4px 16px 0; }
    .gp-sheet-title { font-size: 20px; margin-right: 44px; }
    .gp-summary { margin: 16px 16px 0; padding: 14px; gap: 12px; }
    .gp-summary .gp-ico { display: none; }
    .gp-summary p { font-size: 14px; }
    .gp-tabs { margin: 16px 0 0; padding: 0 16px 2px; position: sticky; top: 22px; z-index: 3; background: var(--gp-card); padding-top: 8px; padding-bottom: 8px; }
    .gp-sheet-sections { padding: 0 16px 16px; }
    .gp-sheet-sec { margin-top: 16px; }
    .gp-sheet-actions { z-index: 4; padding: 12px 16px; }
    .gp-sheet-actions .gp-btn { flex: 1; padding: 0 12px; }
    .gp-sheet-actions .gp-btn-soft { flex: 0 1 auto; }
    .gp-hide-sm { display: none; }
    .gp-show-sm { display: inline; }
    .gp-summary p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .gp-summary.is-open p { display: block; -webkit-line-clamp: unset; }
    .gp-summary-more { display: inline-flex; }
    .gp-cmpbar { bottom: calc(var(--m-nav-h, 0px) + var(--m-safe-b, 0px) + 12px); max-width: calc(100% - 24px); padding-left: 16px; }
    .gp-toast { bottom: calc(var(--m-nav-h, 0px) + var(--m-safe-b, 0px) + 84px); max-width: calc(100% - 32px); }
    .gp .gx-section, .gp .gx-cta, .gp .mgx-section, .gp .mgx-cta { margin-top: 40px; }
}

/* ---------- мобильное сравнение карточками (шаблон mobile) ---------- */
.gp-mcmp-legend { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.gp-mcmp-legend::-webkit-scrollbar { display: none; }
.gp-mcmp-trim { flex: 1 1 0; min-width: 104px; padding: 12px; border-radius: 14px; background: var(--gp-card); border: 1px solid var(--gp-line); position: relative; }
.gp-mcmp-trim b { display: block; padding-right: 28px; color: var(--gp-ink); font-size: 14px; font-weight: 800; line-height: 1.3; }
.gp-mcmp-trim span { display: block; margin-top: 2px; color: var(--gp-faint); font-size: 12px; line-height: 1.35; }
.gp-mcmp-trim .gp-cmp-remove { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }
.gp-mcmp-trim .gp-link-btn { margin-top: 8px; font-size: 12.5px; }
.gp-mcmp-tag { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: var(--gp-accent); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.gp-mcmp-sec { margin-top: 20px; }
.gp-mcmp-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--gp-ink); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.gp-mcmp-sec h4 i { color: var(--gp-accent); }
.gp-mcmp-card { padding: 12px 14px; border-radius: 14px; background: var(--gp-card); border: 1px solid var(--gp-line); margin-bottom: 8px; scroll-margin-top: 72px; }
.gp-mcmp-name { color: var(--gp-sub); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.gp-mcmp-vals { display: grid; grid-template-columns: repeat(var(--gp-cols, 2), minmax(0, 1fr)); gap: 8px; }
.gp-mcmp-val { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--gp-soft); color: var(--gp-ink); font-size: 13.5px; font-weight: 700; line-height: 1.35; word-break: break-word; }
.gp-mcmp-val .gp-mcmp-tag { width: 18px; height: 18px; font-size: 10.5px; }
.gp-mcmp-val.is-best { background: var(--gp-best-bg); color: var(--gp-best); }
.gp-mcmp-card.is-flash { animation: gpFlashCard 2.2s ease; }
.gp-cmp.only-diff .gp-mcmp-card.is-same:not(.is-forced), .gp-cmp.only-diff .gp-mcmp-sec.is-same:not(.is-forced) { display: none; }

/* ---------- шаблон mobile (корень .gp.gp-m): системный шрифт и палитра мобильной версии ---------- */
.gp.gp-m {
    --gp-head: var(--m-font, -apple-system, 'Segoe UI', Roboto, sans-serif);
    --gp-ink: var(--m-text, #0b0b0c);
    --gp-sub: var(--m-sub, #8e8e93);
    --gp-line: var(--m-border, #e2e2e6);
    --gp-soft: var(--m-row, #f2f2f4);
    --gp-soft-2: var(--m-row-2, #e9e9ec);
    --gp-card: var(--m-card, #fff);
    --gp-accent: var(--m-blue, #3478f7);
    --gp-accent-bg: var(--m-blue-bg, #eaf1fe);
    --gp-nav-bg: var(--m-page, #fff);
    font-family: var(--m-font, -apple-system, 'Segoe UI', Roboto, sans-serif);
}
html[data-theme="dark"] .gp.gp-m { --gp-accent: #6f9bff; --gp-nav-bg: var(--m-page, #0f1218); }
.gp-m .gp-h2, .gp-m .gp-title, .gp-m .gp-sheet-title, .gp-m .gp-tile-value { font-weight: 800; letter-spacing: -.01em; }
.gp-m .gp-title { font-size: 24px; }
.gp-m .gp-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
.gp-m .gp-mcmp-legend { position: sticky; top: calc(var(--gp-top) + 48px); z-index: 5; padding-top: 8px; padding-bottom: 8px; margin-bottom: 8px; background: var(--m-page, #fff); }
.gp-m .gp-mcmp-note { margin: 0 0 4px; color: var(--gp-sub); font-size: 13px; font-weight: 600; }
.gp-m .gp-cmp-tools { gap: 12px; }
.gp-m .gp-trim-actions .gp-btn { flex: 1; }
.gp-m .gp-cmpbar { left: 12px; right: 12px; transform: none; justify-content: space-between; max-width: none; }
@keyframes gpBarInM { from { opacity: 0; transform: translateY(16px); } }
.gp-m .gp-cmpbar { animation-name: gpBarInM; }
.gp-m h2.gp-h3 { font-size: 17px !important; } /* mobile.css: h2 { font-size: 20px !important } */

/* ---------- «Владельцы об этом поколении» (статьи владельцев, model/inc/owner_posts.php) ---------- */
.gp-op-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gp-op-card, .gp-op-write { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--gp-card); border: 1px solid var(--gp-line); box-shadow: var(--gp-shadow); color: var(--gp-text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.gp-op-card:hover, .gp-op-write:hover { transform: scale(1.02); box-shadow: var(--gp-shadow-lg); color: var(--gp-text); }
.gp-op-cover { position: relative; aspect-ratio: 16 / 10; background: var(--gp-soft); }
.gp-op-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-op-cover em { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(11, 18, 32, .72); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }
.gp-op-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.gp-op-body b { color: var(--gp-ink); font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gp-op-body small { color: var(--gp-sub); font-size: 13px; font-weight: 700; }
.gp-op-body small i { color: var(--gp-ok); }
.gp-op-meta { color: var(--gp-faint); font-size: 12.5px; font-weight: 600; }
.gp-op-meta i { color: #f59e0b; }
.gp-op-write { align-items: flex-start; justify-content: center; gap: 8px; padding: 24px; background: var(--gp-accent-bg); border-style: dashed; box-shadow: none; }
.gp-op-write i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--gp-accent); color: #fff; font-size: 18px; }
.gp-op-write b { color: var(--gp-ink); font-size: 16px; }
.gp-op-write span { color: var(--gp-sub); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 991.98px) { .gp-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .gp-op-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; }
    .gp-op-card, .gp-op-write { flex: 0 0 78%; scroll-snap-align: start; }
}
/* переключатели FEATURE_GEN_TRIMS_FILTER / FEATURE_GEN_COMPARE (config/features.php): без фильтра — только поиск, сортировка и вид; без сравнения — без галочек «Сравнить» */
.gp-no-filter .gp-ftoggle, .gp-no-filter .gp-fbody { display: none !important; }
.gp-no-compare .gp-cmp-check, .gp-no-compare .gp-tcmp, .gp-no-compare .gp-cmpbar, .gp-no-compare [data-gp-cmp-bar] { display: none !important; }