/*
 * STICKERLY — WARSTWA WSPÓLNA STYLU B, WERSJA 2.
 *
 * ⚠️ PIĘĆ RZECZY, KTÓRE ZMIENIŁY SIĘ WOBEC V1 — wszystkie z uwag Dawida z 10.09.
 *
 * 1. ⚠️ ODRĘCZNY KROJ MA TERAZ `!important` — I TO BYŁA PRZYCZYNA POŁOWY UWAG.
 *    W CSS Tempo siedzi `body, p, li, span, div { font-family:'Inter'!important }`.
 *    W v1 tylko JEDEN arkusz (boks produktowy) miał `!important`, więc dopisek
 *    „dobrane ręcznie, nie losowane" był jedynym, który wyszedł odręcznie —
 *    dokładnie ten, który Dawid pochwalił. Pozostałych osiem dostawało Inter.
 *    Ta sama mina co przy kafelkach czcionek konfiguratora (dziennik 02.09).
 *
 * 2. ⚠️ GRANAT JEST JAŚNIEJSZY I PRZESTAŁ BYĆ PŁASKI. Dawid: *„ten kolor
 *    granatowy jest za ciemny, nie pokrywa się z logo Stickerly"*. Miał rację:
 *    v1 kładła płaskie #1F2C58 (kolor stopki), a sygnet marki to #344A90.
 *    Teraz tła ciemne to GRADIENT wokół koloru marki plus miękka poświata —
 *    stąd bierze się głębia, o którą chodziło, a nie z ciemności.
 *
 * 3. ⚠️ PROMIENIE PODNIESIONE O JEDEN STOPIEŃ. Dawid: *„możemy trochę
 *    zaokrąglić bardziej te rogi"*. Skala zostaje czterostopniowa — bez niej
 *    wraca problem „wszystko ma ten sam narożnik" — ale każdy stopień idzie
 *    w górę. Doszedł piąty token: pigułka, WYŁĄCZNIE do przycisków boksu CTA.
 *
 * 4. ⚠️ CIEŃ JEST TERAZ TEŻ W SPOCZYNKU, ALE MIĘKKI I WARSTWOWY. v1 miała cień
 *    tylko przy najechaniu i dlatego wszystko leżało płasko na tle („wygląda
 *    surowo, korporacyjnie"). Dwie warstwy: wąska ciemna tuż pod krawędzią
 *    plus szeroka rozmyta niżej — tak wygląda cień na wizualizacjach.
 *
 * 5. Doszła ciepła biel i żółty akcent iskier — dwa kolory, których v1 nie
 *    miała, a bez których render z ChatGPT nie zgra się z resztą strony.
 *
 * ⚠️ V1 ZOSTAJE NIETKNIĘTA (`styl-b.css`). Obie wersje żyją równolegle na
 *    `/styl-b/` i `/styl-b-v2/`, żeby dało się je porównać obok siebie.
 */

:root {
	/* --- skala promieni (v2 — o stopień wyżej niż v1) --- */
	--st2-r-znacznik: 6px;    /* chip, plakietka, licznik, kafelek ikony 28–32 px */
	--st2-r-pole: 10px;       /* input, select, przycisk formularza, kafelek 40 px */
	--st2-r-karta: 14px;      /* karta produktu, kafel kategorii, zdjęcie */
	--st2-r-sekcja: 20px;     /* panel sekcji, nagłówek strony, duży boks */
	/*
	 * ⚠️ PIGUŁKI WYCOFANE — decyzja Dawida z 10.09, powtórzona trzy razy
	 * w jednej wiadomości: *„przyciski dajemy bardziej kwadratowe, a nie takie
	 * okrągłe… idziemy w to wszystko bardziej kwadratowe, czyli w ten wariant B"*.
	 * W v2 pigułka była w boksie CTA i pod siatką kategorii — oba miejsca
	 * wróciły do promienia pola. Token zostaje wyłącznie po to, żeby nie dało
	 * się go przypadkiem użyć: nic go już nie czyta.
	 */
	--st2-r-pigula: 999px; /* NIEUŻYWANE — patrz komentarz wyżej */

	/* --- paleta: granat wokół koloru marki, nie pod nim --- */
	--st2-granat: #344a90;         /* sygnet marki — punkt odniesienia */
	--st2-granat-hover: #2b3d78;
	--st2-granat-jasny: #3d55a0;
	--st2-granat-gleb: #24376f;    /* zamiast #1F2C58 z v1 */
	--st2-blekit: #6f83c7;
	--st2-blekit-jasny: #e8ecf8;
	--st2-blekit-mgla: #f2f5fd;
	--st2-grafit: #181b22;
	--st2-szary: #606775;
	--st2-obwodka: #dce1ea;
	--st2-tlo-chlodne: #f6f8fc;
	--st2-tlo-cieple: #fbfcff;
	--st2-iskra: #f5c24b;          /* żółte iskry z renderów — tylko akcent */
	--st2-blad: #c0392b;
	--st2-sukces: #17784b;

	/*
	 * ⚠️ CIEMNE TŁO TO GRADIENT, NIE KOLOR.
	 * Jedna wartość HEX daje płaską płytę — to jest to, co Dawid nazwał
	 * „jednolity kolor granatowy". Dwa przejścia plus poświata dają wrażenie
	 * światła padającego z góry, czyli to, co widać na jego wizualizacjach.
	 */
	--st2-tlo-ciemne:
		radial-gradient(120% 90% at 78% 8%, rgba(111, 131, 199, 0.36) 0%, rgba(111, 131, 199, 0) 55%),
		radial-gradient(90% 70% at 8% 92%, rgba(23, 35, 78, 0.55) 0%, rgba(23, 35, 78, 0) 60%),
		linear-gradient(158deg, #354c94 0%, #2c4183 42%, #223468 100%);

	/* Jasne tło sekcji — też z przejściem, inaczej wraca „surowo”. */
	--st2-tlo-jasne:
		radial-gradient(90% 120% at 88% 12%, rgba(111, 131, 199, 0.16) 0%, rgba(111, 131, 199, 0) 62%),
		linear-gradient(146deg, #ffffff 0%, #f7f9ff 58%, #eef2fd 100%);

	/* --- cienie warstwowe --- */
	--st2-cien-spok: 0 1px 2px rgba(24, 27, 34, 0.05), 0 6px 16px rgba(31, 44, 88, 0.07);
	--st2-cien-hover: 0 2px 4px rgba(24, 27, 34, 0.07), 0 14px 32px rgba(31, 44, 88, 0.16);
	--st2-cien-na-ciemnym: 0 2px 6px rgba(11, 18, 45, 0.30), 0 12px 28px rgba(11, 18, 45, 0.26);
}

/*
 * ⚠️ KROJ ODRĘCZNY — ten sam plik co w v1, ale reguła musi walczyć o swoje.
 * Gloria Hallelujah jest jedną z 27 czcionek konfiguratora: 13,5 kB, komplet
 * polskich znaków, już na naszym serwerze. Zero Google Fonts, zero zgód.
 *
 * ⚠️ `@font-face` MUSI być w prawdziwym arkuszu. Wstrzyknięty skryptem do
 * <style> trafia do CSSOM, ale przeglądarka nigdy nie pobiera pliku — to nas
 * kosztowało wieczór 02.09.
 */
@font-face {
	font-family: "stkf-gloria-hallelujah";
	src: url("../fonts/gloria-hallelujah.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ---------- dopisek odręczny ---------- */

/*
 * ⚠️ `!important` NA `font-family` JEST TU KONIECZNY, NIE NIECHLUJNY.
 * Reguła Tempo `body, p, li, span, div { font-family:'Inter'!important }` ma
 * `!important` w arkuszu autora, a taki bije nawet styl inline. Jedyne wyjście
 * to `!important` po naszej stronie przy wyższej specyficzności.
 * Dotyczy WYŁĄCZNIE tej jednej własności — reszta bloku jest zwykła.
 */
.st2-odrecznie,
.st2-odrecznie span,
p.st2-odrecznie,
span.st2-odrecznie,
div.st2-odrecznie {
	font-family: "stkf-gloria-hallelujah", "Segoe Script", "Bradley Hand", cursive !important;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.32;
	color: var(--st2-granat);
	/* Prosty dopisek czyta się jak zwykły tekst dziwną czcionką — dopiero kąt
	   robi z niego notatkę dopisaną na marginesie. */
	transform: rotate(-6deg);
	transform-origin: left center;
}

.st2-odrecznie--jasny,
.st2-odrecznie--jasny span { color: #dbe3fa !important; }
.st2-odrecznie--blekit,
.st2-odrecznie--blekit span { color: var(--st2-blekit) !important; }
.st2-odrecznie--prosto { transform: none; }
.st2-odrecznie--prawo { transform: rotate(5deg); transform-origin: right center; }

/*
 * ⚠️ NA TELEFONIE OZDOBNIKI ZNIKAJĄ, NIE KURCZĄ SIĘ.
 * Przy 375 px dopisek obrócony o 6 stopni razem ze strzałką zabiera ~90 px,
 * czyli jedną czwartą szerokości ekranu — a nie niesie informacji, bez której
 * cokolwiek przestaje działać.
 */
@media (max-width: 700px) {
	.st2-odrecznie,
	.st2-strzalka { display: none !important; }
}

/* ---------- strzałka odręczna ---------- */

.st2-strzalka {
	display: block;
	color: var(--st2-granat);
	pointer-events: none;
	overflow: visible;
}

.st2-strzalka path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.st2-strzalka--jasna { color: #9fb2e8; }

/* ---------- iskry (ten sam akcent co na renderach) ---------- */

.st2-iskry { position: absolute; pointer-events: none; color: var(--st2-iskra); }
.st2-iskry span {
	position: absolute;
	display: block;
	width: 3px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: center;
}

/* ---------- kafelek ikony ---------- */

.st2-ikonka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--st2-r-pole);
	background: var(--st2-blekit-jasny);
	color: var(--st2-granat);
}

.st2-ikonka svg { width: 20px; height: 20px; }

/* Na ciemnym panelu błękitny kafelek zlewa się z tłem — potrzebna biel. */
.st2-ikonka--ciemna {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.st2-ikonka--mala { width: 30px; height: 30px; border-radius: var(--st2-r-znacznik); }
.st2-ikonka--mala svg { width: 15px; height: 15px; }

/* ---------- nadtytuł ---------- */

.st2-nad {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.55rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--st2-granat);
}

.st2-nad--jasny { color: #a9baea; }
.st2-nad::before { content: ""; flex: 0 0 auto; width: 24px; height: 2px; background: currentColor; }
.st2-nad--bez::before { display: none; }
.st2-nad--srodek { justify-content: center; }
.st2-nad--srodek::before { display: none; }

/* ---------- przyciski ---------- */

.st2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--st2-granat);
	/*
	 * ⚠️ SAM `!important` NIE WYSTARCZY — TRZEBA TEŻ WYŻSZEJ SPECYFICZNOŚCI.
	 * W CSS Tempo siedzi `input[type="submit"], button:not(.icon), .button
	 * { border-radius: 1px !important }`. To selektor o specyficzności (0,1,1)
	 * — element plus klasa — a `.st2-btn` ma (0,1,0). Przy DWÓCH regułach
	 * z `!important` rozstrzyga specyficzność, więc nasza przegrywała
	 * i przyciski wracały do 1 px mimo wymuszenia. Zmierzone, nie zgadnięte.
	 *
	 * Poprawka to podwojenie klasy niżej (`.st2-btn.st2-btn`, czyli 0,2,0).
	 * Tu zostaje wartość bazowa dla elementów, których tamta reguła nie łapie.
	 */
	border-radius: var(--st2-r-pole) !important;
	background: var(--st2-granat);
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--st2-cien-spok);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.st2-btn:hover {
	background: var(--st2-granat-hover);
	color: #fff;
	box-shadow: var(--st2-cien-hover);
	transform: translateY(-1px);
	text-decoration: none;
}

.st2-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.st2-btn--drugi { background: #fff; color: var(--st2-granat); }
.st2-btn--drugi:hover { background: var(--st2-blekit-jasny); color: var(--st2-granat-hover); }
/*
 * ⚠️ „Szeroki" to teraz TYLKO większy odstęp poziomy, bez zmiany narożnika.
 * Klasa została pod tą samą nazwą w markupie, ale zachowanie jest inne —
 * to celowe, żeby jedno miejsce w CSS przestawiło wszystkie przyciski naraz.
 */
.st2-btn--szeroki { padding-inline: 1.9rem; }
.st2-btn--na-ciemnym { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.st2-btn--na-ciemnym:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ---------- ptaszek ---------- */

.st2-ptaszek {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--st2-granat);
}

/*
 * ⚠️ KÓŁKO POD PTASZKIEM JEST KONIECZNE, NIE OZDOBNE.
 * Sam granatowy haczyk znika na czarnej, granatowej i ciemnozielonej folii —
 * a takich mamy w palecie sześć. Biały znak na granatowym krążku jest czytelny
 * na wszystkich 38 kolorach.
 */
.st2-ptaszek::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 9px;
	margin: -6px 0 0 -2.5px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.st2-ptaszek--blekit { background: var(--st2-blekit); }

/* ---------- slot na render / zdjęcie ---------- */

/*
 * ⚠️ SLOT MA WYGLĄDAĆ NA DECYZJĘ, NIE NA BRAK PLIKU.
 * Do czasu dostarczenia renderów stoją tu kontury wykrojnika — ten sam motyw,
 * z którego zbudowane są kafle hero strony głównej. Proporcje są ustalone,
 * więc podmiana grafiki niczego nie przesunie.
 */
.st2-slot {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: var(--st2-r-karta);
	background: var(--st2-tlo-chlodne);
}

.st2-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st2-slot--przezroczysty { background: transparent; overflow: visible; }
.st2-slot--ciemny { background: rgba(255, 255, 255, 0.05); }

.st2-wykrojniki { position: absolute; inset: 14%; pointer-events: none; }

.st2-wykrojniki span {
	position: absolute;
	inset: 0;
	border: 2px solid rgba(52, 74, 144, 0.18);
	border-radius: var(--st2-r-karta);
	transform: rotate(var(--r, 0deg)) scale(var(--s, 1));
}

.st2-slot--ciemny .st2-wykrojniki span,
.st2-slot--przezroczysty .st2-wykrojniki span { border-color: rgba(255, 255, 255, 0.22); }

.st2-wykrojniki span:nth-child(1) { --r: -8deg; --s: 0.94; }
.st2-wykrojniki span:nth-child(2) { --r: 6deg;  --s: 0.76; }
.st2-wykrojniki span:nth-child(3) { --r: -3deg; --s: 0.56; }

/*
 * ⚠️ TEN BLOK MUSI STAĆ NA KOŃCU PLIKU. Przy równej specyficzności wygrywa
 * reguła późniejsza — to ta sama zasada, która dwa razy jednego dnia (07.09)
 * kosztowała nas granatowe tło tam, gdzie miało być jasne.
 *
 * Podwojona klasa daje (0,2,0) i bije `button:not(.icon)` z CSS Tempo (0,1,1).
 * Dotyczy WYŁĄCZNIE promienia — reszta wyglądu przycisku jest wyżej, bez
 * żadnego wymuszenia.
 */
.st2-btn.st2-btn { border-radius: var(--st2-r-pole) !important; }
.st2-btn.st2-btn--szeroki { padding-inline: 1.9rem; }

/* Te same zasady dla przycisków wewnątrz komponentów, które Flatsome też łapie. */
.st2-bp-zakladka.st2-bp-zakladka,
.st2-bp-nav.st2-bp-nav { border-radius: var(--st2-r-pole) !important; }

.st2-bp-serce.st2-bp-serce { border-radius: var(--st2-r-znacznik) !important; }

@media (prefers-reduced-motion: reduce) {
	.st2-btn { transition: none; }
	.st2-btn:hover { transform: none; }
}