/**
 * Celsyn 360 Liquid — cart drawer.
 * The scrim behind it dims/blurs the page (.celsyn-glass-scrim, glass.css).
 * The drawer's own content surface is opaque (readability of line items);
 * its header/action bar uses glass chrome.
 */

#celsyn-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 460px, 100vw );
	z-index: var( --z-drawer );
	background: var( --env-surface );
	box-shadow: var( --glass-shadow );
	display: flex;
	flex-direction: column;
	transform: translateX( 100% );
	transition: transform var( --dur-mid ) var( --ease-glass );
}
#celsyn-cart-drawer.is-open { transform: translateX( 0 ); }
/* Mobile: edge-to-edge, no side gap at all. */
@media ( max-width: 480px ) {
	#celsyn-cart-drawer { width: 100vw; }
}

#celsyn-cart-drawer .celsyn-cd__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var( --space-5 );
}
#celsyn-cart-drawer .celsyn-cd__title {
	font-family: var( --font-display );
	font-weight: 600;
	font-size: var( --text-lg );
	margin: 0;
}
#celsyn-cart-drawer .celsyn-cd__close {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var( --env-surface-2 );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#celsyn-cart-drawer .celsyn-cd__scroll {
	flex: 1;
	overflow-y: auto;
}
#celsyn-cart-drawer .celsyn-cd__items { padding: 0 var( --space-5 ); }
#celsyn-cart-drawer .celsyn-cd__item {
	display: flex;
	gap: var( --space-3 );
	padding-block: var( --space-4 );
	border-top: 1px solid var( --env-line );
}
#celsyn-cart-drawer .celsyn-cd__item img {
	width: 64px;
	height: 64px;
	border-radius: var( --radius-sm );
	object-fit: cover;
	flex-shrink: 0;
}
#celsyn-cart-drawer .celsyn-cd__item-body { flex: 1; min-width: 0; }
#celsyn-cart-drawer .celsyn-cd__item-name {
	font-weight: 600;
	font-size: var( --text-sm );
	color: var( --env-text );
	margin: 0;
}
#celsyn-cart-drawer .celsyn-cd__item-meta {
	margin: var( --space-1 ) 0 0;
	font-size: var( --text-xs );
	color: var( --env-text-muted );
	line-height: 1.5;
}
#celsyn-cart-drawer .celsyn-cd__item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var( --space-3 );
}
#celsyn-cart-drawer .celsyn-cd__qty {
	display: inline-flex;
	align-items: center;
	gap: var( --space-3 );
	border: 1px solid var( --env-line-strong );
	border-radius: var( --radius-pill );
	padding: 2px var( --space-2 );
}
#celsyn-cart-drawer .celsyn-cd__qty-btn {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: var( --env-surface-2 );
	color: var( --env-text );
	cursor: pointer;
	font-size: var( --text-sm );
	line-height: 1;
}
#celsyn-cart-drawer .celsyn-cd__qty-val {
	min-width: 1.4em;
	text-align: center;
	font-size: var( --text-sm );
	font-weight: 600;
	color: var( --env-text ); /* explicit — never the muted token, qty must stay clearly legible */
}
#celsyn-cart-drawer .celsyn-cd__item-price {
	font-weight: 700;
	font-size: var( --text-sm );
	color: var( --env-text );
	font-variant-numeric: tabular-nums;
}
#celsyn-cart-drawer .celsyn-cd__item-remove {
	display: inline-block;
	margin-top: var( --space-2 );
	background: none;
	border: none;
	color: var( --env-text-muted );
	cursor: pointer;
	font-size: var( --text-xs );
	text-decoration: underline;
	padding: 0;
}
#celsyn-cart-drawer .celsyn-cd__empty {
	text-align: center;
	color: var( --env-text-muted );
	padding: var( --space-8 ) var( --space-5 );
}

/* You May Also Like */
#celsyn-cart-drawer .celsyn-cd__recs { padding: var( --space-5 ); border-top: 1px solid var( --env-line ); }
#celsyn-cart-drawer .celsyn-cd__recs-heading {
	font-size: var( --text-xs );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --env-text-muted );
	margin: 0 0 var( --space-3 );
}
#celsyn-cart-drawer .celsyn-cd__recs-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: var( --space-3 ); }
#celsyn-cart-drawer .celsyn-cd__rec { text-align: center; }
#celsyn-cart-drawer .celsyn-cd__rec img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var( --radius-sm ); background: var( --env-surface-2 ); margin-bottom: var( --space-2 ); }
#celsyn-cart-drawer .celsyn-cd__rec-name { font-size: 0.6875rem; font-weight: 600; margin: 0; line-height: 1.3; }
#celsyn-cart-drawer .celsyn-cd__rec-price { font-size: 0.6875rem; color: var( --env-text-muted ); margin: 2px 0 var( --space-2 ); }
#celsyn-cart-drawer .celsyn-cd__rec .celsyn-button { width: 100%; padding-inline: var( --space-2 ); font-size: 0.625rem; height: 30px; }

/* Trust rows */
#celsyn-cart-drawer .celsyn-cd__trust { padding: var( --space-5 ); border-top: 1px solid var( --env-line ); display: flex; flex-direction: column; gap: var( --space-3 ); }
#celsyn-cart-drawer .celsyn-cd__trust p { display: flex; align-items: center; gap: var( --space-2 ); margin: 0; font-size: var( --text-xs ); color: var( --env-text-muted ); }
#celsyn-cart-drawer .celsyn-cd__trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var( --env-accent ); }

#celsyn-cart-drawer .celsyn-cd__footer {
	padding: var( --space-5 );
	background: var( --glass-bg-strong );
	backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	-webkit-backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	border-top: 1px solid var( --env-line );
}
#celsyn-cart-drawer .celsyn-cd__totals { margin-bottom: var( --space-4 ); }
#celsyn-cart-drawer .celsyn-cd__totals-row {
	display: flex;
	justify-content: space-between;
	font-size: var( --text-sm );
	color: var( --glass-text-muted );
	padding-block: 3px;
}
#celsyn-cart-drawer .celsyn-cd__totals-row--total {
	font-weight: 700;
	font-size: var( --text-md );
	color: var( --glass-text );
	border-top: 1px solid var( --glass-border );
	margin-top: var( --space-2 );
	padding-top: var( --space-3 );
}

body.celsyn-cart-open { overflow: hidden; }

@media ( max-width: 360px ) {
	#celsyn-cart-drawer .celsyn-cd__recs-grid { grid-template-columns: repeat( 2, 1fr ); }
}