html, body { touch-action: manipulation; }

		.gallery-grid {
			max-width: 2100px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
			gap: 30px;
			margin-bottom: 40px; /* added */
		}

		.gallery { width: 100%; display: flex; flex-direction: column; gap: 15px; position: relative; }

		.left-column { display: flex; flex-direction: column; align-items: center; gap: 10px; }

		.zoom-container {
			position: relative;
			width: 100%;
			aspect-ratio: 1 / 1;
			border: 1px solid #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			cursor: crosshair;
			touch-action: none;
		}

		.zoom-container img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			transition: transform 0.25s ease;
			transform-origin: center center;
			will-change: transform;
		}

		.zoom-container img.panning {
			transition: none !important;
		}

		.tooltip {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: rgba(0,0,0,0.55);
			color: white;
			padding: 8px 12px;
			border-radius: 6px;
			font-size: 13px;
			opacity: 0;
			pointer-events: none;
			white-space: nowrap;
			transition: opacity 0.2s ease;
		}

		.tooltip.show { opacity: 1; }

		.zoom-result {
			position: fixed; /* changed */
			top: 0;
			left: 100%;
			z-index: 999;
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background-color: #fff;
			border: 1px solid rgba(0,0,0,0.25);
			border-radius: 4px;
			box-shadow: 0 0 10px rgba(0,0,0,0.50);
			opacity: 0;
			transform: scale(0.95);
			transition: opacity 0.25s ease, transform 0.25s ease;
			pointer-events: none;
			display: none;
		}


		.zoom-result.show { opacity: 1; transform: scale(1); }

		.lens {
			position: absolute;
			width: 55px;
			height: 55px;
			border: 1px solid rgba(0,0,0,0.25);
			box-shadow:
					0 0 0 9999px rgba(150,150,150,0.35),
					0 0 6px rgba(0,0,0,0.3);
			display: none;
			pointer-events: none;
		}

		.thumbnails { display: flex; gap: 10px; }

		.thumb {
			width: 60px;
			height: 60px;
			border: 1px solid #ccc;
			opacity: 0.6;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.thumb img {
			width: 100%;
			height: auto;
			object-fit: cover;
		}

		.thumb.active {
			opacity: 1;
			border: 1px solid rgba(0,0,0,0.55);
			box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
		}