/* ============================================================
   Fonts
   ============================================================ */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Inter/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Inter/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Inter/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Inter/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Inter/Inter-ExtraBold.woff2') format('woff2'); }

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/BarlowCondensed/BarlowCondensed-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/BarlowCondensed/BarlowCondensed-ExtraBold.woff2') format('woff2'); }

/* ============================================================
   MotoCatalog — Design System
   ============================================================ */

:root {
    --color-bg: #0e0f12;
    --color-bg-soft: #14161b;
    --color-bg-elev: #1a1d24;
    --color-line: #262a33;
    --color-text: #ecedef;
    --color-text-soft: #a5acba;
    --color-text-muted: #6b7280;
    --color-accent: #ff5b1f;
    --color-accent-soft: #ff7a47;
    --color-accent-dim: rgba(255, 91, 31, 0.12);
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .45);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --container: 1400px;
    --container-narrow: 960px;
}

/* Light theme */
[data-theme="light"] {
    --color-bg: #f4f5f7;
    --color-bg-soft: #ffffff;
    --color-bg-elev: #eaecf1;
    --color-line: #dde0e8;
    --color-text: #0e0f12;
    --color-text-soft: #374151;
    --color-text-muted: #6b7280;
    --color-accent: #e0420a;
    --color-accent-soft: #ff5b1f;
    --color-accent-dim: rgba(224, 66, 10, 0.09);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .07);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .13);
}

* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
}

html {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-text);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--color-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .6em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.025em;
}

h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing: -.02em;
}

h3 {
    font-size: 1.25rem;
}

p {
    margin: 0 0 1em;
    color: var(--color-text-soft);
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: 64px;
}

.section--tight {
    padding-block: 40px;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.section-head h2 {
    margin: 0;
}

.section-head__sub {
    color: var(--color-text-soft);
    margin: 0;
}

.link-more {
    color: var(--color-accent);
    font-weight: 600;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.link-more::after {
    content: '→';
    transition: transform .2s ease;
}

.link-more:hover::after {
    transform: translateX(3px);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
    user-select: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 8px 24px -8px var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-soft);
    color: #fff;
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-line);
}

.btn-ghost:hover {
    background: var(--color-bg-elev);
    color: var(--color-text);
}

.btn-lg {
    padding: 16px 28px;
    font-size: 1rem;
}

.btn-sm {
    padding: 8px 14px;
    font-size: .85rem;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--color-line);
    transition: background .2s;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 56px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;
    color: var(--color-text);
}

.brand__logo {
    height: 28px;
    width: auto;
    display: block;
}

.brand__name {
    font-family: 'Barlow Condensed', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-text);
}

.brand:hover {
    color: var(--color-text);
}

.brand:hover .brand__logo {
    opacity: .85;
    transition: opacity .2s;
}

.main-nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

.main-nav a:not(.btn) {
    color: var(--color-text-soft);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: .95rem;
    transition: color .15s, background .15s;
}

.main-nav a:not(.btn):hover,
.main-nav a:not(.btn).is-active {
    color: var(--color-text);
    background: var(--color-bg-elev);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 6px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease, width .25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px) {
    .nav-toggle {
        display: inline-flex;
        order: -1;
    }

    .main-nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--color-bg-soft);
        border-bottom: 1px solid var(--color-line);
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 4px;
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s, transform .15s;
    }

    .main-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .main-nav a:not(.btn) {
        padding: 12px 16px;
        font-size: 1rem;
    }

    .main-nav .btn {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 4px;
    }

    .theme-toggle {
        margin-left: auto;
    }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 110px;
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(255, 91, 31, .18), transparent 60%),
        radial-gradient(700px 400px at 10% 110%, rgba(56, 189, 248, .10), transparent 60%),
        var(--color-bg);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 900px) {
    .hero {
        padding: 56px 0 64px;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 22px;
}

.hero__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 0 0 22px;
    letter-spacing: -.03em;
}

.hero__title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--color-accent), #ff8a1f 60%, #ffd084);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__lead {
    font-size: 1.15rem;
    color: var(--color-text-soft);
    max-width: 540px;
    margin: 0 0 32px;
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__stats {
    display: flex;
    gap: 36px;
    margin-top: 48px;
    border-top: 1px solid var(--color-line);
    padding-top: 28px;
}

.hero__stat strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hero__stat span {
    color: var(--color-text-muted);
    font-size: .85rem;
}

.hero__visual {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 91, 31, .4), transparent 50%),
        linear-gradient(180deg, var(--color-bg-soft), var(--color-bg-elev));
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-lg);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hero__visual::before {
    content: '';
    position: absolute;
    inset: -1px;
    background:
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, .03) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .03) 39px 40px);
    pointer-events: none;
}

.hero__visual-icon {
    font-size: 9rem;
    filter: drop-shadow(0 20px 40px rgba(255, 91, 31, .4));
    user-select: none;
}

/* ============================================================
   Category cards (vehicle types)
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

.category-card {
    display: block;
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px 200px at 80% 0%, rgba(255, 91, 31, .12), transparent 60%);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}

.category-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    color: var(--color-text);
}

.category-card:hover::after {
    opacity: 1;
}

.category-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, .9);
}

[data-theme="light"] .category-card__icon {
    background: transparent;
}

.category-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.category-card__count {
    font-size: .88rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Brand grid
   ============================================================ */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .brand-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.brand-card {
    padding: 22px 16px;
    text-align: center;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-line);
    transition: all .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.brand-card:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-elev);
    color: var(--color-text);
}

.brand-card__logo {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 60px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--color-text-soft);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .9);
}

[data-theme="light"] .brand-card__logo {
    background: transparent;
}

.brand-card__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: brightness(1.05);
}

[data-theme="light"] .brand-card__logo img {
    filter: none;
}

.brand-card__name {
    font-weight: 600;
    font-size: .95rem;
}

/* ============================================================
   Model cards
   ============================================================ */
.model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.model-card {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
}

.model-card:hover {
    border-color: var(--color-line);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
}

.model-card__image {
    aspect-ratio: 16/12;
    background: linear-gradient(160deg, var(--color-bg-elev), #20242d);
    display: grid;
    place-items: center;
    font-size: 3rem;
    color: var(--color-text-muted);
    position: relative;
    overflow: hidden;
}

.model-card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-card__body {
    padding: 18px 20px 20px;
    flex: 1;
}

.model-card__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: .8rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.model-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.model-card__sub {
    font-size: .9rem;
    color: var(--color-text-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.model-card__foot {
    margin-top: auto;
    padding: 14px 20px;
    border-top: 1px solid var(--color-line);
    font-size: .85rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================================
   Article cards (blog)
   ============================================================ */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.article-card {
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    overflow: hidden;
    transition: all .2s;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
}

.article-card__cover {
    aspect-ratio: 16/9;
    background: linear-gradient(160deg, #2a2030, #1a1d24);
    position: relative;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    color: var(--color-text-muted);
}

.article-card__body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-card__cat {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 10px;
}

.article-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.35;
}

.article-card__excerpt {
    color: var(--color-text-soft);
    font-size: .92rem;
    margin: 0 0 18px;
    flex: 1;
}

.article-card__meta {
    display: flex;
    gap: 12px;
    font-size: .82rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    font-size: .88rem;
    color: var(--color-text-muted);
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs li+li::before {
    content: '/';
    color: var(--color-text-muted);
    margin-right: 2px;
}

.breadcrumbs a {
    color: var(--color-text-soft);
}

.breadcrumbs a:hover {
    color: var(--color-accent);
}

/* ============================================================
   Page header + SEO text
   ============================================================ */
.page-head {
    padding-block: 20px 24px;
}

.page-head h1 {
    margin: 0 0 12px;
}

.page-head__lead {
    color: var(--color-text-soft);
    max-width: 720px;
    font-size: 1.05rem;
    margin: 0;
}

.content-block {
    padding: 24px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    margin-top: 40px;
    color: var(--color-text-soft);
}

.content-block h2 {
    margin-top: 0;
    color: var(--color-text);
}

.content-block p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Specs (model attributes) — monolithic e-shop style
   ============================================================ */
.specs {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.specs-group {
    background: var(--color-bg-soft);
    border-radius: 0;
    padding: 0;
}

.specs-group+.specs-group {
    border-top: 1px solid var(--color-line);
}

.specs-group h3 {
    margin: 0;
    padding: 10px 20px;
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    background: var(--color-bg-elev);
    border-bottom: 1px solid var(--color-line);
    font-weight: 700;
}

.specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.specs-list li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 20px;
    /* border-bottom: 1px solid var(--color-line); */
}

/* right-column items: no right border */
.specs-list li:nth-child(odd) {
    /* border-right: 1px solid var(--color-line); */
}

/* last row — remove bottom border */
.specs-list li:last-child {
    border-bottom: 0;
}

.specs-list li:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
}

/* odd total: last item spans both columns */
.specs-list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
}

/* mobile: single column */
@media (max-width: 860px) {
    .specs-list {
        grid-template-columns: 1fr;
    }

    .specs-list li:nth-child(odd) {
        border-right: 0;
    }

    .specs-list li:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid var(--color-line);
    }

    .specs-list li:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

.specs-list__name {
    flex-shrink: 0;
    font-size: .87rem;
    color: var(--color-text-muted);
    max-width: 55%;
}

.specs-list__dots {
    flex: 1;
    min-width: 12px;
    border-bottom: 1px dotted var(--color-line);
    transform: translateY(-3px);
    opacity: .5;
}

.specs-list__val {
    flex-shrink: 0;
    font-size: .87rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
}

.specs-list__item--diff {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    padding-inline: 6px;
}

.specs-list__item--diff .specs-list__val {
    color: var(--color-accent);
}

.specs-list__diff-badge {
    flex-shrink: 0;
    font-size: .65rem;
    color: var(--color-accent);
    margin-left: 4px;
    opacity: .8;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ============================================================
   Model header (catalog/model page)
   ============================================================ */
.model-head {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    padding-block: 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .model-head {
        grid-template-columns: 1fr;
    }
}

.model-head__photo {
    aspect-ratio: 4/3;
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, var(--color-bg-elev), #1d212a);
    border: 1px solid var(--color-line);
    display: grid;
    place-items: center;
    font-size: 8rem;
    color: var(--color-text-muted);
    position: relative;
    overflow: hidden;
}

.model-head__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 400px at 80% 100%, rgba(255, 91, 31, .15), transparent 60%);
}

.model-head__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--color-accent);
    font-weight: 600;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.model-head__title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 12px;
}

.model-head__sub {
    font-size: 1.1rem;
    color: var(--color-text-soft);
    margin: 0 0 28px;
}

.model-head__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    border-top: 1px solid var(--color-line);
    padding-top: 24px;
}

.model-fact strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.model-fact span {
    color: var(--color-text-muted);
    font-size: .85rem;
}

/* ============================================================
   Generations list
   ============================================================ */
.gen-list {
    display: grid;
    gap: 14px;
}

.gen-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    transition: all .15s;
}

.gen-card:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.gen-card__year {
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-accent);
    min-width: 110px;
}

.gen-card__title {
    font-weight: 600;
    margin: 0;
}

.gen-card__sub {
    font-size: .88rem;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.gen-card__more {
    margin-left: auto;
    color: var(--color-text-muted);
}

/* ============================================================
   Sidebar layout for catalog detail
   ============================================================ */
.layout-with-aside {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
}

@media (max-width: 900px) {
    .layout-with-aside {
        grid-template-columns: 1fr;
    }
}

.aside {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 22px;
    position: sticky;
    top: 88px;
    align-self: start;
}

.aside h4 {
    margin: 0 0 14px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}

.aside-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.aside-list a {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    font-size: .92rem;
}

.aside-list a:hover,
.aside-list a.is-active {
    background: var(--color-bg-elev);
    color: var(--color-text);
}

.aside-list .count {
    color: var(--color-text-muted);
    font-size: .82rem;
}

/* ============================================================
   Article (single blog post)
   ============================================================ */
.article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text);
}

.article-body p,
.article-body ul,
.article-body ol {
    margin-bottom: 1.2em;
    color: var(--color-text-soft);
}

.article-body h2 {
    margin-top: 1.8em;
}

.article-body h3 {
    margin-top: 1.5em;
}

.article-body a {
    color: var(--color-accent);
    border-bottom: 1px solid currentColor;
}

.article-body img {
    border-radius: var(--radius-md);
    margin-block: 1.5em;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    margin-top: auto;
    background: var(--color-bg-soft);
    border-top: 1px solid var(--color-line);
    padding: 56px 0 30px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 800px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

.site-footer h5 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer li {
    margin-bottom: 10px;
}

.site-footer a {
    color: var(--color-text-soft);
    font-size: .94rem;
}

.site-footer a:hover {
    color: var(--color-accent);
}

.site-footer__bottom {
    border-top: 1px solid var(--color-line);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================================
   Tags / badges (subtle, no neon slop)
   ============================================================ */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-elev);
    color: var(--color-text-soft);
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--color-line);
}

/* ============================================================
   Empty state
   ============================================================ */
.empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-lg);
}

.empty__icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: .5;
}

/* ============================================================
   Offers (where to buy)
   ============================================================ */
.offer-list {
    display: grid;
    gap: 12px;
}

.offer {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    transition: border-color .15s;
}

.offer:hover {
    border-color: var(--color-accent);
}

@media (max-width: 700px) {
    .offer {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .offer__price {
        font-size: 1.3rem;
    }
}

.offer__shop {
    font-weight: 600;
    color: var(--color-text-soft);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.offer__title {
    font-weight: 600;
    margin: 0;
}

.offer__meta {
    color: var(--color-text-muted);
    font-size: .82rem;
    margin-top: 4px;
}

.offer__price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
}

.offer__cond {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    background: var(--color-bg-elev);
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}

/* Recall warning */
.recall-card {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    background: rgba(239, 68, 68, .06);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: all .15s;
}

.recall-card:hover {
    background: rgba(239, 68, 68, .1);
    color: var(--color-text);
}

.recall-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(239, 68, 68, .15);
    color: var(--color-danger);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.recall-card__title {
    font-weight: 600;
    margin: 0;
}

.recall-card__meta {
    color: var(--color-text-muted);
    font-size: .82rem;
    margin-top: 4px;
}

.recall-card__sev {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sev-low {
    background: rgba(34, 197, 94, .15);
    color: #22c55e;
}

.sev-medium {
    background: rgba(245, 158, 11, .15);
    color: #f59e0b;
}

.sev-high {
    background: rgba(239, 68, 68, .18);
    color: #ef4444;
}

.sev-critical {
    background: rgba(239, 68, 68, .3);
    color: #fff;
}

/* News strip */
.news-strip {
    display: grid;
    gap: 14px;
}

.news-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 14px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    transition: border-color .15s;
}

.news-row:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.news-row__cover {
    aspect-ratio: 4/3;
    background: var(--color-bg-elev);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    overflow: hidden;
}

.news-row__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-row__title {
    font-weight: 600;
    margin: 0 0 6px;
}

.news-row__meta {
    color: var(--color-text-muted);
    font-size: .82rem;
}

@media (max-width: 540px) {
    .news-row {
        grid-template-columns: 1fr;
    }
}

/* Pagination */
.pager {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 36px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

.pager li {
    list-style: none;
    display: flex;
    align-items: stretch;
}

.pager a,
.pager span {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    color: var(--color-text-soft);
    font-size: .9rem;
}

.pager .active a,
.pager .active span,
.pager a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.pager .disabled a,
.pager .disabled span {
    opacity: .4;
    pointer-events: none;
}

/* Shop card */
.shop-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    transition: all .15s;
}

.shop-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    color: var(--color-text);
}

.shop-card__logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--color-bg-elev);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-text-soft);
}

.shop-card__title {
    font-weight: 700;
    margin: 0;
}

.shop-card__meta {
    color: var(--color-text-muted);
    font-size: .85rem;
    margin-top: 4px;
}

.shop-card__stat {
    color: var(--color-text-muted);
    font-size: .85rem;
    text-align: right;
}

/* ============================================================
   SVG Icon system
   Icons via CSS mask-image � color is set with background-color / currentColor.
   Usage: <span class="ic ic-motorcycle"></span>
   Sizes: default=1em, .ic-sm=0.85em, .ic-lg=1.5em, .ic-xl=2em, .ic-2xl=2.8em
   ============================================================ */
.ic {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
    vertical-align: -0.1em;
}

.ic-sm {
    width: .85em;
    height: .85em;
}

.ic-lg {
    width: 1.5em;
    height: 1.5em;
}

.ic-xl {
    width: 2em;
    height: 2em;
}

.ic-2xl {
    width: 2.8em;
    height: 2.8em;
}

/* Vehicle icons */
.ic-motorcycle {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='3'/><circle cx='19' cy='15' r='3'/><path d='M8 12l2.5-5h4l2.5 5'/><path d='M10.5 7l-2 2.5'/><path d='M17.5 7L19 4h2'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='3'/><circle cx='19' cy='15' r='3'/><path d='M8 12l2.5-5h4l2.5 5'/><path d='M10.5 7l-2 2.5'/><path d='M17.5 7L19 4h2'/></svg>");
}

.ic-atv {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='2.5'/><circle cx='19' cy='15' r='2.5'/><rect x='5' y='9' width='14' height='5' rx='1.5'/><path d='M8 9V7h8v2'/><path d='M12 7V5'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='2.5'/><circle cx='19' cy='15' r='2.5'/><rect x='5' y='9' width='14' height='5' rx='1.5'/><path d='M8 9V7h8v2'/><path d='M12 7V5'/></svg>");
}

.ic-scooter {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='16' r='3'/><circle cx='18' cy='16' r='2.5'/><path d='M8 13h6l2-7h-3l-1.5 4H8'/><path d='M14 6l2-3'/><path d='M8 13L6.5 14.5'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='16' r='3'/><circle cx='18' cy='16' r='2.5'/><path d='M8 13h6l2-7h-3l-1.5 4H8'/><path d='M14 6l2-3'/><path d='M8 13L6.5 14.5'/></svg>");
}

.ic-moped {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='3.5'/><circle cx='19' cy='15' r='3.5'/><path d='M8.5 15L12 8l5.5 4'/><path d='M12 8l-3.5 2'/><path d='M11 8L10 5.5H14'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='3.5'/><circle cx='19' cy='15' r='3.5'/><path d='M8.5 15L12 8l5.5 4'/><path d='M12 8l-3.5 2'/><path d='M11 8L10 5.5H14'/></svg>");
}

.ic-gear {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}

/* UI icons */
.ic-menu {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
}

.ic-close {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

.ic-warning {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

.ic-newspaper {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8M15 18h-5M10 6h8v4h-8V6z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8M15 18h-5M10 6h8v4h-8V6z'/></svg>");
}

.ic-sun {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='5'/><line x1='12' y1='1' x2='12' y2='3'/><line x1='12' y1='21' x2='12' y2='23'/><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'/><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'/><line x1='1' y1='12' x2='3' y2='12'/><line x1='21' y1='12' x2='23' y2='12'/><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'/><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'/></svg>");
}

.ic-moon {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
}

.ic-chevron-right {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.ic-arrow-right {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}

.ic-shop {
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}

/* Category card icon CSS icon inside .category-card__icon */
.cat-ic {
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--color-text-soft);
}

.cat-ic--motorcycle {
    -webkit-mask-image: var(--_ic-motorcycle);
    mask-image: var(--_ic-motorcycle);
}

.cat-ic--atv {
    -webkit-mask-image: var(--_ic-atv);
    mask-image: var(--_ic-atv);
}

.cat-ic--scooter {
    -webkit-mask-image: var(--_ic-scooter);
    mask-image: var(--_ic-scooter);
}

.cat-ic--moped {
    -webkit-mask-image: var(--_ic-moped);
    mask-image: var(--_ic-moped);
}

.cat-ic--gear {
    -webkit-mask-image: var(--_ic-gear);
    mask-image: var(--_ic-gear);
}

/* Share SVG definitions via custom properties to avoid repeating long data URIs */
:root {
    --_ic-motorcycle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='3'/><circle cx='19' cy='15' r='3'/><path d='M8 12l2.5-5h4l2.5 5'/><path d='M10.5 7l-2 2.5'/><path d='M17.5 7L19 4h2'/></svg>");
    --_ic-atv: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='2.5'/><circle cx='19' cy='15' r='2.5'/><rect x='5' y='9' width='14' height='5' rx='1.5'/><path d='M8 9V7h8v2'/><path d='M12 7V5'/></svg>");
    --_ic-scooter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='16' r='3'/><circle cx='18' cy='16' r='2.5'/><path d='M8 13h6l2-7h-3l-1.5 4H8'/><path d='M14 6l2-3'/><path d='M8 13L6.5 14.5'/></svg>");
    --_ic-moped: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='15' r='3.5'/><circle cx='19' cy='15' r='3.5'/><path d='M8.5 15L12 8l5.5 4'/><path d='M12 8l-3.5 2'/><path d='M11 8L10 5.5H14'/></svg>");
    --_ic-gear: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}

/* ============================================================
   Theme toggle button
   ============================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: color .15s, background .15s;
    flex-shrink: 0;
    position: relative;
}

.theme-toggle:hover {
    background: var(--color-bg-elev);
    color: var(--color-text);
}

.theme-toggle .ic-sun {
    display: none;
}

.theme-toggle .ic-moon {
    display: block;
}

[data-theme="light"] .theme-toggle .ic-sun {
    display: block;
}

[data-theme="light"] .theme-toggle .ic-moon {
    display: none;
}

/* ============================================================
   Recall icon: replace emoji with CSS icon
   ============================================================ */
.recall-card__icon .ic {
    font-size: 1.3em;
    color: var(--color-danger);
}

/* ============================================================
   Homepage: stats band
   ============================================================ */
.stats-band {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bg-soft);
}

.stats-band__inner {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.stats-band__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 40px;
    border-right: 1px solid var(--color-line);
}

.stats-band__item:last-child {
    border-right: 0;
}

.stats-band__val {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--color-text);
    line-height: 1;
}

.stats-band__label {
    font-size: .78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

@media (max-width: 640px) {
    .stats-band__item {
        padding: 8px 20px;
    }

    .stats-band__val {
        font-size: 1.4rem;
    }
}

/* ============================================================
   Homepage: intro head (replaces hero)
   ============================================================ */
.home-head {
    padding: 52px 0 40px;
    background:
        radial-gradient(800px 350px at 90% 50%, var(--color-accent-dim), transparent 60%),
        var(--color-bg);
    border-bottom: 1px solid var(--color-line);
}

.home-head__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

@media (max-width: 700px) {
    .home-head__inner {
        grid-template-columns: 1fr;
    }

    .home-head__actions {
        display: none;
    }
}

.home-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: 16px;
}

.home-head h1 {
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    margin: 0 0 14px;
    letter-spacing: -.03em;
}

.home-head h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--color-accent), #ff9a1f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-head p {
    color: var(--color-text-soft);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0;
}

.home-head__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 180px;
}

/* ============================================================
   News grid (homepage)
   ============================================================ */
.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 700px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    transition: border-color .15s;
}

.news-card:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.news-card__cover {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
    background: var(--color-bg-elev);
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    overflow: hidden;
}

.news-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card__body {
    min-width: 0;
}

.news-card__source {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 4px;
}

.news-card__title {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__date {
    font-size: .78rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Recalls summary (homepage)
   ============================================================ */
.recall-summary {
    display: grid;
    gap: 10px;
}

.recall-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-bg-soft);
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: var(--radius-md);
    transition: border-color .15s;
}

.recall-row:hover {
    border-color: rgba(239, 68, 68, .5);
    color: var(--color-text);
}

.recall-row__ic {
    flex-shrink: 0;
    color: var(--color-danger);
    opacity: .8;
}

.recall-row__title {
    flex: 1;
    font-size: .94rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recall-row__sev {
    flex-shrink: 0;
}

/* ============================================================
   Catalog filter (left aside) — polished
   ============================================================ */
.input-sm {
    padding: 7px 10px;
    font-size: .85rem;
}

.select-sm {
    padding: 6px 28px 6px 10px;
    font-size: .85rem;
}

.aside-filter {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 0;
    align-self: start;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.aside-filter::-webkit-scrollbar {
    width: 6px;
}

.aside-filter::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 4px;
}

.cfilter {
    padding: 18px 20px 20px;
}

.cfilter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line);
}

.cfilter__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.cfilter__reset {
    font-size: .8rem;
    color: var(--color-accent);
    text-decoration: none;
}

.cfilter__reset:hover {
    text-decoration: underline;
}

.cfilter-group {
    margin-bottom: 8px;
}

.cfilter-group__title {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-muted);
    margin: 18px 0 6px;
    font-weight: 700;
    opacity: .7;
}

.cfilter-block {
    border-top: 1px solid var(--color-line);
    padding: 12px 0 4px;
}

.cfilter-block:first-of-type {
    border-top: 0;
}

.cfilter-block summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text);
    padding: 4px 0;
    user-select: none;
    position: relative;
}

.cfilter-block summary::-webkit-details-marker {
    display: none;
}

.cfilter-block summary::after {
    content: '▾';
    font-size: .7rem;
    color: var(--color-text-muted);
    transition: transform .15s;
}

.cfilter-block[open] summary::after {
    transform: rotate(180deg);
}

.cfilter-block__hint {
    font-size: .72rem;
    color: var(--color-text-muted);
    background: var(--color-bg-elev);
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: auto;
}

.cfilter-search {
    margin: 10px 0 8px;
}

.cfilter-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 6px;
    max-height: 220px;
    overflow-y: auto;
}

.cfilter-list::-webkit-scrollbar {
    width: 5px;
}

.cfilter-list::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 4px;
}

.cfilter-list li {
    margin: 0;
}

.cfilter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s;
    font-size: .88rem;
    color: var(--color-text-soft);
}

.cfilter-check:hover {
    background: var(--color-bg-elev);
    color: var(--color-text);
}

.cfilter-check--solo {
    margin-top: 6px;
}

.cfilter-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.cfilter-check__box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-line);
    border-radius: 4px;
    background: var(--color-bg);
    flex-shrink: 0;
    position: relative;
    transition: all .12s;
}

.cfilter-check__box::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity .12s;
}

.cfilter-check input:checked~.cfilter-check__box {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.cfilter-check input:checked~.cfilter-check__box::after {
    opacity: 1;
}

.cfilter-check input:focus-visible~.cfilter-check__box {
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.cfilter-check__label {
    flex: 1;
    min-width: 0;
}

.cfilter-check input:checked~.cfilter-check__label {
    color: var(--color-text);
    font-weight: 600;
}

.cfilter-check__count {
    font-size: .74rem;
    color: var(--color-text-muted);
    background: var(--color-bg-elev);
    padding: 1px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.cfilter-range {
    display: flex;
    align-items: center;
    height: 34px;
    margin: 10px 0 6px;
    background: var(--color-bg-elev);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .14s, box-shadow .14s;
}

.cfilter-range:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.cfilter-range__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    gap: 6px;
}

.cfilter-range__field:first-child {
    border-right: 1px solid var(--color-line);
}

.cfilter-range__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

.cfilter-range input {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text);
    font-size: .88rem;
    font-family: var(--font-sans);
    width: 100%;
    min-width: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}

.cfilter-range input::-webkit-outer-spin-button,
.cfilter-range input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cfilter-range input::placeholder {
    color: var(--color-text-muted);
}

.cfilter-range input:focus {
    outline: none;
}

.cfilter__actions {
    
}

.cfilter--dirty .cfilter__actions {
    position: sticky;
    bottom: 16px;
    z-index: 10;
    margin-top: 18px;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

@media (max-width: 900px) {
    .aside-filter {
        position: relative;
        top: 0;
        max-height: none;
    }
}

.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}

.catalog-toolbar__count {
    color: var(--color-text-soft);
    font-size: .9rem;
}

.catalog-toolbar__count strong {
    color: var(--color-text);
}

.catalog-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: .85rem;
}

.pager-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

/* Article body for SEO blocks - softer, smaller */
.article-body--content {
    color: var(--color-text-muted);
    font-size: .95rem;
}

.article-body--content h2,
.article-body--content h3 {
    color: var(--color-text-soft);
}

/* ============================================================
   Model page hero + gallery (compact)
   ============================================================ */

.model-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    margin: 24px 0 16px;
}

@media (max-width: 900px) {
    .model-hero {
        grid-template-columns: 1fr;
    }
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery--empty {
    aspect-ratio: 16/10;
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-text-muted);
}

.gallery__no-photo-logo {
    width: 128px;
    height: 128px;
    object-fit: contain;
    opacity: .25;
}

.gallery__no-photo-label {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

.gallery__main {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.gallery__nav:hover {
    background: rgba(0, 0, 0, .75);
}

.gallery__nav--prev {
    left: 12px;
}

.gallery__nav--next {
    right: 12px;
}

.gallery__counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
}

.gallery__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.gallery__thumbs::-webkit-scrollbar {
    height: 6px;
}

.gallery__thumbs::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 4px;
}

.gallery__thumb {
    flex: 0 0 80px;
    height: 56px;
    border: 2px solid transparent;
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: border-color .15s;
}

.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__thumb:hover {
    border-color: var(--color-line);
}

.gallery__thumb.is-active {
    border-color: var(--color-accent);
}

.gallery__expand {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}

.gallery__expand:hover {
    background: rgba(0, 0, 0, .75);
}

/* Modal lightbox */
.img-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .88);
}

.img-modal__img {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 48px rgba(0,0,0,.6);
    pointer-events: none;
    user-select: none;
}

.img-modal__close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.img-modal__close:hover {
    background: rgba(255,255,255,.25);
}

.img-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 0;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.img-modal__nav:hover {
    background: rgba(255,255,255,.25);
}

.img-modal__nav--prev { left: 20px; }
.img-modal__nav--next { right: 20px; }

.img-modal__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(0,0,0,.55);
    color: #fff;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: .82rem;
}

.model-hero__info {
    display: flex;
    flex-direction: column;
}

.model-hero__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: .9rem;
    margin-bottom: 12px;
}

.model-hero__meta a {
    color: var(--color-text-soft);
}

.model-hero__meta a:hover {
    color: var(--color-accent);
}

.model-hero__title {
    margin: 0 0 12px;
    font-size: 1.9rem;
    line-height: 1.2;
}

.model-hero__sub {
    color: var(--color-text-soft);
    margin: 0 0 20px;
    max-width: 56ch;
}

.model-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
    padding: 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.model-facts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.model-facts dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.model-facts dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
    font-size: 1rem;
}

.model-hero__cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ============================================================
   NEW HERO (background image variant) � overrides above .hero
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 130px;
    background: var(--color-bg);
    isolation: isolate;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: saturate(.85);
}

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(255, 91, 31, .28), transparent 60%),
        radial-gradient(700px 400px at 10% 110%, rgba(56, 189, 248, .14), transparent 60%);
    pointer-events: none;
}

.hero__inner {
    max-width: 760px;
    position: relative;
}

.hero__title {
    font-size: clamp(2.4rem, 5.2vw, 4.2rem);
    line-height: 1.05;
    margin: 0 0 22px;
    letter-spacing: -.03em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}

.hero__title em {
    font-style: normal;
    background: linear-gradient(120deg, #ff5b1f, #ff8a1f 60%, #ffd084);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__sub {
    font-size: 1.18rem;
    color: rgba(255, 255, 255, .86);
    max-width: 600px;
    margin: 0 0 36px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Hero is always on a dark background image, so keep the ghost button light in every theme */
.hero__actions .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .10);
}

.hero__actions .btn-ghost:hover {
    background: rgba(255, 255, 255, .20);
    border-color: rgba(255, 255, 255, .9);
    color: #fff;
}

@media (max-width: 900px) {
    .hero {
        padding: 70px 0 80px;
    }
}

/* ============================================================
   404 / Error page
   ============================================================ */
.errpage {
    min-height: 60vh;
    display: grid;
    place-items: center;
    padding: 80px 0;
    background:
        radial-gradient(700px 380px at 50% 0%, var(--color-accent-dim), transparent 60%),
        var(--color-bg);
}

.errpage__inner {
    max-width: 640px;
    text-align: center;
}

.errpage__code {
    font-size: clamp(8rem, 22vw, 14rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.05em;
    background: linear-gradient(160deg, var(--color-accent), #ff8a1f 50%, #ffd084);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 12px;
}

.errpage__title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 14px;
    letter-spacing: -.02em;
}

.errpage__sub {
    color: var(--color-text-soft);
    margin: 0 0 32px;
    font-size: 1.05rem;
}

.errpage__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.errpage__quick {
    display: flex;
    gap: 10px 16px;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: .9rem;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
}

.errpage__quick a {
    color: var(--color-text-soft);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-line);
    padding-bottom: 1px;
}

.errpage__quick a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ============================================================
   Homepage SEO block � keyword links
   ============================================================ */
.content-block__links {
    list-style: none;
    padding: 0;
    margin: 8px 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px 18px;
}

.content-block__links li {
    margin: 0;
}

.content-block__links a {
    color: var(--color-text-soft);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-line);
}

.content-block__links a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.content-block__cta {
    margin: 16px 0 0;
}

/* ============================================================
   Catalog filter polish: hide brand-list counts, inline bool toggle
   ============================================================ */
#brand-list .cfilter-check__count {
    display: none;
}

/* Inline boolean toggle � sits next to its label, no <details> wrapping */
.cfilter-bool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--color-line);
}

.cfilter-bool:first-of-type {
    border-top: 0;
}

.cfilter-bool__label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
    cursor: pointer;
}

.cfilter-bool input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.cfilter-bool__switch {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-bg-elev);
    border: 1px solid var(--color-line);
    flex-shrink: 0;
    transition: background .14s, border-color .14s;
    cursor: pointer;
}

.cfilter-bool__switch::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: transform .14s, background .14s;
}

.cfilter-bool input:checked~.cfilter-bool__switch {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.cfilter-bool input:checked~.cfilter-bool__switch::after {
    transform: translateX(16px);
    background: #fff;
}

.cfilter-bool input:focus-visible~.cfilter-bool__switch {
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

/* Brand search input � make it match the styled controls properly */
.cfilter-search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line);
    background: var(--color-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2390979e' stroke-width='1.8'><circle cx='7' cy='7' r='4.5'/><path d='M10.5 10.5L14 14'/></svg>") no-repeat 10px center;
    background-size: 14px;
    color: var(--color-text);
    font-size: .88rem;
    transition: border-color .14s, box-shadow .14s;
}

.cfilter-search input::placeholder {
    color: var(--color-text-muted);
}

.cfilter-search input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

/* ============================================================
   Custom sort dropdown (replaces native <select>)
   ============================================================ */
.csort {
    position: relative;
    display: inline-block;
    min-width: 200px;
}

.csort__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}

.csort__btn:hover {
    border-color: var(--color-text-muted);
}

.csort__btn::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .14s;
}

.csort.is-open .csort__btn {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.csort.is-open .csort__btn::after {
    transform: rotate(225deg) translateY(-2px);
}

.csort__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s, transform .14s, visibility .14s;
}

.csort.is-open .csort__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.csort__opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: none;
    border: 0;
    color: var(--color-text-soft);
    font-size: .88rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}

.csort__opt:hover {
    background: var(--color-bg-elev);
    color: var(--color-text);
}

.csort__opt.is-active {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-weight: 600;
}

/* ============================================================
   Blog post � semantic classes (replaces inline styles)
   ============================================================ */
.breadcrumbs--top {
    margin-top: 24px;
}

.blog-post__cat {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-accent);
    font-weight: 700;
}

.blog-post__title {
    margin: 0 0 18px;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.blog-post__meta {
    display: flex;
    gap: 14px;
    color: var(--color-text-muted);
    font-size: .92rem;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.blog-post__cover {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin-bottom: 36px;
    display: block;
}

.blog-post__lead {
    font-size: 1.15rem;
    color: var(--color-text);
    margin-bottom: 24px;
    line-height: 1.55;
}

.blog-post__tags {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* recall card description line */
.recall-card__desc {
    margin: 6px 0 0;
    color: var(--color-text-soft);
    font-size: .9rem;
    line-height: 1.45;
}

/* ============================================================
   Model page (compact, tabbed layout)
   ============================================================ */
.mpage {
    padding-bottom: 56px;
}

.mpage__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    margin: 24px 0 0;
    align-items: start;
}

@media (max-width: 900px) {
    .mpage__hero {
        grid-template-columns: 1fr;
    }
}

.mpage__gallery {
    min-width: 0;
}

.mpage__info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mpage__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.mpage__meta a {
    color: var(--color-text-soft);
}

.mpage__meta a:hover {
    color: var(--color-accent);
}

.mpage__title {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 1.15;
    margin: 0 0 14px;
}

.mpage__price-box {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
    padding: 11px 14px;
    background: var(--color-accent-dim);
    border: 1px solid rgba(255, 91, 31, .22);
    border-radius: var(--radius-md);
}

.mpage__price-label {
    color: var(--color-text-muted);
    font-size: .85rem;
}

.mpage__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: -.02em;
}

.mpage__sub {
    color: var(--color-text-soft);
    font-size: .94rem;
    margin: 0 0 16px;
    line-height: 1.55;
}

.mpage__years {
    margin-bottom: 18px;
}

.mpage__years-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}

.mpage__year-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mpage__year-pill {
    padding: 4px 13px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: .82rem;
    font-weight: 500;
}

.mpage__year-pill.is-current {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-dim);
}

/* Quick specs card */
.mpage__quickspecs {
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-soft);
}

.mpage__qs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-line);
    gap: 12px;
}

.mpage__qs-row:last-child {
    border-bottom: 0;
}

.mpage__qs-row dt {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--color-text-muted);
    font-size: .87rem;
    font-weight: 400;
    margin: 0;
}

.mpage__qs-row dd {
    margin: 0;
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.mpage__qs-row dd a {
    color: var(--color-text);
}

.mpage__qs-row dd a:hover {
    color: var(--color-accent);
}

.mpage__qs-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--color-bg-elev);
    color: var(--color-accent);
    flex-shrink: 0;
}

.mpage__qs-icon svg {
    width: 15px;
    height: 15px;
}

.mpage__cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.mpage__cta-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 3px;
}

/* Generation chips row (in sidebar) */
.mpage__gen-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 14px;
}

.mpage__gen-chip {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .14s, background .14s, color .14s;
}

.mpage__gen-chip:hover,
.mpage__gen-chip.is-current {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
    color: var(--color-accent);
}

/* Key specs grid (below hero) */
.mpage__keyspecs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-line);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 24px 0 0;
}

.mpage__ks-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px;
    background: var(--color-bg-soft);
    min-width: 0;
}

.mpage__ks-label {
    font-size: .67rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpage__ks-val {
    font-size: .97rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .mpage__keyspecs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .mpage__keyspecs {
        grid-template-columns: repeat(2, 1fr);
    }

    .mpage__ks-item {
        padding: 12px 10px;
    }

    .mpage__ks-val {
        font-size: .88rem;
    }
}

/* Tabs nav */
.mpage__tabs {
    display: flex;
    border-bottom: 2px solid var(--color-line);
    margin: 32px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
}

.mpage__tabs::-webkit-scrollbar {
    display: none;
}

.mpage__tab {
    flex-shrink: 0;
    padding: 11px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--color-text-muted);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color .14s, border-color .14s;
    font-family: var(--font-sans);
}

.mpage__tab:hover {
    color: var(--color-text-soft);
}

.mpage__tab.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

.mpage__tab--link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--color-accent);
    font-weight: 600;
}

.mpage__tab--link:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.mpage__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
}

/* Tab panels */
.mpage__panels {
    padding: 28px 0;
}

.mpage__panel {
    display: none;
}

.mpage__panel.is-active {
    display: block;
}

.mpage__content {
    margin-top: 12px;
    border-top: 1px solid var(--color-line);
}

.mpage__similar {
    margin-top: 36px;
}

/* ─── mpage: tablet / mobile ─── */
@media (max-width: 900px) {
    .mpage__hero {
        gap: 20px;
        margin-top: 16px;
    }

    .mpage__tabs {
        margin-top: 24px;
    }

    .mpage__panels {
        padding: 20px 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding-inline: 16px;
    }

    .mpage {
        padding-bottom: 28px;
    }

    .mpage__hero {
        gap: 12px;
    }

    .mpage__title {
        margin-bottom: 8px;
    }

    .mpage__price-box {
        padding: 9px 12px;
    }

    .mpage__price {
        font-size: 1.3rem;
    }

    .mpage__tab {
        padding: 9px 13px;
        font-size: .82rem;
    }

    .mpage__similar {
        margin-top: 20px;
    }

    .model-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Parts catalog */
.parts-cats {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.parts-cat__title {
    margin: 0 0 12px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-soft);
}

.parts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.parts-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
}

.parts-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.parts-card__img {
    /* aspect-ratio: 4 / 3; */
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.parts-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.parts-card__placeholder {
    font-size: 2.4rem;
    color: var(--color-text-soft);
    opacity: .5;
}

.parts-card__title {
    padding: 10px 12px;
    font-size: .9rem;
    font-weight: 500;
    border-top: 1px solid var(--color-line);
}

/*  Parts landing page  */
.parts-page {
    padding-block: 16px 48px;
}

.parts-page__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 8px 0 24px;
}

.parts-page__meta {
    font-size: .8rem;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.parts-page__title {
    margin: 0 0 6px;
    font-size: 1.8rem;
}

.parts-page__sub {
    margin: 0;
    color: var(--color-text-soft);
}

.parts-page__catalog-link {
    display: inline-block;
    margin-top: 8px;
    font-size: .85rem;
    color: var(--color-primary);
    text-decoration: none;
}
.parts-page__catalog-link:hover {
    text-decoration: underline;
}

.parts-page__variant {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

.parts-page__variant-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-soft);
}

.parts-page__variant strong {
    font-size: .95rem;
}

.parts-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 28px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg, 14px);
}

.parts-filter {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.parts-filter__label {
    flex: 0 0 70px;
    padding-top: 7px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-soft);
}

.parts-filter__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.parts-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-size: .88rem;
    line-height: 1.2;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.parts-chip:hover {
    border-color: var(--color-accent);
}

.parts-chip.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.parts-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    flex: 0 0 auto;
}

.parts-card__img {
    position: relative;
}

.parts-card__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
}

.parts-empty {
    padding: 32px;
    text-align: center;
    color: var(--color-text-soft);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}

@media (max-width: 640px) {
    .parts-filter__label {
        flex-basis: 100%;
        padding-top: 0;
    }
}

/*  Parts hub (standalone /parts landing)  */
.parts-hub {
    padding-block: 8px 56px;
}

.parts-hub__hero {
    text-align: center;
    padding: 40px 20px 36px;
    margin-bottom: 36px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg, 16px);
}

.parts-hub__title {
    margin: 0 0 8px;
    font-size: 2rem;
}

.parts-hub__sub {
    margin: 0 auto 24px;
    max-width: 520px;
    color: var(--color-text-soft);
}

.parts-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.parts-search__input {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: var(--font-sans);
}

.parts-search__input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.parts-search__results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    text-align: left;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    max-height: 320px;
    overflow-y: auto;
}

.parts-search__item {
    padding: 10px 14px;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    color: var(--color-text);
}

.parts-search__item:hover,
.parts-search__item.is-active {
    background: var(--color-bg-soft);
}

.parts-search__item-label {
    font-size: .95rem;
}

.parts-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.parts-hub__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
}

.parts-hub__card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.parts-hub__card-brand {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-soft);
}

.parts-hub__card-model {
    font-size: 1rem;
    font-weight: 600;
}

/*  Scheme detail page  */
.scheme-page {
    padding-block: 16px 48px;
}

.scheme-page__head {
    margin: 8px 0 24px;
}

.scheme-page__meta {
    font-size: .8rem;
    color: var(--color-text-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.scheme-page__title {
    margin: 0 0 6px;
    font-size: 1.8rem;
}

.scheme-page__sub {
    color: var(--color-text-soft);
    margin: 0;
}

.scheme-page__layout {
    display: grid;
    grid-template-columns: minmax(240px, 40%) 1fr;
    gap: 24px;
    align-items: start;
}

.scheme-page__image {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.scheme-page__image img,
.scheme-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.scheme-page__image-empty {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-soft);
}

.scheme-page__image-empty span {
    font-size: 3rem;
    opacity: .4;
}

/* Scheme image with interactive markers */
.scheme-img-wrap {
    position: relative;
    line-height: 0;
}

.scheme-img-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

.scheme-markers {
    position: absolute;
    inset: 0;
}

.scheme-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(231, 76, 60, 0.75);
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.12);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .12s, background .12s, transform .12s;
    z-index: 1;
}

.scheme-marker:hover,
.scheme-marker.is-active {
    border-color: rgba(231, 76, 60, 1);
    background: rgba(231, 76, 60, 0.28);
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 2;
}

/* Highlighted table row (from marker hover) */
.parts-table__row.is-highlighted td {
    background: var(--color-bg);
}

.scheme-page__parts {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    table-layout: fixed;
}

.parts-table thead th {
    background: var(--color-bg-elev);
    text-align: left;
    padding: 8px 10px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-soft);
    border-bottom: 1px solid var(--color-line);
}

.parts-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}

.parts-table__row--has-offers {
    cursor: pointer;
}

.parts-table__row--has-offers:hover td {
    background: var(--color-bg);
}

.parts-table__row.is-open td {
    background: var(--color-bg);
}

.parts-table__pos {
    width: 36px;
    text-align: center;
    color: var(--color-text-soft);
    padding-left: 6px;
    padding-right: 6px;
}

.parts-table td:nth-child(2) {
    overflow: hidden;
}

.parts-table__price {
    width: 110px;
}

.parts-table__price-line {
    display: flex;
    align-items: center;
    gap: 4px;
}

.parts-table__price-val {
    font-weight: 600;
    white-space: nowrap;
}

.parts-table__chevron {
    color: var(--color-text-soft);
    font-size: .8rem;
    margin-left: auto;
    transition: transform .2s;
    flex-shrink: 0;
    line-height: 1;
}

.parts-table__row.is-open .parts-table__chevron {
    transform: rotate(180deg);
}

.parts-table__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parts-table__oem {
    margin-top: 2px;
    font-size: .78rem;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parts-table__oem-num {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--color-text);
    cursor: pointer;
    transition: color .15s;
}

.parts-table__oem-num.is-copied {
    color: var(--color-success, #22a854);
}

.parts-table__stock {
    font-size: .7rem;
    margin-top: 2px;
    white-space: nowrap;
}

.parts-table__stock--ok {
    color: var(--color-success, #1f8a4c);
}

.parts-table__offers td {
    background: var(--color-bg);
    padding: 8px 12px 14px;
}

.part-offer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.part-offer {
    display: grid;
    grid-template-columns: 140px 1fr 110px 90px 90px;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    color: inherit;
    font-size: .85rem;
}

.part-offer:hover {
    border-color: var(--color-accent);
}

.part-offer__shop {
    font-weight: 600;
}

.part-offer__title {
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.part-offer__price {
    font-weight: 600;
}

.part-offer__stock {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.part-offer__stock.is-ok {
    color: var(--color-success, #1f8a4c);
}

.part-offer__stock.is-no {
    color: var(--color-text-soft);
}

.part-offer__cond {
    font-size: .75rem;
    color: var(--color-text-soft);
    text-align: right;
}

.scheme-page__siblings {
    margin-top: 40px;
}

@media (max-width: 860px) {
    .scheme-page__layout {
        grid-template-columns: 1fr;
    }

    .scheme-page__image {
        position: static;
    }

    .parts-table {
        font-size: .82rem;
    }

    .parts-table__price {
        width: auto;
    }

    .part-offer {
        grid-template-columns: 1fr auto;
    }

    .part-offer__title,
    .part-offer__cond {
        display: none;
    }
}

/* ========================================================
   /parts section — hero, brand selector, SEO, brand/model pages
   ======================================================== */

/* Hero */
.phero {
    background: linear-gradient(135deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-line);
    padding-block: 72px 64px;
    text-align: center;
}

.phero__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin: 0 0 16px;
    line-height: 1.15;
}

.phero__title em {
    font-style: normal;
    color: var(--color-accent);
}

.phero__sub {
    font-size: 1.1rem;
    color: var(--color-text-soft);
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.phero__search {
    position: relative;
    max-width: 640px;
    margin: 0 auto 24px;
}

.phero__search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    display: flex;
}

.phero__search-input {
    width: 100%;
    padding: 18px 24px 18px 52px;
    font-size: 1.05rem;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1.5px solid var(--color-line);
    border-radius: 999px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: var(--font-sans);
    box-shadow: var(--shadow-sm);
}

.phero__search-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.phero__search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    text-align: left;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 400px;
    overflow-y: auto;
}

.phero__result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .12s;
    color: var(--color-text);
}

.phero__result:hover,
.phero__result.is-active {
    background: var(--color-bg-elev);
}

.phero__result-img {
    flex: 0 0 44px;
    width: 44px;
    height: 32px;
    background: var(--color-bg-elev);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phero__result-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.phero__result-placeholder {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

.phero__result-text {
    flex: 1;
    min-width: 0;
}

.phero__result-brand {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-soft);
    margin-bottom: 1px;
}

.phero__result-model {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phero__result-arrow {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.phero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-soft);
    font-size: .9rem;
}

.phero__stat strong {
    color: var(--color-text);
    font-weight: 700;
}

.phero__stat-sep {
    opacity: .4;
}

/* Brand selector */
.phands {
    padding-block: 48px 64px;
}

.phands__heading {
    font-size: 1.5rem;
    margin: 0 0 24px;
}

.phands__tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.phands__tab {
    padding: 8px 20px;
    font-size: .9rem;
    font-weight: 600;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-text-soft);
    transition: all .15s;
    font-family: var(--font-sans);
}

.phands__tab:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.phands__tab.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.phands__panel {
    display: none;
}

.phands__panel.is-active {
    display: block;
}

.phands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.phands__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px 20px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .2s, box-shadow .15s;
    text-align: center;
}

.phands__card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.phands__logo {
    width: 72px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phands__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.phands__logo-text {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-accent);
}

.phands__name {
    font-size: 1rem;
    font-weight: 700;
}

.phands__count {
    font-size: .78rem;
    color: var(--color-text-soft);
}

/* SEO block (hub) */
.phseo {
    padding-block: 40px 64px;
    border-top: 1px solid var(--color-line);
}

.phseo__inner {}

.phseo__title {
    font-size: 1.2rem;
    margin: 0 0 16px;
}

.phseo__text p {
    color: var(--color-text-soft);
    font-size: .9rem;
    line-height: 1.7;
    margin: 0 0 12px;
}

.phseo__text a {
    color: var(--color-accent-soft);
}

.phseo__text a:hover {
    color: var(--color-accent);
}

/* Brand page */
.pbbrand {
    padding-block: 16px 56px;
}

.pbbrand__head {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-line);
}

.pbbrand__logo {
    flex: 0 0 auto;
    width: 80px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pbbrand__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pbbrand__cat {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-soft);
    margin: 0 0 4px;
}

.pbbrand__title {
    font-size: 1.8rem;
    margin: 0 0 6px;
}

.pbbrand__sub {
    margin: 0;
    color: var(--color-text-soft);
}

.pbmodels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.pbmodel-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .2s, box-shadow .15s;
}

.pbmodel-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.pbmodel-card__img {
    aspect-ratio: 16 / 9;
    background: var(--color-bg-elev);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pbmodel-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.pbmodel-card:hover .pbmodel-card__img img {
    transform: scale(1.03);
}

.pbmodel-card__placeholder {
    font-size: 2.5rem;
    color: var(--color-text-muted);
    opacity: .4;
}

.pbmodel-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
}

.pbmodel-card__brand {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-soft);
}

.pbmodel-card__name {
    font-size: 1rem;
    font-weight: 700;
}

.pbmodel-card__years {
    font-size: .82rem;
    color: var(--color-text-soft);
}

.pbmodel-card__schemes {
    font-size: .8rem;
    color: var(--color-accent);
    font-weight: 600;
    margin-top: 4px;
}

/* Model page SEO block */
.pmseo {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-line);
}

.pmseo__title {
    font-size: 1.1rem;
    margin: 0 0 12px;
}

.pmseo__text {
    color: var(--color-text-soft);
    font-size: .88rem;
    line-height: 1.7;
    max-width: 820px;
}

/* Responsive */
@media (max-width: 768px) {
    .phero {
        padding-block: 48px 40px;
    }

    .phero__title {
        font-size: 1.8rem;
    }

    .phands {
        padding-block: 32px 48px;
    }

    .phands__grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    .phands__card {
        padding: 18px 12px 16px;
    }

    .pbmodels {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .pbbrand__head {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .phands__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pbmodels {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
/* ── Cookie banner ──────────────────────────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--color-bg-elev);
    border-top: 1px solid var(--color-line);
    padding: 16px 24px;
    box-shadow: var(--shadow-md);
}
.cookie-banner__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-banner__text {
    flex: 1 1 320px;
    margin: 0;
    font-size: .9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.cookie-banner__text a {
    color: var(--color-accent);
    text-decoration: underline;
}
.cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Legal pages ────────────────────────────────────────────── */
.legal-page {
    max-width: 760px;
    margin: 48px auto 80px;
    padding: 0 16px;
}
.legal-page h1 {
    font-size: 2rem;
    margin-bottom: 6px;
}
.legal-page h2 {
    font-size: 1.15rem;
    margin-top: 36px;
    margin-bottom: 10px;
    color: var(--color-text);
}
.legal-page p,
.legal-page li {
    font-size: .96rem;
    line-height: 1.75;
    color: var(--color-text-muted);
}
.legal-page ul {
    padding-left: 20px;
    margin: 10px 0;
}
.legal-page a {
    color: var(--color-accent);
}
.legal-page__updated {
    font-size: .85rem;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}
.legal-page__disclaimer {
    background: var(--color-bg-elev);
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    padding: 14px 18px;
    font-size: .92rem;
    color: var(--color-text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}
.legal-page__nav {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
    font-size: .9rem;
}
.legal-page__table-wrap {
    overflow-x: auto;
    margin: 16px 0;
}
.legal-page__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.legal-page__table th,
.legal-page__table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text-muted);
    vertical-align: top;
}
.legal-page__table th {
    color: var(--color-text);
    font-weight: 600;
    background: var(--color-bg-elev);
}
.legal-page__table td code {
    font-size: .85em;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    padding: 2px 5px;
    border-radius: 3px;
}

/* ── Footer legal links ─────────────────────────────────────── */
.site-footer__legal {
    display: flex;
    gap: 16px;
    font-size: .85rem;
}
.site-footer__legal a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.site-footer__legal a:hover {
    color: var(--color-text);
}