.mh-gallery-wrapper {
	display: flex;
	flex-direction: row; 
	gap: 5px;
	width: 100%;
	user-select: none;
	align-items: center;
}

.mh-main-viewport {
	flex: 1;
	border-radius: var(--border-radius-s);
	position: relative;
	overflow: hidden;
	touch-action: pan-y; /* Allows scrolling page up/down but takes over horizontal swipe */
}

.mh-main-image-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

.mh-main-img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0;
	transition: opacity 0.3s ease;
	-webkit-user-drag: none;
	cursor: grab;
	will-change: transform;
}

.mh-main-img:active { cursor: grabbing; }

.mh-main-img.is-loaded { opacity: 1; }
.mh-main-img.is-loaded + .mh-spinner { display: none !important; }

/* Spinner */
.mh-spinner {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 35px; height: 35px;
	border: 3px solid rgb(198 198 198);
	border-top: 3px solid #3f3f3f;
	border-radius: 50%;
	animation: mh-spin 0.8s linear infinite;
	z-index: 1;
}

@keyframes mh-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Thumbnails (Recorded Settings) */
.mh-thumb-container { display: flex; flex-direction: column; width: 45px; flex-shrink: 0; }
.mh-thumb-scroll {
	display: flex; flex-direction: column; gap: 5px; overflow-y: auto;
	max-height: 300px; scroll-behavior: smooth; scrollbar-width: none; cursor: grab;
}
.mh-thumb-scroll::-webkit-scrollbar { display: none; }

.mh-thumb-item {
	flex: 0 0 40px; height: 40px; border-radius: 4px; overflow: hidden;
	border: 1px solid var(--bricks-color-color2); transition: 0.2s; cursor: pointer;
}
.mh-thumb-item.active { border-color: var(--bricks-color-dark); }
.mh-thumb-item img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* Arrows (Recorded Settings) */
.mh-arrow {
	color: var(--bricks-color-dark);
	background: var(--bricks-color-white);
	border: 1px solid var(--bricks-color-color2);
	width: 30px; height: 30px; border-radius: 50%;
	cursor: pointer; margin: 2px auto; font-size: 1rem; z-index: 10;
	display: flex; justify-content: center; align-items: center; line-height: 1;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.mh-prev { transform: rotate(90deg); }
.mh-next { transform: rotate(90deg); }

@media (max-width: 768px) {
	.mh-gallery-wrapper { flex-direction: column; gap: 5px; }
	.mh-thumb-container { order: 2; width: 100%; flex-direction: row; padding: 0 30px; align-items: center; }
	.mh-thumb-scroll { flex-direction: row; overflow-x: auto; overflow-y: hidden; width: 100%; gap: 5px; }
	.mh-thumb-item { flex: 0 0 30px; height: 30px; }
	.mh-arrow { width: 25px; height: 25px; }
	.mh-prev { transform: rotate(0deg); position: absolute; left: 0; margin: 0; }
	.mh-next { transform: rotate(0deg); position: absolute; right: 0; margin: 0; }
}