.main-product {

	.main-product--header {

		padding: 30px 0 40px;

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

		.breadcrumbs {
			margin: 0 0 30px 0;
			@media screen and (max-width: 768px) {
				margin-bottom: 10px;
			}
			li {
				&:nth-last-child(2)::after {
					@media screen and (max-width: 768px) {
						display: none;
					}
				}
			}
			.bc-product-title {

				@media screen and (max-width: 768px) {
					visibility: hidden;
					opacity: 0;
					pointer-events: none;
					height: 0;
				}

			}
		}

		.product-title {
			margin: 0 0 16px 0;
			@media screen and (max-width: 768px) {
				margin-bottom: 10px;
			}
		}

		.main-product--header-flex {

			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 10px;

			.meta-data {

				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 5px;

				span {
					background: var(--grey);
					font-size: 12px;
					padding: 5px;
					border-radius: 5px;
					line-height: 1;
					font-weight: 600;
				}

			}

			.product-status {
				span {
					font-size: 12px;
					color: var(--green);
					font-weight: 600;
					&[data-availability="out"]{
						color: var(--sale);
					}
				}
			}

			.jdgm-widget {
				.jdgm-prev-badge__text {
					@media screen and (max-width: 768px) {
						font-size: 12px;
					}
				}
			}

		}

	} /* .main-product--header */

	.main-product--main {

		display: flex;
		margin-bottom: 60px;

		@media screen and (max-width: 1100px) {
			flex-wrap: wrap;
		}

		.main-product--meta {

			width: 25%;

			@media screen and (max-width: 1100px) {
				width: 100%;
				padding-bottom: 30px;
			}

			.key-info {

				padding-bottom: 15px;
				margin-bottom: 15px;
				border-bottom: 1px solid var(--grey);

				.block-title {
					margin: 0 0 15px 0;
				}

				.bullets {

					display: flex;
					flex-direction: column;
					gap: 10px;

					.bullet {
						display: flex;
						align-items: flex-start;
						gap: 6px;

						svg {
							min-width: 6px;
							height: unset;
							margin-top: 4px;
						}
					}

				}

			}

			.product--quicklinks {

				.block-title {
					margin: 0 0 15px 0;
				}

				.product--quicklinks--ul {

					display: flex;
					flex-wrap: wrap;
					gap: 10px;

					li {

						min-width: unset;
						padding: 10px;

					}

				}

				.product--quicklinks--collection {
					margin: 15px 0 0 0;
					a {
						text-decoration: underline;
					}
				}

			}

			.product--energy-rating {

				margin: 24px 0 0 0;

				img {
					display: block;
				}

			}

		}

		.main-product--media {

			width: 50%;
			padding: 0 50px;

			@media screen and (max-width: 1100px) {
				width: 100%;
				max-width: 640px;
				padding: 0;
				margin: 0 auto 40px;
				order: -1;
			}

			@media screen and (max-width: 768px) {
				margin-bottom: 16px;
			}

			.product--media {

				width: 100%;
				margin-bottom: 16px;

				.carousel--item {

					img, video, iframe {
						width: 100%;
						display: block;
						border-radius: 10px;
						aspect-ratio: 1/1;
						object-fit: contain;
					}

					video, iframe {
						background: #000;
					}

				}

				.slick-arrow {
					z-index: 2;
					border-radius: 4px;
					width: 40px;
					height: 40px;
					top: auto;
					bottom: 0;
					transform: translate(0,0);
					@media screen and (max-width: 768px) {
						display: none !important;
					}
				}

			}

			.product--thumbnails {

				margin-bottom: 30px;

				.carousel--item {

					width: 80px;
					height: 80px;
					border: 1px solid var(--grey);
					border-radius: 10px;
					overflow: hidden;
					margin: 0 6px;
					transition: .3s all;
					cursor: pointer;

					&.slick-active {
						border-color: var(--primary);
					}

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

					&.is_video {

						position: relative;

						&::after {
							position: absolute;
							z-index: 2;
							content: '';
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background: rgba(0,0,0,0.7);
						}

						svg {
							position: absolute;
							z-index: 3;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 50px;
						}

					}

				}

			}

		}

		.main-product--controls {

			width: 25%;

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

			.tags {

				display: flex;
				flex-wrap: wrap;
				gap: 5px;
				margin: 0 0 16px 0;

				.tag {
					color: var(--white);
					font-size: 12px;
					padding: 5px;
					border-radius: 5px;
					line-height: 1;
				}

			}

			.pricing {

				padding-bottom: 10px;
				margin: 10px 0;
				border-bottom: 1px solid var(--grey);

				@media screen and (max-width: 768px) {
					padding-bottom: 16px;
					margin-bottom: 16px;
				}

				.price {

					margin: 20px 0 0 0;

					span {
						font-size: 50px;
						line-height: 50px;
						color: var(--primary);
						font-weight: 600;
						letter-spacing: 0;
						@media screen and (max-width: 768px) {
							font-size: 40px;
							line-height: 40px;
						}
						small {
							font-size: 14px;
							line-height: 14px;
							color: var(--tertiary);
							font-family: var(--ff-body);
							@media screen and (max-width: 768px) {
								font-size: 12px;
								line-height: 12px;
								margin-left: 3px;
							}
						}
					}

				}

				.cap {
					span {
						color: var(--sale);
						font-size: 12px;
						letter-spacing: 0;
					}
				}

			}

			.delivery-note {

				display: flex;
				align-items: center;
				gap: 12px;
				padding-bottom: 10px;
				margin: 10px 0 20px;
				border-bottom: 1px solid var(--grey);
				font-size: 14px;

				@media screen and (max-width: 768px) {
					padding-bottom: 16px;
					margin-bottom: 16px;
				}

				[data-delivery-count] {
					color: var(--primary);
				}

			}

			#paypal-upstream-messaging-product {
				display: none !important;
			}

			.custom--pp-placement {

				margin: 0 0 16px 0;

			}

			form {

				padding-bottom: 20px;
				margin: 20px 0;
				border-bottom: 1px solid var(--grey);

				@media screen and (max-width: 768px) {
					padding-bottom: 16px;
					margin-bottom: 16px;
				}

				#product-select {
					display: none;
				}

				.qty-selection {

					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 15px;
					padding-bottom: 20px;
					margin-bottom: 20px;
					border-bottom: 1px solid var(--grey);

					@media screen and (max-width: 768px) {
						padding-bottom: 16px;
						margin-bottom: 16px;
					}

					span.label {
						font-size: 20px;
					}

					.controls {

						display: flex;
						align-items: center;
						gap: 3px;

						span {
							width: 30px;
							height: 30px;
							position: relative;
							cursor: pointer;
							&::before,
							&::after {
								content:'';
								position: absolute;
								top: 50%;
								left: 50%;
								width: 10px;
								height: 1px;
								background: var(--primary);
								transform: translate(-50%, -50%);
							}
							&[data-qty-minus]{
								&::after {
									display: none;
								}
							}
							&[data-qty-plus]{
								&::after {
									transform: translate(-50%, -50%) rotate(90deg);
								}
							}
						}

						input {

							width: 36px;
							height: 36px;
							border: 2px solid var(--grey);
							border-radius: 4px;
							text-align: center;
							color: var(--tertiary);
							-moz-appearance:textfield;
							padding: 0;
							font-size: 16px;
							font-weight: 600;

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

						}

					}

				}

				.paired_refurb_model {

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

					a {
						text-decoration: underline;
					}

				}

			}

			.payment-methods-container {

				margin: 0 0 30px 0;

				.payment_icon_title {
					font-weight: 600;
				}

				.payment-methods {
					margin: 0 0 10px 0;
					display: flex;
					flex-wrap: wrap;
					gap: 6px;
				}

				.payment_icon_disclaimer {
					font-size: 12px;
					opacity: .6;
					line-height: 1.4;
				}

			}

			.delivery-options {

				display: flex;
				flex-direction: column;
				gap: 16px;

				@media screen and (max-width: 990px) {
					margin-bottom: 24px;
				}

				.delivery-option,
				.block--item {
					display: flex;
					align-items: center;
					gap: 20px;
					.img-container {
						width: 40px;
						min-width: 40px;
						img {
							width: 100%;
							height: auto;
							display: block;
						}
					}
				}

			}

			.custom-b2b-pricing-block {

				border-bottom: 1px solid var(--grey);
				margin-bottom: 20px;

				.custom-b2b-pricing-title {

					margin: 0 0 14px 0;
					font-weight: 600;

				}

				.custom-b2b-pricing-table {

					margin: 0 0 20px 0;
					width: 100%;

					.custom-b2b-pricing-table--row {

						background: var(--grey);
						border-radius: 12px;
						margin:0 0 10px 0;
						display: none;
						justify-content: space-between;
						padding: 10px 16px;
						font-weight: 600;

						&:nth-child(-n+3) {
							display: flex;
						}

					}

				}

				.custom-b2b-pricing--showmore {

					font-weight: 600;
					text-decoration: underline;
					cursor: pointer;

				}

				&.expanded {

					.custom-b2b-pricing-table .custom-b2b-pricing-table--row {
						display: flex;
					}

					.custom-b2b-pricing--showmore {
						display: none;
					}

				}

			}

		}

	} /* main-product--main */

	.main-product--bundles {

		@media screen and (max-width: 990px) {
			margin-top: 40px;
		}

		.bundle-section--title {

			margin: 0 0 20px 0;
			color: var(--primary);

		}

		.main-product--bundle {

			padding: 20px;
			border: 1px solid var(--grey);
			border-radius: 20px;
			margin: 0 0 20px 0;
			width: 100%;
			display: flex;
			align-items: center;

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

			.main-product--bundle-meta {

				width: 80%;
				padding-right: 20px;

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

				.block-title {
					color: var(--primary);
					margin: 0 0 4px 0;
					font-family: var(--ff-body);
				}

				.main-product--bundle-meta-head-products {

					display: flex;
					gap: 30px;
					margin-top: 20px;

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

						flex-wrap: wrap;

						@media screen and (max-width: 768px) {
							gap: 10px;
						}

					}

					.bundle-component {

						display: flex;
						align-items: center;
						gap: 10px;
						width: 25%;

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

						.bundle-component--image {
							width: 35%;
							min-width: 35%;
							padding-top: 35%;
							border: 1px solid var(--grey);
							border-radius: 13px;
							position: relative;
							transition: .3s all;
							img {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								object-fit: contain;
								padding: 12px;
							}
						}

						.bundle-component--title {
							color: var(--tertiary);
							display: -webkit-box;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
							overflow: hidden;
							transition: .3s all;
							font-weight: 600;
						}

						&:hover {

							.bundle-component--image {
								border-color: var(--primary);
							}

							.bundle-component--title {
								color: var(--primary);
							}

						}

					}

				}

			}

			.main-product--bundle-controls {

				width: 20%;
				min-width: 250px;
				text-align: center;

				@media screen and (max-width: 990px) {
				
					width: 100%;
					min-width: 100%;
					border-top: 1px solid var(--grey);
					padding-top: 20px;
					margin-top: 20px;

				}

				.price {

					display: flex;
					justify-content: center;

					span {
						font-size: 40px;
						line-height: 40px;
						color: var(--primary);
						font-weight: 600;
						letter-spacing: 0;
						@media screen and (max-width: 768px) {
							font-size: 32px;
							line-height: 32px;
						}
						small {
							font-size: 14px;
							line-height: 14px;
							color: var(--tertiary);
							font-family: var(--ff-body);
							@media screen and (max-width: 768px) {
								font-size: 12px;
								line-height: 12px;
								margin-left: 3px;
							}
						}
					}

				}

				.cap {
					span {
						color: var(--sale);
						font-size: 12px;
						letter-spacing: 0;
					}
				}

				.btn {
					margin-top: 10px;
				}

			}



		}

	}

	.product-main--tabbed {

		margin-bottom: 60px;

		.product-main--tabs {

			display: flex;
			width: 100%;
			border: 1px solid var(--grey);
			border-radius: 10px 10px 0 0;
			overflow: hidden;

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

			li {

				flex: 1;
				text-align: center;
				list-style: none;
				font-size: 18px;
				padding: 20px 10px;
				cursor: pointer;
				border-right: 1px solid var(--grey);
				transition: .3s all;
				font-weight: 600;

				&:last-child {
					border: none;
				}

				&.active,
				&:hover {
					background: var(--tertiary);
					color: var(--white);
				}

			}

		}

		.product-main--tab-group {

			display: none;
			border: 1px solid var(--grey);
			border-radius: 0 0 10px 10px;

			@media screen and (max-width: 990px) {
				display: block;
				border-radius: 20px;
				margin: 0 0 15px 0;
			}

			&.padding {
				padding: 30px;
				@media screen and (max-width: 768px) {
					padding: 20px;
				}
			}

			&.active {
				display: block;

				@media screen and (max-width: 990px) {
					.product-main--tab-group--title {
						margin-bottom: 30px;
					}
					.product-main--tab-output {
						display: block;
					}
				}
			}

			&[data-tab="related-accessories"] {

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

			}

			&[data-tab="faqs"] {

				.block-title {
					padding: 30px;
					margin: 0;
					@media screen and (max-width: 990px) {
						display: none;
					}
				}

				.faq-groups {

					.faq-group {

						padding: 20px 30px;
						border-top: 1px solid var(--grey);

						@media screen and (max-width: 768px) {
							padding: 20px;
						}

						.faq--question {
							font-size: 20px;
							display: flex;
							align-items: center;
							cursor: pointer;
							gap: 10px;
							font-weight: 600;
							@media screen and (max-width: 768px) {
								font-size: 18px;
							}
							svg {
								min-width: 18px;
								width: 18px;
								height: unset;
							}
						}

						.faq--answer {
							display: none;
							margin-top: 16px;
						}

						&.expanded {

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

							.faq--answer {
								display: block;
							}
						}

					}

				}

			}

			.pdp_callout_metaobject {

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

				.callout {

					width: calc(50% - 20px);
					margin:0 0 20px 0;

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

					.callout--image {
						margin: 0 0 16px 0;
						img {
							width: 100%;
							display: block;
							height: unset;
							border-radius: 20px;
							overflow: hidden;
						}
					}

					.callout--title {
						margin: 0 0 10px 0;
						color: var(--primary);
					}

				}

			}

			.product-specs-table {

				.product-specs-table--group {

					width: 100%;

					.group--title {

						background: var(--grey-dark);
						color: var(--tertiary);
						padding: 20px 40px;
						font-size: 18px;

						@media screen and (max-width: 768px) {
							padding: 10px 20px;
							font-size: 15px;
						}

					}

					.group--mfs {

						.group--mf {

							display: flex;
							justify-content: space-between;
							padding: 20px 40px;
							border-bottom: 1px solid var(--grey);
							gap: 10px;

							@media screen and (max-width: 768px) {
								padding: 10px 20px;
								font-size: 15px;
							}

							.group--mf-key {

								width: 50%;
								text-transform: capitalize;

							}

							.group--mf-value {

								width: 60%;

							}

							&:nth-child(even){
								background: var(--grey);
							}

						}

					}



				}

			}

			.product-main--tab-group--title {

				display: none;

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

					display: block;
					position: relative;
					font-size: 20px;
					color: var(--primary);
					cursor: pointer;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 600;

				}

			}

			.product-main--tab-output {

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

					display: none;

				}

				.related-products--flex {

					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					gap: 10px;

					.related-product--item {

						width: calc(50% - 10px);
						display: flex;
						align-items: center;

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

						.related-product--media {

							width: 156px;
							min-width: 156px;
							height: 156px;
							margin-right: 20px;
							border: 1px solid var(--grey);
							border-radius: 10px;
							overflow: hidden;

							@media screen and (max-width: 768px) {
								width: 80px;
								min-width: 80px;
								height: 80px;

							}

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

						}

						.related-product--meta {

							.related-product--title {

								margin: 0 0 15px 0;
								font-weight: 600;

								a {
									color: var(--tertiary);
								}

							}

							.pricing {
								margin: 0 0 14px 0;
							}

							.related-product--btn {
								.btn {
									@media screen and (max-width: 768px) {
										min-width: unset;
									}
								}
							}

						}

					}

				}

				.richmedia-blocks {

					.richmedia-block {

						margin: 60px 0 0 0;

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

						&.richmedia-block--featured {

							.richmedia-block__content {

								text-align: center;

								.richmedia-block__content-title {
									margin: 0 0 20px 0;
								}

							}

							.richmedia-block__image {
								margin-top: 30px;
							}

						}

						&.richmedia-block--split {

							display: flex;
							align-items: center;
							justify-content: space-between;

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

							.richmedia-block__content {

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

								.richmedia-block__content-title {
									margin: 0 0 20px 0;
								}

							}

							.richmedia-block__image {

								width: 50%;

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

							}

							&.image-left {

								.richmedia-block__image {
									order: -1;
									@media screen and (max-width: 990px) {
										order: 2;
									}
								}

							}

						}

						&.richmedia-block--grid {

							.richmedia-grid {

								display: flex;
								gap: 30px;

								@media screen and (max-width: 990px) {
									flex-wrap: wrap;
									gap: 0;
									margin: 0 -15px;
									@media screen and (max-width: 768px) {
										margin: 0 -7px;
									}
								}

								.richmedia-grid__item {

									flex: 1;

									@media screen and (max-width: 990px) {
										width: 50%;
										flex: unset;
										padding: 0 15px 30px;
										@media screen and (max-width: 768px) {
											padding: 0 7px 30px;
										}
									}

									.richmedia-grid__image {
										margin: 0 0 16px 0;
									}

									.richmedia-grid__content {
										.rte {
											margin-top: 16px;
										}
									}

								}

							}


						}

					}

				}

			}

			.block-title {
				color: var(--primary);
				margin: 0 0 10px 0;
			}

			&[data-tab="specifications"],
			&[data-tab="faqs"] {

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

					.product-main--tab-group--title {
						padding: 30px;
						margin: 0 !important;
						@media screen and (max-width: 768px) {
							padding: 20px;
						}
					}

				}

			}

		}

	}

	.sticky-device-button {

		display: none;

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

			position: fixed;
			display: block;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			z-index: 999;
			padding: 10px 20px;
			border-top: 1px solid #ccc;
			transition: .4s all;

			&.active {
 
				bottom: -200px;

			}

		}

	}

}

.product--form {

	.finance-blocks {

		margin: 0 0 20px 0;

		.fb_title {
			font-weight: 600;
			margin: 0 0 12px 0;
		}

		.finance-blocks--flex {

			display: flex;
			gap: 10px;
			margin: 0 0 12px 0;

			div {

				display: block;
				flex: 1;
				border: 1px solid var(--grey);
				border-radius: 10px;
				padding: 20px 15px;
				transition: .3s all;
				position: relative;
				cursor: pointer;
				max-width: 50%;

				&:hover {
					border-color: var(--primary);
				}

				img {

					width: 100%;
					height: 26px;
					object-fit: contain;
					object-position: left center;
					display: block;

				}

				span {
					display: block;
					font-size: 14px;
					color: #000;
					margin: 10px 0 0 0;
				}

				svg {

					width: 10px;
					height: 10px;
					object-fit: contain;
					position: absolute;
					top: 27px;
					right: 15px;
					opacity: .5;

				}

			}

		}

		.fb_dislclaimer {

			margin: 0;
			font-size: 14px;

			a {
				color: #000;
				text-decoration: underline;
				opacity: .6;
			}

		}

	}

}

.finance-modal {

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

	.finance-modal--inner {

		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;
		border-radius: 20px;
		width: 100%;
		max-width: 1000px;
		max-height: 90vh;
		overflow: auto;
		padding: 10px 30px 30px 30px;

		@media screen and (max-width: 768px) {
			max-height: 100vh;
			border-radius: 0;
			padding: 10px 20px 30px;
		}

		.finance-modal--close {

			position: sticky;
			z-index: 9999;
			top: 0;
			margin-left: auto;
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			background: rgba(255,255,255,0.8);

		}

		.finance-modal--page {

			[data-iwoca],
			[data-topi] {
				display: none;
			}

		}

	}

}

body {

	&.menu-expanded {

		.main-product .sticky-device-button {
			display: none;
		}

	}

}