/* ThorPC – Boska Kuźnia – style (v1.1.0)
 * Theming per-build steruje akcentem przez --theme-hex/--theme-rgb (i wariant
 * bezpieczny do czytania --theme-ink oraz kontrastowy na wypełnieniu --theme-on),
 * ustawiane z JS na #thorpc-kuznia. Estetyka: ciemny antracyt + jasny tekst +
 * cyjan jako akcent, zero zaokrągleń — ostre, proste krawędzie wszędzie.
 */
.thorpc-kuznia,
.thorpc-tracker,
.thorpc-hero {
	--theme-hex: #1AA3C9;
	--theme-rgb: 26, 163, 201;
	--theme-ink: #1AA3C9;
	--theme-on: #06121a;
	--bg: #14171C;
	--panel: #1B1F26;
	--stroke: rgba(255, 255, 255, .10);
	--ink: #EDEFF2;
	--muted: #8B94A0;
	--inverse: #EDEFF2;
	--inverse-on: #0B0D10;
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	max-width: 760px;
	margin: 0 auto;
}
.thorpc-kuznia,
.thorpc-tracker,
.thorpc-hero,
.kuznia-kreator,
.kuznia-board,
.tk-box, .tk-opt, .tk-spec, .tk-cta, .tk-bar, .tk-raty, .tk-mon__thumb, .tk-mon__btn,
.tk-trust__tile, .tk-trust__ico, .tk-cattabs, .tk-cattab, .tk-fpsrow__track, .tk-fpsrow__fill,
.thorpc-fpstoggle, .fk-card, .fk-dot, .fk-btn, .fk-fpsbar, .fk-summary, .fk-included,
.fk-footer, .kb-card, .kb-counter, .kb-badge, .kb-card__nr, .kb-step__dot, .kb-empty,
.thorpc-tracker, .tk-step { border-radius: 0 !important; }

.thorpc-kuznia {
	display: flex; flex-direction: column; gap: 22px;
	/* .images i .summary stoją obok siebie na floatach z motywu-rodzica
	   (Storefront). Wcześniej robiła to za nas natywna zakładka "Opis",
	   która renderowała się tuż przed tym blokiem i przy okazji czyściła
	   floaty. Po jej usunięciu (punkt 3) ten blok jest PIERWSZY po
	   .summary — bez clear:both próbowałby się zmieścić w wąskiej
	   szczelinie między zdjęciem a .summary zamiast zejść pełną
	   szerokością niżej (stąd tekst łamany litera po literze). */
	clear: both;
	width: 100%;
}
.thorpc-skeleton { padding: 48px; text-align: center; color: var(--muted); letter-spacing: .04em; }

/* nagłówek */
.tk-tagline {
	font-size: clamp(18px, 3.2vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 14px;
	color: var(--ink);
}
.tk-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tk-spec {
	background: var(--panel);
	border: 1px solid var(--stroke);
	border-left: 3px solid var(--theme-hex);
	padding: 10px 12px;
}
.tk-spec__k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tk-spec__v { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }

/* sekcje */
.tk-h {
	font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
	color: var(--muted); margin: 0 0 12px;
}

/* komponenty */
.tk-group { margin-bottom: 16px; }
.tk-group__name { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.tk-group__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tk-opt {
	display: flex; justify-content: space-between; align-items: center;
	gap: 10px; text-align: left; cursor: pointer;
	background: var(--panel); border: 1px solid var(--stroke);
	padding: 12px 14px; color: var(--ink);
	transition: border-color .15s, background .15s;
}
/* Storefront nakłada na każdy <button> własne tło/kolor tekstu w :hover i
   :focus, a na dotyku :hover zostaje "przyklejony" po tapnięciu aż do
   dotknięcia czegoś innego — stąd wyszarzona etykieta ostatnio wybranej
   pigułki na telefonie. Ustawiamy jawnie tło i kolor w KAŻDYM stanie, a
   akcent koloru buildu na ramce zostawiamy tylko dla prawdziwej myszy. */
.tk-opt:hover, .tk-opt:focus, .tk-opt:active,
.tk-opt:focus-visible {
	background: var(--panel); color: var(--ink);
	outline: none; box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
	.tk-opt:not(.is-active):hover { border-color: var(--theme-hex); }
}
.tk-opt.is-active,
.tk-opt.is-active:hover, .tk-opt.is-active:focus, .tk-opt.is-active:active {
	/* Ta sama grubość ramki co stan domyślny (1px) — różni się tylko kolor
	   i tło. Wcześniej aktywna pigułka miała ramkę 2px, przez co jej
	   faktyczny rozmiar (bez box-sizing:border-box w tym miejscu) różnił
	   się o te dodatkowe piksele od sąsiednich, nieaktywnych pigułek —
	   stąd "nierówna" ramka w tym samym rzędzie. */
	border: 1px solid var(--ink);
	background: var(--bg);
	color: var(--ink);
}
.tk-opt__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.tk-opt__delta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tk-opt.is-active .tk-opt__delta { color: var(--theme-ink); font-weight: 700; }

/* --- Wybór obudowy na stronie gotowego zestawu ("Zmień obudowę") ---
   Karty ze zdjęciami zamiast pigułek, ale te same klasy .tk-group__opts/
   .tk-opt, więc cena, raty i dodawanie do koszyka liczą się tym samym
   kodem co RAM/Dysk. Dane (nazwy, opisy, zdjęcia, ceny) z panelu
   ThorPC → Boska Kuźnia → Obudowy. */
.tk-case__toggle {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	background: transparent; border: 1px solid var(--theme-hex);
	color: var(--theme-ink); font-size: 12px; font-weight: 800; text-transform: uppercase;
	letter-spacing: .04em; padding: 11px 14px; cursor: pointer;
	transition: background .15s, color .15s;
}
.tk-case__toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.tk-case__toggle:hover, .tk-case__toggle:focus, .tk-case__toggle:active {
	background: transparent; color: var(--theme-ink); outline: none; box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
	.tk-case__toggle:hover { background: var(--theme-hex); color: var(--theme-on); }
}
/* Atrybut hidden musi wygrać z .tk-group__opts { display: grid } — bez tego
   siatka jest widoczna od razu, a przycisk "Zmień obudowę" wygląda na
   niedziałający (przełącza hidden, ale display:grid i tak ją rysuje). */
.tk-case__grid[hidden] { display: none !important; }
.tk-case__grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	gap: 8px !important; margin-top: 10px;
	max-height: 420px; overflow-y: auto; padding-right: 4px;
}
.tk-case__card {
	flex-direction: column !important; align-items: stretch !important;
	justify-content: flex-start !important; text-align: center; padding: 10px !important;
	gap: 6px !important;
}
.tk-case__img {
	height: 92px; display: flex; align-items: center; justify-content: center;
	background: var(--bg); border: 1px solid var(--stroke);
}
.tk-case__img img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; }
.tk-case__img svg { width: 32px; height: 32px; color: var(--stroke); }
.tk-case__name { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.tk-case__desc {
	font-size: 11px; line-height: 1.4; color: var(--muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-case__card .tk-opt__delta { margin-top: auto; font-size: 12px; }
@media (max-width: 560px) {
	.tk-case__grid { grid-template-columns: 1fr 1fr !important; max-height: 340px; }
	.tk-case__img { height: 76px; }
	.tk-case__bar { flex-wrap: wrap; }
}

/* FPS — przełącznik rozdzielczości + rozwijalna lista (nie siatka "okładek") */
.tk-fps__heading {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
	color: var(--ink); margin: 0 0 12px; font-weight: 700;
}
.tk-fps__mon { width: 17px; height: 17px; color: var(--theme-hex); flex: 0 0 auto; }
@keyframes tpBoltPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }

.tk-cattabs { display: flex; flex-wrap: wrap; gap: 2px; background: var(--panel); border: 1px solid var(--stroke); padding: 3px; margin-bottom: 14px; }
.tk-cattab {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	flex: 1 1 0; min-width: 0;
	border: 0; background: transparent; color: var(--muted); cursor: pointer;
	font-size: 12.5px; font-weight: 700; padding: 9px 10px; line-height: 1.3;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}
.tk-cattab span:last-child { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
	.tk-cattab { flex: 1 1 40%; }
}
.tk-cattab__ico { width: 16px; height: 16px; flex: 0 0 auto; }
.tk-cattab__ico svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
	.tk-cattab:not(.is-active):hover { color: var(--ink); }
}
.tk-cattab:focus, .tk-cattab:active { outline: none; box-shadow: none; }
.tk-cattab:not(.is-active):hover, .tk-cattab:not(.is-active):focus, .tk-cattab:not(.is-active):active { background: transparent; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .tk-cattab:not(.is-active):hover { color: var(--ink); } }
.tk-cattab.is-active, .tk-cattab.is-active:hover, .tk-cattab.is-active:focus, .tk-cattab.is-active:active { background: var(--inverse); color: var(--inverse-on); }
.tk-cattab:active { transform: scale(.96); }

/* Cały panel listy "wjeżdża" delikatnie przy każdej zmianie kategorii —
   oprócz animacji poszczególnych pasków (thorpc-fpsrow, niżej) to dodatkowa
   warstwa ruchu na poziomie całego kontenera, żeby przełączenie wyraźnie
   "czuć". */
.thorpc-fpslist { display: flex; flex-direction: column; animation: tpFpsListIn .32s ease both; }
@keyframes tpFpsListIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .thorpc-fpslist { animation: none; } }

.thorpc-fpsrow {
	display: grid; grid-template-columns: 20px 1fr 2fr auto; align-items: center; gap: 10px;
	padding: 9px 2px; border-bottom: 1px solid var(--stroke);
	animation: tpRowIn .35s ease both;
}
.thorpc-fpsrow:last-child { border-bottom: 0; }
.thorpc-fpsrow.is-hidden { display: none; }
@keyframes tpRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.thorpc-fpsrow__icon { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; transition: color .2s, transform .2s; }
.thorpc-fpsrow:hover .thorpc-fpsrow__icon { color: var(--theme-hex); transform: scale(1.18) rotate(-6deg); }
.thorpc-fpsrow__game { font-size: 13px; font-weight: 600; color: var(--ink); }
.thorpc-fpsrow__track { height: 8px; background: var(--panel); border: 1px solid var(--stroke); overflow: hidden; }
.thorpc-fpsrow__fill { height: 100%; background: var(--theme-hex); width: 0; transition: width .5s cubic-bezier(.22,1,.36,1); }
.thorpc-fpsrow__val {
	font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
	font-size: 13px; font-weight: 700; color: var(--theme-ink); white-space: nowrap; min-width: 54px; text-align: right;
}

@media (prefers-reduced-motion: reduce) {
	.thorpc-fpsrow { animation: none; }
	.thorpc-fpsrow__fill { transition: none; }
}

/* pasek ceny + CTA */
.tk-bar {
	position: sticky; bottom: 0;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
	border: 1px solid var(--stroke); padding: 14px 16px;
}
.tk-price__k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tk-price__v { display: block; font-size: clamp(20px, 4vw, 26px); font-weight: 800; }
.tk-cta {
	border: 0; cursor: pointer; font-size: 15px; font-weight: 700;
	color: var(--theme-on); background: var(--theme-hex);
	padding: 13px 24px;
	transition: filter .15s;
}
.tk-cta:hover, .tk-cta:focus, .tk-cta:active { color: var(--theme-on); background: var(--theme-hex); outline: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tk-cta:hover:not(:disabled) { filter: brightness(1.06); } }
.tk-cta:active:not(:disabled) { transform: translateY(1px); }
.tk-cta:disabled { opacity: .6; cursor: default; }

.tk-notice { font-size: 14px; min-height: 20px; }
.tk-notice.is-ok { color: #1a7a41; }
.tk-notice.is-ok a { color: var(--theme-ink); font-weight: 700; }
.tk-notice.is-err { color: #b3261e; }
.thorpc-error, .tk-muted { color: var(--muted); font-size: 14px; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.thorpc-fpsrow__fill, .tk-cta, .tk-opt { transition: none; }
}

/* ---------- TRACKER ---------- */
.thorpc-tracker { background: var(--bg); border: 1px solid var(--stroke); padding: 24px; }
.thorpc-tracker__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.thorpc-tracker__form { display: flex; flex-wrap: wrap; gap: 10px; }
.thorpc-tracker__form input {
	flex: 1 1 180px; background: var(--panel); border: 1px solid var(--stroke);
	color: var(--ink); padding: 11px 13px; font-size: 14px;
}
.thorpc-tracker__form input:focus { outline: 2px solid var(--theme-hex); outline-offset: 1px; }
.thorpc-tracker__form button {
	border: 0; cursor: pointer; font-weight: 700; color: var(--theme-on);
	background: var(--theme-hex); padding: 11px 22px;
}
.thorpc-tracker__result { margin-top: 18px; }

.tk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tk-step { text-align: center; padding: 12px 6px; border: 1px solid var(--stroke); }
.tk-step__dot {
	width: 34px; height: 34px; margin: 0 auto 8px;
	display: flex; align-items: center; justify-content: center; font-weight: 800;
	background: var(--panel); color: var(--muted);
}
.tk-step__label { font-size: 13px; font-weight: 700; }
.tk-step__desc { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
.tk-step.is-done .tk-step__dot { background: var(--panel); color: var(--ink); }
.tk-step.is-active { border-color: var(--ink); }
.tk-step.is-active .tk-step__dot { background: var(--inverse); color: var(--inverse-on); }

@media (max-width: 560px) {
	.tk-steps { grid-template-columns: repeat(2, 1fr); }
	.tk-bar { flex-direction: column; align-items: stretch; }
	.tk-cta { width: 100%; }
}

/* =========================================================================
 * PUBLICZNY BOARD "KUŹNIA W ROBOCIE" [kuznia_board]
 * -------------------------------------------------------------------------
 * v5.7.0 — rozdzielenie dwóch informacji, które wcześniej dzieliły jeden kolor:
 *
 *  --c-*  = KOLOR BUILDU (theme_hex produktu). Zostaje na nazwie zestawu
 *           i lewej krawędzi karty — to tożsamość maszyny.
 *  --s-*  = KOLOR STATUSU (stały, ten sam dla każdego buildu). Trafia na
 *           badge, licznik i aktywny krok — to informacja "gdzie to jest".
 *
 * Wcześniej status brał kolor buildu, więc "Na kowadle" na srebrnym Thorze
 * wyglądało identycznie jak "Gotowe" na srebrnym Thorze. Klasa .kb-s1..4
 * na karcie (ustawiana w PHP wg etapu) podstawia właściwy zestaw --s-*.
 * ========================================================================= */
.kuznia-board {
	--c-hex: #1AA3C9;
	--c-rgb: 26, 163, 201;
	--c-ink: #1AA3C9;
	--bg: #101317; --panel: #1B1F26; --stroke: rgba(255, 255, 255, .10);
	--ink: #EDEFF2; --muted: #8B94A0; --inverse: #EDEFF2; --inverse-on: #0B0D10;

	/* Paleta statusów — jasna strona spektrum, bo tło jest ciemne.
	   Poprzednie wartości (#0E7FA0, #b5730c, #6b3fb8, #1a7a41) były dobrane
	   pod BIAŁE tło i na antracycie wychodziły brudne i przygaszone. */
	--s1: #7C8B99; --s1-rgb: 124, 139, 153;   /* Przyjęte — stal, czeka       */
	--s2: #E67E22; --s2-rgb: 230, 126,  34;   /* Na kowadle — ogień, w robocie */
	--s3: #9B6BE0; --s3-rgb: 155, 107, 224;   /* Testy — elektryka             */
	--s4: #2ECC71; --s4-rgb:  46, 204, 113;   /* Gotowe — zieleń               */
	--step-todo: #39414C;                     /* krok jeszcze przed nami       */
	--step-done: #3F7D5C;                     /* krok odhaczony, ale już cichy */

	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	border: 1px solid var(--stroke);
	padding: clamp(20px, 4vw, 44px);
	max-width: 1180px;
	margin: 40px auto 60px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.kb-head { margin-bottom: 26px; }
.kb-title {
	font-family: "Russo One", system-ui, sans-serif;
	font-size: clamp(28px, 5vw, 46px);
	margin: 0; color: var(--ink);
}
.kb-title::after { content: ""; display: block; width: 90px; height: 3px; background: var(--c-hex); margin-top: 12px; }
.kb-sub { color: var(--muted); margin: 6px 0 0; font-weight: 600; }

/* Liczniki — kropka w kolorze statusu zamiast kolorowania samej cyfry.
   Cyfra zostaje biała (czyta się z odległości), kolor niesie kropka. */
.kb-counters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kb-counter {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
	background: var(--panel); border: 1px solid var(--stroke); padding: 7px 14px;
}
.kb-counter::before {
	content: ""; width: 8px; height: 8px; flex: 0 0 8px;
	background: var(--dot, var(--muted));
}
.kb-counter b { color: var(--ink); margin-right: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.kb-c1 { --dot: var(--s1); } .kb-c2 { --dot: var(--s2); }
.kb-c3 { --dot: var(--s3); } .kb-c4 { --dot: var(--s4); }

.kb-list { display: grid; gap: 14px; }
.kb-card {
	background: var(--panel);
	border: 1px solid var(--stroke);
	border-left: 4px solid var(--c-hex);  /* kolor BUILDU — tożsamość maszyny */
	padding: 18px 20px;
	transition: border-color .18s ease, background .18s ease;
}
.kb-card:hover { border-color: rgba(255, 255, 255, .18); border-left-color: var(--c-hex); }

/* Podstawienie palety statusu wg klasy z PHP. */
.kb-card.kb-s1 { --s-hex: var(--s1); --s-rgb: var(--s1-rgb); }
.kb-card.kb-s2 { --s-hex: var(--s2); --s-rgb: var(--s2-rgb); }
.kb-card.kb-s3 { --s-hex: var(--s3); --s-rgb: var(--s3-rgb); }
.kb-card.kb-s4 { --s-hex: var(--s4); --s-rgb: var(--s4-rgb); }

.kb-card__grid {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas: "name nr badge" "meta meta meta";
	column-gap: 12px; row-gap: 10px;
	align-items: center;
}
.kb-card__name { grid-area: name; font-family: "Russo One", system-ui, sans-serif; font-size: 20px; color: var(--c-ink); min-width: 0; }
.kb-card__nr {
	grid-area: nr;
	font-size: 12px; font-family: ui-monospace, monospace; color: var(--muted);
	background: rgba(0, 0, 0, .22); border: 1px solid var(--stroke); padding: 4px 10px; white-space: nowrap;
}
/* Badge statusu — kolor STAŁY dla danego etapu, niezależny od buildu. */
.kb-badge {
	grid-area: badge; justify-self: end; min-width: 0;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	white-space: nowrap;
	color: var(--s-hex, var(--muted));
	background: rgba(var(--s-rgb, 139, 148, 160), .12);
	border: 1px solid rgba(var(--s-rgb, 139, 148, 160), .5);
	padding: 5px 11px;
}
.kb-badge::before {
	content: ""; width: 7px; height: 7px; flex: 0 0 7px;
	background: var(--s-hex, var(--muted));
}
/* Etap "Na kowadle" — jedyny, który dostaje puls. Reszta stoi spokojnie,
   żeby ruch na stronie znaczył "to się właśnie dzieje", a nie był dekoracją. */
.kb-card.kb-s2 .kb-badge::before { animation: tpBoltPulse 2.4s ease-in-out infinite; }

.kb-card__meta { grid-area: meta; display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin: 10px 0 16px; }

@media (max-width: 640px) {
	/* Stały układ na mobile: nazwa sama, potem numer+status razem, potem
	   miejscowość+data razem, potem etapy — dokładnie tak jak ustalone. */
	.kb-card__grid {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "name name" "nr badge" "meta meta";
	}
	.kb-badge { justify-self: start; }
	.kb-card__nr::after { content: "—"; margin-left: 8px; color: var(--stroke); }
}

/* -------------------------------------------------------------------------
 * Pasek kroków. Poprzednia wersja miała odwróconą hierarchię: krok NIEZROBIONY
 * był prawie biały (#dfe3e7 — resztka po jasnym motywie), a zrobiony ciemno
 * zielony. Na antracycie oko czytało to jako usterkę renderowania. Teraz:
 * todo = ciemny i cichy, done = przygaszona zieleń, active = kolor statusu.
 * ------------------------------------------------------------------------- */
.kb-steps { display: flex; align-items: flex-start; }
.kb-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 78px; }
.kb-step__dot { width: 12px; height: 12px; background: var(--step-todo); transition: background .2s, box-shadow .2s; }
.kb-step__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #6B7480; text-align: center; line-height: 1.3; }
.kb-step.is-done .kb-step__dot { background: var(--step-done); }
.kb-step.is-done .kb-step__lbl { color: var(--muted); }
.kb-step.is-active .kb-step__dot { background: var(--s-hex, var(--c-hex)); box-shadow: 0 0 0 4px rgba(var(--s-rgb, var(--c-rgb)), .18); animation: tpBoltPulse 2.4s ease-in-out infinite; }
.kb-step.is-active .kb-step__lbl { color: var(--s-hex, var(--ink)); font-weight: 700; }
.kb-line { flex: 1 1 auto; height: 2px; background: var(--step-todo); margin: 5px -6px 0; }
.kb-line.is-done { background: var(--step-done); }

.kb-empty { color: var(--muted); padding: 30px; text-align: center; border: 1px dashed var(--stroke); }

@media (max-width: 620px) {
	/* Etykiety schodziły do 8px — poniżej progu czytelności, litery zlewały się
	   w plamę. Zamiast zmniejszać czcionkę, zwężamy kolumnę i ścieśniamy tracking. */
	.kb-step { width: 58px; }
	.kb-step__lbl { font-size: 10px; letter-spacing: .01em; }
	.kb-line { min-width: 10px; }
	.kb-card__meta { gap: 12px; font-size: 12px; }
}
@media (max-width: 400px) {
	.kb-step { width: 48px; }
	.kb-step__lbl { font-size: 9px; }
}

/* =========================================================================
 * v0.9 — bogaty układ strony produktu (W co zagrasz, FPS, lore, specy)
 * ========================================================================= */
.tk-box {
	border: 1px solid var(--stroke);
	padding: 18px 20px;
	background: var(--bg);
	margin-bottom: 6px;
}
.tk-box__title {
	color: var(--theme-ink); font-weight: 800; text-transform: uppercase;
	letter-spacing: .03em; font-size: 1em; margin-bottom: 12px;
	padding-bottom: 8px; border-bottom: 1px solid var(--stroke);
}
.tk-play { font-size: .95em; line-height: 1.65; color: var(--ink); margin: 0; }
.tk-note { color: var(--muted); font-size: .8em; font-style: italic; margin: 12px 0 0; }

.tk-list { list-style: none; padding: 0; margin: 0; }
.tk-list li { font-size: .9em; line-height: 1.55; padding: 6px 0; border-bottom: 1px solid var(--stroke); }
.tk-list li:last-child { border-bottom: 0; }
.tk-list b { color: var(--theme-ink); }

/* "Podłączasz i grasz" jako 3 kafelki w stylu sekcji zaufania — większe
   ikony (44px, jak .tk-trust__ico) zamiast małych inline jak w .tk-list. */
.tk-connect { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 4px; text-align: center; }
.tk-connect__ico { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--theme-ink); }
.tk-connect__ico svg { width: 100%; height: 100%; }
.tk-connect__h { font-weight: 800; color: var(--ink); margin-bottom: 6px; font-size: 1em; }
.tk-connect__p { font-size: .88em; line-height: 1.5; color: var(--muted); margin: 0; }
@media (max-width: 560px) {
	.tk-connect { grid-template-columns: 1fr; gap: 14px; }
	.tk-connect__ico { width: 32px; height: 32px; margin-bottom: 8px; }
	.tk-connect__h { font-size: .95em; }
	.tk-connect__p { font-size: .85em; }
}
.tk-connect__close {
	margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--stroke);
	text-align: center;
}
.tk-connect__close-h {
	font-family: "Russo One", system-ui, sans-serif; font-weight: 400;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--theme-ink); font-size: 1.05em; margin: 0 0 10px;
}
.tk-connect__close-p {
	font-size: .92em; line-height: 1.6; color: var(--ink);
	max-width: 640px; margin: 0 auto;
}

/* lore */
.tk-lore {
	border: 1px dashed var(--theme-hex); padding: 16px 20px;
	background: var(--panel); margin-bottom: 6px;
}
.tk-lore__title { color: var(--theme-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.tk-lore__body { font-size: .88em; line-height: 1.55; color: var(--ink); margin: 0; }
/* Jeśli w treści (natywny Opis WooCommerce) jest prawdziwy nagłówek —
   np. "Alfheim – Świetliste Królestwo Elfów" wpisany jako Nagłówek 2/3 w
   edytorze, a nie zwykły akapit — dostaje ten sam język wizualny co
   nagłówki na stronie głównej: Russo One, duża litera, kolor buildu. Sam
   akapit tekstu (h1-h6 wewnątrz .tk-lore__body) łapie to automatycznie,
   bez potrzeby dodatkowego kodu — wystarczy sformatować linijkę jako
   nagłówek w edytorze WordPressa zamiast zwykłego tekstu. */
.tk-lore__body h1, .tk-lore__body h2, .tk-lore__body h3,
.tk-lore__body h4, .tk-lore__body h5, .tk-lore__body h6 {
	font-family: "Russo One", system-ui, sans-serif;
	font-weight: 400;
	color: var(--theme-ink);
	text-transform: uppercase;
	letter-spacing: .01em;
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	margin: 0 0 .5em;
	line-height: 1.2;
}

/* =========================================================================
 * BOSKA KUŹNIA — kreator 5-krokowy [kuznia_kreator], v1.0
 * Dane z panelu ThorPC → Boska Kuźnia. Kolor: --c-* ustawiany w JS po
 * wyborze Pakietu Mocy (domyślnie cyjan strony); karty pakietów mają
 * własny kolor per karta (--set-*).
 * ========================================================================= */
.kuznia-kreator {
	--c-hex: #1AA3C9; --c-rgb: 26,163,201; --c-ink: #1AA3C9; --c-on: #06121a;
	--bg: #14171C; --panel: #1B1F26; --stroke: rgba(255, 255, 255, .10);
	--ink: #EDEFF2; --muted: #8B94A0; --inverse: #EDEFF2; --inverse-on: #0B0D10;
	--theme-hex: var(--c-hex); --theme-rgb: var(--c-rgb); --theme-ink: var(--c-ink);
	color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	max-width: 1200px; margin: 0 auto; padding: 10px 0 90px;
}
.kuznia-kreator[data-loading] .thorpc-skeleton { text-align: center; color: var(--muted); padding: 60px 0; }
.fk-head { text-align: center; margin-bottom: 30px; }
.fk-title { font-family: "Russo One", system-ui, sans-serif; font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; color: var(--ink); margin: 0; letter-spacing: .01em; }
.fk-sub { color: var(--muted); font-size: 1.1rem; margin: 8px 0 0; }

/* pasek postępu */
.fk-nav { display: flex; justify-content: space-between; max-width: 820px; margin: 0 auto 34px; position: relative; }
.fk-nav::before { content: ''; position: absolute; top: 20px; left: 30px; right: 30px; height: 2px; background: var(--stroke); }
.fk-navstep { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 92px; cursor: default; }
.fk-navstep.is-avail { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
	.fk-navstep.is-avail:hover .fk-dot { border-color: var(--c-hex); color: var(--c-ink); }
}
.fk-dot { width: 40px; height: 40px; background: var(--panel); border: 2px solid var(--stroke); display: flex; align-items: center; justify-content: center; font-weight: 800; transition: all .3s; color: var(--muted); }
.fk-navstep.is-active .fk-dot { border-color: var(--c-hex); color: var(--c-ink); box-shadow: 0 0 0 4px rgba(var(--c-rgb), .18); }
.fk-navstep.is-done .fk-dot { border-color: var(--c-hex); background: var(--c-hex); color: var(--c-on); }
.fk-navlbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.fk-navstep.is-active .fk-navlbl { color: var(--ink); }

.fk-stephead { font-family: "Russo One", system-ui, sans-serif; font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 22px; border-left: 4px solid var(--c-hex); padding-left: 14px; color: var(--ink); }
.fk-sublabel { color: var(--c-ink); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin: 8px 0 12px; }

/* siatki */
.fk-grid { display: grid; gap: 14px; margin-bottom: 24px; }
.fk-grid--power { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.fk-grid--parts { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fk-grid--mini  { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* karta */
.fk-card { position: relative; background: var(--panel); border: 1px solid var(--stroke); padding: 16px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; display: flex; flex-direction: column; color: var(--ink); }
.fk-card:hover, .fk-card:focus, .fk-card:active { background: var(--panel); color: var(--ink); outline: none; }
@media (hover: hover) and (pointer: fine) {
	.fk-card:hover { border-color: rgba(var(--c-rgb), .6); transform: translateY(-2px); }
	.fk-card--power:hover { border-color: rgba(var(--set-rgb), .7); }
}
.fk-card.is-sel { border-color: var(--c-hex); background: rgba(var(--c-rgb), .07); box-shadow: 0 0 0 1px var(--c-hex) inset; }
.fk-card--power.is-sel { border-color: var(--set-hex); background: rgba(var(--set-rgb), .09); box-shadow: 0 0 0 1px var(--set-hex) inset, 0 18px 40px -26px rgba(var(--set-rgb), .7); }
.fk-card__name { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; line-height: 1.25; }
.fk-card__name--set { font-family: "Russo One", system-ui, sans-serif; font-weight: 400; font-size: 1.2rem; color: var(--set-ink); padding-right: 56px; }
.fk-card__res { position: absolute; top: 12px; right: 12px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; background: var(--bg); border: 1px solid rgba(var(--set-rgb), .5); color: var(--set-ink); }
.fk-card__specs { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.fk-spec { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: var(--muted); line-height: 1.4; }
.fk-spec svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--set-ink); margin-top: 2px; }
.fk-spec b { color: var(--ink); }
.fk-card__desc { font-size: .86rem; color: var(--muted); line-height: 1.45; margin-bottom: 8px; }
.fk-card__desc--c { text-align: center; margin: 0 0 6px; font-size: .78rem; }
.fk-card__price { font-size: 1.15rem; font-weight: 800; margin-top: auto; padding-top: 8px; color: var(--ink); }
.fk-card--mini .fk-card__price { text-align: center; }

/* zdjęcia obudów / chłodzeń */
.fk-card__img { height: 150px; display: flex; align-items: center; justify-content: center; margin: -4px -4px 12px; background: var(--bg); border: 1px solid var(--stroke); }
.fk-card__img img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; filter: saturate(.85); transition: filter .2s, transform .2s; }
.fk-card.is-sel .fk-card__img img { filter: saturate(1); transform: scale(1.03); }
.fk-card__img--empty svg { width: 42px; height: 42px; color: var(--stroke); }
.fk-badge { position: absolute; top: 10px; left: 10px; z-index: 1; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--c-hex); color: var(--c-on); padding: 4px 9px; }
.fk-card__mini { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: "Russo One", system-ui, sans-serif; font-size: 1.35rem; color: var(--c-ink); margin: 6px 0 4px; }
.fk-card__mini svg { width: 24px; height: 24px; }

/* FPS (te same klasy co na produkcie: tk-cattabs / thorpc-fpsrow) */
.fk-fpsbar { background: var(--panel); border: 1px solid rgba(var(--c-rgb), .45); padding: 18px 20px 12px; margin-bottom: 24px; transition: border-color .3s; }
.fk-fps__empty { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .95rem; padding: 4px 0; }
.fk-fps__empty svg { width: 22px; height: 22px; color: var(--c-ink); flex: 0 0 auto; }
.fk-fpsbar .tk-fps__heading { margin-bottom: 14px; }

/* stopka */
.fk-footer { position: sticky; bottom: 0; background: rgba(11,13,16,.94); backdrop-filter: blur(6px); padding: 14px 20px; border-top: 2px solid var(--c-hex); display: flex; justify-content: space-between; align-items: center; z-index: 20; margin-top: 30px; }
.fk-foot-k { display: block; font-size: .7rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.fk-total { display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--ink); line-height: 1.1; }
.fk-btns { display: flex; gap: 12px; }
.fk-btn { padding: 13px 28px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; border: 1px solid var(--ink); background: transparent; color: var(--ink); transition: .2s; }
.fk-btn:hover, .fk-btn:focus, .fk-btn:active { background: transparent; color: var(--ink); outline: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .fk-btn:hover:not(:disabled) { background: var(--inverse); color: var(--inverse-on); } }
.fk-btn-next, .fk-btn-next:hover, .fk-btn-next:focus, .fk-btn-next:active { background: var(--c-hex); color: var(--c-on); border-color: var(--c-hex); }
@media (hover: hover) and (pointer: fine) { .fk-btn-next:hover:not(:disabled) { background: var(--c-hex); filter: brightness(1.06); color: var(--c-on); } }
.fk-btn:disabled { opacity: .35; cursor: not-allowed; }

/* podsumowanie */
.fk-summary { background: var(--panel); border: 1px solid rgba(var(--c-rgb), .5); padding: 24px; }
.fk-sumintro { color: var(--muted); margin: 0 0 14px; }
.fk-sumlist { list-style: none; padding: 0; margin: 0; }
.fk-sumrow { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--stroke); align-items: baseline; }
.fk-sumlabel { color: var(--c-ink); font-weight: 800; white-space: nowrap; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; min-width: 120px; }
.fk-sumname { color: var(--ink); flex: 1; }
.fk-dim { color: var(--muted); font-size: .85em; font-weight: 400; }
.fk-sumprice { color: var(--ink); font-weight: 800; white-space: nowrap; }
.fk-sumtotal { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--c-hex); font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.fk-sumtotal span:last-child { color: var(--c-ink); font-size: 1.6rem; }
.fk-monbundle { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--stroke); background: var(--bg); cursor: pointer; }
.fk-monbundle input { width: 20px; height: 20px; accent-color: var(--c-hex); margin: 0; flex: 0 0 auto; }
.fk-monbundle > span svg { width: 22px; height: 22px; color: var(--c-ink); display: block; }
.fk-monbundle__txt { font-size: .95rem; color: var(--ink); line-height: 1.4; }
.fk-monbundle__price { color: var(--c-ink); white-space: nowrap; }
.fk-included { background: var(--bg); border: 1px solid var(--stroke); border-left: 4px solid var(--c-hex); padding: 18px 20px; margin-top: 18px; font-size: .98rem; line-height: 1.6; color: var(--ink); }
.fk-included__h { font-family: "Russo One", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--c-ink); margin-bottom: 8px; }
.fk-included b { color: var(--c-ink); }
.fk-included p { margin: 0 0 8px; }
.fk-included__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fk-included__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.5; }
.fk-included__list svg { width: 20px; height: 20px; color: var(--c-ink); flex: 0 0 auto; margin-top: 2px; }

/* uwagi do zamówienia */
.fk-notes { background: var(--panel); border: 1px solid var(--stroke); padding: 22px 24px; margin-top: 18px; }
.fk-notes__h { display: flex; align-items: center; gap: 8px; font-family: "Russo One", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--c-ink); margin-bottom: 6px; }
.fk-notes__h svg { width: 20px; height: 20px; }
.fk-notes__p { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 12px; }
.fk-notes__ta { width: 100%; min-height: 110px; resize: vertical; background: var(--bg) !important; border: 1px solid var(--stroke) !important; color: var(--ink) !important; padding: 12px 14px; font-family: inherit; font-size: .98rem; line-height: 1.5; box-sizing: border-box; box-shadow: none !important; }
.fk-notes__ta::placeholder { color: var(--muted); }
.fk-notes__ta:focus { outline: none; border-color: var(--c-hex) !important; box-shadow: 0 0 0 3px rgba(var(--c-rgb), .18) !important; }
.fk-notes__cnt { text-align: right; font-size: .78rem; color: var(--muted); margin-top: 6px; }

.fk-notice { text-align: center; margin-top: 14px; min-height: 20px; }
.fk-notice a { color: var(--c-ink); font-weight: 700; }
.fk-notice.is-err { color: #ff6b6b; }

@media (max-width: 768px) {
	.kuznia-kreator { padding-bottom: 120px; }
	.fk-nav { max-width: none; }
	.fk-navstep { width: auto; flex: 1; }
	.fk-navlbl { display: none; }
	.fk-nav::before { top: 18px; left: 16px; right: 16px; }
	.fk-dot { width: 36px; height: 36px; font-size: .9rem; }
	.fk-grid--power { grid-template-columns: 1fr; }
	.fk-grid--parts { grid-template-columns: 1fr 1fr; gap: 10px; }
	.fk-grid--mini { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
	.fk-card { padding: 12px; }
	.fk-card__img { height: 110px; }
	.fk-card__name { font-size: .92rem; }
	.fk-card__desc { font-size: .78rem; }
	.fk-card__price { font-size: 1rem; }
	.fk-card__mini { font-size: 1.1rem; }
	.fk-footer { flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
	.fk-btns { width: 100%; }
	.fk-btn { flex: 1; padding: 12px 10px; font-size: .9rem; }
	.fk-sumrow { flex-wrap: wrap; }
	.fk-sumlabel { min-width: 0; width: 100%; }
}

/* raty 0% (estymacja od ceny zestawu) */
.tk-raty { border: 1px solid rgba(var(--theme-rgb), .4); padding: 14px 18px; background: var(--panel); }
.tk-raty__head { display: flex; align-items: center; gap: 8px; font-size: .78em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
.tk-raty__info {
	width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--muted);
	background: transparent; color: var(--muted); font-size: 10px; font-weight: 800;
	line-height: 1; cursor: pointer; padding: 0; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
}
.tk-raty__info:hover, .tk-raty__info:focus, .tk-raty__info:active { background: transparent; border-color: var(--muted); color: var(--muted); outline: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tk-raty__info:hover { border-color: var(--theme-hex); color: var(--theme-ink); } }
.tk-raty__tip {
	display: none; font-size: .8em; line-height: 1.5; color: var(--muted);
	background: var(--bg); border: 1px solid var(--stroke); padding: 10px 12px; margin-bottom: 12px;
}
.tk-raty__tip.is-open { display: block; }
.tk-raty__cols { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.tk-raty__col { font-size: .95em; color: var(--ink); }
.tk-raty__col b { color: var(--theme-ink); font-size: 1.1em; }

/* Suwak liczby rat — natywny <input type="range"> ostylowany pod motyw
   (ostre kąty, kolor buildu na wypełnieniu i uchwycie), osobno dla
   WebKit/Blink (Chrome, Edge) i Firefox — to jedyny sposób żeby dotknąć
   wyglądu natywnego suwaka w obu silnikach. */
.tk-raty__slider {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 4px; background: var(--stroke); outline: none; cursor: pointer; margin: 4px 0 0;
}
.tk-raty__slider::-webkit-slider-thumb {
	-webkit-appearance: none; width: 16px; height: 16px;
	background: var(--theme-hex); border: 2px solid var(--theme-on); cursor: pointer;
}
.tk-raty__slider::-moz-range-thumb {
	width: 16px; height: 16px; background: var(--theme-hex);
	border: 2px solid var(--theme-on); cursor: pointer;
}
.tk-raty__slider::-moz-range-track { background: var(--stroke); height: 4px; }

/* =========================================================================
 * Dobierz monitor (auto po rozdzielczości) + pakiet PC+monitor
 * ========================================================================= */
.tk-mon__card { display: flex; gap: 18px; align-items: center; }
.tk-mon__thumb {
	flex: 0 0 26%; max-width: 26%; overflow: hidden;
	background: var(--panel); border: 1px solid var(--stroke);
}
.tk-mon__thumb img { width: 100%; height: auto; display: block; }
.tk-mon__info { flex: 1 1 auto; min-width: 0; }
.tk-mon__name { font-weight: 800; color: var(--ink); font-size: 1.05em; margin-bottom: 4px; }
.tk-mon__spec { font-size: .85em; opacity: .85; line-height: 1.5; }
.tk-mon__why { font-size: .85em; line-height: 1.5; opacity: .9; margin-top: 6px; color: var(--ink); }
.tk-mon__foot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tk-mon__price { font-weight: 800; color: var(--theme-ink); font-size: 1.15em; white-space: nowrap; }
.tk-mon__price small { display: block; font-weight: 400; font-size: .58em; opacity: .75; color: var(--muted); }
.tk-mon__btn {
	padding: 11px 20px; border: 2px solid var(--theme-hex);
	color: var(--theme-ink); background: transparent; font-weight: 800; font-size: .95em; cursor: pointer;
	transition: all .2s;
}
.tk-mon__btn:hover, .tk-mon__btn:focus, .tk-mon__btn:active { background: transparent; color: var(--theme-ink); outline: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .tk-mon__btn:hover:not(:disabled):not(.is-added) { background: var(--theme-hex); color: var(--theme-on); } }
.tk-mon__btn.is-added { background: var(--theme-hex); color: var(--theme-on); border-color: var(--theme-hex); cursor: default; }
.tk-mon__btn:disabled { opacity: .6; cursor: wait; }
.tk-mon__note { margin-top: 10px; font-size: .88em; }
.tk-mon__note a { color: var(--theme-ink); font-weight: 700; }
.tk-mon__note.is-err { color: #b3261e; }

/* checkbox "pakiet z monitorem" — jedno kliknięcie dokłada monitor do tej samej pozycji zamówienia */
.tk-mon__bundle {
	display: flex; align-items: flex-start; gap: 10px;
	margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--stroke);
}
.tk-mon__bundle input[type="checkbox"] {
	width: 20px; height: 20px; margin-top: 2px; accent-color: var(--theme-hex);
	flex: 0 0 auto; cursor: pointer;
}
.tk-mon__bundle label { font-size: .92em; line-height: 1.5; cursor: pointer; color: var(--ink); }
.tk-mon__bundle b { color: var(--theme-ink); }

@media (max-width: 600px) { .tk-mon__card { flex-direction: column; } .tk-mon__thumb { flex-basis: auto; max-width: 100%; width: 100%; } }

/* =========================================================================
 * Sekcja zaufania — mocna, wyrazista siatka (nie subtelne kafelki)
 * ========================================================================= */
.tk-trust {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1px; background: var(--stroke); border: 1px solid var(--stroke);
	margin: 30px 0 8px;
}
.tk-trust__tile {
	background: var(--bg); padding: 30px 24px; text-align: center;
	transition: transform .2s, box-shadow .2s;
}
@media (hover: hover) and (pointer: fine) {
	.tk-trust__tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(var(--theme-rgb), .35); z-index: 1; position: relative; }
}
.tk-trust__ico {
	/* Ten sam, prostszy styl co kafelki na stronie głównej (.tph-tile__ico) —
	   sama kolorowa ikona, bez białego kwadratu w tle, który był tu wcześniej. */
	width: 44px; height: 44px; margin: 0 auto 16px;
	color: var(--theme-ink);
}
.tk-trust__ico svg { width: 100%; height: 100%; }
.tk-trust__h { font-family: "Russo One", system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-bottom: 10px; font-size: 1.1em; }
.tk-trust__p { font-size: .92em; line-height: 1.6; color: var(--muted); margin: 0; }
/* Mobile: 2 kolumny (jak kafelki na stronie głównej), kompaktowo —
   mniejsza ikona, tytuł i paddingi. Jedna kolumna z pełnymi wymiarami
   robiła z sekcji bardzo długą, przewijaną listę z dużą ilością pustki. */
@media (max-width: 760px) {
	.tk-trust { grid-template-columns: 1fr 1fr; }
	.tk-trust__tile { padding: 18px 12px; }
	.tk-trust__ico { width: 30px; height: 30px; margin-bottom: 10px; }
	.tk-trust__h { font-size: .88em; margin-bottom: 6px; }
	.tk-trust__p { font-size: .8em; line-height: 1.45; }
}

/* =========================================================================
 * v0.10 — hero-box obok zdjęcia produktu (dopłaty RAM/Dysk + cena + raty +
 * CTA), zastępuje natywną cenę/przycisk WooCommerce na buildach z "upgrades"
 * (patrz build-upgrades.php). Kolor ramki/akcentu — per-build, jak wszędzie.
 * ========================================================================= */
.thorpc-hero {
	/* .thorpc-hero współdzieli powyżej zmienne --bg/--panel/--ink itd. z
	   .thorpc-kuznia, ale NIE jego max-width:760px/margin:0 auto (to pasuje
	   do pełnoszerokiej sekcji pod produktem, nie do węższej kolumny obok
	   zdjęcia) — stąd jawne nadpisanie obu poniżej. */
	max-width: none;
	border: 1px solid rgba(var(--theme-rgb), .45);
	background: var(--panel);
	padding: 20px 22px 22px;
	margin: 0 0 18px;
	box-shadow: 0 18px 40px -26px rgba(var(--theme-rgb), .55);
}
.thorpc-hero .tk-group:last-of-type { margin-bottom: 18px; }
.thorpc-hero__title { margin: 0 0 18px !important; }
.thorpc-hero .tk-bar {
	position: static; background: transparent; backdrop-filter: none;
	border: 0; border-top: 1px solid var(--stroke);
	padding: 16px 0 0; margin: 0;
}
.thorpc-hero .tk-raty { margin-top: 14px; }
.thorpc-hero .tk-notice { margin-top: 10px; }
@media (max-width: 480px) {
	.thorpc-hero { padding: 16px 16px 18px; }
}

/* ikony w listach specyfikacji / "Podłączasz i grasz" — styl jak kafelki
   zaufania/strona główna (24x24, stroke, kolor akcentu buildu) */
.tk-list li { display: flex; align-items: flex-start; gap: 10px; }
.tk-list__ico { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--theme-ink); }
.tk-list__ico svg { width: 100%; height: 100%; }
.tk-list__body { flex: 1 1 auto; min-width: 0; }