/* Product content uses layout zoom so text, controls and spacing reflow together. */
/* A phone held sideways can cross the tablet width while retaining a short touch viewport. */
@media screen and (min-width: 768px) and (min-height: 501px),
       screen and (min-width: 768px) and (pointer: fine) {
	body.single-product #site-content {
		--tss-product-scale: 0.9;
		zoom: var(--tss-product-scale);
	}

	/* The scene supplies viewport-pixel measurements. Resolve them on the
	   surface before its children consume them as local layout lengths. */
	#tss-open-air .np-connected-surface {
		--local-scene-top: calc(var(--oa-scene-top) / var(--tss-product-scale));
		--local-sign-top: calc(var(--oa-sign-top) / var(--tss-product-scale));
		--local-flight-top: calc(var(--oa-flight-top) / var(--tss-product-scale));
		--local-rail-height: calc(var(--oa-rail-height) / var(--tss-product-scale));
		--local-landscape-span: calc(var(--oa-landscape-span, 100vw) / var(--tss-product-scale));
		--local-clearing-tail: calc(var(--oa-clearing-tail, 216px) / var(--tss-product-scale));
	}

	#tss-open-air .oa-rail {
		--oa-scene-top: var(--local-scene-top);
		--oa-sign-top: var(--local-sign-top);
		--oa-flight-top: var(--local-flight-top);
		--oa-rail-height: var(--local-rail-height);
	}

	#tss-open-air .oa-landscape {
		--oa-landscape-span: var(--local-landscape-span);
		--oa-clearing-tail: var(--local-clearing-tail);
	}
}