.main-product {

	.main-product--flex {

		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 30px 0 60px 0;

		@media screen and (max-width: 990px) {
			flex-wrap: wrap;
			padding-top: 0;
		}

		.main-product--media {

			width: 50%;
			display: flex;
			justify-content: space-between;

			@media screen and (max-width: 990px) {
				width: 100%;
			}

			.product--media {

				width: calc(100% - 123px);

				@media screen and (max-width: 990px) {
					width: calc(100% + 10rem);
					margin: 0 -5rem;
					@media screen and (max-width: 768px) {
						width: calc(100% + 3rem);
						margin: 0 -1.5rem;
					}
				}

				.carousel--item {

					@media screen and (max-width: 990px) {
						width: 600px;
						margin: 0 10px;
						@media screen and (max-width: 768px) {
							width: 280px;
							margin: 0 5px;
						}
					}

					img {
						width: 100%;
						height: unset;
						display: block;
					}

				}

			}

			.product--thumbnails {

				width: 113px;
				order: -1;

				@media screen and (max-width: 990px) {
					display: none;
				}

				.carousel--item {

					width: 100%;
					aspect-ratio: 1/1;
					margin: 0 0 10px 0;
					opacity: .5;
					cursor: pointer;
					transition: .3s all;

					&.active {
						opacity: 1;
					}

					img {

						width: 100%;
						height: 100%;
						object-fit: cover;
						display: block;

					}

				}

			}



		}

		.main-product--meta {

			width: 50%;
			padding: 16px 60px;
			color: #000;

			@media screen and (max-width: 990px) {
				width: 100%;
				padding: 16px 0;
			}

			.product-title {

				text-transform: uppercase;
				margin: 0 0 4px 0;
				font-size: 36px;
				color: #000;
				letter-spacing: 1px;

				@media screen and (max-width: 768px) {
					font-size: 24px;
				}

			}

			.product-subtitle {

				margin: 0 0 30px 0;
				font-family: var(--ffcaveat);
				font-size: 24px;
				letter-spacing: 0;
				color: #000;
				font-weight: 400;

				@media screen and (max-width: 768px) {
					font-size: 18px;
				}

			}

			.jdgm-widget  {

				margin: 0 0 16px 0;

				* {
					font-size: 15px;
				}

				.jdgm-prev-badge__text {
					font-size: 12px;
					margin-left: 10px;
				}

			}

			.pricing-status {

				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 0 16px 0;

				.pricing {

					display: flex;
					align-items: flex-end;
					gap: 6px;
					line-height: 1;

					.price {
						font-size: 22px;
						color: var(--blue);
						font-weight: 500;
					}

					.cap {
						font-size: 12px;
						color: #000;
						opacity: .5;
						font-weight: 400;
						text-decoration: line-through;
						margin-bottom: 3px;
					}

				}

				.product-status {

					font-size: 10px;
					line-height: 1;
					text-transform: uppercase;
					letter-spacing: 2px;
					display: flex;
					gap: 8px;
					align-items: center;
					color: var(--green);
					background: var(--green-bg);
					padding: 10px;
					border-radius: 4px;

					.marker {
						display: block;
						width: 10px;
						height: 10px;
						background: var(--green);
						border-radius: 50%;
					}

					&.unavailable {
						background: var(--orange-bg);
						color: var(--orange);
						.marker {
							background: var(--orange);
						}
					}

				}

			}

			.block-desc {

				p, li {
					font-size: 14px;
				}

			}

			.block-usps {

				display: flex;
				flex-wrap: wrap;
				gap: 6px;
				margin: 20px 0 0 0;

				.usp {

					font-size: 11px;
					text-transform: uppercase;
					padding: 3px 10px;
					border-radius: 4px;
					background: var(--grey);
					white-space: nowrap;
					font-weight: 500;

					&.green {
						color: var(--green);
						background: var(--green-bg);
					}

				}

			}

			#product-select {
				display: none;
			}

			.block-controls {

				display: flex;
				justify-content: space-between;
				margin-top: 44px;

				.qty-selection {

					width: 120px;
					border: 1px solid #000;
					border-radius: 4px;
					height: 50px;
					display: flex;
					cursor: pointer;

					span {
						width: 40px;
						height: 48px;
						background: transparent;
						display: block;
						position: relative;

						&::before,
						&::after {
							content:'';
							position: absolute;
							top: 50%;
							left: 50%;
							width: 10px;
							height: 2px;
							background: #000;
							transform: translate(-50%, -50%);
						}
						&[data-qty-minus]{
							&::after {
								display: none;
							}
						}
						&[data-qty-plus]{
							&::after {
								transform: translate(-50%, -50%) rotate(90deg);
							}
						}
					}

					input {
						-moz-appearance:textfield;
						padding: 0;
						font-size: 16px;
						border: none;
						line-height: 48px;
						width: 40px;
						background: transparent;
						text-align: center;
						border-left: 1px solid #000;
						border-right: 1px solid #000;
						font-weight: 500;

						&::-webkit-outer-spin-button,
						&::-webkit-inner-spin-button {
						    -webkit-appearance: none;
						    margin: 0;
						}
					}


				}

				.btn {
					width: calc(100% - 130px);
					background: var(--blue);
					border-radius: 4px;
					font-size: 14px;
					text-transform: uppercase;
					padding: 0;
					height: 50px;
					line-height: 50px;
					color: #fff;
					border: none;
					font-family: var(--ffjost);
					letter-spacing: 2px;
					cursor: pointer;
					transition: .3s all;
					&:hover {
						background: #000;
					}
					&.disabled {
						opacity: .2;
						pointer-events: none;
					}
				}

			}

			.block-callout {

				background: var(--orange);
				color: #fff;
				text-align: center;
				padding: 3px 10px;
				font-size: 12px;
				margin: 12px 0 0 0;
				border-radius: 2px;

			}

			.delivery-note {

				background: var(--grey);
				padding: 15px 20px;
				border-radius: 4px;
				color: var(--orange);
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 12px 0 40px;

				@media screen and (max-width: 768px) {
					justify-content: center;
					flex-wrap: wrap;
					flex-direction: column;
				}

				.date {
					font-size: 12px;
					text-transform: uppercase;
					letter-spacing: 1px;
				}

				.countdown-container {
					display: flex;
					font-size: 12px;
					gap: 3px;
					.countdown {
						display: flex;
						gap: 3px;
					}
				}

			}

			.faq-group {

				border-bottom: 1px solid rgba(0,0,0,0.2);

				.faq--question {

					padding:12px 0;
					text-transform: uppercase;
					font-size: 12px;
					letter-spacing: 1px;
					cursor: pointer;
					display: flex;
					justify-content: space-between;
					align-items: center;

				}

				.faq--answer {
					display: none;
					p, li {
						font-size: 14px;
					}
				}

				&.expanded {

					.faq--question {
						svg {
							transform: rotate(180deg);
						}
					}

					.faq--answer {
						display: block;
					}

				}

			}

		}

	}

	.informational-image-container {

		width: 100%;
		text-align: center;
		margin: 0 0 90px 0;

		.product--title {

			text-transform: uppercase;
			margin: 0 0 16px 0;
			font-size: 40px;
			color: #000;
			letter-spacing: 1px;

			@media screen and (max-width: 768px) {
				font-size: 26px;
			}

		}

		.product-subtitle {

			margin: 0 0 10px 0;
			font-family: var(--ffcaveat);
			font-size: 28px;
			letter-spacing: 0;
			color: #000;
			font-weight: 400;

			@media screen and (max-width: 768px) {
				font-size: 22px;
			}

		}		

		.informational-image {

			width: 100%;

			img {
				width: 100%;
				max-width: 1180px;
				margin: 0 auto;
				display: block;
				height: unset;
			}

			&.has_m {

				.m-image {
					display: none;
				}

				@media screen and (max-width: 768px) {

					.dt-image {
						display: none;
					}

					.m-image {
						display: block;
					}

				}

			}

		}

	}

}