/**
 * Cart section.
 * Empty and populated states share one CustomInk-inspired drawer shell.
 */

/* Active cart trigger ---------------------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options.active > button#lumise-addToCart {
	background: var( --lmono-color-accent-soft );
	border-color: rgba( var( --lmono-color-accent-rgb ), 0.18 );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options.active > button#lumise-addToCart img {
	filter: brightness( 0 ) saturate( 100% ) invert( 20% ) sepia( 92% ) saturate( 4370% ) hue-rotate( 230deg ) brightness( 86% ) contrast( 98% );
}

/* Lumise adds a full-screen scrim to active navigation items. CustomInk's
 * cart floats above the editor without dimming the working area. */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options.active::after {
	content: none !important;
	display: none !important;
}

/* Shared cart drawer ----------------------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options > #lumise-cart-items {
	background: #ffffff;
	border: 0;
	border-radius: 12px;
	bottom: auto;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.18 );
	box-sizing: border-box;
	height: 457px;
	left: calc( 50% - 2px ) !important;
	margin: 0;
	max-height: calc( 100vh - 50px );
	max-width: calc( 100vw - 16px );
	min-width: 0;
	overflow: hidden;
	padding: 16px 0;
	position: absolute;
	right: auto !important;
	top: 50px;
	transform: translateX( -50% );
	width: 432px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options.active > #lumise-cart-items {
	animation: none !important;
	display: flex;
	flex-direction: column;
	opacity: 1 !important;
	transform: translateX( -50% ) !important;
	transition: none !important;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options > #lumise-cart-items::after {
	display: none;
}

/* The reference uses the cart trigger itself to close the drawer. */
body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options > #lumise-cart-items > header {
	display: none;
}

/* Populated cart items -------------------------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] {
	background: #ffffff;
	box-sizing: border-box;
	display: flex;
	flex: 0 0 324px;
	flex-direction: column;
	height: 324px;
	margin: 0 16px;
	max-height: 324px;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	width: calc( 100% - 32px );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] {
	align-items: center;
	background: #ffffff;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	color: #222020;
	display: flex;
	flex: 0 0 auto;
	float: none;
	margin: 0;
	min-height: 96px;
	padding: 16px 8px 16px 0;
	position: relative;
	width: 100%;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] > span[data-view="thumbn"] {
	background: #f5f5f5;
	border-radius: 6px;
	box-sizing: border-box;
	display: block;
	flex: 0 0 64px;
	float: none;
	height: fit-content;
	margin: 0 12px 0 0;
	overflow: hidden;
	width: 64px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] > span[data-view="thumbn"] > img {
	display: block;
	height: auto;
	object-fit: contain;
	width: 100%;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] > span[data-view="info"] {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: auto minmax( 0, 1fr );
	min-width: 0;
	padding-right: 32px;
	position: relative;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] > span[data-view="info"] > a[href="#edit"] {
	color: #222020;
	display: block;
	grid-column: 1 / -1;
	margin: 0 0 7px;
	min-width: 0;
	text-decoration: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] name {
	color: #222020;
	display: block;
	font-size: 15px;
	font-weight: 700;
	grid-column: 1 / -1;
	line-height: 20px;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"] name > a[href="#edit"] {
	color: #222020 !important;
	text-decoration: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] price,
body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] quantity {
	color: #555555;
	display: block;
	float: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	margin: 0;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] price {
	grid-column: 1;
	grid-row: 2;
	margin-right: 8px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] quantity {
	grid-column: 2;
	grid-row: 2;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] a[href="#remove"] {
	align-items: center;
	background-color: #fff4f4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d04a4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	border: 1px solid #f1caca;
	border-radius: 6px;
	color: transparent;
	display: flex;
	font-size: 0;
	height: 30px;
	justify-content: center;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY( -50% );
	transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease;
	width: 30px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"]:hover a[href="#remove"],
body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li[data-func="edit"]:focus-within a[href="#remove"] {
	opacity: 1;
	pointer-events: auto;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] a[href="#remove"]:hover,
body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] a[href="#remove"]:focus-visible {
	background-color: #ffe8e8;
	outline: 2px solid #d04a4a;
	outline-offset: 1px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] a[href="#remove"] > i {
	display: none;
}

/* Lumise renders the subtotal as a final list item. The theme mirrors that
 * value into the shared footer, so this native source can stay visually hidden. */
body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] > li:not([data-func="edit"]) {
	display: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="true"] {
	align-items: center;
	background: #ffffff;
	box-sizing: border-box;
	color: #252525;
	cursor: default;
	display: flex;
	flex: 0 0 324px;
	height: 324px;
	justify-content: center;
	margin: 0 16px;
	max-height: 324px;
	min-height: 0;
	overflow: hidden;
	padding: 48px;
	width: calc( 100% - 32px );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="true"] > p {
	align-items: center;
	color: #222020;
	display: flex;
	flex-direction: column;
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
	margin: 0;
	text-align: center;
	transform: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="true"] > p > i {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23b9b9b9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3Cpath d='M3 3h2l2.4 11.7a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	font-size: 0;
	height: 36px;
	margin: 0 0 9px;
	transform: none;
	width: 36px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="true"] > p > i::before {
	content: "";
}

/* Shared summary and native cart actions -------------------------------- */
body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer {
	background: #ffffff;
	border-radius: 0;
	border-top: 1px solid #dddddd;
	box-sizing: border-box;
	cursor: default;
	display: grid !important;
	flex: 0 0 101px;
	float: none;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	grid-template-rows: 52px 48px;
	margin: 0;
	padding: 0 16px;
	row-gap: 0;
	text-align: left;
	width: 100%;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer::before {
	content: none;
	display: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer::after {
	content: none;
	display: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > .lmono-cart-summary {
	align-self: center;
	color: #222020;
	font-size: 16px;
	font-weight: 500;
	grid-row: 1;
	line-height: 20px;
	white-space: nowrap;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > .lmono-cart-summary--styles {
	grid-column: 1;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > .lmono-cart-summary--subtotal {
	grid-column: 2;
	text-align: right;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer .lmono-cart-summary__value {
	font-weight: 700;
	margin-left: 4px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] + footer {
	column-gap: 8px;
	grid-template-columns: 136px minmax( 0, 1fr );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[data-func="details"] {
	align-items: center;
	background: #ffffff;
	border: 1px solid #d7d7d7;
	border-radius: 6px;
	box-sizing: border-box;
	color: #222020;
	display: flex;
	float: none;
	font-size: 14px;
	font-weight: 600;
	grid-column: 1;
	grid-row: 2;
	height: 48px;
	justify-content: center;
	line-height: 20px;
	margin: 0;
	padding: 0 12px;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease;
	width: 100%;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[data-func="details"]:hover {
	background: #f7f7f7;
	border-color: #bdbdbd;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[data-func="details"] > i {
	display: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="true"] + footer > a[data-func="details"] {
	display: none;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[href="#checkout"] {
	align-items: center;
	background: var( --lmono-color-accent ) !important;
	border: 0;
	border-radius: 6px;
	box-sizing: border-box;
	color: transparent !important;
	display: flex;
	font-size: 0;
	font-weight: 600;
	grid-column: 2;
	grid-row: 2;
	height: 48px;
	justify-content: center;
	line-height: 48px;
	margin: 0;
	opacity: 1;
	overflow: hidden;
	padding: 0 16px;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 160ms ease, transform 160ms ease;
	white-space: nowrap;
	width: 100%;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="true"] + footer > a[href="#checkout"] {
	grid-column: 1 / -1;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[href="#checkout"]::before {
	color: #ffffff;
	content: "Review Cart & Check Out";
	font-size: 16px;
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[href="#checkout"]:hover {
	background: var( --lmono-color-accent-hover ) !important;
	opacity: 1;
	transform: translateY( -1px );
}

body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > a[href="#checkout"] > i {
	display: none;
}

@media only screen and (max-width: 736px) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options > #lumise-cart-items {
		border-radius: 12px;
		left: 8px !important;
		max-width: none;
		position: fixed;
		right: 8px !important;
		transform: none;
		width: auto;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options.active > #lumise-cart-items {
		transform: none !important;
	}
}

@media only screen and (max-height: 506px) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-navigations li#lumise-cart-options > #lumise-cart-items {
		height: calc( 100vh - 50px );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] {
		flex: 1 1 auto;
		height: auto;
	}
}

@media only screen and (max-width: 420px) {
	body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"] + footer > .lmono-cart-summary {
		font-size: 14px;
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] + footer {
		grid-template-columns: 112px minmax( 0, 1fr );
	}

	body.lumise-theme-mono-editor #LumiseDesign #lumise-cart-items > ul[data-view="items"][data-empty="false"] + footer > a[href="#checkout"]::before {
		font-size: 13px;
	}
}
