/* STRAP WATCH CONFIGURATOR (Mario's canonical name) — Strap-PDPs, scopes the <watch-strap-configurator-v2> custom element.
   Legacy filename: section-watch-configurator-v2.css. Sister: section-watch-configurator.css (Watch-PDPs). */
watch-strap-configurator-v2 {
	display: block;
	padding: 60px 0;
	margin: 0 auto;
	overflow: hidden;
	background-color: #efefef;

	> h2 {
		text-align: center;
		margin: 0 0 24px;
		font-family: "Nordbold", sans-serif;
		font-size: clamp(20px, 3vw, 32px);
		font-weight: 400;
		letter-spacing: 0.5px;
	}

	.watch-styles-tabs {
		display: flex;
		justify-content: center;
		gap: 1rem;
		flex-wrap: wrap;

		&[hidden] {
			display: none;
		}
	}

	.watch-faces-tabs {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-bottom: 0rem;
		flex-wrap: wrap;

		&[hidden] {
			display: none;
		}
	}

	.watch-style-tab,
	.watch-face-tab {
		padding: 0.75rem 1.5rem;
		border: 0px solid #e5e5e5;
		border-radius: 0px;
		font-family: "Nordbold";
		cursor: pointer;
		color: #666;
		background-color: transparent;
		transition: all 0.3s ease;

		&.watch-face-tab {
			font-size: 25px;
		}

		&.active {
			background-color: transparent;
			color: #000;
			border-color: #000;
		}

		&:focus-visible {
			outline: 2px solid #000;
			outline-offset: 3px;
		}
	}

	.watch-display {
		position: relative;
		width: 100%;
		margin: 40px auto 0;

		.swiper {
			position: relative;
			opacity: 0;
			overflow: visible;

			@media (min-width: 769px) {
				width: 90%;
			}

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

			&.swiper-initialized {
				opacity: 1;
			}

			&:before,
			&:after {
				content: "";
				display: block;
				background-color: #efefef;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				z-index: 2;
			}

			&:before {
				right: 100%;
			}

			&:after {
				left: 100%;
			}

			.swiper-slide {
				position: relative;
				padding: 20px 10px;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				border: 1px solid transparent;
				cursor: pointer;

				&.swiper-slide-active {
					cursor: default;

					.strap-slide {
						transform: scale(1.05);
						z-index: 5;
						transition: transform 0.3s ease;
					}
				}

				&.is-sold-out {
					.strap-layer img {
						filter: grayscale(0.4) opacity(0.65);
					}
				}

				.strap-sold-out-badge {
					position: absolute;
					top: 12px;
					right: 12px;
					z-index: 10;
					padding: 4px 10px;
					font-family: "Nordbold", sans-serif;
					font-size: 10px;
					letter-spacing: 0.5px;
					text-transform: uppercase;
					color: #fff;
					background: rgba(0, 0, 0, 0.7);
					border-radius: 2px;
					pointer-events: none;
				}

				.swiper-slide-inner {
					position: relative;
					width: 100%;
					aspect-ratio: 224 / 319;

					.strap-layer {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						padding: 0px 15px;
						box-sizing: border-box;

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

						@media (max-width: 768px) {
							padding: 0px 10px;
						}
					}

					.watch-face {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						transition: opacity 0.3s ease;
						z-index: 2;
						visibility: hidden;
						box-sizing: border-box;

						&.active {
							opacity: 1;
							visibility: visible;
						}

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

						@media (max-width: 768px) {
							padding: 0px 10px;
						}
					}
				}
			}

			.swiper-button-prev,
			.swiper-button-next {
				display: flex;
				align-items: center;
				justify-content: center;
				color: black;
				width: 15px;
				height: 29px;
				z-index: 10;
				top: 50%;
				transform: translateY(-50%);

				&::after {
					font-size: 20px;
					font-weight: bold;
				}

				&.swiper-button-disabled {
					opacity: 0.5;
				}

				&:focus-visible {
					outline: 2px solid #000;
					outline-offset: 4px;
				}

				@media (max-width: 768px) {
					width: 40px;
					height: 40px;

					&::after {
						font-size: 16px;
					}
				}
			}

			.swiper-button-prev {
				content: url("data:image/svg+xml,%3Csvg width='17' height='31' viewBox='0 0 17 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 0.747559L0.833334 15.4142L15.5 30.0809' stroke='%23111111' stroke-linecap='square'/%3E%3C/svg%3E");
				left: -40px;
			}

			.swiper-button-next {
				content: url("data:image/svg+xml,%3Csvg width='17' height='31' viewBox='0 0 17 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 0.747559L16.1667 15.4142L1.5 30.0809' stroke='%23111111' stroke-linecap='square'/%3E%3C/svg%3E");
				right: -40px;
			}

		}

		.strap-pagination {
			position: relative;
			display: none;
			justify-content: center;
			gap: 15px;
			margin-top: 40px;
			text-align: center;

			&.is-active {
				display: flex;
			}

			.strap-pagination__bullet {
				width: 6px;
				height: 6px;
				padding: 0;
				border: 0;
				border-radius: 50%;
				background: #000;
				opacity: 1;
				cursor: pointer;
				transition: background 0.3s ease;

				&.is-active {
					background: #8F8F8F;
				}

				&:focus-visible {
					outline: 2px solid #000;
					outline-offset: 3px;
				}
			}

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

	.strap-info {
		text-align: center;
		margin-top: 40px;

		.strap-name {
			font-size: 14px;

			a {
				color: inherit;
				text-decoration: underline;
				text-underline-offset: 4px;
				text-decoration-thickness: 1px;
				transition: text-decoration-thickness 0.2s ease;
			}

			a:hover {
				text-decoration-thickness: 2px;
			}
		}

		.strap-price {
			font-size: 18px;
			font-weight: 600;
		}

		&.is-sold-out .strap-price {
			text-decoration: line-through;
			color: #888;
		}

		.strap-notify-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: transparent;
			color: #000;
			border: 1px solid #000;
			text-decoration: none;
			cursor: pointer;
			order: 99;
			transition: background 0.2s ease, color 0.2s ease;

			&:hover {
				background: #000;
				color: #fff;
			}

			&:focus-visible {
				outline: 2px solid #000;
				outline-offset: 3px;
			}

			&[hidden] {
				display: none;
			}
		}

		.purchase-options {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1rem;
			flex-wrap: wrap;
			margin-top: 40px;

			.add-to-cart:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}

		}
	}
}