/* Product-loop presentation only. Cart calculations and product prices remain
 * untouched; the badge simply marks an active campaign participant. */
.woocommerce-image__wrapper .wpa-bogo-loop-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-flex;
	max-width: calc(100% - 20px);
	min-height: 21px;
	align-items: center;
	padding: 4px 7px;
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--wpa-bogo-badge-color, #fff);
	background: var(--wpa-bogo-badge-background, #e91e63);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	pointer-events: none;
}

/* Shoptimizer reserves the top-left slot for its sale flash. Move the BOGO
 * marker below it only when that sale product is eligible for the campaign. */
.woocommerce-image__wrapper .wpa-bogo-loop-badge--top-left.wpa-bogo-loop-badge--with-sale {
	top: 38px;
}

.woocommerce-image__wrapper .wpa-bogo-loop-badge--top-right { left: auto; right: 10px; }
.woocommerce-image__wrapper .wpa-bogo-loop-badge--bottom-left { top: auto; bottom: 10px; }
.woocommerce-image__wrapper .wpa-bogo-loop-badge--bottom-right { top: auto; right: 10px; bottom: 10px; left: auto; }

.wpa-bogo-loop-badge__text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.woocommerce-image__wrapper .wpa-bogo-loop-badge {
		top: 7px;
		left: 7px;
		min-height: 19px;
		padding: 3px 5px;
		font-size: 9px;
	}

	.woocommerce-image__wrapper .wpa-bogo-loop-badge--top-left.wpa-bogo-loop-badge--with-sale {
		top: 32px;
	}

	.woocommerce-image__wrapper .wpa-bogo-loop-badge--top-right { right: 7px; }
	/* The mobile base style above defines top:7px. Explicitly clear it for
	 * bottom positions; otherwise top and bottom are both set and the badge
	 * stretches over the full product image. */
	.woocommerce-image__wrapper .wpa-bogo-loop-badge--bottom-left { top: auto; bottom: 7px; }
	.woocommerce-image__wrapper .wpa-bogo-loop-badge--bottom-right { top: auto; right: 7px; bottom: 7px; }
}