.product {

	.container {
		position: relative;
	}

	.breadcrumbs {
		margin-bottom: 20px;
	}

	.product__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
		gap: 50px;
		align-items: start;

		@media (max-width: 989px) {
			display: block;
		}
	}

	/* Media */

	.product__media {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 10px;
		min-width: 0;
		align-items: flex-start;

		@media (max-width: 989px) {
			display: block;
			margin: 0 -40px 30px;
		}

		@media (max-width: 767px) {
			margin: 0 -16px 30px;
		}

		.product__media-thumbnails {
			display: flex;
			flex-direction: column;
			gap: 10px;
			position: sticky;
			top: 180px;

			@media (max-width: 989px) {
				display: none;
			}

			.product__media-thumbnail {
				display: block;
				width: 72px;
				aspect-ratio: 1 / 1;
				overflow: hidden;
				border-radius: 6px;
				opacity: .6;
				transition: .3s all;

				&.is-active {
					opacity: 1;
				}

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

		.product__media-stage {
			position: relative;
			min-width: 0;

			.product__media-list {
				display: flex;
				flex-direction: column;
				gap: 10px;

				@media (max-width: 989px) {
					flex-direction: row;
					gap: 10px;
					overflow-x: auto;
					scroll-snap-type: x mandatory;
					scroll-padding-left: 40px;
					scrollbar-width: none;
					padding: 0 0 0 40px;

					&::-webkit-scrollbar {
						display: none;
					}
					&[data-image-count="1"] {
						.product__media-item {
							flex: 0 0 calc(100% - 40px);
						}
					}
				}

				@media (max-width: 767px) {
					scroll-padding-left: 16px;
					padding-left: 16px;
					&[data-image-count="1"] {
						.product__media-item {
							flex: 0 0 calc(100% - 16px);
						}
					}
				}

				.product__media-item {
					position: relative;
					width: 100%;
					aspect-ratio: 1 / 1;
					overflow: hidden;
					border-radius: 6px;

					@media (max-width: 989px) {
						flex: 0 0 calc(100% - 40px);
						scroll-snap-align: start;
					}

					img,
					video,
					iframe,
					model-viewer {
						display: block;
						width: 100%;
						height: 100%;
						object-fit: contain;
						background: #fff;
					}

					.product__media-zoom {
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;

						@media (max-width: 989px) {
							display: none;
						}

						span {
							position: absolute;
							bottom: 20px;
							right: 20px;
							transition: .2s all;

							svg {
								transform: rotate(45deg);
								width: 11px;
								height: unset;
								path {
									stroke: #000;
								}
							}
						}
						&:hover {
							span {
								bottom: 26px;
								right: 26px;
							}
						}
					}

				}
			}

			.product__media-count {
				display: none;

				@media (max-width: 989px) {
					position: absolute;
					right: 50px;
					bottom: 10px;
					display: flex;
					align-items: center;
					gap: 3px;
					z-index: 2;
					background: var(--color-black-reduced);
					border-radius: 14px;
					font-size: 12px;
					font-weight: 400;
					font-family: var(--font-heading-family);
					height: 30px;
					width: 54px;
					justify-content: center;
				}

			}
		}
	}


	/* Product information */

	.product__info {
		min-width: 0;

		@media (max-width: 989px) {
			position: static;
			top: auto;
		}

		&.product__info--sold-out {

			.product__form,
			.product__availability {
				display: none;
			}

		}

		.product__vendor {
			margin-bottom: 10px;
			text-transform: uppercase;
			font-family: var(--font-heading-family);
			font-weight: 400;
			color: var(--color-primary);
			font-size: 20px;
		}

		.product__title {
			margin: 0 0 12px;
		}

		.product__short-description {
			margin-bottom: 14px;
			line-height: 1.4;
		}

		.product__reviews {
			margin-bottom: 14px;
		}


		/* Price */

		.product__price-wrap {
			margin-bottom: 18px;

			.product__price {
				display: flex;
				align-items: baseline;
				flex-wrap: wrap;
				gap: 10px;
				font-weight: 500;
				.product__price-current {
					font-size: 40px;
					@media (max-width: 768px) {
						font-size: 34px;
					}
				}
				.product__price-compare {
					font-size: 25px;
					opacity: .6;
					text-decoration: line-through;
					@media (max-width: 768px) {
						font-size: 19px;
						font-weight: 300;
					}
				}
			}

			.product__saving {
				margin-top: 4px;
				color: var(--color-primary);
				font-weight: 500;
				@media (max-width: 768px) {
					font-size: 14px;
				}
			}
		}


		/* Klarna */

		.product__klarna {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			padding: 10px 0;
			margin-bottom: 18px;
			border-top: 1px solid var(--border-white);
			border-bottom: 1px solid var(--border-white);

			.product__klarna-text {
				flex: 1;
				min-width: 0;
			}

			.product__klarna-logo {
				flex: 0 0 auto;

				svg {
					display: block;
					width: 45px;
					height: auto;
				}
			}
		}


		/* Options */

		.product__options {
			display: flex;
			flex-direction: column;
			gap: 18px;
			margin-bottom: 20px;

			.product__option {
				margin: 0;
				padding: 0;
				min-width: 0;
				border: none;
				display: flex;
				align-items: center;
				gap: 15px;

				.product__option-label {
					margin: 0 0 10px 0;
					padding: 0;
					font-weight: 400;
				}

				.product__option-values {
					display: flex;
					flex-wrap: wrap;
					gap: 8px;

					.product__option-value {
						display: flex;
						align-items: center;
						justify-content: center;
						min-width: 92px;
						min-height: 44px;
						padding: 8px 16px;
						cursor: pointer;
						border: 1px solid var(--border-white);
						border-radius: 3px;
						transition: .3s all;
						font-weight: 400;

						@media (max-width: 767px) {
							flex: 1 1 0;
							min-width: 0;
						}

					}

					.product__option-input  {
						&:checked + .product__option-value {
							border-color: var(--color-primary);
							color: var(--color-primary);
							background: var(--color-primary-reduced);
						}
					}
				}
			}
		}

		.product__paired-colours {

			margin: 0 0 20px 0;

			.product__paired-colours-label {
				margin: 0 0 10px 0;
                font-weight: 400;
			}

			.product__paired-colours-list {
				
				display: flex;
				gap: 10px;
				overflow: auto;
				scrollbar-width: none;

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

				.product__paired-colour {
					width: 100px;
					min-width: 100px;
					.product__paired-colour-image {
						border-radius: 3px;
						overflow: hidden;
						width: 100%;
						aspect-ratio: 1/1;
						position: relative;
						display: block;
						img {
							position: absolute;
							top: 50%;
							left: 0;
							transform: translate(0, -50%);
							height: unset;
							aspect-ratio: 1/1;
							width: 120%;
							max-width: 120%;
							transition: .3s all;
							object-fit: cover;
						}
					}
					.product__paired-colour-label {
						text-transform: uppercase;
						font-family: var(--font-heading-family);
						font-weight: 400;
						font-size: 14px;
						display: block;
						margin: 3px 0 0 0;
					}
					&:hover {
						.product__paired-colour-image {
							img {
								width: 100%;
							}
						}
					}
				}
			}

		}


		/* Purchase */

		.product__form {
			margin: 0;

			.product__purchase {
				display: grid;
				grid-template-columns: 160px minmax(0, 1fr);
				gap: 12px;
				align-items: stretch;

				@media (max-width: 767px) {
					grid-template-columns: 112px minmax(0, 1fr);
					gap: 8px;
				}

				.product__quantity {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					min-width: 0;
					border: 1px solid var(--border-white);
					border-radius: 3px;
					transition: .3s all;

					&:hover {
						border-color: #fff;
						.product__quantity-input {
							border-color: #fff;
						}
					}

					.product__quantity-button,
					.product__quantity-input {
						width: 100%;
						min-width: 0;
						height: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
					}

					.product__quantity-input {
						appearance: textfield;
						background: transparent;
						color: #fff;
						border: none;
						font-weight: 500;
						border-left: 1px solid var(--border-white);
						border-right: 1px solid var(--border-white);
						transition: .3s all;

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

					.product__quantity-button {

						position: relative;

						&::before,
						&::after {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 15px;
							height: 1px;
							background: #fff;
						}

						&::after {
							transform: translate(-50%, -50%) rotate(90deg);
						}

						&.product__quantity-button--minus {
							&::after {
								display: none;
							}
						}

					}
				}

				.product__add-to-cart {
					width: 100%;
					min-height: 48px;
				}
			}
		}


		/* Availability */

		.product__availability {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 7px;
			width: calc(100% - 173px);
			margin: 10px 0 0 auto;

			@media (max-width: 767px) {
				justify-content: center;
				width: 100%;
			}

			.product__availability-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 auto;

				svg {
					display: block;
					width: 16px;
					height: 16px;
				}
			}
		}


		/* Back in stock */

		.product__back-in-stock {
			margin-top: 18px;

			.product__back-in-stock-form {
				display: flex;
				flex-direction: column;
				gap: 10px;
				outline: none;

				.product__back-in-stock-message {
					text-align: center;
					margin: 40px 0;
					outline: none;
					border: none;
					&.product__back-in-stock-message--success {
						color: var(--color-primary);
					}
					&.product__back-in-stock-message--error {
						color: var(--color-error);
					}
				}

				.product__back-in-stock-label {
					display: block;
					margin: 0 0 6px 0;
				}

				.product__back-in-stock-fields {
					display: grid;
					grid-template-columns: minmax(0, 1fr) auto;
					gap: 10px;

					@media (max-width: 767px) {
						grid-template-columns: 1fr;
					}

					.product__back-in-stock-input {
						width: 100%;
						min-width: 0;
						height: 48px;
						border: 1px solid var(--border-white);
						border-radius: 3px;
						padding: 0 20px;
						background: transparent;
						color: #fff;
						&:hover,
						&:focus {
							border-color: #fff;
						}
					}

					.product__back-in-stock-button {
						min-height: 48px;
						white-space: nowrap;
					}
				}
			}
		}


		/* Points */

		.product__points {
			display: flex;
			align-items: center;
			gap: 20px;
			padding: 10px;
			margin-top: 20px;
			border-radius: 3px;
			border: 1px solid var(--color-primary-reduced);
			transition: .3s all;

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

			.product__points-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 0 0 48px;
				width: 48px;
				height: 48px;

				img {
					display: block;
					max-width: 100%;
					max-height: 100%;
				}
			}

			.product__points-content {
				flex: 1;
				min-width: 0;

				.product__points-title {
					font-weight: 400;
				}

				.product__points-subtext {
					margin-top: 3px;
					font-size: 12px;
				}
			}

			.product__size-guide-link {
				color: var(--color-primary);
			}
		}


		/* Accordions */

		.product__accordion {
			margin-top: 14px;
			border: 1px solid var(--border-white);
			border-radius: 3px;
			transition: .3s all;

			&:hover {
				border-color: #fff;
			}


			& + .product__accordion {
				margin-top: 10px;
			}

			.product__accordion-summary {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 20px;
				min-height: 52px;
				padding: 0 16px;
				cursor: pointer;
				list-style: none;
				font-weight: 400;

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

				.product__accordion-icon {
					flex: 0 0 auto;
					svg {
						width: 12px;
						height: unset;
						transform: rotate(45deg);
					}
				}
			}

			.product__accordion-content {
				
				padding: 6px 16px 16px 16px;

				&.rte {

					h1, h2, h3, h4 {
						font-size: 22px;
					}

					h5, h6 {
						font-size: 18px;
					}

					table {
						width: 100%;
						border-collapse: collapse;
						font-size: 14px;
						border-radius: 3px;
						td {

						}
						tr, td {
							border: 1px solid var(--color-primary-reduced);
							padding: 8px;
						}
					}

					a {
						text-decoration: underline;
					}

					ol, ul {
						padding: 0 0 16px 20px;
					}

				}
			}

			&[open] {

				.product__accordion-icon {
					transform: rotate(45deg);
				}
			}
		}
	}


	@media (max-width: 989px) {

		.product__layout {
			.product__info {
				padding-bottom: 30px;
			}
		}
	}
}

.product__media-modal {

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

	&.is-open {
		display: block;
		@media (max-width: 989px) {
			display: none;
		}
	}

	.product__media-modal-dialog {

		width: 1500px;
		max-width: 100%;
		padding: 0 60px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--color-black);
		border: 1px solid var(--border-white);
		padding: 40px;
		border-radius: 6px;
		max-height: 100dvh;
		overflow: auto;

		.product__media-modal-close {

			position: absolute;
			top: 50px;
			right: 50px;
			z-index: 2;
			background: var(--color-black);
			border-radius: 4px;
			border: 1px solid var(--border-white);
			background: var(--color-black);
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			height: 40px;

		}

		.product__media-modal-swiper {
			border-radius: 4px;
		}

		.swiper-slider__arrow {

			position: absolute;
			bottom: 10px;
			z-index: 2;
			background: var(--color-black);
			border-radius: 4px;

			&.swiper-slider__arrow--prev {
				left: 10px;
			}

			&.swiper-slider__arrow--next {
				right: 10px;
			}
		}

	}

}

.product__sticky-atc {

	display: none;

	@media (max-width: 767px) {	
	
		position: fixed;
		bottom: -60px;
		left: 0;
		width: 100%;
		background:  var(--color-black);
		padding: 16px;
		display: block;
		transition: .3s all;
		z-index: 9;

		.product__sticky-atc-button {
			width: 100%;
			text-align: center;
			&[disabled] {
				background: transparent;
				border-color: var(--color-error);
				color: var(--color-error);
			}
		}

		&.is-active {
			bottom: 0;
		}

	}

}