/* 设计稿750px → 1rem=100px，所有尺寸按设计稿÷100换算 */
.product-box {
	background: #fff;
	padding-top: 0.93rem;
}

.product-title {
	width: 93.5%;
	margin: 0 auto;
	padding-bottom: 0.83rem;
}

.product-title-h2 {
	font-size: 0.46rem;
}

.product-title-p {
	font-size: 0.24rem;
	color: #646464;
	margin-top: 0.21rem;
}

/* 容器布局：改为上下结构（右侧在上，左侧在下） */
.product-container {
	display: flex;
	flex-direction: column-reverse; 
	gap: 0.1rem; /* 上下间距 */
	margin: 0 auto;
	width: 93.5%;
	align-items: stretch; /* 宽度铺满 */
}

/* 右侧容器：移到上方 */
.product-right {
	flex: none; /* 取消flex比例，自适应高度 */
	position: relative;
	border-radius: 0.1rem;
	overflow: hidden;
	width: 100%;
	background-color: #f5f5f5;
	min-height: 1.94rem;
	aspect-ratio: 16/9;
}

/* 左侧容器：移到下方 */
.product-left {
	flex: none; /* 取消flex比例，自适应高度 */
	position: relative;
	width: 100%;
}

.product-img {
	width: 100%;
	height: auto;
	border-radius: 0.1rem;
	display: block;
}

/* 第二个产品：悬浮图位置调整（适配下方布局） */
.product-img-2 {
	top: auto; /* 取消顶部定位 */
	bottom: -0.8rem; /* 底部超出 */
	transform: none;
	width: 1.08rem;
	position: absolute;
	right: 0;
}

.right-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease;
}

.right-video {
	display: none;
}
.video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
	display: none;
}

.play-icon {
	display: inline-block;
}
.pause-icon {
	display: none;
}

.video-play-btn.paused .play-icon {
	display: none;
}
.video-play-btn.paused .pause-icon {
	display: inline-block;
}

.right-video[playing] ~ .video-play-btn,
.product-right:hover .video-play-btn {
	opacity: 1;
	display: block;
}

/* 悬浮图容器：适配下方布局 */
.product-img-hover {
	width: auto;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 33;
}
.right {

	right: -0.3rem;
	
}
/* 图片尺寸统一用rem */
.img1, .img2, .img3, .img4, .img5 {
	width: 3.56rem;
	max-width: 3.56rem;
}

.img1 {
	max-width: 2.76rem;
}
.img2 {
	max-width: 2.7rem;
}
.img3 {
	max-width: 2.84rem;
}
.img4 {
	max-width: 2.5rem;
}
.img5 {
	max-width: 2.68rem;
}