/* NoirMusk — "Best Seller" / "New Arrival" tag.
   It sits on the card's top edge (half over the page, half over the photo) with a white ring,
   so it stays clear of the image whatever the photo looks like. */

/* the card lets the tag poke out above; the photo keeps its own rounded top corners */
html body ul.products.products li.product.product {
	overflow: visible;
	/* a grid item with visible overflow no longer shrinks below its content unless told to */
	min-width: 0;
}
html body ul.products.products li.product.product a.woocommerce-loop-product__link {
	border-radius: 9px 9px 0 0;
}

html body ul.products li.product .noirmusk-badge {
	position: absolute;
	top: -15px;
	left: 20px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 15px 0 12px;
	border-radius: 4px;
	font-family: var(--theme-body-font-family), 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 0 0 3px #fff, 0 10px 18px -8px rgba(26, 26, 26, 0.5);
	pointer-events: none;
}

/* small icon in front of the text (drawn with a mask so it takes the text colour) */
html body ul.products li.product .noirmusk-badge::before {
	content: '';
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	margin-top: -1px;
	background: currentColor;
	-webkit-mask: var(--noirmusk-badge-icon) center / contain no-repeat;
	mask: var(--noirmusk-badge-icon) center / contain no-repeat;
}

/* Best Seller: warm gold with a star */
html body ul.products li.product .noirmusk-badge--best_seller {
	--noirmusk-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21.1 7 14.2 2 9.3l6.9-1z'/%3E%3C/svg%3E");
	background: linear-gradient(135deg, #c48c4e 0%, #a3703f 55%, #8a5b2f 100%);
	color: #fff;
}

/* New Arrival: black with a gold sparkle */
html body ul.products li.product .noirmusk-badge--new_arrival {
	--noirmusk-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E");
	background: #1a1a1a;
	color: #f0dcb8;
}
html body ul.products li.product .noirmusk-badge--new_arrival::before {
	background: #d4a86a;
}

@media (max-width: 600px) {
	html body ul.products li.product .noirmusk-badge {
		top: -13px;
		left: 14px;
		gap: 6px;
		height: 26px;
		padding: 0 12px 0 10px;
		font-size: 10px;
		letter-spacing: 0.11em;
	}
	html body ul.products li.product .noirmusk-badge::before {
		flex-basis: 10px;
		width: 10px;
		height: 10px;
	}
}