/**
 * Flagi produktów na froncie — badge w rogu okładki (kafle) i rząd nad
 * tytułem (karta produktu). Kolory z palety motywu z fallbackami marki;
 * flaga custom dostaje kolor z term meta (inline style).
 */

.btk-flags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* kafle listingu: stos w lewym górnym rogu okładki (jak dawny .onsale) */
ul.products li.product .btk-flags--tile {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	flex-direction: column;
}

/* karta produktu: poziomy rząd nad tytułem */
.btk-flags--single { margin: 0 0 8px; }

/* Badge wg 29-ultimate-ui (.fmt): radius 6, 700/uppercase; tint + ciemny tekst
   semantyczny. Flagi custom (kolor z term meta, inline bg) zostają biały-na-kolorze. */
.btk-flag {
	display: inline-block;
	color: #fff;
	border-radius: 6px;
	padding: 3px 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.4;
	background: var(--wp--preset--color--accent, #047857);
}
/* Zapowiedź: indygo (premium) jak chipy dat na stronach specjalnych — inna
   rodzina kolorów niż promocja/nowość, bo to informacja o TERMINIE, nie o cenie. */
.btk-flag--preorder   { background: var(--wp--preset--color--premium-soft, #EDEBFA); color: var(--wp--preset--color--premium, #312E81); }
.btk-flag--sale       { background: var(--wp--preset--color--promo-soft, #FBE7EC); color: var(--wp--preset--color--promo, #9D2257); }
.btk-flag--bestseller { background: var(--wp--preset--color--amber-soft, #FBF0DC); color: #7A4A06; }
.btk-flag--new        { background: var(--wp--preset--color--promo, #9D2257); }

/* dark: tekst bestsellera na ciemnym tincie musi być jasnym bursztynem,
   a zapowiedzi jasnym indygo — w ciemnym motywie premium-soft to #232047,
   więc granatowe premium (#312E81) znikałoby indygo na indygo (ta sama pułapka,
   co w notice info motywu, theme.css „Dark: tekst notice info"). */
html[data-theme="dark"] .btk-flag--bestseller { color: var(--wp--preset--color--amber, #D99A4E); }
html[data-theme="dark"] .btk-flag--preorder { color: #C7CCF5; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .btk-flag--bestseller { color: var(--wp--preset--color--amber, #D99A4E); }
	html:not([data-theme="light"]) .btk-flag--preorder { color: #C7CCF5; }
}