.tgs-wrap {
	--tgs-dur: 500ms;
	--tgs-tdir: row;
	--tgs-tox: auto;
	--tgs-toy: hidden;
	--tgs-tmax: none;
	--tgs-th: auto;
	--tgs-gap: 28px;
	--tgs-n: 4;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	box-sizing: border-box;
}

.tgs-wrap *,
.tgs-wrap *::before,
.tgs-wrap *::after {
	box-sizing: border-box;
}

/* ---------- Main ---------- */
.tgs-main {
	position: relative;
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	height: 450px;
	overflow: hidden;
	touch-action: pan-y;
}

.tgs-slides {
	position: absolute;
	inset: 0;
}

.tgs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tgs-dur) ease, transform var(--tgs-dur) ease, visibility 0s linear var(--tgs-dur);
}

.tgs-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition-delay: 0s, 0s, 0s;
}

.tgs-slide a {
	display: block;
	width: 100%;
	height: 100%;
}

.tgs-slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
	user-select: none;
	-webkit-user-drag: none;
}

/* Effects */
.tgs-effect-zoom .tgs-slide { transform: scale(1.12); }
.tgs-effect-zoom .tgs-slide.is-active { transform: scale(1); }

.tgs-effect-slide .tgs-slide {
	opacity: 1;
	visibility: visible;
	transform: translateX(100%);
	transition: transform var(--tgs-dur) ease;
}
.tgs-effect-slide .tgs-slide.is-before { transform: translateX(-100%); }
.tgs-effect-slide .tgs-slide.is-active { transform: none; }

.tgs-effect-none .tgs-slide,
.tgs-effect-none .tgs-slide.is-active { transition: none; }

/* ---------- Caption ---------- */
.tgs-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
}

/* ---------- Arrows ---------- */
.tgs-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tgs-arrow svg { width: 20px; height: 20px; display: block; }
.tgs-prev { left: 14px; }
.tgs-next { right: 14px; }
.tgs-arrow[disabled] { opacity: 0.35; cursor: default; }

/* ---------- Counter ---------- */
.tgs-counter {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	font-size: 14px;
	line-height: 1.4;
	pointer-events: none;
}

/* ---------- Thumbnails ---------- */
.tgs-thumbs {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: var(--tgs-tdir, row);
	overflow-x: var(--tgs-tox, auto);
	overflow-y: var(--tgs-toy, hidden);
	max-height: var(--tgs-tmax, none);
	height: var(--tgs-th, auto);
	gap: var(--tgs-gap, 28px);
	padding: 4px;
	min-width: 0;
	scrollbar-width: none;
}

.tgs-thumbs::-webkit-scrollbar { display: none; }

.tgs-thumb {
	flex: 0 0 auto;
	width: 150px;
	height: 96px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	background: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tgs-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

.tgs-thumb:focus-visible,
.tgs-arrow:focus-visible {
	outline: 2px solid #ffb703;
	outline-offset: 2px;
}

/* Fit-by-visible-count mode: N thumbnails fill the strip */
.tgs-mode-fit .tgs-thumb {
	flex: 0 0 calc((100% - (var(--tgs-n, 4) - 1) * var(--tgs-gap, 28px)) / var(--tgs-n, 4));
}