/**
 * benja/amulet-viewer — the object on its plinth.
 *
 * Default (no JavaScript): every photograph stacked, each on its own plinth with a caption.
 * Enhanced (`@media (scripting: enabled)` or `.is-enhanced`): one plinth stage with a slow
 * cross-fade, FRONT/BACK segmented tablist, thumbnails, loupe and a native <dialog> lightbox.
 * The enhanced rules are duplicated for both conditions so there is no layout shift on load.
 */

.benja-viewer,
.benja-lightbox {
	--bj-ink: var(--wp--preset--color--contrast, #1c1915);
	--bj-base: var(--wp--preset--color--base, #f4efe6);
	--bj-surface: var(--wp--preset--color--surface, #fbf9f4);
	--bj-subtle: var(--wp--preset--color--subtle, #eae2d3);
	--bj-muted: var(--wp--preset--color--muted, #6f665b);
	--bj-secondary: var(--wp--preset--color--secondary, #4b453d);
	--bj-gold: var(--wp--preset--color--accent, #b08d57);
	--bj-gold-strong: var(--wp--preset--color--accent-strong, #7a5f2e);
	--bj-hairline: var(--wp--custom--hairline, 1px solid rgb(28 25 21 / 0.14));
	--bj-hairline-gold: var(--wp--custom--hairline-gold, 1px solid rgb(176 141 87 / 0.55));
	--bj-ease: var(--wp--custom--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--bj-duration: var(--wp--custom--duration, 700ms);
	--bj-radius: var(--wp--custom--radius, 2px);
	--bj-tracking: var(--wp--custom--tracking, 0.18em);
	--bj-plinth: var(--wp--custom--plinth, radial-gradient(120% 90% at 50% 30%, #fffdf8 0%, #f6f0e4 55%, #ece3d2 100%));
	--bj-object-shadow: var(--wp--custom--object-shadow, drop-shadow(0 22px 28px rgb(46 34 18 / 0.18)) drop-shadow(0 3px 5px rgb(46 34 18 / 0.14)));
	--bj-sans: var(--wp--preset--font-family--sans, "Jost", "Noto Sans Thai", "Noto Sans SC", system-ui, sans-serif);
	--bj-display: var(--wp--preset--font-family--display, "Cormorant Garamond", "Noto Serif Thai", "Noto Serif SC", serif);
	--bj-xs: var(--wp--preset--font-size--xs, 0.75rem);
	--bj-sm: var(--wp--preset--font-size--sm, 0.875rem);
	--bj-md: var(--wp--preset--font-size--md, 1.25rem);
}

.benja-viewer {
	--benja-viewer-max-h: max(24rem, calc(100vh - var(--wp--custom--header-height, 5rem) - 11rem));
	position: relative;
	min-width: 0;
	color: var(--bj-ink);
}

/* Custom properties are not validated at parse time, so the small-viewport unit sits behind @supports. */
@supports (height: 100svh) {
	.benja-viewer {
		--benja-viewer-max-h: max(24rem, calc(100svh - var(--wp--custom--header-height, 5rem) - 11rem));
	}
}

.benja-viewer [hidden] {
	display: none !important;
}

.benja-viewer__frame {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 1rem);
	width: min(100%, calc(var(--benja-viewer-max-h) * 0.75));
	margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Stage + slides — default (no-JS) stacked presentation                 */
/* ------------------------------------------------------------------ */

.benja-viewer__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
	view-transition-name: benja-amulet;
}

.benja-viewer__stage--empty {
	aspect-ratio: 3 / 4;
	background: var(--bj-plinth);
}

.benja-viewer__stage--empty .benja-img-placeholder {
	position: absolute;
	inset: 12% 14% 16%;
	display: block;
}

.benja-viewer__slide {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	background: var(--bj-plinth);
	min-width: 0;
	overflow: hidden;
}

.benja-viewer__img {
	position: absolute;
	top: 7%;
	left: 9%;
	width: 82%;
	height: 78%;
	max-width: none;
	object-fit: contain;
	object-position: 50% 50%;
	filter: var(--bj-object-shadow);
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

.benja-viewer__caption {
	position: absolute;
	left: 9%;
	right: 9%;
	bottom: 4.5%;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.7rem;
	border-top: var(--bj-hairline-gold);
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-muted);
}

.benja-viewer__caption-ref {
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.08em;
	color: var(--bj-gold-strong);
}

.benja-viewer__caption:lang(th),
.benja-viewer__caption:lang(zh) {
	letter-spacing: 0.02em;
	text-transform: none;
}

.benja-viewer__empty-note {
	margin: 0;
	font-family: var(--bj-sans);
	font-size: var(--bj-sm);
	color: var(--bj-muted);
	text-align: center;
}

/* Controls & thumbnails are useless without JavaScript. */
.benja-viewer__controls,
.benja-viewer__thumbs {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Enhanced presentation (duplicated: scripting media query + class)     */
/* ------------------------------------------------------------------ */

@media (scripting: enabled) {
	.benja-viewer__stage {
		grid-template-rows: minmax(0, 1fr);
		gap: 0;
		aspect-ratio: 3 / 4;
		background: var(--bj-plinth);
	}

	.benja-viewer__slide {
		grid-area: 1 / 1;
		aspect-ratio: auto;
		background: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--bj-duration) var(--bj-ease), visibility 0s linear var(--bj-duration);
	}

	.benja-viewer__slide .benja-viewer__img {
		scale: 1.025;
		transition: scale calc(var(--bj-duration) * 1.6) var(--bj-ease);
	}

	.benja-viewer__slide.is-active {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--bj-duration) var(--bj-ease), visibility 0s linear 0s;
	}

	.benja-viewer__slide.is-active .benja-viewer__img {
		scale: 1;
	}

	.benja-viewer__controls {
		display: flex;
	}

	.benja-viewer__thumbs {
		display: flex;
	}

	.benja-viewer--no-caption .benja-viewer__caption {
		opacity: 0;
	}
}

.benja-viewer.is-enhanced .benja-viewer__stage {
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	aspect-ratio: 3 / 4;
	background: var(--bj-plinth);
}

.benja-viewer.is-enhanced .benja-viewer__slide {
	grid-area: 1 / 1;
	aspect-ratio: auto;
	background: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bj-duration) var(--bj-ease), visibility 0s linear var(--bj-duration);
}

.benja-viewer.is-enhanced .benja-viewer__slide .benja-viewer__img {
	scale: 1.025;
	transition: scale calc(var(--bj-duration) * 1.6) var(--bj-ease);
}

.benja-viewer.is-enhanced .benja-viewer__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--bj-duration) var(--bj-ease), visibility 0s linear 0s;
}

.benja-viewer.is-enhanced .benja-viewer__slide.is-active .benja-viewer__img {
	scale: 1;
}

.benja-viewer.is-enhanced .benja-viewer__controls {
	display: flex;
}

.benja-viewer.is-enhanced .benja-viewer__thumbs {
	display: flex;
}

.benja-viewer.is-enhanced.benja-viewer--no-caption .benja-viewer__caption {
	opacity: 0;
}

/* Horizontal swipes browse the photographs; vertical panning and pinch stay native. */
.benja-viewer.is-enhanced .benja-viewer__stage {
	touch-action: pan-y pinch-zoom;
}

.benja-viewer.has-lightbox .benja-viewer__stage {
	cursor: zoom-in;
}

.benja-viewer__stage.is-magnifying {
	cursor: none;
}

/* ------------------------------------------------------------------ */
/* Controls — segmented FRONT / BACK + full-screen link                  */
/* ------------------------------------------------------------------ */

.benja-viewer__controls {
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--50, 1.5rem);
}

.benja-viewer__controls:not(:has(.benja-viewer__sides)) {
	justify-content: center;
}

.benja-viewer__sides {
	position: relative;
	isolation: isolate;
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	padding: 3px;
	border: 1px solid color-mix(in srgb, var(--bj-ink) 24%, transparent);
	border-radius: var(--bj-radius);
}

.benja-viewer__sides::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc(50% - 3px);
	border-radius: 1px;
	background: var(--bj-ink);
	transform: translateX(calc(var(--benja-seg, 0) * 100%));
	transition: transform 650ms var(--bj-ease), opacity 400ms var(--bj-ease);
}

.benja-viewer.is-detail .benja-viewer__sides::before {
	opacity: 0;
}

.benja-viewer__tab {
	appearance: none;
	margin: 0;
	min-width: 6.5rem;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: 1px;
	background: none;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-secondary);
	cursor: pointer;
	transition: color 450ms var(--bj-ease);
}

.benja-viewer__tab:lang(th),
.benja-viewer__tab:lang(zh) {
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: var(--bj-sm);
}

.benja-viewer__tab:hover {
	color: var(--bj-ink);
}

.benja-viewer__tab[aria-selected="true"],
.benja-viewer__tab[aria-selected="true"]:hover {
	color: var(--bj-surface);
	cursor: default;
}

.benja-viewer__tab:focus-visible,
.benja-viewer__expand:focus-visible,
.benja-viewer__thumb:focus-visible {
	outline: 2px solid var(--bj-gold-strong);
	outline-offset: 3px;
}

.benja-viewer__expand {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	min-height: 2.75rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-ink);
	cursor: pointer;
}

.benja-viewer__expand:lang(th),
.benja-viewer__expand:lang(zh) {
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: var(--bj-sm);
}

.benja-viewer__expand svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	color: var(--bj-gold-strong);
}

.benja-viewer__expand-label {
	padding-bottom: 0.2rem;
	background: linear-gradient(var(--bj-gold), var(--bj-gold)) 0 100% / 100% 1px no-repeat;
	transition: background-size 500ms var(--bj-ease);
}

.benja-viewer__expand:hover .benja-viewer__expand-label {
	background-size: 35% 1px;
}

/* ------------------------------------------------------------------ */
/* Thumbnails                                                           */
/* ------------------------------------------------------------------ */

.benja-viewer__thumbs {
	list-style: none;
	margin: 0;
	padding: 4px 4px 6px;
	gap: 0.5rem;
	justify-content: center;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.benja-viewer__thumbs-item {
	flex: none;
	margin: 0;
	padding: 0;
	scroll-snap-align: center;
}

.benja-viewer__thumb {
	appearance: none;
	position: relative;
	display: block;
	width: 3.5rem;
	aspect-ratio: 3 / 4;
	margin: 0;
	padding: 0.3rem;
	border: 0;
	border-radius: var(--bj-radius);
	background: var(--bj-plinth);
	cursor: pointer;
	opacity: 0.62;
	transition: opacity 450ms var(--bj-ease);
}

.benja-viewer__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px transparent;
	transition: box-shadow 450ms var(--bj-ease);
}

.benja-viewer__thumb:hover {
	opacity: 1;
}

.benja-viewer__thumb[aria-pressed="true"] {
	opacity: 1;
}

.benja-viewer__thumb[aria-pressed="true"]::after {
	box-shadow: inset 0 0 0 1px var(--bj-gold), inset 0 -2px 0 0 var(--bj-gold);
}

.benja-viewer__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	filter: drop-shadow(0 3px 4px rgb(46 34 18 / 0.18));
}

.benja-viewer__thumb .benja-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------------ */
/* Loupe                                                                */
/* ------------------------------------------------------------------ */

.benja-viewer__loupe {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: clamp(8.5rem, 36%, 15rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--bj-surface);
	background-repeat: no-repeat;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--bj-gold) 70%, transparent),
		0 0 0 5px color-mix(in srgb, var(--bj-surface) 55%, transparent),
		0 0 0 6px color-mix(in srgb, var(--bj-gold) 35%, transparent),
		0 24px 48px -18px rgb(46 34 18 / 0.45);
	pointer-events: none;
	opacity: 0;
	scale: 0.86;
	transition: opacity 320ms var(--bj-ease), scale 420ms var(--bj-ease);
	will-change: translate;
}

.benja-viewer__loupe.is-visible {
	opacity: 1;
	scale: 1;
}

/* ------------------------------------------------------------------ */
/* Lightbox — native <dialog>, full bleed, plinth light                 */
/* ------------------------------------------------------------------ */

.benja-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	color: var(--bj-ink);
	background-color: var(--bj-base);
	background-image: var(--bj-plinth);
	opacity: 0;
	transition: opacity 500ms var(--bj-ease);
	transition: opacity 500ms var(--bj-ease), overlay 500ms allow-discrete, display 500ms allow-discrete;
}

.benja-lightbox[open] {
	display: grid;
	/* minmax(0, 1fr): without it the implicit column grows to the title's no-wrap width on phones and the whole
	   dialog overflows sideways. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	opacity: 1;
}

.benja-lightbox__bar,
.benja-lightbox__viewport {
	min-width: 0;
}

@starting-style {
	.benja-lightbox[open] {
		opacity: 0;
	}
}

.benja-lightbox::backdrop {
	background: var(--wp--preset--color--base, #f4efe6);
}

.benja-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem clamp(1rem, 4vw, 3rem);
	border-bottom: var(--bj-hairline);
}

.benja-lightbox__heading {
	display: flex;
	align-items: baseline;
	gap: 0.4rem 1.25rem;
	flex-wrap: wrap;
	min-width: 0;
	margin: 0;
}

.benja-lightbox__title {
	min-width: 0;
	overflow: hidden;
	font-family: var(--bj-display);
	font-size: var(--bj-md);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.benja-lightbox__label {
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	letter-spacing: var(--bj-tracking);
	text-transform: uppercase;
	color: var(--bj-muted);
	font-variant-numeric: tabular-nums lining-nums;
}

.benja-lightbox__label:lang(th),
.benja-lightbox__label:lang(zh) {
	letter-spacing: 0.02em;
	text-transform: none;
}

.benja-lightbox__tools {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: none;
}

.benja-lightbox__tool,
.benja-lightbox__nav {
	appearance: none;
	display: inline-grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bj-radius);
	background: transparent;
	color: var(--bj-ink);
	cursor: pointer;
	transition: background-color 350ms var(--bj-ease), color 350ms var(--bj-ease), opacity 350ms var(--bj-ease);
}

.benja-lightbox__tool {
	width: 2.75rem;
	height: 2.75rem;
}

.benja-lightbox__tool svg,
.benja-lightbox__nav svg {
	width: 1.15rem;
	height: 1.15rem;
}

.benja-lightbox__tool:hover {
	background-color: color-mix(in srgb, var(--bj-ink) 7%, transparent);
}

.benja-lightbox__tool[aria-disabled="true"] {
	opacity: 0.32;
	cursor: default;
}

.benja-lightbox__tool[aria-disabled="true"]:hover {
	background-color: transparent;
}

.benja-lightbox__tool:focus-visible,
.benja-lightbox__nav:focus-visible {
	outline: 2px solid var(--bj-gold-strong);
	outline-offset: 2px;
}

.benja-lightbox__level {
	min-width: 3.25rem;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.06em;
	color: var(--bj-muted);
	font-variant-numeric: tabular-nums lining-nums;
}

.benja-lightbox__sep {
	width: 1px;
	height: 1.5rem;
	margin-inline: 0.5rem;
	background: color-mix(in srgb, var(--bj-ink) 16%, transparent);
}

.benja-lightbox__viewport {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 7vw, 6.5rem);
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.benja-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	transform-origin: 0 0;
	filter: var(--bj-object-shadow);
	cursor: zoom-in;
	transition: transform 480ms var(--bj-ease), opacity 400ms var(--bj-ease);
	will-change: transform;
	-webkit-user-drag: none;
}

.benja-lightbox.is-zoomed .benja-lightbox__img {
	filter: none;
	cursor: grab;
}

.benja-lightbox.is-zoomed.is-gesturing .benja-lightbox__img {
	cursor: grabbing;
}

.benja-lightbox.is-loading .benja-lightbox__viewport::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	width: 4rem;
	height: 1px;
	margin-left: -2rem;
	background: linear-gradient(90deg, transparent, var(--bj-gold), transparent);
	animation: benja-lightbox-loading 1.4s var(--bj-ease) infinite;
}

@keyframes benja-lightbox-loading {
	0% {
		opacity: 0;
		transform: scaleX(0.2);
	}

	50% {
		opacity: 1;
		transform: scaleX(1);
	}

	100% {
		opacity: 0;
		transform: scaleX(0.2);
	}
}

.benja-lightbox__nav {
	position: absolute;
	top: 50%;
	width: 3rem;
	height: 3rem;
	translate: 0 -50%;
	border: 1px solid color-mix(in srgb, var(--bj-ink) 22%, transparent);
	background-color: color-mix(in srgb, var(--bj-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.benja-lightbox__nav:hover {
	background-color: var(--bj-ink);
	color: var(--bj-surface);
}

.benja-lightbox__nav--prev {
	left: clamp(0.5rem, 2vw, 1.75rem);
}

.benja-lightbox__nav--next {
	right: clamp(0.5rem, 2vw, 1.75rem);
}

.benja-lightbox.is-zoomed .benja-lightbox__nav {
	opacity: 0.35;
}

.benja-lightbox.is-zoomed .benja-lightbox__nav:hover,
.benja-lightbox.is-zoomed .benja-lightbox__nav:focus-visible {
	opacity: 1;
}

.benja-lightbox__hint {
	margin: 0;
	padding: 0.75rem clamp(1rem, 4vw, 3rem) 1rem;
	font-family: var(--bj-sans);
	font-size: var(--bj-xs);
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--bj-muted);
}

/* One hint for mice / pens / keyboards, one for touch screens (double-tap, swipe). */
.benja-lightbox__hint-touch {
	display: none;
}

@media (hover: none) and (pointer: coarse) {
	.benja-lightbox__hint-pointer {
		display: none;
	}

	.benja-lightbox__hint-touch {
		display: inline;
	}
}

/* ------------------------------------------------------------------ */
/* Scroll lock (shared class names with every BENJA dialog)             */
/* ------------------------------------------------------------------ */

html.benja-scroll-locked {
	overflow: hidden;
}

html.benja-scroll-locked.benja-scroll-gutter {
	scrollbar-gutter: stable;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 37.5em) {
	.benja-viewer__tab {
		min-width: 5.5rem;
		padding-inline: 0.9rem;
	}

	.benja-lightbox__hint {
		display: none;
	}

	.benja-lightbox__nav {
		top: auto;
		bottom: 1rem;
		translate: none;
	}

	.benja-lightbox__viewport {
		padding-bottom: 5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.benja-viewer__slide,
	.benja-viewer__img,
	.benja-viewer__sides::before,
	.benja-viewer__tab,
	.benja-viewer__thumb,
	.benja-viewer__thumb::after,
	.benja-viewer__loupe,
	.benja-viewer__expand-label,
	.benja-lightbox,
	.benja-lightbox__img,
	.benja-lightbox__tool,
	.benja-lightbox__nav {
		transition-duration: 0.01ms !important;
	}

	.benja-viewer.is-enhanced .benja-viewer__slide .benja-viewer__img {
		scale: 1;
	}

	.benja-lightbox.is-loading .benja-lightbox__viewport::after {
		animation: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) and (scripting: enabled) {
	.benja-viewer__slide .benja-viewer__img {
		scale: 1;
	}
}

@media (forced-colors: active) {
	.benja-viewer__sides::before {
		background: Highlight;
	}

	.benja-viewer__tab[aria-selected="true"] {
		color: HighlightText;
	}

	.benja-viewer__thumb[aria-pressed="true"]::after {
		box-shadow: inset 0 0 0 2px Highlight;
	}
}

/* ------------------------------------------------------------------ */
/* Safe areas (SPEC §12): the full-screen view clears notch and home bar */
/* ------------------------------------------------------------------ */

.benja-lightbox {
	box-sizing: border-box;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}