/*===================================================================================*/
/*  Product Categories
/*===================================================================================*/

.jumbotron-product-category {
	background-color: #f5f5f5;
	margin-bottom: 2.143em;
	padding: 4.286em 4.286em 3.609em 4.286em;

	.jumbo-title {
		color: $color-body;
		font-size: 3.214em;
		line-height: 1em;
		text-transform: uppercase;
		font-weight: 100;
	}

	.jumbo-subtitle {
		color: #7e7e7e;
		line-height: 1.5em;
		margin-bottom: 0;
	}

	.jumbo-image {
		margin-#{$end}: -3.143em;
		margin-top: -4.286em;
	}
}

.product-loop-categories {
	padding-#{$start}: 0;
	margin-bottom: 0;
	list-style: none;
	@include make-row();

	.product-category {
		@include make-col();
		margin-bottom: 5.357em;
		text-align: center;
		padding-top: 15px;
		padding-bottom: 15px;
		margin-top: -15px;

		> a {
			display: block;
			color: $color-body;

			@include hover-focus {
				color: $color-body;
			}
		}

		img {
			@include img-fluid();
			margin: 0 auto 1.429em auto;
		}

		h3 {
			font-size: 1.286em;
			font-weight: normal;
			height: 1.286em;
			margin-bottom: 0;
		}

		.count {
			background-color: transparent;
			color: inherit;
			display: none;
		}

		&::after {
			content: '';
			border-#{$end}: 1px solid #eaeaea;
			position: absolute;
			height: 100%;
			width: 1px;
			top: 0;
			#{$end}: 0;
		}

		&.last::after, &:last-child::after {
			content: none;
		}

		&:hover {
			box-shadow: 0px 0px 6px 0px rgba(1, 1, 1, 0.3);

			&::after {
				content: none;
			}
		}
	}
}

.columns-1 .product-loop-categories > .product-category {
	@include media-breakpoint-up(md) {
		@include make-col-span(12);
	}
}

.columns-2 .product-loop-categories > .product-category {
	@include media-breakpoint-up(md) {
		@include make-col-span(6);
	}
}

.columns-3 .product-loop-categories > .product-category {
	@include media-breakpoint-up(md) {
		@include make-col-span(4);
	}
}

.product-loop-categories > .product-category,
.columns-4 .product-loop-categories > .product-category {
	@include media-breakpoint-up(md) {
		@include make-col-span(3);
	}
}

.columns-5 .product-loop-categories > .product-category {
	@include media-breakpoint-up(md) {
		width: 20%;
	}
}

.columns-6 .product-loop-categories > .product-category {
	@include media-breakpoint-up(md) {
		@include make-col-span(2);
	}
}