.product
{
	width: calc(20% - 16px);
	float: left;
	position: relative;
	border: 1px solid var(--product-card-border-color);
	border-radius: 6px;
	margin-bottom: 20px;
	transition: 0.3s ease;
}
.product a
{
	width: 100%;
	height: 100%;
	float: left;
	cursor: pointer;
}
.product-badge
{
	width: 64px;
	height: 25px;
	position: absolute;
	top: 5px;
	left: 5px;
	font-size: 10px;
	text-align: center;
	line-height: 25px;
	user-select: none;
	z-index: 1;
}
.product-badge span
{
	width: 100%;
	height: 100%;
	float: left;
	border-radius: 3px;
}
.product-favourite
{
	width: 40px;
	height: 40px;
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: var(--product-card-favourite-bgcolor);
	border-radius: 100%;
	cursor: pointer;
	z-index: 1;
	box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.05);
}
.product-favourite span
{
	width: 100%;
	height: 100%;
	float: left;
	padding: 10px;
}
.product-favourite i
{
	width: 100%;
	height: 100%;
	float: left;
	background-color: var(--product-card-favourite-icon-border-color);
	-webkit-mask-size: 100% 100% !important;
}
.filled-heart i
{
	background-color: var(--product-card-favourite-icon-bgcolor);
}
.product-img
{
	width: 100%;
	float: left;
	position: relative;
	border-radius: 6px 6px 0px 0px;
	margin-bottom: 10px;
	overflow: hidden;
	aspect-ratio: 1000/1500;
}
.product-img img
{
	width: 100%;
	height: 100%;
	float: left;
	object-fit: cover;
	object-position: top;
}
.product-sizes
{
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: -60px;
	left: 0px;
	transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	text-align: center;
	opacity: 0;
	background-color: var(--product-card-sizes-bgcolor);
}
.product-sizes .size-box
{
	height: 30px;
	display: inline-block;
	text-align: center;
	line-height: 30px;
	margin-top: 5px;
	color: var(--product-card-sizes-color);
}
.size-box + .size-box
{
	margin-left: 10px;
}
.product-sizes .size-box.inactive
{
	text-decoration: line-through;
	opacity: 0.5;
}
.card-details
{
	width: 100%;
	height: 145px;
	float: left;
	padding: 0px 10px 10px;
}
.product-title
{
	width: 100%;
	height: 34px;
	float: left;
	color: var(--product-card-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 5px;
	line-height: 18px;
}
.product-star
{
	width: 100%;
	height: 12px;
	float: left;
	color: var(--product-card-star-color);
	font-size: 10px;
	margin-bottom: 10px;
	line-height: 10px;
}
.product-star i
{
	width: 10px;
	height: 10px;
	float: left;
	background-color: var(--product-card-star-selected-bgcolor);
	-webkit-mask-size: 100% 100% !important;
	margin-right: 2px;
}
.product-star i.star-grey
{
	background-color: var(--product-card-star-bgcolor);
}
.product-discount
{
	width: 40px;
	height: 38px;
	float: left;
	background-color: var(--product-card-discount-bgcolor);
	border-radius: 4px;
	color: var(--product-card-discount-color);
	font-size: 10px;
	text-align: center;
	padding: 6px 0px;
	margin-right: 10px;
}
.product-price
{
	width: calc(100% - 50px);
	height: 38px;
	float: left;
}
.product-price p
{
	width: 100%;
	float: left;
	margin: 0px;
	font-size: 16px;
	color: var(--product-card-sale-price-color);
	font-weight: 600;
}
.product-old-price
{
	text-decoration: line-through;
	font-size: 14px !important;
	color: var(--product-card-discount-price-color) !important;
	font-weight: 400 !important;
}
.campaign-price
{
	width: 100%;
	height: 25px;
	float: left;
	margin-top: 10px;
	border: 1px solid var(--product-card-campaign-border-color);
	border-radius: 6px;
	line-height: 23px;
	color: var(--product-card-campaign-color);
	font-size: 12px;
	text-align: center;
	overflow: hidden;
}
.product-star:empty,
.product-discount:empty,
.product-price:empty,
.product-old-price:empty,
.campaign-price:empty,
.product-sizes:empty
{
	display: none;
}

/*--------------HOVER SUPPORTED DEVICES--------------*/
@media (hover: hover)
{
	.product:hover
	{
		box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.10);
		border-color: var(--product-card-border-color-hover);
	}
	.product:hover .product-sizes
	{
		bottom: 0px;
		opacity: 1;
	}
}
@media only screen and (max-width: 991px)
{
	.product
	{
		width: calc(50% - 5px) !important;
		margin-bottom: 10px;
	}
	.product:nth-of-type(2n-1)
	{
		margin-right: 10px;
	}
	.campaign-price
	{
		font-size: 10px;
	}
}
@media only screen and (min-width: 991px)
{
	.product-has-filter .product
	{
		width: calc(25% - 15px);
	}
	.products:not(.product-has-filter) .product:nth-of-type(5n-1),
	.products:not(.product-has-filter) .product:nth-of-type(5n-2),
	.products:not(.product-has-filter) .product:nth-of-type(5n-3),
	.products:not(.product-has-filter) .product:nth-of-type(5n-4)
	{
		margin-right: 20px;
	}
	.product-has-filter .product:nth-of-type(4n-1),
	.product-has-filter .product:nth-of-type(4n-2),
	.product-has-filter .product:nth-of-type(4n-3)
	{
		margin-right: 20px;
	}
}