/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --color-white: #fff;
    --color-dark: #392f2f;
    --color-gray: #767677;
    --color-bg-light: #f1f1f2;
    --color-bg-lighter: #f8f8f9;
    --color-border: #e2e2e4;
    --color-primary: #2faa44;
    --color-primary-dark: #268d38;
    --color-accent: #e40046;
    --color-blue: #105fe8;
    --color-blue-dark: #0d4bc2;
    --color-brand-dark: #1e1a34;
    --color-brand-darker: #2a2640;
    --color-yellow: #ffd600;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

html {
    width: 100%;
}

body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--color-white);
    min-width: 260px;
}

input,
button,
select,
textarea,
a {
    font-family: inherit;
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
.container {
    max-width: 1308px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.main-content {
    grid-column: span 9;
    min-width: 0;
}

.sidebar {
    grid-column: span 3;
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
}

.recommendations {
    margin-top: 48px;
}

.recommendations__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.recommendations__icon {
    width: 24px;
    height: 24px;
}

.recommendations__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}
.recommendations__header--search {
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}
.recommendations__header--catalog {
    justify-content: space-between;
    flex-wrap: wrap;
}
.recommendations__search-query {
    margin: 0;
    font-size: 15px;
    color: var(--color-gray);
}
.catalog-sort {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.catalog-sort__label {
    font-size: 14px;
    color: var(--color-gray);
}
.catalog-sort__select {
    min-width: 220px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 14px;
}

.car-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 16px;
}
.catalog-empty-state {
    grid-column: 1 / -1;
    padding: 40px 32px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-white);
    text-align: center;
}
.catalog-empty-state__title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
}
.catalog-empty-state__text {
    margin: 0;
    font-size: 15px;
    color: var(--color-gray);
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.header {
    width: 100%;
    background: var(--color-white);
}

/* ─── Top row ─── */
.header__top {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: center;
    height: 86px;
}

/* ─── Logo ─── */
.header__logo {
    grid-column: span 2;
    position: relative;
    display: inline-block;
    width: 205px;
    height: 47px;
    flex-shrink: 0;
    text-decoration: none;
}

.header__logo-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 47.6px;
    height: 47px;
}

.header__logo-text {
    position: absolute;
    top: 5.77px;
    left: 61.05px;
    width: 143.6px;
    height: 22.5px;
}

.header__logo-tagline {
    position: absolute;
    top: 36.07px;
    left: 62.92px;
    width: 115.5px;
    height: 5.16px;
}

/* ─── Search ─── */
.header__search {
    grid-column: span 3;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-light);
    border-radius: 8px;
    padding: 10px 16px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.header__search:focus-within {
    border-color: var(--color-primary);
}

.header__search-dropdown,
.header__mobile-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 300;
    overflow: hidden;
}

.search-suggestion {
    padding: 10px 16px;
    font-size: 15px;
    color: var(--color-dark);
    cursor: pointer;
    transition: background 0.15s ease;
    outline: none;
}

.search-suggestion:hover,
.search-suggestion:focus {
    background: var(--color-bg-light);
}

.search-suggestion mark {
    background: none;
    color: var(--color-blue);
    font-weight: 700;
}

.header__search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 400;
    width: 100%;
}

.header__search-input::placeholder {
    color: var(--color-gray);
}

/* ─── Actions ─── */
.header__actions {
    grid-column: span 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    flex-shrink: 0;
}

.header__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}

.header__action-label {
    color: var(--color-gray);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.header__action:hover .header__action-label {
    color: var(--color-dark);
}

/* ─── Action animations ─── */
.header__action--heart:hover .icon-heart path {
    fill: var(--color-accent);
    stroke: var(--color-accent);
}

.header__action--compare:hover .arrow-top {
    animation: moveTopArrow 0.6s ease-in-out infinite alternate;
}

.header__action--compare:hover .arrow-bottom {
    animation: moveBottomArrow 0.6s ease-in-out infinite alternate;
}

@keyframes moveTopArrow {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(2px);
    }
}

@keyframes moveBottomArrow {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-2px);
    }
}

.header__action--rotate:hover svg {
    animation: tiltIcon 0.6s ease-in-out infinite alternate;
}

@keyframes tiltIcon {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(20deg);
    }
}

.header__action--shake:hover svg {
    animation: shake 0.4s ease-in-out infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}

/* ─── Right group: login + language ─── */
.header__right-group {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.header__btn-login {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 400;
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 193px;
    max-width: 100%;
    cursor: pointer;
    white-space: nowrap;
}

.header__lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--color-bg-light);
    border-radius: 8px;
    padding: 12px;
    width: 81px;
    color: var(--color-gray);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
}

.header__lang:hover {
    background: var(--color-bg-light);
    color: var(--color-dark);
    border-radius: 8px 8px 0 0;
}

.header__lang-dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-bg-light);
    border-top: none;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    overflow: hidden;
}

.header__lang:hover .header__lang-dropdown {
    opacity: 1;
    visibility: visible;
}

.header__lang-item {
    padding: 10px 12px;
    color: var(--color-gray);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: center;
}

.header__lang-item:hover {
    background: var(--color-border);
    color: var(--color-dark);
}

.header__lang-chevron {
    width: 8px;
    height: 6px;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.header__lang:hover .header__lang-chevron {
    transform: rotate(0deg);
}

/* ─── Nav bar ─── */
.header__nav {
    background: var(--color-brand-dark);
    height: 40px;
}

.header__nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header__nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;
    overflow: visible;
    min-width: 0;
}

.header__nav-links a {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

.header__nav-links a:hover {
    opacity: 0.75;
}

.header__social-links {
    display:flex;
    align-items:center;
    gap:16px;
    height: 27px;
    justify-content: center;
}

.social-link {
    width: 18px;
    height: 18px;
}

/* ─── Nav overflow ─── */
.header__nav-more {
    position: relative;
    flex-shrink: 0;
}

.header__nav-more-btn {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    letter-spacing: 2px;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.header__nav-more-btn:hover,
.header__nav-more-btn.is-active {
    opacity: 1;
}

.header__nav-more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--color-brand-dark);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 200px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.header__nav-more-dropdown.is-open {
    display: block;
}

.header__nav-more-dropdown a {
    display: block;
    padding: 10px 20px;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.header__nav-more-dropdown a:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.header__blog {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    width: 107px;
    flex-shrink: 0;
}

.header__blog svg {
    flex-shrink: 0;
}

/* Mobile-only elements: hidden on desktop */
.header__mobile-controls {
    display: none;
}

.header__mobile-bar {
    display: none;
}

.mobile-bottom-nav {
    display: none;
}

/* ═══════════════════════════════════════════
   BRANDS SECTION
═══════════════════════════════════════════ */
.brands {
    width: 100%;
    max-width: 100%;
    padding: 40px 0;
    margin: 0 auto;
    overflow: hidden;
}

/* ─── Top row: heading + credit banner ─── */
.brands__top {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
}

.brands__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.brands__subtitle {
    color: var(--color-gray);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.brands__title {
    color: var(--color-dark);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

/* ─── Credit banner ─── */
.brands__credit {
    position: relative;
    flex-shrink: 0;
    width: 306px;
    height: 99px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

/* Mobile-only duplicate — hidden on desktop */
.brands__credit--mobile-only {
    display: none;
    width: 100%;
    flex-shrink: 1;
}

.brands__credit:hover {
    transform: translateY(-3px);
}

.brands__credit:hover .brands__credit-card {
    box-shadow: 0 8px 24px rgba(30, 26, 52, 0.35);
}

.brands__credit-card {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: var(--color-brand-dark);
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.brands__credit-text {
    position: absolute;
    left: 16px;
    top: 28px;
    width: 130px;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.brands__credit-car {
    position: absolute;
    right: 0;
    top: 0;
    width: 198px;
    height: 99px;
    object-fit: cover;
    display: block;
    z-index: 1;
}

.brands__credit-badge {
    position: absolute;
    left: 16px;
    top: 4px;
    width: 30px;
    height: 30px;
    z-index: 2;
}

.brands__credit-badge svg:first-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.brands__credit-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    z-index: 3;
    display: block;
    animation: flashVibrate 30s ease-in-out infinite;
    animation-delay: 4s;
}

.brands__credit-flash path {
    stroke: var(--color-white);
    animation: flashVibColor 30s ease-in-out infinite;
    animation-delay: 4s;
}

@keyframes flashVibrate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    /* Vibration burst ~1.8% of 30s = ~0.54s */
    1% {
        transform: translate(-50%, -50%) rotate(-12deg);
    }

    1.6% {
        transform: translate(-50%, -50%) rotate(12deg);
    }

    2.2% {
        transform: translate(-50%, -50%) rotate(-10deg);
    }

    2.8% {
        transform: translate(-50%, -50%) rotate(10deg);
    }

    3.4% {
        transform: translate(-50%, -50%) rotate(-6deg);
    }

    4% {
        transform: translate(-50%, -50%) rotate(6deg);
    }

    4.6% {
        transform: translate(-50%, -50%) rotate(-3deg);
    }

    5.2% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

@keyframes flashVibColor {
    0% {
        stroke: var(--color-white);
    }

    1% {
        stroke: var(--color-yellow);
    }

    5% {
        stroke: var(--color-yellow);
    }

    6% {
        stroke: var(--color-white);
    }

    100% {
        stroke: var(--color-white);
    }
}

/* ─── Logo row ─── */
.brands__logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.brands__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 48px;
    width: 75px;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.brands__logo:hover {
    transform: scale(1.12);
    opacity: 0.75;
}

.brands__logo img {
    max-width: 100%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}

/* ─── Brand lists ─── */
.brands__lists {
    column-count: 4;
    column-gap: 32px;
    width: 100%;
    margin-bottom: 32px;
    overflow: hidden;
}

.brands__brand-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
    min-width: 0;
    margin-bottom: 16px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.brands__brand-item:hover {
    transform: translateX(4px);
}

.brands__brand-item:hover .brands__brand-name {
    color: var(--color-accent);
}

.brands__brand-name {
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
    max-width: 100%;
}

.brands__brand-name span, .brands__brand-count {
    color: var(--color-gray);
    font-size: 12px;
    flex-shrink: 0;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

/* "Все марки" item */
.brands__all {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease;
    break-inside: avoid;
    page-break-inside: avoid;
}

.brands__all:hover {
    transform: translateX(4px);
}

.brands__all:hover .brands__all-label {
    color: var(--color-accent);
}

.brands__all-label {
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: color 0.15s ease;
}

.brands__all-arrow {
    width: 8px;
    height: 6px;
    transform: rotate(90deg);
    flex-shrink: 0;
}

/* ─── Extra brands (expanded) ─── */
.brands__extra {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.brands__extra.is-open {
    max-height: 600px;
}

.brands__extra .brands__lists {
    padding-top: 16px;
    border-top: 1px solid var(--color-bg-light);
    margin-top: 8px;
}

/* Rotate arrow when open */
.brands__all.is-open .brands__all-arrow {
    transform: rotate(-90deg);
}

/* ─── Footer ─── */
.brands__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brands__total {
    color: var(--color-gray);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.brands__btn-show {
    background: var(--color-blue);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    padding: 12px;
    width: 306px;
    max-width: 100%;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
}

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
.sidebar-card {
    background: var(--color-bg-light);
    border-radius: 8px;
    padding: 24px 16px;
    width: 100%;
}

.sidebar-card__badge {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    color: var(--color-accent);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.sidebar-card__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0 0 12px;
    line-height: 1.2;
}

.sidebar-card__text {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-gray);
    line-height: 1.5;
    margin: 0 0 20px;
}

.sidebar-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-form__alert {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.sidebar-form__alert--success {
    background: #eaf8ef;
    border: 1px solid #b9e2c6;
    color: #1f6b37;
}

.sidebar-form__alert--error {
    background: #fff1f1;
    border: 1px solid #f1c0c0;
    color: #a12a2a;
}

.sidebar-form__recaptcha {
    display: none;
}

.sidebar-form__input,
.sidebar-form__select,
.sidebar-form__textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-dark);
    outline: none;
}

.sidebar-form__row {
    display: flex;
    gap: 12px;
}

.sidebar-form__input::placeholder {
    color: var(--color-gray);
}

.sidebar-form__textarea {
    height: 80px;
    resize: none;
}

.sidebar-form__btn {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 8px;
}

.sidebar-form__btn:hover {
    background: var(--color-primary-dark);
}

.sidebar-form__autocomplete {
    position: relative;
}

.sidebar-form__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-form__suggestion {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--color-dark);
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-form__suggestion:hover {
    background: var(--color-bg-light);
}

/* ═══════════════════════════════════════════
   MINI CARD
═══════════════════════════════════════════ */
.mini-card {
    grid-column: span 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

/* ─── Image block ─── */
.mini-card__image-wrap {
    position: relative;
    width: 100%;
    height: 182px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

/* ─── Slider ─── */
.slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.slide.active {
    opacity: 1;
}

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

/* ─── Last slide: overlay + icon + label ─── */
.slide__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.slide__more {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.slide__more-icon {
    width: 32px;
    height: auto;
    opacity: 0.8;
}

.slide__more-label {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* ─── Dots ─── */
.mini-card__dots {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.mini-card__dot {
    flex: 1;
    height: 2px;
    background: var(--color-white);
    border-radius: 6px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.mini-card__dot.active {
    opacity: 1;
}

/* ─── Arrows ─── */
.mini-card__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.mini-card:hover .mini-card__arrow {
    opacity: 1;
}

.mini-card__arrow:hover {
    background: rgba(0, 0, 0, 0.2);
}

.mini-card__arrow--left {
    left: 0;
}

.mini-card__arrow--right {
    right: 0;
}

.mini-card__arrow-icon {
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}

.mini-card__arrow--left .mini-card__arrow-icon {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.mini-card__arrow--right .mini-card__arrow-icon {
    transform: rotate(45deg);
    margin-right: 4px;
}

/* ─── Badge ─── */
.mini-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 5;
}

/* ─── Info block ─── */
.mini-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 16px;
}

.mini-card__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* ─── Load More Button ─── */
.load-more-wrap {
    text-align: right;
    margin-top: 32px;
}

.load-more-btn {
    width: auto;
    padding: 12px 40px;
    font-size: 14px;
}

/* ─── Card Actions ─── */
.mini-card__price {
    color: var(--color-accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    flex: 1;
}

.mini-card__pair {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mini-card__pair--end {
    flex: 1;
    justify-content: flex-end;
}

.mini-card__icon {
    flex-shrink: 0;
}

.mini-card__caption {
    color: var(--color-gray);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.mini-card__caption--right {
    text-align: right;
}

.mini-card__name {
    margin: 0;
    color: var(--color-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Card Actions ─── */
.mini-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
    width: 100%;
    max-width: 100%;
}

.mini-card__btn-main {
    flex: 1;
    min-width: 0;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    padding: 12px 6px;
    transition: opacity 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-card__btn-sq {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--color-bg-light);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.2s ease, opacity 0.2s ease;
    padding: 0;
    text-decoration: none;
}

.mini-card__btn-main:hover,
.mini-card__btn-sq:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.mini-card__btn-sq:hover {
    border-color: var(--color-border);
}

.mini-card__btn-main:active,
.mini-card__btn-sq:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
    background: var(--color-brand-dark);
    padding: 60px 0 40px;
    color: var(--color-white);
}

.footer__container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.footer__column {
    grid-column: span 3;
}

.footer__logo-wrap {
    margin-bottom: 24px;
}

.footer__text {
    color: var(--color-gray);
    font-size: 14px;
    line-height: 1.6;
}

.footer__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__item {
    margin-bottom: 12px;
}

.footer__link {
    color: var(--color-gray);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer__link:hover {
    color: var(--color-white);
}

.footer__bottom {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--color-brand-darker);
    display: flex;
    justify-content: space-between;
    color: var(--color-gray);
    font-size: 14px;
}

/* ─── SEO Text ─── */
.seo-text {
    margin-top: 60px;
    color: var(--color-dark);
}

.seo-text__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
    line-height: 1.3;
}

.seo-text__content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray);
}

.seo-text__content p {
    margin: 0 0 16px;
}

.seo-text__content strong {
    color: var(--color-dark);
    font-weight: 700;
}

.seo-text__content ul,
.seo-text__content ol {
    margin: 0 0 24px;
    padding-left: 24px;
}

.seo-text__content li {
    margin-bottom: 8px;
}

.seo-text__subtitle {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 24px 0 12px;
    line-height: 1.3;
}

/* ─── FAQ Accordion ─── */
.faq-section {
    margin-top: 60px;
}

.faq-section__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 24px;
}

.faq-item {
    background: var(--color-bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-item__summary {
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.faq-item__summary::-webkit-details-marker {
    display: none;
}

.faq-item__summary::after {
    content: '';
    display: block;
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5L6 6L10.5 1.5' stroke='%23392F2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-item__summary::after {
    transform: rotate(180deg);
}

.faq-item__content {
    padding: 0 24px 20px;
    font-size: 15px;
    color: var(--color-gray);
    line-height: 1.6;
}

.faq-item__content p {
    margin: 0;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* ─── WIDE (max-width: 1200px) ─── */
@media (max-width: 1200px) {
    .sidebar {
        display: none;
    }

    .main-content {
        grid-column: 1 / -1;
    }
}

/* ─── TABLET (max-width: 1024px) ─── */
@media (max-width: 1024px) {

    /* Layout */
    .container {
        padding: 0 24px;
    }

    .main-layout {
        gap: 12px;
    }

    .main-content {
        grid-column: 1 / -1;
    }

    .car-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .mini-card {
        grid-column: span 3;
    }

    .mini-card__arrow {
        opacity: 0.5;
    }

    .footer__container {
        padding: 0 24px;
    }

    .footer__bottom {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Header */
    .header__top {
        padding: 0 24px;
        gap: 12px;
    }

    .header__nav-container {
        padding: 0 24px;
    }

    .header__btn-login {
        width: auto;
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Give logo & search more room, shrink actions since labels are hidden */
    .header__logo {
        grid-column: span 3;
    }

    .header__search {
        grid-column: span 4;
    }

    .header__actions {
        grid-column: span 2;
        gap: 16px;
    }

    .header__right-group {
        grid-column: span 3;
    }

    .header__action-label {
        display: none;
    }

    .header__nav-links {
        gap: 20px;
    }

    .header__nav-links a {
        font-size: 14px;
    }

    /* Brands */
    .brands {
        padding: 32px 24px;
    }

    .brands__logos {
        gap: 8px;
    }

    .brands__logo {
        width: 65px;
    }

    .brands__title {
        font-size: 20px;
    }
}

/* ─── MOBILE (max-width: 920px) ─── */
@media (max-width: 920px) {

    /* Layout */
    .container {
        padding: 0 16px;
    }

    .main-layout {
        grid-template-columns: 1fr;
        margin-top: 20px;
        margin-bottom: 40px;
        gap: 0;
    }

    .main-content {
        grid-column: 1;
    }

    .sidebar {
        display: block;
        grid-column: 1;
        order: 10;
        margin-top: 32px;
    }

    .car-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mini-card {
        grid-column: span 1;
    }

    .footer__container {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px;
    }

    .footer__column {
        grid-column: span 1;
    }

    .footer__column:first-child {
        grid-column: span 2;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 8px;
        padding-left: 16px;
        padding-right: 16px;
        text-align: center;
    }

    .recommendations {
        margin-top: 32px;
    }

    .recommendations__title {
        font-size: 20px;
    }

    .seo-text {
        margin-top: 40px;
    }

    .faq-section {
        margin-top: 40px;
    }

    /* Load More button on mobile */
    .load-more-wrap {
        text-align: center;
        margin-top: 24px;
    }

    .load-more-btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 16px;
    }

    /* Header */
    .header__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        height: 64px;
        gap: 0;
    }

    .header__social-links {
        display: none;
    }

    .header__search,
    .header__actions,
    .header__right-group {
        display: none;
    }

    .header__logo {
        width: 160px;
        height: 40px;
    }

    .header__logo-icon {
        width: 38px;
        height: 38px;
    }

    .header__logo-text {
        top: 2px;
        left: 50px;
        width: 106px;
        height: 17px;
    }

    .header__logo-tagline {
        top: 27px;
        left: 51px;
        width: 86px;
        height: 4px;
        display: block;
    }

    .header__mobile-controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header__mobile-login {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
    }

    .header__burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        width: 32px;
        height: 32px;
    }

    .header__burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--color-dark);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .header__burger.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header__burger.is-active span:nth-child(2) {
        opacity: 0;
    }

    .header__burger.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header__mobile-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--color-bg-light);
        padding: 10px 16px;
    }

    .header__mobile-search-form {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--color-white);
        border-radius: 8px;
        padding: 9px 14px;
        border: 1px solid var(--color-border);
    }

    .header__mobile-search-form img {
        opacity: 0.5;
        flex-shrink: 0;
    }

    .header__mobile-search-input {
        background: transparent;
        border: none;
        outline: none;
        color: var(--color-dark);
        font-size: 15px;
        width: 100%;
    }

    .header__mobile-search-input::placeholder {
        color: var(--color-gray);
    }

    .header__lang--mobile {
        width: auto;
        min-width: 60px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .header__nav {
        height: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        background: var(--color-bg-light);
    }

    .header__nav.is-open {
        max-height: 400px;
    }

    .header__nav-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 0;
    }

    .header__nav-links {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .header__nav-links a {
        display: block;
        padding: 12px 0;
        font-size: 15px;
        color: var(--color-dark);
        border-bottom: 1px solid var(--color-border);
    }

    .header__nav-links a:hover {
        opacity: 1;
        color: var(--color-primary);
    }

    .header__blog {
        padding: 12px 0;
        width: 100%;
        gap: 8px;
        justify-content: center;
        color: var(--color-dark);
    }

    .header__blog img {
        filter: invert(27%) sepia(93%) saturate(1352%) hue-rotate(203deg) brightness(97%) contrast(101%);
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-top: 1px solid var(--color-bg-light);
        z-index: 1000;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }

    .mobile-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 0;
        color: var(--color-gray);
    }

    .mobile-bottom-nav__item span {
        color: var(--color-gray);
        font-size: 11px;
        font-weight: 400;
        line-height: 1;
    }

    .mobile-bottom-nav__item:active span,
    .mobile-bottom-nav__item:active img {
        opacity: 0.6;
    }

    /* Brands */
    .brands {
        padding: 24px 16px;
    }

    .brands__top {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .brands__heading {
        grid-column: 1;
    }

    .brands__logos {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .brands__logo {
        width: auto;
        height: 36px;
    }

    /* Tablet columns logic (920px to 480px): exactly 6 items in 3 columns */
    .brands__lists {
        column-count: 3;
        column-gap: 24px;
    }

    /* 17 items + 1 button = 18 total. Hides everything after. */
    .brands__lists .brands__brand-item:nth-child(n+18) {
        display: none;
    }

    .brands__top .brands__credit {
        display: none;
    }

    .brands__credit--mobile-only {
        display: block;
        margin-top: 16px;
    }

    .brands__credit--mobile-only .brands__credit-car {
        top: auto;
        bottom: 0;
        right: 0;
        width: auto;
        height: 100%;
        max-width: 60%;
        object-fit: contain;
        object-position: bottom right;
    }

    .brands__brand-name {
        font-size: 14px;
    }

    .brands__brand-count {
        font-size: 10px;
    }

    .brands__all-label {
        font-size: 14px;
    }

    .brands__footer {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .brands__btn-show {
        width: 100%;
    }

    .brands__total {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Mini card */
    .mini-card__image-wrap {
        height: auto;
        aspect-ratio: 16/9;
    }

    .mini-card__price {
        font-size: 17px;
    }

    .mini-card__name {
        font-size: 14px;
    }

    .mini-card__caption {
        font-size: 12px;
    }

    .catalog-sort .catalog-sort__label {
        display: none;
    }

    .catalog-sort {
        width: 100%;
    }

    .catalog-sort .catalog-sort__select {
        width: 100%;
    }

}

/* ═══════════════════════════════════════════
   CAR PAGE HERO
═══════════════════════════════════════════ */
.car-hero {
    margin-top: 24px;
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 20px;
    align-items: start;
}

/* Десктоп: галерея и характеристики — левая колонка, инфо — правая (обе строки) */
.car-hero__gallery {
    grid-column: 1;
    grid-row: 1;
}

.car-hero__info {
    grid-column: 2;
    grid-row: 1 / span 10;
    min-width: 0;
    height: 100%;
}

.car-specs {
    grid-column: 1;
    grid-row: 2;
}

.car-history {
    grid-column: 1;
    grid-row: 3;
}

.car-damage {
    grid-column: 1;
    grid-row: 4;
}

.car-safety {
    grid-column: 1;
    grid-row: 6;
}

.car-comfort {
    grid-column: 1;
    grid-row: 7;
}

.car-seats {
    grid-column: 1;
    grid-row: 8;
}

.car-about {
    grid-column: 1;
    grid-row: 9;
}

/* Похожие авто (Similar Cars) */
.car-similar {
    grid-column: 1;
    grid-row: 10;
    margin-top: 48px;
}

.car-similar__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 24px;
}

.car-hero__gallery {
    min-width: 0;
}

.car-hero__main-wrap {
    position: relative;
    background: var(--color-bg-light);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.car-hero__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.car-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.car-hero__arrow--left {
    left: 12px;
}

.car-hero__arrow--right {
    right: 12px;
}

.car-hero__arrow-icon {
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
}

.car-hero__arrow--left .car-hero__arrow-icon {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.car-hero__arrow--right .car-hero__arrow-icon {
    transform: rotate(45deg);
    margin-right: 3px;
}

.car-hero__thumbs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.car-hero__thumb {
    position: relative;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg-light);
    cursor: pointer;
    aspect-ratio: 16 / 10;
}

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

.car-hero__thumb.is-active {
    border-color: var(--color-primary);
}

.car-hero__thumb--more::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.car-hero__thumb-more {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.car-hero__thumb-more img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.car-hero__info {
    /* wrapper */
}

.car-hero__info-inner {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
}

@media (min-width: 921px) {
    .car-hero__info-inner {
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@supports selector(::-webkit-scrollbar) {
    @media (min-width: 921px) {
        .car-hero__info-inner::-webkit-scrollbar {
            width: 6px;
        }

        .car-hero__info-inner::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: 999px;
        }
    }
}

@media (max-width: 920px) {
    .car-hero__info-inner {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.car-hero__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-dark);
    margin-bottom: 14px;
}

.car-hero__specs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.car-hero__spec {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-gray);
    font-size: 14px;
    white-space: nowrap;
}

.car-hero__spec img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.car-hero__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.car-hero__price {
    color: var(--color-dark);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.car-hero__cost-btn {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-gray);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.car-hero__delivery {
    margin-bottom: 14px;
}

.car-hero__delivery-label {
    color: var(--color-gray);
    font-size: 12px;
    margin-bottom: 8px;
}

.car-hero__delivery-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.car-hero__delivery-item {
    background: var(--color-bg-light);
    color: var(--color-gray);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 13px;
    border: none;
    cursor: pointer;
}

.car-hero__delivery-item.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

.car-hero__credit {
    width: 100%;
    height: 99px;
    border-radius: 8px;
    margin-bottom: 16px;
    position: relative;
    display: block;
    overflow: visible;
    text-decoration: none;
    transition: transform 0.2s ease;
}



.car-hero__credit:hover {
    transform: translateY(-3px);
}

.car-hero__credit:hover .brands__credit-card {
    box-shadow: 0 8px 24px rgba(30, 26, 52, 0.35);
}

.car-hero__credit-text {
    position: absolute;
    left: 18px;
    bottom: 12px;
    width: auto;
    max-width: 55%;
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-white);
    z-index: 2;
}

.car-hero__credit-line1 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.car-hero__credit-line2 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
    flex-wrap: wrap;
}

.car-hero__credit-line2-regular {
    font-size: 16px;
    font-weight: 400;
}

.car-hero__credit-line2-price {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}

.car-hero__credit-line2-month {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.car-hero__credit .brands__credit-badge {
    top: 4px;
}

.car-hero__credit .brands__credit-car {
    top: 0;
    right: 0;
    width: 198px;
    height: 99px;
    object-fit: cover;
    object-position: right center;
    z-index: 1;
}

.car-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.car-hero__btn {
    height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.car-hero__btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.car-hero__btn--main {
    border: none;
    background: var(--color-primary);
    color: var(--color-white);
}

.car-hero__btn--ghost {
    border: 1px solid var(--color-primary);
    background: var(--color-white);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   CAR STICKY BAR
═══════════════════════════════════════════ */
.car-sticky-bar {
    display: none;
}

@media (max-width: 920px) {
    .car-sticky-bar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 500;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-100%);
        transition: transform 0.25s ease;
    }

    .car-sticky-bar.is-visible {
        transform: translateY(0);
    }

    .car-sticky-bar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        height: 60px;
        padding: 0 16px;
    }

    .car-sticky-bar__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
        gap: 1px;
    }

    .car-sticky-bar__title {
        font-size: 12px;
        font-weight: 600;
        color: var(--color-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.8;
    }

    .car-sticky-bar__price {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-dark);
        line-height: 1;
    }

    .car-sticky-bar__actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    .car-sticky-bar__btn {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .car-sticky-bar__btn span {
        display: none;
    }

    .car-sticky-bar__btn img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .car-sticky-bar__btn--main {
        background: var(--color-primary);
        color: var(--color-white);
        border: none;
    }

    .car-sticky-bar__btn--ghost {
        background: var(--color-white);
        color: var(--color-primary);
        border: 1.5px solid var(--color-primary);
    }
}

/* ═══════════════════════════════════════════
   CAR LIGHTBOX
═══════════════════════════════════════════ */
.car-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
}

.car-lightbox[hidden] {
    display: none !important;
}

.car-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}

.car-lightbox__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.car-lightbox__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
    transition: background 0.2s;
}

.car-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ── Stage (main image) ── */
.car-lightbox__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.car-lightbox__zoom-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
}

.car-lightbox__zoom-wrap.is-zoomed {
    cursor: grab;
}

.car-lightbox__zoom-wrap.is-zoomed:active {
    cursor: grabbing;
}

.car-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    transition: transform 0.25s ease;
    transform-origin: center center;
}

.car-lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s;
}

.car-lightbox__arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.car-lightbox__arrow--prev {
    left: 16px;
}

.car-lightbox__arrow--next {
    right: 16px;
}

.car-lightbox__arrow--prev .car-hero__arrow-icon {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.car-lightbox__arrow--next .car-hero__arrow-icon {
    transform: rotate(45deg);
    margin-right: 4px;
}

.car-lightbox__arrow .car-hero__arrow-icon {
    border-color: var(--color-white);
}

/* ── Bottom panel ── */
.car-lightbox__bottom {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.car-lightbox__thumbs {
    display: flex;
    gap: 6px;
    padding: 10px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.car-lightbox__thumbs::-webkit-scrollbar {
    display: none;
}

.car-lightbox__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
    padding: 0;
    background: none;
}

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

.car-lightbox__thumb.is-active {
    border-color: var(--color-primary);
}

.car-lightbox__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px 14px;
}

.car-lightbox__panel-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.car-lightbox__panel-title {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-lightbox__panel-specs {
    display: flex;
    gap: 14px;
}

.car-lightbox__panel-specs span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.car-lightbox__panel-specs img {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    filter: invert(1);
}

.car-lightbox__panel-price {
    color: var(--color-white);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.car-lightbox__panel-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.car-lightbox__panel-actions .car-hero__btn {
    height: 40px;
    font-size: 14px;
    padding: 0 16px;
}

@media (max-width: 640px) {
    .car-lightbox__panel {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .car-lightbox__panel-info {
        width: 100%;
    }

    .car-lightbox__panel-specs {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .car-lightbox__panel-actions {
        width: 100%;
    }

    .car-lightbox__panel-actions .car-hero__btn {
        flex: 1;
        height: 44px;
    }
}

/* ═══════════════════════════════════════════
   CAR SPECS SECTION
═══════════════════════════════════════════ */
.car-specs {
    margin-top: 20px;
}

.car-specs__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.car-specs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.car-specs__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* Убираем правую границу у последнего в строке */
.car-specs__item:nth-child(3n) {
    border-right: none;
}

/* Убираем нижнюю границу у последней строки */
.car-specs__item:nth-last-child(-n+3) {
    border-bottom: none;
}

.car-specs__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.55;
}

.car-specs__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.car-specs__label {
    font-size: 12px;
    color: var(--color-gray);
    line-height: 1.2;
}

.car-specs__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.2;
}

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

    .car-specs__item:nth-child(3n) {
        border-right: 1px solid var(--color-border);
    }

    .car-specs__item:nth-last-child(-n+3) {
        border-bottom: 1px solid var(--color-border);
    }

    .car-specs__item:nth-child(2n) {
        border-right: none;
    }

    .car-specs__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .car-specs__item {
        padding: 14px 16px;
        gap: 10px;
    }

    .car-specs__icon {
        width: 24px;
        height: 24px;
    }
}

/* ═══════════════════════════════════════════
   CAR HISTORY
═══════════════════════════════════════════ */
.car-history {
    margin-top: 48px;
}

.car-history__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 24px;
}

.car-history__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.car-history__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--color-bg-light);
}

.car-history__label {
    font-size: 15px;
    color: var(--color-gray);
    font-weight: 400;
}

.car-history__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    text-align: right;
}

@media (max-width: 640px) {
    .car-history__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════
   CAR FEATURES (EXTERIOR/INTERIOR)
═══════════════════════════════════════════ */
.car-features {
    margin-top: 24px;
}

.car-features__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.car-features__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 0;
}

.car-features__toggle-icon {
    width: 24px;
    height: 24px;
    color: var(--color-dark);
    transition: transform 0.3s ease;
}

.car-features.is-open .car-features__toggle-icon {
    transform: rotate(180deg);
}

.car-features__collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.car-features.is-open .car-features__collapse {
    grid-template-rows: 1fr;
}

.car-features__collapse-inner {
    overflow: hidden;
    padding-top: 24px;
    /* Space between title and content when open */
}

.car-features__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.car-features__item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d1d1d4;
    border-radius: 12px;
    padding: 0 16px 0 0;
    background: var(--color-bg);
    overflow: hidden;
}

.car-features__icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-lighter);
    border-radius: 0;
    color: var(--color-dark);
}

.car-features__icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.car-features__name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-dark);
    white-space: normal;
}

/* ═══════════════════════════════════════════
   CAR DAMAGE
═══════════════════════════════════════════ */
.car-damage {
    margin-top: 48px;
}

.car-damage__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 24px;
}

.car-damage__group {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.car-damage__group:last-child {
    margin-bottom: 0;
}

.car-damage__subtitle {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 24px;
    text-align: center;
    width: 100%;
}

.car-damage__schema-wrap {
    background: var(--color-bg-lighter);
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.car-damage__schema {
    position: relative;
    display: inline-block;
}

.car-damage__dots {
    position: absolute;
    inset: 0;
}

.car-schema-svg {
    display: block;
    width: 100%;
    max-width: 140px;
    height: auto;
}

.damage-dot {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 12px rgba(228, 0, 70, 0.4);
}

.damage-dot--x,
.cd-badge--x {
    background: #e40046;
}

.damage-dot--w,
.cd-badge--w {
    background: #105fe8;
}

.damage-dot--c,
.cd-badge--c {
    background: #616b74;
}

.damage-dot--a,
.cd-badge--a {
    background: #f59e0b;
}

.damage-dot--u,
.cd-badge--u {
    background: #0f9d8a;
}

.damage-dot--t,
.cd-badge--t {
    background: #7c3aed;
}

.cd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.car-damage__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: start;
}

.car-damage__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-light);
    border-radius: 8px;
    font-size: 14px;
}

.car-damage__item.is-problem {
    background: #fff8f8;
    border: 1px solid #ffcccc;
}

.cd-name {
    color: var(--color-dark);
    font-weight: 600;
}

.cd-state {
    color: var(--color-gray);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.car-damage__item.is-problem .cd-state {
    color: var(--color-accent);
}

@media (max-width: 1024px) {
    .car-damage__group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .car-damage__list {
        grid-template-columns: 1fr;
    }
}

.car-hero__cost-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.car-hero__cost-content.is-open {
    grid-template-rows: 1fr;
}

.car-hero__cost-inner {
    overflow: hidden;
    color: var(--color-dark);
    font-size: 15px;
    line-height: 1.5;
    padding-bottom: 8px;
}

.car-hero__cost-inner p {
    margin-bottom: 6px;
}

.car-hero__cost-inner p:first-child {
    padding-top: 12px;
}

.car-hero__cost-list {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.car-hero__cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.car-hero__cost-label {
    color: var(--color-gray);
    font-size: 14px;
}

.car-hero__cost-value {
    color: var(--color-dark);
    font-weight: 500;
    font-size: 15px;
    text-align: right;
}

.car-hero__cost-note {
    color: var(--color-gray);
    font-size: 13px;
    margin-top: 12px;
}

/* ═══════════════════════════════════════════
   CAR ABOUT / SEO
═══════════════════════════════════════════ */
.car-about {
    margin-top: 48px;
}

.car-about__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 24px;
}

.car-about__content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray);
    max-width: 800px;
}

.car-about__content p {
    margin-bottom: 16px;
}

.car-about__content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .car-hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .car-hero__gallery {
        order: 1;
        grid-column: 1;
        grid-row: auto;
    }

    .car-hero__info {
        order: 2;
        grid-column: 1;
        grid-row: auto;
    }

    .car-specs {
        order: 3;
        grid-column: 1;
        grid-row: auto;
    }

    .car-history {
        order: 4;
        grid-column: 1;
        grid-row: auto;
    }

    .car-damage {
        order: 5;
        grid-column: 1;
        grid-row: auto;
    }

    .car-features {
        order: 6;
        grid-column: 1;
        grid-row: auto;
    }

    .car-safety {
        order: 7;
        grid-column: 1;
        grid-row: auto;
    }

    .car-comfort {
        order: 8;
        grid-column: 1;
        grid-row: auto;
    }

    .car-seats {
        order: 9;
        grid-column: 1;
        grid-row: auto;
    }

    .car-about {
        order: 10;
        grid-column: 1;
        grid-row: auto;
    }

    .car-similar {
        order: 11;
        grid-column: 1;
        grid-row: auto;
    }

    .car-features__list {
        gap: 6px;
    }

    .car-features__item {
        gap: 4px;
        padding: 0 8px 0 0;
        border-radius: 6px;
    }

    .car-features__icon-wrap {
        width: 32px;
        height: 32px;
    }

    .car-features__icon {
        width: 16px;
        height: 16px;
    }

    .car-features__name {
        font-size: 12px;
        line-height: 1.2;
    }
}

@media (max-width: 1024px) and (min-width: 641px) {
    .car-hero__specs {
        justify-content: flex-start;
        gap: 40px;
    }

    .car-hero__spec {
        flex: none;
    }
}

@media (max-width: 640px) {
    .car-hero__title {
        font-size: 24px;
    }

    .car-hero__specs {
        flex-wrap: wrap;
        gap: 12px;
    }

    .car-hero__price-row {
        flex-wrap: wrap;
    }

    .car-hero__price {
        font-size: 34px;
    }

    .car-hero__thumbs {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Контейнер выше десктопного — место для badge и машинки выше карточки */
    .car-hero__credit {
        height: 110px;
    }

    /* Карточка-фон стандартная 80px, прижата снизу — выше неё 30px свободного места */
    .car-hero__credit .brands__credit-card {
        height: 80px;
    }

    /* Машинка прижата к правому нижнему углу, не выше десктопа, не обрезается */
    .car-hero__credit .brands__credit-car {
        top: auto;
        bottom: 0;
        right: 0;
        width: 55%;
        height: 90px;
        object-fit: contain;
        object-position: right bottom;
    }

    /* Badge — наполовину торчит над карточкой (карточка начинается на 30px от верха) */
    .car-hero__credit .brands__credit-badge {
        top: 15px;
        /* центр badge = 15+15=30px = край карточки */
    }

    /* Текст — слева снизу, НЕ переопределяем top */
    .car-hero__credit-text {
        top: auto;
        bottom: 12px;
        left: 12px;
        max-width: 52%;
        gap: 5px;
    }

    .car-hero__credit-line1 {
        font-size: 15px;
    }

    .car-hero__credit-line2-regular {
        font-size: 14px;
    }

    .car-hero__credit-line2-price {
        font-size: 18px;
    }

    .car-hero__credit-line2-month {
        font-size: 13px;
    }
}

/* ─── SMALL MOBILE (max-width: 640px) ─── */
@media (max-width: 640px) {
    .car-grid {
        grid-template-columns: 1fr;
    }

    .mini-card {
        grid-column: 1;
    }
}

/* ─── NARROW MOBILE (max-width: 479px) ─── */
@media (max-width: 479px) {

    /* Mobile columns logic (< 480px): 2 columns */
    .brands__lists {
        column-count: 2;
        column-gap: 16px;
    }

    /* Hides everything after 7 items + 1 button = 8 */
    .brands__lists .brands__brand-item:nth-child(n+8) {
        display: none;
    }

    /* Prevent horizontal layout explosion on extremely narrow devices (< 360px) */
    .header__top,
    .container {
        padding: 0 12px;
    }

    .header__mobile-controls {
        gap: 2px;
    }

    .header__lang--mobile {
        min-width: 0;
        padding: 8px 4px;
    }

    .header__logo {
        width: 135px;
        transform: scale(0.85);
        transform-origin: left center;
    }

    /* Sidebar form: stack budget/mileage row to prevent overflow */
    .sidebar-form__row {
        flex-direction: column;
    }

    /* Footer: single column on narrow screens */
    .footer__container {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }

    .footer__column {
        grid-column: 1;
    }

    .footer__column:first-child {
        grid-column: 1;
    }

    .footer__bottom {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ─── EXTRA NARROW (max-width: 350px) ─── */
@media (max-width: 350px) {
    .container {
        padding: 0 10px;
    }

    .header__top {
        padding: 0 10px;
    }

    .brands {
        padding: 24px 10px;
    }

    .header__mobile-bar {
        padding: 10px;
    }

    .footer__container {
        padding: 0 10px;
    }

    .footer__bottom {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sidebar-card {
        padding: 20px 10px;
    }

    .faq-item__summary {
        padding: 16px 12px;
    }
}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .js-ready .animate-fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .js-ready .animate-fade-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════
   CATALOG FILTER
═══════════════════════════════════════════ */
.catalog-filter {
    width: 100%;
    margin-bottom: 20px;
    position: relative;
    z-index: 100;
}

.catalog-filter__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.catalog-filter__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.catalog-filter__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-filter__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.catalog-filter__row--with-btn {
    grid-template-columns: 1fr 48px;
}

.catalog-filter__row:has(> select:only-child),
.catalog-filter__row:has(> .custom-select-wrapper:only-child) {
    grid-template-columns: 1fr;
}
.catalog-filter__car-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.catalog-filter__car-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.catalog-filter__car-group {
    display: contents;
}
.catalog-filter__input {
    width: 100%;
    height: 48px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: var(--color-bg-light);
    color: var(--color-dark);
    font-family: inherit;
    font-size: 14px;
    padding: 0 16px;
    transition: border-color 0.3s;
}

.catalog-filter__input:hover {
    border-color: var(--color-border);
}

.catalog-filter__input:focus {
    outline: none;
    border-color: var(--color-blue);
}

.catalog-filter__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23392F2F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.catalog-filter__input--text {
    cursor: text;
}

.catalog-filter__input[type="number"]::-webkit-outer-spin-button,
.catalog-filter__input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.catalog-filter__input[type="number"] {
    -moz-appearance: textfield;
}

.catalog-filter__btn-add,
.catalog-filter__btn-remove {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background-color: var(--color-bg-light);
    border: none;
    color: var(--color-gray);
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.catalog-filter__btn-add:hover,
.catalog-filter__btn-remove:hover {
    background-color: var(--color-border);
    color: var(--color-dark);
}

.catalog-filter__btn-remove {
    font-size: 32px;
}

.catalog-filter__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
}

.catalog-filter__footer-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.catalog-filter__btn-more {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-gray);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.catalog-filter__btn-reset {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--color-gray);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s;
}

.catalog-filter__btn-reset:hover {
    color: var(--color-dark);
}

.catalog-filter__btn-submit {
    background-color: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    padding: 0 24px;
    height: 48px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.catalog-filter__btn-submit:hover {
    background-color: var(--color-blue-dark);
}

.catalog-filter__mobile-trigger-wrap {
    display: none;
}

.catalog-filter__mobile-header {
    display: none;
}

@media (max-width: 920px) {
    .catalog-filter__mobile-trigger-wrap {
        display: block;
        margin-top: 16px;
        margin-bottom: 20px;
    }

    .catalog-filter__mobile-trigger {
        width: 100%;
        height: 48px;
        background-color: var(--color-bg-light);
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-dark);
        cursor: pointer;
    }

    .catalog-filter__badge {
        background-color: var(--color-accent);
        color: var(--color-white);
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
    }

    .catalog-filter__form {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background-color: var(--color-white);
        z-index: 99999;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    .catalog-filter__form.is-mobile-open {
        transform: translateY(0);
    }

    /* Fix for position:fixed inside a transform container */
    .catalog-filter {
        transform: none !important;
    }

    /* Hide the global header and bottom nav while modal is open */
    body:has(.catalog-filter__form.is-mobile-open) header,
    body:has(.catalog-filter__form.is-mobile-open) .mobile-bottom-nav,
    body:has(.car-lightbox:not([hidden])) .mobile-bottom-nav {
        display: none !important;
    }

    .catalog-filter__mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .catalog-filter__mobile-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-dark);
    }

    .catalog-filter__mobile-close {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .catalog-filter__scrollable {
        flex-grow: 1;
        overflow-y: auto;
        padding: 20px;
    }

    .catalog-filter__footer {
        position: relative;
        bottom: 0;
        background-color: var(--color-white);
        padding: 16px 20px;
        margin-top: auto;
        border-top: 1px solid var(--color-border);
        flex-shrink: 0;
        z-index: 10;
    }

    .catalog-filter__grid {
        grid-template-columns: 1fr;
    }

    .catalog-filter__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .catalog-filter__footer {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }

    .catalog-filter__footer-right {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .catalog-filter__btn-submit {
        width: 100%;
    }

    .catalog-filter__btn-more {
        justify-content: center;
    }

    .catalog-filter__btn-reset {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════
   CUSTOM SELECT (JS Generated)
═══════════════════════════════════════════ */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    /* if inside grid, ensure it takes full space */
}

.custom-select-wrapper select {
    display: none !important;
}

.custom-select__trigger {
    width: 100%;
    height: 48px;
    background-color: var(--color-bg-light);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.3s;
}

.custom-select__trigger:hover {
    border-color: var(--color-border);
}

.custom-select-wrapper.is-open .custom-select__trigger {
    border-color: var(--color-blue);
}

.custom-select__trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__trigger-icon {
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.custom-select-wrapper.is-open .custom-select__trigger-icon {
    transform: rotate(180deg);
}

.custom-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: none;
    flex-direction: column;
}

.custom-select-wrapper.is-open .custom-select__dropdown {
    display: flex;
}

.custom-select__option {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-bottom: 1px solid var(--color-bg-light);
}

.custom-select__option:last-child {
    border-bottom: none;
}

.custom-select__option:hover,
.custom-select__option.is-highlighted {
    background-color: var(--color-bg-lighter);
}

.custom-select__option.is-selected {
    background-color: var(--color-blue);
    color: var(--color-white);
}

/* ═══════════════════════════════════════════
   INFINITE SCROLL LOADER
═══════════════════════════════════════════ */
.infinite-scroll-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    width: 100%;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 4px solid var(--color-bg-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════
   CATALOG FILTER EXTRA / MORE-MOBILE
═══════════════════════════════════════════ */

/* Extra fields block */
.catalog-filter__extra {
    margin-top: 16px;
}

.catalog-filter__extra-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Mobile-only "Все параметры" wrapper — hidden on desktop */
.catalog-filter__more-mobile-wrap {
    display: none;
}

/* Chevron rotation when expanded */
.catalog-filter__btn-more.is-open svg {
    transform: rotate(180deg);
}

.catalog-filter__btn-more svg {
    transition: transform 0.25s ease;
}

@media (max-width: 920px) {

    /* Hide "Все параметры" from footer on mobile */
    .catalog-filter__footer .catalog-filter__btn-more:not(.catalog-filter__btn-more--mobile) {
        display: none;
    }

    /* Show mobile-only wrapper (placed inside scrollable, under filter fields) */
    .catalog-filter__more-mobile-wrap {
        display: block;
        margin-top: 20px;
    }

    .catalog-filter__btn-more--mobile {
        width: 100%;
        height: 48px;
        background-color: var(--color-bg-light);
        border: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 600;
        color: var(--color-dark);
        cursor: pointer;
        font-family: inherit;
    }

    .catalog-filter__btn-more--mobile:hover {
        background-color: var(--color-border);
    }
}