/* CHISI Products mega menu: static categories with an inline model preview. */
.f-header .f-menu__item--mega .f-mega-menu[data-chisi-mega-menu="products"] {
    background: rgb(var(--color-background, 255, 255, 255));
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-mega-menu__container {
    width: min(100%, 1560px);
    margin-inline: auto;
    padding-inline: 28px;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-mega-menu__inner {
    display: block;
    padding-block: 28px 32px;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu--level-1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: clamp(18px, 2vw, 28px);
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 18px;
    border-inline-start: 1px solid rgba(var(--color-border), .8);
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1 > a {
    display: block;
    padding: 0 0 11px;
    border-bottom: 1px solid rgb(var(--color-border));
    color: rgb(var(--color-foreground)) !important;
    background-image: none;
    -webkit-text-fill-color: currentColor;
    font-size: 14px;
    font-weight: 700 !important;
    letter-spacing: .01em;
    line-height: 1.35;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1:hover > a,
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1:focus-within > a {
    color: transparent !important;
    background-image: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom-color: transparent;
    border-image-source: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%));
    border-image-slice: 1;
}
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-mega-menu__column {
    margin-top: 12px;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-2 > a {
    display: block;
    margin: 0;
    padding: 8px 10px;
    border-radius: 3px;
    color: rgb(var(--color-foreground-secondary)) !important;
    font-size: 13px;
    line-height: 1.35;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-2 > a:hover,
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-2 > a:focus-visible {
    background: var(--gradient-button, rgb(var(--color-button)));
    color: rgb(var(--color-button-text)) !important;
    transform: translateX(2px);
    outline: none;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-mega-menu__preview-column {
    flex: 0 0 clamp(220px, 18vw, 280px);
    width: clamp(220px, 18vw, 280px);
    min-width: 0;
    margin: 0;
    padding: 0;
    border-left: 0;
    list-style: none;
}

.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-mega-menu__preview-column[hidden] {
    display: none !important;
}

.chisi-mega-preview {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    padding: 14px;
    border: 1px solid rgba(var(--color-border), .85);
    background: rgb(var(--color-background-2, 248, 248, 248));
}

.chisi-mega-preview__media {
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    background: rgb(var(--color-background, 255, 255, 255));
}

.chisi-mega-preview__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none !important;
    transition: opacity .2s ease, transform .25s ease;
}

.chisi-mega-preview.is-preview-loading .chisi-mega-preview__media img {
    opacity: .55;
}

.chisi-mega-preview.is-preview-ready .chisi-mega-preview__media img {
    transform: scale(1.02);
}

/* Finish-specific visual cues for the three TPU PPF entries. */
.chisi-mega-preview[data-chisi-preview-finish="gloss"] .chisi-mega-preview__media img {
    filter: contrast(1.08) saturate(1.08) brightness(1.02) !important;
}

.chisi-mega-preview[data-chisi-preview-finish="matte"] .chisi-mega-preview__media img {
    filter: contrast(.9) saturate(.72) brightness(1.04) !important;
}

.chisi-mega-preview[data-chisi-preview-finish="satin"] .chisi-mega-preview__media img {
    filter: contrast(.96) saturate(.86) brightness(1.03) !important;
}

.chisi-mega-preview__title {
    color: rgb(var(--color-foreground));
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.chisi-mega-preview__summary {
    margin-top: 5px;
    color: rgb(var(--color-foreground-secondary));
    font-size: 12px;
    line-height: 1.4;
}

@media screen and (max-width: 1279px) and (min-width: 768px) {
    .f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-mega-menu__container {
        padding-inline: 20px;
    }

    .f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu--level-1 {
        gap: 18px;
    }

    .f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1 {
        flex-basis: 0;
        width: auto;
        padding-inline: 12px;
    }

    .f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-mega-menu__preview-column {
        flex-basis: 220px;
        width: 220px;
    }
}

@media screen and (max-width: 767px) {
    .f-menu-drawer .f-menu-mobile__link:focus-visible,
    .f-menu-drawer .f-menu-mobile__toggle-button:focus-visible {
        outline: 2px solid rgb(var(--color-button));
        outline-offset: 2px;
    }

    .f-menu-drawer .f-menu-mobile__toggle-button {
        color: rgb(var(--color-button));
    }
}

/* Keep the global navigation readable while the Products mega menu is open. */
.f-header.f-mega-active .f-header__desktop .f-menu__link--main,
.f-header.f-mega-active .f-header__desktop .f-menu__link--main .f-menu__arrow,
.f-header.f-mega-active .f-header__desktop .f-menu__link--main .f-menu__arrow svg {
    color: rgb(var(--color-foreground)) !important;
    fill: currentColor;
    stroke: currentColor;
}

.f-header.f-mega-active .f-header__desktop .f-menu__link--main::after {
    background-color: currentColor;
}

/* CHISI navigation bar: white base with VI-colored hover states. */
.f-header .f-header__desktop,
.f-header .f-header__desktop.f-gradient,
.f-header.stuck .f-header__desktop,
.f-header.stuck .f-header__desktop.f-gradient,
.f-header.stuck.transparent-on-top .f-header__desktop.f-gradient {
    background: rgb(var(--color-background, 255, 255, 255)) !important;
    background-image: none !important;
}

.f-header .f-header__desktop .f-menu__item > .f-menu__link--main {
    color: rgb(var(--color-foreground)) !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.f-header .f-header__desktop .f-menu__item:hover > .f-menu__link--main,
.f-header .f-header__desktop .f-menu__item:focus-within > .f-menu__link--main,
.f-header .f-header__desktop .f-menu__item.f-menu__item--active > .f-menu__link--main {
    color: rgb(var(--color-button-text, 255, 255, 255)) !important;
    background: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%)) !important;
    background-image: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%)) !important;
    -webkit-text-fill-color: rgb(var(--color-button-text, 255, 255, 255)) !important;
}

.f-header .f-header__desktop .f-menu__item:hover > .f-menu__link--main::after,
.f-header .f-header__desktop .f-menu__item:focus-within > .f-menu__link--main::after,
.f-header .f-header__desktop .f-menu__item.f-menu__item--active > .f-menu__link--main::after {
    background: rgb(var(--color-button-text, 255, 255, 255)) !important;
}

/* Main navigation hover: keep the white background, recolor text and underline only. */
.f-header .f-header__desktop .f-menu__item:hover > .f-menu__link--main,
.f-header .f-header__desktop .f-menu__item:focus-within > .f-menu__link--main,
.f-header .f-header__desktop .f-menu__item.f-menu__item--active > .f-menu__link--main {
    background-color: transparent !important;
    background-image: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.f-header .f-header__desktop .f-menu__item:hover > .f-menu__link--main::after,
.f-header .f-header__desktop .f-menu__item:focus-within > .f-menu__link--main::after,
.f-header .f-header__desktop .f-menu__item.f-menu__item--active > .f-menu__link--main::after {
    background: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%)) !important;
}

/* Keep desktop second- and third-level navigation typography consistent. */
@media screen and (min-width: 768px) {
    .f-header .f-header__desktop .f-menu__item--mega .f-sub-menu a,
    .f-header .f-header__desktop .f-menu__item--dropdown .f-sub-menu a {
        font-family: var(--font-body-family, "Manrope", sans-serif) !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .f-header .f-header__desktop .f-menu__item--mega .f-sub-menu__item--level-1 > a {
        font-weight: 700 !important;
    }

    .f-header .f-header__desktop .f-menu__item--mega .f-sub-menu__item--level-2 > a,
    .f-header .f-header__desktop .f-menu__item--dropdown .f-sub-menu a {
        font-weight: 400 !important;
    }
}


/* Product headings and bottom-aligned customization links. */
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .f-sub-menu__item--level-1 {
    display: flex;
    flex-direction: column;
}
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-product-menu-heading {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgb(var(--color-border));
}
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-product-menu-heading > .f-menu__link {
    padding: 0;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: rgb(var(--color-foreground));
    overflow-wrap: anywhere;
}
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-menu-column-footer {
    margin-top: auto;
    padding-top: 16px;
}
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-menu-column-footer > .chisi-menu-custom,
.f-menu-drawer .chisi-menu-custom {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    color: #5f6b78 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(95, 107, 120, .42);
    text-underline-offset: 3px;
    transition: color .16s ease, text-decoration-color .16s ease;
}
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-windshield-group { margin-top: 24px; }
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-windshield-group > ul { margin-top: 12px; }
.chisi-menu-custom:hover {
    color: #0f2647 !important;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px !important;
}
.chisi-menu-custom:focus-visible { outline: 2px solid rgba(22, 53, 99, .45); outline-offset: 3px; }
.f-menu-drawer .chisi-menu-mobile-footer { margin: 16px; padding-top: 8px; border-top: 1px solid rgb(var(--color-border)); }

/* ==========================================================================
   OEM&ODM mega panel — 4 grouped columns + Customization Center CTA
   (type scale follows the Products panel: 14px column titles, 13px links)
   ========================================================================== */
.f-header .f-menu__item--mega .f-mega-menu[data-chisi-mega-menu="oem"] {
    background: rgb(var(--color-background, 255, 255, 255));
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-mega-menu__container {
    width: min(100%, 1560px);
    margin-inline: auto;
    padding-inline: 28px;
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-mega-menu__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 26px 30px;
    border-bottom: 1px solid rgba(22, 53, 99, .10);
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu--level-1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: clamp(18px, 3vw, 44px);
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-1 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-left: 0;
}

/* column title */
.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-1 > a {
    display: block;
    padding: 0 0 11px;
    border-bottom: 1px solid rgb(var(--color-border));
    color: rgb(var(--color-foreground)) !important;
    background-image: none;
    -webkit-text-fill-color: currentColor;
    font-size: 14px;
    font-weight: 700 !important;
    letter-spacing: .01em;
    line-height: 1.35;
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-1:hover > a,
.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-1:focus-within > a {
    color: transparent !important;
    background-image: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom-color: transparent;
    border-image-source: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%));
    border-image-slice: 1;
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-mega-menu__column {
    margin-top: 12px;
}

/* column links */
.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-2 > a {
    display: block;
    margin: 0;
    padding: 8px 10px;
    border-radius: 3px;
    color: rgb(var(--color-foreground-secondary)) !important;
    font-size: 13px;
    line-height: 1.35;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-2 > a:hover,
.f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu__item--level-2 > a:focus-visible {
    background: var(--gradient-button, rgb(var(--color-button)));
    color: rgb(var(--color-button-text)) !important;
    transform: translateX(2px);
    outline: none;
}

/* bottom-right CTA */
.chisi-oem-cta {
    display: block;
    align-self: flex-end;
    width: min(100%, 264px);
    margin-top: 44px;
    text-align: center;
}

.chisi-oem-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 18px;
    border-radius: 3px;
    background: var(--gradient-button, linear-gradient(135deg, #e22e1d 0%, #e65125 100%));
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none !important;
    box-shadow: 0 10px 20px -10px rgba(226, 46, 29, .55);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.chisi-oem-cta__btn:hover,
.chisi-oem-cta__btn:focus-visible {
    color: #fff !important;
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 26px -12px rgba(226, 46, 29, .6);
}

.chisi-oem-cta__btn svg {
    flex: none;
    color: currentColor;
}

.chisi-oem-cta__note {
    margin: 10px 0 0;
    color: #5a6270;
    font-size: 13px;
    line-height: 1.4;
}

/* tablet */
@media screen and (max-width: 1279px) and (min-width: 768px) {
    .f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-mega-menu__container {
        padding-inline: 20px;
    }

    .f-header .f-mega-menu[data-chisi-mega-menu="oem"] .f-sub-menu--level-1 {
        gap: 18px;
    }

    .chisi-oem-cta {
        margin-top: 34px;
    }
}


/* OEM&ODM CTA inside the mobile drawer */
.f-menu-drawer .chisi-oem-cta--drawer {
    width: 100%;
    margin: 18px 0 6px;
    padding: 0 20px;
    align-self: stretch;
}

.f-menu-drawer .chisi-oem-cta--drawer .chisi-oem-cta__btn {
    height: 46px;
    border-radius: 11px;
    font-size: 14px;
}

.f-menu-drawer .chisi-oem-cta--drawer .chisi-oem-cta__note {
    font-size: 12px;
}


/* ==========================================================================
   头部 CTA 层级修复：mega 面板打开时 .f-header__bg 会盖住静态定位的按钮
   （Free Sample 曾因此消失，Get a quote 因自身定位未受影响）
   ========================================================================== */
.f-header .chisi-header-cta--main {
    position: relative;
    z-index: 3;
}

/* === Products mega menu: sunken sub-groups (Car Light / Architectural) === */
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-sink-group { margin-top: 24px; }
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-sink-group > ul { margin-top: 12px; }

/* === Products mega menu: custom project CTA column === */
.f-header .f-mega-menu[data-chisi-mega-menu="products"] .chisi-mega-menu__cta-column {
    flex: 0 0 clamp(236px, 18vw, 288px);
    width: clamp(236px, 18vw, 288px);
    min-width: 0;
    margin: 0;
    padding-inline-start: 20px;
    border-inline-start: 1px solid rgba(var(--color-border), .8);
    display: flex;
    align-items: stretch;
}
.chisi-mega-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 20px;
    background: #f7f8fa;
    border: 1px solid #e6e9ee;
}
.chisi-mega-cta__kicker {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #e22e1d;
}
.chisi-mega-cta__title {
    margin: 0 0 14px !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
    font-weight: 600 !important;
    color: #111827;
}
.chisi-mega-cta__list { list-style: none; margin: 0 0 18px; padding: 0; }
.chisi-mega-cta__list li {
    position: relative;
    padding-inline-start: 15px;
    font-size: 12.5px;
    line-height: 1.85;
    color: #6b7280;
}
.chisi-mega-cta__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .95em;
    width: 6px;
    height: 1px;
    background: #c3c8d0;
}
.chisi-mega-cta__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #e22e1d 0%, #e65125 100%);
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    transition: filter .18s ease;
}
.chisi-mega-cta__btn:hover { filter: brightness(1.06); color: #fff !important; }
.chisi-mega-cta__btn span { margin-inline-start: auto; font-size: 14px; line-height: 1; }
.chisi-mega-cta__note {
    margin: 12px 0 0 !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    color: #9aa3b0;
    letter-spacing: .01em;
}

/* Shared desktop navigation treatment for all storefront languages. */
.f-header .f-header__desktop .f-menu__item--mega .f-mega-menu[data-chisi-mega-menu] {
    --chisi-menu-vi: linear-gradient(135deg, #e22e1d 0%, #e65125 100%);
    scrollbar-width: thin;
    scrollbar-color: #e22e1d transparent;
}

@supports selector(::-webkit-scrollbar) {
    .f-header .f-header__desktop .f-menu__item--mega .f-mega-menu[data-chisi-mega-menu] {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
    .f-header .f-header__desktop .f-mega-menu[data-chisi-mega-menu]::-webkit-scrollbar {
        display: block;
        width: 8px;
    }
    .f-header .f-header__desktop .f-mega-menu[data-chisi-mega-menu]::-webkit-scrollbar-thumb {
        background: var(--chisi-menu-vi);
        border-radius: 8px;
    }
}

.f-header .f-header__desktop .f-mega-menu[data-chisi-mega-menu] .f-sub-menu__item--level-2 > a:is(:hover, :focus-visible) {
    background: var(--chisi-menu-vi);
}

.f-header .f-header__desktop .f-mega-menu[data-chisi-mega-menu="products"] .chisi-product-menu-heading > a:is(:hover, :focus-visible) {
    background-image: var(--chisi-menu-vi);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[dir="rtl"] .f-header .f-header__desktop .f-mega-menu[data-chisi-mega-menu="products"] .chisi-mega-menu__cta-column {
    order: -1;
    padding-inline: 0 20px;
    border-inline-start: 0;
    border-inline-end: 1px solid rgba(var(--color-border), .8);
}

[dir="rtl"] .f-header .f-header__desktop .f-mega-menu[data-chisi-mega-menu] .f-sub-menu__item--level-2 > a:is(:hover, :focus-visible) {
    transform: translateX(-2px);
}