.dwe-product-image-wrapper{
	position: relative;
}
.dwe-product-badges{
	position: absolute;
	text-align: right;
	display: flex;
	flex-direction: column;
	max-width: 90%;
	gap: 8px;
	z-index: 5;
}
.dwe-product-badges.dwe-badge-position-top-right{
	top: 10px;
	right: 10px;
	align-items: flex-end;
}
.dwe-product-badges.dwe-badge-position-top-left{
	top: 10px;
	left: 10px;
}
.dwe-product-badges.dwe-badge-position-bottom-right{
	bottom: 10px;
	right: 10px;
	align-items: flex-end;
}
.dwe-product-badges.dwe-badge-position-bottom-left{
	bottom: 10px;
	left: 10px;
}

.dwe-product-badge{
	width: var(--dwe-badge-width, '80px');
	height: var(--dwe-badge-height, 'auto');
	/* overflow: hidden; // this create issue when point left and right badge.*/
	line-height: 0;
}
.dwe-product-badge-text{
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	border-radius: 3px;
}
.dwe-product-badge img,
.dwe-product-badge svg{
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

/* Shapes Badges. */
.dwe-shape-badge{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	min-height: 36px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: var(--dwe-badge-font-size);
	line-height: var(--dwe-badge-font-size);
	color: var(--dwe-badge-text-color);
	background: var(--dwe-badge-primary);
	box-sizing: border-box;
}
.dwe-shape-badge span{
	position: relative;
	text-align: center;
	z-index: 3;
}

/* Rectangle. */
.dwe-shape-badge.dwe-shape-rectangle{
	border-radius:4px;
}
/* Rounded. */
.dwe-shape-badge.dwe-shape-rounded{
	border-radius: 999px;
}
/* Circle. */
.dwe-shape-badge.dwe-shape-circle{
	width: var(--dwe-badge-width);
	height: var(--dwe-badge-height, var(--dwe-badge-width) );
	border-radius: 50%;
}
/* Burst. */
.dwe-shape-badge.dwe-shape-burst{
	width: var(--dwe-badge-width);
	height: var(--dwe-badge-height, var(--dwe-badge-width) );
	clip-path: polygon(
		50% 0, 60% 12%, 75% 0, 82% 18%, 100% 25%, 88% 40%, 100% 50%, 88% 60%, 100% 75%, 82% 82%, 75% 100%, 60% 88%, 
		50% 100%, 40% 88%, 25% 100%, 18% 82%, 0 75%, 12% 60%, 0 50%, 12% 40%, 0 25%, 18% 18%, 25% 0, 40% 12%
	);
}
/* Cut Corners. */
.dwe-shape-badge.dwe-shape-cut-corners{
	clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
/* Hexagon. */
.dwe-shape-badge.dwe-shape-hexagon{
	width: var(--dwe-badge-width);
	height: var(--dwe-badge-height, calc( var(--dwe-badge-width) - 10px ) );
	clip-path: polygon(25% 0%, 75% 0%, 100% 48%, 75% 100%, 25% 100%, 0% 50%);
}
/* Heptagon. */
.dwe-shape-badge.dwe-shape-heptagon{
	width: var(--dwe-badge-width);
	height: var(--dwe-badge-height, var(--dwe-badge-width) );
	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.dwe-shape-badge.dwe-shape-heptagon span{
	display: block;
	margin-top: 3px;
}
/* Diamond. */
.dwe-shape-badge.dwe-shape-diamond{
	width: var(--dwe-badge-width);
	height: var(--dwe-badge-height, var(--dwe-badge-width));
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dwe-badge-primary);
	color: var(--dwe-badge-text-color);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}
.dwe-shape-badge.dwe-shape-diamond span{
	position: relative;
	z-index: 1;
}
/* Point Left. */
.dwe-badge-position-top-left .dwe-shape-point-left,
.dwe-badge-position-bottom-left .dwe-shape-point-left{
	margin-left: 18px;
}
.dwe-shape-badge.dwe-shape-point-left:before{
	content: "";
	position: absolute;
	left: -18px;
	top: 0;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-right: 18px solid var(--dwe-badge-primary);
}
/* Point Right. */
.dwe-badge-position-top-right .dwe-shape-point-right,
.dwe-badge-position-bottom-right .dwe-shape-point-right{
	margin-right: 18px;
}
.dwe-shape-badge.dwe-shape-point-right:after{
	content: "";
	position: absolute;
	right: -18px;
	top: 0;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 18px solid var(--dwe-badge-primary);
}
/* Double Point. */
.dwe-badge-position-top-right .dwe-shape-double-point,
.dwe-badge-position-bottom-right .dwe-shape-double-point{
	margin-right: 18px;
}
.dwe-badge-position-top-left .dwe-shape-double-point,
.dwe-badge-position-bottom-left .dwe-shape-double-point{
	margin-left: 18px;
}
.dwe-shape-badge.dwe-shape-double-point:before,
.dwe-shape-badge.dwe-shape-double-point:after{
	content: "";
	position: absolute;
	top: 0;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
}
.dwe-shape-badge.dwe-shape-double-point:before{
	left: -18px;
	border-right: 18px solid var(--dwe-badge-primary);
}
.dwe-shape-badge.dwe-shape-double-point:after{
	right: -18px;
	border-left: 18px solid var(--dwe-badge-primary);
}
/* Banner. */
.dwe-shape-badge.dwe-shape-banner{
	width: var( --dwe-badge-width );
	height: var( --dwe-badge-height, 40px );
	clip-path: polygon( 0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 12% 50% );
}
/* Ticket. */
.dwe-shape-badge.dwe-shape-ticket{
	mask: radial-gradient(circle 7px at left center, transparent 98%, #000 100%),
    	radial-gradient(circle 7px at right center, transparent 98%, #000 100%),
    	linear-gradient(#000 0 0);
	mask-composite: exclude;
}
/* Tag. */
.dwe-shape-badge.dwe-shape-tag{
	padding-left: 28px;
}
.dwe-shape-badge.dwe-shape-tag:before{
	content: "";
	position: absolute;
	left: 10px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dwe-badge-secondary, #ffffff);
}
/* Parallelogram. */
.dwe-shape-badge.dwe-shape-parallelogram{
	transform:skew(-18deg);
}
.dwe-shape-parallelogram span{
	transform:skew(18deg);
}
/* Trapezoid. */
.dwe-shape-badge.dwe-shape-trapezoid{
	clip-path: polygon( 12% 0, 88% 0, 100% 100%, 0 100% );
}
/* Star. */
.dwe-shape-badge.dwe-shape-star{
	width: var( --dwe-badge-width );
	height: var( --dwe-badge-height, var( --dwe-badge-width ) );
	clip-path: polygon( 50% 0%, 68% 27%, 98% 35%, 77% 59%, 79% 91%, 50% 78%, 21% 91%, 23% 59%, 2% 35%, 32% 27% );
}
/* Speech Bubble. */
.dwe-shape-badge.dwe-shape-speech-bubble{
	border-radius: 8px;
	margin-bottom: 10px;
}
.dwe-shape-badge.dwe-shape-speech-bubble:after{
	content: "";
	position: absolute;
	left: 20px;
	bottom: -10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--dwe-badge-primary);
}
/* Price. */
.dwe-shape-badge.dwe-shape-price{
	padding-left: 30px;
	clip-path: polygon( 20px 0, 100% 0, 100% 100%, 20px 100%, 0 50% );
}
.dwe-shape-badge.dwe-shape-price:before{
	content: "";
	position: absolute;
	left: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dwe-badge-secondary, #ffffff);
}
/* Rabbet. */
.dwe-shape-badge.dwe-shape-rabbet{
	clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}