.tpe-gallery {
	--tpe-thumbs: 4;
	--tpe-gap: 10px;
	--tpe-aspect: 1 / 1;
	--tpe-thumb-opacity: .7;
	--tpe-thumb-active: transparent;
	display: flex;
	flex-direction: column;
	gap: var(--tpe-gap);
	min-width: 0;
}
.tpe-gallery__stage { position: relative; }
.tpe-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.tpe-gallery__track::-webkit-scrollbar { display: none; }
.tpe-gallery__track:focus-visible { outline: 2px solid #0050a5; outline-offset: 2px; }
.tpe-gallery__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--tpe-aspect);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	cursor: zoom-in;
}
.tpe-gallery:not([data-lightbox]) .tpe-gallery__slide { cursor: default; }
.tpe-gallery__img { display: block; width: 100%; height: 100%; object-fit: contain; }

.tpe-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #333;
	cursor: pointer;
	opacity: .8;
	transition: opacity .15s, background .15s;
}
.tpe-gallery__arrow:hover { opacity: 1; background: #fff; }
.tpe-gallery__arrow--prev { left: 4px; }
.tpe-gallery__arrow--next { right: 4px; }
.tpe-gallery__arrow svg, .tpe-gallery__zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tpe-gallery__zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #c8c8c8;
	border-radius: 50%;
	background: #fff;
	color: #555;
	cursor: pointer;
}
.tpe-gallery__zoom:hover { color: #0050a5; border-color: #0050a5; }

.tpe-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--tpe-thumbs) - 1) * var(--tpe-gap)) / var(--tpe-thumbs));
	gap: var(--tpe-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.tpe-gallery__thumbs::-webkit-scrollbar { display: none; }
.tpe-gallery__thumb {
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: transparent;
	opacity: var(--tpe-thumb-opacity);
	outline: 2px solid transparent;
	outline-offset: -2px;
	scroll-snap-align: start;
	cursor: pointer;
	transition: opacity .15s;
}
.tpe-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tpe-gallery__thumb:hover { opacity: 1; }
.tpe-gallery__thumb.is-active { opacity: 1; outline-color: var(--tpe-thumb-active); }
.tpe-gallery__thumb:focus-visible { outline: 2px solid #0050a5; }

/* Full-screen viewer */
.tpe-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 12, 20, .94);
	touch-action: pan-y;
}
.tpe-lightbox[hidden] { display: none; }
.tpe-lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.tpe-lightbox button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
}
.tpe-lightbox button:hover { background: rgba(255, 255, 255, .25); }
.tpe-lightbox button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tpe-lightbox__close { top: 16px; right: 16px; }
.tpe-lightbox__prev { left: 16px; top: 50%; margin-top: -24px; }
.tpe-lightbox__next { right: 16px; top: 50%; margin-top: -24px; }
.tpe-lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; color: rgba(255, 255, 255, .8); font-size: 14px; text-align: center; }
.tpe-lightbox.is-single .tpe-lightbox__prev, .tpe-lightbox.is-single .tpe-lightbox__next, .tpe-lightbox.is-single .tpe-lightbox__count { display: none; }
body.tpe-lightbox-open { overflow: hidden; }
body.tpe-lightbox-open #ht-ctc-chat { display: none !important; }

@media (max-width: 767px) {
	.tpe-gallery__arrow { display: none; } /* swipe instead */
	.tpe-lightbox__prev, .tpe-lightbox__next { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tpe-gallery__track, .tpe-gallery__thumbs { scroll-behavior: auto; }
}