/**
 * BlackSpace Badge Stack — shared container layout.
 *
 * A single top-left vertical stack that holds every product-image overlay
 * badge. Each badge plugin places its badge into `.bs-badge-stack` and sets a
 * CSS `order` (Founding Seller 10, Handmade Pledge 20, future badges 30+) so
 * the vertical sequence is guaranteed regardless of JS execution order.
 *
 * This file owns ONLY the container: position, flex layout, gap, offsets, and
 * responsive sizing. The individual badge appearance (circle, background,
 * shadow, size) is owned by each badge plugin's own stylesheet, scoped to
 * `.bs-badge-stack > .their-badge-class`.
 *
 * Positioning contexts: the stack is an absolute child of whichever product
 * image wrapper a surface uses.
 */

.wd-product-thumb,
.product-image-link {
	position: relative;
}

.bs-badge-stack {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	padding: 0;
	/* The stack itself is just a layout shell — let clicks fall through the
	   empty gaps to the product image, while each badge re-enables pointer
	   events for itself. */
	pointer-events: none;
}

.bs-badge-stack > * {
	pointer-events: auto;
}

/* Responsive: tighten the offset / gap and let badges shrink on small
   viewports so the stack never crowds a 2-up mobile product grid. */
@media (max-width: 575px) {
	.bs-badge-stack {
		top: 6px;
		left: 6px;
		gap: 4px;
	}
}