/**
 * Cross-section responsive integration.
 */

/* Tablet: preserve Lumise's native rail + panel layout. ---------------- */
@media only screen and ( max-width: 1170px ) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-workspace {
		height: calc( 100vh - var( --lmono-header-height ) );
		height: calc( 100dvh - var( --lmono-header-height ) );
		min-height: 0;
		overflow: hidden;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-top-tools {
		background: #ffffff;
		border-bottom: 1px solid #dedede;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-notices {
		box-sizing: border-box;
		left: 50%;
		max-width: calc( 100vw - 20px );
		transform: translateX( -50% );
	}

}

@media only screen and ( min-width: 737px ) and ( max-width: 1170px ) {
	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-left .lumise-tab-body-wrp {
		height: calc( 100vh - var( --lmono-header-height ) ) !important;
		height: calc( 100dvh - var( --lmono-header-height ) ) !important;
		min-height: 0 !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos="right"] {
		bottom: auto !important;
		left: auto !important;
		right: 12px !important;
		top: calc( 50% + ( var( --lmono-header-height ) / 2 ) ) !important;
		transform: translateY( -50% ) !important;
		z-index: 35;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos="right"] > ul {
		background: #ffffff;
		border: 1px solid #dedede;
		border-radius: 10px;
		box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
		padding: 6px;
	}
}

/* Phone: keep the original Lumise mobile composition, then reskin it. --- */
@media only screen and ( max-width: 736px ) {
	body.lumise-theme-mono-editor #LumiseDesign {
		--lmono-mobile-nav-height: 64px;
		--lmono-mobile-stage-height: 78px;
		--lmono-mobile-stage-gap: 8px;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations {
		height: var( --lmono-header-height );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-workspace {
		height: calc( 100vh - var( --lmono-header-height ) );
		height: calc( 100dvh - var( --lmono-header-height ) );
		margin-top: var( --lmono-header-height );
		min-height: 0;
	}

	/* Compact native mobile topbar. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] {
		gap: 10px;
		margin-right: 8px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li[data-tool] {
		align-items: center;
		display: flex !important;
		height: var( --lmono-header-height );
		margin: 0 !important;
		padding: 0 !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li#lumise-proceed,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li#lumise-proceed > i {
		float: none;
		margin: 0 !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li#lumise-proceed {
		align-items: center;
		display: flex !important;
		height: var( --lmono-header-height );
		width: auto;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-addToCart,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-proceed > button#lumise-cart-action,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-continue-btn {
		align-items: center;
		display: inline-flex;
		height: 36px;
		justify-content: center;
		margin: 0 !important;
		min-width: 42px;
		padding: 0 10px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-proceed > button#lumise-cart-action {
		font-size: 12px;
		font-weight: 700;
		max-width: 108px;
		min-width: 88px;
		padding: 0 12px !important;
		white-space: nowrap;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-proceed > button#lumise-cart-action > span {
		display: block !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-proceed > button#lumise-cart-action > i {
		display: none !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-nav-file {
		border-radius: 6px;
		margin-left: 10px;
		margin-right: 10px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active {
		align-items: center;
		display: flex !important;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 4px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active > li {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		height: var( --lmono-header-height );
		padding: 0 8px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active > li[data-tool="print"] {
		display: none !important;
	}

	/* Native topbar panels remain modal-like on phones. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li.active > ul[data-view="sub"],
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li[data-tool] > ul.lumise-tabs-nav {
		border-radius: 10px;
		left: 10px !important;
		max-height: calc( 100vh - var( --lmono-header-height ) - 84px );
		max-height: calc( 100dvh - var( --lmono-header-height ) - 84px );
		max-width: none;
		overflow-x: hidden;
		overflow-y: auto;
		right: 10px !important;
		top: calc( var( --lmono-header-height ) + 8px ) !important;
		transform: none !important;
		width: auto !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul#lumise-saved-designs {
		gap: 12px;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		max-height: calc( 100vh - 184px );
		max-height: calc( 100dvh - 184px );
		padding: 14px;
	}

	/* Full-width tool panel, exactly as Lumise mobile originally behaves. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-left {
		height: calc( 100vh - var( --lmono-header-height ) );
		height: calc( 100dvh - var( --lmono-header-height ) );
		top: var( --lmono-header-height );
		width: 0;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-left .lumise-tab-body-wrp {
		background: #ffffff !important;
		border-radius: 0;
		box-shadow: none;
		height: calc(
			100vh - var( --lmono-header-height ) -
			var( --lmono-mobile-nav-height )
		) !important;
		height: calc(
			100dvh - var( --lmono-header-height ) -
			var( --lmono-mobile-nav-height )
		) !important;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 18px;
		top: 0;
		width: 100vw;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-left .lumise-tab-body-wrp > header {
		background: #ffffff;
		padding: 18px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-left #lumise-side-close.active {
		align-items: center;
		background: #f4f4f4;
		border-radius: 50%;
		bottom: auto;
		color: #555555;
		display: flex;
		height: 34px;
		justify-content: center;
		left: auto !important;
		position: fixed;
		right: 12px !important;
		top: calc( var( --lmono-header-height ) + 12px ) !important;
		width: 34px;
		z-index: 1000002;
	}

	body.lumise-theme-mono-editor.lmono-design-mode #LumiseDesign #lumise-left #lumise-side-close {
		display: none !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-left #lumise-x-thumbn-preview {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		height: calc(
			100vh - var( --lmono-header-height ) -
			var( --lmono-mobile-nav-height )
		);
		height: calc(
			100dvh - var( --lmono-header-height ) -
			var( --lmono-mobile-nav-height )
		);
		left: 0;
		max-width: 100vw;
		top: 0;
		width: 100vw;
	}

	/* Bottom tool navigation: horizontal and swipeable. */
	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp {
		background: #222020;
		border-radius: 0;
		border-top: 1px solid rgba( 255, 255, 255, 0.12 );
		bottom: 0 !important;
		box-shadow: 0 -4px 16px rgba( 0, 0, 0, 0.16 );
		height: var( --lmono-mobile-nav-height );
		left: 0;
		min-height: var( --lmono-mobile-nav-height );
		position: fixed;
		top: auto !important;
		transform: none;
		overflow: hidden;
		width: 100vw;
		z-index: 1000000;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp::before,
	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp::after {
		bottom: 0;
		content: "";
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		transition: opacity 160ms ease;
		z-index: 5;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp::after {
		background: linear-gradient( 90deg, rgba( 34, 32, 32, 0 ), #222020 78% );
		right: 0;
		width: 58px;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp::before {
		align-items: center;
		color: #ffffff;
		content: "›";
		display: flex;
		font-size: 25px;
		font-weight: 400;
		justify-content: center;
		line-height: 1;
		right: 4px;
		width: 24px;
		z-index: 6;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp.lmono-mobile-nav-can-scroll-right::before,
	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp.lmono-mobile-nav-can-scroll-right::after {
		opacity: 1;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav {
		align-items: stretch;
		background: #222020 !important;
		display: flex !important;
		flex-flow: row nowrap;
		height: var( --lmono-mobile-nav-height ) !important;
		margin: 0;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		overscroll-behavior-x: contain;
		padding: 0 8px 0 4px;
		position: static;
		scroll-behavior: smooth;
		scrollbar-width: none;
		gap: 4px;
		width: 100%;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav::-webkit-scrollbar {
		display: none;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li {
		box-shadow: none !important;
		box-sizing: border-box;
		display: flex !important;
		float: none;
		flex: 0 0 72px;
		flex-direction: column;
		font-size: 10px !important;
		height: var( --lmono-mobile-nav-height ) !important;
		line-height: 11px;
		margin: 0;
		min-height: var( --lmono-mobile-nav-height ) !important;
		overflow: hidden;
		padding: 3px !important;
		text-overflow: ellipsis;
		width: 72px !important;
		white-space: nowrap;
		word-break: normal;
		overflow-wrap: normal;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li[data-tab="bug"] {
		display: none !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li > i {
		font-size: 22px;
		height: 28px;
		line-height: 28px;
		margin: 0 0 2px;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li.active,
	body.lumise-theme-mono-editor.lmono-design-mode #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li[data-tab="design"] {
		background: rgba( 255, 255, 255, 0.10 ) !important;
		box-shadow: inset 0 -3px 0 var( --lmono-color-accent ) !important;
		color: #ffffff !important;
	}

	/* Canvas and stage switcher occupy the space above the bottom nav. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-main {
		height: calc( 100vh - var( --lmono-header-height ) );
		height: calc( 100dvh - var( --lmono-header-height ) );
		padding: 50px 0 calc(
			var( --lmono-mobile-nav-height ) +
			var( --lmono-mobile-stage-height ) +
			var( --lmono-mobile-stage-gap ) + 18px
		);
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos] {
		bottom: calc(
			var( --lmono-mobile-nav-height ) +
			var( --lmono-mobile-stage-gap )
		) !important;
		height: var( --lmono-mobile-stage-height );
		left: 0 !important;
		margin: 0;
		position: fixed;
		text-align: center;
		top: auto !important;
		transform: none !important;
		width: 100vw;
		pointer-events: none;
		z-index: 90000;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul {
		align-items: center;
		background: #ffffff;
		border: 1px solid #dedede;
		border-radius: 10px;
		box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );
		box-sizing: border-box;
		display: inline-flex !important;
		gap: 4px;
		height: 72px;
		justify-content: center;
		margin: 3px auto;
		max-width: calc( 100vw - 20px );
		padding: 4px 8px;
		pointer-events: auto;
		width: auto;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-nav] {
		display: none !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage] {
		align-items: center;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		box-sizing: border-box;
		display: inline-flex !important;
		float: none;
		flex-direction: column;
		height: 64px !important;
		justify-content: center;
		margin: 0 3px;
		opacity: 1 !important;
		padding: 0 !important;
		transform: none !important;
		width: 64px !important;
	}

	/* Override the compact desktop switcher above: long stage lists must remain
	 * horizontally scrollable instead of being clipped on mobile. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos] > ul {
		-webkit-overflow-scrolling: touch;
		display: flex !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x proximity;
		width: max-content;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos] > ul::-webkit-scrollbar {
		display: none;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos].lmono-stage-nav--scrollable > ul {
		justify-content: flex-start;
		width: calc( 100vw - 20px );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage] {
		flex: 0 0 58px;
		margin: 0;
		scroll-snap-align: center;
		width: 58px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage] > img,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav[data-pos="right"]:not(.stages-expand) ul li img {
		border-radius: 5px;
		float: none;
		height: 44px !important;
		max-height: 44px;
		object-fit: contain;
		width: 44px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage].active > img {
		box-shadow: 0 0 0 2px var( --lmono-color-accent );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage] > span {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage] > span::after {
		display: none !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-stage-nav > ul > li[data-stage]::after {
		color: #222020;
		content: attr( data-lmono-label );
		display: block;
		font-size: 11px;
		font-weight: 500;
		height: 16px;
		line-height: 16px;
		margin-top: 3px;
		max-width: 58px;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		text-transform: none;
		white-space: nowrap;
	}

	/* Shapes are lazy-rendered after the first tab click. Remove the desktop
	 * inset before the sheet handle is laid out, otherwise the handle starts
	 * below the rounded sheet and the first row is clipped while scrolling. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-left #lumise-shapes:not( .lmono-shape-editing ) {
		padding: 0 24px 24px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-left #lumise-shapes > .lmono-panel-sheet-handle + p {
		margin-top: 8px;
	}

	/* Keep the horizontal native tool strip usable below the header. */
	body.lumise-theme-mono-editor #LumiseDesign #lumise-top-tools {
		border-radius: 0;
		left: 0;
		overflow-x: auto;
		overflow-y: hidden;
		top: var( --lmono-header-height ) !important;
		width: 100vw;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-notices {
		left: 10px;
		max-width: none;
		position: fixed;
		top: calc( var( --lmono-header-height ) + 8px );
		transform: none;
		width: calc( 100vw - 20px );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-notices > * {
		border-radius: 8px;
	}

	/* Lightboxes remain inset from all four edges. */
	body.lumise-theme-mono-editor #lumise-lightbox #lumise-lightbox-body {
		max-height: calc( 100vh - 20px );
		max-height: calc( 100dvh - 20px );
		max-width: calc( 100vw - 20px );
	}
}

@media only screen and ( max-width: 420px ) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="undo-redo"] {
		width: 84px;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li {
		font-size: 9px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign div#lumise-left > div.lumise-left-nav-wrp > ul.lumise-left-nav > li > i {
		font-size: 20px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #my-designs-login {
		padding: 18px;
	}
}

@media only screen and ( max-width: 360px ) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul#lumise-saved-designs {
		grid-template-columns: minmax( 0, 1fr );
	}
}