.haval-header {
    display: none;
}

.stock-mobile-header .preview-header__logo--brand {
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.stock-mobile-header .preview-header__brand-mark {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.stock-mobile-header .preview-header__brand-mark img {
    width: 100%;
    min-width: 0;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.stock-mobile-header .preview-header__brand-caption {
    display: grid;
    gap: 2px;
    color: #171717;
    line-height: 1.15;
    white-space: nowrap;
}

.stock-mobile-header .preview-header__brand-name {
    font-size: 16px;
    font-weight: 600;
}

.stock-mobile-header .preview-header__brand-subtitle {
    color: #777;
    font-size: 11px;
    font-weight: 400;
}

@media (min-width: 1151px) {
    body.has-haval-header {
        padding-top: 0 !important;
    }

    .haval-header {
        position: relative;
        z-index: 30;
        width: min(1360px, calc(100% - 48px));
        height: 88px;
        display: block;
        margin: var(--spacing-xs) auto 0;
        border-radius: var(--radius-md);
        background: transparent;
    }

    body.brand-navigation-page.catalog-has-supporting-pane .haval-header {
        left: calc(var(--desktop-rail-width, 136px) / 2);
        width: min(1360px, calc(100% - var(--desktop-rail-width, 136px) - 48px));
    }

    body.stock-page.has-haval-header .haval-header {
        width: var(--stock-shell-width);
        margin-left: var(--stock-shell-left);
        margin-right: 0;
    }

    .haval-hub-preview-page .haval-header {
        z-index: 10;
    }

    .haval-header__inner {
        height: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
        align-items: center;
        padding: 0 var(--spacing-lg);
    }

    .haval-header__brand {
        grid-column: 2;
        grid-row: 1;
        width: 160px;
        height: 80px;
        display: grid;
        place-items: center;
    }

    .haval-header__brand img {
        width: 160px;
        height: 80px;
        display: block;
        object-fit: contain;
        object-position: center;
    }

    .haval-header__brand img[src$="/geely.png"] {
        transform: scale(1.4);
    }

    .haval-header__nav {
        grid-column: 1;
        grid-row: 1;
        height: 100%;
        display: flex;
        align-items: center;
        gap: var(--spacing-xxs);
        justify-self: start;
    }

    .haval-header__nav > a,
    .haval-header__models > summary {
        min-height: var(--control-height-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xxs);
        padding: 0 var(--spacing-sm);
        border-radius: var(--control-radius);
        background: transparent;
        color: var(--color-black);
        cursor: pointer;
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
        font-weight: var(--type-heading-weight);
        letter-spacing: var(--type-letter-spacing);
        text-decoration: none;
        white-space: nowrap;
        transition: opacity .2s ease;
    }

    .haval-header__nav > a:hover,
    .haval-header__models > summary:hover {
        opacity: .8;
    }

    .haval-header__models {
        position: relative;
    }

    .haval-header__models[open] {
        z-index: 31;
    }

    .haval-header__models > summary {
        list-style: none;
        background: var(--color-white);
    }

    .haval-header__models > summary::-webkit-details-marker {
        display: none;
    }

    .haval-header__chevron {
        width: 7px;
        height: 7px;
        display: inline-block;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s ease;
    }

    .haval-header__models[open] .haval-header__chevron {
        transform: translateY(2px) rotate(225deg);
    }

    .haval-header__actions {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-self: end;
        gap: var(--spacing-lg);
    }

    body.catalog-brand-page.brand-navigation-page .haval-header {
        left: 0;
        width: min(840px, calc(100% - 48px));
        margin-right: auto;
        margin-left: auto;
    }

    body.catalog-brand-page.brand-navigation-page .haval-header__inner {
        grid-template-columns: minmax(0, 1fr) 160px;
        padding: 0;
    }

    body.catalog-brand-page.brand-navigation-page .haval-header__brand {
        grid-column: 2;
        justify-self: end;
    }

    body.catalog-brand-page.brand-navigation-page .haval-header__brand img {
        object-position: right center;
    }

    body.catalog-brand-page.brand-navigation-page .haval-header__actions {
        display: none;
    }

    .haval-header__dealers {
        display: inline-flex;
        align-items: center;
        color: var(--color-black);
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
        font-weight: var(--type-heading-weight);
        letter-spacing: var(--type-letter-spacing);
        text-decoration: none;
        white-space: nowrap;
        transition: color .2s ease;
    }

    .haval-header__dealers img {
        width: 20px;
        height: 20px;
        display: block;
    }

    .haval-header__dealers:hover {
        color: #333;
    }

    .haval-header__test-drive {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        border-radius: 8px;
        background: #161616;
        color: #fff;
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
        font-weight: var(--type-heading-weight);
        letter-spacing: var(--type-letter-spacing);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .2s ease, color .2s ease;
    }

    .haval-header__test-drive:hover {
        background: var(--color-green);
        color: var(--color-black);
    }

    .haval-header__dropdown {
        position: absolute;
        z-index: 32;
        top: calc(100% + var(--spacing-sm));
        left: 0;
        width: 620px;
        padding: var(--spacing-xl);
        border-radius: var(--radius-md);
        background: var(--color-white);
        box-shadow: 0 16px 48px rgb(0 0 0 / 9%);
        animation: havalMenuIn .2s ease-out both;
    }

    .haval-header__dropdown-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    .haval-header__dropdown-heading strong {
        font-size: var(--type-card-title-size);
        line-height: var(--type-card-title-line);
        font-weight: var(--type-heading-weight);
    }

    .haval-header__dropdown-heading span {
        color: #777;
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
    }

    .haval-header__model-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-micro);
        margin: var(--spacing-lg) 0;
    }

    .haval-header__model-grid a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 0 var(--spacing-xs);
        border-radius: var(--radius-xs);
        color: var(--color-black);
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
        font-weight: var(--type-heading-weight);
        text-decoration: none;
        white-space: nowrap;
        transition: background .2s ease;
    }

    .haval-header__model-grid a[aria-current],
    .haval-header__model-grid a:hover {
        background: var(--color-light-gray);
    }

    .haval-header__all-models {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--color-black);
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
        font-weight: var(--type-heading-weight);
        text-decoration: none;
    }

    .haval-header__all-models:hover {
        color: #333;
    }

    .haval-header__finance-dropdown {
        width: 190px;
        padding: 8px;
    }

    .haval-header__models.haval-header__finance > summary {
        background: #f3f3f3;
    }

    .haval-header__finance-dropdown a {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 0 12px;
        border-radius: var(--radius-xs);
        color: var(--color-black);
        font-size: var(--type-small-body-size);
        line-height: var(--type-small-body-line);
        font-weight: var(--type-heading-weight);
        text-decoration: none;
    }

    .haval-header__finance-dropdown a:hover,
    .haval-header__finance-dropdown a:focus-visible {
        background: var(--color-light-gray);
    }

    .haval-header :is(a, summary):focus-visible {
        outline: 2px solid var(--color-black);
        outline-offset: 3px;
    }

    body.has-haval-header:not(.brand-navigation-page) .car-model-shell {
        width: min(1360px, calc(100% - 48px));
        margin: var(--spacing-xs) auto 0;
    }

    body.has-haval-header:not(.brand-navigation-page) .car-model-shell ~ .footer .mega-footer__inner {
        width: min(1360px, calc(100% - 48px));
        margin-right: auto;
        margin-left: auto;
    }

    body.has-haval-header.model-navigation-page .haval-header,
    body.has-haval-header.model-navigation-page .car-model-shell,
    body.has-haval-header.model-navigation-page .car-model-shell ~ .footer .mega-footer__inner,
    body.has-haval-header.model-navigation-page .car-reviews-shell,
    body.has-haval-header.model-navigation-page .car-reviews-shell ~ .footer .mega-footer__inner {
        width: min(1480px, calc(100% - 48px));
        margin-left: auto;
        margin-right: auto;
    }

    body.has-haval-header.brand-wide-hub .haval-header,
    body.has-haval-header.brand-wide-hub .car-model-shell,
    body.has-haval-header.brand-wide-hub .car-model-shell ~ .footer .mega-footer__inner {
        width: min(1480px, calc(100% - 48px));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1320px) {
    body.catalog-brand-page.brand-navigation-page.catalog-has-supporting-pane .haval-header {
        width: var(--catalog-left-column-width);
        margin-right: 0;
        margin-left: var(--catalog-left-column-left);
    }
}

@keyframes havalMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .haval-header *, .haval-header *::before, .haval-header *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}