/* TKJ Garden — konfigurator 3D */

/* ---------------- owijka konfiguratora ---------------- */
.tkj3d-wrap {
	--tkj3d-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tkj3d-scena-h: min(74vh, 700px);   /* wartość zapasowa; #tkj3d liczy ją z okna */
	--tkj3d-luz: 16px;                   /* odstęp od krawędzi ekranu */
	/* Bez własnej szerokości i marginesu — konfigurator wypełnia kolumnę,
	   w której osadzono shortcode. Odstępy ustawia sekcja strony. */
}

/* ---------------- kafelki kolekcji ----------------
   Kolory wzięte z sekcji na /pergole-ogrodowe/, ale spłaszczone:
   BASE — srebro, LUX — złoto, FLEX — zieleń. Bez gradientu i bez zdjęć w tle. */
.tkj3d__kolekcje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tkj3d__kolekcja {
	border: 0; padding: 0; cursor: pointer;
	border-radius: 10px; overflow: hidden;
	min-height: 104px;
	display: flex; align-items: flex-end; justify-content: center;
	/* nieaktywne tylko lekko przygaszone, żeby kolor kolekcji był nadal czytelny */
	opacity: .72;
	transition: opacity .18s, box-shadow .18s;
}
.tkj3d__kolekcja:hover { opacity: .92; }
.tkj3d__kolekcja[aria-pressed="true"] {
	opacity: 1;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 2px #303640;
}
/* Płaskie tła w kolorach kolekcji — wzięte z nakładki ::after na /pergole-ogrodowe/,
   bez gradientu i bez zdjęcia pod spodem. */
.tkj3d__kolekcja.is-base { background: #3a9459; }   /* zielony */
.tkj3d__kolekcja.is-lux  { background: #22215f; }   /* granatowy */
.tkj3d__kolekcja.is-flex { background: #1e68a2; }   /* niebieski */
.tkj3d__kolekcja-txt {
	display: block; width: 100%;
	padding: 14px 6px 16px;
	text-align: center;
	font-family: var(--tkj3d-font);
	line-height: 1.2;
}
.tkj3d__kolekcja-txt em {
	display: block; font-style: normal; font-weight: 400;
	font-size: .8rem; margin-bottom: 2px; color: #fff;
}

/* Nazwa kolekcji zachowuje gradient ze strony — wypełnia sam napis. */
.tkj3d__kolekcja-txt strong {
	display: block; font-weight: 700; font-size: 1.3rem;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-repeat: no-repeat;
}
.tkj3d__kolekcja.is-base strong {
	background-image: linear-gradient(70deg, #eee 0%, #ddd 25%, #bbb 75%, #fff 100%);
}
.tkj3d__kolekcja.is-lux strong {
	background-image: linear-gradient(70deg, #faf0a0 10%, #d3b15f 20%, #b17b32 40%, #e1b453 70%, #a4692a 85%, #faf0a0 100%);
}
.tkj3d__kolekcja.is-flex strong {
	background-image: linear-gradient(45deg, #3bcfd4 0%, #32c852 25%, #0bb98c 50%, #2feaa8 100%);
}

/* Podpis pod nazwą kolekcji — skąd bierzemy pergolę: magazyn czy produkcja. */
.tkj3d__kolekcja-txt small {
	display: block; margin-top: 3px;
	font-size: .62rem; line-height: 1.25; letter-spacing: .02em;
	color: rgba(255,255,255,.82);
}

.tkj3d {
	--a: #1f2422;          /* kolor akcentu (przyciski aktywne, CTA) */
	--t: #14171a;          /* tekst */
	--m: #6b7280;          /* tekst drugorzędny */
	--l: #e4e7e5;          /* linie */
	--bg: #fafafa;
	--r: 12px;

	/* Scena i panel muszą zmieścić się w oknie RAZEM z przyklejonym nagłówkiem motywu
	   (--tkj3d-offset liczy JS) — inaczej belka z ceną ląduje pod dolną krawędzią ekranu
	   i nie da się do niej dojechać. */
	--tkj3d-scena-h: min(700px, calc(100vh - var(--tkj3d-offset, 0px) - 2 * var(--tkj3d-luz)));
	--tkj3d-scena-h: min(700px, calc(100dvh - var(--tkj3d-offset, 0px) - 2 * var(--tkj3d-luz)));

	display: grid;
	grid-template-columns: 1fr 420px;
	align-items: start;
	/* Bez stałej wysokości — kółko myszy przewija stronę, nie wnętrze panelu. */
	color: var(--t);
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid var(--l);
	border-radius: var(--r);
	background: #fff;
	position: relative;
}
.tkj3d *, .tkj3d *::before, .tkj3d *::after { box-sizing: border-box; }

/* ---------------- pełny ekran ----------------
   W trybie pełnoekranowym nie ma nagłówka motywu ani marginesów strony,
   więc scena i panel biorą całą wysokość okna. */
.tkj3d.is-pelny {
	--tkj3d-scena-h: 100vh;
	--tkj3d-scena-h: 100dvh;
	border: 0; border-radius: 0;
	width: 100vw; height: 100vh; height: 100dvh;
	/* bez tego panel rośnie z treścią i belka z ceną wypada poza ekran */
	align-items: stretch;
}
.tkj3d.is-pelny .tkj3d__scena { top: 0; border-radius: 0; }
.tkj3d.is-pelny .tkj3d__panel { top: 0; border-radius: 0; }
.tkj3d.is-pelny .tkj3d__stopka { border-radius: 0; }
.tkj3d:fullscreen { background: #fff; }

/* ---------------- scena ---------------- */
.tkj3d__scena {
	/* scena zostaje na ekranie, kiedy przewijamy listę opcji obok */
	position: sticky; top: calc(var(--tkj3d-offset, 0px) + var(--tkj3d-luz));
	height: var(--tkj3d-scena-h);
	overflow: hidden;
	background: linear-gradient(180deg, #eef1f3 0%, #e4e8ea 100%);
	border-radius: var(--r) 0 0 var(--r);
}
.tkj3d__canvas { position: absolute; inset: 0; }
.tkj3d__canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.tkj3d__badge {
	position: absolute; top: 18px; left: 18px; z-index: 2;
	background: rgba(20,23,26,.86); color: #fff;
	padding: 8px 14px; border-radius: 999px;
	font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
	backdrop-filter: blur(6px);
}
.tkj3d__narzedzia { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.tkj3d__ikona {
	width: 42px; height: 42px; border-radius: 50%; border: 0;
	background: rgba(255,255,255,.92); color: var(--t);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: background .15s;
}
.tkj3d__ikona:hover { background: #fff; }
.tkj3d__ikona.is-off { color: #b0b6b4; }
.tkj3d__ikona.is-noc { background: #1b2028; color: #ffd479; }
.tkj3d__ikona.is-noc:hover { background: #232a34; }
.tkj3d__lamele {
	/* pod plakietką z wymiarami — na dole sceny wpadał poniżej krawędzi ekranu */
	position: absolute; left: 18px; top: 64px; z-index: 2;
	display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
	padding: 9px 14px; border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.tkj3d__lamele label { font-size: .78rem; color: var(--m); white-space: nowrap; }
.tkj3d__lamele input[type=range] { width: 130px; accent-color: var(--a); }
.tkj3d__lamele output {
	font-size: .82rem; font-weight: 600; color: var(--t);
	min-width: 34px; text-align: right;
}

/* drugi suwak — przesuw paneli żaluzjowych; siada pod suwakiem otwarcia dachu */
.tkj3d__suw { top: 116px; }
.tkj3d__suw output { min-width: 76px; }
.tkj3d__suw[hidden] { display: none; }

/* przybliżanie: przyciski w prawym dolnym rogu sceny */
.tkj3d__zoom { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.tkj3d__zoom .tkj3d__ikona { width: 38px; height: 38px; }

.tkj3d__hint {
	position: absolute; left: 18px; bottom: 18px; z-index: 2;
	background: rgba(255,255,255,.9); color: var(--m);
	padding: 8px 14px; border-radius: 999px; font-size: .78rem;
	transition: background .15s, color .15s;
}
/* podpowiedź zapala się, gdy ktoś kręci kółkiem nad sceną bez Ctrl */
.tkj3d__hint.is-uwaga { background: var(--a); color: #fff; }
.tkj3d__loader {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	background: #eef1f3; color: var(--m); font-size: .9rem;
}
.tkj3d__loader.is-hidden { display: none; }

/* ---------------- panel ---------------- */
/* Panel ma tę samą wysokość co scena i trzyma się jej przy przewijaniu strony.
   W środku: lista opcji z własnym przewijaniem, pod nią belka z ceną — belka
   nigdy nie nachodzi na opcje, opcje nie chowają się pod nią. */
.tkj3d__panel {
	display: flex; flex-direction: column;
	position: sticky; top: calc(var(--tkj3d-offset, 0px) + var(--tkj3d-luz));
	height: var(--tkj3d-scena-h);
	min-height: 0;
	border-left: 1px solid var(--l); background: #fff;
	border-radius: 0 var(--r) var(--r) 0;
	overflow: hidden;
}
.tkj3d__panel-scroll {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	padding: 26px 24px 24px;
	overscroll-behavior: contain;
	/* pasek przewijania ma być WIDOCZNY — to pierwszy sygnał, że lista leci dalej
	   (macOS domyślnie chowa nakładkowe paski, dopóki się nie przewija) */
	scrollbar-width: thin;
	scrollbar-color: #c3c9c7 transparent;
}
.tkj3d__panel-scroll::-webkit-scrollbar { width: 10px; }
.tkj3d__panel-scroll::-webkit-scrollbar-track { background: transparent; }
.tkj3d__panel-scroll::-webkit-scrollbar-thumb {
	background: #c3c9c7; border-radius: 999px;
	border: 3px solid #fff;   /* wcięcie, żeby kciuk nie dotykał treści */
}
.tkj3d__panel-scroll::-webkit-scrollbar-thumb:hover { background: #a9b0ae; }

/* plakietka „przewiń" — znika, gdy ktoś ruszy listą albo dojedzie do końca */
.tkj3d__przewin {
	position: absolute; left: 50%; transform: translateX(-50%);
	bottom: calc(var(--tkj3d-stopka-h, 190px) + 10px); z-index: 31;
	border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(20,23,26,.86); color: #fff;
	padding: 7px 14px; font: inherit; font-size: .76rem; font-weight: 600;
	box-shadow: 0 3px 12px rgba(0,0,0,.18);
	display: flex; align-items: center; gap: 6px;
	animation: tkj3d-podskok 1.8s ease-in-out 3;
}
.tkj3d__przewin[hidden] { display: none; }
@keyframes tkj3d-podskok {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 4px); }
}
@media (prefers-reduced-motion: reduce) { .tkj3d__przewin { animation: none; } }
.tkj3d__nadtytul { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m); }
.tkj3d__tytul { margin: 6px 0 4px; font-size: 1.6rem; line-height: 1.15; font-weight: 700; }
.tkj3d__lead { margin: 0 0 22px; color: var(--m); font-size: .9rem; }

.tkj3d__sek { padding: 20px 0; border-top: 1px solid var(--l); }
.tkj3d__sek:first-child { border-top: 0; padding-top: 0; }
.tkj3d__sek h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 650; }
.tkj3d__sek-opis { margin: 0 0 12px; font-size: .84rem; color: var(--m); }

/* segmentowany przełącznik */
.tkj3d__seg { display: flex; gap: 4px; background: var(--bg); padding: 4px; border-radius: 10px; border: 1px solid var(--l); }
.tkj3d__seg button {
	flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 7px;
	font: inherit; font-size: .86rem; color: var(--m); cursor: pointer; transition: background .15s, color .15s;
}
.tkj3d__seg button[aria-pressed="true"] { background: var(--a); color: #fff; font-weight: 600; }

.tkj3d__podtytul {
	margin: 16px 0 8px;
	font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
	color: var(--m); font-weight: 600;
}
.tkj3d__podtytul:first-of-type { margin-top: 4px; }

/* kafelki rozmiarów */
.tkj3d__kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.tkj3d__kafelek {
	border: 1px solid var(--l); background: #fff; border-radius: 10px; padding: 12px 8px;
	font: inherit; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s;
}
.tkj3d__kafelek strong { display: block; font-size: .95rem; }
.tkj3d__kafelek span { display: block; font-size: .74rem; color: var(--m); margin-top: 2px; }
.tkj3d__kafelek[aria-pressed="true"] { border-color: var(--a); box-shadow: inset 0 0 0 1px var(--a); }

/* parametry kolekcji */
/* zwijana tabelka parametrów kolekcji — domyślnie schowana, żeby opcje
   do wyboru mieściły się na pierwszym ekranie panelu */
.tkj3d__param-box { margin-top: 14px; border-top: 1px solid var(--l); }
.tkj3d__param-box summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: 6px;
	padding: 10px 0 2px;
	font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--m);
}
.tkj3d__param-box summary::-webkit-details-marker { display: none; }
.tkj3d__param-box summary::after {
	content: '▾'; font-size: .7rem; transition: transform .15s;
}
.tkj3d__param-box[open] summary::after { transform: rotate(180deg); }
.tkj3d__param-box summary:hover { color: var(--t); }
.tkj3d__param-box summary:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

.tkj3d__param { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--l); }
.tkj3d__param li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--l); font-size: .84rem; }
.tkj3d__param li span { color: var(--m); }
.tkj3d__param li b { font-weight: 600; text-align: right; }

/* suwaki */
.tkj3d__pole { margin-bottom: 16px; }
.tkj3d__pole-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.tkj3d__pole-top label { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--m); }
.tkj3d__pole-top em { font-style: normal; font-size: .78rem; color: var(--m); }
.tkj3d__pole-row { display: flex; align-items: center; gap: 12px; }
.tkj3d__tor { flex: 1; position: relative; }
.tkj3d__tor input[type=range] { width: 100%; display: block; accent-color: var(--a); }

/* Znaczniki wysokości standardowych pod torem suwaka. Pole z nimi jest wyższe,
   bo podpisy schodzą poniżej suwaka. */
.tkj3d__pole.ma-znaczniki { margin-bottom: 34px; }
.tkj3d__znaczniki { position: absolute; left: 0; right: 0; top: 100%; height: 0; }
.tkj3d__znacznik { position: absolute; top: -2px; transform: translateX(-50%); display: flex;
	flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none;
	cursor: pointer; font: inherit; line-height: 1; }
.tkj3d__znacznik.is-lewy { transform: none; align-items: flex-start; }
.tkj3d__znacznik.is-prawy { transform: translateX(-100%); align-items: flex-end; }
.tkj3d__znacznik i { width: 1px; height: 6px; background: var(--l); }
.tkj3d__znacznik em { font-style: normal; font-size: .72rem; color: var(--m); white-space: nowrap; }
.tkj3d__znacznik em span { display: block; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.tkj3d__znacznik:hover em { color: var(--t); }
.tkj3d__znacznik.is-aktywny i { background: var(--a); height: 8px; }
.tkj3d__znacznik.is-aktywny em { color: var(--a); }
.tkj3d__wart { display: flex; align-items: center; gap: 4px; border: 1px solid var(--l); border-radius: 8px; padding: 5px 8px; }
.tkj3d__wart input { width: 56px; border: 0; font: inherit; font-size: .9rem; text-align: right; padding: 0; background: none; color: var(--t); }
.tkj3d__wart input:focus { outline: none; }
.tkj3d__wart span { font-size: .8rem; color: var(--m); }

/* kolory */
.tkj3d__kolory { display: flex; gap: 10px; flex-wrap: wrap; }
.tkj3d__kolor { border: 0; background: none; padding: 0; cursor: pointer; text-align: center; width: 58px; }
.tkj3d__kolor i { display: block; width: 40px; height: 40px; margin: 0 auto 5px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.tkj3d__kolor small { font-size: .68rem; color: var(--m); line-height: 1.2; display: block; }
.tkj3d__kolor[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--a); }

/* zabudowa ścian */
.tkj3d__sciany { display: grid; gap: 10px; }
.tkj3d__sciana { display: grid; grid-template-columns: 1fr; gap: 5px; }
.tkj3d__sciana > span { font-size: .8rem; color: var(--m); }
.tkj3d__sciany { position: relative; z-index: 1; }
/* wybór liczby paneli żaluzjowych — wcięty pod bokiem, którego dotyczy */
.tkj3d__sciana--ile { margin: -3px 0 2px 14px; border-left: 2px solid var(--l); padding-left: 12px; }
.tkj3d__sciana--ile .tkj3d__seg button { padding: 6px 10px; font-size: .8rem; }
/* własna lista rozwijana — natywny select przejmował style motywu */
.tkj3d__wybor { position: relative; }
.tkj3d__wybor-btn {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 9px 12px;
	border: 1px solid var(--l); border-radius: 9px;
	background: #fff; color: var(--t);
	font: inherit; font-size: .88rem; line-height: 1.25;
	text-align: left; cursor: pointer;
	min-height: 0; height: auto;
}
.tkj3d__wybor-btn svg { flex: none; color: var(--m); transition: transform .15s; }
.tkj3d__wybor.is-open .tkj3d__wybor-btn { border-color: var(--a); }
.tkj3d__wybor.is-open .tkj3d__wybor-btn svg { transform: rotate(180deg); }
.tkj3d__wybor-btn:focus-visible { outline: 2px solid var(--a); outline-offset: 1px; }

.tkj3d__wybor-lista {
	display: none;
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
	margin: 0; padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--l); border-radius: 9px;
	box-shadow: 0 10px 26px rgba(0,0,0,.14);
	max-height: 250px; overflow-y: auto;
}
.tkj3d__wybor.is-open .tkj3d__wybor-lista { display: block; }
.tkj3d__wybor.is-up .tkj3d__wybor-lista { top: auto; bottom: calc(100% + 4px); }
.tkj3d__wybor-lista li {
	padding: 8px 10px; border-radius: 6px;
	font-size: .86rem; line-height: 1.3; cursor: pointer;
}
.tkj3d__wybor-lista li:hover { background: var(--bg); }
.tkj3d__wybor-lista li[aria-selected="true"] { background: var(--a); color: #fff; }
.tkj3d__wybor-lista li.is-podpowiedz { color: var(--m); }
.tkj3d__wybor.is-pusty .tkj3d__wybor-btn { color: var(--m); }

/* belki ogrzewania */
.tkj3d__belki { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tkj3d__belka {
	border: 1px solid var(--l); background: #fff; border-radius: 9px; padding: 10px;
	font: inherit; font-size: .85rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: border-color .15s;
}
.tkj3d__belka::before {
	content: ''; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--l); flex: none;
}
.tkj3d__belka[aria-pressed="true"] { border-color: var(--a); }
.tkj3d__belka[aria-pressed="true"]::before { background: var(--a); border-color: var(--a); box-shadow: inset 0 0 0 2px #fff; }

.tkj3d__info {
	margin: 0; font-size: .86rem; color: var(--t);
	background: var(--bg); border: 1px solid var(--l); border-left: 3px solid var(--a);
	border-radius: 8px; padding: 11px 13px;
}
.tkj3d__info.is-brak { border-left-color: #b9a04a; color: var(--m); }

/* przełącznik pojedynczy */
.tkj3d__check { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; cursor: pointer; }
.tkj3d__check input { margin-top: 3px; accent-color: var(--a); width: 17px; height: 17px; }
.tkj3d__check em { display: block; font-style: normal; font-size: .8rem; color: var(--m); margin-top: 2px; }

/* ---------------- stopka z ceną ---------------- */
/* Belka z ceną siedzi na dole panelu, pod listą opcji — nie nad nią. */
.tkj3d__stopka {
	flex: none;
	position: relative; z-index: 30;
	border-top: 1px solid var(--l); padding: 14px 24px;
	/* kwota i przełącznik w jednym wierszu, przycisk pod nimi na pełną szerokość */
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px 14px;
	/* delikatnie szare tło odcina podsumowanie od listy opcji */
	background: var(--bg);
	border-radius: 0 0 var(--r) 0;
	box-shadow: 0 -6px 18px rgba(0,0,0,.07);
}
/* miękkie ścięcie nad belką — widoczne tylko wtedy, gdy pod spodem coś jeszcze jest */
.tkj3d__stopka::before {
	content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px;
	background: linear-gradient(to top, #fff, rgba(255,255,255,0));
	pointer-events: none;
	opacity: 0; transition: opacity .2s;
}
.tkj3d__panel.is-wiecej .tkj3d__stopka::before { opacity: 1; }
.tkj3d__cena-nota { display: block; font-size: .73rem; color: var(--m); margin-top: 2px; line-height: 1.25; }
.tkj3d__cena { min-width: 0; }
/* montaż pod kwotą pergoli — mniejszą czcionką, ale nadal czytelnie */
.tkj3d__cena-montaz { display: block; font-size: .84rem; font-weight: 600; color: var(--t); margin-top: 3px; line-height: 1.3; }
.tkj3d__cena-montaz[hidden] { display: none; }
.tkj3d__cena strong { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-top: 2px; white-space: nowrap; }
.tkj3d__cena strong.is-tekst { font-size: .98rem; font-weight: 600; white-space: normal; }
.tkj3d__cta {
	grid-column: 1 / -1; width: 100%;
	background: var(--a); color: #fff; border: 0; border-radius: 999px;
	padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tkj3d__cta:hover { opacity: .9; }

/* dwustanowy przełącznik montażu w belce z ceną */
.tkj3d__montaz {
	grid-column: 1 / -1; justify-self: stretch;
	display: flex;
	border: 1px solid var(--l);
	border-radius: 999px;
	overflow: hidden;
	flex: none;
}
.tkj3d__montaz button {
	flex: 1;
	border: 0; background: #fff;
	padding: 9px 16px;
	font: inherit; font-size: .82rem; font-weight: 600;
	color: var(--m); cursor: pointer; white-space: nowrap;
	transition: background .16s, color .16s;
}
.tkj3d__montaz button[data-montaz="1"][aria-pressed="true"] { background: #3a9459; color: #fff; }
.tkj3d__montaz button[data-montaz="0"][aria-pressed="true"] { background: #7d838b; color: #fff; }
.tkj3d__montaz button[aria-pressed="false"]:hover { background: var(--bg); color: var(--t); }

/* ---------------- modal ---------------- */
.tkj3d__modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tkj3d__modal[hidden] { display: none !important; }
.tkj3d__modal-tlo { position: absolute; inset: 0; background: rgba(10,12,14,.55); }
.tkj3d__modal-okno {
	position: relative; background: #fff; border-radius: 16px; padding: 28px;
	width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.tkj3d__modal-okno h3 { margin: 0 0 4px; font-size: 1.3rem; }
.tkj3d__modal-lead { margin: 0 0 18px; color: var(--m); font-size: .88rem; }
.tkj3d__zamknij { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--m); cursor: pointer; }

.tkj3d__podsum { background: var(--bg); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.tkj3d__podsum ul { list-style: none; margin: 0; padding: 0; }
.tkj3d__podsum li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: .84rem; }
.tkj3d__podsum li span { color: var(--m); }
.tkj3d__podsum li b { text-align: right; font-weight: 600; }

.tkj3d__form { display: grid; gap: 13px; }
.tkj3d__row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.tkj3d__form label { display: block; font-size: .82rem; color: var(--m); }
.tkj3d__form input[type=text], .tkj3d__form input[type=email], .tkj3d__form input[type=tel], .tkj3d__form textarea {
	width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--l);
	border-radius: 9px; font: inherit; font-size: .92rem; color: var(--t);
}
.tkj3d__form input:focus, .tkj3d__form textarea:focus { outline: 2px solid var(--a); outline-offset: 1px; border-color: transparent; }
.tkj3d__zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; }
.tkj3d__zgoda input { margin-top: 2px; accent-color: var(--a); }
.tkj3d__hp { display: none !important; }
.tkj3d__wyslij { background: var(--a); color: #fff; border: 0; border-radius: 999px; padding: 14px; font: inherit; font-weight: 600; cursor: pointer; }
.tkj3d__wyslij:disabled { opacity: .6; cursor: default; }
.tkj3d__msg { margin: 0; font-size: .85rem; }
.tkj3d__msg.is-err { color: #b3261e; }
.tkj3d__ok { border: 1px solid var(--a); border-radius: 12px; padding: 22px; text-align: center; }
.tkj3d__ok strong { display: block; margin-bottom: 6px; font-size: 1.05rem; }
.tkj3d__ok span { font-size: .88rem; color: var(--m); }

/* ---------------- mobile ---------------- */
@media (max-width: 980px) {
	.tkj3d__kolekcja { min-height: 84px; }
	.tkj3d__kolekcja-txt strong { font-size: 1.05rem; }
	.tkj3d { grid-template-columns: 1fr; }
	/* relative, nie static — inaczej canvas (absolutny) kotwiczy się do całego
	   konfiguratora i rozlewa się na panel pod sceną */
	/* `top` zostaje z układu desktopowego (scena jest tam sticky pod nagłówkiem motywu).
	   Przy position: relative przesuwałby scenę w dół o wysokość nagłówka, przez co
	   wjeżdżała na panel i zasłaniała kafle kolekcji przyciskami +/− oraz podpowiedzią. */
	.tkj3d__scena {
		position: relative; top: 0;
		height: 68vh; min-height: 380px;
		border-radius: var(--r) var(--r) 0 0;
	}
	/* prawa krawędź z zapasem na kolumnę ikon — inaczej suwak wchodzi pod nie */
	.tkj3d__lamele { left: 12px; right: 72px; top: 58px; justify-content: space-between; }
	.tkj3d__lamele input[type=range] { flex: 1; width: auto; }
	/* na wąskim ekranie panel rośnie z treścią, przewija się cała strona,
	   a belka z ceną zostaje na końcu listy opcji */
	.tkj3d__panel {
		position: relative; top: auto; z-index: 1;
		height: auto; overflow: visible;
		border-left: 0; border-top: 1px solid var(--l); border-radius: 0 0 var(--r) var(--r);
	}
	.tkj3d__panel-scroll { overflow: visible; padding: 22px 18px 20px; }
	.tkj3d__montaz button { padding: 8px 12px; font-size: .78rem; }
	.tkj3d__stopka { padding: 12px 18px; box-shadow: none; border-radius: 0 0 var(--r) var(--r); }
	.tkj3d__stopka::before { display: none; }   /* na mobile nic się nie przewija pod belką */
	.tkj3d__row { grid-template-columns: 1fr; }
	.tkj3d__tytul { font-size: 1.35rem; }
}

/* ---------------- pełny ekran na mniejszych ekranach ----------------
   Na wąskim ekranie normalnie przewija się cała strona, ale w pełnym ekranie
   nie ma czego przewijać — wszystko musi zmieścić się w oknie, inaczej belka
   z ceną i przyciski +/− wypadają poza kadr. Dlatego tu wracamy do układu
   „scena + panel z własnym przewijaniem”. */
@media (max-width: 980px) {
	.tkj3d.is-pelny {
		height: 100dvh; overflow: hidden;
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
	}
	.tkj3d.is-pelny .tkj3d__scena { height: 45dvh; min-height: 200px; border-radius: 0; }
	.tkj3d.is-pelny .tkj3d__panel {
		height: auto; min-height: 0; overflow: hidden;
		border-top: 1px solid var(--l); border-radius: 0;
	}
	.tkj3d.is-pelny .tkj3d__panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
	.tkj3d.is-pelny .tkj3d__stopka { border-radius: 0; }
	.tkj3d.is-pelny .tkj3d__stopka::before { display: block; }
}

/* Od ~700 px szerokości w pełnym ekranie mieszczą się dwie kolumny —
   scena obok panelu, tak jak na dużym ekranie. */
@media (max-width: 980px) and (min-width: 700px) {
	.tkj3d.is-pelny {
		grid-template-columns: 1fr minmax(300px, 360px);
		grid-template-rows: minmax(0, 1fr);
	}
	.tkj3d.is-pelny .tkj3d__scena { height: 100dvh; }
	.tkj3d.is-pelny .tkj3d__panel { border-left: 1px solid var(--l); border-top: 0; }
	.tkj3d.is-pelny .tkj3d__panel-scroll { padding: 20px 16px; }
	/* suwak lameli wraca do lewej — rozciągnięty wchodził pod kolumnę ikon */
	.tkj3d.is-pelny .tkj3d__lamele { left: 18px; right: auto; top: 64px; }
	.tkj3d.is-pelny .tkj3d__lamele input[type=range] { flex: none; width: 130px; }
}