/*
 * MA-ZAL Group — cart: floating button (T48), cart lines, quantity control, checkout result. Reads tokens.css only.
 */
.mzs-fab {
	position: fixed;
	z-index: var(--z-fab);
	inset-inline-start: var(--s-4);  /* the start corner (right in Arabic); the app bell takes the other one */
	bottom: calc(var(--mz-app-float-bottom) + var(--safe-bottom));
	display: grid;
	place-items: center;
	width: 3.625rem;
	height: 3.625rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-gold);
	color: var(--c-on-gold);
	box-shadow: var(--shadow-1), 0 0 0 4px var(--c-surface);
	cursor: pointer;
}

.mzs-fab[hidden] { display: none; }
.mzs-fab--order { background: var(--c-surface); color: var(--c-gold-text); }
.mzs-fab--done { background: var(--c-ok); color: var(--c-on-gold); }

.mzs-fab__badge {
	position: absolute;
	top: -4px;
	inset-inline-start: -4px;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--r-pill);
	background: var(--c-bad);
	color: var(--c-on-gold);
	font: var(--fw-bold) var(--fs-micro)/1.375rem var(--f-text);
	box-shadow: 0 0 0 2px var(--c-surface);
}

.mzs-fab__mini {
	position: absolute;
	bottom: -2px;
	inset-inline-end: -2px;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-gold-text);
	box-shadow: 0 2px 6px var(--c-shadow);
}

.mzs-fab__badge[hidden],
.mzs-fab__mini[hidden] { display: none; }

.mzs-fab.is-bump { animation: mzs-bump 0.45s var(--t-base); }

@keyframes mzs-bump {
	40% { transform: scale(1.14); }
	100% { transform: scale(1); }
}

.mzs-toast[hidden] { display: none; }

/* the sheet's two buttons */
.mzs-cart-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2);
	margin-block: var(--s-3) var(--s-5);
}

/* ---------- cart page lines ---------- */
.mzs-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: var(--s-6);
	align-items: start;
}

.mzs-lines {
	display: grid;
	background: var(--c-surface);
	border: var(--b-1);
	border-radius: var(--r-md);
	overflow: hidden;
}

.mzs-line {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4);
	border-top: var(--b-1);
}

.mzs-line:first-child { border-top: 0; }
.mzs-line__img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--r-sm); background: var(--c-paper); }
.mzs-line__info { display: grid; gap: var(--s-1); min-width: 0; }
.mzs-line__sum { min-width: 6rem; text-align: end; }

.mzs-qty {
	display: inline-flex;
	align-items: center;
	border: var(--b-1);
	border-radius: var(--r-pill);
}

.mzs-qty__btn {
	width: var(--tap);
	height: var(--tap);
	border: 0;
	background: transparent;
	color: var(--c-ink);
	font: var(--fw-semi) var(--fs-lead)/1 var(--f-text);
	cursor: pointer;
}

.mzs-qty__val { min-width: 2rem; text-align: center; font-weight: var(--fw-semi); }

.mzs-summary {
	display: grid;
	gap: var(--s-4);
	position: sticky;
	top: calc(5.25rem + var(--s-5));
}

.mzs-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--fs-lead);
	font-weight: var(--fw-bold);
}

@media (max-width: 63.99rem) {
	.mzs-cart { grid-template-columns: 1fr; }
	.mzs-summary { position: static; }
}

@media (max-width: 47.99rem) {
	.mzs-line { grid-template-columns: 4rem minmax(0, 1fr); }
	.mzs-line__img { width: 4rem; height: 4rem; grid-row: span 2; }
	.mzs-line__sum { text-align: start; }
}