/*
 * Catalogue badges — "Sale" / "Hit" / "New".
 *
 * The theme positions a single .product-badge absolutely in the top-left
 * corner of .product-media, so two badges would sit on top of each other.
 * This file moves the positioning one level up, onto the .product-badges
 * wrapper the plugin prints, and lets the badges themselves flow inside it.
 * Every selector is a two-class descendant, which outranks the theme's
 * single-class rule without a single !important — and none of the theme's
 * own rules are touched, so a card rendered without the plugin is unchanged.
 *
 * Colours come from the theme tokens (with brand fallbacks for any other
 * theme). Contrast of label over background: "Sale"/"Hit" 5.1:1,
 * "New" 15.7:1 — both above WCAG AA (4.5:1).
 */

.product-media .product-badges,
.product-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	max-width: calc(100% - 24px);
	pointer-events: none;
}

.product-badges .product-badge {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * "Sale" and "Hit" share the deep brand red: the lighter --red fails AA
 * against white text (3.98:1), --red-deep clears it at 5.1:1.
 */
.product-badges .product-badge--sale,
.product-badges .product-badge--hit {
	background: var(--red-deep, #cf2f20);
	color: #ffffff;
}

/*
 * "Hit" keeps the red accent but is set apart from "Sale" by a light hairline,
 * so the two never read as one block when they stack.
 */
.product-badges .product-badge--hit {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/*
 * "New" is the light counterpart — legible on top of dark product photos
 * thanks to the ink hairline.
 */
.product-badges .product-badge--new {
	background: var(--white, #ffffff);
	color: var(--ink, #1a1917);
	box-shadow: inset 0 0 0 1px var(--ink, #1a1917);
}

@media (max-width: 420px) {
	.product-media .product-badges,
	.product-badges {
		top: 8px;
		left: 8px;
		gap: 0.25rem;
		max-width: calc(100% - 16px);
	}

	.product-badges .product-badge {
		font-size: 0.62rem;
		padding: 0.28rem 0.45rem;
	}
}