.template--product {
	.section {
		&.main-product--container {
			padding: 0;
			background: transparent;
			.page-width {
				padding: 0 !important;
			}
			.product {
				.product__info-wrapper {
					display: flex;
					align-items: flex-start;
					margin-bottom: 50px;
					padding: 0 20px;
					@media screen and (max-width: 989px) {
						flex-direction: column;
						margin-bottom: 0;
						padding: 0;
					}
					.product__media {
						display: block;
						grid-area: image-gallery;
						width: 60%;
						max-width: calc(100% - 500px);
						@media screen and (max-width: 989px) {
							width: 100%;
							max-width: initial;
							background: transparent;
						}
						.card__badge {
							position: absolute;
							left: 160px;
							top: 20px;
							@media screen and (max-width: 989px) {
								left: 10px;
								top: 10px;
							}
						}
						product-gallery-component {
							display: flex;
							position: relative;
							align-items: flex-start;
							@media screen and (max-width: 989px) {
								flex-direction: column-reverse;
								margin-top: 0;
							}
							.main-gallery {
								width: calc(100% - 160px);
								margin-left: auto;
								order: 1;
								-webkit-touch-callout: none;
								-webkit-user-select: none;
								-khtml-user-select: none;
								-moz-user-select: none;
								-ms-user-select: none;
								user-select: none;
								-ms-touch-action: auto;
								touch-action: auto;
								-webkit-tap-highlight-color: transparent;
								@media screen and (max-width: 989px) {
									width: 100%;
									margin: 0;
									margin-bottom: 5px;
								}
								.slick-list {
									@media screen and (max-width: 989px) {
										.slick-active {
											[data-section-type="full-video"] {
												&::before {
													content: none;
												}
											}
										}
									}
								}

								.gallery-cell {
									position: relative;
									display: flex;
									&:not(.active) {
										display: none;
									}
									&.video {
										position: relative;
									}
									.media-box {
										position: relative;
										display: block;
										width: 100%;
										margin: auto;
										&::before {
											content: "";
											display: block;
											width: 100%;
											padding-bottom: 80%;
											@media screen and (max-width: 1300px) {
												padding-bottom: 100%;
											}
											@media screen and (max-width: 989px) {
												padding-bottom: 100%;
												min-height: initial;
												pointer-events: none;
											}
										}

										img {
											transition: opacity 0.5s;
											display: block;
											width: 101%;
											height: 100%;
											object-fit: contain;
											position: absolute;
											left: 50%;
											top: 0;
											background: #fff;
											transform: translateX(-50%);
											padding: 50px;
											@media screen and (max-width: 989px) {
												background: white;
												padding: 40px;
											}
										}
										svg {
											position: absolute;
											right: 20px;
											bottom: 20px;
											@media screen and (max-width: 989px) {
												width: 24px;
												height: 24px;
											}
										}
									}
									[data-section-type="full-video"] {
										padding-top: 80% !important;
										min-height: 630px;
										@media screen and (max-width: 1300px) {
											padding-top: 100% !important;
										}
										@media screen and (max-width: 989px) {
											padding-top: 100% !important;
											min-height: initial;
											background-size: cover;
											&::before {
												content: " ";
												background-image: url(./play.svg);
												position: absolute;
												width: 30px;
												height: 30px;
												top: 50%;
												left: 50%;
												transform: translate(-50%, -50%);
												display: block;
												z-index: 1;
											}
										}
										&.mobile-view--true {
											video {
												object-fit: cover;
											}
										}
										video {
											object-fit: cover;
											width: 100%;
											height: 100% !important;
										}
										.video-inline {
											position: absolute;
											top: 0px;
											width: 100%;
											height: 100%;
											padding: 50px;
											background: #fff;
											box-sizing: border-box;
											@media screen and (max-width: 989px) {
												padding: 30px;
											}
											.wrapper {
												height: 100%;
												.jwplayer {
													height: 100% !important;
													.jw-wrapper {
														background-color: white;
													}
													.jw-aspect {
														height: 100%;
													}
												}
											}
										}

										@media (max-width: 500px) {
											.video-inline {
												top: 14px;
											}
										}
									}
									svg {
										position: absolute;
										bottom: 0;
										right: 0;
										z-index: 1;
										display: block;
										@media screen and (max-width: 989px) {
											display: none;
										}
									}
									.deferred-media {
										width: 100%;
										padding-top: 80% !important;
									}
								}
							}
							.slider-buttons {
								margin: auto;
								@media screen and (min-width: 990px) {
									display: none;
								}
								.slider-button {
									&.slider-button--next {
										@media screen and (max-width: 989px) {
											order: 2;
										}
									}
								}
								.slick-dots {
									position: initial;
									margin-top: -11px;
									width: fit-content;
								}
							}
							.thumbnail-gallery {
								width: 100px;
								height: 500px;
								padding: 50px 0;
								@media screen and (max-width: 989px) {
									display: none;
								}
								.slick-prev {
									display: none !important;
								}
								.slick-list {
									@media screen and (max-width: 989px) {
										padding-right: 50px !important;
										.slick-slide {
											margin-left: 5px;
											background: #f5f5f5;
										}
									}
								}
								.gallery-cell {
									margin-bottom: 10px;
									&:not(.active) {
										display: none;
									}
									&.video {
										position: relative;
										.image-content__image-container {
											opacity: 0.5;
										}
										&::before {
											content: " ";
											background-image: url(./play.svg);
											position: absolute;
											width: 30px;
											height: 30px;
											top: 50%;
											left: 50%;
											transform: translate(-50%, -50%);
											display: block;
											z-index: 1;
										}
									}
								}
								.image-content__image-wrapper {
									padding-top: 100% !important;
									img {
										width: 100%;
										height: 100%;
										object-fit: contain;
										background: transparent;
									}
								}

								.slick-arrow {
									background: transparent;
									width: 95%;
									left: 0;
									@media screen and (max-width: 989px) {
										display: none !important ;
									}
									&::before {
										mask: url("/cdn/shop/t/216/assets/chevron.svg?v=54688505202618116251684310471") !important;
										-webkit-mask: url("/cdn/shop/t/216/assets/chevron.svg?v=54688505202618116251684310471") !important;
										width: 16px;
										height: 11px;
									}
									&.slick-next {
										bottom: -20px;
										top: auto;
									}
									&.slick-prev {
										top: 0;
										bottom: auto;
										transform: rotateX(180deg);
									}
								}
							}
							img {
								border: none;
								background: transparent;
							}
						}
					}
					.product__info-container {
						display: block;
						max-height: initial;
						overflow: initial;
						margin-top: 0;
						width: 40%;
						max-width: 520px;
						padding: 20px;
						padding-left: 50px;
						min-width: 500px;
						@media screen and (max-width: 989px) {
							width: 100%;
							min-width: initial;
							margin: 0;
							padding: 25px 20px;
							max-width: initial;
						}
						.info {
							position: relative;
							.product__title {
								@media screen and (max-width: 989px) {
									width: 100%;
									padding-right: 60px;
								}
								h1 {
									@media screen and (min-width: 990px) {
										font-size: 22px;
									}
								}
							}
							.price-block {
								margin-top: 15px;

								.price-container {
									margin-top: 10px;
									flex-direction: column;
									* {
										align-self: auto;
									}
									.price {
										@media screen and (max-width: 989px) {
											font-size: 16px;
										}
									}
									.product__installment {
										font-size: 12px;
										@media screen and (max-width: 989px) {
											/* display: none; */
											padding-bottom: 6px;
										}
										@media screen and (max-width: 550px) {
											max-width: 235px;
										}
									}
								}
							}
							variant-radios {
								display: block;
								margin-top: 35px;
								.product-form__input {
									.form__label-container {
										.form__label {
											text-transform: uppercase;
											font-weight: 500;
											font-family: "Graphik Wide Web";
											font-size: 10px;
										}
									}
									.form__variants {
										display: flex;
										flex-wrap: wrap;
										input {
											width: 0;
											height: 0;
											&[type="radio"]:checked + label {
												border-color: black;
												color: black;
											}
										}
										label {
											border-color: #e7e7e7;
											margin: 0 8px 8px 0;
											padding: 10px;
											min-width: 35px;
											height: 35px;
											display: flex;
											align-items: center;
											justify-content: center;
											&:hover {
												color: black;
												border-color: black;
											}
										}
									}
								}
							}
							.product__buttons {
								margin-top: 50px;
								margin-bottom: 30px;
								@media screen and (max-width: 989px) {
									margin-top: 0;
								}
								.product-form__buttons {
									@media screen and (max-width: 989px) {
										flex-wrap: wrap;
									}
								}
								.product-form__submit {
									max-width: 300px;
								}
								a.product-form__submit {
									display: none !important;
								}
							}
							.description {
								padding-left: 30px;
								@media screen and (max-width: 989px) {
									padding-left: 0;
									padding-right: 30px;
									padding-bottom: 10px;
									border-bottom: 1px solid #d3d3d3;
								}
								p {
									@media screen and (max-width: 989px) {
										font-size: 14px;
									}
								}
								p,
								h4 {
									&.active {
										strong {
											&::after {
												content: "";
												position: absolute;
												width: 2px;
												height: 15px;
												display: block;
												position: absolute;
												left: 6px;
												top: 50%;
												transform: translateY(-50%);
												background: black;
												@media screen and (max-width: 989px) {
													left: auto;
													right: 6px;
												}
											}
										}
									}

									strong {
										cursor: pointer;
										display: block;
										position: relative;
										padding-left: 30px;
										margin-left: -30px;
										text-transform: uppercase;
										font-family: var(--font--graphik-wide);
										letter-spacing: 0.5px;
										font-size: 12px;
										@media screen and (max-width: 989px) {
											font-size: 11px;
											margin-top: 20px;
											margin-left: 0;
											margin-right: -30px;
											padding-left: 0;
											padding-right: 30px;
											padding-top: 10px;
											padding-bottom: 10px;
											border-top: 1px solid #d3d3d3;
										}
										&::before {
											content: " ";
											width: 15px;
											height: 2px;
											display: block;
											position: absolute;
											left: 0;
											top: 50%;
											transform: translateY(-50%);
											background: black;
											@media screen and (max-width: 989px) {
												left: auto;
												right: 0;
											}
										}
									}
									font-size: 14px;
									line-height: 24px;
								}
								ul {
									padding-left: 20px;
									li {
										font-size: 14px;
										line-height: 24px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.product-media-modal {
	overflow: auto;
	.product-media-modal__content {
		overflow: initial;
		// max-height: initial;
		height: auto;
		modal-opener {
			display: flex !important;
			img {
				max-width: 70%;
				width: 100%;
				height: auto;
				margin: auto;
				border: none;
			}
			svg {
				display: none;
			}
		}
	}
}

#stamped-main-widget {
	margin: 1rem auto !important;
}

.fancybox__container {
	z-index: 999999 !important;
}