/* Styles are deliberately scoped to the ECC app documents; WordPress pages remain untouched. */
html:has(body.ecc-app) {
	min-height: 100%;
}

body.ecc-app {
	--ecc-shell-viewport: 100vh;
	min-width: 320px !important;
	min-height: var(--ecc-shell-viewport) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--ecc-font-body, Arial, sans-serif) !important;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ecc-text, #181818);
	background: var(--ecc-surface-alt, #f7f5f0);
	-webkit-text-size-adjust: 100%;
}

body.ecc-app *,
body.ecc-app *::before,
body.ecc-app *::after {
	box-sizing: border-box;
}

body.ecc-app :where(button, input, select, textarea) {
	font: inherit;
}

body.ecc-app :where(img, svg, video, canvas) {
	max-width: 100%;
}

body.ecc-app > .ecc-editor,
body.ecc-app > .ecc-store,
body.ecc-app > .ecc-pos {
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
}

body.ecc-editor-app,
body.ecc-pos-app {
	--ecc-shell-viewport: 100vh;
}

body.ecc-app .ecc-editor,
body.ecc-app .ecc-store,
body.ecc-app .ecc-pos {
	font-family: var(--ecc-font-body, Arial, sans-serif);
	color: var(--ecc-text, #181818);
}

body.ecc-app .ecc-editor :where(h1, h2, h3, h4, p, figure),
body.ecc-app .ecc-store :where(h1, h2, h3, h4, p, figure),
body.ecc-app .ecc-pos :where(h1, h2, h3, h4, p, figure) {
	max-width: none;
}

@supports (height: 100dvh) {
	body.ecc-app {
		--ecc-shell-viewport: 100dvh;
	}
}