@import "design-tokens.less";

@product-artboard: 150rem;
@product-scale: (@layout-max / @product-artboard);

.product-shell() {
	width: 100%;
	max-width: @layout-max;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.product-mo-shell() {
	width: 100%;
	max-width: 38.2rem;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.page-product {
	overflow: hidden;
	min-height: 100vh;

	.content {
		.product-shell();
		padding-left: 0;
		padding-right: 0;

		.product-content {
			padding-top: 2rem;
			padding-bottom: (9rem * @product-scale);

			.breadcrumb {
				.product-shell();
				display: flex;
				height: 8rem;
				align-items: center;
				width: 100%;
				padding-left: 0;
				padding-right: 0;

				.home-icon {
					width: 2.8rem;
					height: 2.6rem;
				}

				.arrow-icon {
					margin-left: 1.2rem;
					margin-right: 1.2rem;
					width: 0.5rem;
					height: 1rem;
				}

				.active,
				.inactive {
					font-size: 2rem;
					line-height: 1.2;
					letter-spacing: -0.4px;
				}

				.active {
					color: #1f94d2;
				}

				.inactive {
					color: #000;
				}
			}

			.info {
				margin-top: 1.6rem;

				.slogan {
					color: #000;
					font-size: (5.6rem * @product-scale);
					line-height: 1.4;
				}

				.swiper-button-disabled {
					opacity: 0.3;
				}

				.separator {
					height: 1px;
					width: 100%;
					background: #e2e2e2;
					margin-top: 2rem;
					margin-bottom: (3.8rem * @product-scale);
				}

				.info-inner {
					align-items: flex-start;
					gap: (5.4rem * @product-scale);
				}

				.product-img-container {
					flex: 0 0 (74rem * @product-scale);
					width: (74rem * @product-scale);
					max-width: 58%;

					.product-img-wrapper {
						height: (36.6rem * @product-scale);

						.swiper {
							overflow: hidden;
							width: 100%;
							height: 100%;

							.swiper-slide {
								display: flex;
								align-items: center;
								justify-content: center;
								height: 100%;
							}

							.product-img {
								position: relative;
								width: 100%;
								height: 100%;
								left: auto;
								top: auto;
								object-fit: contain;
							}
						}
					}

					.indicators {
						display: flex;
						align-items: center;
						width: 100%;
						justify-content: center;
						margin-top: (2.6rem * @product-scale);
						margin-bottom: (2.6rem * @product-scale);

						.indicator {
							width: 1.8rem;
							height: 1.8rem;
							border-radius: 50%;
							background: rgba(0, 0, 0, 0.4);
							margin-left: 0.8rem;
							margin-right: 0.8rem;

							&.active {
								background: #4c4c4c;
							}
						}
					}

					.control-group {
						width: 100%;
						align-items: center;
						justify-content: center;

						.prev-button,
						.next-button {
							width: 4.8rem;
							height: 4.8rem;
							cursor: pointer;
						}

						.next-button {
							margin-left: 11rem;
						}
					}
				}

				.product-intro {
					flex: 1;
					min-width: 0;
					width: auto;
					max-width: (70.6rem * @product-scale);
					padding-top: 2rem;

					.title {
						color: #000;
						font-size: (3.8rem * @product-scale);
						line-height: 1.4;
					}

					.desc {
						color: #000;
						font-size: (2.6rem * @product-scale);
						line-height: 1.4;
						margin-top: 1.6rem;
					}
				}
			}

			.detail {
				margin-top: (6.8rem * @product-scale);

				.detail-button {
					width: 100%;
					max-width: (73.5rem * @product-scale);
					height: (12rem * @product-scale);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: relative;

					.dialogue {
						position: absolute;
						width: 100%;
						height: (13.7rem * @product-scale);
						left: 0;
						top: 0;
						object-fit: fill;
					}

					.icon-1 {
						position: relative;
						width: 3.6rem;
						height: 3.4rem;
						margin-bottom: 1.6rem;
						z-index: 1;
					}

					.button-text {
						position: relative;
						color: #fff;
						font-size: 2rem;
						line-height: 1.2;
						z-index: 1;
					}
				}

				.detail-data {
					margin-top: 6rem;
					padding: 2.5rem;
					border-radius: 1.5rem;
					border: 1px solid #edeff2;
					box-sizing: border-box;

					.detail-inner {
						position: relative;
						width: 100%;
						border-radius: 1.5rem;
						background: #edeff2;
						padding-left: (10rem * @product-scale);
						padding-top: (10rem * @product-scale);
						padding-right: (4rem * @product-scale);
						padding-bottom: (6rem * @product-scale);
						box-sizing: border-box;
						min-height: (72rem * @product-scale);

						.detail-title {
							font-size: (3rem * @product-scale);
							line-height: 1.2;
							color: #000;
						}

						.model-info {
							color: #1f94d2;
							font-size: 1.6rem;
							line-height: 1.4;
							margin-top: 1rem;
							margin-bottom: 1rem;
						}

						.certs {
							display: block;
							width: (26.4rem * @product-scale);
							height: (4.3rem * @product-scale);
							object-fit: contain;
							margin-bottom: (7.2rem * @product-scale);
						}

						.detail-desc {
							font-size: (2rem * @product-scale);
							line-height: 1.4;
							color: #000;
							margin-top: (4rem * @product-scale);
							margin-bottom: (21rem * @product-scale);
							width: (33rem * @product-scale);
							max-width: 55%;
						}

						.spec {
							position: absolute;
							left: (69.3rem * @product-scale);
							top: (30rem * @product-scale);
							right: (4rem * @product-scale);
							width: auto;
							max-width: (48rem * @product-scale);

							.detail-title {
								font-size: (3rem * @product-scale);
							}

							.specs {
								margin-top: (2.8rem * @product-scale);

								.spec-line {
									font-size: (2rem * @product-scale);
									line-height: 2.8;
									color: #000;

									.spec-margin-left {
										margin-left: (4rem * @product-scale);
									}
								}
							}
						}

						.dimensions {
							margin-top: (4rem * @product-scale);
							margin-bottom: 2rem;

							.dimension-text {
								color: #000;
								font-size: (2rem * @product-scale);
								line-height: 1.4;
							}
						}

						.detail-img {
							position: relative;
							width: (59.5rem * @product-scale);
							height: (43.7rem * @product-scale);
							margin-left: (-6.4rem * @product-scale);
							margin-top: 0;

							.bg-img,
							img {
								position: relative;
								display: block;
								width: 100%;
								height: 100%;
								left: auto;
								top: auto;
								object-fit: contain;
								object-position: left center;
							}
						}
					}
				}
			}
		}
	}

	#product-content-1,
	#product-content-2 {
		display: none;

		.detail-inner .detail-img {
			width: (59.5rem * @product-scale);
			height: (43.7rem * @product-scale);
			margin-left: (-6.4rem * @product-scale);
		}
	}

	#product-content-3,
	#product-content-4 {
		display: none;

		.detail-inner .detail-img {
			width: (64.3rem * @product-scale);
			height: (54.5rem * @product-scale);
			margin-left: (-5.6rem * @product-scale);
		}
	}
}

@media (max-width: @bp-mobile) {
	.page-product {
		.content {
			.product-mo-shell();
			padding-left: 0;
			padding-right: 0;

			.product-content {
				padding-top: 3rem;
				padding-bottom: 5rem;

				.breadcrumb {
					display: none;
				}

				.info {
					margin-top: 0;

					.info-inner {
						flex-direction: column;
						gap: 0;
					}

					.slogan {
						font-size: 3rem;
						line-height: 1.2;
					}

					.separator {
						margin-top: 2rem;
						margin-bottom: 1.6rem;
					}

					.product-img-container {
						flex: none;
						width: 100vw;
						max-width: 100vw;
						margin-left: calc(19.1rem - 50vw);
						margin-right: calc(19.1rem - 50vw);

						.product-img-wrapper {
							height: 31.2rem;
						}

						.indicators {
							margin-top: 2rem;
							margin-bottom: 6rem;

							.indicator {
								width: 1rem;
								height: 1rem;
								margin-left: 0.4rem;
								margin-right: 0.4rem;
							}
						}

						.control-group {
							display: none;
						}
					}

					.product-intro {
						width: 100%;
						max-width: 100%;
						padding-top: 0;

						.title {
							font-size: 2.2rem;
							line-height: 1.36;
						}

						.desc {
							font-size: 1.4rem;
							line-height: 1.43;
							margin-top: 2.4rem;
						}
					}
				}

				.detail {
					margin-top: 6rem;

					.detail-button {
						width: 100%;
						max-width: 38.4rem;
						height: 6.27rem;
						flex-direction: row;
						box-sizing: border-box;

						.dialogue {
							height: 7.158rem;
							object-fit: fill;
						}

						.icon-1 {
							width: 2.8rem;
							height: 2.7rem;
							margin-bottom: 0;
							margin-right: 0.8rem;
							margin-top: -0.2rem;
						}

						.button-text {
							font-size: 1.6rem;
						}
					}

					.detail-data {
						margin-top: 3.1rem;
						padding: 2rem 1.6rem;
						border-radius: 1rem;
						box-sizing: border-box;
						overflow: hidden;

						.detail-inner {
							position: relative;
							display: block;
							min-height: 0;
							padding: 7rem 1.6rem 2.4rem 2.4rem;
							box-sizing: border-box;
							overflow: hidden;

							.detail-title {
								font-size: 2rem;
								line-height: 1.2;
							}

							.model-info {
								font-size: 1.2rem;
								margin-top: 1.5rem;
								margin-bottom: 1.2rem;
							}

							.certs {
								display: block;
								width: 18.9rem;
								height: 3.078rem;
								max-width: 100%;
								object-fit: contain;
								margin-bottom: 7rem;
							}

							.detail-desc {
								font-size: 1.4rem;
								line-height: 1.43;
								margin-top: 2rem;
								margin-bottom: 5.8rem;
								width: 100%;
								max-width: 31rem;
							}

							.spec {
								position: relative;
								left: auto;
								top: auto;
								right: auto;
								max-width: 100%;
								margin-top: 0;
								margin-bottom: 8rem;

								.detail-title {
									font-size: 2rem;
								}

								.specs {
									margin-top: 2.4rem;

									.spec-line {
										font-size: 1.4rem;
										line-height: 2.6;

										.spec-margin-left {
											margin-left: 2.4rem;
										}
									}
								}
							}

							.dimensions {
								margin-top: 2.4rem;
								margin-bottom: 1rem;

								.dimension-text {
									font-size: 2rem;
									line-height: 1.4;
								}
							}

							.detail-img {
								position: relative;
								width: 100%;
								max-width: 34.6rem;
								height: auto;
								margin-left: 0;
								margin-top: 0;
								overflow: visible;

								.bg-img,
								img {
									display: block;
									width: 100%;
									height: auto;
									object-fit: contain;
									object-position: left center;
								}
							}
						}
					}
				}
			}

			#product-content-1,
			#product-content-2 {
				.detail-inner .detail-img {
					max-width: 34.6rem;
				}
			}

			#product-content-3,
			#product-content-4 {
				.detail-inner .detail-img {
					max-width: 34.6rem;
				}
			}
		}
	}
}