/* 组件：十字形卡片结构（仅作用于本组件作用域） */
.car_card_wrapper_fG7h2 {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: clip;
    margin: var(--margin-tb) auto;
}

.car_card_wrapper_fG7h2 .swiper-slide {}

/* Swiper轮播样式 */
.carSwiper_fG7h2 {
    width: 100%;
    padding: 0 6rem;
    overflow: visible !important;
    background-color: var(--card-bg_fG7h2);
}

.carSwiper_fG7h2 .swiper-slide {
    display: flex;
    justify-content: center;
    overflow: visible;
    /* 防止相邻幻灯片内容溢出到当前视口 */
}


/* 左右切换箭头样式 */
.swiperArrowLeft_fG7h2,
.swiperArrowRight_fG7h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 4.8rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    transition: all 0.3s ease;
    user-select: none;
}

.swiperArrowLeft_fG7h2 {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
}

.swiperArrowRight_fG7h2 {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
}

.swiperArrowLeft_fG7h2:hover {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6));
}

.swiperArrowRight_fG7h2:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6));
}

.swiperArrowLeft_fG7h2 .yiyingbaoicon,
.swiperArrowRight_fG7h2 .yiyingbaoicon {
    font-size: 2.2rem;
    color: var(--arrow-color_fG7h2, #1f1f1f);
    font-weight: 600;
}

.car_card_wrapper_fG7h2 .cross_stage_fG7h2 {
    position: relative;
    width: 100%;
    min-height: 35rem;
    will-change: transform;
    backface-visibility: hidden;

}

.car_card_wrapper_fG7h2 .vertical_band_fG7h2 {
    /* 现在为水平灰色长方形，垂直居中 */
    position: relative;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    /* 调整灰色水平带的高度 */



    z-index: 0;
}

.car_card_wrapper_fG7h2 .horizontal_card_fG7h2 {
    position: absolute;

    width: 100%;
    /* 收窄黑色卡片(桌面宽度) */

    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;

    top: 0;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    /* transform: translate(-50%, 0);
    left: 50%; */
    box-sizing: border-box;




}

.cross_stage_fG7h2:hover .horizontal_card_fG7h2 {


    /* transform: translate(-50%, -5%); */
}

.cross_stage_fG7h2:hover .cta_button_fG7h2 {
    display: block;

}

/* 当前激活项（swiper-slide-active）应用与悬停一致的效果 —— 桌面端 */
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .horizontal_card_fG7h2 {

    background: var(--theme-color_fG7h2, #1f1f1f);
    transform: scale(1.1);

    /* transform: translate(-50%, -5%); */
}





.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .horizontal_card_fG7h2 {

    background: var(--theme-color_fG7h2, #1f1f1f);
    /* 悬停时背景变黑 */
    color: #fff;
    transform: scale(1.1);
    /* 悬停时文字白色 */
}

/* 确保当前激活项和悬停项使用相同的背景色 */
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2:hover .horizontal_card_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2:hover .horizontal_card_fG7h2 {}

.car_card_wrapper_fG7h2 .image_slot_fG7h2 {

    display: flex;
    justify-content: center;
    margin-top: 0rem;
}

.car_card_wrapper_fG7h2 .image_slot_fG7h2 img {

    width: 100%;
    height: 18rem;
    object-fit: cover;

}

.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .image_slot_fG7h2 img {}

.car_card_wrapper_fG7h2 .headline_fG7h2,
.car_card_wrapper_fG7h2 .item_title_fG7h2,
.car_card_wrapper_fG7h2 .description_fG7h2,
.car_card_wrapper_fG7h2 .specs_fG7h2,
.car_card_wrapper_fG7h2 .cta_button_fG7h2 {
    /* 移除默认隐藏样式，让文字默可见 */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    text-align: center;


}


.car_card_wrapper_fG7h2 .cta_button_fG7h2 {
    min-width: 60%;
    margin: 0 auto;
    line-height: 1.6;
}


.car_card_wrapper_fG7h2 .headline_fG7h2 {
    font-size: var(--headline-font-size_fG7h2, 2.1rem);
    font-weight: 700;
    margin-top: 1rem;
    /* 从3.5rem增加到4.5rem，使标题进一步向下移动 */
    margin-bottom: 0rem;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    min-height: 2rem;
    color: var(--headline-color_fG7h2, #333333);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.car_card_wrapper_fG7h2 .item_title_fG7h2 {
    font-size: var(--headline-font-size_fG7h2, 2.1rem);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--headline-color_fG7h2, #000000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.car_card_wrapper_fG7h2 .description_fG7h2 {
    font-size: var(--description-font-size_fG7h2, 1.4rem);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 显示行数，改成你需要的 n */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 一些浏览器会识别 */
    margin: 1rem 0;
    color: var(--description-color_fG7h2, #555555);

}

.car_card_wrapper_fG7h2 .specs_fG7h2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2.2rem;
    /* 增加上边距，使描述向下移动 */
    margin-bottom: 2.2rem;
    /* 默认颜色由下方规则覆盖为黑色 */
}



/* 悬停时文字变白色 */
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .description_fG7h2 {
    color: var(--description-hover-color_fG7h2, #ffffff);
}

.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .specs_fG7h2 {
    color: #fff;
}

/* 悬停时项标题颜色使用CSS变量 */
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .headline_fG7h2,
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .item_title_fG7h2 {
    color: var(--headline-hover-color_fG7h2, #ffffff);
}

/* 悬停时icon颜色使用CSS变量 */
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .spec_item_fG7h2 .yiyingbaoicon {
    color: var(--icon-hover-color_fG7h2, #ffffff);
}

/* 悬停时icon标题颜色使用CSS变量 */
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .spec_item_fG7h2 span {
    color: var(--icon-title-hover-color_fG7h2, #ffffff);
}

.car_card_wrapper_fG7h2 .spec_item_fG7h2 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    /* 文本超出隐藏省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.car_card_wrapper_fG7h2 .spec_item_fG7h2 .yiyingbaoicon {
    font-size: 1.6rem;
    color: var(--muted_fG7h2, #9aa4ad);
    flex-shrink: 0;
    /* 防止图标被压缩 */
}

.car_card_wrapper_fG7h2 .spec_item_fG7h2 span {
    /* 文本超出隐藏省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* 允许文本项收缩 */
}

.car_card_wrapper_fG7h2 .cta_button_fG7h2 {
    display: none;
    border: 0.1rem solid var(--button-border-color_fG7h2, #f1f1f1);
    /* 使用CSS变量控制边框色 */
    color: var(--button-text-color_fG7h2, #f1f1f1);
    /* 使用CSS变量控制文字色 */
    padding: .5rem 3rem;
    border-radius: var(--button-border-radius_fG7h2, 2.5rem);
    /* 添加圆角 */
    text-decoration: none;
    font-size: var(--button-font-size_fG7h2, 1.4rem);
    letter-spacing: 0.05em;

    /* 添加下边距 */
    opacity: 0;
    /* 默认不显示 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s;
    margin-top: 0rem;
    box-sizing: border-box;
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);

}

.car_card_wrapper_fG7h2 .cta_button_fG7h2:hover {
    background-color: var(--button-hover-bg_fG7h2, #ff0000);
    color: #fff;
    border-color: var(--button-hover-bg_fG7h2, #ff0000);
}

/* 悬停时按钮显示并保持透明背景 */
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .cta_button_fG7h2 {
    opacity: 1;
    visibility: visible;
    /* 使用visibility代替display */
    background-color: transparent;
    border-color: var(--button-border-color_fG7h2, #f1f1f1);
    color: var(--button-text-color_fG7h2, #f1f1f1);
    transition-delay: 0s;
    /* 立即显示 */
}

/* 按钮自身悬停时显示红色背景 */
.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .cta_button_fG7h2:hover {
    background-color: var(--button-hover-bg_fG7h2, #ff0000) !important;
    border-color: var(--button-hover-bg_fG7h2, #ff0000) !important;
    color: #fff;
}


.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .horizontal_card_fG7h2 {
    transform: translate(-50%, -50%) scaleY(0.8);

    color: #fff;
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .image_slot_fG7h2 img {}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .image_slot_fG7h2 img {}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .headline_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .item_title_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .description_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .specs_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .cta_button_fG7h2 {
    transform: translateY(-0.5rem) translateZ(0) scaleY(1.25);
    /* 抵消父元素scaleY(0.8)的垂直压缩 */
    transition-delay: 0.15s;
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .description_fG7h2 {
    color: var(--description-hover-color_fG7h2, #ffffff);
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .specs_fG7h2 {
    color: #fff;
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .description_fG7h2 {
    color: var(--description-hover-color_fG7h2, #ffffff);
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .specs_fG7h2 {
    color: #fff;
}

/* 激活状态下项标题颜色使用CSS变量 */
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .headline_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .item_title_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .headline_fG7h2,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .item_title_fG7h2 {
    color: var(--headline-hover-color_fG7h2, #ffffff);
}

/* 激活状态下icon颜色使用CSS变量 */
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .spec_item_fG7h2 .yiyingbaoicon,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .spec_item_fG7h2 .yiyingbaoicon {
    color: var(--icon-hover-color_fG7h2, #ffffff);
}

/* 激活状态下icon标题颜色使用CSS变量 */
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .spec_item_fG7h2 span,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .spec_item_fG7h2 span {
    color: var(--icon-title-hover-color_fG7h2, #ffffff);
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .cta_button_fG7h2 {
    opacity: 1;
    display: block;
    background-color: transparent;
    border-color: var(--button-border-color_fG7h2, #f1f1f1);
    color: var(--button-text-color_fG7h2, #f1f1f1);
    transition-delay: 0s;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .cta_button_fG7h2 {
    opacity: 1;
    visibility: visible;
    background-color: transparent;
    border-color: var(--button-border-color_fG7h2, #f1f1f1);
    color: var(--button-text-color_fG7h2, #f1f1f1);
    transition-delay: 0s;
}

/* 激活状态下的按钮悬停时显示红色背景 */
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .cta_button_fG7h2:hover,
.car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .cta_button_fG7h2:hover {
    background-color: var(--button-hover-bg_fG7h2, #ff0000) !important;
    border-color: var(--button-hover-bg_fG7h2, #ff0000) !important;
    color: #fff !important;
}

/* 移动端适配 */
@media (max-width: 1280px) {
    .car_card_wrapper_fG7h2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 960px) {
    .car_card_wrapper_fG7h2 {
        padding: 0 1.5rem;
    }

    .carSwiper_fG7h2 {
        padding: 0 1rem;
        /* 减少左右内边距，为移动端提供更多空间 */
    }

    /* 隐藏左右箭头及背景 */
    .swiperArrowLeft_fG7h2,
    .swiperArrowRight_fG7h2 {
        display: none;
    }

    .car_card_wrapper_fG7h2 .cross_stage_fG7h2 {
        width: 100%;

    }

    .car_card_wrapper_fG7h2 .vertical_band_fG7h2 {
        width: 100%;


    }

    .car_card_wrapper_fG7h2 .horizontal_card_fG7h2 {}

    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .horizontal_card_fG7h2 {


        /* 悬停时背景变黑 */

        /* 悬停时文字白色 */
    }

    /* 确保移动端当前激活项和悬停项使用相同的背景色 */
    .car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2:hover .horizontal_card_fG7h2,
    .car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2:hover .horizontal_card_fG7h2 {}

    .car_card_wrapper_fG7h2 .image_slot_fG7h2 img {}

    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .image_slot_fG7h2 img {}

    /* 移动端悬停时文字和按钮抵消父元素缩放 */
    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .headline_fG7h2,
    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .item_title_fG7h2,
    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .description_fG7h2,
    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .specs_fG7h2,
    .car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .cta_button_fG7h2 {}

    /* 当前激活项（swiper-slide-active）应用与悬停一致的效果 —— 移动端 */
    .car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide-active .cross_stage_fG7h2 .horizontal_card_fG7h2 {}


    /* 屏幕最右倒数第二项（自定义当前项） —— 移动端 */
    .car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .horizontal_card_fG7h2 {}

}

/* 确保箭头在大屏幕上始终可见 */
@media (min-width: 1281px) {

    .swiperArrowLeft_fG7h2,
    .swiperArrowRight_fG7h2 {
        display: flex !important;
        opacity: 0.9;
    }

    .swiperArrowLeft_fG7h2:hover,
    .swiperArrowRight_fG7h2:hover {
        opacity: 1;
    }
}