/**
 * Badge informacyjny na zdjęciu produktu (np_wyceny).
 * Nakładka HTML/CSS — nie modyfikuje plików graficznych.
 */

.np-product-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	display: block;
	z-index: 21;
	padding: 7px 10px;
	background: rgba(255, 235, 59, 0.45); /* półprzezroczysty żółty */
	color: #000000; /* czarny */
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
	pointer-events: none; /* nie blokuje kliknięcia zdjęcia / linku produktu */
}

/**
 * Badge „brak w magazynie” na stronie pojedynczego produktu.
 *
 * Na listach tę samą klasę styluje motyw Flatsome
 * (.box-image .out-of-stock-label); na stronie produktu kontenerem jest
 * .product-images (relative), więc reguła jest tu powtórzona — wygląd
 * identyczny jak badge na liście kategorii.
 */
.product-images .out-of-stock-label {
	background: #fff;
	background: hsla(0, 0%, 100%, 0.9);
	color: #333;
	font-weight: 700;
	left: 0;
	opacity: 0.9;
	padding: 20px 0;
	position: absolute;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	top: 40%;
	z-index: 21; /* nad sliderem galerii (flickity) */
}

@media (max-width: 549px) {
	.np-product-badge {
		padding: 5px 8px;
		font-size: 0.72rem;
	}
}