/**
 * Product Badges overlays. The stacks are absolutely positioned over the
 * product image, so the element that wraps that image must establish a
 * positioning context. On the loop that is the product card; on the single
 * product page it is the gallery column (WooCommerce already makes the gallery
 * relative for its zoom trigger). Most themes set these; we assert defensively.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.single-product div.product .woocommerce-product-gallery {
	position: relative;
}

.flexa-badges {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	pointer-events: none;
}

.flexa-badges--top-left {
	top: 0.5em;
	left: 0.5em;
	align-items: flex-start;
}

.flexa-badges--top-right {
	top: 0.5em;
	right: 0.5em;
	align-items: flex-end;
}

.flexa-badges--bottom-left {
	bottom: 0.5em;
	left: 0.5em;
	align-items: flex-start;
}

.flexa-badges--bottom-right {
	bottom: 0.5em;
	right: 0.5em;
	align-items: flex-end;
}

.flexa-badge {
	display: inline-block;
	padding: 0.25em 0.6em;
	border-radius: 3px;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	background: #d63638;
	color: #ffffff;
}

/* Shape presets (default is the rounded rule above). */
.flexa-badge--pill {
	border-radius: 999px;
	padding-inline: 0.75em;
}

.flexa-badge--square {
	border-radius: 0;
}

/* Size presets (default is the base rule above, ~0.8em). */
.flexa-badge--sm {
	font-size: 0.7em;
	padding: 0.2em 0.5em;
}

.flexa-badge--lg {
	font-size: 0.95em;
	padding: 0.3em 0.75em;
}

/*
 * Ribbon shape: a diagonal band across a corner. The band lives in a fixed,
 * corner-anchored box that hides its overflow, so the ends tuck under the
 * corner without needing overflow:hidden on the product box.
 */
.flexa-ribbon {
	position: absolute;
	z-index: 3;
	width: 96px;
	height: 96px;
	overflow: hidden;
	pointer-events: none;
}

.flexa-ribbon--top-left {
	top: 0;
	left: 0;
}

.flexa-ribbon--top-right {
	top: 0;
	right: 0;
}

.flexa-ribbon--bottom-left {
	bottom: 0;
	left: 0;
}

.flexa-ribbon--bottom-right {
	bottom: 0;
	right: 0;
}

.flexa-ribbon__label {
	position: absolute;
	display: block;
	width: 150px;
	padding: 0.28em 0;
	background: #d63638;
	color: #ffffff;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Anchor and rotate the band to sit diagonally across each corner. */
.flexa-ribbon--top-left .flexa-ribbon__label {
	top: 22px;
	left: -34px;
	transform: rotate(-45deg);
}

.flexa-ribbon--top-right .flexa-ribbon__label {
	top: 22px;
	right: -34px;
	transform: rotate(45deg);
}

.flexa-ribbon--bottom-left .flexa-ribbon__label {
	bottom: 22px;
	left: -34px;
	transform: rotate(45deg);
}

.flexa-ribbon--bottom-right .flexa-ribbon__label {
	bottom: 22px;
	right: -34px;
	transform: rotate(-45deg);
}

/* Ribbon size presets track the chip sizes. */
.flexa-ribbon--sm .flexa-ribbon__label {
	font-size: 0.62em;
}

.flexa-ribbon--lg .flexa-ribbon__label {
	font-size: 0.85em;
}