$o-product-bp: 936;
$o-product-slider-control-size: 48px;

.o-product {
	@include vspacing(
		'margin-top' 0.5,
		'margin-bottom' 0.5
	);
	@include mq($o-product-bp) {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
	}
}


.o-product__images {
	max-width: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;

	@include mq($o-product-bp) {
		width: column(5, 12);
	}
}


.o-product__picture {
	position: relative;
}


.o-product__frame {
	//max-width: 384px;
	margin: 0 $o-product-slider-control-size;
}


.o-product__controls {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	outline: none;
}


.o-product__control {
	border: none;
	background: none;
	padding: 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	outline: none;
	cursor: pointer;

	&::before {
		content: '';
		display: block;
		background-image: url(/img/arrow--grey.svg);
		background-repeat: no-repeat;
		width: $o-product-slider-control-size;
		height: $o-product-slider-control-size;

		@at-root .prev#{&} {
			transform: rotate(0.5turn);
		}
	}
}


.o-product__gallery {
	display: flex;
	flex-wrap: wrap;
	max-width: 400px; // this means 5 thumbnails in a row
	margin-top: space(2);
	margin-left: $o-product-slider-control-size - space(0.5);
}


.o-product__thumb {
	margin: space(0.5);

	&[class*='active'] {
		box-shadow: 0 0 0 2px #002CFF;
	}
}

.o-product__breadcrumbs {
	margin-top: space(5);
}

.o-product__info {
	@include mq($o-product-bp) {
		width: column(6, 12);
		margin-left: column(1, 12);
	}
}


.o-product__back {
	margin-bottom: space(3);
}


.o-product__title {
	@include font-family(primary);
	@include font-size(xl);
	@include font-weight('bold');
}

.o-product__order {
	margin-top: space(3);
	display: flex;
}


.o-product__amount {
	@include border-radius(s);
	margin-right: space(1);
	border: 2px solid palette(border, 200);
	width: space(8);
	height: space(6);
	text-align: center;

	&[type='number']::-webkit-inner-spin-button,
	&[type='number']::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}


.o-product__price {
	@include font-size(xl);
	color: palette(text, 300);
	margin-top: space(3);
}


.o-product__btw {
	@include font-size(m);
	 margin-left: 3px;
}

.o-product__usp {
	margin-top: space(4);
	margin-bottom: space(4);
}