/* ==========================================================================
   Grawer Konfigurator - paleta zgodna z globalnymi kolorami strony.
   Czerwień (#cc0000) używana WYŁĄCZNIE jako akcent na hover przycisków -
   nigdzie indziej w interfejsie jako kolor bazowy.
   Typografia: IBM Plex Sans (UI) + IBM Plex Mono (dane techniczne: ceny,
   wymiary, materiały).
   Layout zoptymalizowany pod kątem zmieszczenia się w jednym widoku ekranu -
   zwarte odstępy, ikony zamiast tekstu tam, gdzie to możliwe.
   ========================================================================== */

:root {
	--gk-navy: #01153e;
	--gk-navy-soft: #263257;
	--gk-red: #cc0000;
	--gk-ink: #222222;
	--gk-gray: #504c4c;
	--gk-gray-mid: #727272;
	--gk-light: #ececec;
	--gk-line: #d8d8d8;
	--gk-white: #ffffff;
	--gk-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
	--gk-font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

.gk-app {
	max-width: 1040px;
	margin: 16px auto;
	color: var(--gk-ink);
	font-family: var(--gk-font-ui);
}

.gk-app * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------
   Siatka produktów (ekran startowy)
   -------------------------------------------------------------------- */

.gk-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}

.gk-product-card {
	background: var(--gk-white);
	border: 1px solid var(--gk-line);
	border-radius: 4px;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.gk-product-card:hover {
	border-color: var(--gk-navy);
	transform: translateY(-2px);
}

.gk-product-card:focus-visible {
	outline: 2px solid var(--gk-navy);
	outline-offset: 2px;
}

.gk-product-card-out-of-stock {
	position: relative;
	cursor: not-allowed;
}

.gk-product-card-out-of-stock:hover {
	transform: none;
	border-color: var(--gk-line);
}

.gk-product-card-out-of-stock .gk-product-card-visual,
.gk-product-card-out-of-stock .gk-product-card-body {
	filter: grayscale(1);
	opacity: 0.45;
}

.gk-product-card-oos-badge {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: rgba(1, 21, 62, 0.72);
}

.gk-product-card-visual {
	background: var(--gk-light);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
}

.gk-product-card-photo {
	width: 100%;
	height: 90px;
	object-fit: cover;
	/* Łagodne przejście przy przełączaniu zdjęć stron na kafelku szablonu
	   (patrz buildTemplateCardVisual w editor.js) - bez efektu na zwykłych
	   kartach produktów/"Zacznij od zera", bo tam obrazek nigdy się nie zmienia. */
	transition: opacity 0.25s ease;
}

.gk-product-card-body {
	padding: 10px 12px 12px;
}

.gk-product-card-eyebrow {
	font-family: var(--gk-font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gk-gray-mid);
	display: block;
	margin-bottom: 3px;
}

.gk-product-card-name {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--gk-ink);
}

.gk-product-card-price {
	font-family: var(--gk-font-mono);
	font-size: 12px;
	color: var(--gk-navy);
	font-weight: 600;
}

/* --------------------------------------------------------------------
   Pasek narzędzi (widok roboczy)
   -------------------------------------------------------------------- */

.gk-workspace {
	background: var(--gk-white);
	border: 1px solid var(--gk-line);
	border-radius: 4px;
	overflow: hidden;
}

.gk-toolbar {
	background: var(--gk-navy);
	color: var(--gk-white);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	flex-wrap: wrap;
}

.gk-back-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--gk-white);
	font-family: var(--gk-font-ui);
	font-size: 12px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: 3px;
	cursor: pointer;
	flex-shrink: 0;
}

.gk-back-btn:hover {
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-toolbar-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	flex-wrap: wrap;
	min-width: 0; /* jak przy .gk-canvas-stage - bez tego kontener z
		dropdownami materiał/rozmiar/otwory nie kurczył się poniżej swojej
		naturalnej szerokości (zależnej od długości nazw opcji), przez co
		część przycisków w tym samym pasku była wypychana poza widoczny
		ekran na telefonie, zamiast zawijać się do nowej linii. */
}

.gk-toolbar-product {
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	/* Ten sam wzorzec co .gk-layer-label: rodzic (.gk-toolbar-info) ma
	   min-width:0 i flex-wrap, ale to NIE pomaga elementowi z white-space:nowrap -
	   sam element i tak nie mógł się skurczyć poniżej szerokości pełnego,
	   niełamliwego tekstu. Długa nazwa produktu na wąskim telefonie wystawała/
	   ucinała się (rodzic .gk-workspace ma overflow:hidden). Piąty potwierdzony
	   przypadek tej samej pułapki flexboksa w tym pliku - patrz README. */
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.gk-stock-notice {
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	flex-basis: 100%;
}

.gk-stock-notice-out {
	background: #c0392b;
	color: #fff;
}

.gk-stock-notice-low {
	background: #fff3e0;
	color: #c77700;
}

.gk-option-groups {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0; /* patrz komentarz przy .gk-toolbar-info - ten sam problem,
		jeden poziom niżej w drzewie kontenerów. */
}

.gk-option-group {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.gk-option-group-label {
	font-family: var(--gk-font-mono);
	font-size: 9px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

/* Dropdown materiału/rozmiaru/grubości/otworów - jasne tło z ciemnym
   tekstem, spójne z resztą formularzy (zamiast ciemnego "chipa"), żeby
   uniknąć niespójności między zamkniętym a rozwiniętym stanem selecta. */
.gk-material-chip {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--gk-white);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2301153e' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 9px 6px;
	color: var(--gk-ink);
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	padding: 4px 20px 4px 8px;
	font-family: var(--gk-font-mono);
	font-size: 11px;
	line-height: 1.4;
	max-width: 100%;
	text-overflow: ellipsis;
}

.gk-material-chip option {
	background: var(--gk-white);
	color: var(--gk-ink);
}

.gk-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.gk-toolbar-divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.2);
	margin: 0 2px;
}

.gk-toolbar-divider-dark {
	background: var(--gk-line);
}

/* Kompaktowy przycisk-ikona - używany w pasku narzędzi i w panelu bocznym
   (wyrównanie, kształty) żeby zmieścić dużo akcji na małej przestrzeni. */
.gk-icon-btn {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--gk-white);
	border-radius: 3px;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.gk-icon-btn:hover {
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-icon-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.gk-icon-btn:disabled:hover {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--gk-white);
}

/* Wizualne zaznaczenie, że aktualna strona jest obrócona (przycisk rotacji) -
   ten sam wzorzec co aktywna zakładka strony (.gk-face-btn-active), tylko
   dopasowany do ikony-przycisku w ciemnym pasku narzędzi. */
.gk-icon-btn-active {
	background: var(--gk-red);
	border-color: var(--gk-red);
	color: var(--gk-white);
}

.gk-icon-btn-active:hover {
	background: var(--gk-red);
	border-color: var(--gk-red);
	color: var(--gk-white);
}

/* W panelu bocznym (jasne tło) ikony-przyciski dostają jasny wariant. */
.gk-sidebar .gk-icon-btn {
	border-color: var(--gk-line);
	color: var(--gk-ink);
	background: var(--gk-light);
}

.gk-sidebar .gk-icon-btn:hover {
	background: var(--gk-white);
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-sidebar .gk-icon-btn:disabled:hover {
	background: var(--gk-light);
	border-color: var(--gk-line);
	color: var(--gk-ink);
}

.gk-toolbar-price .gk-price-value {
	font-family: var(--gk-font-mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--gk-white);
	white-space: nowrap;
}

/* --------------------------------------------------------------------
   Obszar roboczy: canvas + panel narzędzi
   -------------------------------------------------------------------- */

.gk-workspace-body {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.gk-canvas-stage {
	order: 2;
	flex: 1 1 460px;
	min-width: 0; /* KLUCZOWE dla responsywności: flex-elementy mają domyślnie
		min-width:auto, co oznacza że NIE kurczą się poniżej naturalnego
		rozmiaru swojej zawartości - a zawartością jest <canvas width="600">,
		więc bez tej reguły kontener nigdy nie schodził poniżej ~600px+padding,
		niezależnie od flex-shrink:1 i niezależnie od faktycznej szerokości
		ekranu. To była PRAWDZIWA przyczyna złego skalowania na telefonie -
		potwierdzona bezpośrednim pomiarem (stageClientWidth=624 mimo
		windowInnerWidth=402) - nie błąd w logice JS liczącej skalowanie. */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px;
	background-image: radial-gradient(var(--gk-line) 1px, transparent 1px);
	background-size: 16px 16px;
	background-color: var(--gk-light);
	position: relative;
}

/* Ostrzeżenie pokazywane, gdy zmiana rozmiaru sprawia, że bieżąca strona
   grawerowania (2. strona wariantu "dwustronnego") przestaje istnieć dla
   nowo wybranego wariantu - klient jest wtedy automatycznie przełączany na
   stronę 1 (patrz switchFace(0) w change handlerze grupy "size"), a bez tego
   komunikatu wyglądało to jak zniknięcie tekstu/grafik bez wyjaśnienia,
   mimo że projekt strony 2 jest bezpiecznie zachowany w faceDesigns i wróci,
   jeśli klient ponownie wybierze wariant dwustronny. */
.gk-face-switch-notice {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	max-width: min(90%, 420px);
	background: #01153e;
	color: #fff;
	font-family: var(--gk-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 16px;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	z-index: 6;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gk-face-switch-notice.gk-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.gk-zoom-controls {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 2px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--gk-line);
	border-radius: 4px;
	padding: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	z-index: 5;
}

.gk-zoom-btn {
	width: 26px;
	height: 26px;
	border: none;
	background: transparent;
	border-radius: 3px;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	color: var(--gk-ink);
}

.gk-zoom-btn:hover {
	background: var(--gk-light);
	color: var(--gk-red);
}

.gk-zoom-level {
	font-family: var(--gk-font-mono);
	font-size: 11px;
	color: var(--gk-gray-mid);
	min-width: 38px;
	text-align: center;
}

.gk-draft-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--gk-light);
	border: 1px solid var(--gk-line);
	border-radius: 4px;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--gk-ink);
}

.gk-draft-banner span {
	flex: 1 1 auto;
	min-width: 200px;
}

#gk-canvas {
	border: 1px solid var(--gk-line);
	background: #fff;
	/* v3.14.1: limit wysokości (dawniej max-height:62vh tutaj) został
	   PRZENIESIONY do JS (patrz resizeCanvasResponsively w editor.js) -
	   liczony tam TYM SAMYM współczynnikiem co szerokość, żeby canvas
	   zawsze skalował się równomiernie. Trzymanie go tutaj w CSS ucinało
	   samą wysokość niezależnie od szerokości ustawianej przez JS, co przy
	   kwadratowym canvasie 800x800 psuło proporcje rysowanych formatek. */
	max-width: 100%;
	width: auto;
	height: auto;
	touch-action: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* KLUCZOWA NAPRAWA responsywności na telefonie/tablecie: Fabric.js po
   inicjalizacji owija <canvas> we własny div (.canvas-container) i ustawia
   NA OBU (wrapperze i samym canvasie) style INLINE w pikselach (np.
   "width:600px"), które WYGRYWAJĄ z regułą max-width:100% powyżej (styl
   inline ma wyższy priorytet niż arkusz stylów, niezależnie od reszty CSS).
   Efekt bez tej reguły: canvas w ogóle się nie kurczy na wąskim ekranie,
   cała strona musi się przewijać w bok - to była najprawdopodobniej GŁÓWNA
   przyczyna "konfigurator w ogóle niedostosowany do telefonu". !important
   jest tu konieczne, żeby przebić te wygenerowane przez JS style inline.
   Wewnętrzna rozdzielczość rysowania (600x400, cała matematyka cen/geometrii)
   zostaje bez zmian - to tylko WIZUALNE skalowanie w dół, jak przy zbyt
   dużym obrazku w wąskim kontenerze. */
.gk-canvas-stage .canvas-container {
	max-width: 100% !important;
	height: auto !important;
}
.gk-canvas-stage .canvas-container canvas {
	max-width: 100% !important;
	height: auto !important;
}

.gk-price-breakdown {
	font-family: var(--gk-font-mono);
	font-size: 10px;
	color: var(--gk-gray-mid);
	margin: 8px 0 0;
	text-align: center;
}

.gk-face-switcher {
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
}

.gk-face-btn {
	background: var(--gk-white);
	border: 1px solid var(--gk-line);
	color: var(--gk-gray-mid);
	font-family: var(--gk-font-ui);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 3px;
	cursor: pointer;
}

.gk-face-btn:hover {
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-face-btn-active {
	background: var(--gk-navy);
	border-color: var(--gk-navy);
	color: var(--gk-white);
}

.gk-face-btn-active:hover {
	border-color: var(--gk-navy);
	color: var(--gk-white);
}

.gk-sidebar {
	order: 1;
	flex: 0 0 250px;
	background: var(--gk-white);
	border-right: 1px solid var(--gk-line);
	padding: 12px 14px;
	max-height: 74vh;
	overflow-y: auto;
}

.gk-field {
	margin-bottom: 10px;
}

.gk-field label {
	display: block;
	font-family: var(--gk-font-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--gk-gray-mid);
}

.gk-field select,
.gk-field input[type="text"],
.gk-field input[type="number"],
.gk-field textarea,
.gk-field input[type="file"] {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	font-size: 13px;
	font-family: var(--gk-font-ui);
	background: #fff;
	color: var(--gk-ink);
}

.gk-field textarea {
	resize: vertical;
	min-height: 42px;
	line-height: 1.4;
}

.gk-field input[type="file"] {
	font-size: 11px;
	padding: 5px 6px;
}

.gk-field input[type="range"] {
	width: 100%;
	margin-top: 2px;
	accent-color: var(--gk-navy);
}

/* Kompaktowy rząd kilku kontrolek obok siebie (czcionka/rozmiar/odstępy,
   kształty/grubość/wypełnienie) - oszczędza dużo pionowego miejsca
   w porównaniu do stackowania każdej kontrolki z własną etykietą. */
.gk-inline-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.gk-inline-row select {
	flex: 1 1 90px;
	width: auto;
	min-width: 0; /* czwarty przypadek tej samej rodziny błędów - niektóre
		nazwy czcionek (np. "Dancing Script", "Special Elite") są długie
		i bez tego ustawiały naturalną minimalną szerokość szerszą niż
		dostępne miejsce na wąskim telefonie. */
}

.gk-inline-slider {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--gk-gray-mid);
	flex: 1 1 70px;
	min-width: 0;
	cursor: default;
}

.gk-inline-slider input[type="range"] {
	margin-top: 0;
	width: 60px;
}

/* Rozmiar czcionki (pkt) i grubość linii (mm) - dawniej suwaki, teraz
   dokładne pola liczbowe (patrz README v3.15.0) - węższe niż standardowe
   pola formularza, żeby zmieściły się obok reszty kontrolek w tym samym
   rzędzie. */
.gk-inline-slider input[type="number"] {
	width: 52px;
	padding: 3px 5px;
	margin-top: 0;
}

/* Mały przycisk "przywróć domyślne" doklejony do suwaka/pola liczbowego -
   ten sam wzorzec wizualny co .gk-icon-btn, tylko mniejszy, bo dzieli
   ciasny rząd z resztą kontrolek tekstu/kształtu. */
.gk-mini-reset {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	background: var(--gk-white);
	color: var(--gk-gray-mid);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.gk-mini-reset:hover {
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-divider {
	border: none;
	border-top: 1px solid var(--gk-line);
	margin: 10px 0;
}

.gk-btn {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 3px;
	border: 1px solid transparent;
	font-family: var(--gk-font-ui);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 0;
	margin-right: 4px;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.gk-btn-block {
	display: block;
	width: 100%;
	margin: 6px 0 0;
	text-align: center;
}

/* Czerwień - JEDYNE miejsce w interfejsie, gdzie się pojawia: hover przycisków. */
.gk-btn-primary {
	background: var(--gk-navy);
	color: var(--gk-white);
	width: 100%;
	margin-top: 10px;
}

.gk-btn-primary:hover {
	background: var(--gk-red);
}

.gk-btn-secondary {
	background: var(--gk-light);
	color: var(--gk-ink);
	border-color: var(--gk-line);
}

.gk-btn-secondary:hover {
	background: var(--gk-white);
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-btn-danger {
	background: var(--gk-light);
	color: var(--gk-gray);
	border-color: var(--gk-line);
}

.gk-btn-danger:hover {
	background: var(--gk-red);
	color: var(--gk-white);
	border-color: var(--gk-red);
}

.gk-btn-ghost {
	background: transparent;
	color: var(--gk-gray-mid);
	border-color: var(--gk-line);
}

.gk-btn-ghost:hover {
	color: var(--gk-red);
	border-color: var(--gk-red);
}

.gk-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.gk-btn:disabled:hover {
	background: var(--gk-light);
	color: var(--gk-gray-mid);
	border-color: var(--gk-line);
}

.gk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gk-icon-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

/* Selektor .gk-field .gk-checkbox-label (specyficzność 0,2,0), nie sam
   .gk-checkbox-label (0,1,0) - bez tego przegrywał z .gk-field label
   (0,1,1, wyżej w tym pliku), stąd oryginalnie 7x !important poniżej.
   .gk-checkbox-label w HTML zawsze występuje wewnątrz <div class="gk-field">,
   więc podniesienie specyficzności w ten sposób nic nie zmienia wizualnie -
   tylko usuwa potrzebę siłowego nadpisywania. */
.gk-field .gk-checkbox-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--gk-font-ui);
	font-size: 12px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--gk-ink);
	font-weight: 400;
	cursor: pointer;
	white-space: nowrap;
}

.gk-checkbox-label input[type="checkbox"] {
	width: auto;
	accent-color: var(--gk-navy);
}

.gk-layers-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 140px;
	overflow-y: auto;
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	background: #fff;
}

.gk-layers-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 4px 6px;
	font-size: 12px;
	border-bottom: 1px solid var(--gk-light);
}

.gk-layers-list li:last-child {
	border-bottom: none;
}

.gk-layers-list li.gk-layer-active {
	background: var(--gk-light);
	font-weight: 600;
	border-left: 3px solid var(--gk-navy);
}

.gk-layers-list li.gk-layer-hidden {
	opacity: 0.5;
	font-style: italic;
}

.gk-layer-label {
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.gk-layer-controls {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}

.gk-layer-btn {
	background: none;
	border: 1px solid transparent;
	border-radius: 3px;
	width: 22px;
	height: 22px;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	color: var(--gk-gray-mid);
}

.gk-layer-btn:hover:not(:disabled) {
	background: var(--gk-light);
	border-color: var(--gk-line);
	color: var(--gk-navy);
}

.gk-layer-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* --------------------------------------------------------------------
   Znaczniki rejestracyjne
   -------------------------------------------------------------------- */


/* --------------------------------------------------------------------
   Modal podglądu
   -------------------------------------------------------------------- */

.gk-preview-modal {
	position: fixed;
	inset: 0;
	background: rgba(1, 21, 62, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}

.gk-preview-modal-inner {
	background: var(--gk-white);
	border-radius: 4px;
	padding: 26px;
	max-width: 480px;
	width: 100%;
	text-align: center;
	border-top: 3px solid var(--gk-navy);
}

.gk-preview-modal-inner h3 {
	font-family: var(--gk-font-mono);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gk-navy);
}

.gk-preview-modal-inner img {
	max-width: 100%;
	border: 1px solid var(--gk-line);
	margin: 12px 0;
}

.gk-preview-face-img-wrap {
	position: relative;
	display: inline-block;
}

.gk-preview-zoom-btn {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: rgba(1, 21, 62, 0.85);
	color: #fff;
	border: none;
	border-radius: 3px;
	width: 26px;
	height: 26px;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.gk-preview-zoom-btn:hover {
	background: var(--gk-red);
}

.gk-preview-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(1, 21, 62, 0.75);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.gk-preview-lightbox img {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 4px;
	background: #fff;
}

.gk-preview-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	color: #fff;
	font-size: 32px;
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1;
}

.gk-preview-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 10px 0;
}

.gk-preview-face {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.gk-preview-face img {
	max-width: 160px;
	max-height: 140px;
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	background: #fff;
}

.gk-preview-face span {
	font-family: var(--gk-font-mono);
	font-size: 11px;
	color: var(--gk-gray-mid);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gk-preview-3d-wrap {
	margin: 10px 0;
	text-align: center;
}

.gk-preview-3d-wrap canvas {
	width: 220px;
	height: 220px;
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	background: var(--gk-light);
}

.gk-preview-warnings {
	background: #fff8e1;
	border-left: 3px solid #f9a825;
	border-radius: 3px;
	padding: 8px 12px;
	margin: 10px 0;
}

.gk-preview-warnings p {
	margin: 2px 0;
	font-size: 12px;
	color: #5c4400;
	line-height: 1.4;
}

.gk-preview-price {
	font-family: var(--gk-font-mono);
	font-size: 22px;
	font-weight: 700;
	color: var(--gk-navy);
	margin: 4px 0;
}

.gk-preview-status {
	font-size: 13px;
	min-height: 18px;
	margin: 4px 0;
}

.gk-preview-status.gk-status-error {
	color: var(--gk-red);
}

.gk-preview-status.gk-status-success {
	color: #1a7a3c;
}

.gk-preview-addons {
	margin: 4px 0 8px;
}

.gk-preview-addons-heading {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gk-ink);
	margin: 0 0 6px;
}

.gk-preview-addon-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--gk-ink);
	padding: 6px 0;
	cursor: pointer;
}

.gk-preview-addon-option input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--gk-navy);
	cursor: pointer;
}

.gk-preview-note {
	font-size: 13px;
	color: var(--gk-gray-mid);
}

/* --------------------------------------------------------------------
   Panel boczny: gęstszy układ (v3.17.0) - odstępy/rozmiary kontrolek w
   panelu bocznym zmniejszone o ok. 15-20%, żeby cała jego zawartość
   mieściła się bez przewijania wewnętrznego (limit wysokości 74vh
   zostaje bez zmian). Celowo w osobnym @media (min-width: 701px), a NIE
   jako zmiana bazowych reguł .gk-field/.gk-icon-btn/itd. - dzięki temu
   telefon (≤700px) zachowuje swoje obecne, celowo większe cele dotykowe
   (40px) i nic tu ich nie nadpisuje. Wybrana po porównaniu na żywo z
   alternatywą "powiększony panel" (podniesiony limit wysokości zamiast
   kompresji) - patrz README.
   -------------------------------------------------------------------- */

@media (min-width: 701px) {
	.gk-sidebar {
		padding: 9px 11px;
	}
	.gk-field {
		margin-bottom: 6px;
	}
	.gk-field label {
		margin-bottom: 3px;
		font-size: 9px;
	}
	.gk-field select,
	.gk-field input[type="text"],
	.gk-field input[type="number"],
	.gk-field textarea,
	.gk-field input[type="file"] {
		padding: 5px 7px;
		font-size: 12px;
	}
	.gk-field textarea {
		min-height: 34px;
	}
	.gk-field input[type="file"] {
		font-size: 10px;
		padding: 4px 5px;
	}
	.gk-inline-row {
		gap: 4px;
	}
	.gk-inline-slider {
		gap: 3px;
		font-size: 11px;
	}
	.gk-inline-slider input[type="number"] {
		width: 44px;
		padding: 2px 4px;
	}
	.gk-mini-reset {
		width: 17px;
		height: 17px;
		font-size: 10px;
	}
	.gk-divider {
		margin: 6px 0;
	}
	.gk-sidebar .gk-icon-btn {
		width: 25px;
		height: 25px;
		font-size: 13px;
	}
	.gk-icon-row {
		gap: 3px;
	}
	.gk-btn {
		padding: 5px 10px;
		font-size: 11px;
	}
	.gk-btn-block {
		margin: 4px 0 0;
	}
	.gk-btn-primary {
		margin-top: 6px;
	}
	.gk-actions {
		gap: 3px;
	}
	.gk-field .gk-checkbox-label {
		font-size: 11px;
	}
	.gk-layers-list {
		max-height: 110px;
	}
	.gk-layers-list li {
		padding: 3px 5px;
		font-size: 11px;
	}
	.gk-layer-btn {
		width: 19px;
		height: 19px;
		font-size: 10px;
	}
}

/* --------------------------------------------------------------------
   Responsywność
   -------------------------------------------------------------------- */

@media (max-width: 700px) {
	.gk-workspace-body {
		flex-direction: column;
		flex-wrap: nowrap; /* wykluczamy jakiekolwiek dzielenie na "kolumny"
			obok siebie w trybie pionowym - chcemy czysty, pojedynczy stos
			canvas-stage nad/pod sidebar, nigdy obok siebie. */
	}
	.gk-canvas-stage {
		order: 1;
	}
	.gk-sidebar {
		order: 2;
		border-right: none;
		border-top: 1px solid var(--gk-line);
		max-height: none;
		flex: 1 1 auto;
		min-width: 0; /* trzeci przypadek tego samego problemu co przy
			.gk-canvas-stage i .gk-toolbar-info - bez tego sidebar nie kurczył
			się poniżej naturalnej szerokości swojej zawartości (przyciski typu
			"+ Nowy, osobny napis"/"Zapisz i pokaż podgląd" z dłuższym tekstem),
			przez co ich tekst wychodził poza widoczny ekran na telefonie. */
	}
	.gk-toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.gk-toolbar-price {
		text-align: center;
	}
	/* max-height dla tego breakpointu (dawniej 50vh) liczony jest teraz
	   w JS - patrz resizeCanvasResponsively w editor.js (próg 700px). */

	/* Większe cele dotykowe - 30px jest w porządku dla myszki, ale na
	   telefonie łatwo nie trafić palcem. Dotyczy WSZYSTKICH ikon-przycisków
	   (wyrównanie, kształty, cofnij/ponów, grupowanie...), nie tylko
	   głównego paska narzędzi. */
	.gk-icon-btn {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}

	/* Lista warstw: przyciski sterowania trochę większe niż domyślne 22px -
	   pełne 40px rozsadziłoby kompaktową listę, więc kompromis pośredni. */
	.gk-layer-btn {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
	.gk-layers-list {
		max-height: 170px;
	}

	/* Dropdowny grup opcji (materiał/rozmiar/...) na pełną szerokość zamiast
	   ściśniętych obok siebie w rzędzie - łatwiej trafić palcem i przeczytać. */
	.gk-option-groups select {
		flex: 1 1 100%;
		min-width: 0;
	}

	/* Galeria podglądu stron - mniejsze miniatury, żeby więcej się mieściło
	   bez przewijania w bok na wąskim ekranie. */
	.gk-preview-face img {
		max-width: 110px;
		max-height: 100px;
	}

	.gk-preview-modal-inner {
		padding: 16px;
		max-height: 92vh;
		overflow-y: auto;
	}

	/* Rząd ikon-przycisków (cofnij/ponów/grupuj/skróty) - dodatkowa siatka
	   bezpieczeństwa na bardzo wąskich telefonach (< ~340px), żeby zawinął
	   się do nowej linii zamiast wymuszać przewijanie w bok. */
	.gk-toolbar-actions {
		flex-wrap: wrap;
	}

	/* Baner roboczego projektu ("Masz niedokończony projekt") - mniejsze
	   minimum niż na desktopie, żeby nie wymuszało przewijania w bok na
	   naprawdę wąskich ekranach. */
	.gk-draft-banner span {
		min-width: 0;
	}

	/* Podgląd 3D w oknie potwierdzenia zamówienia - był na sztywno 220px w
	   arkuszu stylów (nie max-width), na wąskim telefonie mógłby wystawać
	   poza krawędź modala. Podgląd SVG/zdjęcia ma już max-width:220px jako
	   styl inline (patrz HTML), który sam poprawnie kurczy się na wąskich
	   ekranach - nie wymaga dodatkowej reguły tutaj. */
	.gk-preview-3d-wrap canvas {
		max-width: 100%;
		height: auto;
	}
}


/* --------------------------------------------------------------------
   SZABLONY GOTOWYCH PROJEKTÓW - ekran wyboru u klienta (galeria "Zacznij
   od zera" + gotowe szablony) i panel zapisu w kreatorze admina. Patrz
   openProduct/showTemplateGallery/setupTemplateBuilderMode w editor.js.
   -------------------------------------------------------------------- */

.gk-template-gallery-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.gk-template-gallery-header .gk-back-btn {
	background: var(--gk-white);
	border-color: var(--gk-line);
	color: var(--gk-ink);
}

.gk-template-gallery-header .gk-back-btn:hover {
	border-color: var(--gk-red);
	color: var(--gk-red);
}

.gk-template-gallery-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--gk-ink);
	margin: 0;
}

/* Kafelki szablonów reużywają .gk-product-card (patrz .gk-product-grid w
   #gk-template-gallery-tiles) - tu tylko wyróżnienie kafelka "Zacznij od
   zera", żeby wizualnie odróżniał się od gotowych szablonów ze zdjęciem. */
.gk-template-card-blank .gk-product-card-visual {
	background: var(--gk-light);
}

.gk-template-card-blank .gk-product-card-name {
	color: var(--gk-navy);
}

/* Panel "Zapisz jako szablon" w oknie podglądu - widoczny TYLKO w kreatorze
   szablonów (gkData.templateMode), zamiast przycisku "Dodaj do koszyka". */
.gk-save-template-row {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--gk-line);
}

.gk-save-template-row label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--gk-gray-mid);
}

.gk-save-template-name {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--gk-line);
	border-radius: 3px;
	font-size: 13px;
	font-family: var(--gk-font-ui);
	background: #fff;
	color: var(--gk-ink);
	margin-bottom: 8px;
	box-sizing: border-box;
}

.gk-save-template-status {
	font-size: 13px;
	min-height: 18px;
	margin: 6px 0 0;
	text-align: center;
}