/**
 * Eden Canvas floating cart — drawer + toggle button + count badge.
 * Namespace: ec-fc-  (all selectors prefixed per plugin convention).
 * Brand gold token (--ec-gold) comes from design-system.css, loaded site-wide;
 * hex fallbacks keep it correct if that sheet is ever absent.
 */

:root {
	--ec-fc-gold: var(--ec-gold, #d4a24c);
	--ec-fc-gold-dark: var(--ec-gold-dark, #b08a3e);
	--ec-fc-ink: var(--ec-ink, #1a1a1a);
	--ec-fc-muted: var(--ec-muted, #777);
}

/* ── Toggle button (fixed, bottom-right) ─────────────────────────────────── */
.ec-fc-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ec-fc-gold);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(212, 162, 76, .4);
	transition: transform .15s ease, background .15s ease;
}
.ec-fc-toggle:hover { transform: translateY(-2px); background: var(--ec-fc-gold-dark); }
.ec-fc-toggle:focus-visible { outline: 2px solid var(--ec-fc-gold-dark); outline-offset: 3px; }
.ec-fc-toggle svg { width: 24px; height: 24px; }

/* Count badge — dark ink so it contrasts against the gold button */
.ec-fc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--ec-fc-ink);
	color: #fff;
	font: 600 12px/20px system-ui, sans-serif;
	text-align: center;
	box-sizing: border-box;
}
.ec-fc-badge[hidden] { display: none; }

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.ec-fc-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(26, 26, 26, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.ec-fc-overlay.ec-fc-overlay--open { opacity: 1; visibility: visible; }

/* ── Drawer ──────────────────────────────────────────────────────────────── */
.ec-fc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
	height: 100%;
	background: #fff;
	box-shadow: -8px 0 30px rgba(0, 0, 0, .15);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.ec-fc-drawer.ec-fc-drawer--open { transform: translateX(0); }
.ec-fc-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
	.ec-fc-drawer, .ec-fc-overlay { transition: none; }
}

/* Header — gold accent bar under the title */
.ec-fc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 2px solid var(--ec-fc-gold);
	flex: 0 0 auto;
}
.ec-fc-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ec-fc-ink); }
.ec-fc-close {
	border: 0;
	background: none;
	padding: 4px;
	cursor: pointer;
	color: var(--ec-fc-muted);
	line-height: 0;
}
.ec-fc-close:hover { color: var(--ec-fc-ink); }
.ec-fc-close svg { width: 22px; height: 22px; }

/* Items (scrollable) */
.ec-fc-items {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-fc-item {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 16px 44px 16px 20px;
	border-bottom: 1px solid #f1f1f1;
	transition: opacity .15s ease;
}
.ec-fc-item.ec-fc-item--busy { opacity: .45; pointer-events: none; }
.ec-fc-item__thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	object-fit: cover;
	background: #f6f4f0;
}
.ec-fc-item__info { flex: 1 1 auto; min-width: 0; }
.ec-fc-item__name {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ec-fc-ink);
	line-height: 1.3;
}
.ec-fc-item__name a { color: inherit; text-decoration: none; }
.ec-fc-item__meta {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--ec-fc-muted);
	line-height: 1.5;
}
.ec-fc-item__meta .ec-fc-meta-row { display: block; }
.ec-fc-item__meta strong { font-weight: 600; color: #555; }
.ec-fc-item__meta a { color: var(--ec-fc-gold-dark); word-break: break-all; }

/* WPCPO uploaded photo — inline thumbnail (personalised-gift store) */
.ec-fc-photo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
}
.ec-fc-photo img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--ec-gold-border, rgba(212, 162, 76, .35));
	background: #f6f4f0;
}
.ec-fc-photo a { font-size: 11px; }

/* Foot row: quantity stepper + line price */
.ec-fc-item__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.ec-fc-qty {
	display: inline-flex;
	align-items: stretch; /* children share the same height so all sit centred */
	border: 1px solid #e2ddd3;
	border-radius: 6px;
	overflow: hidden;
}
.ec-fc-qty button,
.ec-fc-qty__val {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	box-sizing: border-box;
}
.ec-fc-qty button {
	width: 28px;
	padding: 0;
	border: 0;
	background: #f6f4f0;
	color: var(--ec-fc-ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background .12s ease;
}
.ec-fc-qty button:hover { background: var(--ec-gold-dim, rgba(212, 162, 76, .15)); color: var(--ec-fc-gold-dark); }
.ec-fc-qty button:disabled { opacity: .4; cursor: not-allowed; }
.ec-fc-qty__val { min-width: 32px; font-size: 13px; font-weight: 600; color: var(--ec-fc-ink); }
.ec-fc-item__price { font-size: 14px; font-weight: 600; color: var(--ec-fc-ink); }

/* Remove (×) — top-right of the item */
.ec-fc-remove {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 24px;
	height: 24px;
	border: 0;
	background: none;
	color: var(--ec-fc-muted);
	cursor: pointer;
	line-height: 0;
	border-radius: 4px;
}
.ec-fc-remove:hover { color: #b3261e; background: #faf0ef; }
.ec-fc-remove svg { width: 16px; height: 16px; }

/* Footer */
.ec-fc-footer {
	flex: 0 0 auto;
	padding: 18px 20px;
	border-top: 1px solid #eee;
	background: #fafafa;
}
.ec-fc-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 15px;
	color: var(--ec-fc-ink);
}
.ec-fc-subtotal strong { font-size: 18px; font-weight: 700; }
.ec-fc-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--ec-fc-muted);
}
.ec-fc-note {
	margin: 0 0 14px;
	font-size: 12px;
	color: #999;
	font-style: italic;
}
.ec-fc-checkout,
.ec-fc-viewcart {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border-radius: 8px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}
.ec-fc-checkout { background: var(--ec-fc-gold); color: #fff; }
.ec-fc-checkout:hover { background: var(--ec-fc-gold-dark); color: #fff; }
.ec-fc-viewcart { margin-top: 8px; background: transparent; color: var(--ec-fc-gold-dark); }
.ec-fc-viewcart:hover { text-decoration: underline; color: var(--ec-fc-gold-dark); }

/* States */
.ec-fc-state {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	text-align: center;
	color: #888;
	font-size: 14px;
}
.ec-fc-state--error { color: #b3261e; }

/* Tiny spinner for the loading state */
.ec-fc-spinner {
	width: 26px;
	height: 26px;
	margin: 0 auto 12px;
	border: 3px solid #e7e2da;
	border-top-color: var(--ec-fc-gold);
	border-radius: 50%;
	animation: ec-fc-spin .8s linear infinite;
}
@keyframes ec-fc-spin { to { transform: rotate(360deg); } }

/* Lock background scroll when the drawer is open */
body.ec-fc-open { overflow: hidden; }