@import "variables";
.catalog-brand__row {
	display: flex;
	@media(max-width: 767px){
		flex-direction: column;
	}
	.catalog-brand__side {
		min-width: 250px;
		min-height: auto !important;
		@media(min-width: 768px){
			margin-right: 28px;
		}
	}
	.catalog-brand__body {
		flex-grow: 1;
	}
}

//catalog -> brand page
.catalog-brand-negative {
	position:relative;
	overflow: hidden;
	margin-top: -12px;
	@media(min-width: 768px){
		display: none;
	}
}
.catalog-brand__head {
	padding-bottom: 25px;
	&.xs-negative-mt-12 {
		@media(max-width: 767px){
			margin-top: -12px !important;
		}
	}
	@media(max-width: 767px){
		background: $color_mystic;
		margin: 0 -12px;
		padding: 24px 12px 12px;
	}
	.icobox {
		.ico {
			top: 6px;
			margin-top: 0;
		}
	}
	h1 {
		margin: 0 0 8px 0;
		font-size: 34px;
		@media (max-width: 767px){ font-size: 24px; }
		line-height: 1.25;
		span {
			color: $color_gray_30;
		}
		&.inline-block {
			@media (max-width: 767px){ display: block !important; }
		}
	}
	h2 {
		margin: 0;
		font-size: 16px;
		font-weight: normal;
	}

	.js-highlight {
		position: relative;
		display: inline-block;
		margin: -4px -8px 0;
		padding: 4px 8px;
		@media (max-width: 767px) {
			margin-top: 8px;
		}
	}
}

.catalog-brand__model-menu {
	position: relative;
	overflow: hidden;
	*zoom: 1;
	@media(min-width: 768px){
		border: 1px solid $color_mystic;
		//border: 1px solid $color_gray_10;
		@include border-radius(2px);
	}
	@media(max-width: 767px){
		background: $color_mystic;
		position: relative;
		margin: 0 -12px 30px;
		padding: 12px;
		&:before {
			content: '';
			position: absolute; top: 100%; left: 0; right: 0;
			display: block; height: 5px;
			//@include linear-gradient(0deg, transparent, $color_gray_30);
			background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(179,179,179,1) 100%);
			background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(179,179,179,1) 100%);
			background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(179,179,179,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3b3b3', GradientType=0 );
		}
	}
	.menu-headline {
		padding: 6px 16px;
		@media(max-width: 767px){
			padding: 6px 12px;
		}
		font-weight: bold;
		a {
			background: transparent !important;
			border-bottom-color: transparent;
			color: $blue !important;
			&:hover {
				border-bottom-color: $blue;
			}
		}
	}
	.menu-rare {
		.menu-rare__head,
		a.menu-rare__head,
		.menu-rare__head a {
			background: transparent;
			border-bottom: 0;
			display: block;
			padding: 6px 16px;
			@media(max-width: 767px){
				padding: 6px 12px;
			}
			color: $blue;
			&:hover {
				background: $blue;
				color: $white;
			}
			&.rel-active {
				background: $blue;
				color: $white;
			}
		}
		.menu-rare__list {
			display: none;
			margin: 0;
			padding: 0;
			list-style: none;
			li {
				a {
					border: none;
					display: block;
					padding: 6px 16px;
					@media(max-width: 767px){
						padding: 6px 12px;
					}
					padding-left: 32px;
					font-weight: normal;
					color: $color_gray_80;
					text-overflow: clip;
					&:hover {
						background: $color_blue;
						color: $color_white !important;
						.text-gray {
							color: $color_white !important;
						}
					}
				}
			}
		}
		&.open {
			.menu-rare__head {
				.fa-angle-down {
					@include transform(rotate(180deg) translateY(-2px));
				}
			}
		}
	}
	& > ul {
		margin: 0; padding: 0; list-style: none;
		@media(max-width: 767px){
			float: left;
			width: 50%;
		}
		li {
			position: relative;
			font-weight: bold;
			a {
				border: none;
				display: block;
				padding: 6px 16px;
				color: $color_gray_80;

				/*overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;*/

				@media(max-width: 767px){
					position: relative;
					overflow: hidden;
					display: inline-block;
					max-width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 6px 12px;
				}
				&:hover {
					@media(min-width: 768px){
						background: $color_blue;
						color: $color_white !important;
						.text-gray {
							color: $color_white !important;
						}
					}
					@media(max-width: 767px){
						color: $color_blue;
					}
				}
				&.active {
					background: $color_blue;
					color: $color_white !important;
					.text-gray {
						color: $color_white !important;
					}
					@media(max-width: 767px){
						@include border-radius(2px);
					}
				}
				&.rel-active {
					background: $color_blue;
					color: $color_white !important;
					.text-gray {
						color: $color_white !important;
					}
				}
			}

			.is_rare_label {
				background: $color_white;
				border: 1px solid $color_mystic;
				position: absolute; top: 4px; right: -1px;
				z-index: 55;
				display: block;
				padding: 0 24px 2px 8px;
				@include border-radius(15px 0 0 15px);
				input {
					position: absolute; top: 50%; right: 4px;
					display: block; margin: 0; padding: 0;
					@include transform(translateY(-50%));
				}
				&:hover {
					background: $color_gray_10;
					opacity: 1;
					cursor: pointer;
				}
			}

			&.all {
				svg { color: $color_blue; }
				a {
					background: none !important;
					color: $color_dark !important;
					&:hover {
						color: $color_blue !important;
					}
				}
				&.active {
					a {
						color: $color_blue !important;
					}
				}
			}
			&.rare {
				font-weight: normal;
				//$color_rare : #7E93B2;
				& > a {
					color: $color_blue;
					&:hover {}
				}
				li {
					a {
						font-weight: normal;
						color: $color_gray_80;
						text-overflow: clip;
					}
				}
			}

			&.open {
				.fa-angle-down {
					@include transform(rotate(180deg) translateY(-2px));
				}
			}

			ul {
				margin: 0; padding: 0; list-style: none;
				display: none;
				@media(max-width: 767px){
					display: none;
				}
				li {
					a {
						@media(min-width: 768px) {
							padding-left: 32px;
						}
						@media(max-width: 767px){
							margin-left: 20px;
						}
					}
				}
			}

			&.blank {
				a {
					background: transparent !important;
					color: $blue !important;
					&:hover {
						text-decoration: underline;
					}
				}
			}

			&.active {
				a {
					background: $color_blue;
					color: $color_white;
					@media(max-width: 767px){
						@include border-radius(2px);
					}
				}
			}
		}
	}
}
.catalog-brand__model-sort {
	min-height: 32px;
	margin-bottom: 20px;
	@media (max-width: 768px){
		display: none !important;
		.container {
			width: auto;
			min-width: auto;
			max-width: none;
			padding: 0;
		}
		.row {
			.col {
				display: block;
				float: none;
				width: auto;
				&:first-child { display: none; }
			}
		}
	}

	.input-group {
		.form-field {
			.form-field__icon {
				display: none;
			}
			.form-control {
				border-color: lighten($color_gray_20, 3%);
				@include border-radius(3px 0 0 3px);
			}
			&.active {
				.form-field__icon { display: block; }
			}
		}
		.input-group-addon {
			background: $color_blue;
			border-color: $color_blue;
			color: $color_white;
			@include border-radius(0 3px 3px 0);
		}
		.input-group-btn {
			.btn {
				@include border-radius(0 3px 3px 0 !important);
			}
		}
	}

	.go-to, .catalog-brand__model-show {
		border: none;
		display: inline-block;
		margin-top: 4px;
		font-weight: bold;
	}

	&:not(.fix){
		.container {
			width: auto;
			min-width: auto;
			max-width: none;
			padding: 0;
		}
	}
	&.fix {
		@media(min-width: 768px){
			.fixed {position: fixed; top: 0; left: 0; right: 0; z-index: 777;}
			.container {
				@media (max-width: 991px){
					width: auto;
					min-width: auto;
					max-width: none;
					padding: 0;
				}
			}
			.bg {
				background: $color_white;
				position: relative;
				padding: 12px 24px;
				&:before {
					content: '';
					position: absolute; top: 100%; left: 0; right: 0;
					display: block; height: 5px;
					//@include linear-gradient(90deg, rgba(0,0,0,0), $color_mystic);
					background: -moz-linear-gradient(top, rgba(221,228,236,1) 0%, rgba(255,255,255,0) 100%);
					background: -webkit-linear-gradient(top, rgba(221,228,236,1) 0%, rgba(255,255,255,0) 100%);
					background: linear-gradient(to bottom, rgba(221,228,236,1) 0%, rgba(255,255,255,0) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde4ec', endColorstr='#00ffffff', GradientType=0 );
				}
			}
		}
	}
}
.catalog-brand__model-viewed {
	.catalog-brand__model-card {
		padding-right: 30px;
		& > .closer {
			background: $color_gray_20;
			top: 8px; right: 8px;
		}
		.model-card__left {}
		.model-card__body {}
		&.overlink-hover-mystic {
			&:hover {
				& > .closer {
					background: $color_gray_30;
				}
			}
		}
	}
	ul.media-list {
		li {
			& + li { border-top: 1px solid $color_mystic; }
		}
	}
}

.catalog-brand__model-list {
	h4 { margin-bottom: 10px; }
	.media-list {
		&:not(.hide) + .media-list { margin-top: 24px; }
		li {
			&:not(.hide):not(.title) + li { border-top: 1px solid $color_mystic; }
		}
	}
}

a.catalog-brand__model-card {
	border: 0;
	display: block;
	&.opacity-5 {
		&:hover {
			opacity: 1;
		}
	}
}
.catalog-brand__model-card {
	position: relative;
	margin: 0 -8px;
	&.overlink-hover-mystic {
		&:hover { cursor: pointer; }
	}

	.media-left { position: relative; z-index: 555; }

	.model-card__left {
		position: relative;
		z-index: 75;
		float: left;
		//height: 116px;
		padding: 8px;

		width: 166px;
		min-height: 116px;
		@media (max-width: 449px) {
			width: 128px;
			min-height: 92px;
		}
		@media (max-width: 359px) {
			width: 106px;
			min-height: 76px;
		}
		.card-img {
			display: block;
			width: 100%;
		}
		.img-aligner {
			background: #e5e4e5;
			width: 150px;
			height: 100px;
			@media (max-width: 449px) {
				width: 112px;
				height: 76px;
			}
			@media (max-width: 359px) {
				width: 90px;
				height: 60px;
			}
		}
		.img-aligner__img {
			max-width: 60%;
			max-height: 60%;
		}
		/*.model-card__drop {
			position: absolute; left: 100%;
			display: none;
			.card-img { display: block; width: 100%; height: auto; }
		}
		&:hover {
			.model-card__drop { display: block; }
		}*/
	}
	.model-card__body {
		position: relative;
		overflow: hidden;
		//margin-left: 170px;
		padding: 8px;
		color: $color_gray_80;
		//@media (max-width: 449px) { margin-left: 100px; }
	}

	.color-gray { color: $color_gray_40 !important; }
	.card-title {
		font-size: 1.4em;
		//font-weight: bold;
		line-height: 1.5em;
		@media (max-width: 767px){ font-size: 1em; }
		.brand { color: #9B9B9B; }
		.model { word-wrap: break-word; }
		.text-mark {
			background: $color_water;
			display: inline-block;
			padding: 0; margin: 0;
		}

	}
	.card-description {
		@media (max-width: 767px){ font-size: 0.8em; }
	}
	.card-counter {
		padding-top: 8px;
		span {
			background: #D5E6F6;
			display: inline-block;
			padding: 2px 4px;
			&.bg-yellow {
				background: $color_yellow;
				color: #000 !important;
			}
		}
		small {
			background: $color_light_violet;
			display: inline-block;
			padding: 1px 8px 2px;
			font-size: 12px;
			color: $color_dark_violet;
		}
	}
	/* ##### */

	&.overlink-hover-mystic {
		&:hover {
			.text-mark {
				background: $color_gray_03;
			}
			.card-counter {
				span {
					background: lighten($color_blue, 50%);
				}
				small {}
			}
		}
	}

	&.unsuitable {
		background: $color_gray_05;
		.model-card__left {
			opacity: 0.4;
		}
	}
}
//Model Card Popuper
//.model-card-popuper {
.model-card__drop {
	background: $color_gray_90;
	position: absolute;
	//left: 100%;
	z-index: 9999;
	padding: 8px;
	width: 466px;
	color: $color_white;
	display: none;
	@include box-shadow(0 0 8px $color_gray_70);
	@media (max-width: 991px) {
		display: none !important;
	}
	.highlight {
		//background: none !important;
		color: $color_gray_80;
	}
	.card-img {
		position: relative;
		display: block; width: 100%; height: auto !important;
		margin-top: 10px;
		img { display: block; width: 100%; height: auto; }
		.closer {
			background: $color_dark;
			background: rgba(0,0,0,0.5);
			top: 0; right: 0; z-index: 99;
			width: 48px; height: 48px;
			opacity: 1;
			&:before {
				background: $color_white;
				//left: 15%;
				width: 70%; height: 4px;
				//margin-top: -2px;
			}
			&:after {
				background: $color_white;
				//left: 15%;
				width: 70%; height: 4px;
				//margin-top: -2px;
			}
			&:hover {
				@include transform(rotate(0deg));
				&:before { background: $color_red; }
				&:after { background: $color_red; }
			}
		}
		&:first-child {
			margin-bottom: 5px; margin-top: 0;
			.closer {
				top: auto; bottom: 0;
			}
		}
	}
	.card-title {
		position: relative;
		overflow: hidden;
		font-size: 1.4em;
		line-height: 1.5em;
		white-space: nowrap;
		text-overflow: ellipsis;
		.brand { color: #9B9B9B; }
	}
	.card-description {
		.color-gray, .text-gray {
			color: $color_gray_30 !important;
		}
	}
	//.card-counter { display: none; }
	.card-counter {
		padding-top: 10px;
		padding-bottom: 4px;
		span {
			background: rgba(255,255,255,0.1);
			padding: 2px 4px;
			&.bg-yellow {
				background: $color_yellow;
				color: #000 !important;
			}
		}
	}
	.suitable {
		.text-primary {
			color: $white !important;
		}
	}
}

.catalog-brand__search-result, .catalog-brand__search-nothing {
	display: none;
	margin: 0 !important;
}

//product-preview
a.product-preview {
	border: 0;
}
.product-preview {
	position: relative;
	display: block;
	z-index: 1;
	.product-preview__link {
		border: 0 !important;
		display: block;
	}
	.product-preview__head {
		background: $color_white;
		border: 1px solid $color_white;
		position: relative;
		padding: 2px;
		.img-block {
			display: flex;
			align-items: center;
		}
	}
	.product-preview__body {
		padding: 0 4px;
	}
	.product-preview__marks {
		right: -1px;
	}
	.name {
		border: none;
		padding-top: 4px;
		font-size: 12px;
		font-weight: bold;
		color: $color_dark;
		line-height: 1.25;
		text-align: center;
		a {
			border: none;
			color: $color_dark;
		}
		em { font-style: normal; color: $color_gray_50; }
	}

	&:hover {
		.product-preview__head {
			//border-color: $color_gray_20;
			//@include box-shadow(0 0 10px $color_gray_20);
		}
		.name {
			color: $color_blue;
			//text-decoration: underline;
			a, em {
				color: $color_blue;
			}
		}
	}
}

.product-preview__marks {
	position: absolute; bottom: 100%; right: 0; z-index: 3;
	margin: 0 0 -12px 0; padding: 0; list-style: none;
	white-space: nowrap;
	li {
		display: inline-block;
		vertical-align: bottom;
		& + li { margin-left: 4px; }
	}
	.label {
		display: block;
		padding: 4px;
		font-size: 10px;
		font-weight: normal;
		@include border-radius(0);
	}
	.discount {
		border: none;
		position: relative;
		//margin-top: -6px;
		@media(min-width: 768px){
			margin-right: -6px;
		}
		display: block;
		padding: 2px 6px;
		font-size: 14px;
		font-weight: bold;
		line-height: 20px;
		&:before {
			content: '';
			position: absolute; top: 100%; right: 0;
			border: 4px solid transparent;
			transform-origin: 100% 0;
			@include transform(rotate(45deg));
		}
		&:hover {
			&:before {

			}
		}
		span {
			font-size: 12px;
			font-weight: normal;
		}
		&.warning {
			background: $color_yellow;
			color: $color_dark;
			&:before { border-right-color: darken($color_yellow, 15%); }
		}
		&.danger {
			background: $color_red;
			color: $color_white;
			&:before { border-right-color: darken($color_red, 15%); }
		}

		//
		&.delivery {
			z-index: 777;
			padding-top: 4px;
			padding-bottom: 4px;
			img {
				display: block;
				width: 35px;
			}
		}
	}

	.tooltip {
		opacity: 1 !important;
		.tooltip-inner {
			background: $color_body;
			width: 200px;
			max-width: 200px;
			color: $color_dark;
		}
		&.top {
			.tooltip-arrow {border-top-color: $color_body;}
		}
		&.bottom {
			.tooltip-arrow {border-bottom-color: $color_body;}
		}
		&.left {
			.tooltip-arrow {border-left-color: $color_body;}
		}
		&.right {
			.tooltip-arrow {border-right-color: $color_body;}
		}
	}
}

.catalog-product-preview {}

.catalog-product {
	h1, .h1, h2, .h2 {
		//max-width: 600px;
		margin-bottom: 32px;
		font-size: 34px;
		font-weight: normal;
		@media (max-width: 767px) {
			margin-bottom: 24px;
			font-size: 24px;
			font-weight: bold;
		}
		@media (max-width: 449px) {
			font-size: 22px;
		}
	}
	h3, .h3, h4, .h4 {
		font-size: 24px;
		@media (max-width: 767px) {
			font-size: 20px;
		}
	}
	h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
		a {
			border: none;
			color: $color_dark;
			text-decoration: none;
			&:hover {
				color: $color_blue;
			}
		}
	}
	.cpd-left {
		float: left;
		width: 320px;
		max-width: 100%;
		margin-bottom: 24px;
		@media (max-width: 1199px){ width: 230px; }
		@media (max-width: 991px){
			width: 440px;
			//padding-right: 32px;
		}
		@media (max-width: 767px){ float: none; width: auto; padding: 0; }

		&.sm {
			width: 230px;
			@media (max-width: 991px){ width: 320px; }
		}
	}
	.cpd-right {
		float: right;
		width: 275px;
		margin-bottom: 24px;
		@media (max-width: 767px){
			float: none;
			width: auto;
		}

		&.v2--cpd-right {
			background: #F5F7FA;
			@media(min-width: 450px){
				float: right;
				margin-left: 0 !important;
			}
			padding: 8px 8px 24px;
			.add-to-cart-button {
				@media(min-width: 768px){
					display: block;
				}
			}
		}
	}
	.cpd-center {
		position: relative;
		@media(min-width: 576px){
			overflow: hidden;
		}
		margin-bottom: 24px;
		padding: 0 32px;
		@media (max-width: 1199px){ padding: 0 24px; }
		@media (max-width: 991px){ padding: 0; }
	}

	.cpd-image {
		position: relative;
		max-width: 480px;
		margin-bottom: 4px;
		.cpd-image__quality {
			position: absolute; top: -10px; left: -10px;
			z-index: 5;
			display: block;
			width: 32px;
			img {
				display: block;
				width: 100%;
			}
		}
		.cpd-image__box {
			position: relative;
			.cpd-image__preview {
				/*background: $color_white;
				border: 1px solid $color_gray_20;*/
				border: 0;
				position: relative;
				display: block;
				/*.bg { display: block; width: 100%; }
				.img {
					position: absolute; top: 50%; left: 50%;
					display: block;
					max-width: 100%;
					max-height: 100%;
					@include transform(translateX(-50%) translateY(-50%));
				}*/
				.bg { display: none; }
				.img {
					display: block;
					max-width: 100%;
					margin: 0 auto;
					max-height: 400px;
					@media(max-width: 767px){
						max-height: 300px;
					}
				}
				.caption {
					background: $color_black;
					background: rgba(0,0,0,0.6);
					position: absolute; bottom: 0; right: 0;
					z-index: 2;
					display: block;
					padding: 2px 8px;
					color: $color_white;
				}

				&.square {
					.bg { display: block; width: 100%; }
					.img {
						position: absolute; top: 50%; left: 50%;
						display: block;
						width: auto;
						max-width: 100%;
						max-height: 100%;
						@include transform(translateX(-50%) translateY(-50%));
					}
				}
			}
			a.cpd-image__preview {
				&:hover {
					cursor: pointer;
					cursor: url(https://alvadi.ee/img/cascada/magnifier.cur), pointer;
				}
			}
			.cpd-image__big {
				background: $color_gray_90;
				position: absolute; top: 0; left: 100%;
				overflow: hidden;
				z-index: 555;
				width: 760px;
				@media (max-width: 1199px){ width: 660px; }
				/*@media (max-width: 991px){
					position: fixed; top: 0; left: 0;
					z-index: 999;
					width: 100%; height: 100%;
				}*/

				padding: 24px;
				display: none;
				text-align: center;

				.d-inline-block {
					position: relative;
					display: inline-block;
					margin: 0 auto;
					.closer {
						display: block;
						top: -20px;
						right: 0;
						@media (max-width: 991px) { top: -28px; }
					}
				}

				img {
					display: block;
					max-width: 100%;
					max-height: 500px;
					margin: 0 auto;
				}

				.closer {
					background: $color_white;
					top: 16px;
					right: 16px;
					width: 32px;
					height: 32px;
					&:before, &:after {
						background: $color_black;
					}
				}
				.Magic360 {
					position: absolute !important; top: 0; right: 0; bottom: 0; left: 0;
					display: block !important;
				}
				.Magic360-container {
					position: absolute !important; top: 0; right: 0; bottom: 0; left: 0;
					width: auto !important;
					display: block !important;
					max-width: none !important;
					.Magic360 { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; }
				}
				.m360-icon-fullscreen-open { display: none !important; }

				&.gif {
					.d-inline-block {
						@media (max-width: 991px) {
							top: 50%;
							@include transform(translateY(-50%));
						}
					}
				}
				&:not(.gif){
					.closer {
						@media (min-width: 992px){
							display: none;
						}
					}
					.d-inline-block {
						@media (max-width: 991px){
							position: relative;
							top: 50%;
							@include transform(translateY(-50%));
							//position: absolute; top: 0; right: 0; bottom: 0; left: 0;
						}
					}
					img {
						@media (max-width: 991px){
							/*position: absolute; top: 50%; left: 50%;
							display: block; width: auto; height: auto;
							max-width: 90%; max-height: 90%;
							@include transform(translateX(-50%) translateY(-50%));*/
						}
					}
				}
			}
			/*&:hover {
				cursor: url(https://alvadi.ee/img/cascada/magnifier.cur), pointer;
			}*/
			&.active {
				.cpd-image__big {
					display: block;
				}
			}
			&.open {
				.cpd-image__big {
					//background: #e6e6e6;
					background: rgba(255,255,255,0.95);
					position: fixed; top: 0; left: 0;
					z-index: 999;
					display: block;
					width: 100%; height: 100%;
					.closer {
						background: $color_dark;
						display: block;
						&:before, &:after {
							background: $color_white;
						}
					}
					.d-inline-block {
						position: relative;
						top: 50%;
						@include transform(translateY(-50%));
					}
				}
			}

			.watermark {
				position: absolute; top: 50%; left: 50%; z-index: 55;
				display: block;
				max-width: 90%;
				max-height: 90%;
				font-size: 22px;
				font-weight: bold;
				letter-spacing: 1px;
				color: $color_white;
				text-transform: uppercase;
				text-shadow: 0 0 3px $color_black;
				text-align: center;
				opacity: .75;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
	}

	.cpd-article {
		margin-top: 2px;
		font-size: 12px;
		color: $color_gray_30;
		i {
			@media (max-width: 767px){ display: none; }
			font-style: normal;
		}
		span {
			@media (min-width: 768px){ font-weight: bold; }
		}
	}

	.cpd-table-details {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		padding-top: 2px;
		table {
			border-collapse: inherit;
			tr {
				@media(max-width: 991px){
					&.tr-hightlight {
						td {
							background: #d5e9fc;
						}
					}
				}
				&.tr-bordered {
					position: relative;
					z-index: 5;
					outline: 2px solid $blue;
					td {
						background: #fff;
						border-bottom: 1px dashed transparent;
					}
				}
			}
			td {
				border-bottom: 1px dashed $color_gray_10;
				padding: 6px 8px 4px;
				vertical-align: top;
				@media(max-width: 575px){
					word-break: break-all;
				}
				&:first-child {
					width: 50%;
					&:first-letter {
						text-transform: uppercase;
					}
				}
				&:first-letter, & > *:first-letter {
					text-transform: uppercase;
				}
			}
			.tr-more {
				@media (min-width: 768px){
					display: none;
				}
				td {
					background: none !important;
					border: 0;
					padding-top: 8px;
				}
			}
			.tr-all {
				td {
					background: none !important;
					border: 0;
				}
			}
		}
		.text-highlight {
			background: #d5e6f6;
			display: inline-block;
			margin-left: -4px;
			padding: 2px 4px;
			//color: #00718e;
		}

		.cpd-table-details__buttons {
			padding: 12px 8px 0;
		}

		&:not(.visible){
			table {
				.tr-hide, .tr-more {
					@media (max-width: 767px) { display: none !important; }
				}
				.tr-all {
					@media (min-width: 768px) { display: none !important; }
				}
			}
		}
		&.visible {
			table {
				.tr-all {
					display: none !important;
				}
			}
			.js-cpd-table-details {
				&.show { display: none !important; }
				&.hide { display: inline-block !important; }
			}
		}
	}

	.cpd-table-details__buttons {
		position: relative;
		overflow: hidden;
		font-weight: 600;
		.pull-left {
			@media (min-width: 768px) { display: none; }
		}
		.pull-right {
			@media (min-width: 768px) { float: none !important; }
		}
	}

	.cpd-table-oem {
		td {
			padding: 4px 0 4px 48px;
			&:first-child {
				padding-left: 0;
			}
		}
	}

	.cpd-pricebox {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 13px;
		text-align: right;
		//@media (max-width: 767px){ padding-bottom: 24px; }
		& > li {
			& + li { margin-top: 8px; }
		}
		.cpd-pricebox__mobile {
			position: relative;
			overflow: hidden;
			.old {
				display: inline-block;
				vertical-align: middle;
				s {
					background: $color_gray_20;
					display: inline-block;
					vertical-align: top;
					padding: 2px 12px;
				}
				i {
					background: $color_body;
					display: inline-block;
					vertical-align: top;
					padding: 2px 8px;
					font-style: normal;
				}
			}
			.price {
				display: inline-block;
				vertical-align: middle;
				padding-left: 12px;
				strong {
					font-size: 20px;
					font-weight: 400;
					color: $color_blue;
				}
			}
		}
		.cpd-pricebox__desktop {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				display: inline-block;
				vertical-align: bottom;
				font-size: 12px;
				line-height: 1;
				&:not(:first-child){
					margin-left: 4px;
				}
				.cpd-pb-d__old {
					font-size: 16px;
					line-height: 18px;
					color: $gray;
				}
				.cpd-pb-d__label {
					display: inline-block;
					line-height: 14px;
					text-align: center;
				}
				.cpd-pb-d__current {
					span {
						font-size: 21px;
						line-height: 1;
					}
				}
			}
		}
		.cpd-pricebox__conditions {
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 12px;
			line-height: 1.25;
			& > li {}
		}
		.list-prices {
			width: 100%;
			tr {
				th {
					text-align: right;
				}
				td {
					padding: 8px 0;
					text-align: right;
					white-space: nowrap;
					&:not(:first-child){
						padding-left: 16px;
					}
					&:first-child {
						width: 2%;
					}
					&.td-button {
						width: 10%;
					}
					.label {
						white-space: nowrap;
						@include border-radius(0);
					}
					.btn {
						padding: 8px 12px 8px 10px;
						white-space: nowrap;
						span {
							margin-left: 8px;
							@media(max-width: 767px){
								display: none;
							}
						}
					}
				}
				&:not(:first-child){
					td {
						border-top: 1px solid #dde4ec;
					}
				}
			}
		}
	}
	.cpd-pricebox__get-delivery-price,
	a.cpd-pricebox__get-delivery-price {
		border: 0;
		font-weight: bold;
		color: $color_dark;
		text-decoration: none;
	}
	.cpd-pricebox-availability {
		//overflow: hidden;
		padding-bottom: 8px;
		text-align: right;
		white-space: nowrap;
		@media ( min-width: 575px ){ font-size: 14px; }
		table {
			white-space: nowrap;
			td {
				padding: 2px 4px;
			}
			.dropix { white-space: normal; }
		}
	}

	.cpd-deliver-to {
		font-size: 12px;
		font-weight: bold;
		@media (max-width: 575px){
			font-weight: normal;
			white-space: nowrap;
		}
		.label {
			padding: 2px 4px 3px;
			font-weight: bold;
			@include border-radius(0);
		}
	}

	&.responsive-md {
		.cpd-left {
			@media (max-width: 991px){ max-width: 220px; }
		}
		.cpd-center {
			@media (max-width: 1199px){ padding: 0; }
		}
	}

	&.sm {
		.cpd-left {
			width: 230px;
			@media (max-width: 991px){ width: 320px; }
		}
		.cpd-right {
			.btn-lg {
				padding: 8px 16px;
				font-size: 14px;
			}
		}
	}
	&.xs {
		.cpd-left {
			width: 230px;
			@media (max-width: 991px){ width: 320px; }
			@media (max-width: 767px){ float: left; width: 250px; }
			@media (max-width: 575px){ width: 150px; width: 40%; }
			@media (max-width: 449px){ width: 80px; width: 30%; }
		}
		.cpd-right {
			@media (max-width: 767px){ margin-left: 260px; }
			@media (max-width: 575px){ margin-left: 160px; margin-left: 40%; }
			@media (max-width: 449px){ margin-left: 90px; margin-left: 30%; }
			text-align: right;
			.btn-lg {
				padding: 8px 16px;
				font-size: 14px;
			}
		}
		.cpd-image {
			.cpd-image__box {
				.cpd-image__preview {
					.img {
						max-height: 250px;
						@media(max-width: 767px){
							max-height: 170px;
						}
					}
				}
			}
		}
	}
}

.catalog-product-list {
	position: relative;
	.loading {
		background: rgba(255,255,255,0.85);
		position: absolute;
		overflow: hidden;
		.spinner {
			top: 0;
		}
		&.overlay {
			position: absolute;
		}
	}
	.catalog-product {
		//& + .catalog-product { margin-top: 40px; }
		@media (max-width: 767px){
			//margin: 0 -12px;
			//padding: 40px 12px 4px;

			/*.cpd-left {
				float: left;
				width: 88px;
			}
			.cpd-right {
				overflow: hidden;
				//float: right;
				width: auto;
				text-align: right;
			}*/

			&:nth-of-type(odd){
				//background: $color_gray_05;
			}
		}
	}
}

.catalog-product-tabs {
	.nav-tabs-scroll {
		border-bottom: 2px solid #6E809A !important;
	}
	.nav-tabs {
		&:before {
			display: none !important;
			background: #6E809A;
			height: 2px;
		}
		& > li {
			//margin-bottom: -1px !important;
			&:before {
				display: none;
			}
			a {
				padding: 12px 16px;
				font-size: 16px;
				line-height: 24px;
				font-weight: normal;
				color: #394351;
				&:hover { color: $color_gray_50; }
			}
			&.active {
				& > a {
					background: #6E809A;
					background: -moz-linear-gradient(top, rgba(141,157,180,1) 0%, rgba(110,128,154,1) 100%);
					background: -webkit-linear-gradient(top, rgba(141,157,180,1) 0%,rgba(110,128,154,1) 100%);
					background: linear-gradient(to bottom, rgba(141,157,180,1) 0%,rgba(110,128,154,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d9db4', endColorstr='#6e809a',GradientType=0 );
					border: 1px solid #6E809A !important;
					color: $color_white !important;
					@include border-radius(5px 5px 0 0);
					&:before {
						display: none;
					}
				}
			}
		}
	}
}


.w-preview-products {
	position: relative;
	overflow: hidden;
	margin-left: -4px;
	margin-right: -4px;
	padding: 0;
	list-style: none;

	* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

	& > li {
		display: block;
		float: left;
		width: 33.3333%;
		padding: 0 4px 8px 4px;
		@media (max-width: 991px){ width: 50%; }
		@media (max-width: 575px){ width: 100%; }
	}

	.wpp-item {
		position: relative;
		border: 1px solid #e5e5e5;
		display: block;
		height: 56px;
		white-space: nowrap;
		color: $color_dark;
		@include transition(all .15s ease-in-out 0s);
		.wpp-item__img {
			position: relative;
			display: block;
			float: left;
			width: 80px;
			height: 48px;
			margin: 3px;
			img {
				position: absolute; top: 50%; left: 50%;
				display: block; max-width: 100%; max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.wpp-item__txt {
			position: relative;
			overflow: hidden;
			margin-left: 100px;
			margin-right: 4px;
			font-size: 14px;
			line-height: 52px;
			text-overflow: ellipsis;
		}
		&:hover {
			background: #d9e9f7;
			border-color: #c2d1dd;
		}
	}
}

.w-similar-products {
	.wsp__head {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 1.5;
	}
	.wsp__body {}
	.wsp__row {
		position: relative;
		margin-left: -8px;
		margin-right: -8px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		&:before, &:after { content: " "; display: table; }
		&:after { clear: both; }
		.wsp__col {
			float: left;
			width: 20%;
			margin-bottom: 24px;
			padding-left: 8px;
			padding-right: 8px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			@media (max-width: 991px){ width: 33.3333%; }
			@media (max-width: 575px){ width: 50%; }
		}
	}
	.wsp__item {
		border: 1px solid #e5e5e5;
		position: relative;
		display: block;
		padding: 8px;
		color: $color_dark;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		@include transition(all .15s ease-in-out 0s);
		.wsp__img {
			background: #fff;
			position: relative;
			.block { display: block; width: 100%; }
			.pic {
				position: absolute; top: 50%; left: 50%;
				display: block; width: auto; height: auto;
				max-width: 100%;
				max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.wsp__body {
			position: relative;
			overflow: hidden;
			min-height: 80px;
		}
		.wsp__title {
			position: relative;
			overflow: hidden;
			max-height: 32px;
			margin-top: 8px;
			font-size: 13px;
			line-height: 16px;
			color: #7F7F7F;
			a {
				border: none;
				color: #7F7F7F;
			}
			strong { color: $color_black; }
		}
		.wsp__description {
			position: relative;
			overflow: hidden;
			max-height: 32px;
			margin-top: 8px;
			font-size: 12px;
			line-height: 16px;
			color: $color_gray_60;
			text-transform: uppercase;
		}
		&:hover {
			background: #d9e9f7;
			border-color: #c2d1dd;
		}
	}
}

.w-model-popparts {
	.w-model-popparts__head {
		margin-bottom: 24px;
		font-size: 24px;
		.color-gray {
			margin-left: 4px;
			color: $color_gray_50 !important;
		}
	}
	.w-model-popparts__body {
		position: relative;
		//overflow: hidden;
		margin: 0 -12px;
		@media (max-width: 991px){
			margin: 0 -6px;
		}
	}
	.tile {
		display: block;
		float: left;
		width: 16.6666%;
		padding: 0 12px 24px;
		@media (max-width: 991px){
			padding: 0 6px 12px;
			width: 25%;
		}
		@media (max-width: 767px){
			width: 33.3333%;
		}
		@media (max-width: 449px){
			width: 50%;
		}
	}
	.item {
		border: 1px solid $color_gray_10;
		position: relative;
		display: block;
		.img-aligner {
			position: relative;
			background-color: $color_white;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
		}
		& > .img {
			position: relative;
			background-color: $color_white;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			margin-bottom: 8px;
			.bg {
				display: block;
				width: 100%;
			}
			.img {
				position: absolute; top: 50%; left: 50%;
				display: block;
				max-width: 100%;
				max-height: 100%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		.txt {
			padding: 6px 8px 8px;
			font-size: 14px;
			line-height: 18px;
			color: $color_blue;
			text-align: center;
			//&.text-left {}
			a, span {
				border: none;
				position: relative;
				overflow: hidden;
				display: block;
				height: 36px;
				color: inherit;
				@include transition(none);
			}
		}

		&.active, &:hover {
			background: $color_blue;
			border-color: $color_blue;
			.txt {
				color: $color_white;
			}
		}
	}

	&.type-a {
		.tile {
			width: 20%;
			padding: 0 8px 16px;
			@media (max-width: 1199px){
				width: 25%;
			}
			@media (max-width: 991px){
				width: 33.3333%;
			}
			@media (max-width: 767px){
				width: 33.3333%;
			}
			@media (max-width: 449px){
				width: 50%;
			}
		}
		.item {
			border: none;
			& > .img {
				border: 1px solid $color_gray_10;
				margin-left: -1px;
				margin-right: -1px;
			}
			.txt {
				color: $color_dark;
				a, span {
					color: $color_dark;
				}
			}
			&.active, &:hover {
				& > .img {
					&:before {
						content: '';
						background: $color_blue;
						position: absolute; top: 100%; left: 0; right: 0;
						height: 2px;
					}
				}
				.txt {
					color: $color_white;
					a, span {
						color: $color_white;
					}
				}
			}
		}
	}
}

.spare-parts-galline {
	position:relative;
	@media (min-width: 768px){ margin-bottom: 24px; }
	&:first-child {
		margin-top: -24px;
		margin-bottom: 24px;
		@media (max-width: 767px){
			margin-top: -12px;
			margin-bottom: 12px;
		}
	}
	&:before {
		content: '';
		background: $color_black;
		position: absolute; top: 0; right: -24px; bottom: 0; left: -24px;
		z-index: 2;
		opacity: 0.05;
		@media (max-width: 767px){
			right: -24px;
			left: -24px;
		}
	}
	ul {
		position: relative;
		overflow: hidden;
		margin: 0;
		padding: 12px 0;
		@media(max-width: 767px){ padding: 4px 0; }
		list-style: none;
		white-space: nowrap;
		li {
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 132px;
			height: 132px;
			@media (max-width: 1199px){
				width: 108px;
				height: 108px;
			}
			.spgl-bg { display: block; width: 100%; }
			.spgl-img {
				position: absolute; top: 50%; left: 50%;
				display: block;
				max-width: 100%;
				max-height: 100%;
				opacity: 0.5;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
	}

	&.v2 {
		@media (max-width: 767px) {
			margin-bottom: 0 !important;
		}
	}
}

.catalog-product-match {
	& + .catalog-product-match { margin-top: 40px; }
	.match-title {
		padding-bottom: 8px;
		font-size: 24px;
		text-transform: uppercase;
		span { margin-left: 8px; color: $color_gray_50; }
	}
	.match-more {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $color_blue;
		}
	}
	.match-table {
		position: relative;
		overflow-x: auto;
		padding-top: 12px;
	}
}

.catalog-product-match__brands {
	@media(min-width: 768px){
		.u-head {
			display: none;
		}
		.u-body {}
		.u-list {
			margin: 0 -2px 24px;
			padding: 0;
			list-style: none;
			li {
				display: inline-block;
				vertical-align: top;
				margin: 0 2px 8px;
				font-size: 16px;
				.labels {
					background: $color_gray_05;
					border: none;
					display: inline-block;
					padding: 5px 12px 6px;
					color: $color_gray_80;
					@include border-radius(3px);
					&:hover { background: $color_gray_20; }
					&.active { background: #b8e986; }
				}
			}
		}
	}
	@media(max-width: 767px){
		position: relative;
		margin-bottom: 16px;
		.u-head {
			background: $white;
			border: 1px solid rgba(0,0,0,.1);
			padding: 8px 16px;
			@include border-radius(3px);
			.fa {
				position: absolute; top: 50%; right: 8px;
				@include transform(translateY(-50%));
			}
			&:hover {
				cursor: pointer;
			}
		}
		.u-body {
			position: absolute; top: 100%; left: 0;
			z-index: 999;
			min-width: 100%;
			padding-top: 2px;
			display: none;
		}
		.u-list {
			background: $white;
			border: 1px solid rgba(0,0,0,.1);
			position: relative;
			overflow: hidden;
			margin: 0;
			padding: 0;
			list-style: none;
			@include border-radius(3px);
			@include box-shadow(0 2px 4px rgba(0,0,0,.15));
			li {
				display: block;
				font-size: 16px;
				&:not(:first-child){
					border-top: 1px solid rgba(0,0,0,.025);
				}
				.labels {
					background: none;
					border: none;
					display: block;
					padding: 7px 16px 8px;
					color: $color_gray_80;
					&:hover { background: $color_gray_20; }
					&.active { background: #b8e986; }
				}
			}
		}
		&.in {
			.u-body {
				display: block;
			}
		}
	}
}
.catalog-product-match__sort {
	background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00ffffff',GradientType=0 );
	border-top: 1px solid $color_gray_10;
	padding: 12px 8px;

	margin-left: -24px;
	margin-right: -24px;
	padding-left: 32px;
	padding-right: 32px;

	.sort-bottom {
		padding: 4px 0;
		text-align: center;
		@media(min-width: 768px){ display: none; }
		a {
			border: none;
			font-weight: bold;
			&.a { display: inline-block; }
			&.b { display: none; }
		}
	}
	.sort-body {
		margin-left: -8px;
		margin-right: -8px;
		@media(max-width: 767px){ display: none; }
		.sort-body-col {
			float: left;
			padding: 8px;
			&:first-child {
				width: 35%;
				@media (max-width: 991px){
					display: none;
				}
			}
			&:not(:first-child){
				width: 13%;
				@media (max-width: 991px){
					width: 20%;
				}
				@media (max-width: 767px){
					width: 50%;
				}
			}
		}
	}
	&.active {
		.sort-bottom {
			.a { display: none; }
			.b { display: inline-block; }
		}
		.sort-body { display: block; }
	}
}
.catalog-product-match__model {
	margin-bottom: 24px;
	.model-head {
		padding-left: 10px;
		font-size: 24px;
		color: lighten($color_blue, 10%);
		text-transform: uppercase;
	}
	.model-table {
		/*table, .table {
			width: 100%;
			thead td, th {
				background: $color_gray_03;
				border-top: 1px solid $color_gray_10 !important;
				border-bottom: 1px solid $color_gray_10 !important;
				font-weight: normal;
				padding: 4px 0 4px 16px !important;
				line-height: 1.5;
				&:first-child { padding-left: 0 !important; }
			}
			td {
				border-bottom: 1px solid $color_gray_10 !important;
				padding: 4px 0 4px 16px !important;
				&:first-child { padding-left: 0 !important; }
			}
			tr:hover td {
				background: $color_light_blue;
			}
		}*/

		.table {
			font-size: 13px;
			tr:hover td { background: transparent; }
			td {
				padding: 4px 10px;
				@media (max-width: 991px){
					display: none;
				}
				&:not(:first-child):not(.hidden){
					@media (min-width: 992px){
						width: 13%;
					}
				}
				&.hidden {
					@media (max-width: 991px){
						display: block !important;
						padding: 12px 8px !important;
						dl {
							margin: 0;
						}
					}
				}
			}
		}
		.highlight {
			background: $color_body;
			padding: 0;
		}
	}

	&.collapser-open {}
	&.sortix.shown {
		.collapser-body { display: block !important; }
	}
}

.catalog-product-match__head {
	margin-bottom: 24px;
	font-size: 18px;
}
.catalog-product-match__oem {
	margin-bottom: 24px;
	font-size: 14px;
	@media (max-width: 767px){
		position: relative;
		margin-left: -12px;
		margin-right: -12px;
		font-size: 13px;
	}
	@media (max-width: 449px){
		table { width: 100%; }
	}
	table {
		thead td, th {
			background: $color_gray_03;
			border-top: 1px solid $color_gray_10;
			border-bottom: 1px solid $color_gray_10;
			font-weight: normal;
			padding: 4px 12px;
		}
		td {
			border-bottom: 1px solid $color_gray_10;
			padding: 4px 12px;
		}
		tr:hover td {
			background: $color_light_blue;
		}
	}
	a {
		border-bottom-color: transparent;
	}
}

//p-catalog
.p-catalog {
	&:not(.invert){
		.p-catalog__side {
			@media (min-width: 768px){
				float: left;
				width: 16%;
				@media (max-width: 1199px){ width: 20%; }
				@media (max-width: 991px){ width: 24%; }
			}
		}
		.p-catalog__content {
			@media (min-width: 768px) {
				position: relative;
				float: left;
				width: 84%;
				@media (max-width: 1199px){ width: 80%; }
				@media (max-width: 991px){ width: 76%; }
				padding-left: 24px;
				padding-top: 0;
			}
		}
	}

	&.invert {
		@media (min-width: 768px) {
			display: flex;
		}
		.p-catalog__side {
			position: relative;
			order: 1;
			padding-top: 40px;
			@media (min-width: 768px) {
				width: 24%;
				min-width: 24%;
				margin-right: 24px;
				padding-top: 0;
			}
			@media (min-width: 992px){
				width: 20%;
				min-width: 20%;
			}
			@media (min-width: 1200px){
				width: 16%;
				min-width: 16%;
			}
		}
		.p-catalog__content {
			position: relative;
			order: 2;
		}
	}
}
.catalogSideSticky {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	.catalogSideSticky__head {}
	.catalogSideSticky__body {
		flex-grow: 1;
	}
}

.p-catalog__seo {
	margin-left: 16%;
	padding: 40px 0 0 24px;
	@media (max-width: 1199px){
		margin-left: 20%;
	}
	@media (max-width: 991px){
		margin-left: 24%;
	}
	@media (max-width: 767px) {
		margin-left: 0;
		padding: 24px 0 0 0;
	}
}

.p-catalogSeoBox {
	font-size: 16px;
	.p-catalogSeoBox__links {
		margin: 24px 0 0 0;
		padding: 0;
		list-style: none;
		& > dt {
			margin-bottom: 12px;
			font-weight: bold;
			@media(min-width: 768px){
				font-size: 22px;
			}
			@media(max-width: 767px){
				font-size: 18px;
			}
		}
		& > li, & > dd {
			& + li, & + dd {
				margin-top: 8px;
			}
		}
	}
	.p-catalogSeoBox__text {
		margin-top: 24px;
		p {
			margin-bottom: .75em;
		}
	}
}

.p-catalogSeoBox._margin {
	margin-left: 16%;
	padding-left: 24px;
	@media(max-width: 1199px){
		margin-left: 20%;
	}
	@media(max-width: 991px){
		margin-left: 24%;
	}
	@media(max-width: 767px){
		margin-left: 0;
		padding-left: 0;
	}
}

.pcsm-refine {
	&.in {
		.p-catalog-refine-message {
			position: relative;
			z-index: 999;
		}
		.p-catalog-refine-model {
			position: relative;
			z-index: 999;
		}
		.pcsm-refine-backdrop {
			background: rgba(0, 0, 0, 0.75);
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 998;
		}
	}
}

.p-catalog-refine-message {
	padding-bottom: 24px;
	.balloon {
		background: $color_light_blue;
		position: relative;
		display: inline-block;
		max-width: 100%;
		padding: 16px 24px 18px;
		font-size: 20px;
		line-height: normal;
		font-weight: bold;
		color: $color_dark;
		@include border-radius(3px);
		&:before {
			content: '';
			border: 16px solid transparent;
			border-top-color: $color_light_blue;
			position: absolute; top: 100%; left: 24px;
			//left: 50%;
			//margin-left: -16px;
		}
	}
}

.p-catalog-refine-model {
	background: $color_light_blue;
	padding: 20px 16px;
	font-size: 20px;
	@media (max-width: 575px) {
		background: transparent;
		padding: 0;
	}
	& > ul {
		position: relative;
		margin: 0 -4px;
		padding: 0;
		list-style: none;
		& > li {
			display: inline-block;
			vertical-align: middle;
			padding: 4px;
			@media (max-width: 575px){
				display: block;
			}
			&.waiting {
				position: relative;
				@media(min-width: 768px){
					min-width: 50px;
				}
				.spinner {
					@media(max-width: 767px){
						div {
							background-color: #fff !important;
						}
					}
					@media(min-width: 768px){
						position: absolute; top: 50%; left: 0;
						@include transform(translateY(-50%));
					}
				}
			}
			&._wide {
				.pseudo-select {
					@media(min-width: 768px){
						position: static !important;
					}
					.pseudo-select-drop {
						min-width: 100%;
						@media(min-width: 768px){
							left: 4px;
							right: 4px;
							margin-top: -3px;
							min-width: auto;
						}
					}
				}
			}
		}
	}

	/*.p-catalog-refine-model__item:nth-child(3) {
		.pseudo-select {
			.pseudo-select-drop {
				@media (min-width: 992px) and (max-width: 1199px){
					left: auto;
					right: 0;
				}
			}
		}
	}*/
}

.p-catalog-filter {
	margin-bottom: 40px;
	@media (max-width: 767px){
		margin-bottom: 0;
	}
	.p-catalog-filter__head {
		margin: 0;
		padding: 0;
		list-style: none;
		@media (max-width: 767px){
			display: none;
		}
		li {
			position: relative;
			display: inline-block;
			vertical-align: top;

			a, span {
				background: $color_gray_05;
				border: none;
				display: block;
				padding: 12px 32px;
				font-size: 16px;
				color: $color_dark;
				line-height: normal;
				@include border-radius(3px 3px 0 0);
			}
			.imark {
				//background: $color_green;
				background: url(../images/icons/newLabel.png) no-repeat 0 0 / 100% 100%;
				position: absolute; top: 0; right: 0;
				display: block;
				width: 48px;
				height: 48px;
				margin: -24px -24px 0 0;
				//font-size: 12px;
				//font-weight: bold;
				//font-style: normal;
				//color: $color_white;
				//text-align: center;
				//line-height: 48px;
				//@include border-radius(50%);
			}
			&.active {
				a, span {
					background: $color_light_blue;
					color: $color_blue;
				}
			}
		}
	}

	.p-catalog-filter__body {
		&:first-child {
			.p-catalog-filter__box {
				@include border-radius(3px);
			}
		}
		.p-catalog-filter__box {
			background: $color_light_blue;
			position: relative;
			padding: 24px 24px 16px;
			@include border-radius(0 3px 3px 3px);
			& > .closer {
				top: 12px;
				right: 12px;
				display: none;
			}
			.item-hide {
				@media (min-width: 768px){
					display: none;
				}
			}
			.p-catalog-filter-shorter {
				@media (max-width: 767px){
					display: none;
				}
				a {
					border-color: transparent;
				}
				.s { display: inline; }
				.h { display: none; }
			}

			.field {
				&.active {
					.form-control {
						background: $color_body;
					}
				}
			}

			&.wide {
				.item-hide {
					display: block;
				}
				.p-catalog-filter-shorter {
					.s { display: none; }
					.h { display: inline; }
				}
			}
		}
		.p-catalog-filter__button {
			@media (max-width: 767px){
				position: fixed; bottom: 12px; left: 50%;
			}
			@media (min-width: 768px){
				position: absolute; top: 12px; left: 50%;

				display: none !important;
			}
			@include transform(translateX(-50%));
			display: none;
			.button {
				background: $color_blue;
				position: relative;
				display: inline-block;
				//padding: 8px 20px 8px 16px;
				color: $color_white;
				white-space: nowrap;
				@include border-radius(24px);
				@include box-shadow(0 8px 8px lighten($color_blue, 50%));
				.p-catalog-filter-toggle {
					border: none;
					display: block;
					padding: 8px 20px 8px 16px;
					font-size: 16px;
					font-weight: 500;
					color: $color_white;
					.fa { margin-right: 4px; }
				}
				.filter-reset {
					//00a331
					background: $color_white;
					position: absolute; top: 50%; right: 8px;
					display: block; width: 24px; height: 24px;
					margin-top: -12px;
					@include border-radius(50%);
					&:before, &:after {
						content: '';
						background: #00a331;
						position: absolute; top: 50%; left: 50%;
						display: block; width: 65%; height: 2px;
					}
					&:before {
						@include transform(translateX(-50%) translateY(-50%) rotate(45deg));
					}
					&:after {
						@include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
					}
					i {
						background: $color_white;
						position: absolute; top: 0; bottom: 0; left: -12px;
						display: block; width: 1px;
					}
					&:hover {}
				}
				&.a { display: inline-block; }
				&.b {
					display: none;
					padding-right: 36px;
				}
				&:hover {
					background: lighten($color_blue, 10%);
				}
			}
		}

		.form-group {
			.form-label {
				position: relative;
				overflow: hidden;
				font-size: 12px;
				color: $color_blue;
				opacity: 0.75;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		@media (max-width: 767px){
			/*position: fixed; top: 0; left: 0; right: 0;
			z-index: 999;
			max-height: 100%;*/
			.p-catalog-filter__box {
				display: none;
				@include border-radius(0);
			}
			.p-catalog-filter__button {
				//display: block;
			}
		}
	}

	.p-catalog-filter-activity { display: none; }

	&.fix {
		/*@media (max-width: 767px){
			.p-catalog-filter__body {}
		}*/
		.p-catalog-filter__body {
			@media (max-width: 767px) {
				position: fixed; top: 0; left: 0; right: 0;
				z-index: 999;
				max-height: 100%;
			}

			//overflow-y: auto;
			@media (min-width: 992px) {
				left: 50%; right: auto;
				width: 940px;
				margin-left: -470px;
			}
			@media (min-width: 1200px) {
				width: 1140px;
				margin-left: -570px;
			}
			.p-catalog-filter__box {
				display: none;
				@include border-radius(0);
			}
			.p-catalog-filter__button {
				display: block;
			}
		}
		@media (min-width: 768px){

		}
	}

	&.open {
		.p-catalog-filter__body {
			overflow-y: auto;
			.p-catalog-filter__box {
				display: block;
			}
			.p-catalog-filter__button {
				display: none;
			}
		}
		&:not(.fix){
			.p-catalog-filter__body {
				.p-catalog-filter__box {
					& > .closer {
						@media (max-width: 767px) {
							display: block;
						}
					}
				}
			}
		}
		&.fix {
			.p-catalog-filter__body {
				.p-catalog-filter__box {
					//display: block;
					& > .closer { display: block; }
				}
			}
		}
	}

	&.active {
		.p-catalog-filter__body {
			.p-catalog-filter__button {
				.button {
					background: #00a331;
					@include box-shadow(0 8px 8px lighten(#00a331, 50%));
					.p-catalog-filter-toggle {}
					&.a { display: none; }
					&.b { display: inline-block; }
					&:hover {
						background: lighten(#00a331, 10%);
					}
				}
			}
		}
		.p-catalog-filter-activity { display: block; }
	}
}

.pseudo-select {
	position: relative;
	z-index: 55;
	font-size: 20px;
	line-height: 1.25em;
	.pseudo-select-link {
		background: $color_white;
		border: 1px solid $color_gray_20;
		position: relative;
		padding: 8px 36px 10px 16px;
		white-space: nowrap;
		@include border-radius(3px);
		.pseudo-select-text {
			position: relative;
			overflow: hidden;
			display: block;
			max-width: 100%;
			text-overflow: ellipsis;
		}
		.fa {
			position: absolute; top: 50%; right: 12px;
			display: block; height: 24px;
			margin-top: -12px;
			line-height: 24px;
		}
		&:hover {
			cursor: pointer;
		}
	}
	.pseudo-select-drop {
		background: $color_white;
		border: 1px solid $color_gray_20;
		position: absolute; top: 50%; left: 0;
		overflow: hidden;
		overflow-y: auto;
		max-height: 750px;
		margin-top: 1px;
		padding: 8px;
		@include border-radius(3px);

		opacity: 0;
		visibility: hidden;
		@include transition();

		@media (max-width: 575px){
			width: auto;
			min-width: 100%;
		}
	}

	.pseudo-select-val {
		border: none;
		display: inline-block;
		padding: 2px 4px;
		color: $blue;
		&:hover {
			background: $blue;
			color: $white;
			._power,
			._code {
				color: $white !important;
			}
		}
		&.disabled {
			color: $color_dark;
			opacity: 0.5;
		}
	}
	.pseudo-select-list {
		margin: 0 -2px;
		padding: 8px 0;
		list-style: none;
		@media (min-width: 575px){
			min-width: 480px;
		}
		@media (min-width: 992px){
			min-width: 520px;
		}
		li {
			display: inline-block;
			vertical-align: middle;
			padding: 4px 2px;
			a {
				display: block;
				min-width: 44px;
				padding: 4px 8px;
				text-align: center;
				@media(max-width: 1199px){
					padding-left: 16px !important;
					padding-right: 16px !important;
				}
			}
			&.active {
				a {
					background: $color_gray_20;
				}
			}
		}
		@media (max-width: 575px){
			margin: 0;
			li {
				position: relative;
				display: block;
				padding: 0;
				margin-left: -8px;
				margin-right: -8px;
				& + li {
					border-top: 1px solid $color_gray_05;
					/*&:before {
						content: '';
						background: $color_gray_05;
						position: absolute; top: 0; left: -8px; right: -8px;
						height: 1px;
					}*/
				}
				a {
					min-width: auto;
					padding: 12px 8px;
					text-align: left;
				}
			}
		}
	}
	.pseudo-select-dlist {
		position: relative;
		margin: 0;
		padding: 8px 0;
		list-style: none;
		& > li {
			position: relative;
			white-space: nowrap;
			& + li { margin-top: 8px; }
			.dlist-title {
				display: inline-block;
				vertical-align: top;
				min-width: 64px;
				padding: 4px 8px;
				font-weight: bold;
				@media(max-width: 1199px){
					padding-left: 16px !important;
					padding-right: 16px !important;
				}
				&:first-letter {
					text-transform: uppercase;
				}
			}
			.dlist-content {
				//margin-left: 64px;
				display: inline-block;
				vertical-align: top;
				white-space: nowrap;
				.pseudo-select-val {
					padding: 4px 8px;
					@media(max-width: 1199px){
						padding-left: 16px !important;
						padding-right: 16px !important;
					}
				}
			}
		}
		@media (max-width: 575px){
			& > li {
				margin-left: -8px;
				margin-right: -8px;
				.dlist-title {
					//float: none;
					display: block;
					width: auto;
					padding: 0 8px 16px;
				}
				.dlist-content {
					display: block;
					margin: 0;
					white-space: nowrap;
					.pseudo-select-val {
						border-top: 1px solid $color_gray_05;
						display: block;
						padding: 12px 16px;
					}
				}
			}
		}
	}
	.pseudo-select-table {
		padding-bottom: 8px;
		@media(max-width: 1199px){
			font-size: 18px;
			line-height: 1.25;
		}
		.pseudo-select-table-tr {
			display: block;
			@media(max-width: 1199px){
				padding: 12px 8px;
			}
			@media(min-width: 1200px){
				display: flex;
				padding: 0 !important;
			}
			&:first-child {
				@media(max-width: 1199px){
					padding: 4px 8px 12px;
				}
			}
			&:not(:first-child){
				border-top: 1px solid #f2f2f2;
			}
		}
		.pseudo-select-val {
			margin-left: -8px;
			margin-right: -8px;
			padding-left: 8px !important;
			padding-right: 8px !important;
			@media(max-width: 1199px){
				padding-left: 16px !important;
				padding-right: 16px !important;
			}
		}
		.pseudo-select-table-th {
			@media(max-width: 1199px){}
			@media(min-width: 1200px){
				padding: 12px 4px;
				font-weight: bold;
			}
			&._code {
				@media(max-width: 1199px){
					color: #9b9b9b;
					text-align: right;
				}
			}
		}
		.pseudo-select-table-td {
			display: block;
			@media(max-width: 1199px){}
			@media(min-width: 1200px){
				padding: 12px 4px;
			}
			&._code {
				color: #9b9b9b;
			}
		}

		&._col2 {
			@media(max-width: 1199px){
				min-width: 300px;
			}
			.pseudo-select-table-th,
			.pseudo-select-table-td {
				@media (min-width: 1200px) {
					width: 50%;
					min-width: 50%;
				}
			}
			._power {
				text-align: center;
				@media(max-width: 1199px){
					text-align: right;
				}
			}
		}
		&._col3 {
			@media(max-width: 1199px){
				min-width: 300px;
			}
			@media(min-width: 1200px){
				min-width: 480px;
			}
			.pseudo-select-table-th,
			.pseudo-select-table-td {
				@media (min-width: 1200px) {
					width: 33.3333%;
					min-width: 33.3333%;
				}
			}
			._power {
				text-align: center;
				@media(max-width: 1199px){
					text-align: right;
				}
			}
			._code {
				text-align: right;
				/*@media(max-width: 1199px){
				}*/
			}
		}
		&._col4 {
			._modification {
				@media(min-width: 1200px){
					width: 220px;
					min-width: 220px;
					padding-right: 16px !important;
				}
			}
			._body {
				flex-grow: 1;
			}
			._power {
				text-align: right;
				@media(min-width: 1200px){
					width: 180px;
					min-width: 180px;
					padding-left: 16px;
					text-align: center;
				}
			}
			._code {
				text-align: right;
				@media(min-width: 1200px){
					width: 200px;
					min-width: 200px;
					padding-left: 16px;
				}
			}
		}
	}

	&.need-action {
		.pseudo-select-link {
			background: rgb(36,129,211);
			background: -moz-linear-gradient(top, rgba(36,129,211,1) 0%, rgba(2,101,197,1) 100%);
			background: -webkit-linear-gradient(top, rgba(36,129,211,1) 0%,rgba(2,101,197,1) 100%);
			background: linear-gradient(to bottom, rgba(36,129,211,1) 0%,rgba(2,101,197,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2481d3', endColorstr='#0265c5',GradientType=0 );
			border-color: #03539c;
			color: $color_white;
		}
	}
	&.open {
		z-index: 777;
		.pseudo-select-link {
			z-index: 997;
		}
		.pseudo-select-drop {
			top: 100%;
			opacity: 1;
			visibility: visible;
			z-index: 997;
		}
		.pseudo-select-shadow {
			background: rgba(0,0,0,.65);
			position: fixed; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 995;
		}
	}
}

.w-cataloger-open {
	@media (max-width: 767px){
		overflow: hidden;
	}
}

.w-cataloger {
	.w-cataloger-select {
		background: -moz-linear-gradient(top, #e6e6e6 0%, #cccccc 100%);
		background: -webkit-linear-gradient(top, #e6e6e6 0%, #cccccc 100%);
		background: linear-gradient(to bottom, #e6e6e6 0%, #cccccc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#cccccc',GradientType=0 );
		border: 1px solid $color_gray_30;
		position: relative;
		padding: 6px 12px;
		@include border-radius(3px);
		@media (min-width: 768px){ display: none; }
		display: none !important;
		.fa-caret-down {
			position: absolute; top: 50%; right: 8px;
			display: block; height: 20px;
			margin-top: -10px;
			line-height: 20px;
		}
		&:hover {
			background: -moz-linear-gradient(top, #e6e6e6 0%, #b3b3b3 100%);
			background: -webkit-linear-gradient(top, #e6e6e6 0%, #b3b3b3 100%);
			background: linear-gradient(to bottom, #e6e6e6 0%, #b3b3b3 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#b3b3b3',GradientType=0 );
			cursor: pointer;
		}
	}

	.w-cataloger-box {
		.w-cataloger-box__head {
			padding-right: 32px;
			& > .closer {
				top: 24px; right: 24px;
			}
			@media (min-width: 768px) {
				display: none;
			}
		}
		.w-cataloger-box__body {}

		@media (max-width: 767px) {
			display: none;
			&.fix {
				background: $color_white;
				position: fixed; top: 0; right: 0; bottom: 0; left: 0;
				overflow-y: auto;
				z-index: 999;
				display: block;
				.w-cataloger-box__head {
					padding: 24px 24px 0;
				}
				.w-cataloger-box__body {
					padding: 16px 24px 24px;
				}
			}
		}
	}

	.w-cataloger-menu {
		margin: 0;
		padding: 0;
		list-style: none;
		a {
			transition: none;
		}
		@media (min-width: 768px) {
			margin-left: -4px;
		}
		& > li {
			@media (max-width: 767px) {
				& + li {
					//border-top: 1px solid $color_gray_10;
					position: relative;
					&:before {
						content: '';
						background: $color_gray_10;
						position: absolute; top: 0; left: -24px; right: -24px;
						height: 1px;
					}
				}
			}
			@media (min-width: 768px) {
				& + li {
					margin-top: 2px;
				}
			}
			& > .w-cataloger-menu__link {
				position: relative;
				& > a {
					@media (max-width: 767px) {
						border: none;
						position: relative;
						//overflow: hidden;
						display: block;
						padding: 8px 24px 8px 0;
						font-weight: bold;
						color: $color_dark;
						line-height: 1.5;
						.img-aligner {
							position: absolute; top: 50%; left: 0;
							@include transform(translateY(-50%));
							display: block;
							//float: left;
							width: 48px;
						}
						.title {
							display: block;
							margin-left: 60px;
						}
						.fa {
							position: absolute;
							top: 50%;
							right: 4px;
							display: block;
							height: 16px;
							line-height: 16px;
							margin-top: -8px;
						}
					}
					@media (min-width: 768px) {
						border: none;
						position: relative;
						display: block;
						padding: 2px 4px 3px;
						font-weight: bold;
						color: $color_dark;
						line-height: 18px;
						.img-aligner { display: none; }
						.title {}
						.fa { display: none; }
					}
				}
				& > .w-cataloger-menu__drop {
					@media (max-width: 767px) {
						display: none;
						ul {
							margin: 0;
							padding: 8px 0 16px 24px;
							list-style: none;
							li {
								& + li {
									margin-top: 12px;
								}
							}
						}
						.drop-title { display: none; }
						.w-cataloger-menu__link {
							& > a {
								border: none;
								position: relative;
								//overflow: hidden;
								display: block;
								padding-bottom: 2px;
								color: $color_dark;
								font-size: 14px;
								line-height: 1.25;
								.img-aligner {
									position: absolute; top: -5px; left: 0;
									//@include transform(translateY(-50%));
									@include transform(none);
									display: block;
									//float: left;
									width: 28px;
								}
								.title {
									display: block;
									margin-left: 36px;
								}
								&.active {
									font-weight: bold;
									color: $blue;
								}
							}
						}
					}
					@media (min-width: 768px) {
						background: $color_dark;
						position: absolute; top: 0; left: 100%; z-index: 9999;
						display: none;
						width: 510px;
						margin-left: 24px;
						padding: 8px 16px 16px;
						color: $color_white;
						@media (min-width: 992px) { width: 690px; }
						@media (min-width: 1200px) { width: 894px; }
						&.bottom {
							top: auto;
							bottom: 0;
							z-index: 999999;
						}
						ul {
							margin: 0;
							padding: 0;
							list-style: none;
							& > li {
								display: inline-block;
								vertical-align: top;
								width: 33.3333%;
								@media (min-width: 992px) { width: 25%; }
								@media (min-width: 1200px) { width: 20%; }
								padding: 16px 8px 8px;
							}
						}
						.drop-title {
							padding: 8px 8px 0;
							font-size: 20px;
							font-weight: bold;
						}
						.w-cataloger-menu__link {
							& > a {
								border: none;
								font-size: 14px;
								line-height: 16px;
								color: $color_white;
								text-align: center;
								.img-aligner {
									background: $color_white;
								}
								.title {
									display: block;
									padding-top: 8px;
								}
							}
							&:hover {
								opacity: 0.75;
							}
						}
					}
				}
				&:hover {
					@media (min-width: 768px) {
						z-index: 99;
						&:before {
							content: '';
							background: $color_dark;
							position: absolute; top: 0; bottom: 0; left: 100%;
							width: 24px;
						}
						&:after {
							content: '';
							background: transparent;
							position: absolute; top: 100%; right: -24px;
							display: block; width: 50%; height: 16px;
						}
						& > a {
							background: $color_dark;
							position: relative;
							color: $color_white;
							&:before, &:after {
								content: '';
								background: transparent;
								position: absolute; top: 100%; right: -24px;
								width: 24px; height: 56px;
							}
							&:after {
								right: 0;
								width: 32px;
								height: 36px;
							}
						}
						& > .w-cataloger-menu__drop {
							display: block;
						}
					}
				}
				&.open {
					@media (max-width: 767px) {
						& > a {
							.fa {
								@include transform(rotate(180deg));
							}
						}
						& > .w-cataloger-menu__drop {
							display: block;
						}
					}
				}
			}
			& > .w-cataloger-menu__sub {
				margin: 0;
				padding: 4px 0 4px 12px;
				list-style: none;
				@media ( max-width: 767px ){ display: none; }
				li {
					position: relative;
					& + li { margin-top: 4px; }
					a {
						border: none;
						display: block;
						padding: 2px 4px;
						font-size: 14px;
						line-height: 18px;
						color: $color_dark;
						&.active {
							background: #D9E9F7;
						}
					}
					.drop {
						background: $color_dark;
						position: absolute; top: 0; left: 100%; z-index: 9999;
						padding: 16px;
						display: none;
						.img-aligner {
							background: $color_white;
							display: block;
							width: 120px;
						}
					}
					&:hover {
						a {
							background: $color_dark;
							color: $color_white;
						}
						.drop {
							display: block;
						}
					}
				}
			}
		}
	}

}

.p-catalog-categories {
	.pcc-list {
		margin: 0 -6px;
		padding: 0;
		list-style: none;

		.pcc-item, a.pcc-item {
			border: none;
			position: relative;
			display: block;
			padding: 4px 24px 4px 6px;
			color: $gray_dark;
			line-height: 1.25;
			@include transition(none);
			.image {
				position: relative;
				display: block;
				display: none;
				.img {
					position: absolute; top: 50%; left: 50%;
					display: block;
					max-width: 100%;
					max-height: 100%;
					@include transform(translateX(-50%) translateY(-50%));
				}
			}
			.title {}
			.fa-angle-down {
				position: absolute; top: 50%; right: 6px;
				@include transform(translateY(-50%));
				display: none;
			}
			&.active {
				background: $blue_light;
			}
			&:hover, &.hover {
				background: $gray_dark;
				color: $white;
			}
		}

		& > li {
			position: relative;
			& > .pcc-item {
				.title {
					font-weight: bold;
				}
			}

			.pcc-sublist {
				margin: 0;
				padding: 0;
				list-style: none;
				display: none;
				& > li {
					//padding-left: 8px;
					& > .pcc-item {
						padding-left: 16px;
					}
				}
			}

			&.open {
				& > .pcc-item {
					.fa-angle-down {
						@include transform(translateY(-50%) rotate(180deg));
					}
				}
				.pcc-sublist {
					display: block;
				}
			}
		}
	}

	&.desktop {
		@media (max-width: 767px) {
			display: none;
		}
		.pcc-list {
			& > li {
				.drop-helper {
					background: $gray_dark;
					position: absolute; top: 0; bottom: 0; left: 100%;
					width: 20px;
				}
				.drop {
					//background: $gray_dark;
					position: absolute; top: 0; left: 100%;
					z-index: 999;
					//margin-left: 18px;
					width: 540px;
					padding-left: 18px;
					//padding: 16px;
					color: $white;
					@media (min-width: 992px) { width: 708px; }
					@media (min-width: 1200px) { width: 912px; }
					.pcc-sublist {
						background: $gray_dark;
						display: block !important;
						padding: 16px;
						& > li {
							display: inline-block;
							vertical-align: top;
							width: 33.3333%;
							@media (min-width: 992px) { width: 25%; }
							@media (min-width: 1200px) { width: 20%; }
							padding: 8px;
							text-align: center;
							& > .pcc-item {
								background: transparent;
								padding: 0;
								color: $white;
								.image {
									background: $white;
									display: block;
									margin-bottom: 8px;
									overflow: hidden;
									.bg {
										display: block;
										width: 100%;
									}
								}
								&:hover {
									opacity: 0.5;
								}
							}
						}
					}
				}
			}
		}
	}
	&.mobile {
		margin-bottom: 32px;
		@media (min-width: 768px) {
			display: none;
		}
		.pcc-list {
			.pcc-item, a.pcc-item {
				padding: 8px 8px 8px 64px;
				font-size: 16px;
				.image {
					position: absolute; top: 50%; left: 6px;
					display: block;
					width: 48px;
					height: 24px;
					margin-top: -12px;
				}
				.fa-angle-down {
					display: block;
				}
			}
			& > li {
				position: relative;
				&:not(:first-child){
					border-top: 1px solid $color_gray_10;
				}
				& > .pcc-item {
					.image {}
				}
				.pcc-sublist {
					& > li {
						& > .pcc-item {
							padding-left: 64px;
							.image {
								left: 26px;
								width: 28px;
								height: 28px;
							}
						}
					}
				}
			}
		}
	}
}

//widget categories-info
.categories-info {
	margin-bottom: 24px;
	h1 {
		font-size: 32px;
		font-weight: normal;
	}
	.categories-info-gallery {
		border-top: 1px solid $color_gray_10;
		border-right: 1px solid $color_gray_10;
		min-width: 320px;
		@media (max-width: 991px){ display: none; }
		.img-aligner {
			border-bottom: 1px solid $color_gray_10;
			border-left: 1px solid $color_gray_10;
		}
	}

	.categories-info__image {
		position: relative;
		overflow: hidden;
		width: 120px;
		max-height: 120px;
		img {
			display: block;
			width: 100%;
		}
	}
	.categories-info__title {
		margin: 0;
		font-size: 40px;
		font-weight: bold;
		@media(max-width: 1199px){ font-size: 36px; }
		@media(max-width: 991px){ font-size: 32px; }
		@media(max-width: 767px){ font-size: 24px; }
	}
	.categories-info__description {

	}
	.icontext {
		display: flex;
		.icon {
			padding-right: 12px;
			img {
				display: block;
			}
		}
		.text {
			flex-grow: 1;
			align-self: center;
		}
	}
}


//alvadi page carparts
.ap-carparts {
	.catalog-brand__head {
		@media (min-width: 768px) {
			margin-bottom: 24px;
			padding: 0;
		}
		@media(max-width: 767px){
			margin: 0 -12px;
			//margin: -12px -12px 0;
			//padding: 24px 12px 12px;
		}
		.icobox {
			padding-left: 64px !important;
			.ico { top: 0; }
			h1 {
				display: inline-block;
				margin: 0;
				font-size: 40px;
				line-height: 48px;
			}
			.link-change {
				border-color: transparent;
				display: inline-block;
				margin-left: 8px;
				color: $gray;
				&:hover {
					color: $blue;
				}
			}
			.addition { display: none; }

			@media (max-width: 767px){
				padding-left: 48px !important;
				.ico {
					width: 36px;
					height: 36px;
					font-size: 36px;
				}
				h1 {
					display: block;
					font-size: 24px;
					line-height: 36px;
				}
				.link-change { display: none; }
				.addition {
					display: block;
					padding-top: 4px;
				}
			}
		}
	}

	.js-sticky-row {
		& > .col-sm-3 {
			@media (min-width: 768px){
				width: 250px;
			}
		}
		& > .col-sm-9 {
			@media (min-width: 768px){
				width: calc(100% - 250px);
			}
		}
	}

	.catalog-brand__model-menu {
		border-color: $gray_light;
	}

	.catalog-brand__model-list {
		.media-list {
			margin: 0 !important;
			li {
				&.title {
					& + .sortix-item {
						border-top-color: transparent !important;
					}
				}
				&.sortix-item {
					border-top: 1px solid $gray_light;
				}
				&:not(.hide):not(.title) + li { border-top: 1px solid $gray_light; }
			}

			&.shown {
				li {
					&.sortix-item:first-child {
						border-top-color: transparent !important;
					}
				}
			}

			&:not(.hide) + .media-list {
				li {
					&.title {
						padding-top: 24px;
					}
				}
			}
		}
	}

	.cbm-h6 {
		@media (max-width: 767px){
			margin-bottom: 8px;
			font-size: 24px;
		}
		@media (min-width: 768px){
			margin-bottom: 4px;
			font-size: 16px;
			font-weight: bold;
			color: $gray;
		}
	}

	.catalog-brand__model-card {
		.card-title .brand {
			color: $gray;
		}
		.model-card__body {
			//color: $gray;
		}
		.card-counter {
			padding-bottom: 4px;
			span {
				background: $gray_light;
				padding: 1px 4px;
				&.bg-yellow {
					background: $color_yellow;
					color: #000 !important;
				}
			}
		}
		&.overlink-hover-mystic {
			&:hover {
				.card-counter {
					span {
						background: none;
					}
				}
			}
		}
	}

	.catalog-brand__model-viewed .catalog-brand__model-card > .closer {
		background: $gray;
		&:hover {
			background: $red;
		}
	}

	.catalog-brand__model-viewed ul.media-list li + li,
	.catalog-brand__model-list .media-list li:not(.hide):not(.title) + li {
		border-color: $gray_light;
	}
}

//TEST
.ap-carparts-v-2019-09-11 {
	.model-card__drop .card-title {
		font-size: 24px !important;
	}
	.ap-carparts {
		$uniq-gray : #a8a8a8;
		.catalog-brand__head .icobox .link-change {
			color: $uniq-gray;
			&:hover {
				color: $blue;
			}
		}
		.ap-carparts-h1 {
			margin-bottom: 16px;
			font-size: 24px;
			font-weight: bold;
		}
		.catalog-brand__model-card .card-title {
			font-size: 24px !important;
		}

		.cbm-h6,
		.catalog-brand__model-card .card-title .brand,
		.catalog-brand__model-card .model-card__body .card-description .text-gray,
		.catalog-brand__model-menu > ul li a .text-gray {
			color: $uniq-gray !important;
		}
	}
}

.p-catalog-request-results {
	.new {
		margin-bottom: 4px;
		@media (max-width: 767px) {
			margin-bottom: 32px;
		}
	}
	.result {
		margin-bottom: 32px;
		/*@media (max-width: 767px) {
			display: none;
		}*/
	}
}

.p-catalog-list-model {
	h1 {
		font-size: 34px;
		margin: 0;
		@media (max-width: 767px){
			display: none;
		}
	}
	.description {
		margin-bottom: 36px;
		@media (max-width: 767px){
			font-size: 18px;
			font-weight: bold;
		}
	}
	.list {
		margin: 0;
		padding: 0;
		list-style: none;
		& + .list {
			margin-top: 36px;
		}
		dt {
			margin: 0 0 8px;
			padding: 0;
			font-size: 16px;
			font-weight: bold;
		}
		dd, li {
			margin: 0;
			padding: 0;
			font-size: 14px;
			a {
				border-bottom-color: transparent;
				&:hover {
					border-bottom-color: rgba(13,97,171,0.3);
				}
			}
			&.more {
				padding-top: 8px;
				a {
					border: none;
					color: $gray_dark;
					&:hover {
						color: $blue;
					}
				}
			}
		}
		&.wide {
			.hide {
				display: block !important;
			}
			.more {
				display: none;
			}
		}
	}
}

//v2--cpd-pricebox
.catalog-product {
	.cp-pricebox {
		font-size: 12px;
		.cp-pricebox__body {
			background: #F5F7FA;
			padding: 16px 8px 24px;
		}
		.cp-pricebox__footer {
			margin-top: 6px;
			text-align: center;
		}
	}
	.cp-pricebox__list {
		margin: 0;
		padding: 0;
		list-style: none;
		& > li {
			&:not(:first-child){
				margin-top: 8px;
				&.margin-0 {
					margin-top: 0;
				}
				&.margin-4 {
					margin-top: 4px;
				}
				&.margin-12 {
					margin-top: 12px;
				}
			}
		}
	}
	.cp-pricebox__btn {
		&:not(:first-child){
			margin-top: 24px;
		}
		.btn {
			min-width: 200px;
			padding: 8px 16px;
		}
	}
	.cpp-price {
		white-space: nowrap;
		.cpp-price__discount {
			margin-right: 4px;
			s {color: $color_gray_60;}
			i {display: none;}
			@media (max-width: 767px){
				position: relative;
				top: 6px;
				overflow: hidden;
				display: inline-block;
				margin-right: 8px;
				vertical-align: top;
				line-height: 21px;
				s {
					background: $color_gray_20;
					display: block;
					float: left;
					padding: 0 8px;
				}
				i {
					background: #FFE180;
					display: block;
					float: left;
					padding: 0 8px;
					font-style: normal;
				}
			}
		}
		.cpp-price__label {
			margin-right: 2px;
			@media (max-width: 767px){
				display: none;
			}
		}
		.cpp-price__price {
			font-size: 21px;
			font-weight: bold;
			color: $blue;
		}
		.cpp-price__currency {}
	}
	.link-tile {
		background: $color_light_green;
		border: none;
		display: inline-block;
		padding: 1px 4px 3px;
		color: $white;
		span, strong {
			display: inline-block;
			line-height: normal;
			border-bottom: 1px dashed $white;
		}
	}
	span.link-tile {
		span, strong {
			border-bottom-color: transparent;
		}
	}
	.text-dash {
		border-bottom: 1px dashed $color_gray_60;
	}

	&.v2--catalog-product {
		.cpd-left {
			@media (max-width: 575px) {
				background: #F5F7FA;
				position: relative;
				overflow: hidden;
				float: none;
				width: auto;
				max-width: none;
				margin: 0;
				padding: 8px;
				.cpd-image {
					background: $white;
					max-width: none;
					.cpd-image__box {
						max-width: 320px;
						margin: 0 auto;
					}
				}
			}
		}
		.cpd-right {
			@media (max-width: 575px) {
				margin-left: 0;
				.cp-pricebox {
					.cp-pricebox__body {
						padding-top: 0;
					}
				}
			}
		}
	}

	&.v3--catalog-product {
		.cpd-left {
			@media (max-width: 575px) {
				position: relative;
				overflow: hidden;
				float: none;
				width: auto;
				max-width: 320px;
				margin: 0 auto;
				padding: 8px;
			}
		}
		.cpd-right {
			@media (max-width: 575px) {
				max-width: 320px;
				margin: 0 auto 24px;
			}
		}
	}
	&.v4--catalog-product {
		.cp-pricebox {
			.cp-pricebox__body {
				background: none !important;
				padding: 0 !important;
			}
		}
	}
	&.v5--catalog-product {
		.cpd-left {
			@media (max-width: 575px) {
				background: #F5F7FA;
				position: relative;
				overflow: hidden;
				float: none;
				width: auto;
				max-width: none;
				margin: 0;
				padding: 2px;
				.cpd-image {
					background: $white;
					max-width: none;
					.cpd-image__box {
						max-width: 320px;
						margin: 0 auto;
					}
				}
			}
		}
		.cpd-right {
			@media (max-width: 575px) {
				margin-left: 0;
				margin-bottom: 0;
				.cp-pricebox {
					.cp-pricebox__body {
						padding-top: 0;
					}
				}
			}
		}
		.cpd-center {
			@media (max-width: 575px) {
				border: 2px solid #F5F7FA;
				padding: 8px;
			}
		}
	}
}

.aimbox-hidden-xs {
	.aimbox.preview {
		@media (max-width: 575px) {
			display: none !important;
		}
	}
}

.cpd-recommend {
	.cpd-recommend__list {
		//margin: 0 0 8px 262px;
		@media (max-width: 1199px) {
			//margin: 0 0 16px;
		}
		padding: 0;
		list-style: none;
		white-space: nowrap;
		& > li {
			display: inline-block;
			vertical-align: middle;
			&:not(:first-child){
				margin-left: 4px;
			}
		}
	}
}

//stickyBox
.stickyBox {
	position: relative;
	.stickyBox__separate {}
	.stickyBox__head {
		z-index: 555;
		max-width: 100%;
		&.stateFixed, &.stateAbsolute {
			.catalog-product-match__sort {
				background-color: #fff;
				position: relative;
				margin-left: -24px;
				margin-right: -24px;
				padding-left: 32px;
				padding-right: 32px;
				//@include box-shadow(0 0 8px #999999);
				//@include border-radius(0 0 3px 3px);
				&:before {
					content: '';
					background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(125,185,232,0) 100%);
					background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
					background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(125,185,232,0) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#007db9e8',GradientType=0 );
					position: absolute; top: 100%; left: 0; right: 0;
					height: 8px;
					opacity: .15;
				}
			}
		}
	}
	.stickyBox__body {}
}

//mark-paired
.mark-paired {
	display: flex;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.25;
	.mark-paired__count {
		background: #7e93b2;
		padding: 6px 8px;
		color: #fff;
		white-space: nowrap;
		@include border-radius(3px);
		&:first-child:not(:last-child) {
			@include border-radius(3px 0 0 3px);
		}
		&:last-child:not(:first-child) {
			@include border-radius(0 3px 3px 0);
		}
	}
	.mark-paired__label {
		background: #d5e6f6;
		padding: 6px 8px;
		color: #333;
		@include border-radius(3px);
		&:first-child:not(:last-child) {
			@include border-radius(3px 0 0 3px);
		}
		&:last-child:not(:first-child) {
			@include border-radius(0 3px 3px 0);
		}
	}
	&.inline {
		display: inline-flex;
	}
	.catalog-product & {
		margin-bottom: 4px;
	}
	.p-cart-table & {
		font-size: 12px;
		.mark-paired__count,
		.mark-paired__label {
			padding: 3px 6px 4px;
		}
	}
}


//
.brand-model-card-ids {
	z-index: 999;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	@media(min-width: 992px){
		position: absolute; bottom: 27px; right: 0;
	}
	& > li {
		border: 0 !important;
		margin: 0;
		padding: 1px 4px;
		&:not(:first-child){
			margin-left: 4px;
		}
		&.id {
			color: #772397;
		}
		&.empty {
			color: #c0c0c0;
		}
		&.form {}
		&.filled {
			color: #772397;
			* {
				margin-left: 6px;
			}
		}
		.--toggle {
			border: 0;
			font-weight: bold;
			color: #c0c0c0 !important;
			&:hover {
				color: $blue !important;
			}
		}
	}
	form {
		.form-group {
			display: flex;
			.form-field {
				input {
					width: 120px;
					height: 24px;
					padding: 2px 8px;
				}
			}
			.form-btn {
				.btn {
					margin-left: 8px;
					padding: 2px 12px;
					font-size: 10px;
					font-weight: bold;
					text-transform: uppercase;
				}
			}
			.form-cancel {
				margin-left: 4px;
				align-self: center;
				.closer {
					position: relative;
					top: auto; right: auto;
				}
			}
		}
	}
	&._empty {
		li.id {}
		li.empty {}
		li.form {display: none;}
		li.filled {display: none;}
	}
	&._form {
		li.id {}
		li.empty {display: none;}
		li.form {}
		li.filled {display: none;}
	}
	&._filled {
		background: #F2E5F5;
		li.id {}
		li.empty {display: none;}
		li.form {display: none;}
		li.filled {}
	}
}

.p-catalog-text {
	padding-top: 48px;
	font-size: 16px;
	@media (min-width: 768px){
		margin-left: 16%;
		padding-left: 24px;
	}
	h2 {
		margin-bottom: 4px;
		font-size: 16px;
	}
	ul {
		margin: 0 0 16px 0;
		padding: 0;
		list-style: none;
		& > li {
			position: relative;
			padding-left: 20px;
			&:before {
				content: '';
				background: $color_dark;
				position: absolute; top: 12px; left: 8px;
				display: block;
				width: 4px;
				height: 4px;
				@include border-radius(50%);
			}
		}
	}
	p {
		margin-bottom: 16px;
	}
}

#modal-cartAddWCheck {
	.modal-dialog {
		margin-top: 48px;
		margin-bottom: 48px;
	}
}
.pcsm-refine-modal {
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-height: 450px;
	@media(min-width: 576px){
		padding: 32px 8px;
	}
	.pcsm-refine-h {
		margin-bottom: 16px;
		font-size: 22px;
		font-weight: bold;
		color: $blue;
	}
	.pcsm-refine-modal-card {
		background: #e9e9e9;
		display: flex;
		.card__image {
			width: 180px;
			min-width: 180px;
			@media(max-width: 767px){
				width: 80px;
				min-width: 80px;
			}
			img {
				display: block;
				width: 100%;
			}
		}
		.card__body {
			padding: 12px 16px;
			font-size: 20px;
			@media(max-width: 767px){
				padding: 8px 12px;
				font-size: 16px;
			}
		}
		&.success {
			background: #e8ffd3;
		}
		&.danger {
			background: #ffeaea;
		}
	}
	.pcsm-refine-modal-info {
		position: relative;
		padding-left: 196px;
		font-size: 20px;
		@media(max-width: 767px){
			padding-left: 92px;
			font-size: 16px;
		}
		.info__icon {
			position: absolute; top: -4px; left: 144px;
			display: block;
			width: 36px;
			@media(max-width: 767px){
				top: -2px;
				left: 56px;
				width: 24px;
			}
		}
	}
}