/**
 * Plakietki produktów.
 *
 * Wymiary przychodzą z ustawień wtyczki jako zmienne na :root
 * (patrz GSFT_Plakietki_Front::style), kolory pojedynczej plakietki
 * jako zmienne w atrybucie style na samym elemencie.
 *
 * Wygląd jest zdjęty pomiarem ze starej strony geschaft.gmbh:
 * 100x32 px, tło #d9000c, biały tekst 13px / 500 / interlinia 16px /
 * światło -0.1px, przyklejona do lewego górnego rogu zdjęcia.
 */

.gsft-plakietki {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --gsft-plakietka-przerwa, 4px );

	/* Plakietka nie może zjadać kliknięcia w zdjęcie produktu. */
	pointer-events: none;
}

.gsft-plakietka {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	/* Szerokość MINIMALNA, nie sztywna: „Sale” dostanie równe 100px,
	   a „Last pieces” rozepchnie się do swojej długości zamiast uciąć
	   napis albo złamać go na dwie linie. */
	min-width: var( --gsft-plakietka-szer, 100px );
	height: var( --gsft-plakietka-wys, 32px );
	padding: 0 10px;

	background: var( --gsft-plakietka-tlo, #d9000c );
	color: var( --gsft-plakietka-tekst, #fff );

	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: -0.1px;
	text-align: center;
	white-space: nowrap;
}

/**
 * Zabezpieczenie na wypadek nieopozycjonowanego rodzica.
 *
 * .product-card__image w tym motywie ma position: relative, więc
 * normalnie ta reguła nic nie robi. Gdyby jednak plakietki trafiły
 * kiedyś do kontenera bez pozycjonowania, bez tego uciekłyby na sam
 * róg okna zamiast na róg zdjęcia — a to wygląda jak awaria strony,
 * nie jak drobna usterka stylu.
 */
.product-card__image,
.woocommerce-loop-product__link,
.gsft-gallery__main {
	position: relative;
}

/**
 * NA TELEFONIE CELOWO BEZ ZMIAN.
 *
 * Stara strona nie miała dla plakietki ani jednego zapytania medialnego —
 * 100x32 px i 13px pisma wszędzie. Kafel na telefonie ma połowę szerokości
 * ekranu, więc plakietka zajmuje na nim sporo miejsca, ale to jest ten sam
 * wygląd, o który prosiłeś, a „Sold out” ma być widoczne.
 *
 * Gdyby jednak było za ciężko, odkomentuj poniższy blok:
 */
/*
@media (max-width: 1023px) {

	.gsft-plakietka {
		min-width: 0;
		height: calc( var( --gsft-plakietka-wys, 32px ) - 4px );
		padding: 0 8px;
		font-size: 12px;
	}
}
*/