.jltgpg-gallery {
	--jltgpg-accent: #F28955;
	--jltgpg-cols: 5;
	max-width: 100%;
	margin: 24px 0;
}

/* Wyłącza domyślne, systemowe "podświetlenie" dotyku na telefonach (ten
   niebiesko-szary prostokąt widoczny przez moment po tapnięciu przycisku) na
   wszystkich klikalnych elementach galerii. */
.jltgpg-gallery button,
.jltgpg-gallery select,
.jltgpg-gallery .jltgpg-thumb-btn {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.jltgpg-lightbox button {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Zakładki (kilka albumów w jednej galerii). Domyślny układ to zawijane
   przyciski (.jltgpg-tabbar); JS dolicza do kontenera galerii klasę
   .jltgpg-layout-scroll albo .jltgpg-layout-dropdown, gdy w ustawieniach
   wybrano jeden z dwóch alternatywnych układów (osobno dla komputera i
   telefonu - JS sam sprawdza aktualną szerokość ekranu i przelicza to przy
   zmianie rozmiaru okna). */
.jltgpg-tabswitch {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
}

.jltgpg-tabbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Strzałki do przewijania (tylko układ "jedna linia ze scrollowaniem") - JS
   pokazuje je (display:flex) tylko wtedy, gdy zakładki faktycznie się nie
   mieszczą w jednej linii. */
.jltgpg-tabbar-arrow,
.jltgpg-tabbar-arrow:focus {
	display: none;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--jltgpg-accent);
	color: #fff;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	padding: 0;
	outline: none;
}

/* Bez tego przeglądarka/motyw domyślnie maluje przycisk na granatowo po
   kliknięciu (:active) - jawnie przypinamy nasz kolor akcentu we
   wszystkich stanach interakcji. */
.jltgpg-tabbar-arrow:hover,
.jltgpg-tabbar-arrow:active,
.jltgpg-tabbar-arrow:focus-visible {
	background: var(--jltgpg-accent2);
	color: #fff;
}

.jltgpg-layout-scroll .jltgpg-tabbar {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.jltgpg-layout-scroll .jltgpg-tabbar::-webkit-scrollbar {
	display: none;
}

.jltgpg-layout-scroll .jltgpg-tab {
	flex: 0 0 auto;
}

/* Rozwijana lista albumów (układ "dropdown") - domyślnie ukryta, JS/CSS
   pokazuje ją zamiast rzędu przycisków. */
.jltgpg-tabbar-select-wrap {
	display: none;
	flex: 1 1 auto;
}

.jltgpg-layout-dropdown .jltgpg-tabbar,
.jltgpg-layout-dropdown .jltgpg-tabbar-arrow {
	display: none;
}

.jltgpg-layout-dropdown .jltgpg-tabbar-select-wrap {
	display: flex;
}

.jltgpg-tabbar-select {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 2px solid var(--jltgpg-accent);
	background: #fff;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* Na telefonie rozwijana lista albumów ma być wyśrodkowana, a nie
   rozciągnięta na pełną szerokość. */
@media (max-width: 640px) {
	.jltgpg-layout-dropdown .jltgpg-tabbar-select-wrap {
		justify-content: center;
	}
	.jltgpg-layout-dropdown .jltgpg-tabbar-select {
		max-width: 320px;
	}
}

.jltgpg-tab {
	border-style: solid;
	border-width: 2px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
	transform: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;

	font-size: var(--jltgpg-btn-size-normal, 14px);
	padding: 0.6em 1.4em;
	border-radius: var(--jltgpg-btn-radius-normal, 50px);
	background: var(--jltgpg-btn-bg-normal, transparent);
	color: var(--jltgpg-btn-color-normal, var(--jltgpg-accent));
	border-color: var(--jltgpg-btn-border-color-normal, var(--jltgpg-accent));
}

.jltgpg-tab:hover,
.jltgpg-tab:focus-visible {
	font-size: var(--jltgpg-btn-size-hover, 14px);
	padding: 0.6em 1.4em;
	border-radius: var(--jltgpg-btn-radius-hover, 50px);
	background: var(--jltgpg-btn-bg-hover, var(--jltgpg-accent));
	color: var(--jltgpg-btn-color-hover, #fff);
	border-color: var(--jltgpg-btn-border-color-hover, var(--jltgpg-accent));
	transform: var(--jltgpg-btn-hover-transform, none);
	outline: none;
}

.jltgpg-tab.jltgpg-tab-active {
	font-size: var(--jltgpg-btn-size-active, 14px);
	padding: 0.6em 1.4em;
	border-radius: var(--jltgpg-btn-radius-active, 50px);
	background: var(--jltgpg-btn-bg-active, var(--jltgpg-accent2));
	color: var(--jltgpg-btn-color-active, #fff);
	border-color: var(--jltgpg-btn-border-color-active, var(--jltgpg-accent2));
}

/* Alternatywny wygląd zakładek "Zakładki" - płaskie, kwadratowe karty
   zajmujące równą szerokość, zaokrąglone tylko u góry. Rozmiar, kolory tła/
   tekstu i obramowanie dla każdego z 3 stanów (normalny/hover/aktywny) można
   nadpisać w panelu bloku - domyślnie (gdy nic nie ustawiono) korzystają
   automatycznie z obu kolorów akcentu, analogicznie jak w stylu "Pigułki"
   (border-style/border-width odziedziczone z bazowej reguły .jltgpg-tab). */
.jltgpg-gallery[data-tab-shape="folder"] .jltgpg-tabbar {
	gap: 0;
}

.jltgpg-gallery[data-tab-shape="folder"] .jltgpg-tab {
	flex: 1 1 0;
	text-align: center;
	border-radius: 6px 6px 0 0;
	font-size: var(--jltgpg-tabfolder-size-normal, 14px);
	background: var(--jltgpg-tabfolder-bg-normal, transparent);
	color: var(--jltgpg-tabfolder-color-normal, var(--jltgpg-accent));
	border-color: var(--jltgpg-tabfolder-border-color-normal, var(--jltgpg-accent));
}

.jltgpg-gallery[data-tab-shape="folder"] .jltgpg-tab:hover,
.jltgpg-gallery[data-tab-shape="folder"] .jltgpg-tab:focus-visible {
	font-size: var(--jltgpg-tabfolder-size-hover, 14px);
	background: var(--jltgpg-tabfolder-bg-hover, var(--jltgpg-accent));
	color: var(--jltgpg-tabfolder-color-hover, #fff);
	border-color: var(--jltgpg-tabfolder-border-color-hover, var(--jltgpg-accent));
	transform: none;
}

.jltgpg-gallery[data-tab-shape="folder"] .jltgpg-tab.jltgpg-tab-active {
	font-size: var(--jltgpg-tabfolder-size-active, 14px);
	background: var(--jltgpg-tabfolder-bg-active, var(--jltgpg-accent2));
	color: var(--jltgpg-tabfolder-color-active, #fff);
	border-color: var(--jltgpg-tabfolder-border-color-active, var(--jltgpg-accent2));
}

.jltgpg-gallery[data-tab-shape="folder"].jltgpg-layout-scroll .jltgpg-tab {
	flex: 0 0 auto;
}

.jltgpg-tabpanel {
	display: none;
}

.jltgpg-tabpanel.jltgpg-tabpanel-active {
	display: block;
}

.jltgpg-title {
	margin: 0 0 14px;
}

/* Siatka miniaturek - domyślnie tyle kolumn, ile ustawiono (var(--jltgpg-cols)),
   z sensownymi widełkami na mniejszych ekranach. */
.jltgpg-grid {
	display: grid;
	grid-template-columns: repeat(var(--jltgpg-cols), 1fr);
	gap: 12px;
}

@media (max-width: 1000px) {
	.jltgpg-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.jltgpg-grid {
		grid-template-columns: repeat(2, 1fr);
		/* Odstępy 2x mniejsze niż na desktopie (12px -> 6px), żeby zdjęcia
		   mogły być nieco większe na telefonie. */
		gap: 6px;
	}
}

.jltgpg-thumb-btn {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #eee;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jltgpg-thumb-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

/* Hover: uniesienie kafelka + pomarańczowa ramka (box-shadow, żeby ładnie
   podążała za zaokrągleniem rogów) + delikatne powiększenie zdjęcia w środku. */
.jltgpg-thumb-btn:hover,
.jltgpg-thumb-btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 0 0 3px var(--jltgpg-accent), 0 10px 24px rgba(0, 0, 0, 0.28);
	outline: none;
}

.jltgpg-thumb-btn:hover img,
.jltgpg-thumb-btn:focus-visible img {
	transform: scale(1.08);
}

/* Przycisk "Pokaż więcej zdjęć" */
.jltgpg-loadmore-wrap {
	text-align: center;
	margin-top: 20px;
}

.jltgpg-loadmore {
	border-style: solid;
	border-width: 2px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
	transform: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;

	font-size: var(--jltgpg-btn-size-normal, 14px);
	padding: 0.7em 1.9em;
	border-radius: var(--jltgpg-btn-radius-normal, 50px);
	background: var(--jltgpg-btn-bg-normal, transparent);
	color: var(--jltgpg-btn-color-normal, var(--jltgpg-accent));
	border-color: var(--jltgpg-btn-border-color-normal, var(--jltgpg-accent));
}

.jltgpg-loadmore:hover,
.jltgpg-loadmore:focus-visible {
	font-size: var(--jltgpg-btn-size-hover, 14px);
	padding: 0.7em 1.9em;
	border-radius: var(--jltgpg-btn-radius-hover, 50px);
	background: var(--jltgpg-btn-bg-hover, var(--jltgpg-accent));
	color: var(--jltgpg-btn-color-hover, #fff);
	border-color: var(--jltgpg-btn-border-color-hover, var(--jltgpg-accent));
	transform: var(--jltgpg-btn-hover-transform, none);
	outline: none;
}

.jltgpg-loadmore:active,
.jltgpg-loadmore:active:focus-visible {
	font-size: var(--jltgpg-btn-size-active, 14px);
	padding: 0.7em 1.9em;
	border-radius: var(--jltgpg-btn-radius-active, 50px);
	background: var(--jltgpg-btn-bg-active, var(--jltgpg-accent2));
	color: var(--jltgpg-btn-color-active, #fff);
	border-color: var(--jltgpg-btn-border-color-active, var(--jltgpg-accent2));
}

/* Lightbox */
.jltgpg-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(10, 10, 10, 0.92);
	align-items: center;
	justify-content: center;
}

.jltgpg-lightbox.jltgpg-open {
	display: flex;
}

.jltgpg-lb-imgwrap {
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jltgpg-lb-imgwrap img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	display: block;
}

/* "x" (zamknięcie): zawsze białe. W spoczynku bez tła; po najechaniu/
   kliknięciu/fokusie pojawia się okrągłe tło w kolorze akcentu 2 i przycisk
   się powiększa. Tło i kolor są jawnie wymuszone osobno dla stanu
   spoczynkowego i dla stanów interakcji (zamiast polegać na dziedziczeniu
   z pojedynczej reguły bazowej), żeby żaden styl motywu WordPressa się tu
   nie "wdarł" (np. fioletowe tło z domyślnych stylów przycisków motywu) i
   żeby po kliknięciu i puszczeniu przycisku wygląd zawsze wracał do
   właściwego, a nie "utykał" na innym - patrz wcześniejsze zgłoszenie o
   strzałce, która nie wracała do koloru pierwotnego. */
.jltgpg-lb-close,
.jltgpg-lb-close:focus {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	outline: none;
	transform: scale(1);
	transition: background 0.15s ease, transform 0.15s ease;
}

.jltgpg-lb-close:hover,
.jltgpg-lb-close:active,
.jltgpg-lb-close:focus-visible {
	background: var(--jltgpg-lb-accent2, #F28955);
	color: #fff;
	transform: scale(1.08);
}

/* Strzałki są ZAWSZE widoczne - świadomie brak logiki opacity/hover do
   pokazywania. Tak samo jak "x": nienajechana/nieaktywna strzałka ma kolor
   akcentu 1, najechana/klikana/fokusowana - akcentu 2. */
.jltgpg-lb-arrow,
.jltgpg-lb-arrow:focus {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--jltgpg-lb-accent1, #F28955);
	opacity: 0.9;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: visible;
	outline: none;
	transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.jltgpg-lb-arrow:hover,
.jltgpg-lb-arrow:active,
.jltgpg-lb-arrow:focus-visible {
	background: var(--jltgpg-lb-accent2, #F28955);
}

.jltgpg-lb-arrow:hover,
.jltgpg-lb-arrow:focus-visible {
	opacity: 1;
	transform: translateY(-50%) scale(1.08);
}

.jltgpg-lb-arrow:active {
	transform: translateY(-50%) scale(0.96);
}

.jltgpg-lb-prev {
	left: 18px;
}

.jltgpg-lb-next {
	right: 18px;
}

.jltgpg-lb-counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: var(--jltgpg-lb-accent2, #F28955);
	padding: 4px 14px;
	border-radius: 20px;
}

@media (max-width: 640px) {
	/* Na telefonie strzałki są bez tła (samo tło zasłaniało za dużo zdjęcia) i
	   nieco większe niż na desktopie - widoczność zapewnia cień pod znakiem
	   zamiast wypełnionego kółka. Kolor (jasny/biały) zostaje ten sam we
	   wszystkich stanach - tu chodzi tylko o usunięcie tła. */
	.jltgpg-lb-arrow,
	.jltgpg-lb-arrow:focus,
	.jltgpg-lb-arrow:hover,
	.jltgpg-lb-arrow:active,
	.jltgpg-lb-arrow:focus-visible {
		width: 54px;
		height: 54px;
		font-size: 30px;
		background: transparent;
		opacity: 1;
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.85);
	}
	.jltgpg-lb-arrow:hover,
	.jltgpg-lb-arrow:focus-visible {
		transform: translateY(-50%) scale(1.12);
	}
	.jltgpg-lb-prev {
		left: 6px;
	}
	.jltgpg-lb-next {
		right: 6px;
	}
	/* "x" dwa razy większe niż poprzedni rozmiar mobilny (38px / 26px). */
	.jltgpg-lb-close,
	.jltgpg-lb-close:focus {
		top: 4px;
		right: 4px;
		width: 76px;
		height: 76px;
		font-size: 52px;
	}
}