@import "design-tokens.less";

/* EVOX 覆盖层：桌面 120rem（≥991px）+ 手机（≤990px）；基础样式在 evox.less */
@evox-artboard: 1720;

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

@evox-banner-overlay-pct: 55%;
@evox-banner-pc-height: calc(300 / 1080 * 100vw);
@evox-banner-pc-min-h: 30rem;
@evox-banner-text-inset: ~"max((300 / 1080 * 100vw / 3), 10rem)";

@media screen and (min-width: @bp-desktop) {
.page-evox {
	overflow: hidden;

	.grid-1 {
		position: relative;
		width: 100%;
		max-width: none;
		height: @evox-banner-pc-height;
		min-height: @evox-banner-pc-min-h;
		overflow: hidden;

		picture {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			margin: 0;
		}

		.evox-banner-img,
		.banner-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			transform: none;
			object-fit: cover;
			object-position: left center;
		}

		.banner-bg {
			position: absolute;
			width: @evox-banner-overlay-pct;
			height: 100%;
			top: 0;
			right: 0;
			left: auto;
			z-index: 1;
		}

		.banner-text {
			position: absolute;
			z-index: 2;
			left: ~"calc((100% - @{evox-banner-overlay-pct}) + @{evox-banner-text-inset})";
			right: auto;
			width: 56rem;
			max-width: ~"calc(@{evox-banner-overlay-pct} - @{evox-banner-text-inset})";
			top: 0;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.banner-bg-inner {
				position: relative;
				top: auto;
				right: auto;
				left: auto;
				width: 100%;
				height: auto;
				padding: 0;
				box-sizing: border-box;
				object-fit: unset;

				&.bg-img {
					position: relative;
					inset: auto;
				}

				.title {
					color: #333333;
					font-size: 4.5rem;
					line-height: 1.2;
					margin-bottom: 2.4rem;
					white-space: normal;
				}

				.desc {
					color: #333333;
					font-size: 1.7rem;
					line-height: 1.5;
					width: 100%;
					max-width: (720 / @evox-artboard * @layout-max);
				}
			}
		}
	}

	#categories.categories {
		.evox-content();
		padding-left: 0;
		padding-right: 0;

		.title {
			margin-left: 0;
		}

		.pills {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.grid-2 {
		.evox-content();
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: (115 / @evox-artboard * @layout-max);
		margin-bottom: (72 / @evox-artboard * @layout-max);
		padding-left: 0;
		padding-right: 0;

		.grid-text {
			padding-top: (24 / @evox-artboard * @layout-max);

			.title {
				width: 100%;
				max-width: (440 / @evox-artboard * @layout-max);
				font-size: (40 / @evox-artboard * @layout-max);
			}

			.desc {
				font-size: (22 / @evox-artboard * @layout-max);
				margin-top: (40 / @evox-artboard * @layout-max);
			}
		}

		/* 原稿 351×220 视口 + 428.76×318.6 溢出裁剪，保持设计稿可见尺寸 */
		.grid-img {
			position: relative;
			flex: 0 0 35.1rem;
			width: 35.1rem;
			height: 22.032rem;
			overflow: hidden;

			.group-img {
				width: 42.876rem;
				height: 31.86rem;
				right: -0.54rem;
				top: -1.296rem;
				left: auto;
				object-fit: contain;
			}
		}
	}

	.switch-row {
		width: 100%;
		max-width: @layout-max;
		margin-left: auto;
		margin-right: auto;
		height: 21.5rem;
		background: #eaeaea;
		display: flex;
		align-items: stretch;
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;

		.switch-grid {
			flex: 1 1 0;
			min-width: 0;
			width: auto;
			max-width: none;
			height: 100%;
			position: relative;
			cursor: pointer;

			.grid-text {
				text-align: center;
				padding-top: 15.8rem;
				color: #4b4949;
				font-size: 1.2rem;
				line-height: 1.2;
				font-family: 'Gotham-pro-reg';
			}

			&.active {
				background: #cbcbcb;

				.grid-text {
					font-family: 'Gotham-pro-bold';
				}
			}

			.machine-1 {
				width: 13.2rem;
				height: 13.2rem;
				top: 1.8rem;
			}

			.machine-2 {
				width: 10.4rem;
				height: 10.4rem;
				top: 4.2rem;
			}

			.machine-3 {
				width: 16.6rem;
				height: 16.6rem;
				top: 1.1rem;
			}

			.machine-4,
			.machine-5 {
				width: 13rem;
				height: 13rem;
				top: 3rem;
			}
		}
	}

	.content-container {
		.evox-content();

		.content-wrapper {
			padding-top: (100 / @evox-artboard * @layout-max);
			padding-bottom: (100 / @evox-artboard * @layout-max);

			.inner {
				display: flex;
				align-items: stretch;
				justify-content: space-between;
				gap: (50 / @evox-artboard * @layout-max);
				padding-left: 0;
				padding-right: 0;

				.flex-left {
					flex: 0 0 (693 / @evox-artboard * @layout-max);
					width: (693 / @evox-artboard * @layout-max);
					max-width: (693 / @evox-artboard * @layout-max);
					min-width: 0;
					margin-right: 0;
					border-radius: (44 / @evox-artboard * @layout-max);
					padding-left: (90 / @evox-artboard * @layout-max);
					padding-top: (130 / @evox-artboard * @layout-max);
					box-sizing: border-box;

					.title {
						font-size: (72 / @evox-artboard * @layout-max);
						margin-bottom: (44 / @evox-artboard * @layout-max);
					}

					.list {
						font-size: (28 / @evox-artboard * @layout-max);
						// width: (322 / @evox-artboard * @layout-max);
						max-width: 100%;
					}
				}

				.flex-right {
					flex: 1 1 0;
					min-width: 0;
					max-width: 100%;
					padding-top: (92 / @evox-artboard * @layout-max);
					overflow: visible;

					.card-1-note {
						font-size: (22 / @evox-artboard * @layout-max);
					}

					.card-2,
					.card-52 {
						width: 100%;
						max-width: 100%;

						.title {
							width: 100%;
							max-width: none;
							font-size: (40 / @evox-artboard * @layout-max);
						}

						.card-body {
							width: 100%;
							max-width: 100%;
							height: auto;
							min-height: 0;

							.card-img {
								width: 100%;
								height: auto;
							}
						}
					}

					.card-2 .card-body {
						aspect-ratio: 976 / 379;
						min-height: (379 / @evox-artboard * @layout-max);
					}

					.options,
					.options52 {
						width: 100%;
						max-width: 100%;
						flex-wrap: wrap;
						gap: (24 / @evox-artboard * @layout-max);
					}

					[class*="card-"] {
						max-width: 100%;
					}
				}
			}
		}
	}

	.content-container {
		/* SEER2 / EER2 / HSPF2 灰条（#content-1–3 共用，覆盖 legacy 97.4rem 固定宽） */
		#content-1,
		#content-2,
		#content-3 {
			.inner .flex-right .card-1 {
				width: 100%;
				max-width: 100%;
				height: (151 / @evox-artboard * @layout-max);
				min-height: (151 / @evox-artboard * @layout-max);
				background-color: #f2f2f2;
				border-radius: (16 / @evox-artboard * @layout-max);
				justify-content: flex-start;
				align-items: center;
				padding-left: (34 / @evox-artboard * @layout-max);
				padding-right: (34 / @evox-artboard * @layout-max);
				box-sizing: border-box;
				position: relative;
				overflow: visible;
				flex-wrap: nowrap;

				.spec-name {
					color: #4b4949;
					font-size: (26 / @evox-artboard * @layout-max);
					line-height: 1.2;
				}

				.spec-value {
					color: #4b4949;
					font-size: (40 / @evox-artboard * @layout-max);
					margin-top: (8 / @evox-artboard * @layout-max);
					line-height: 1;
				}

				.separator-1,
				.separator-2 {
					flex-shrink: 0;
					width: 1px;
					height: (107 / @evox-artboard * @layout-max);
					background: #cccccc;
					margin-left: (44 / @evox-artboard * @layout-max);
					margin-right: (44 / @evox-artboard * @layout-max);
				}

				.img-wrapper {
					position: absolute;
					left: auto;
					right: -4rem;
					width: 20rem;
					height: 20rem;
					top: -10rem;

					.img-wrapper-inner {
						position: relative;
						overflow: hidden;
						left: (-9 / @evox-artboard * @layout-max);
					}

					.fridge {
						width: 20rem;
						height: 20rem;
						left: (-35 / @evox-artboard * @layout-max);
						top: (-8 / @evox-artboard * @layout-max);
					}

					.spec-text {
						color: #4b4949;
						font-size: 2rem;
						top: 22rem;
						white-space: nowrap;
						left: 8rem;
					}
				}
			}
		}

		#content-1,
		#content-2 {
			.inner .flex-right .options .option-values {
				width: 17rem;
			}
		}

		#content-3 {
			.inner .flex-right .card-1 .img-wrapper {
				width: 15rem;
				height: 15rem;
				right: -1rem;
				top: 1.5rem;

				.img-wrapper-inner {
					top: (-9 / @evox-artboard * @layout-max);
				}

				.fridge {
					width: 15rem;
					height: 15rem;
					left: (-2 / @evox-artboard * @layout-max);
					top: (-50 / @evox-artboard * @layout-max);
				}

				.spec-text {
					top: 10rem;
					left: 7rem;
				}
			}

			/* A|C / B|D 两行：不用 flex-wrap+gap，避免挤乱第二列 */
			.inner .flex-right .options {
				flex-wrap: nowrap;
				gap: 0;
				align-items: flex-start;

				> .flex {
					display: flex;
					align-items: flex-start;
				}
			}
		}

		#content-1,
		#content-2,
		#content-3,
		#content-4 {
			.inner {
				padding-left: 0;
				padding-right: 0;

				.flex-right {
					.card-1 .title {
						width: 100%;
						max-width: 100%;
					}

					.card-2,
					.card-52 {
						.title {
							width: 100%;
							max-width: 100%;
							font-size: 3rem;
						}

						.card-body {
							width: 100%;
							max-width: 100%;
						}
					}

					.card-3 {
						width: 100%;
						max-width: 100%;
						height: auto;
						min-height: (397 / @evox-artboard * @layout-max);
					}

					.card-4 {
						.title {
							width: 100%;
							max-width: 100%;
						}

						.card-body {
							width: 100%;
							max-width: 100%;
							height: auto;
							min-height: (428 / @evox-artboard * @layout-max);
						}
					}

					.card-5 {
						width: 100%;
						max-width: 100%;
						box-sizing: border-box;
					}

					.card-6 .compare {
						width: 100%;
						max-width: 100%;
						height: auto;
					}
				}
			}
		}

		#content-4 .inner .flex-right .card-1 {
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;

			.title {
				font-size: (46 / @evox-artboard * @layout-max);
				line-height: 1.2;
				margin-bottom: (24 / @evox-artboard * @layout-max);
			}

			.machine-img {
				width: 100%;
				height: auto;
			}
		}
	}

	.product-grid.ani-tab-grid {
		.evox-content();

		.ani-tab-grid-title {
			width: 100%;
			max-width: @layout-max;
			margin-left: auto;
			margin-right: auto;
			padding-left: (114 / @evox-artboard * @layout-max);
			padding-right: (114 / @evox-artboard * @layout-max);
			box-sizing: border-box;
		}

		.product-grid-show-more {
			.product-grid-content {
				position: relative;
				left: auto;
				top: auto;
				width: 100%;
				max-width: @layout-max;
				margin-left: auto;
				margin-right: auto;
				padding: (36 / @evox-artboard * @layout-max) 0 (72 / @evox-artboard * @layout-max);
				height: auto;
				box-sizing: border-box;

				&.abs {
					position: relative;
				}

				.product-row-1,
				.product-row-2 {
					width: 100%;
					height: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.product-row-2 {
					margin-top: (24 / @evox-artboard * @layout-max);
				}

				.product-row-img {
					position: relative;
					left: auto;
					top: auto;
					display: block;
					width: 100%;
					max-width: (920 / @evox-artboard * @layout-max);
					height: auto;
					object-fit: contain;
					object-position: center bottom;
				}

				.pill-text,
				.pill-text-1,
				.pill-text-2 {
					position: relative;
					left: auto;
					top: auto;
					transform: none;
					width: 100%;
					max-width: (920 / @evox-artboard * @layout-max);
					margin: 1.4rem auto 0;
					font-size: 1.4rem;
					line-height: 1.35;
					font-family: 'Gotham-pro-reg';
					color: #000;
					letter-spacing: -0.02em;
					text-align: center;
					white-space: nowrap;
				}

				.button,
				.product-grid-btn {
					position: relative;
					left: auto;
					bottom: auto;
					transform: none;
					width: 20rem;
					height: 4rem;
					margin: 2.4rem auto 0;
					font-size: 1.4rem;
				}
			}
		}
	}

	.ani-tab-grid:not(.product-grid) {
		.evox-content();

		.ani-tab-grid-title {
			width: 100%;
			max-width: @layout-max;
			margin-left: auto;
			margin-right: auto;
			padding-left: (114 / @evox-artboard * @layout-max);
			padding-right: (114 / @evox-artboard * @layout-max);
			box-sizing: border-box;
		}

		.ani-tab-show-more {
			width: 100%;
			max-width: @layout-max;
			margin-left: auto;
			margin-right: auto;

			.video-grid {
				position: relative;
				left: auto;
				top: auto;
				width: 100%;
				height: (417 / @evox-artboard * @layout-max);
				border-radius: 0.5rem;
				overflow: hidden;

				&.abs {
					position: relative;
				}

				> .bg-img,
				> img.bg-img {
					position: absolute;
					inset: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.video-grid-inner {
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
					min-height: (417 / @evox-artboard * @layout-max);
					box-sizing: border-box;

					&.bg-img {
						position: relative;
						inset: auto;
						width: 100%;
						height: 100%;
						object-fit: unset;
					}

					.play-btn {
						width: (28 / @evox-artboard * @layout-max);
						height: (28 / @evox-artboard * @layout-max);
						margin-right: (6 / @evox-artboard * @layout-max);
					}

					.title {
						font-size: (40 / @evox-artboard * @layout-max);
					}

					.desc {
						margin-top: (26 / @evox-artboard * @layout-max);
						font-size: (22 / @evox-artboard * @layout-max);
						width: (464 / @evox-artboard * @layout-max);
						max-width: 90%;
					}

					.button {
						margin-top: 2rem;
						width: 20rem;
						height: 5rem;
						font-size: 1.5rem;
						border-radius: 5rem;
					}
				}
			}
		}
	}

	.download-grid.ani-tab-grid {
		.ani-tab-show-more {
			display: none;
		}
	}

	.grid-6 {
		.evox-content();
		padding-top: (100 / @evox-artboard * @layout-max);
		padding-bottom: (60 / @evox-artboard * @layout-max);
		box-sizing: border-box;

		.title {
			margin-left: (54 / @evox-artboard * @layout-max);
			margin-bottom: (28 / @evox-artboard * @layout-max);
			color: #333333;
			font-size: (24 / @evox-artboard * @layout-max);
		}

		.bottom-switch-row {
			width: 100%;
			height: 21.5rem;
			background: #eaeaea;

			.swiper {
				width: 80rem;
				max-width: 100%;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;

				.swiper-wrapper {
					height: 100%;
				}

				.swiper-slide {
					width: 20rem;
					height: 100%;
					padding-top: 15.8rem;
					position: relative;
					cursor: pointer;
					box-sizing: border-box;

					.product-name {
						text-align: center;
						font-size: 1.2rem;
						color: #4b4949;
						line-height: 1.2;
					}

					&.active {
						background: #cbcbcb;

						.product-name {
							font-family: 'Gotham-pro-bold';
						}
					}

					.product-wrapper-1 {
						width: 9.5rem;
						height: 9.5rem;
						top: 3.9rem;
						overflow: hidden;

						.product-1 {
							width: 13.2rem;
							height: 13rem;
							left: -1.9rem;
							top: -2rem;
						}
					}

					.product-wrapper-2 {
						width: 9.5rem;
						height: 9.5rem;
						top: 3.9rem;
						overflow: hidden;

						.product-2 {
							width: 13.37rem;
							height: 13.65rem;
							left: -1.9rem;
							top: -2rem;
						}
					}

					.product-wrapper-3 {
						width: 22.3rem;
						height: 6.8rem;
						top: 6.3rem;

						.product-wrapper-3-inner {
							transform: scale(0.75);
						}

						.product-3-1 {
							width: 9.9rem;
							height: 6.2rem;
							left: 0;
							bottom: 0;

							.product-3-1-img {
								width: 12.2rem;
								height: 9.15rem;
								left: -0.8rem;
								top: -1.55rem;
							}
						}

						.product-3-2 {
							width: 11rem;
							height: 6.8rem;
							bottom: 0;
							right: 0;

							.product-3-2-img {
								width: 12.3rem;
								height: 9.225rem;
								left: -0.7rem;
								top: -1rem;
							}
						}
					}

					.product-wrapper-4 {
						width: 9.5rem;
						height: 9.5rem;
						top: 3.9rem;
						overflow: hidden;

						.product-4 {
							width: 17.34rem;
							height: 13rem;
							left: -3.32rem;
							top: -2.13rem;
						}
					}

					.product-5 {
						height: 10.1rem;
						width: 5.01rem;
						top: 3.5rem;
					}
				}
			}

			.prev-button {
				width: 1rem;
				height: 1.9rem;
				left: 5.6rem;
				cursor: pointer;

				img {
					object-fit: contain !important;
				}
			}

			.next-button {
				width: 1rem;
				height: 1.9rem;
				right: 5.6rem;
				cursor: pointer;

				img {
					object-fit: contain !important;
				}
			}
		}

		/* 详情卡：flex 左图右文，不再用绝对定位 */
		.bottom-switch-cards {
			width: 100%;
			max-width: @layout-max;
			margin-left: auto;
			margin-right: auto;
			min-height: 40.7rem;
			height: auto;
			box-sizing: border-box;

			.bottom-switch-card {
				display: none;
				box-sizing: border-box;
				width: 100%;
				max-width: @layout-max;
				margin-left: auto;
				margin-right: auto;
				min-height: 40.7rem;
				height: auto;
				padding: 2.4rem 3.2rem;
				padding-left: 3.2rem;
				position: relative;
				left: auto;
				transform: none;
				gap: 2.4rem;
				align-items: center;
				justify-content: flex-start;

				&.active {
					display: flex;
					flex-direction: row;
				}

				.bottom-switch-card-media {
					flex: 0 0 42%;
					width: 42%;
					max-width: 50rem;
					min-width: 34rem;
					min-height: 26.3rem;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: visible;

					img {
						display: block;
						position: relative;
						width: auto;
						height: auto;
						max-width: 100%;
						max-height: 36rem;
						min-height: 20rem;
						object-fit: contain;
					}

					&--dual {
						flex: 0 0 46%;
						width: 46%;
						max-width: 56rem;
						min-width: 36rem;
						min-height: 14rem;
						flex-wrap: nowrap;
						justify-content: center;
						gap: 1.6rem;

						img {
							flex: 1 1 0;
							min-width: 0;
							max-width: 22rem;
							max-height: 14rem;
							min-height: 0;
						}
					}
				}

				.bottom-switch-card-body {
					flex: 1 1 0;
					min-width: 0;
					max-width: none;
					position: relative;
				}

				.card-title {
					color: #333333;
					font-size: 4rem;
					line-height: 1.2;
				}

				.card-sub-title {
					margin-top: 0.5rem;
					color: #333333;
					font-size: 2.6rem;
					width: 100%;
					line-height: 1.3;
				}

				.card-desc {
					margin-top: 2.8rem;
					color: #333333;
					font-size: 1.6rem;
					width: 100%;
					line-height: 1.35;
				}

				.button {
					color: #f6f6f6;
					font-size: 1.6rem;
					padding: 1.4rem 3.4rem;
					border-radius: 2rem;
					background: #1f94d2;
					text-align: center;
					cursor: pointer;
					margin-top: 2.8rem;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					text-decoration: none;
					white-space: nowrap;

					&:hover {
						opacity: 0.9;
					}
				}

				/* 覆盖 legacy 绝对定位（evox.less PC 段） */
				[class*="img-wrapper"],
				.img-1,
				.img-2,
				.img-3-1,
				.img-3-2,
				.img-4,
				.img-5 {
					position: relative;
					top: auto;
					left: auto;
					right: auto;
					bottom: auto;
					transform: none;
				}
			}
		}
	}
}
}

/* 手机端：对齐 evox.less 原版；仅补强 HTML/断点拆分后的遗漏 */
@media screen and (max-width: @bp-mobile) {
	@evox-mo-gutter: 0.8rem;
	@evox-mo-inset: 1.2rem;

	.page-evox {
		.grid-1 {
			display: flex;
			flex-direction: column;

			.banner-text {
				display: block;

				&.abs {
					position: relative;
				}

				&.h-full {
					height: auto;
					min-height: 0;
				}

				.banner-bg-inner {
					&.bg-img {
						position: relative;
						inset: auto;
					}
				}
			}
		}

		.grid-2 {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			justify-content: flex-start;

			.grid-text {
				.title {
					font-size: 2.4rem;
				}

				.desc {
					font-size: 1.4rem;
				}
			}

			.grid-img .group-img.mo-only {
				object-fit: contain;
				object-position: center bottom;
			}
		}

		.switch-row {
			background: #eaeaea;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;
			justify-content: center;

			.switch-grid {
				position: relative;
				height: 100%;
			}
		}

		.content-container {
			width: 100%;
			max-width: none;
			box-sizing: border-box;

			.content-wrapper {
				display: none;

				&.active {
					display: block;
				}

				.inner {
					display: flex;
				}

				.flex-left {
					background-color: #f2f2f2;
				}
			}

			#content-4 {
				.inner .flex-right {
					width: 100%;
					max-width: 100%;
					padding-top: 4.8rem;
					box-sizing: border-box;

					.card-1 {
						width: 100%;
						max-width: 100%;
						height: auto;
						margin-left: 0;
						margin-bottom: 4.8rem;
						padding: 0;

						&:last-child {
							margin-bottom: 0;
						}

						.title {
							width: 100%;
							max-width: 100%;
							font-size: 2.4rem;
							line-height: 1.2;
							margin-bottom: 1.6rem;
						}

						.machine-img {
							display: block;
							position: relative;
							left: auto;
							top: auto;
							transform: none;
							width: 100%;
							height: auto;
							max-width: 100%;
							object-fit: contain;
						}
					}
				}
			}

			#content-1,
			#content-2 {
				.inner .flex-right {
					overflow: visible;

					.card-1 {
						overflow: visible;

						.img-wrapper {
							overflow: visible;

							.img-wrapper-inner {
								overflow: visible;
							}

							.spec-text {
								color: #4b4949;
							}
						}
					}

					.card-2 .card-body {
						border: 1px dashed #ccc;

						.card-img {
							position: relative;
							left: 2rem;
							bottom: auto;
							display: block;
							width: 100%;
							height: 100%;
							max-width: 100%;
							transform: none;
							top: -4rem;
						}
					}

					.card-3 {
						width: 100%;
						height: 15.7rem;
						background-color: #1f94d2;

						.filter-text {
							color: #fff;
						}

						.title-1,
						.title-2 {
							color: #fff;
						}

						.filter {
							width: 35rem;
							height: auto;
							left: 3rem;
							top: 3rem;
							object-fit: contain;
						}

						.title-1 {
							font-size: 1.4rem;
							left: 4rem;
							top: 1rem;
						}

						.title-2 {
							font-size: 1.4rem;
							left: 26rem;
							top: 1rem;
						}
					}

				}
			}
		}

		.product-grid.ani-tab-grid,
		.ani-tab-grid {
			width: 100%;
			max-width: none;
			margin-left: auto;
			margin-right: auto;
			margin-top: 1.8rem;
			margin-bottom: 0;
		}

		.product-grid.ani-tab-grid {
			.product-grid-show-more .product-grid-content {
				position: relative;
				left: auto;
				top: auto;
				width: 100%;
				max-width: none;
				height: auto;
				padding: 0.8rem 0 2.4rem;
				background-color: #eaeaea;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;

				&.abs {
					position: relative;
				}
			}

			.product-grid-show-more {
				.button,
				.product-grid-btn {
					position: relative;
					left: auto;
					bottom: auto;
					transform: none;
					margin: 2rem auto 0;
				}

				.product-row-1,
				.product-row-2 {
					width: 100%;
					height: auto;
					padding: 0;
				}

				.product-row-2 {
					margin-top: 1.6rem;
				}

				.product-row-img {
					width: 100%;
					height: auto;
				}

				.pill-text,
				.pill-text-1,
				.pill-text-2 {
					margin-top: 0.8rem;
					padding: 0 0.4rem;
					font-size: 1.4rem;
					line-height: 1.4;
					font-family: 'Gotham-pro-reg';
					color: #000;
					letter-spacing: -0.4px;
					text-align: center;
					white-space: normal;
				}
			}
		}

		.download-grid.ani-tab-grid {
			margin-top: 1.8rem;
		}

		.grid-6 {
			width: 100%;
			max-width: none;
			padding-top: 4.8rem;
			padding-left: 0;
			padding-right: 0;
			overflow: hidden;
			box-sizing: border-box;

			.title {
				margin-left: 1.6rem;
				margin-bottom: 2.2rem;
			}

			.bottom-switch-row {
				width: 100%;
				height: auto;
				min-height: 20rem;
				background: #eaeaea;

				.swiper {
					width: 100%;
					max-width: 38.2rem;

					.swiper-wrapper {
						height: auto;
					}

					.swiper-slide {
						width: 9.5rem;
						padding-top: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}

				.product-wrapper-1,
				.product-wrapper-2,
				.product-wrapper-3,
				.product-wrapper-4 {
					position: relative;
					left: auto;
					top: auto;
					transform: none;
				}

				.product-wrapper-3-inner {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					height: auto;
				}

				.prev-button,
				.next-button {
					width: 1rem;
					height: 1.9rem;
					overflow: hidden;

					img,
					.bg-img {
						object-fit: contain !important;
					}
				}
			}

			.bottom-switch-cards {
				width: 100%;
				max-width: none;
				min-height: 0;
			}

			.bottom-switch-card {
				display: none;
				position: relative;
				left: auto;
				transform: none;
				width: 100%;
				max-width: 38.2rem;
				min-height: 0;
				margin-left: auto;
				margin-right: auto;
				padding: 0 1.6rem 3.2rem;
				gap: 0;
				align-items: stretch;
				justify-content: flex-start;

				&.active {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
				}

				.bottom-switch-card-media {
					order: 1;
					flex: none;
					width: 100%;
					max-width: 100%;
					min-width: 0;
					min-height: 0;

					img {
						position: relative;
						left: auto;
						top: auto;
						transform: none;
						min-height: 0;
						max-height: 20rem;
						width: auto;
						height: auto;
					}

					&--dual {
						flex: none;
						width: 100%;
						min-width: 0;
						max-width: 100%;
						flex-wrap: nowrap;
						gap: 1rem;

						img {
							flex: 1 1 0;
							min-width: 0;
							max-width: 48%;
							max-height: 11rem;
						}
					}
				}

				.bottom-switch-card-body {
					order: 2;
					flex: none;
					width: 100%;
					max-width: 100%;
					min-width: 0;
				}

				.card-title {
					font-size: 2rem;
					line-height: 1.2;
					width: 100%;
				}

				.card-sub-title {
					font-size: 1.2rem;
					width: 100%;
				}

				.card-desc {
					font-size: 1.4rem;
					line-height: 1.4;
					width: 100%;
				}

				.button {
					width: 100%;
					max-width: 100%;
					height: 5.4rem;
					margin-top: 3.6rem;
					padding: 0 1.6rem;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					border-radius: 3.2rem;
					font-size: 1.6rem;
					line-height: 1.2;
					color: #fff;
					background-color: #1f94d2;
					text-decoration: none;
					border: none;
					cursor: pointer;
					white-space: normal;
					text-align: center;
				}

				[class*='img-wrapper'] {
					display: none;
				}
			}
		}
	}
}