.ProductPreviewView {

}

.ProductPreviewView .show-on-preview,
.ProductPreviewView.preview .hide-on-preview {
	display: none;
}
.ProductPreviewView .hide-on-preview,
.ProductPreviewView.preview .show-on-preview {
	display: block;
}

.ProductPreviewView .product-details .top {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: flex-start;
	gap: 25px;
}
.ProductPreviewView .product-details .top > .left,
.ProductPreviewView .product-details .top > .right {
	width: 50%;
}

.ProductPreviewView .product-details .title {
	font-size: 20pt;
	line-height: 26pt;
	margin-bottom: 10px;
}
.ProductPreviewView .product-details .insights {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 25px;
	margin-bottom: 20px;
}
.ProductPreviewView .product-details .insights > * {
	position: relative;
	color: var(--color-grey_light);
}
.ProductPreviewView .product-details .insights > *:after {
	content: '';
	position: absolute;
	top: 5px;
	right: -12px;
	width: 1px;
	height: 10px;
	background-color: var(--color-grey_light);
}
.ProductPreviewView .product-details .insights > *:last-child:after {
	content: none;
}
.ProductPreviewView .product-details .store {
	font-family: 'NexaBold';
	margin-bottom: 25px;
	color: var(--color-primary);
}
.ProductPreviewView .product-details .store i {
	margin-right: 8px;
}
.ProductPreviewView .product-details .store a {
	text-decoration: unset;
	color: var(--color-primary);
}

.ProductPreviewView .price-holder {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;

	font-size: 20pt;
	line-height: 28pt;
	color: var(--color-black);
	margin-bottom: 25px;
}
.ProductPreviewView .price-holder .price,
.ProductPreviewView .price-holder .discount-label {
	font-family: 'NexaBold';
}
.ProductPreviewView .price-holder .discount-label {
	color: var(--color-primary);
	font-size: 16pt;
}
.ProductPreviewView .price-holder .price.strikethrough-price {
	font-family: 'NexaLight';
	color: var(--color-grey_light);
	font-size: 14pt;
	text-decoration: line-through;
}

.ProductPreviewView .options {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 25px;
}
.ProductPreviewView .options .option-pick {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
}
.ProductPreviewView .options .option-pick .title {
	margin: 0;
	color: var(--color-grey);
	font-size: 14pt;
	line-height: 18pt;
	font-family: 'Nexa';
}
.ProductPreviewView .options .option-pick .picked-option {
	font-size: 12pt;
	line-height: 16pt;
}
.ProductPreviewView .options .option-pick ul.options-holder {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}
.ProductPreviewView .options .option-pick ul.options-holder li {
	display: inline-block;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	text-align: center;
	border: 1px solid var(--color-grey);
	border-radius: 5px;
	cursor: pointer;
}
.ProductPreviewView .options .option-pick ul.options-holder li.selected {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background-color: var(--color-red_lighter);
}
.ProductPreviewView .options .option-pick ul.options-holder li.not-active {
	cursor: not-allowed;
	opacity: 0.5;
}

.ProductPreviewView .actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: flex-start;
	gap: 25px;
}

.ProductPreviewView .quantity-holder {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
}
.ProductPreviewView .quantity-picker {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
	line-height: 46px;
}
.ProductPreviewView .quantity-picker .picker-action,
.ProductPreviewView .quantity-picker .picker-input {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	border: unset;
	text-align: center;
}
.ProductPreviewView .quantity-picker .picker-action {
	color: var(--color-grey_light);
	background-color: var(--color-grey_light_01);
}
.ProductPreviewView .quantity-picker .picker-action:hover {
	color: var(--color-primary);
	background-color: var(--color-red_lighter);
}
.ProductPreviewView .quantity-picker .picker-input {
	width: 60px;
}
.ProductPreviewView .quantity-picker .picker-input:focus {
	outline-color: var(--color-grey_light_01);
}
.ProductPreviewView .quantity-picker .picker-input::-webkit-outer-spin-button,
.ProductPreviewView .quantity-picker .picker-input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.ProductPreviewView .quantity-picker .picker-input[type=number] {
	-moz-appearance:textfield; /* Firefox */
}

.ProductPreviewView .CustomTabsView {
	margin-top: 25px;
}

.ProductPreviewView .product-specs-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
}
.ProductPreviewView .product-specs-list li {
	width: 33%;
	margin-bottom: 5px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 5px;
}
.ProductPreviewView .product-specs-list li::before {
	display: none;
}
.ProductPreviewView .product-specs-list li ._key {
	color: var(--color-grey);
}
.ProductPreviewView .product-specs-list li ._val {
	color: var(--color-black);
	font-weight: 600;
}

.ProductPreviewView .ProductsListMainView {
	margin-top: 50px;
}

@media (max-width: 1024px) {
	.ProductPreviewView .product-specs-list li {
		width: 50%;
	}
}

@media (max-width: 767px) {
	.ProductPreviewView .product-specs-list {
		gap: 0;
	}
	.ProductPreviewView .product-specs-list li {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ProductPreviewView .product-details .top {
		flex-direction: column;
	}
	.ProductPreviewView .product-details .top > .left,
	.ProductPreviewView .product-details .top > .right {
		width: 100%;
	}


	.ProductPreviewView .show-on-preview,
	.ProductPreviewView.preview .hide-on-preview {
		display: block;
	}
	.ProductPreviewView .hide-on-preview,
	.ProductPreviewView.preview .show-on-preview {
		display: none;
	}
}