/* Positioning context for the badge - most themes already set this, but
   don't rely on it. WoodMart (and several other WooCommerce themes) wrap
   product cards in their own classes rather than the plain WooCommerce
   `li.product`, so a few of its common wrapper classes are included too -
   harmless no-ops on any of them that don't actually exist in a given
   template. */
.woocommerce ul.products li.product,
.woocommerce-product-gallery,
.product-grid-item,
.wd-product,
li.product,
.products-grid .product {
	position: relative;
}

/* Wraps every badge that applies to a product (its own promo deal, plus
   any combo deal it's part of) in one positioned stack, so multiple
   badges lay out top-to-bottom instead of overlapping each other. Sized
   as a percentage of the card (capped both ways) rather than a fixed
   pixel value - a fixed size that looked right on a full shop-grid card
   looked oversized to the point of covering the entire product on
   smaller cards (search results, "Recently Viewed Products"), since
   nothing scaled it down to match. `!important` guards against the
   theme's own image rules (e.g. a blanket `img { max-width: 100% }`)
   overriding this and letting a badge render at its raw file size. */
.abg-promo-badge-stack {
	position: absolute !important;
	top: 8px;
	left: 8px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 22%;
	max-width: 80px;
	min-width: 32px;
}

.abg-promo-badge-stack.abg-promo-badge-single {
	width: 25%;
	max-width: 112px;
	min-width: 48px;
	top: 12px;
	left: 12px;
}

.abg-promo-badge {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	padding: 6px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Shape is chosen per-deal/per-combo in the admin (Badge Icon / Badges
   meta box) - "circle" and "rounded" crop the image to fit, "none" shows
   the whole PNG undistorted with no cropping at all. */
.abg-promo-badge.abg-badge-shape-circle {
	border-radius: 50%;
	object-fit: cover;
}

.abg-promo-badge.abg-badge-shape-rounded {
	border-radius: 22%;
	object-fit: cover;
}

.abg-promo-badge.abg-badge-shape-none {
	border-radius: 0;
	object-fit: contain;
	background: transparent;
	box-shadow: none;
	padding: 2px;
}