/* 轮播图高度统一修复 - 针对 Edge 和小屏幕优化 */

#new-carousel {
    /* 移除高度限制，允许 Flexbox 自动撑开 */
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}

/* 强制 Slick Track 使用 Flex 布局，使所有 slide 等高 */
#new-carousel .slick-track {
    display: flex !important;
    align-items: stretch; /* 关键：拉伸子元素 */
}

/* 强制 Slide 等高且填满父容器 */
#new-carousel .slick-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    float: none !important; /* 禁用 float */
    margin: 0 10px; /* 增加一点间距，使卡片之间有空隙 */
}

/* 强制 Slide 内部容器填满高度 */
#new-carousel .slick-slide > div {
    height: 100%;
    width: 100%;
    display: flex !important;
    flex-direction: column;
}

/* 卡片容器样式 - 统一高度 */
#new-carousel .bg-white {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100% !important;
    max-height: none !important; /* 移除之前的限制 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 图片容器 - 固定高度 */
#new-carousel .relative.group {
    flex-shrink: 0; /* 防止图片区域被压缩 */
    height: 220px !important; /* 固定图片高度 */
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 图片本身 - 填满容器 */
#new-carousel .slick-slide img {
    height: 100% !important;
    width: 100%;
    object-fit: cover !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block;
}

/* 文本内容区域 - Flex 布局 */
#new-carousel .p-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem !important; /* 增加内边距 p-5 */
    justify-content: space-between; /* 上下对齐 */
}

/* 标题样式 - 限制行数 */
#new-carousel h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #1f2937; /* text-gray-800 */
    /* 限制标题行数，防止高度不一 */
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 标题限制为1行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* 描述文本 - 限制行数并占据剩余空间 */
#new-carousel p {
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 1rem;
    flex-grow: 1; /* 占据剩余空间 */
    /* 限制描述行数 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 描述限制为3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.5;
}

/* 按钮样式 - 底部对齐 */
#new-carousel a {
    align-self: flex-start;
    margin-top: auto; /* 推到底部 */
    display: inline-block;
}

/* 移动端适配 */
@media (max-width: 640px) {
    #new-carousel .relative.group {
        height: 180px !important;
    }
    #new-carousel h3 {
        font-size: 1.1rem;
    }
    #new-carousel p {
        -webkit-line-clamp: 2; /* 移动端减少行数 */
    }
    #new-carousel .slick-slide {
        margin: 0 5px; /* 移动端减小间距 */
    }
}

/* 修复模态框样式（保留之前的修复） */
#product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 默认隐藏 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#product-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

/* 调整 Slick 导航按钮位置 */
.slick-prev, .slick-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 20 !important;
}

.slick-prev {
    left: -10px !important;
}

.slick-next {
    right: -10px !important;
}

/* 修复 dots 位置 */
.slick-dots {
    bottom: -30px !important;
}