/*
 * Pasek „Zamów w ciągu 2 h 14 min, dostawa jutro" — jedna linia przy przycisku koszyka.
 *
 * ⚠️ WYGLĄD PO UWADZE DAWIDA Z 19.09: „ta informacja ginie w niebieskich
 * kolorach". Pierwsza wersja była płaskim błękitem #E8ECF8 tuż pod granatowym
 * przyciskiem i obok błękitnego boksu „Twoja konfiguracja" — trzy odcienie tej
 * samej rodziny obok siebie. Teraz domyślnie: biel z granatową kreską z lewej
 * (język kart z reszty witryny), tekst grubszy, a odliczanie i dzień dostawy
 * jako granatowa pigułka z białą cyfrą — to one mają zatrzymać wzrok.
 *
 * Paleta: #344A90 granat · #181B22 grafit · #606775 szary · #DCE1EA obwódka ·
 * #E8ECF8 błękit jasny.
 */

.st-wys {
	--w-tlo: #fff;
	--w-obw: #dce1ea;
	--w-kreska: #344a90;
	--w-tekst: #181b22;
	--w-akcent: #344a90;
	--w-pigulka-tlo: #344a90;
	--w-pigulka-tekst: #fff;
	--w-dopisek: #606775;

	/* ⚠️ `form.cart` Flatsome to flex-row z zawijaniem: bez pełnej podstawy
	   pasek stawał się wąskim kafelkiem OBOK przycisku (zmierzone 19.09). */
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.85rem 0 0;
	padding: 0.6rem 0.9rem 0.6rem 0.8rem;
	border: 1px solid var(--w-obw);
	border-left: 4px solid var(--w-kreska);
	border-radius: 8px;
	background: var(--w-tlo);
	color: var(--w-tekst);
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1.4;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(24, 27, 34, 0.05);
}

/* Warianty do wyboru w panelu. */
.st-wys--blekit { --w-tlo: #e8ecf8; --w-obw: #e8ecf8; --w-kreska: #344a90; }
.st-wys--granat {
	--w-tlo: #344a90;
	--w-obw: #344a90;
	--w-kreska: #1f2c58;
	--w-tekst: #fff;
	--w-akcent: #fff;
	--w-pigulka-tlo: #fff;
	--w-pigulka-tekst: #344a90;
	--w-dopisek: rgba(255, 255, 255, 0.72);
}

.st-wys--koszyk { margin: 0 0 1rem; }

/*
 * WARNING ODSTEP DOLEM MUSI BYC TAKI SAM JAK GORA.
 * Pasek stoi miedzy [Na stanie] a pierwszym polem konfiguratora (przy
 * produkcie prostym - przyciskiem [Dodaj do koszyka]). Sam margines gorny
 * dawal 21 px nad i ZERO pod - pasek sklejal sie z tym, co pod nim,
 * niezaleznie od typu produktu (zgloszone przez Dawida 23.09, zmierzone
 * na naklejce i na projektorze).
 *
 * WARNING TYLKO WARIANT PRODUKTOWY. Koszyk ma wlasna regule wyzej, a pasek
 * wstawiany shortcodem moze stac w dowolnym miejscu strony - bazowego
 * marginesu nie ruszamy.
 */
.st-wys--produkt { margin-bottom: 1.3rem; }

.st-wys-logo,
.st-wys-ikona {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.st-wys-logo-img {
	display: block;
	height: 34px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
}

/* Logo InPost ma ciemny napis — na granatowym wariancie dostaje białą płytkę. */
.st-wys--granat .st-wys-logo { background: #fff; border-radius: 6px; padding: 3px 6px; }

.st-wys-svg { width: 26px; height: 26px; stroke: var(--w-akcent); }

.st-wys-tresc {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.st-wys-tekst { font-weight: 500; }

.st-wys-b {
	color: var(--w-akcent);
	font-weight: 700;
	white-space: nowrap;
}

/* Odliczanie i termin: pigułka, żeby oko trafiało w liczbę. */
.st-wys-b--czas,
.st-wys-b--termin {
	display: inline-block;
	padding: 0.05em 0.55em;
	border-radius: 999px;
	background: var(--w-pigulka-tlo);
	color: var(--w-pigulka-tekst);
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}

.st-wys-dopisek {
	font-size: 0.74rem;
	color: var(--w-dopisek);
}

.st-wys[hidden] { display: none !important; }

@media (max-width: 600px) {
	.st-wys { font-size: 0.84rem; line-height: 1.35; padding: 0.5rem 0.7rem 0.5rem 0.65rem; gap: 0.55rem; }
	.st-wys-logo-img { height: 26px; }
	.st-wys-dopisek { font-size: 0.68rem; }
}