/* KW Product Badges
   Colours come from the per-badge inline custom properties, so nothing is hardcoded here. */

.kw-badge {
	display: inline-flex;
	align-items: center;
	background: var(--kw-badge-bg, #315EF3);
	color: var(--kw-badge-color, #FFFFFF);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 100%;
	padding: 4px 12px;
	white-space: nowrap;
	pointer-events: none;
}

/* Archive / loop — stacks inside the existing badge container, under the sale badge. */
.product-small .badge-container-under-image {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.kw-badges--loop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	max-width: 100%;
}

.kw-badges--loop .kw-badge {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

/* Single product — laid out as a row that wraps. */
.kw-badges--single {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kw-badges-wrapper--center .kw-badges--single {
	justify-content: center;
}

.kw-badges-wrapper--right .kw-badges--single {
	justify-content: flex-end;
}