/*===================================================================================*/
/*  PRODUCT-ITEM
/*===================================================================================*/
li.product {

	&:hover, &.hover {
		z-index: 999;
		position: relative;

		.product-inner {
			position: absolute;
			width: 100%;
			height: auto;
			min-height: 100%;
			box-shadow: 0px 0px 6px 0px rgba(1, 1, 1, 0.3);
			background-color: #fff;
		}

		.hover-area {
			display: block;
			padding-top: 0.214em;
			border-top: 1px solid #eaeaea;
		}
	}

	.product-inner {
		padding: 1.429em 1.714em 1.357em 1.714em;
		height: 100%;
		position: relative;
	}

	.hover-area {
		display: none;
		border: none;
		position: relative;
		text-align: center;
		background-color: #FFF;

		.button {
			position: absolute;
			top: -20px;
			left: 50%;
			white-space: pre;
			@include transform(translateX(-50%));

			&:hover, &:active, &:focus {
				color: #fff;
			}
		}

		.action-buttons {
			width: 100%;
			text-align: center;
			font-size: 0.929em;
			line-height: 1.385em;

			.clear {
				display: none;
			}

			div, a, span, p {
				margin: 0;
				padding: 0;
				color: #949494;
			}

			> div, > a {
				display: inline-block;
				margin: dir-values(0 5px);
				padding-top: 0.571em;
			}

			a:hover {
				color: #3b3b3b;
			}
		}
	}

	.loop-product-categories {
		display: block;
		margin-bottom: 1em;
		font-size: 0.857em;
		line-height: 1.05em;
		height: 1.05em;
		color: #878787;
		overflow: hidden;

		a {
			color: #878787;

			@include hover-focus {
				text-decoration: none;
				color: #333;
			}
		}
	}

	a {
		color: $product-title-color;

		@include hover-focus {
			text-decoration: none;
		}
	}

	h3 {
		font-size: 1.071em;
		line-height: 1.286em;
		font-weight: bold;
		height: 2.572em;
		overflow: hidden;
	}

	.product-thumbnail {
    	margin-bottom: 0.714em;
		position: relative;
		width: 100%;
		padding-bottom: 93.01%;
		float: $start;
		height: 0;

		img {
			transform-style:flat;
		}
	}

	.product-rating {
		clear: both;
		@include clearfix;
		margin-bottom: 1.667em;
		font-size: 0.857em;
		color: #7d7d7d;

		.star-rating {
			display: inline-block;
		}
	}

	.product-short-description {
		clear: both;
		@include clearfix;
		color: #7d7d7d;
		font-size: 0.857em;
		line-height: 1.75em;
		margin-bottom: 3em;
		height: 7em;
		overflow: hidden;

		ul {
			padding-#{$start}: 15px;
		}
	}

	.product-sku {
		font-size: 0.857em;
		color: #7d7d7d;
		margin-bottom: 0.5em;
	}

	.wp-post-image {
		width: 100%;
		position: absolute;
		left: 0;
		@include img-fluid( inline-block );
		margin: 0 auto;
		vertical-align: middle;
		max-height: 100%;
	}

	.price-add-to-cart {
		clear: both;
		@include clearfix;
		margin-bottom: 0.929em;
		position: relative;

		.electro-price {
			line-height: 36px;
		}

		> .price {
			display: block;
			float: $start;
			width: calc( 100% - 41px );
			white-space: nowrap;
		}
	}

	.price {
		color: #343f49;
		font-size: 1.429em;
		line-height: 1.286em;
		font-weight: normal;

		ins, del {
			text-decoration: none;
		}

		ins {
			color: #ee0000;
		}

		del {
			color: #848484;
			font-size: 0.6em;
			line-height: 1.5em;
		}

		del .amount {
			text-decoration: line-through;
		}
	}

	.added_to_cart, .button {
		// //font-size: 0;
		// float: $end;
		// background-color: transparent;
		// text-indent: -9999px;
		// padding: 0;

		width: 35px;
		text-indent: -9999px;
		height: 35px;
		position: relative;
		padding:0;
		border-radius: 50%;

		// @include hover-focus {
		// 	background-color: transparent;
		// }

		&::before {
			display: inline-block;
			color: #fff;
			// @include fa-icon();
			// //font-family: "font-electro";
			// background-color: #e6e6e6;
			// border-radius: 50%;
			// color: #fff;
			// font-size: 18px;
			// padding: 0.5em 0.433em;
		}
	}

	.added_to_cart {
		&::before {
			content: "\f178";
			padding: 0.5em 0.504em;
			float: $end;
			text-indent: 0;
		}
	}

	.button {
		&.add_to_cart_button {
			&::before {
				content: "\61";
				font-family: "font-electro";
				float: $end;
			    text-indent: 0;
				background: none;
				transform: translate(-50%, -50%);
				top: 50%;
				left: 50%;
				position: absolute;
				font-size: 18px;
				padding:0;
			}
		}

		&.product_type_variable {
			&::before {
				content: "\f0a6";
				padding: 0.5em 0.575em;
				font-family:'FontAwesome';
			}
		}

		&.product_type_external {
			&::before {
				content: "\f08e";
				padding: 0.5em 0.504em;
			}
		}

		&.added {
			display: none;
		}
	}
}

.action-buttons a:hover {
	color: #3b3b3b;
}
