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

/* 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: 70%; /* 收窄黑色卡片(桌面宽度) */
   
    padding:3rem 2rem;
    display: flex;
    flex-direction: column;
    left: 50%;
    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);
    padding-top: 3.5rem;
    
    

}
.cross_stage_fG7h2:hover .horizontal_card_fG7h2{
    height: 110%;
    
    transform: translate(-50%, -10%);
}

.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 {
    height: 110%;
    background: var(--theme-color_fG7h2, #1f1f1f);
    
    transform: translate(-50%, -10%);
}

.car_card_wrapper_fG7h2 .horizontal_card_fG7h211 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scaleY(1);
    width: 70%; /* 收窄黑色卡片（桌面宽度） */
   
    background: transparent; /* 默认透明背景 */
    color: #000; /* 默认文字黑色 */
    padding: 3.6rem 2rem 3.5rem; /* 增加底部内边距防止按钮贴边 */
    text-align: center;
    z-index: 1;
    
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.3s ease, color 0.3s ease; /* 使用transform代替height */
    
    overflow: visible;

    display: flex;
    flex-direction: column;
    
   
    

}



.car_card_wrapper_fG7h2 .cross_stage_fG7h2:hover .horizontal_card_fG7h2 {
    
    background: var(--theme-color_fG7h2, #1f1f1f); /* 悬停时背景变黑 */
    color: #fff; /* 悬停时文字白色 */
}

/* 确保当前激活项和悬停项使用相同的背景色 */
.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: 3; /* 显示行数，改成你需要的 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: 1rem 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;
    margin-bottom: 2rem; /* 添加下边距 */
    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: 1rem;
}

.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);
    background: var(--card-dark_fG7h2, #1f1f1f);
    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;
}
.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%;
        height: 35rem;
    }
    .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 {
       
        background: var(--color_fG7h2, #1f1f1f); /* 悬停时背景变黑 */
        color: #fff; /* 悬停时文字白色 */
    }
    
    /* 确保移动端当前激活项和悬停项使用相同的背景色 */
    .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 {
      
        background: var(--card-dark_fG7h2, #1f1f1f);
        color: #fff;
    }
    
    
    /* 屏幕最右倒数第二项（自定义当前项） —— 移动端 */
    .car_card_wrapper_fG7h2 .carSwiper_fG7h2 .swiper-slide.is-current_fG7h2 .cross_stage_fG7h2 .horizontal_card_fG7h2 {
        
        background: var(--card-dark_fG7h2, #1f1f1f);
        color: #fff;
    }
    
}

/* 确保箭头在大屏幕上始终可见 */
@media (min-width: 1281px) {
    .swiperArrowLeft_fG7h2,
    .swiperArrowRight_fG7h2 {
        display: flex !important;
        opacity: 0.9;
    }
    
    .swiperArrowLeft_fG7h2:hover,
    .swiperArrowRight_fG7h2:hover {
        opacity: 1;
    }
}