/* =========================================================================
   Basket drawer — motion and proportions measured on the reference:
   desktop panel from the right (to the gallery edge), phone full-screen sheet from the
   bottom; opens in 0.5s easing out, closes in 0.3s; scrim 30% black.
   Colours and type follow the header (header.css variables).
   ====================================================================== */

.ao-mc {
	position: fixed;
	inset: 0;
	z-index: 100001; /* above the header, its drawer and the admin bar */
	font-family: var(--ao-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ao-ink);
	-webkit-font-smoothing: antialiased;
}
.ao-mc[hidden] { display: none; }
.ao-mc *, .ao-mc *::before, .ao-mc *::after { box-sizing: border-box; }
.ao-mc a { color: inherit; }
.ao-mc button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
	cursor: pointer;
}
.ao-mc :focus-visible { outline: 1px solid var(--ao-ink); outline-offset: 3px; }
.ao-mc ul { list-style: none; margin: 0; padding: 0; }
.ao-mc p { margin: 0; }

/* ---------- Scrim + panel motion ---------- */

.ao-mc__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.2s cubic-bezier(0.42, 0, 1, 1);
}
.ao-mc.is-open .ao-mc__scrim { opacity: 1; }

.ao-mc__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	/* Desktop: lands exactly on the right edge of the product gallery. That page
	   is a 4fr | 1fr | minmax(12.5rem, 1fr) grid inside the gutters, so the
	   drawer covers the gutter + the 1fr column + the info column. When the info
	   column isn't held at its 12.5rem minimum this is a third of the width
	   inside the gutters plus one gutter, the reference's own formula.
	   (% = the full window: the scrollbar is locked away while open.) */
	--ao-mc-inner: calc(100% - 2 * var(--ao-gutter, 30px));
	width: calc(var(--ao-gutter, 30px) + var(--ao-mc-inner) / 5 + 0.8 * max(12.5rem, var(--ao-mc-inner) / 6));
	display: flex;
	flex-direction: column;
	background: var(--ao-paper);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.42, 0, 1, 1); /* closing */
	outline: none;
}
.ao-mc.is-open .ao-mc__panel {
	transform: none;
	transition: transform 0.5s ease-out; /* opening */
}

/* ---------- Head ---------- */

.ao-mc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 0;
	min-height: 72px;
	flex: none;
}
.ao-mc__title { margin: 0; font: inherit; font-size: 18px; font-weight: 400; }
.ao-mc__close { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; }
.ao-mc__close .ao-icon { width: 20px; height: 20px; }

.ao-mc__notice { padding: 0 24px 12px; font-size: 13px; }
.ao-mc__notice[hidden] { display: none; }

/* ---------- Body ---------- */

.ao-mc__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 8px 24px 24px;
}

.ao-mc__item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ao-rule);
	transition: opacity 0.2s;
}
.ao-mc__item:first-child { padding-top: 0; }
.ao-mc__item.is-busy { opacity: 0.45; pointer-events: none; }

.ao-mc__thumb { display: block; width: 80px; aspect-ratio: 4 / 5; background: rgba(0, 0, 0, 0.05); overflow: hidden; }
.ao-mc__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ao-mc__info { display: flex; flex-direction: column; min-width: 0; }
.ao-mc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ao-mc__name { text-decoration: none; }
.ao-mc__name:hover { text-decoration: underline; }
.ao-mc__price { white-space: nowrap; }
.ao-mc__meta { margin-top: 4px; font-size: 12px; }

.ao-mc__actions { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.ao-mc__qty { display: flex; align-items: center; gap: 12px; }
.ao-mc__qty button { display: grid; place-items: center; width: 24px; height: 24px; font-size: 16px; line-height: 1; }
.ao-mc__qty button:disabled { opacity: 0.3; cursor: default; }
.ao-mc__qty output { min-width: 1ch; text-align: center; }
.ao-mc__remove { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Empty ---------- */

.ao-mc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-top: 24px;
	text-align: center;
	font-size: 12px;
}
.ao-mc__empty[hidden] { display: none; }
.ao-mc__mark .ao-icon { width: 72px; height: 72px; }

/* ---------- Foot ---------- */

.ao-mc__foot {
	flex: none;
	padding: 16px 24px 24px;
	border-top: 1px solid var(--ao-rule);
	background: var(--ao-paper);
}
.ao-mc__foot[hidden] { display: none; }
.ao-mc__subtotal { display: flex; justify-content: space-between; margin-bottom: 16px; }

/* The one dominant button: black block, label top-left, as on the product page */
.ao-mc .ao-mc__checkout {
	display: block;
	height: 72px;
	padding: 16px 16px 24px;
	background: var(--ao-ink);
	color: var(--ao-paper);
	text-decoration: none;
	font-weight: 500;
}
.ao-mc .ao-mc__checkout:hover { opacity: 0.88; }

.ao-mc__view {
	display: inline-block;
	margin-top: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

html.ao-mc-locked,
html.ao-mc-locked body { overflow: hidden; }

/* ---------- Tablet and phone ----------
   As on the reference: 768–1023px is still a side drawer, half the screen;
   below 768px it becomes a full-screen sheet from the bottom. */

@media (max-width: 1023px) {
	.ao-mc__panel { width: 50%; }
	.ao-mc__head { padding: 16px 16px 0; min-height: 60px; }
	.ao-mc__notice { padding: 0 16px 12px; }
	.ao-mc__body { padding: 8px 16px 16px; }
	.ao-mc__foot { padding: 16px 16px 20px; }
	.ao-mc__view { display: block; width: fit-content; margin: 16px auto 0; }
}

@media (max-width: 767px) {
	.ao-mc__panel {
		width: 100%;
		transform: translateY(100%);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ao-mc__scrim,
	.ao-mc__panel,
	.ao-mc.is-open .ao-mc__panel { transition: none; }
}