.main-product {

	padding: 20px 0 0 0;

	.main-product--breadcrumbs {

		margin: 0 0 20px 0;

		.breadcrumbs {

			ul {

				list-style: none;
				display: flex;
				flex-wrap: wrap;

				li {
					a, span {
						display: block;
						font-size: 14px;
						position: relative;
						&::after {
							content:'/';
							margin: 0 3px;
						}
					}
					&:last-child {
						span::after {
							display: none;
						}
					}
					a:hover {
						text-decoration: underline;
					}
				}

			}

		}

	}

	.main-product--flex {

		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

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

		.main-product--media {

			width: 60%;
			display: flex;
			justify-content: space-between;
			position: relative;
			padding-left: 130px;

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

			&.ratio-square {
				img {
					aspect-ratio: 1/1;
				}
			}

			&.ratio-portrait {
				img {
					aspect-ratio: 1/1.3;
				}
			}

			.main-product--media-thumbs {

				width: 110px;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				overflow: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;

				&::-webkit-scrollbar {
  					display: none;
  				}

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

				.media--thumb {

					width: 100%;
					margin: 0 0 10px 0;
					opacity: .5;
					transition: .3s all;
					cursor: pointer;

					img {

						width: 100%;
						object-fit: cover;
						border-radius: 4px;
						border: 1px solid color-mix(in srgb, var(--forest-green) 30%, transparent);

					}

					&.active {
						opacity: 1;
					}

				}

			}

			.main-product--media-gallery {

				width: 100%;

				@media screen and (max-width: 990px) {
					width: 100%;
					display: flex;
					gap: 8px;
					overflow: auto;
					margin: 0 -40px;
					padding: 0 40px 20px;
					width: calc(100% + 80px);
					scrollbar-width: none;
					-ms-overflow-style: none;

					&::-webkit-scrollbar {
	  					display: none;
	  				}
				}

				@media screen and (max-width: 768px) {
					margin: 0 -20px;
					padding: 0 20px;
					width: calc(100% + 40px);
				}

				.media--gallery {

					width: 100%;

					@media screen and (max-width: 990px) {
						width: 350px;
						min-width: 350px;
					}

					@media screen and (max-width: 768px) {
						width: 280px;
						min-width: 280px;
					}

					img {
						width: 100%;
						object-fit: cover;
						border-radius: 4px;
					}

				}

				.slick-arrow {

					position: absolute;
					bottom: 10px;
					right: 10px;
					z-index: 2;

					&.slick-prev {
						right: 62px;
					}

				}

			}

		}

		.main-product--form {

			width: calc(40% - 30px);
			padding: 10px 0;

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

			.product-block--product-title {

				margin: 0 0 20px 0;

			}

			.product-block--richtext {

				margin: 0  0 16px 0;

				&.no-margin {
					margin: 0 0 4px 0; 
					p:last-child {
						margin: 0;
					}
				}

				p {
					font-size: 18px;
					line-height: 1.5;
				}

				&.smaller-text {
					p {
						font-size: 14px;
					}
				}

			}

			.product-block--pricing {

				display: flex;
				align-items: flex-end;
				font-family: 'sibbaldia-med';
				gap: 12px;
				letter-spacing: -2px;
				margin: 0 0 4px 0;

				.price {
					font-size: 26px;
				}

				.cap {
					font-size: 18px;
					text-decoration: line-through;
					opacity: .5;
				}

			}

			.product-block--qty-selection {

				margin: 0 0 20px 0;

				.label {
					display: block;
					margin: 0 0 6px 0;
				}

				.controls {

					width: 120px;
					height: 50px;
					border: 1px solid var(--forest-green);
					border-radius: 4px;
					display: flex;

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

					span {
						height: 100%;
						width: 50px;
						position: relative;
						cursor: pointer;

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

					input {
						padding: 0;
						width: 40px;
						text-align: center;
						&[type="number"]::-webkit-outer-spin-button,
						&[type="number"]::-webkit-inner-spin-button {
							-webkit-appearance: none;
							margin: 0;
						}

						&[type="number"] {
							-moz-appearance: textfield;
							appearance: textfield;
						}
					}

				}

			}

			.product-block--variants {

				margin: 20px 0 0 0;

				.variant-option {

					margin: 0 0 20px 0;

					.label {

						display: block;
						margin: 0 0 6px 0;

					}

					.variant-option--values {

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

						&.variant-option--values-colour {

							.variant-option--value {

								.swatch {

									width: 40px;
									height: 40px;
									border-radius: 50%;
									border: 1px solid rgba(0,0,0,0.1);
									display: block;
									opacity: .8;
									transition: .3s all;

								}

								&.active .swatch {
									border-color: var(--forest-green);
									opacity: 1;
								}

								&:hover > .swatch {
									opacity: 1;
								}

							}

						}

						&:not(.variant-option--values-colour) {

							.variant-option--value {

								padding: 11px 20px;
								border: 1px solid var(--forest-green);
								border-radius: 5px;
								font-size: 14px;
								font-weight: 500;
								color: var(--forest-green);
								transition: .3s all;

								&.active {
									background: var(--forest-green);
									color: var(--off-white);
								}

							}

						}

						.variant-option--value {

							position: relative;
							cursor: pointer;

							input {
								position: absolute;
								opacity: 0;
							}

						}

					}

				}

			} /* product-block--variants */

			.product-block--buttons {

				margin: 0 0 30px 0;

				.btn {
					font-size: 16px;
					padding: 20px;
				}

			}

			.product-block--accordion {

				details {

					border-bottom: 1px solid color-mix(in srgb, var(--forest-green) 30%, transparent);

					summary {

						padding: 20px 0;
						position: relative;
						font-size: 18px;
						list-style: none;
						cursor: pointer;

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

						&::marker {
							display: none;
							content: "";
						}

						&::-webkit-details-marker {
							display: none;
						}

						&::after {

							content: '';
							position: absolute;
							top: 50%;
							right: 0;
							transform: translate(0,-50%);
							transition: .3s all;
							width: 20px;
							height: 20px;
							background: url('icon-chev-down.svg') no-repeat center center / 13px;

						}

					}

					.product-block--accordion-output {
						ul, ol {
							padding-left: 20px;
						}
					}

					&[open] {

						summary::after {
							transform: translate(0,-50%) rotate(180deg);
						}

					}

				}

			}

			.product-block--field {

				margin: 0 0 6px 0;

				input,
				textarea {

					border: 1px solid var(--forest-green);
					background: #fff;
					border-radius: 4px;
					font-family: "Public Sans", sans-serif;
					font-weight: 300;
					font-size: 16px;
					width: 100%;
					padding: 13px 16px;

				}

				textarea {
					min-height: 120px;
				}

			}

			#product-select {
				display: none;
			}

		}



	}



}