/*
 * Rig photo gallery — Exterior / Interior switch, "Cinema" stage (desktop),
 * edge-to-edge swipe (phones), thumbnail strip + green scroll bar, the /build/
 * compact strip, and the shared full-screen viewer (<dialog class="liv-gv">).
 * Behaviour: assets/js/rig-gallery.js. Markup: blocks/rig-single/render.php,
 * blocks/rig-configurator/render.php. Design:
 * docs/superpowers/specs/2026-11-03-rig-gallery-redesign-design.md.
 *
 * Motion runs on --liv-transition / --liv-transition-slow, which tokens.css
 * zeroes under prefers-reduced-motion — the gallery still works, instantly.
 */

.liv-gallery {
	--g-glass: rgba(10, 10, 10, 0.45);
	--g-glass-line: rgba(255, 255, 255, 0.18);
	--g-blur: blur(14px) saturate(1.3);
	--g-fade: 36px;
	position: relative;
	max-width: 1120px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage" "strip" "bar";
}

/* Headline halves follow the switch (both white without JS). */
.liv-gallery__h-ext,
.liv-gallery__h-int { transition: color var(--liv-transition-slow); }
[data-tab="exterior"] .liv-gallery__h-int,
[data-tab="interior"] .liv-gallery__h-ext { color: var(--liv-ink-400); }

/* ─── Exterior / Interior switch ───────────────────────────────── */
.liv-gallery__tabs {
	position: relative;
	z-index: 3;
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 4px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--liv-border-faint);
	isolation: isolate;
}
.liv-gallery__tabs[hidden] { display: none; }
.liv-gallery > .liv-gallery__tabs,
.liv-gallery__tabs--glass {
	background: var(--g-glass, rgba(10, 10, 10, 0.45));
	border-color: var(--g-glass-line, rgba(255, 255, 255, 0.18));
	-webkit-backdrop-filter: var(--g-blur, blur(14px) saturate(1.3));
	backdrop-filter: var(--g-blur, blur(14px) saturate(1.3));
}
.liv-gallery > .liv-gallery__tabs {
	grid-area: stage;
	align-self: start;
	justify-self: start;
	margin: 18px;
}
.liv-gallery__tabs [role="tab"] {
	position: relative;
	z-index: 1;
	min-height: 40px;
	padding: 9px 20px;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--liv-ink-300);
	font: 600 0.875rem/1 var(--wp--preset--font-family--body);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--liv-transition);
}
.liv-gallery__tabs [role="tab"]:hover { color: var(--liv-ink-200); }
.liv-gallery__tabs [role="tab"][aria-selected="true"] { color: var(--liv-ink-900); }
.liv-gallery__tabs [role="tab"]:focus-visible { outline: 2px solid var(--liv-leaf-300); outline-offset: 2px; }
.liv-gallery__n { margin-left: 4px; font-weight: 500; font-size: 0.75rem; opacity: 0.6; }
.liv-gallery__pill {
	position: absolute;
	z-index: 0;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: var(--r-pill);
	background: var(--liv-paper-soft);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	transition: transform var(--liv-transition-slow);
}
.liv-gallery__tabs[data-tab="interior"] .liv-gallery__pill { transform: translateX(100%); }
/* Before JS marks a tab, the server render shows Exterior selected. */
.liv-gallery__tabs:not([data-tab]) [aria-selected="true"] { color: var(--liv-ink-900); }

/* "Step inside" hint over the switch, placed by makeTip() in rig-gallery.js.
   The extra top padding is room for it under the headline (padding, as a
   margin would just merge into the header's). It stays after the hint
   retires, so nothing shifts when it goes. */
.liv-gallery:not(.liv-gallery--compact):has(> .liv-gallery__tabs:not([hidden])) { padding-top: 0.75rem; }
.liv-gallery__tip {
	--tip-bg: #222a1a;
	--tip-line: rgba(151, 196, 89, 0.42);
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 11px;
	border: 1px solid var(--tip-line);
	border-radius: var(--r-pill);
	background: var(--tip-bg);
	background: color-mix(in srgb, var(--liv-leaf-300) 13%, #111);
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
	color: var(--liv-leaf-300);
	font: 600 0.78125rem/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.01em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(5px);
	transition: opacity var(--liv-transition-slow), transform var(--liv-transition-slow), visibility var(--liv-transition-slow);
}
.liv-gallery__tip.is-shown { opacity: 1; visibility: visible; transform: none; }
/* Caret: a rotated square showing only its two lower edges. */
.liv-gallery__tip::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: calc(var(--tip-caret, 50%) - 4.5px);
	width: 9px;
	height: 9px;
	border-right: 1px solid var(--tip-line);
	border-bottom: 1px solid var(--tip-line);
	background: inherit;
	transform: rotate(45deg);
}
/* In the viewer the hint hangs below the switch, caret pointing up. */
.liv-gallery__tip--below { transform: translateY(-5px); }
.liv-gallery__tip--below.is-shown { transform: none; }
.liv-gallery__tip--below::after {
	top: -5px;
	bottom: auto;
	border: 0;
	border-top: 1px solid var(--tip-line);
	border-left: 1px solid var(--tip-line);
}
.liv-gallery__tip-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--liv-leaf-300);
}
@media (prefers-reduced-motion: no-preference) {
	.liv-gallery__tip.is-shown .liv-gallery__tip-dot { animation: liv-tip-pulse 2.4s ease-out 0.4s infinite; }
}
@keyframes liv-tip-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(151, 196, 89, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(151, 196, 89, 0); }
	100% { box-shadow: 0 0 0 0 rgba(151, 196, 89, 0); }
}

/* ─── Stage ─────────────────────────────────────────────────────── */
.liv-gallery__stage {
	grid-area: stage;
	position: relative;
	aspect-ratio: 21 / 9;
	border-radius: 22px;
	overflow: hidden;
	background: var(--liv-ink-900);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.85);
	isolation: isolate;
}
.liv-gallery__stage::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	z-index: 1;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.66));
	pointer-events: none;
}
.liv-gallery__open {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.liv-gallery__open:focus-visible { outline: 2px solid var(--liv-leaf-300); outline-offset: -4px; border-radius: 22px; }
.liv-gallery__img,
.liv-gallery__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.liv-gallery__img {
	opacity: 0;
	transition: opacity var(--liv-transition-slow), filter var(--liv-transition-slow), transform var(--liv-transition-slow);
}
.liv-gallery__img.is-front { opacity: 1; }
.liv-gallery__img.is-fit { object-fit: contain; }
.liv-gallery__img.is-lqip { filter: blur(14px); transform: scale(1.03); }
.liv-gallery__bg {
	inset: -8%;
	width: 116%;
	height: 116%;
	filter: blur(28px) brightness(0.45) saturate(1.1);
	opacity: 0;
	transition: opacity var(--liv-transition-slow);
}
.liv-gallery__stage.has-fit .liv-gallery__bg { opacity: 1; }

.liv-gallery__chip {
	position: absolute;
	z-index: 2;
	top: 18px;
	right: 18px;
	padding: 8px 13px;
	border-radius: var(--r-pill);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.8);
	background: var(--g-glass);
	border: 1px solid var(--g-glass-line);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: none;
}
.liv-gallery__chip b { color: var(--liv-paper); font-weight: 700; }
.liv-gallery__expand {
	position: absolute;
	z-index: 2;
	right: 12px;
	bottom: 12px;
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--liv-paper);
	background: rgba(10, 10, 10, 0.5);
	border: 1px solid var(--g-glass-line);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: none;
}
.liv-gallery__expand svg { width: 15px; height: 15px; }

.liv-gallery__caption {
	grid-area: stage;
	align-self: end;
	justify-self: start;
	z-index: 2;
	max-width: min(70%, 720px);
	margin: 0 0 24px 24px;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}
.liv-gallery__arrows {
	grid-area: stage;
	align-self: end;
	justify-self: end;
	z-index: 2;
	display: flex;
	gap: 10px;
	margin: 0 22px 20px 0;
}
.liv-gallery:not(.is-ready) .liv-gallery__arrows { display: none; }

.liv-gallery__navbtn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(10, 10, 10, 0.42);
	color: var(--liv-paper);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: pointer;
	transition: background var(--liv-transition), transform var(--liv-transition);
}
.liv-gallery__navbtn:hover { background: rgba(10, 10, 10, 0.72); transform: scale(1.05); }
.liv-gallery__navbtn:focus-visible { outline: 2px solid var(--liv-leaf-300); outline-offset: 2px; }
.liv-gallery__navbtn[hidden] { display: none; }
.liv-gallery__navbtn svg { width: 18px; height: 18px; }

/* Swipe track (phones; filled by JS). */
.liv-gallery__track,
.liv-gv__track { display: none; }
.liv-gallery[data-mode="track"] .liv-gallery__track,
.liv-gv[data-mode="track"] .liv-gv__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.liv-gallery__track::-webkit-scrollbar,
.liv-gv__track::-webkit-scrollbar { display: none; }
.liv-gallery[data-mode="track"] .liv-gallery__open { display: none; }
.liv-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	overflow: hidden;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	cursor: zoom-in;
}
.liv-gallery__slide-img,
.liv-gallery__slide-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}
.liv-gallery__slide.is-fit .liv-gallery__slide-img { object-fit: contain; }
.liv-gallery__slide-bg {
	inset: -8%;
	width: 116%;
	height: 116%;
	filter: blur(24px) brightness(0.45);
}

/* ─── Thumbnail strip + green scroll bar ───────────────────────── */
.liv-gallery__strip {
	grid-area: strip;
	position: relative;
	display: flex;
	gap: 10px;
	margin-top: 16px;
	padding: 3px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--g-fade, 36px), #000 calc(100% - var(--g-fade, 36px)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--g-fade, 36px), #000 calc(100% - var(--g-fade, 36px)), transparent 100%);
}
.liv-gallery__strip::-webkit-scrollbar { display: none; }
.liv-gallery__strip.is-at-start {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--g-fade, 36px)), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--g-fade, 36px)), transparent 100%);
}
.liv-gallery__strip.is-at-end {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--g-fade, 36px), #000 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--g-fade, 36px), #000 100%);
}
.liv-gallery__strip.is-static { -webkit-mask-image: none; mask-image: none; }
.liv-gallery__strip.is-dragging { cursor: grabbing; }
.liv-gallery__strip.is-dragging .liv-gallery__thumb { pointer-events: none; }
.liv-gallery__thumb {
	flex: 0 0 auto;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--liv-ink-900);
	opacity: 0.48;
	cursor: pointer;
	transition: opacity var(--liv-transition), box-shadow var(--liv-transition);
}
.liv-gallery__thumb:hover { opacity: 0.85; }
.liv-gallery__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--liv-leaf-300); }
.liv-gallery__thumb:focus-visible { outline: 2px solid var(--liv-leaf-300); outline-offset: 2px; opacity: 1; }
.liv-gallery__thumb img {
	display: block;
	width: 136px;
	height: 86px;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.liv-gallery__bar {
	grid-area: bar;
	position: relative;
	height: 18px;
	margin-top: 8px;
	cursor: pointer;
	touch-action: none;
}
.liv-gallery__bar[hidden],
.liv-gallery:not(.is-ready) .liv-gallery__bar { display: none; }
.liv-gallery__bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 8px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
}
.liv-gallery__handle {
	position: absolute;
	top: 6px;
	left: 0;
	height: 6px;
	border-radius: 6px;
	background: var(--liv-leaf-300);
	cursor: grab;
	transition: top var(--liv-transition), height var(--liv-transition), background var(--liv-transition);
}
.liv-gallery__bar:hover .liv-gallery__handle,
.liv-gallery__bar.is-active .liv-gallery__handle { top: 5px; height: 8px; background: #b2db78; }
.liv-gallery__bar.is-active .liv-gallery__handle { cursor: grabbing; }
.liv-gallery__bar:focus-visible { outline: 2px solid var(--liv-leaf-300); outline-offset: 2px; border-radius: 6px; }

/* ─── Tablet: a taller frame so the stage never gets too short ─── */
@media (min-width: 768px) and (max-width: 1024px) {
	.liv-gallery__stage { aspect-ratio: 16 / 9; }
}

/* ─── Phone: Edge to edge ───────────────────────────────────────── */
@media (max-width: 767px) {
	.liv-gallery { grid-template-areas: "tabs" "stage" "cap" "strip" "bar"; }
	.liv-gallery > .liv-gallery__tabs {
		grid-area: tabs;
		justify-self: stretch;
		display: grid;
		margin: 0 0 14px;
		background: rgba(255, 255, 255, 0.06);
		border-color: var(--liv-border-faint);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.liv-gallery > .liv-gallery__tabs[hidden] { display: none; }
	.liv-gallery__tabs [role="tab"] { min-height: 44px; font-size: 0.90625rem; }
	.liv-gallery__stage {
		aspect-ratio: 4 / 3;
		margin-inline: calc(-1 * var(--liv-gutter));
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.liv-gallery__stage::after { display: none; }
	.liv-gallery__open:focus-visible { border-radius: 0; }
	.liv-gallery__chip { top: 12px; right: 12px; padding: 6px 11px; font-size: 0.78125rem; }
	.liv-gallery.is-ready .liv-gallery__expand { display: grid; }
	.liv-gallery__caption {
		grid-area: cap;
		max-width: none;
		min-height: 1.4em;
		margin: 12px 0 0;
		font-size: 0.875rem;
		color: rgba(255, 255, 255, 0.86);
		text-shadow: none;
	}
	.liv-gallery__arrows { display: none; }
	.liv-gallery__strip { gap: 8px; margin-top: 12px; --g-fade: 24px; }
	.liv-gallery__thumb img { width: 76px; height: 52px; }
	.liv-gallery__bar { height: 22px; margin-top: 6px; }
	.liv-gallery__bar::before { top: 10px; }
	.liv-gallery__handle { top: 8px; }
	.liv-gallery__bar:hover .liv-gallery__handle,
	.liv-gallery__bar.is-active .liv-gallery__handle { top: 7px; }
}

/* ─── /build/ compact strip ─────────────────────────────────────── */
.liv-gallery--compact {
	max-width: none;
	margin-inline: 0;
	grid-template-areas: "tabs" "strip" "bar";
}
.liv-gallery--compact > .liv-gallery__tabs {
	grid-area: tabs;
	justify-self: start;
	margin: 0 0 10px;
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--liv-border-faint);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.liv-gallery--compact > .liv-gallery__tabs[hidden] { display: none; }
.liv-gallery--compact .liv-gallery__tabs [role="tab"] { min-height: 36px; padding: 7px 16px; font-size: 0.8125rem; }
.liv-gallery--compact .liv-gallery__strip { margin-top: 0; gap: 8px; }
.liv-gallery--compact .liv-gallery__thumb { opacity: 0.8; }
.liv-gallery--compact .liv-gallery__thumb:hover,
.liv-gallery--compact .liv-gallery__thumb:focus-visible { opacity: 1; }
.liv-gallery--compact .liv-gallery__thumb img { width: 112px; height: 70px; }
@media (max-width: 767px) {
	.liv-gallery--compact .liv-gallery__tabs [role="tab"] { min-height: 44px; }
	.liv-gallery--compact .liv-gallery__thumb img { width: 76px; height: 52px; }
}

/* ─── Full-screen viewer ────────────────────────────────────────── */
html.liv-gv-open { overflow: hidden; }

.liv-gv {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: #050505;
	color: var(--liv-paper);
	font-family: var(--wp--preset--font-family--body);
}
.liv-gv:not([open]) { display: none; }
.liv-gv::backdrop { background: rgba(0, 0, 0, 0.6); }
.liv-gv__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 18px max(22px, env(safe-area-inset-left));
}
.liv-gv__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.liv-gv__count {
	padding: 8px 13px;
	border-radius: var(--r-pill);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(10, 10, 10, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.liv-gv__count b { color: var(--liv-paper); }
.liv-gv__close { width: 44px; height: 44px; }
.liv-gv__stage { position: absolute; inset: 82px 96px 172px; }
.liv-gv__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--liv-transition-slow), filter var(--liv-transition-slow), transform var(--liv-transition-slow);
}
.liv-gv__img.is-front { opacity: 1; }
.liv-gv__img.is-lqip { filter: blur(14px); transform: scale(1.03); }
.liv-gv[data-mode="track"] .liv-gv__img { display: none; }
.liv-gv__nav { position: absolute; z-index: 2; top: calc(50% - 45px); }
.liv-gv__nav--prev { left: max(24px, env(safe-area-inset-left)); }
.liv-gv__nav--next { right: max(24px, env(safe-area-inset-right)); }
.liv-gv__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 140px;
	margin: 0;
	padding: 0 24px;
	text-align: center;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}
.liv-gv__rail {
	position: absolute;
	left: 50%;
	bottom: max(18px, env(safe-area-inset-bottom));
	width: min(980px, 92vw);
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "strip" "bar";
}
.liv-gv .liv-gallery__strip { margin-top: 0; }
.liv-gv .liv-gallery__thumb img { width: 104px; height: 66px; }

/* Viewer slides: whole photo, pinch/double-tap zoom (JS), swipe down to close. */
.liv-gv__track { touch-action: pan-x; }
.liv-gv__track.is-zoomed { overflow: hidden; touch-action: none; }
.liv-gv .liv-gallery__slide { cursor: default; }
.liv-gv .liv-gallery__slide-img { object-fit: contain; transform-origin: center center; will-change: transform; }

/* Swipe viewer: phones, and phones held sideways (wide but short). Keep the
 * query in step with touchViewer in assets/js/rig-gallery.js. */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
	.liv-gv[open] { display: flex; flex-direction: column; }
	.liv-gv__top {
		position: static;
		flex-wrap: wrap;
		padding: max(10px, env(safe-area-inset-top)) 14px 10px;
	}
	.liv-gv__top .liv-gallery__tabs { order: 2; flex: 1 0 100%; display: grid; }
	.liv-gv__top .liv-gallery__tabs[hidden] { display: none; }
	.liv-gv__top .liv-gallery__tabs [role="tab"] { min-height: 44px; }
	.liv-gv__right { width: 100%; justify-content: space-between; margin-left: 0; }
	.liv-gv__stage { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
	.liv-gv__nav { display: none; }
	.liv-gv__cap { position: static; min-height: 2.6em; padding: 10px 18px 4px; font-size: 0.84375rem; }
	.liv-gv__rail {
		position: static;
		width: auto;
		transform: none;
		padding: 0 14px max(14px, env(safe-area-inset-bottom));
	}
	.liv-gv .liv-gallery__strip { --g-fade: 24px; gap: 8px; }
	.liv-gv .liv-gallery__thumb img { width: 76px; height: 52px; }
}

/* Sideways phone: one slim top row (switch inline), smaller rail, so the
 * photo gets most of the ~390px height. */
@media (max-height: 500px) and (pointer: coarse) {
	.liv-gv__top { flex-wrap: nowrap; padding-block: max(6px, env(safe-area-inset-top)) 6px; }
	.liv-gv__top .liv-gallery__tabs { order: 0; flex: 0 0 auto; display: inline-grid; }
	.liv-gv__right { width: auto; margin-left: auto; justify-content: flex-end; }
	.liv-gv__cap { min-height: 0; padding: 4px 18px 0; }
	.liv-gv__rail { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
	.liv-gv .liv-gallery__thumb img { width: 60px; height: 40px; }
}