.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;

		@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: 20px;
				margin: 20px 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: 20px;
				margin: 20px 0;
				border-bottom: 1px solid var(--grey);

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

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

			}

			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;
					}

				}

			}

			.delivery-options {

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

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

				.delivery-option {
					display: flex;
					align-items: center;
					.img-container {
						width: 50px;
						min-width: 50px;
						img {
						}
					}
				}

			}

			.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;
									}
								}
							}

						}

					}

				}

			}

			.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;

			}

		}

	}

}

body {

	&.menu-expanded {

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

	}

}