/* =============================================================================
   Bio Lotus — Side cart drawer
   Loaded sitewide (WooCommerce active) via the blf-cart handle.

   Design language: theme.css tokens (cream surface, olive accent, warm brown
   CTA, serif italic headings, --bl-radius geometry, soft shadows).

   Direction: the panel anchors to inset-inline-end (right in LTR). The slide
   transform is physical, so rtl.css overrides it for the Arabic build:
     .bl-cart-drawer { transform: translateX(-110%); }

   Z-index stack: backdrop 9990 · drawer 9991 (above header 399 / mega 299).
   ============================================================================= */


/* ── Body scroll lock (toggled by cart-drawer.js and theme.js) ───────────── */
body.bl-no-scroll {
	overflow: hidden;
}


/* ── Backdrop ────────────────────────────────────────────────────────────── */
.bl-cart-drawer__backdrop {
	position:   fixed;
	inset:      0;
	z-index:    9990;
	background: rgba(28, 28, 20, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);

	opacity:        0;
	visibility:     hidden;
	pointer-events: none;
	transition: opacity 280ms var(--bl-ease),
	            visibility 0ms 280ms;
}
.bl-cart-drawer__backdrop.is-open {
	opacity:        1;
	visibility:     visible;
	pointer-events: auto;
	transition: opacity 280ms var(--bl-ease),
	            visibility 0ms 0ms;
}


/* ── Panel ───────────────────────────────────────────────────────────────── */
.bl-cart-drawer {
	position:  fixed;
	top:       0;
	bottom:    0;
	inset-inline-end: 0;
	z-index:   9991;

	width:      min(420px, 100vw);
	display:    flex;
	flex-direction: column;

	background: var(--bl-surface, #FAFAF0);
	box-shadow: -8px 0 40px rgba(28, 23, 16, 0.18);

	transform:  translateX(110%);   /* hidden — slides off to the right (LTR) */
	visibility: hidden;             /* unreachable by keyboard/screen reader while closed */
	transition: transform 340ms var(--bl-ease),
	            visibility 0ms 340ms;
}
.bl-cart-drawer.is-open {
	transform:  translateX(0);
	visibility: visible;
	transition: transform 340ms var(--bl-ease),
	            visibility 0ms 0ms;
}


/* ── Head ────────────────────────────────────────────────────────────────── */
.bl-cart-drawer__head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	padding:         20px 24px;
	border-bottom:   1px solid var(--bl-line, #C4C0A8);
	flex-shrink:     0;
}

.bl-cart-drawer__title {
	font-family:    var(--bl-font-serif, 'Cormorant Garamond', serif);
	font-style:     italic;
	font-weight:    400;
	font-size:      24px;
	letter-spacing: 0.03em;
	color:          var(--bl-text, #1C1C14);
	margin:         0;
}

.bl-cart-drawer__close {
	background:    none;
	border:        1px solid var(--bl-line, #C4C0A8);
	border-radius: 50%;
	width:         36px;
	height:        36px;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	color:         var(--bl-text-mid, #4A4A38);
	cursor:        pointer;
	flex-shrink:   0;
	transition:    color 180ms var(--bl-ease),
	               border-color 180ms var(--bl-ease),
	               transform 180ms var(--bl-ease);
}
.bl-cart-drawer__close:hover {
	color:        var(--bl-text, #1C1C14);
	border-color: var(--bl-text-mid, #4A4A38);
	transform:    rotate(90deg);
}


/* ── Free-shipping progress meter ────────────────────────────────────────── */
.bl-cart-drawer__meter {
	padding:       16px 24px 18px;
	background:    var(--bl-bg-alt, #E4E0D0);
	border-bottom: 1px solid var(--bl-line, #C4C0A8);
	flex-shrink:   0;
}

.bl-cart-drawer__meter-text {
	font-family:    var(--bl-font-sans, 'Jost', sans-serif);
	font-size:      12.5px;
	letter-spacing: 0.03em;
	color:          var(--bl-text-mid, #4A4A38);
	margin:         0 0 10px;
	display:        flex;
	align-items:    center;
	gap:            6px;
}
.bl-cart-drawer__meter-text strong {
	color:       var(--bl-bold, #7A4830);
	font-weight: 600;
}

.bl-cart-drawer__meter-track {
	height:        6px;
	border-radius: 999px;
	background:    rgba(28, 28, 20, 0.10);
	overflow:      hidden;
}

.bl-cart-drawer__meter-fill {
	height:        100%;
	border-radius: 999px;
	background:    linear-gradient(90deg, var(--bl-accent, #5C6E50), var(--bl-bold, #7A4830));
	transition:    width 480ms var(--bl-ease);
	min-width:     0;
}

/* Threshold reached — quiet olive celebration */
.bl-cart-drawer__meter.is-reached .bl-cart-drawer__meter-text {
	color:       var(--bl-accent, #5C6E50);
	font-weight: 500;
}
.bl-cart-drawer__meter.is-reached .bl-cart-drawer__meter-fill {
	background: var(--bl-accent, #5C6E50);
}


/* ── Items list ──────────────────────────────────────────────────────────── */
.bl-cart-drawer__items {
	flex:       1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding:    8px 24px;
}

.bl-cart-drawer__list {
	list-style: none;
	margin:     0;
	padding:    0;
}

.bl-cart-drawer__item {
	display:     grid;
	grid-template-columns: 64px 1fr auto;
	gap:         14px;
	align-items: start;
	padding:     16px 0;
	border-bottom: 1px solid var(--bl-line, #C4C0A8);
	transition:  opacity 200ms var(--bl-ease);
}
.bl-cart-drawer__item:last-child { border-bottom: none; }

.bl-cart-drawer__item.is-busy {
	opacity:        0.45;
	pointer-events: none;
}

.bl-cart-drawer__item-thumb img {
	width:         64px;
	height:        64px;
	object-fit:    cover;
	border-radius: var(--bl-radius-sm, 6px);
	display:       block;
}

.bl-cart-drawer__item-name {
	margin: 0 0 4px;
}
.bl-cart-drawer__item-name,
.bl-cart-drawer__item-name a {
	font-family:     var(--bl-font-sans, 'Jost', sans-serif);
	font-size:       13px;
	font-weight:     500;
	line-height:     1.4;
	color:           var(--bl-text, #1C1C14);
	text-decoration: none;
}
.bl-cart-drawer__item-name a:hover { color: var(--bl-accent, #5C6E50); }

.bl-cart-drawer__item-price {
	font-family: var(--bl-font-sans, 'Jost', sans-serif);
	font-size:   12.5px;
	color:       var(--bl-text-mid, #4A4A38);
	margin:      0 0 10px;
	display:     flex;
	align-items: baseline;
	gap:         8px;
}
.bl-cart-drawer__item-price del {
	color:     var(--bl-text-faint, #7A7A68);
	font-size: 11.5px;
}
.bl-cart-drawer__item-price ins {
	text-decoration: none;
	color:           var(--bl-bold, #7A4830);
	font-weight:     600;
}

/* Quantity stepper */
.bl-cart-drawer__qty {
	display:       inline-flex;
	align-items:   center;
	border:        1px solid var(--bl-line, #C4C0A8);
	border-radius: var(--bl-radius-sm, 6px);
	overflow:      hidden;
}

.bl-cart-drawer__qty-btn {
	width:       28px;
	height:      28px;
	background:  none;
	border:      none;
	font-size:   15px;
	line-height: 1;
	color:       var(--bl-text-mid, #4A4A38);
	cursor:      pointer;
	transition:  background 160ms var(--bl-ease),
	             color 160ms var(--bl-ease);
}
.bl-cart-drawer__qty-btn:hover {
	background: var(--bl-accent-soft, #E0E8D8);
	color:      var(--bl-accent, #5C6E50);
}

.bl-cart-drawer__qty-num {
	min-width:   28px;
	text-align:  center;
	font-family: var(--bl-font-sans, 'Jost', sans-serif);
	font-size:   12.5px;
	font-weight: 500;
	color:       var(--bl-text, #1C1C14);
}

/* Remove */
.bl-cart-drawer__item-remove {
	background:  none;
	border:      none;
	padding:     4px;
	color:       var(--bl-text-faint, #7A7A68);
	cursor:      pointer;
	transition:  color 160ms var(--bl-ease);
}
.bl-cart-drawer__item-remove:hover { color: var(--bl-bold, #7A4830); }


/* ── Empty state ─────────────────────────────────────────────────────────── */
.bl-cart-drawer__empty {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	text-align:     center;
	height:         100%;
	padding:        48px 16px;
	color:          var(--bl-text-faint, #7A7A68);
}

.bl-cart-drawer__empty-title {
	font-family: var(--bl-font-serif, 'Cormorant Garamond', serif);
	font-style:  italic;
	font-weight: 400;
	font-size:   20px;
	color:       var(--bl-text, #1C1C14);
	margin:      18px 0 6px;
}

.bl-cart-drawer__empty-text {
	font-family: var(--bl-font-sans, 'Jost', sans-serif);
	font-size:   13px;
	line-height: 1.6;
	margin:      0 0 22px;
	max-width:   240px;
}

.bl-cart-drawer__empty-cta { font-size: 10.5px; padding: 13px 26px; }


/* ── Summary: savings, subtotal, reassurance, CTAs ───────────────────────── */
.bl-cart-drawer__summary {
	flex-shrink: 0;
}
.bl-cart-drawer__summary:not(:empty) {
	border-top: 1px solid var(--bl-line, #C4C0A8);
	padding:    16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
	background: var(--bl-surface, #FAFAF0);
}

.bl-cart-drawer__savings {
	display:       flex;
	align-items:   center;
	gap:           7px;
	background:    var(--bl-accent-soft, #E0E8D8);
	color:         var(--bl-accent, #5C6E50);
	border-radius: var(--bl-radius-sm, 6px);
	padding:       9px 12px;
	font-family:   var(--bl-font-sans, 'Jost', sans-serif);
	font-size:     12px;
	margin:        0 0 14px;
}
.bl-cart-drawer__savings strong { font-weight: 600; }

.bl-cart-drawer__subtotal {
	display:         flex;
	align-items:     baseline;
	justify-content: space-between;
	font-family:     var(--bl-font-sans, 'Jost', sans-serif);
	font-size:       13px;
	color:           var(--bl-text-mid, #4A4A38);
	margin-bottom:   6px;
}

.bl-cart-drawer__subtotal-amount {
	font-family: var(--bl-font-serif, 'Cormorant Garamond', serif);
	font-size:   22px;
	font-weight: 500;
	color:       var(--bl-text, #1C1C14);
}

.bl-cart-drawer__reassure {
	font-family: var(--bl-font-sans, 'Jost', sans-serif);
	font-size:   11px;
	color:       var(--bl-text-faint, #7A7A68);
	margin:      0 0 14px;
}

.bl-cart-drawer__checkout {
	width:           100%;
	justify-content: center;
	text-align:      center;
}

.bl-cart-drawer__view-cart {
	display:         block;
	text-align:      center;
	margin-top:      12px;
	font-family:     var(--bl-font-sans, 'Jost', sans-serif);
	font-size:       11px;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	color:           var(--bl-text-mid, #4A4A38);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition:      color 160ms var(--bl-ease);
}
.bl-cart-drawer__view-cart:hover { color: var(--bl-bold, #7A4830); }


/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.bl-cart-drawer { width: 100vw; }

	.bl-cart-drawer__head  { padding: 16px 18px; }
	.bl-cart-drawer__meter { padding: 14px 18px 16px; }
	.bl-cart-drawer__items { padding: 4px 18px; }
	.bl-cart-drawer__summary:not(:empty) { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }

	/* Bigger touch targets */
	.bl-cart-drawer__qty-btn       { width: 34px; height: 34px; }
	.bl-cart-drawer__qty-num       { min-width: 32px; }
	.bl-cart-drawer__item-remove   { padding: 8px; }
	.bl-cart-drawer__close         { width: 40px; height: 40px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.bl-cart-drawer,
	.bl-cart-drawer__backdrop,
	.bl-cart-drawer__meter-fill {
		transition: none;
	}
}