/* =============================================================
   Minimal Product Badges – Frontend Styles
   ============================================================= */

/* Product card / gallery needs a positioning context */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery,
.product .images {
	position: relative;
}

/* ── Badge container ──────────────────────────────────────── */

.mpb-badges {
	position: absolute;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 10px;
	pointer-events: none;
}

.mpb-badges.mpb-pos-top-left  { top: 0; left: 0; }
.mpb-badges.mpb-pos-top-right { top: 0; right: 0; align-items: flex-end; }

/* ── Pill badge ───────────────────────────────────────────── */

.mpb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 11px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}

/* "Both" format — two-line pill */
.mpb-badge.mpb-fmt-both {
	flex-direction: column;
	gap: 1px;
	padding: 5px 11px;
	line-height: 1.3;
}

.mpb-badge .mpb-pct {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

/* Colour defaults — overridden by inline CSS from settings */
.mpb-badge-sale { background: #111; color: #fff; }
.mpb-badge-new  { background: #111; color: #fff; }