/**
 * Flora Point Core — podtytuł produktu ([fp_podtytul])
 * i kafelki-odznaki ([fp_kafelki]).
 *
 * Kolory wyłącznie ze zmiennych (--fp-badge-*) nadpisywanych z konfiguracji.
 * Desktop: kafelki obok siebie w odstępie 7px (zawijanie przy braku miejsca).
 * Mobile: jedna linia, przewijanie poziome palcem + scroll-snap.
 */

/* ---------- Podtytuł (spec z Figmy: 16px / 700 / 140%) ---------- */

.fp-product-subtitle {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 140%;
}

/* ---------- Kafelki ---------- */

.fp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
	container-type: inline-size;
}

.fp-badges__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 24px;
	background: var(--fp-badge-bg, var(--wp--preset--color--palette-color-1));
	color: var(--fp-badge-text, var(--wp--preset--color--palette-color-6));
	font-size: 1.0625rem;
	line-height: 1.3;
	white-space: nowrap;
}

.fp-badges__icon {
	flex: 0 0 auto;
	display: inline-flex;
}

.fp-badges__icon-img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* ---------- Mobile: jedna linia + przewijanie poziome ---------- */

@media (max-width: 781px) {

	.fp-badges {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;         /* Firefox */
		-ms-overflow-style: none;      /* stary Edge */

		/* Kafelki mogą dojechać do krawędzi ekranu bez ucinania cienia
		   fokusa — delikatny wewnętrzny oddech na osi Y. */
		padding: 2px 0;
	}

	.fp-badges::-webkit-scrollbar {
		display: none;                 /* Chrome / Safari */
	}

	.fp-badges__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* WCAG: kafelki nie są interaktywne, ale gdyby kiedyś dostały linki —
   czytelny fokus dziedziczony po sekcji. */
.fp-badges :focus-visible {
	outline: 2px solid var(--fp-badge-text, var(--wp--preset--color--palette-color-6));
	outline-offset: 2px;
}

@media print {
	.fp-badges {
		flex-wrap: wrap;
		overflow: visible;
	}
}