/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */
.product-card-box {
	width: 90%;
	/* margin: clamp(1rem, 2vw, 1.5rem) auto 0; */
    margin:0 auto;
	margin-top: 40px;
    max-width: 1690px;
    margin-bottom:45px;
    max-height: 560px;
    
}

.product-card-container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	/* 关键修改1：增大间距值（原 clamp(0.3rem, 0.5vw, 0.36rem) → 现在放大2倍左右） */
	/* gap: clamp(0.6rem, 1vw, 0.8rem); */
	padding: 0; /* 保持无内边距，避免间距叠加 */
    max-width: 1690px;
    max-height: 560px;
}

/* 新增：外层容器（承载圆角、阴影、尺寸，避免缩放时圆角丢失） */
.product-card-wrap {
    /* 原卡片的宽度计算逻辑移到外层 */
    width: calc(25% - (clamp(0.6rem, 1vw, 0.8rem) * 3 / 4));
    flex: 1;
    border-radius: clamp(0.375rem, 1vw, 0.5rem); /* 外层承载圆角 */
    overflow: hidden; /* 裁剪内层缩放的卡片 */
    box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem) clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05); /* 外层承载阴影 */
    position: relative;
    z-index: 1;
    max-width: 410px;
    max-height: 560px;
}

/* ######################################################################### */
/* 移动端样式（单独配置，max-width: 1023px）- 后续修改仅改这里 */
/* ######################################################################### */
@media (max-width: 1023px) {
	/* 卡片容器：移动端特有 */
    
	.product-card-container {
		align-items: stretch;
	}

    /* 外层容器移动端适配：宽高比移到外层 */
    .product-card-wrap {
        aspect-ratio: 3 / 4.2;
    }

	/* 卡片核心：移动端调整（移除圆角、阴影，添加will-change） */
	.product-card {
		background: rgb(242, 243, 245);
		cursor: pointer;
		width: 100%; /* 内层卡片占满外层容器 */
		height: 100%;
		flex: none;
		margin: 0; /* 保持无margin，间距由gap控制 */
		display: flex;
		flex-direction: column;
		will-change: transform; /* 优化渲染，避免圆角异常 */
	}

	/* 卡片hover效果：移动端特有 */
	.product-card:hover {
		transform: scale(clamp(1.01, 1.02, 1.03));
		transition: transform 0.3s ease;
	}

    /* 外层容器hover增强阴影（更自然的浮起效果） */
    .product-card-wrap:hover {
        box-shadow: 0 clamp(0.2rem, 0.4vw, 0.25rem) clamp(0.5rem, 1vw, 0.8rem) rgba(0, 0, 0, 0.08);
    }

	/* 图片容器：移动端固定占比 */
	.product-card-img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex: 0 0 72%;
		margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
		overflow: hidden;
		border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
	}

	/* 产品图片：移动端特有 */
	.product-card img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	/* 文字容器：移动端固定占比 */
	.product-card-text {
		flex: 0 0 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: clamp(0.8rem, 2vw, 1.5rem);
		padding-right: clamp(0.8rem, 2vw, 1.5rem);
	}

	/* 标题样式：移动端特有 */
	.product-card-title {
		font-size: clamp(0.8rem, 1.3vw, 1.2rem);
		font-weight: 600;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 35%;
		line-height: 1.2;
	}

	/* 描述样式：移动端固定2行高度 */
	.product-card-desc {
		font-size: clamp(0.7rem, 1.1vw, 0.9rem);
		color: #656565;
		word-break: break-word;
		height: 65%;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
	}

	/* 链接图标容器：移动端固定占比 */
	.product-card-link {
		width: 100%;
		display: flex;
		align-items: center;
		flex: 0 0 10%;
		padding: clamp(0.8rem, 2vw, 1.5rem);
	}

	/* 链接图标：移动端特有 */
	.product-card-link img {
		width: clamp(2.5rem, 5vw, 4.5rem);
		height: auto;
		object-fit: contain;
	}

	/* 移动端768px以上补充样式 */
	@media (min-width: 768px) and (max-width: 1023px) {
		.product-card-img {
			flex: 0 0 72%;
		}

		.product-card-link img {
			width: clamp(5rem, 4vw, 6rem);
		}
	}
}

/* ######################################################################### */
/* PC端样式（单独配置，min-width: 1024px）- 后续修改仅改这里 */
/* ######################################################################### */
@media (min-width: 1024px) {
	/* 卡片容器：PC端特有（高度自适应） */
	.product-card-container {
		align-items: stretch;
		height: clamp(30vw, 35vw, 480px);
		/* 关键修改3：PC端同步增大gap间距（与通用容器一致） */
		gap: clamp(0.6rem, 1vw, 0.8rem);
		padding: 0;
        max-width: 1690px;
        display: flex;
        justify-content: space-between;
	}

    /* 外层容器PC端适配：高度占满容器 */
    .product-card-wrap {
        height: 100%;
        max-width: 410px;
        max-height: 560px;
        flex:1
    }

	/* 卡片核心：PC端调整（移除圆角、阴影，添加will-change） */
	.product-card {
		background: rgb(242, 243, 245);
		cursor: pointer;
		width: 100%; /* 内层卡片占满外层容器 */
		height: 100%;
		flex: none;
		margin: 0; /* 保持无margin */
		display: flex;
		flex-direction: column;
		will-change: transform; /* 优化渲染，避免圆角异常 */
        max-width: 410px;
        max-height: 560px;
	}

	/* 卡片hover效果：PC端特有 */
	.product-card:hover {
		transform: scale(clamp(1.01, 1.02, 1.03));
		transition: transform 0.3s ease;
	}

    /* 外层容器hover增强阴影 */
    .product-card-wrap:hover {
        box-shadow: 0 clamp(0.2rem, 0.4vw, 0.25rem) clamp(0.5rem, 1vw, 0.8rem) rgba(0, 0, 0, 0.08);
    }

	/* 图片容器：PC端固定占比 */
	.product-card-img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex: 0 0 72%;
		margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
		overflow: hidden;
		border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
        max-width: 410px;
        max-height: 350px;
	}

	/* 产品图片：PC端特有 */
	.product-card img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	/* 文字容器：PC端固定占比 */
	.product-card-text {
		/* flex: 0 0 15%; */
		display: flex; /* 补充display: flex，原代码遗漏 */
		flex-direction: column;
		justify-content: center;
     
		padding-left: clamp(1.5rem, 2vw, 3rem);
	}

	/* 标题样式：PC端特有  clamp(0.8rem, 1.3vw, 1.5rem);*/
	.product-card-title {
		font-size:clamp(0.8rem, 1.3vw, 1.9rem);
		font-weight: 600;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.2;
		display: flex;
		align-items: center;
        /* margin-top */
	}

	/* 描述样式：PC端固定2行高度 clamp(0.7rem, 1.1vw, 0.9rem);*/
	.product-card-desc {
		font-size: clamp(1rem, 1.3vw, 1.5rem);
		color: #656565;
		word-break: break-word;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		padding-top:clamp(0.4rem, 3vw, 0.9rem) ;
	}

	/* 链接图标容器：PC端固定占比 */
	.product-card-link {
		width: 100%;
		flex: 1;
		padding-left: clamp(1.5rem, 2vw, 3rem);
        display: flex;
        align-items: center;
        /* max-width: 111px;
        max-height:19px ; */
        /* 1rem=16px，3.125rem=50px */
        /* padding-top: clamp(1rem, 2vw, 3.125rem);
        padding-bottom: clamp(1rem, 5vw, 3.125rem); */
	}

	/* 链接图标：PC端特有 */
	.product-card-link img {
		/* width: clamp(2.5rem, 5vw, 4.5rem); */
        max-width: 111px;
		max-height: 19px;
		object-fit: contain;
	}
}