/** Shopify CDN: Minification failed

Line 657:5 "pasding" is not a known CSS property
Line 684:1 Expected "}" to go with "{"

**/
:root {
	--primary: #59DDF7;
}

.product-configurator {

	.intro {

		text-align: center;
		padding: 70px 0;

		.title {
			margin:0;
		}

		.ov {
			max-width: 600px;
			margin: 16px auto 0;
		}

	}

	.step {

		border-top: 1px solid rgba(255,255,255,.2);
		padding: 40px 0;

		.step-title {

			text-transform: uppercase;
			font-size: 18px;
			font-family: var(--heading-font-family);
			letter-spacing: 2px;
			margin: 0 0 20px 0;

			span {
				&.step-index {
					opacity: .4;
				}
				&.skip-link {
					display: flex;
					opacity: .4;
					align-items: center;
					font-size: 16px;
					cursor: pointer;
					svg {
						width: 14px;
						height: unset;
					}
				}
			}

		}

		.filter-list {

			display: flex;
			gap: 8px;
			margin: 30px 0;

			.filter-item {
				border: 1px solid #fff;
				padding: 8px 20px;
				font-size: 12px;
				text-transform: uppercase;
				font-family: var(--heading-font-family);
				letter-spacing: 1px;
				border-radius: 2px;
				opacity: .3;
				cursor: pointer;
				transition: .3s all;
				&.active,
				&:hover {
					opacity: 1;
				}
			}

		}

		.step-blocks {

			display: flex;
			flex-wrap: wrap;
			margin: 0 -10px;

			&.initialised {

				.block {
					opacity: .2;
					&:hover {
						opacity: 1;
					}
				}

			}

			.block {

				width: 25%;
				padding:0 10px 20px 10px;
				cursor: pointer;
				transition: .3s all;
				position: relative;

				&::after {

					content:'';
					position: absolute;
					top: 10px;
					right: 20px;
					width: 30px;
					height: 30px;
					background: url('icon-checked-black.svg') no-repeat center center / 20px var(--primary);
					border: 1px solid #000;
					opacity: 0;
					transition: .3s all;

				}

				.img-container {

					width: 100%;
					border: 2px solid transparent;
					transition: .3s all;

					img {
						aspect-ratio: 1/1;
						width: 100%;
						display: block;
						object-fit: cover;
					}

				}

				span {
					text-align: center;
					display: block;
					width: 100%;
					margin: 10px 0 0 0;
					text-transform: uppercase;
					font-size: 12px;
					letter-spacing: 2px;
					font-family: var(--heading-font-family);
					transition: .3s all;
				}

				&:hover {
					.img-container {
						border-color: var(--primary);
					}
					span {
						color: var(--primary);
					}
				}

				&.selected {
					opacity: 1;
					&::after {
						opacity: 1;
					}
					.img-container {
						border-color: var(--primary);
					}
					span {
						color: var(--primary);
					}
				}

			}

			&.step-product-grid {

				.block {

					.card-config-product {

						.media-container {

							width: 100%;
							transition: .3s all;
							position: relative;
							background: var(--primary);
							transition: .3s all;

							.variant-swatches {

								position: absolute;
								z-index: 3;
								bottom: 10px;
								right: 10px;
								display: flex;
								gap: 4px;
								transition: .3s all;

								.swatch {

									width:15px;
									height: 15px;

								}

							}

							img {
								aspect-ratio: 1/1.3;
								width: 100%;
								display: block;
								object-fit: cover;
								transition: .3s opacity;
								&.hover-img {
									position: absolute;
									top:0;
									left: 0;
									width: 100%;
									height: 100%;
									opacity: 0;
								}
							}

							.button-container {
								background: var(--primary);
								color: #000;
								text-transform: uppercase;
								font-size: 12px;
								letter-spacing: 2px;
								font-family: var(--heading-font-family);
								transition: .3s all;
								padding: 8px 20px;
								position: absolute;
								z-index: 2;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								border-radius: 2px;
								opacity: 0;
								white-space: nowrap;
								transition: .3s opacity;
							}

							&:hover {
								.variant-swatches {
									opacity: 0;
								}
								img {
									opacity: .8;
								}
								.button-container {
									opacity: 1;
								}
							}

							&.enable_hover_img {
								&:hover {
									img {
										opacity: 0;
										&.hover-img {
											opacity: .8;
										}
									}
								}
							}

						}

						.p-flex {

							display: flex;
							justify-content: space-between;

							span {
								text-align: unset;
								width: unset;
								&.price {
									opacity: .5;
								}
							}

						}

					}

					&.selected {

						opacity: 1;

						.card-config-product {
							.media-container {
								border: 2px solid transparent;
							}
							.p-flex {
								color: var(--primary);
							}
						}

					}

				}

			}

		}

		&.step-two {

			.step-blocks {

				display: none;

				&.visible {
					display: flex;
				}

			}

		}

		&.step-three {

			.container {

				position: relative;

				.discount-message {
					position: absolute;
					top:0;
					right:0;
					font-size: 12px;
					background: var(--primary);
					color: #000;
					line-height: 1;
					padding: 8px 20px;
					border-radius: 2px;
					max-width: 320px;
					font-family: var(--heading-font-family);
					letter-spacing: 1px;
					text-transform: uppercase;
				}

				.pacth-grid {

					.block {

						width: 20%;

						.card-config-patch {

							.media-container {

								width: 100%;

								img {
									aspect-ratio: 1/1;
									display: block;
									object-fit: contain;
								}

							}

							.p-flex {

								text-align: center;

								.custom-checkbox {

									width: 22px;
									height: 22px;
									border: 1px solid #fff;
									opacity: .3;
									margin: 0 auto;
									position: relative;
									transition: .2s all;

									&::after {
										content:'';
										position: absolute;
										top: 50%;
										left: 50%;
										width: 12px;
										height: 12px;
										transform: translate(-50%, -50%);
										transition: .2s all;
									}

								}

								.price {

									display: flex;
									justify-content: center;

									span {
										width: unset;
									}

									.discounted-price {
										color: var(--primary);
										margin-left: 10px;
									}

								}

							}

							&.selected {

								.p-flex {
									.custom-checkbox {
										border-color: var(--primary);
										opacity: 1;
										&::after {
											background: var(--primary);
										}
									}
									span {
										color: var(--primary);
									}
								}

							}

						}

						&.filtered {
							display: none;
						}

					}

					&.discounted {

						.block {
							.price {
								span:not(.discounted-price){
									color: #fff;
									text-decoration:line-through;
									opacity: .5;
								}
							}
						}

					}

				}

			}

		}

	}

	#summary {

		width: 100%;
		padding: 40px 0;

		.section-title {
			text-transform: uppercase;
			font-size: 18px;
			font-family: var(--heading-font-family);
			letter-spacing: 2px;
			margin: 0 0 40px 0;
			text-align: center;
		}

		.product-summary {

			position: relative;

			&::after {
				content:'';
				position: absolute;
				top: 100%;
				left: 50%;
				width: 1px;
				height: 44px;
				background: rgba(255,255,255,.2);
			}

		}

		.product-summary,
		.patch-summary {

			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin: 0 0 44px 0;

			.product-summary--card {

				border: 1px solid rgba(255,255,255,.2);
				padding: 16px;
				display: flex;
				align-items: center;
				width: 300px;
				min-width: 300px;
				gap: 20px;
				transition: .3s all;

				&:hover {
					border-color: #fff;
				}

				.img {

					width: 90px;
					min-width: 90px;

				}

				.product-summary--meta {
					* {
						font-size: 12px;
						text-transform: uppercase;
						font-family: var(--heading-font-family);
						letter-spacing: 2px;
					}
					.price {
						opacity: .5;
					}
				}

			}

		}

		.patch-summary {
			gap: 10px;
		}

		.summary-content {

			text-align: center;

			p {

				margin: 0 0 7px 0;
				color: #fff;

				&:not(.summary-content--shipping) {
					font-family: var(--heading-font-family);
					letter-spacing: 2px;
					text-transform: uppercase;
					font-size: 18px;
				}

				&.summary-content--shipping {
					margin: 22px 0 0 0;
					opacity: .6;
				}

				span {
					font-weight: 600;
				}

			}

			.button {

				margin-top: 20px;
				background: transparent;
				border-radius: 0;
				border: 1px solid #fff;
				text-transform: uppercase;
				color: #fff;
				transition: .3s all;

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

			}

		}

	}

}

.config-visible {
	display: none;
}

.rc-read-more {
	margin-top: 20px;
	a {
		text-transform: uppercase;
		text-decoration: underline;
		font-family: var(--heading-font-family);
		letter-spacing: 2px;
	}
}

#product-modal {

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
	display: none;

	.modal-inner {

		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 120px);
		max-width: var(--container-lg-max-width);
		height: auto;
		background: #0A0A0A;
		border: 1px solid #fff;
		max-height: 100vh;
		overflow: auto;

		.close-icon {
			position: absolute;
			top: -1px;
			right: -1px;
			width: 40px;
			height: 40px;
			border: 1px solid #fff;
			background: url('icon-close.svg') no-repeat center center / 15px;
			cursor: pointer;
		}

		.pdp-render {
			width: 100%;

			.config-hidden {
				display: none !important;
			}

			.config-visible {
				display: block;
			}

			.product-gallery {
				gap: 30px;
				align-items: normal;
			}

			.config-product-proceed {

				.btn-flex {

					pasding: 40px 0 30px 0;

				}

				.rc-read-more {

					a {

						display: flex;
						align-items: center;
						gap: 6px;
						opacity: .5;
						font-size: 12px;

						svg {
							width: 14px;
							height: unset;
						}

					}

			}

		}

	}

}