/* GC Product Labels - matches the Promotion badge style. */

.gc-label-badges {
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	pointer-events: none;
	z-index: 3;
}

.gc-label-badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	overflow: hidden;
	pointer-events: none;
}

/* Stagger multiple badges slightly so all are visible. */
.gc-label-badges .gc-label-badge:nth-child(2) {
	left: 24px;
	top: 6px;
	transform: scale(0.85);
	transform-origin: top left;
}
.gc-label-badges .gc-label-badge:nth-child(3) {
	left: 44px;
	top: 12px;
	transform: scale(0.72);
	transform-origin: top left;
}

.gc-label-badge::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 90px 90px 0 0;
	border-color: var(--gc-label-color, #f14e4e) transparent transparent transparent;
	z-index: 1;
}

.gc-label-badge .gc-label-badge-text {
	position: absolute;
	top: 30px;
	left: -26px;
	transform: rotate(-45deg);
	transform-origin: center;
	width: 120px;
	text-align: center;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	z-index: 2;
	display: block;
	line-height: 1.2;
}

/* Hide the WooCommerce sale badge when our custom labels are showing,
   so PROMOTION (sale) and our custom labels don't stack on the same corner. */
.woocommerce ul.products li.product.has-gc-labels .onsale,
.single-product.woocommerce.has-gc-labels .onsale {
	display: none !important;
}

/* Make sure the parent li/product positions correctly for absolute badge. */
.woocommerce ul.products li.product {
	position: relative;
}