@import "variables";
.catalog-spare-parts {
	//@media(min-width: 768px){ display: flex; }
	.csp-side {
		@media(min-width: 768px){
			float: left;
			width: 180px;
			min-width: 180px;
		}
		@media (max-width: 767px){
			margin-bottom: 20px;
		}
	}
	.csp-center {
		//flex-grow: 1;
		@media(min-width: 768px){
			overflow: hidden;
			padding-left: 30px;
		}
	}

	&.catalog-spare-parts_flex {
		display: flex;
		@media (max-width: 767px){
			flex-direction: column;
		}
		.csp-side {
			display: flex;
			flex-direction: column;
			@media(min-width: 768px){
				float: none;
				width: 180px;
				min-width: 180px;
			}
			@media (max-width: 767px){
				margin-bottom: 20px;
			}
			.js-sticky-col {
				flex: 1;
				min-height: auto !important;
			}
		}
		.csp-center {
			flex-grow: 1;
			@media(min-width: 768px){
				min-width: 0;
				padding-left: 30px;
			}
		}
	}

	&.catalog-spare-parts_center {
		max-width: 900px;
		margin: 0 auto !important;
		.csp-center {
			padding-left: 0 !important;
		}
		.panel.panel-csp-catalog {
			@media(max-width: 575px){
				margin-left: -12px;
				margin-right: -12px;
			}
		}
	}

	&.invert {
		.csp-side {
			@media(min-width: 768px){
				float: left;
				width: 24%;
				min-width: auto;
			}
			@media(min-width: 992px){ width: 22%; }
			@media(min-width: 1200px){ width: 18%; }
		}
		.csp-center {
			@media(min-width: 768px){
				float: right;
				width: 76%;
			}
			@media(min-width: 992px){ width: 78%; }
			@media(min-width: 1200px){ width: 82%; }
		}
	}

	.panel {
		&.panel-csp-catalog {
			background: $color_gray_05;
			margin-bottom: 24px;
			padding: 12px;
			.panel-heading {
				margin: 0;
				padding: 4px 0 0 0;
				font-size: 32px;
				font-weight: bold;
				color: $color_gray_80;
				line-height: normal;
				@media (max-width: 767px){
					padding-bottom: 12px;
					font-size: 24px;
				}
			}
			.panel-body {
				position: relative;
				padding: 0;
			}
		}
	}

	.csp-catalog {
		position: relative;
		margin: 0 -5px; padding: 0; list-style: none;
		font-size: 0;
		.csp-catalog__item {
			position: relative;
			vertical-align: top;
			display: inline-block;
			width: 20%;
			margin-top: 20px;
			padding: 0 5px;
			*zoom: 1;
			font-size: 14px;
			@media (max-width: 767px) {
				font-size: 16px;
			}
			&.more { display: none; }
			&.show {
				display: block;
				@media (min-width: 768px){ display: inline-block; }
			}
		}
		@media (max-width: 991px){
			.csp-catalog__item { width: 25%; }
		}
		@media (max-width: 767px){
			margin: 0;
			.csp-catalog__item {
				display: block;
				width: auto;
				margin: 0;
				padding: 4px 0;
				& + .csp-catalog__item { border-top: 1px solid $color_gray_10; }

				//&:not(.shown):not(.more):nth-child(n+5) { display: none; }
				&.csp-catalog__hide { display: none; }

				&.more {
					display: block;
					padding: 12px 0 0;
					text-align: center;
					a {
						border-color: transparent;
						display: block;
					}
				}

				//.product-preview modification
				.product-preview {
					position: relative;
					//overflow: hidden;
					*zoom: 1;
					display: flex !important;
					align-items: center;
					.product-preview__head {
						position: static;
						float: left;
						width: 40px;
						min-width: 40px;
						@media (min-width: 360px){ width: 50px; min-width: 50px;  }
						@media (min-width: 400px){ width: 55px; min-width: 55px;  }
						@media (min-width: 440px){ width: 60px; min-width: 60px;  }
						@media (min-width: 480px){ width: 65px; min-width: 65px;  }
						.img-aligner {
							/*min-width: 40px;
							@media (min-width: 360px){ min-width: 50px; }
							@media (min-width: 400px){ min-width: 55px; }
							@media (min-width: 440px){ min-width: 60px; }
							@media (min-width: 480px){ min-width: 65px; }*/
						}
					}
					.product-preview__body {
						//flex-grow: 1;
						position: relative; top: 50%;
						overflow: hidden;
						padding: 0 40px 0 12px;
					}
					.product-preview__marks {
						background: $color_gray_05;
						top: 50%;
						height: 50px;
						padding: 15px 0;
						margin-top: -25px;
						line-height: 20px;

						&:before {
							content: '';
							position: absolute; top: 0; bottom: 0; right: 100%;
							width: 20px;
							background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(242,242,242,1) 100%);
							background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(242,242,242,1) 100%);
							background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(242,242,242,1) 100%);
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f2f2f2',GradientType=1 );
						}

						li {
							display: inline-block;
							vertical-align: top;
						}
						.label {
							display: block; height: 20px;
							padding: 0 4px;
							font-size: 12px;
							line-height: 20px;
							@include border-radius(2px);
						}
						.discount {
							display: block; height: 20px;
							margin-top: 0;
							padding: 0 4px;
							font-size: 12px;
							line-height: 20px;
							@include border-radius(2px);
							span { display: none; }
							&:before { display: none; }
						}
					}
					.name {
						padding-top: 0;
						font-size: 18px;
						font-weight: normal;
						text-align: left;
					}
				}
			}

			&.show-all {
				.csp-catalog__item:not(.hide) {
					display: block !important;
					&.more { display: none !important; }
				}
			}
		}
	}

	.sortix.shown .csp-catalog__item.more { display: none !important; }
}

.catalog-spare-parts-heading {
	position: relative;
	//background: $color_water;
	margin-bottom: 24px;
	//padding: 12px;
	.csph-shadow {
		position: absolute; top: -16px; bottom: 0; left: -12px; right: -12px;
		z-index: 1;
		background: -moz-linear-gradient(top, rgba(213,230,246,1) 0%, rgba(125,185,232,0) 100%);
		background: -webkit-linear-gradient(top, rgba(213,230,246,1) 0%,rgba(125,185,232,0) 100%);
		background: linear-gradient(to bottom, rgba(213,230,246,1) 0%,rgba(125,185,232,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5e6f6', endColorstr='#007db9e8',GradientType=0 );
		@media (min-width: 768px) {
			display: none;
		}
	}
	.csph-body {
		position: relative;
		z-index: 2;
	}
	h1, .h1 {
		margin-bottom: 0;
		font-size: 34px;
		font-weight: bold;
		line-height: 1.25;
		@media (max-width: 991px){ font-size: 22px; }
		.gray {
			color: #565656 !important;
		}
	}
	.description {
		position: relative;
		padding-top: 4px;
		color: #9E9E9E;
		@media(max-width: 575px){
			padding-right: 28px;
			font-size: 13px;
		}

		h2 {
			display: inline-block;
			margin: 0;
			font-size: 14px;
			color: #9E9E9E;
			@media(min-width: 576px){
				padding-right: 8px;
			}
		}
		.csph-reset {
			@media(min-width: 576px){
				position: relative;
				display: inline-block;
				border: 0;
			}
			@media(max-width: 575px){
				position: absolute; top: 4px; right: 0;
				border: 0;
			}
			.desktop {
				display: none;
				@media(min-width: 576px){
					position: relative;
					display: block;
					padding-right: 16px;
					white-space: nowrap;
					svg {
						position: absolute; top: 50%; right: 0;
						display: block;
						width: 12px;
						height: 12px;
						margin-top: -5px;
					}
				}
			}
			.mobile {
				display: none;
				@media(max-width: 575px){
					display: block;
					color: $gray;
					svg {
						width: 20px;
						height: 20px;
					}
				}
				&:hover {
					color: $blue;
				}
			}
		}
		.highlight {
			background: lighten($color_blue, 45%);
			display: inline-block;
			padding: 8px 16px;
			@media (max-width: 767px){
				padding: 8px;
			}
		}
	}
	.csph-all {
		padding-top: 8px;
		@media(min-width: 768px){
			display: none;
		}
		a {
			border-bottom: 1px dashed $blue;
			&:hover {
				border-bottom-color: transparent;
			}
		}
	}

	&.visible-xs {
		//margin: -12px -12px 0 -12px;
		font-size: 13px;
		h1 {
			font-size: 24px;
		}
	}
	&.hidden-xs {}

	&._lg {
		position: relative;
		@media (min-width: 992px){
			margin-bottom: 36px;
		}
		.brand {
			position: absolute; top: 8px; left: 0;
			.ico-auto-brands {
				display: block;
				width: 40px;
				height: 40px;
				font-size: 40px;
				line-height: 1;
			}
			& ~ h1,
			& ~ .h1,
			& ~ .description {
				margin-left: 52px;
			}
			@media (max-width: 991px){
				top: 4px;
			}
			@media (max-width: 767px){
				top: 1px;
				.ico-auto-brands {
					width: 32px;
					height: 32px;
					font-size: 32px;
				}
				& ~ h1,
				& ~ .h1,
				& ~ .description {
					margin-left: 44px;
				}
			}
		}
		h1, .h1 {
			font-size: 40px;
			@media (max-width: 991px){ font-size: 32px; }
			@media (max-width: 767px){ font-size: 24px; }
			.gray {
				color: #757575 !important;
			}
		}
		.description {
			font-size: 14px;
			h2 {
				font-size: 16px;
			}
		}
	}
}

.csp-catalog__headline {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: bold;
}

.csp-catalog__search {
	.body {
		padding: 0 0 24px 0;
	}
	.media {
		.media-right {
			padding-left: 4px;
			.btn { min-width: 50px; }
		}
	}
	.field {
		position: relative;
		input {
			float: none !important;
			padding-left: 12px;
			padding-right: 24px;
			@media (max-width: 767px) {
				font-size: 16px;
			}
		}
		.closer {
			background: $color_gray_60;
			display: none;
			top: 50%; right: 9px;
			width: 20px; height: 20px;
			margin-top: -10px;
			@include border-radius(50%);
			&:before, &:after {
				background: $color_white;
				width: 60%;
			}
		}
		&.active {
			.closer { display: block; }
		}
	}

	&:not(.v2){
		@media (min-width: 768px){
			display: none !important;
		}
	}

	&.v2 {
		//max-width: 600px;
		.search-head {
			position: relative;
			max-width: 900px !important;
			margin: -8px auto 4px;
			font-size: 16px;
			font-weight: bold;
			display: none;
		}
		.catalog-spare-parts-search {
			max-width: 900px !important;
			margin: 0 auto;
		}
		.form-group {
			position: relative;
			display: flex;
			.field {
				flex-grow: 1;
				.form-control {
					@include border-radius(3px 0 0 3px);
				}
				.closer {
					margin: 0;
				}
			}
			.btn {
				@include border-radius(0 3px 3px 0);
			}
		}
	}

	&.fix {
		.body {
			background: lighten($color_blue, 60%);
			position: fixed; top: 0; left: 0; right: 0;
			z-index: 999;
			display: block;
			padding: 12px 8px;
			@include box-shadow(0 0 10px $color_gray_30);
		}
		&.v2 {
			.search-head {
				display: block;
			}
			.catalog-spare-parts-search {
				max-width: none;
			}
			.body {
				background: $white;
				padding: 12px;
				@media(min-width: 992px){
					left: 50%;
					right: auto;
					width: 940px;
					margin-left: -470px;
				}
				@media(min-width: 1200px){
					width: 1140px;
					margin-left: -570px;
				}
			}
		}
	}
}

//
.catalog-spare-parts-car-row {
	margin-bottom: 20px;
	@media(min-width: 768px) {
		max-width: 600px;
	}
	@media(max-width: 575px){
		margin-left: -12px;
		margin-right: -12px;
	}
	.cspcr-body {}
	.cspcr-side {}
}

.catalog-spare-parts-car {
	background: #EBFFD6;
	display: flex;
	@media(max-width: 575px){
		flex-direction: column;
	}
	.car-image {
		img {
			display: block;
			max-width: 150px;
			max-height: 100px;
			@media(max-width: 575px){
				width: 100%;
				max-width: none;
				max-height: none;
			}
		}
	}
	.car-description {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: 12px 16px;
		@media(max-width: 575px){
			font-size: 14px;
			line-height: 1.25;
		}
		.car-description__body {
			flex-grow: 1;
		}
		.car-description__footer {
			text-align: right;
		}
	}
}

.catalog-spare-parts-search {
	display: flex;
	max-width: 600px;
	margin-bottom: 20px;
	.search-field {
		flex-grow: 1;
		.field {
			position: relative;
			.closer {
				background: $color_gray_60;
				display: none;
				top: 50%; right: 6px;
				width: 20px; height: 20px;
				margin-top: -10px;
				@include border-radius(50%);
				&:before, &:after {
					background: $color_white;
					width: 60%;
				}
			}
			&.active {
				.closer { display: block; }
			}
		}
		.form-control {
			@include border-radius(3px 0 0 3px);
		}
	}
	.search-button {
		.btn {
			padding-left: 16px;
			padding-right: 16px;
			@include border-radius(0 3px 3px 0);
		}
	}
}

.aw-model-info {
	background: #f2e5f5;
	border-color: #f2e5f5;
	padding: 8px 12px;
	color: #772397;
	.aw-model-info__name {
		margin-bottom: 4px;
	}
	.aw-model-info__vin {}
	.aw-model-info__data {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -8px;
		padding: 0;
		list-style: none;
		& > li {
			padding: 4px 8px;
		}
	}
	.aw-model-info__footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.col-catalog {}
		.col-info {
			color: $color_gray_50;
		}
	}
}
.copyDataToClipboard {
	&:hover {
		cursor: pointer;
	}
}