.product-specs-comparison {

	.product-specs-comparison-title {
		font-size: 56px;
		font-weight: 600;
		line-height: 1.2;
		color: #1a1a1a;
		text-align: center;
		padding-bottom: 66px;

		@media (max-width: 768px) {
			font-size: 24px;
			padding-bottom: 0;
		}
	}

	.product-specs-comparison-container {
		.sticky-animation-wrapper {
			z-index: 2;
			background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
			position: relative;

			@media (max-width: 768px) {
				padding-top: 14px;
			}

			&.sticky {
				position: sticky;
				top: 0;

				@media (max-width: 768px) {
					top: 39px;
				}
			}

			.product-specs-thumbnail-container {
				display: none;
                position: relative;

				@media (max-width: 768px) {
					display: flex;
                    justify-content: center;
					gap: 6px;

					.product-specs-thumbnail-item {
                        width: 42px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
						padding: 3px;
						border: 1px solid #8c8c8c;
                        background: #FFF;

                        &.active {
                            border: 1px solid #C1AA8A;
                            background: #DFD2C1;

                            .product-specs-thumbnail-product-name {
                                color: #fff;
                                font-weight: 600;
                            }
                        }

						.product-specs-thumbnail-product-image {
							width: 33px;
							height: 25px;

							img {
								width: 100%;
								height: 100%;
								object-fit: contain;
							}
						}

						.product-specs-thumbnail-product-name {
							color: #8c8c8c;
							text-align: center;
							font-size: 15px;
							font-weight: 300;
							line-height: 140%;
						}
					}

                    .product-specs-thumbnail-button-prev,
                    .product-specs-thumbnail-button-next {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 28px;
                        height: 28px;

                        svg {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .product-specs-thumbnail-button-prev {
                        left: -42px;
                    }

                    .product-specs-thumbnail-button-next {
                        right: -42px;
                    }
				}
			}

			.product-specs-comparison-header-swiper-pagination {
				position: absolute;
				top: -14px;
				transform: translateY(-50%);
				bottom: auto;
				display: flex;
				justify-content: center;

				@media (max-width: 768px) {
					display: none;
				}

				.swiper-pagination-bullet {
					background-color: #D9D9D9;
					opacity: 1;

					&.swiper-pagination-bullet-active {
						background-color: #C1AA8A;
					}
				}
			}

			/* 表头行样式 */
			.comparison-header-row {
				display: flex;
				width: 100%;
				border-bottom: 1px solid #9d9d9d;
				padding-top: 106px;
				padding-bottom: 30px;

				@media (max-width: 768px) {
					padding-top: 24px;
					padding-bottom: 8px;
				}

				.spec-fix-header {
					flex: 0 0 300px;
					display: flex;
					align-items: flex-end;
                    gap: 30px;

					@media (max-width: 768px) {
						display: none;
					}

					.swiper-button-prev,
					.swiper-button-next {
						position: relative;
						width: 40px;
						height: 40px;
						top: auto;
						left: auto;
						transform: translate(0, 0);

						&::after {
							display: none;
						}

						svg {
							width: 100%;
							height: 100%;
						}

						@media (max-width: 768px) {
							display: none;
						}
					}
				}

				.product-specs-comparison-header-swiper {
					flex: 1;
					overflow: hidden;

					.swiper-slide {
						width: 300px;

						@media (max-width: 768px) {
							width: 50%;
						}
					}

					.product-specs-comparison-header-cell {
						display: flex;
						justify-content: center;
						align-items: center;

						@media (max-width: 768px) {
							justify-content: flex-start;
							padding: 0 8px;
						}

						.product-specs-comparison-product-header {
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							gap: 20px;
							color: #1a1a1a;

							@media (max-width: 768px) {
								gap: 2px;
								align-items: flex-start;
							}

							.product-specs-comparison-product-name {
								font-size: 30px;
								font-weight: 600;
								line-height: 1.2;

								@media (max-width: 768px) {
									font-size: 16px;
								}
							}

							.product-specs-comparison-product-series {
								font-size: 18px;
								font-weight: 500;
								line-height: 1.2;

								@media (max-width: 768px) {
									font-size: 14px;
								}
							}

							.product-specs-comparison-product-image {
								width: 240px;
								height: 200px;
								transition: all 0.3s ease-in-out;

								@media (max-width: 768px) {
									order: -1;
									width: 86px;
									height: 65px;
								}

								.product-specs-comparison-product-img {
									width: 100%;
									height: 100%;
									object-fit: contain;
								}
							}
						}
					}
				}
			}
		}

		.comparison-content-row {
			display: flex;
			width: 100%;

			.spec-fix-body {
				flex: 0 0 300px;

				@media (max-width: 768px) {
					display: none;
				}

				.spec-fix-row {
					height: 60px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #9d9d9d;

					.product-specs-comparison-spec-name {
						color: #666;
						font-size: 18px;
						font-weight: 500;
						line-height: 1.2;
					}
				}
			}

			.product-specs-comparison-content-swiper {
				flex: 1;
				overflow: hidden;
				position: relative;

				.swiper-slide {
					width: 300px;

					@media (max-width: 768px) {
						width: 50%;
					}

					&.swiper-slide-active {
						.product-specs-comparison-content-column {
							.product-specs-comparison-product-row {
								.product-specs-comparison-product-name {
									opacity: 1;
								}
							}
						}
					}
				}

				.product-specs-comparison-content-column {
					.product-specs-comparison-product-row {
						height: 60px;
						display: flex;
						flex-direction: column;
						justify-content: center;
                        align-items: center;
						border-bottom: 1px solid #9d9d9d;
						box-sizing: border-box;

						@media (max-width: 768px) {
							height: auto;
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							gap: 16px;
							padding: 16px 8px;
						}

						.product-specs-comparison-product-name {
							display: none;

							@media (max-width: 768px) {
								display: block;
								opacity: 0;
								font-size: 14px;
								font-weight: 600;
								line-height: 1.2;
								color: #4B4B4B;
								width: 200%;
							}
						}

						.product-specs-comparison-cell {
							font-size: 16px;
							font-weight: 400;
							line-height: 1.4;
							color: #1a1a1a;
							display: flex;
							justify-content: center;
							align-items: center;
							word-break: break-word;
							padding: 0 4px;
							text-align: center;

							@media (max-width: 768px) {
								font-size: 14px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
}