/**
 * Product Highlight.
 *
 * @package RivenGaming
 */


/* Wrapper
--------------------------------------------- */

.riven-product-highlight {
	position: relative;

	display: flex;
	align-items: center;

	gap: 40px;

	padding: 40px;

	background: #ffffff;

	border-radius: 20px;

	overflow: hidden;
}


.riven-highlight-content,
.riven-highlight-image {

	position: relative;

	flex: 1;

	z-index: 2;

}


.riven-highlight-content {

	display: flex;
	flex-direction: column;

	gap: 15px;

}


.riven-highlight-image {

	text-align: center;

}


.riven-highlight-image img {

	max-width: 100%;
	height: auto;

	transition: transform .3s ease;

}


.riven-product-highlight:hover
.riven-highlight-image img {

	transform: scale(1.05);

}



/* Layout
--------------------------------------------- */

.riven-highlight-style-two {

	flex-direction: row-reverse;

}


.riven-highlight-style-three {

	flex-direction: column;

	text-align: center;

}


.riven-highlight-style-three
.riven-highlight-content {

	align-items: center;

}



/* Badge
--------------------------------------------- */

.riven-highlight-badge {

	display: inline-flex;
	align-items: center;

	gap: 6px;

	width: fit-content;

	padding: 8px 16px;

	font-size: 14px;
	font-weight: 600;

	color: #ffffff;

	background: #111111;

	border-radius: 30px;

	transition: all .25s ease;

}


.riven-highlight-badge svg {

	width: 16px;
	height: 16px;

	fill: currentColor;

}


/* Badge Positions */

.riven-product-badge-image-left
.riven-highlight-image
.riven-highlight-badge,
.riven-product-badge-image-right
.riven-highlight-image
.riven-highlight-badge {

	position: absolute;

	top: 15px;

}


.riven-product-badge-image-left
.riven-highlight-badge {

	left: 15px;

}


.riven-product-badge-image-right
.riven-highlight-badge {

	right: 15px;

}


.riven-product-badge-box-left
.riven-highlight-badge,
.riven-product-badge-box-right
.riven-highlight-badge {

	position: absolute;

	top: 20px;

	z-index: 5;

}


.riven-product-badge-box-left
.riven-highlight-badge {

	left: 20px;

}


.riven-product-badge-box-right
.riven-highlight-badge {

	right: 20px;

}



/* Discount
--------------------------------------------- */

.riven-highlight-discount {

	position: absolute;

	top: 15px;
	right: 15px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 60px;
	height: 60px;

	font-size: 18px;
	font-weight: 700;

	color: #ffffff;

	background: #111111;

	border-radius: 50%;

}



/* Subtitle
--------------------------------------------- */

.riven-highlight-subtitle {

	font-size: 15px;
	font-weight: 600;

	color: #666666;

}



/* Category
--------------------------------------------- */

.riven-highlight-category,
.riven-highlight-category a {

	font-size: 14px;

	color: #777777;

	text-decoration: none;

}



/* Title
--------------------------------------------- */

.riven-highlight-title {

	margin: 0;

	font-size: 18px;
	font-weight: 700;

	line-height: 1.2;

	color: #111111;

}



/* Description
--------------------------------------------- */

.riven-highlight-description {

	max-width: 600px;

	font-size: 16px;
	line-height: 1.6;

	color: #666666;

}



/* Features
--------------------------------------------- */

.riven-highlight-features {

	display: flex;
	flex-wrap: wrap;

	gap: 10px;

}


.riven-highlight-feature {

	display: inline-flex;
	align-items: center;

	gap: 8px;

	font-size: 14px;

	color: #555555;

}


.riven-highlight-feature svg {

	width: 18px;
	height: 18px;

	fill: #2563eb;

}



/* Price
--------------------------------------------- */

.riven-highlight-price {

	font-size: 26px;
	font-weight: 700;

	color: #111111;

}


.riven-highlight-price del {

	margin-right: 8px;

	font-size: 18px;

	color: #999999;

}



/* Stock Progress
--------------------------------------------- */

.riven-highlight-stock {
	width: 100%;
	max-width: 400px;
}


.riven-stock-info {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 8px;

	font-size: 14px;
	color: #666;
}


.riven-stock-bar {
	position: relative;

	height: 10px;

	background: #eee;

	border-radius: 50px;

	overflow: hidden;
}


.riven-stock-bar span {
	position: absolute;

	top: 0;
	left: 0;

	height: 100%;

	background: #111;

	border-radius: inherit;

	transition: width .4s ease;
}



/* Actions
--------------------------------------------- */

.riven-highlight-actions {

	display: flex;
	align-items: center;

	gap: 12px;

}



/* Wishlist
--------------------------------------------- */

.riven-highlight-wishlist {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;

	color: #111111;

	background: #ffffff;

	border: 1px solid #eeeeee;

	border-radius: 50%;

	cursor: pointer;

}

.riven-highlight-wishlist svg {
	width: 20px;
	height: 20px;
	display: block;
}


/* Button
--------------------------------------------- */

.riven-highlight-button {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	padding: 14px 28px;

	font-size: 15px;
	font-weight: 600;

	color: #ffffff;

	background: #111111;

	border-radius: 8px;

	text-decoration: none;

	transition: all .25s ease;

}


.riven-highlight-button svg {

	width: 18px;
	height: 18px;

	fill: currentColor;

}


.riven-highlight-button:hover {

	transform: translateY(-2px);

}



/* Responsive
--------------------------------------------- */

@media (max-width: 991px) {


	.riven-product-highlight {

		gap: 30px;

		padding: 30px;

	}


	.riven-highlight-title {

		font-size: 32px;

	}


}



@media (max-width: 767px) {


	.riven-product-highlight,
	.riven-highlight-style-two {

		flex-direction: column;

		text-align: center;

	}


	.riven-highlight-content {

		align-items: center;

	}


	.riven-highlight-title {

		font-size: 28px;

	}


	.riven-highlight-actions {

		justify-content: center;

	}


}