/* =========================================================
   cart-page.css — full cart page, reuses cart-drawer-body markup
   ========================================================= */

.cart-page {
	padding-block: 40px 80px;
}

/* The drawer body/foot partial is reused as-is; these rules override its
   drawer-specific sizing (fixed 420px width, scroll container) into a
   two-column page layout. Scoped under .cart-page so the actual drawer
   elsewhere on the page is untouched. */

.cart-page [data-cart-fragment] {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	align-items: start;
}

.cart-page .cart-drawer__body {
	overflow: visible;
	padding: 0;
}

.cart-page .cart-item {
	padding-block: 24px;
}

.cart-page .cart-item__media {
	width: 100px;
	height: 100px;
}

.cart-page .cart-empty {
	grid-column: 1 / -1;
	padding-block: 100px;
}

.cart-page .cart-drawer__foot {
	position: sticky;
	top: 96px;
	padding: 28px;
	background: var(--mist);
	border-radius: var(--radius);
	border-top: none;
}

.cart-page .cart-drawer__subtotal {
	font-size: 20px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--line);
}