/**
 * Header section.
 * Target: #lumise-navigations
 */

/* Header shell ----------------------------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations {
	/* Keep the addon header neutral even when Lumise's primary theme color changes. */
	background: var(--lmono-color-white) !important;
	background-color: var(--lmono-color-white) !important;
	border-bottom: 1px solid var(--lmono-color-border);
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.06 );
	color: var(--lmono-color-black);
	height: var(--lmono-header-height);
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations a[data-view="logo"] {
	align-items: center;
	border-right: 1px solid var(--lmono-color-border);
	display: flex;
	height: var(--lmono-header-height);
	justify-content: center;
	min-width: 78px;
	padding: 7px 16px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations a[data-view="logo"] img {
	display: block;
	height: auto;
	margin: 0;
	max-height: 42px;
	max-width: 58px;
	object-fit: contain;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] {
	align-items: center;
	color: var(--lmono-color-black);
	display: flex;
	height: var(--lmono-header-height);
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] {
	margin-right: 18px;
}

/* Native Lumise menu items ---------------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li {
	border-radius: 8px;
	color: #343434;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	margin: 0 2px;
	padding: 9px 12px;
	transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li:not(.disabled):hover {
	background: #f2f2f2;
	color: #111111;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li[data-tool].active > span {
	color: #111111;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li.disabled {
	color: #9a9a9a;
	opacity: 0.58;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li[data-view="sp"] {
	background: var(--lmono-color-border);
	border-radius: 999px;
	height: 24px;
	margin: 0 8px;
	padding: 0 0 0 1px;
	top: auto;
	width: 1px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li#lumise-status,
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li#lumise-status a {
	color: #777777;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li#lumise-status a:hover {
	color: #111111;
}

/* Price, cart and primary actions --------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li {
	background: transparent;
	border-radius: 0;
	height: var(--lmono-header-height);
	margin: 0;
	padding: 0;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li:not(.disabled):hover,
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li.active {
	background: transparent;
	color: inherit;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] .lumise-price {
	color: #242424;
	font-size: 17px;
	font-weight: 600;
	line-height: var(--lmono-header-height);
	padding: 0 8px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-addToCart {
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	border-radius: 8px;
	height: 38px;
	margin: 11px 8px 0 6px;
	padding: 0 11px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-addToCart:hover {
	background: #ebebeb;
	border-color: #d4d4d4;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-addToCart img {
	filter: brightness( 0 ) saturate( 100% );
	height: 21px;
	top: 2px;
	width: 21px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-addToCart small {
	background: #ef3d4d;
	box-shadow: 0 0 0 2px #ffffff;
	color: #ffffff;
}

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 {
	background: #202020 !important;
	border: 1px solid #202020;
	border-radius: 8px;
	box-shadow: none;
	color: #ffffff;
	height: 38px;
	line-height: 24px;
	margin-top: 11px;
	padding: 6px 15px;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-proceed > button#lumise-cart-action:hover,
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-continue-btn:hover {
	background: #000000 !important;
	border-color: #000000;
	transform: translateY( -1px );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations .back_shop {
	background: #ffffff;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	color: #252525 !important;
	font-weight: 600;
	height: 38px;
	line-height: 36px;
	margin-top: 11px;
	transition: background-color 160ms ease, border-color 160ms ease;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations .back_shop:hover {
	background: #f5f5f5;
	border-color: #c8c8c8;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] #lumise-exit-editor {
	color: #252525;
}

/* Header dropdown surfaces ---------------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li [data-view="sub"] {
	background: #ffffff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba( 0, 0, 0, 0.14 );
	color: #343434;
	overflow: visible;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li [data-view="sub"]::after {
	border-bottom-color: #ffffff;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li.active [data-view="sub"] header {
	background: #fafafa;
	border-bottom: 1px solid #e8e8e8;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li.active [data-view="sub"] header > h3 {
	color: #202020;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li[data-view="list"] [data-view="sub"] li:not([data-view="sp"]):hover {
	background: #f1f1f1;
	color: #111111;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li[data-view="list"] [data-view="sub"] li[data-view="sp"] {
	background: #e8e8e8;
}

/* Keep dependent native editor regions below the 60px header. ----------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-workspace {
	margin-top: var(--lmono-header-height);
	min-height: calc( 100vh - var(--lmono-header-height) );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-left {
	height: calc( 100vh - var(--lmono-header-height) );
	top: var(--lmono-header-height);
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-left .lumise-tab-body-wrp {
	height: calc( 100vh - var(--lmono-header-height) );
}

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

/* Preserve Lumise's responsive behavior with the updated visual skin. ---- */
@media only screen and (max-width: 1170px) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active {
		background: #ffffff;
		height: var(--lmono-header-height);
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-nav-file {
		fill: #202020;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] li.active [data-view="sub"],
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li[data-tool] ul.lumise-tabs-nav {
		top: calc( var(--lmono-header-height) + 2px );
	}
}

@media only screen and (max-width: 736px) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations {
		background: #ffffff !important;
		border-bottom-color: #e8e8e8;
		box-shadow: 0 5px 18px rgba( 0, 0, 0, 0.08 );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active {
		background: #ffffff !important;
		border-left: 1px solid #eeeeee;
		box-sizing: border-box;
		gap: 3px;
		left: 58px !important;
		padding: 0 8px !important;
		right: 4px !important;
		width: auto !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active > li {
		height: 38px !important;
		margin: 11px 0 !important;
		padding: 0 11px !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li {
		border: 1px solid transparent;
		border-radius: 999px;
		font-size: 13px;
		margin: 0;
		padding: 8px 10px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active > li:not([data-view="sp"]):not(.disabled):hover,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block][data-resp="file"].active > li.active {
		background: #f4f4f4 !important;
		border-color: #e8e8e8;
		color: #111111 !important;
	}

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

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block] > li.back_mobile a {
		color: #202020 !important;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-nav-file {
		background: #f6f6f6;
		border: 1px solid #e3e3e3;
		border-radius: 10px !important;
		box-sizing: border-box;
		height: 40px;
		margin: 7px 8px 0 10px;
		padding: 9px;
		transition: background-color 160ms ease, border-color 160ms ease;
		width: 40px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-nav-file:hover {
		background: #eeeeee;
		border-color: #d7d7d7;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] {
		margin-right: 8px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations ul[data-block="right"] > li {
		border-radius: 0;
		margin: 0;
		padding: 0;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-addToCart,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations button#lumise-continue-btn,
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations #lumise-proceed > button#lumise-cart-action {
		height: 36px;
		margin-top: 12px;
	}
}