/* ═══════════════════════════════════════════════════════════════════
   KARTA PRODUKTU — wizualizacja, warianty, zakładki, specyfikacja
   ═══════════════════════════════════════════════════════════════════ */

.gt-product__top {
	display: grid;
	gap: var(--gt-s5);
	grid-template-columns: 1fr;
	margin-bottom: var(--gt-s6);
}

/* Dwie kolumny dopiero, gdy obie mają sens — poniżej tego progu zdjęcie
   produktu ściśnięte do połowy ekranu przestaje być czytelne. */
@media (min-width: 62em) {
	.gt-product__top {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: var(--gt-s6);
	}
}

/* ── Informacje ─────────────────────────────────────────────────── */

.gt-product__eyebrow {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin: 0 0 var(--gt-s2);
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gt-tx2);
}

.gt-product__eyebrow a { color: var(--gt-acc); }
.gt-product__eyebrow a:hover { color: var(--gt-tx); }

.gt-product__title {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	margin-bottom: var(--gt-s3);
}

.gt-product__code {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0 0 var(--gt-s4);
	font-family: var(--gt-mono);
	font-size: .875rem;
	color: var(--gt-tx);
}

.gt-product__code .gt-mono { color: var(--gt-tx3); }

.gt-product__lead { margin-bottom: var(--gt-s4); }

.gt-product__keys { margin: var(--gt-s4) 0; }

/* ── CTA ────────────────────────────────────────────────────────── */

.gt-product__cta {
	display: flex;
	gap: var(--gt-s3);
	flex-wrap: wrap;
	align-items: center;
	padding-top: var(--gt-s4);
	border-top: 1px solid var(--gt-line);
}

.gt-product__cta-note {
	flex: 1 1 100%;
	margin: 0;
	font-size: .8125rem;
	color: var(--gt-tx3);
	line-height: 1.5;
}

/* ── Warianty ───────────────────────────────────────────────────── */

.gt-variants {
	padding: var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
	margin-bottom: var(--gt-s4);
}

.gt-variants__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gt-s3);
	padding-bottom: var(--gt-s3);
	border-bottom: 1px solid var(--gt-line);
	margin-bottom: var(--gt-s3);
}

.gt-variants__label { margin: var(--gt-s3) 0 var(--gt-s2); }
.gt-variants__label:first-of-type { margin-top: 0; }

/* ── Spinner 360 ────────────────────────────────────────────────── */

.gt-spin {
	position: relative;
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-bg2);
	overflow: hidden;
}

.gt-spin__stage {
	position: relative;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	/* Ten sam układ i ten sam problem co w .gt-gallery__main — plakietka
	   spinu jest elementem siatki z `height: 100%`. */
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.gt-spin__poster,
.gt-spin__canvas {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.gt-spin__canvas {
	/* pan-y pozwala przewijać stronę pionowym gestem, a poziomy zostaje
	   dla obrotu. Bez tego spin blokowałby przewijanie na telefonie. */
	touch-action: pan-y;
	cursor: grab;
	max-width: 100%;
	height: auto;
}

.gt-spin.is-dragging .gt-spin__canvas { cursor: grabbing; }

.gt-spin__start {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gt-s3);
	background: linear-gradient(to top, rgba(10, 11, 13, .55), transparent 60%);
	border: 0;
	color: #fff;
	cursor: pointer;
	font: inherit;
}

.gt-spin__icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-family: var(--gt-mono);
	font-weight: 500;
	font-size: .9rem;
	letter-spacing: -.02em;
	backdrop-filter: blur(2px);
}

.gt-spin__start:hover .gt-spin__icon,
.gt-spin__start:focus-visible .gt-spin__icon {
	background: rgba(255, 255, 255, .16);
}

.gt-spin__text {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gt-spin__start.is-loading .gt-spin__icon {
	animation: gt-spin 1s linear infinite;
}

.gt-spin__start.is-failed .gt-spin__text::after {
	content: ' — nie udało się wczytać';
	text-transform: none;
	letter-spacing: 0;
}

.gt-spin__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gt-s3);
	padding: var(--gt-s2) var(--gt-s3);
	border-top: 1px solid var(--gt-line);
	background: var(--gt-surf);
}

.gt-spin__fallback {
	padding: var(--gt-s3);
	margin: 0;
	font-size: .875rem;
	color: var(--gt-tx2);
}

/* Hotspoty */

.gt-spin__hotspots {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.gt-spin__hs {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .4rem;
	--gt-hs-dot: 10px;
	/*
	 * Kotwicą jest KROPKA, nie środek elementu.
	 *
	 * `translate(-50%, -50%)` centrowało cały element — kropkę, odstęp
	 * i etykietę — na współrzędnych punktu. Etykieta rośnie w prawo, więc
	 * środek elementu leżał daleko od kropki i kropka wypadała o pół
	 * szerokości etykiety W LEWO od miejsca, w którym postawiono ją
	 * w panelu. Pionowo element jest symetryczny (kropka i etykieta mają
	 * tę samą wysokość), dlatego wysokość zawsze się zgadzała.
	 *
	 * Przesuwamy więc tylko o połowę kropki, a etykieta wychodzi w prawo.
	 */
	transform: translate(calc(var(--gt-hs-dot) / -2), -50%);
	transition: opacity var(--gt-fast) linear;
}

.gt-spin__hs-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gt-acc);
	box-shadow: 0 0 0 3px rgba(226, 67, 31, .28);
	flex: none;
}

.gt-spin__hs-label {
	padding: .15rem .45rem;
	background: rgba(10, 11, 13, .82);
	color: #fff;
	border-radius: var(--gt-r);
	font-family: var(--gt-mono);
	font-size: .625rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── Galeria statyczna ──────────────────────────────────────────── */

.gt-gallery__main {
	/*
	 * `position: relative` jest tu WARUNKIEM POPRAWNOŚCI, nie ozdobą.
	 * Warstwa opisów punktów ma `position: absolute; inset: 0` i bez
	 * ustalonego układu odniesienia odnosiła się do dalszego przodka —
	 * punkty pojawiały się w losowych miejscach strony, np. w kolumnie
	 * ze specyfikacją. Z tego samego powodu nie obcinał ich `overflow`:
	 * element pozycjonowany absolutnie przycinają tylko te przodkowie,
	 * którzy leżą MIĘDZY nim a jego układem odniesienia.
	 */
	position: relative;
	aspect-ratio: 1;
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-bg2);
	overflow: hidden;
	display: grid;
	place-items: center;
	/*
	 * Jawna, JEDNOŚCIEŻKOWA siatka. Bez tego wysokość obrazka była ucięta:
	 * `height: 100%` na elemencie siatki rozwiązuje się względem ŚCIEŻKI
	 * wiersza, a domyślna ścieżka `auto` jest dopasowywana do treści —
	 * powstaje zależność cykliczna, więc przeglądarka traktuje procent jako
	 * `auto`. Obrazek dostawał wtedy pełną naturalną wysokość, kontener
	 * zostawał kwadratem z `aspect-ratio`, a `overflow: hidden` obcinał
	 * nadwyżkę u dołu.
	 *
	 * `minmax(0, 1fr)` daje ścieżce rozmiar wyznaczony przez kontener,
	 * którego wysokość JEST określona (proporcja + znana szerokość), więc
	 * procent ma się do czego odnieść. Zero w dolnej granicy jest istotne:
	 * domyślne `auto` w `1fr` nie pozwoliłoby ścieżce zejść poniżej
	 * rozmiaru treści i problem by wrócił.
	 */
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.gt-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gt-gallery__thumbs {
	display: flex;
	gap: .4rem;
	margin-top: .4rem;
	overflow-x: auto;
}

.gt-gallery__thumb {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0;
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-bg2);
	cursor: pointer;
	overflow: hidden;
}

.gt-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gt-gallery__thumb.is-active { border-color: var(--gt-acc); }

/* ── Zakładki ───────────────────────────────────────────────────── */

.gt-tabs { border-top: 1px solid var(--gt-line); }

.gt-tabs__nav {
	display: flex;
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border-bottom: 1px solid var(--gt-line);
	/* Cienka maska po prawej sygnalizuje, że pasek da się przewinąć —
	   na wąskim ekranie zakładek nie mieści się pięć. */
	scrollbar-width: none;
}

.gt-tabs__nav::-webkit-scrollbar { display: none; }

.gt-tabs__btn {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex: none;
	min-height: 48px;
	padding: 0 var(--gt-s4);
	border-bottom: 2px solid transparent;
	color: var(--gt-tx2);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gt-tabs__btn:hover { color: var(--gt-tx); }

.gt-tabs__btn.is-active {
	color: var(--gt-tx);
	border-bottom-color: var(--gt-acc);
}

.gt-tabs__n {
	font-size: .625rem;
	color: var(--gt-tx3);
}

.gt-tabs__panel {
	padding-top: var(--gt-s5);
}

/* Bez JS wszystkie panele są widoczne jeden pod drugim — treść jest
   dostępna, tylko bez przełączania. Z JS pokazujemy tylko aktywny. */
.gt-tabs__panel { display: block; }

.js .gt-tabs__panel { display: none; }
.js .gt-tabs__panel.is-active { display: block; }

.gt-tabs__heading {
	font-size: var(--gt-t-h3);
	margin-bottom: var(--gt-s4);
}

/* ── Specyfikacja ───────────────────────────────────────────────── */

.gt-spec__search {
	display: flex;
	align-items: center;
	gap: var(--gt-s3);
	margin-bottom: var(--gt-s5);
	max-width: 26rem;
}

.gt-spec__count { white-space: nowrap; }

.gt-spec__group { margin-bottom: var(--gt-s5); }

.gt-spec__label {
	margin: 0 0 var(--gt-s2);
	padding-bottom: var(--gt-s2);
	border-bottom: 1px solid var(--gt-line);
}

/* Specyfikacja jest prawdziwą <table> (patrz tab-specyfikacja.php), ale ma
   wyglądać jak lista par. Zdejmujemy więc układ tabelaryczny i wracamy do
   grida na wierszu — inaczej `table-layout` wymusza równe kolumny w całej
   grupie i przy długich nazwach parametrów robi się rzeka pustego miejsca. */
.gt-spec__rows {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.gt-spec__rows > tbody { display: flex; flex-direction: column; }

.gt-spec__rows > caption { caption-side: top; }

.gt-spec__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gt-s3);
	padding: .55rem .75rem;
	border-bottom: 1px solid var(--gt-line);
}

.gt-spec__row:nth-child(odd) { background: var(--gt-ph); }


.gt-spec__k {
	color: var(--gt-tx2);
	font-size: .9375rem;
	/* Reset domyślnych stylów <th>: pogrubienie i wyśrodkowanie. */
	font-weight: 400;
	text-align: left;
}

.gt-spec__v {
	font-size: .9375rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

.gt-spec__unit { color: var(--gt-tx3); font-weight: 400; }

.gt-spec__empty {
	padding: var(--gt-s5);
	text-align: center;
	color: var(--gt-tx3);
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Na wąskim ekranie para klucz/wartość idzie w dwa wiersze — dwie kolumny
   po 45% szerokości telefonu łamią i etykietę, i wartość. */
@media (max-width: 34em) {
	.gt-spec__row {
		grid-template-columns: 1fr;
		gap: .15rem;
	}
	.gt-spec__k {
		font-family: var(--gt-mono);
		font-size: .625rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--gt-tx3);
	}
}

/* ── Dokumenty ──────────────────────────────────────────────────── */

.gt-docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--gt-s3);
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.gt-docs__link {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-height: 44px;
	padding: var(--gt-s3) var(--gt-s4);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
	color: var(--gt-tx);
	transition: border-color var(--gt-fast) var(--gt-ease);
}

.gt-docs__link:hover {
	border-color: var(--gt-acc);
	color: var(--gt-tx);
}

.gt-docs__label { font-weight: 600; }

.gt-docs__meta {
	font-family: var(--gt-mono);
	font-size: var(--gt-t-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gt-tx3);
}

/* ── Akcesoria i powiązania ─────────────────────────────────────── */

.gt-rel__group { margin-bottom: var(--gt-s5); }

.gt-rel__label {
	margin: 0 0 var(--gt-s3);
	padding-bottom: var(--gt-s2);
	border-bottom: 1px solid var(--gt-line);
	display: flex;
	align-items: baseline;
	gap: .4rem;
}

.gt-rel__card {
	display: flex;
	align-items: center;
	gap: var(--gt-s3);
	padding: var(--gt-s2);
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	background: var(--gt-surf);
	color: var(--gt-tx);
	transition: border-color var(--gt-fast) var(--gt-ease);
}

.gt-rel__card:hover {
	border-color: var(--gt-acc);
	color: var(--gt-tx);
}

.gt-rel__media {
	flex: none;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--gt-r);
	background: var(--gt-bg2);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.gt-rel__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gt-rel__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gt-ph);
}

.gt-rel__body {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.gt-rel__name {
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.35;
}

.gt-rel__code {
	font-family: var(--gt-mono);
	font-size: .625rem;
	color: var(--gt-tx3);
}

.gt-rel__note {
	font-size: .8125rem;
	color: var(--gt-tx3);
	border-left: 2px solid var(--gt-line2);
	padding-left: var(--gt-s3);
	margin: 0;
}

/* ── Porównanie ─────────────────────────────────────────────────── */

.gt-cmp__hint {
	color: var(--gt-tx2);
	font-size: .9375rem;
	max-width: var(--gt-measure);
}

.gt-cmp__table {
	min-width: 40rem;
	font-size: .9375rem;
	background: var(--gt-surf);
}

.gt-cmp__table th,
.gt-cmp__table td {
	border-bottom: 1px solid var(--gt-line);
	padding: .55rem .75rem;
}

/* Pierwsza kolumna zostaje w kadrze przy przewijaniu w bok — bez niej
   na telefonie nie wiadomo, którego parametru dotyczy liczba. */
.gt-cmp__table th:first-child,
.gt-cmp__table td:first-child {
	position: sticky;
	left: 0;
	background: var(--gt-surf2);
	z-index: 1;
}

.gt-cmp__table thead th { background: var(--gt-surf2); }

.gt-cmp__actions { margin-top: var(--gt-s4); }

/* ── Pasek widoków: 360° i zdjęcia ──────────────────────────────── */


/* Miniatura „360°" nie ma obrazka — zamiast niego mono-etykieta. Musi mieć
   ten sam gabaryt co miniatury zdjęć, żeby pasek nie skakał. */
.gt-gallery__thumb--spin {
	display: grid;
	place-items: center;
	background: var(--gt-surf2);
	color: var(--gt-tx2);
	font-size: .6875rem;
	letter-spacing: .06em;
}

.gt-gallery__thumb--spin.is-active {
	color: var(--gt-acc);
}

/* ── Opisy punktów nad zdjęciem statycznym ──────────────────────── */

.gt-gallery__hotspots {
	position: absolute;
	inset: 0;
	/* Punkty nie mają przechwytywać kliknięć — pod nimi jest zdjęcie,
	   a nad nimi przełącznik, który MUSI być klikalny (jest rodzeństwem
	   tej warstwy, nie jej dzieckiem). */
	pointer-events: none;
}

.gt-gallery__hotspots[hidden] + .gt-gallery__hstoggle,
.gt-gallery__hstoggle {
	position: absolute;
	right: .5rem;
	bottom: .5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .55rem;
	background: var(--gt-overlay, rgba(10, 11, 13, .82));
	border: 1px solid var(--gt-line);
	border-radius: var(--gt-r);
	color: var(--gt-tx2);
	font-family: var(--gt-mono);
	font-size: .625rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--gt-fast) var(--gt-ease), border-color var(--gt-fast) var(--gt-ease);
}

.gt-gallery__hstoggle:hover { color: var(--gt-tx); border-color: var(--gt-line2); }

.gt-gallery__hstoggle:focus-visible {
	outline: 2px solid var(--gt-acc);
	outline-offset: 2px;
}

/* Kropka-wskaźnik: zapalona, gdy opisy są widoczne. */
.gt-gallery__hstoggle-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gt-tx3);
	transition: background var(--gt-fast) var(--gt-ease);
}

.gt-gallery__hstoggle[aria-pressed="true"] { color: var(--gt-tx); }
.gt-gallery__hstoggle[aria-pressed="true"] .gt-gallery__hstoggle-dot { background: var(--gt-acc); }

.gt-gallery__hs {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .4rem;
	--gt-hs-dot: 10px;
	/*
	 * Kotwicą jest KROPKA, nie środek elementu.
	 *
	 * `translate(-50%, -50%)` centrowało cały element — kropkę, odstęp
	 * i etykietę — na współrzędnych punktu. Etykieta rośnie w prawo, więc
	 * środek elementu leżał daleko od kropki i kropka wypadała o pół
	 * szerokości etykiety W LEWO od miejsca, w którym postawiono ją
	 * w panelu. Pionowo element jest symetryczny (kropka i etykieta mają
	 * tę samą wysokość), dlatego wysokość zawsze się zgadzała.
	 *
	 * Przesuwamy więc tylko o połowę kropki, a etykieta wychodzi w prawo.
	 */
	transform: translate(calc(var(--gt-hs-dot) / -2), -50%);
}

.gt-gallery__hs-dot {
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: var(--gt-acc);
	box-shadow: 0 0 0 3px rgba(226, 67, 31, .28);
}

.gt-gallery__hs-label {
	padding: .15rem .45rem;
	background: rgba(10, 11, 13, .82);
	color: #fff;
	border-radius: var(--gt-r);
	font-family: var(--gt-mono);
	font-size: .625rem;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* ── Punkt przy prawej krawędzi ──────────────────────────────────────
   Etykieta rosnąca w prawo wyszłaby za pudełko zdjęcia i została ucięta
   przez `overflow: hidden`. Wtedy odwracamy kolejność: etykieta idzie
   w lewo, kropka zostaje na współrzędnych punktu. Przesunięcie to
   „cała szerokość w lewo, plus połowa kropki w prawo" — czyli prawa
   krawędź elementu wypada na środku kropki. */
.gt-spin__hs--flip,
.gt-gallery__hs--flip {
	flex-direction: row-reverse;
	transform: translate(calc(var(--gt-hs-dot) / 2 - 100%), -50%);
}