/* 组件外层容器 */
.product-card-carousel {
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    overflow: hidden;
    width: 100%;
}

/* 旋转木马视口 */
.product-card-carousel .carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px; /* 最大宽度限制 */
    height: auto;
    aspect-ratio: 16 / 8; /* 锁定整体显示区域比例 */
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 卡片基础样式 */
.product-card-carousel .carousel-card {
    position: absolute;
    width: 60%; /* 基准宽度：占据容器的 60% */
    aspect-ratio: 700 / 420; /* 锁定卡片自身的长宽比 */
    border-radius: 2vw; /* 圆角随屏幕缩放 */
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 1.2s ease, 
                filter 1.2s ease;
    z-index: 10;
}

.product-card-carousel .carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.product-card-carousel .carousel-card.center {
    transform: translateX(0) scale(1) translateZ(0);
    z-index: 30;
    opacity: 1;
    filter: brightness(1);
}

/* 左侧位：向左移动并向后推 */
.product-card-carousel .carousel-card.left {
    transform: translateX(-45%) scale(0.95) translateZ(-250px);
    z-index: 20;
}

/* 右侧位：向右移动并向后推 */
.product-card-carousel .carousel-card.right {
    transform: translateX(45%) scale(0.95) translateZ(-250px);
    z-index: 20;
}
/* 隐藏不在前台显示的卡片 */
.product-card-carousel .carousel-card.side-hide {
    opacity: 0;
    visibility: hidden; /* 增加隐藏属性 */
    transform: translateX(0) scale(0.7) translateZ(-500px);
    pointer-events: none;
    z-index: 1;
}

/* 确保描述文字平滑切换 */
.product-card-carousel #carousel-desc-text {
    min-height: 1.5em; /* 防止文字切换时容器高度跳动 */
    transition: none; /* 交给 JS animate 处理更稳定 */
}
/* 底部标题和文字自适应 */
.product-card-carousel .titles-container {
    display: flex;
    justify-content: center;
    gap: 5vw;
    margin-bottom: 20px;
    width: 90%;
    border-bottom: 1px solid #333;
}
.product-card-carousel .title-item { font-size: 1.5rem; font-weight: 600; color: #7F7F7F; transition: 0.5s; cursor: pointer; position: relative; border-bottom: 1px solid #333;
    padding: 5px 20px;
}
.product-card-carousel .title-item.active { opacity: 1; border-bottom: 1px solid; color: #fff;}

.product-card-carousel .description-box {
    width: 90%;
    max-width: 800px;
    text-align: center;
}
.product-card-carousel .description-box p { font-size: 1.2rem; line-height: 1.6; color: #ccc; opacity: 0; transition: opacity 0.5s; }
.product-card-carousel .description-box p.show { opacity: 1; }
.product-card-carousel .mobile-text-content {
    display: none;
}

/* 平板端 (1024px 以下) */
@media (max-width: 1024px) {
    .product-card-carousel .carousel-card {
        width: 70%; /* 平板上卡片占宽一点 */
    }
    .product-card-carousel .carousel-card.left { transform: translateX(-45%) scale(0.75) translateZ(-200px); }
    .product-card-carousel .carousel-card.right { transform: translateX(45%) scale(0.75) translateZ(-200px); }
}

/* 移动端兼容 (767px 以下) */
@media (max-width: 767px) {
    .product-card-carousel .pc-only {
        display: none !important;
    }

    .product-card-carousel .carousel-wrapper {
        aspect-ratio: unset !important; /* 移除比例锁定 */
        height: auto !important; /* 允许由内部卡片高度撑开 */
        min-height: 400px; /* 设置一个最小高度防止布局塌陷 */
        display: flex;
        overflow-x: auto;
        padding: 20px 20px 40px;
        perspective: none;
        align-items: flex-start;
        justify-content: flex-start;
        scrollbar-width: none; /* 隐藏滚动条 */
        gap: 20px;
    }

    .product-card-carousel .carousel-wrapper::-webkit-scrollbar {
        display: none;
    }

    .product-card-carousel .carousel-card {
        position: relative;
        flex: 0 0 85%; 
        width: 85%;
        height: auto; /* 核心修改：允许高度自适应内容 */
        aspect-ratio: unset !important; /* 核心修改：移除卡片整体的比例限制 */
        left: unset;
        top: unset;
        margin: 0;
        transform: none !important;
        opacity: 1 !important;
        scroll-snap-align: start;
        background: transparent;
        box-shadow: none;
        display: flex;
        flex-direction: column; /* 纵向排列图片和文字 */
    }

    /* 2. 调整图片：将比例限制在图片上，而不是卡片上 */
    .product-card-carousel .carousel-card img {
        content: var(--mb-img);
        width: 100%;
        aspect-ratio: 233 / 293; /* 这里控制图片为正方形，你可以根据设计稿改回 3/2 */
        border-radius: 20px;
        object-fit: cover;
    }

    /* 3. 文字内容：确保其能正常占用空间 */
    .product-card-carousel .mobile-text-content {
        display: block;
        margin-top: 15px;
        text-align: left;
        padding-right: 10px; /* 防止文字紧贴边缘 */
    }

    .product-card-carousel .mobile-text-content h4 {
        font-size: 1.4rem;
        margin: 0 0 10px 0;
        color: #fff;
    }

    .product-card-carousel .mobile-text-content p {
        font-size: 1rem;
        color: #ccc;
        line-height: 1.5;
        margin: 0;
    }
}