/* Keep the embedded React page inside the KShop page builder surface. */
body.kshop-about-page {
	background: #ffffff;
	overflow-x: clip;
}

body.kshop-about-page #page-container,
body.kshop-about-page #et-main-area,
body.kshop-about-page #main-content {
	background: #ffffff !important;
	overflow-x: clip;
}

body.kshop-about-page #main-content .container,
body.kshop-about-page #left-area,
body.kshop-about-page article.page,
body.kshop-about-page .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.kshop-about-page #sidebar,
body.kshop-about-page #main-content .container:before,
body.kshop-about-page .entry-title,
body.kshop-about-page .post-meta {
	display: none !important;
}

body.kshop-about-page .et_pb_post {
	margin-bottom: 0;
}

body.kshop-about-page .kshop-about-root {
	min-height: 100vh;
}

/* The About artwork is one fixed composition behind the post-hero content.
 * Keep this outside Divi's layout stack so theme CSS cannot turn it into a
 * repeated tile or hide it behind a white page wrapper. */
body.kshop-about-page .kshop-about-root .kshop-about {
	isolation: isolate;
	/* GSAP transitions this from white to a soft gray at the History section. */
	background-color: #ffffff;
}

body.kshop-about-page .kshop-about-root .bg-fixed-robot {
	position: fixed !important;
	inset: 0 !important;
	display: block !important;
	width: 100vw !important;
	height: 100dvh !important;
	min-height: 100vh !important;
	pointer-events: none !important;
	overflow: hidden !important;
}

body.kshop-about-page .kshop-about-root .bg-fixed-robot > img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
}

body.kshop-about-page .kshop-about-root .kshop-about > .relative.z-10 {
	position: relative;
	z-index: 1;
}

body.kshop-about-page .kshop-about-root a {
	color: inherit;
	text-decoration: none;
}

/* Divi's page typography can assign a dark colour directly to headings.
 * Keep the source landing hero readable without changing shared headings. */
body.kshop-about-page #main-content .kshop-about > .relative.z-10 > section:first-child,
body.kshop-about-page #main-content .kshop-about > .relative.z-10 > section:first-child h1,
body.kshop-about-page #main-content .kshop-about > .relative.z-10 > section:first-child h4,
body.kshop-about-page #main-content .kshop-about [class~='text-white'] {
	color: #ffffff !important;
}

body.kshop-about-page #main-content .kshop-about > .relative.z-10 > section:first-child h1,
body.kshop-about-page #main-content .kshop-about > .relative.z-10 > section:first-child h4 {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.36);
}

@media (max-width: 767px) {
	body.kshop-about-page .kshop-about-root .bg-fixed-robot > img {
		/* Preserve a visible part of the robot in the narrow crop. */
		object-position: 58% top !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.kshop-about-page .kshop-about-root *,
	body.kshop-about-page .kshop-about-root *::before,
	body.kshop-about-page .kshop-about-root *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}