/**
 * Mobile-only sticky 3D preview.
 * Height is forced in JS (Elementor flex ignores stylesheet height).
 * Sticky height = 80% of the desktop-like 1:1 square (0.8 × width).
 *
 * Normal (non-sticky) mobile viewer is forced to a 1:1 square so the
 * canvas matches desktop framing (configurator defaults use 65vh / 520px
 * min-height which makes the bed look off-centre on phones).
 *
 * Only the OUTER Elementor column is position:fixed when sticky. Nested
 * .configurator-viewer-fill nodes must stay in normal flow inside it —
 * if they are also fixed, height:100% resolves to the viewport and
 * paints a full-screen white overlay under the panel.
 */
@media (max-width: 768px) {
	/* ---- Normal mobile: 1:1 square (not sticky) ---- */
	body:not(.cfg-mobile-viewer-sticky) .configurator-viewer-fill.e-con.e-child {
		width: 100% !important;
		max-width: 100% !important;
		height: var(--cfg-mobile-square-h, 100vw) !important;
		min-height: var(--cfg-mobile-square-h, 100vw) !important;
		max-height: var(--cfg-mobile-square-h, 100vw) !important;
		aspect-ratio: 1 / 1 !important;
		flex: 0 0 auto !important;
		align-self: stretch !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	body:not(.cfg-mobile-viewer-sticky) .configurator-viewer-fill.e-con.e-child .configurator-viewer-fill,
	body:not(.cfg-mobile-viewer-sticky) .configurator-viewer-fill.e-con.e-child .elementor-widget,
	body:not(.cfg-mobile-viewer-sticky) .configurator-viewer-fill.e-con.e-child .elementor-widget-container,
	body:not(.cfg-mobile-viewer-sticky) .configurator-viewer-fill.e-con.e-child #configurator-viewer-root {
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 100% !important;
		aspect-ratio: auto !important;
		flex: 1 1 auto !important;
		overflow: hidden !important;
	}

	body:not(.cfg-mobile-viewer-sticky) .viewer-app,
	body:not(.cfg-mobile-viewer-sticky) .viewer-app.canvas-only {
		width: 100% !important;
		height: var(--cfg-mobile-square-h, 100vw) !important;
		min-height: 0 !important;
		max-height: var(--cfg-mobile-square-h, 100vw) !important;
		aspect-ratio: 1 / 1 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body:not(.cfg-mobile-viewer-sticky) .viewer-app.canvas-only .stage,
	body:not(.cfg-mobile-viewer-sticky) .viewer-canvas-wrap {
		position: relative !important;
		width: 100% !important;
		height: var(--cfg-mobile-square-h, 100vw) !important;
		min-height: 0 !important;
		max-height: var(--cfg-mobile-square-h, 100vw) !important;
		aspect-ratio: 1 / 1 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	body:not(.cfg-mobile-viewer-sticky) .viewer-canvas-wrap canvas {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		vertical-align: top !important;
	}

	body.cfg-mobile-viewer-sticky .tnf-announce {
		display: none !important;
	}

	/* Outer sticky panel only */
	body.cfg-mobile-viewer-sticky .configurator-viewer-fill.e-con.e-child {
		position: fixed !important;
		top: var(--cfg-sticky-top, 60px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: var(--cfg-sticky-panel-h, 80vw) !important;
		min-height: var(--cfg-sticky-panel-h, 80vw) !important;
		max-height: var(--cfg-sticky-panel-h, 80vw) !important;
		z-index: 45 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		background: #f5f5f5 !important;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
		display: flex !important;
		flex-direction: column !important;
		flex: 0 0 auto !important;
		align-self: stretch !important;
		overflow: hidden !important;
	}

	/* Nested fills / Elementor wrappers — fill the panel, do NOT float */
	body.cfg-mobile-viewer-sticky .configurator-viewer-fill.e-con.e-child .configurator-viewer-fill,
	body.cfg-mobile-viewer-sticky .configurator-viewer-fill.e-con.e-child .elementor-widget,
	body.cfg-mobile-viewer-sticky .configurator-viewer-fill.e-con.e-child .elementor-widget-container,
	body.cfg-mobile-viewer-sticky .configurator-viewer-fill.e-con.e-child #configurator-viewer-root {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 100% !important;
		flex: 1 1 auto !important;
		display: flex !important;
		flex-direction: column !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		overflow: hidden !important;
		z-index: auto !important;
	}

	body.cfg-mobile-viewer-sticky .viewer-app,
	body.cfg-mobile-viewer-sticky .viewer-app.canvas-only {
		width: 100% !important;
		height: var(--cfg-sticky-panel-h, 80vw) !important;
		min-height: 0 !important;
		max-height: var(--cfg-sticky-panel-h, 80vw) !important;
		aspect-ratio: auto !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.cfg-mobile-viewer-sticky .viewer-app.canvas-only .stage,
	body.cfg-mobile-viewer-sticky .viewer-canvas-wrap {
		position: relative !important;
		width: 100% !important;
		height: var(--cfg-sticky-panel-h, 80vw) !important;
		min-height: 0 !important;
		max-height: var(--cfg-sticky-panel-h, 80vw) !important;
		aspect-ratio: auto !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	body.cfg-mobile-viewer-sticky .viewer-canvas-wrap canvas {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		vertical-align: top !important;
	}

	body.cfg-mobile-viewer-sticky .cfg-mobile-viewer-spacer {
		display: block !important;
		width: 100% !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		pointer-events: none !important;
		visibility: hidden !important;
		overflow: hidden !important;
	}

	body.cfg-mobile-viewer-sticky .cfg-mobile-viewer-close {
		position: absolute !important;
		top: 8px !important;
		right: 8px !important;
		left: auto !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 1px solid #111 !important;
		border-radius: 50% !important;
		background: #fff !important;
		color: #111 !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
		box-sizing: border-box !important;
		cursor: pointer !important;
		z-index: 60 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 0 !important;
		line-height: 0 !important;
		-webkit-tap-highlight-color: transparent;
	}

	body.cfg-mobile-viewer-sticky .cfg-mobile-viewer-close::before {
		content: "" !important;
		display: block;
		width: 14px;
		height: 14px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	body.cfg-mobile-viewer-sticky .cfg-mobile-viewer-close:hover,
	body.cfg-mobile-viewer-sticky .cfg-mobile-viewer-close:focus-visible {
		background: #111 !important;
		color: #fff !important;
		outline: none !important;
	}
}