@import "variables";
.w-related-categories {
	@media (min-width: 768px) {
		background: $color_gray_05;
		margin-bottom: 24px;
		padding: 18px 24px;
	}
	.w-related-categories__head {
		margin-bottom: 24px;
		h2 {
			margin: 0;
			font-size: 24px;
			font-weight: bold;
		}
		@media (min-width: 768px) {
			.image {
				display: none;
			}
			.fa {
				display: none;
			}
		}
		@media (max-width: 767px) {
			position: relative;
			border-bottom: 1px solid $color_gray_05;
			margin: 0 -6px;
			padding: 8px 8px 8px 64px;
			cursor: pointer;
			.image {
				position: absolute; top: 50%; left: 6px;
				overflow: hidden;
				display: block; width: 48px; height: 24px;
				margin-top: -12px;
				img {
					position: absolute; top: 50%; left: 50%;
					display: block;
					width: 100%;
					//max-height: 100%;
					@include transform(translateX(-50%) translateY(-50%));
				}
			}
			h2 {
				font-size: 16px;
			}
			.fa {
				position: absolute; top: 50%; right: 6px;
				@include transform(translateY(-50%));
			}
			&:hover {
				background: $color_dark;
				color: $white;
				h2 {
					color: $white;
				}
			}
		}
	}
	.w-related-categories__body {
		@media (min-width: 768px) {
			position: relative;
			margin: 0 -16px;
		}
		@media (max-width: 767px) {
			display: none;
		}
		//@media (max-width: 991px){}
		a {
			@include transition(none);
		}
	}
	.w-related-categories__list {
		margin: 0;
		padding: 0;
		list-style: none;
		@media (max-width: 767px) {
			position: relative;
			margin: 0 -6px;
		}
		& > li {
			display: block;
			float: left;
			width: 20%;
			padding: 0 8px 16px;
			@media (max-width: 1199px){
				width: 25%;
			}
			@media (max-width: 991px){
				width: 33.3333%;
			}
			@media (max-width: 767px){
				float: none;
				width: auto;
				padding: 0;
			}
			@media (min-width: 768px){
				.item {
					position: relative;
					padding-bottom: 8px;
					& > .image {
						position: relative;
						overflow: hidden;
						background-color: $color_white;
						background-repeat: no-repeat;
						background-position: 50% 50%;
						background-size: cover;
						border: 1px solid $color_gray_10;
						margin-left: -1px;
						margin-right: -1px;
						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 {
						position: relative;
						overflow: hidden;
						height: 36px;
						padding: 0 8px;

						font-size: 14px;
						line-height: 18px;
						color: $color_blue;
						text-align: center;
						a {
							border: none;
							color: $color_dark;
							@include transition(none);
						}
					}

					&.active, &:hover {
						background: $color_blue;
						border-color: $color_blue;
						& > .img {
							&:before {
								content: '';
								background: $color_blue;
								position: absolute; top: 100%; left: 0; right: 0;
								height: 2px;
							}
						}
						.txt {
							a {
								color: $color_white;
							}
						}
					}
				}
			}
			@media (max-width: 767px){
				.item {
					position: relative;
					padding: 8px 8px 8px 64px;
					.product-preview__marks {
						display: none;
					}
					& > .image {
						position: absolute; top: 50%; left: 26px;
						overflow: hidden;
						background-color: $color_white;
						background-repeat: no-repeat;
						background-position: 50% 50%;
						background-size: cover;
						//border: 1px solid $color_gray_10;
						width: 28px; height: 28px;
						margin-top: -14px;
						.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 {
						a {
							border: none;
							color: $color_dark;
						}
					}

					&.active {}
					&:hover {
						background: $color_dark;
						.txt {
							a {
								color: $white;
							}
						}
					}
				}
			}
		}
	}

	&.open {
		@media (max-width: 767px){
			.w-related-categories__head {
				.fa {
					@include transform(translateY(-50%) rotate(180deg));
				}
			}
			.w-related-categories__body {
				display: block;
			}
		}
	}
}