/* Cart, checkout, order received, tracking and account. */

/* Cart ----------------------------------------------------------------------- */
.cart,
.checkout {
	display: grid;
	gap: var(--space-6);
	padding-block: var(--space-6) var(--space-12);
}
@media (min-width: 1024px) {
	.cart,
	.checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: var(--gutter); padding-block: var(--space-8) var(--space-16); }
}

.cart-list { border-top: var(--border); list-style: none; }
.cart-item {
	display: grid;
	grid-template-columns: var(--space-24) minmax(0, 1fr);
	grid-template-areas:
		"image info"
		"qty total";
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding-block: var(--space-4);
	border-bottom: var(--border);
}
@media (min-width: 768px) {
	.cart-item {
		grid-template-columns: var(--space-24) minmax(0, 1fr) auto auto;
		grid-template-areas: "image info qty total";
		gap: var(--space-4);
	}
}
.cart-item__image { grid-area: image; width: var(--space-24); height: var(--space-24); border-radius: var(--r-card); background: var(--color-fill); }
.cart-item__info { grid-area: info; display: grid; gap: var(--space-1); min-width: 0; }
.cart-item__title {
	display: inline-flex;
	align-items: center;
	/* 44px target without moving the line: the extra height is pulled back out */
	min-height: var(--tap-min);
	margin-block: calc((var(--tap-min) - 1lh) / -2);
	color: var(--color-text);
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.cart-item__title:hover { text-decoration: underline; }
.cart-item__specs,
.cart-item__unit { color: var(--color-text-muted); font-size: var(--small); font-variant-numeric: tabular-nums; }
.cart-item__qty { grid-area: qty; }
.cart-item__total {
	grid-area: total;
	justify-self: end;
	font-family: var(--stack-display);
	font-size: var(--body-lg);
	font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
	.cart-item__total { min-width: calc(var(--space-24) + var(--space-4)); text-align: right; }
}
.cart-item__remove { justify-self: start; margin-top: var(--space-1); padding-inline: var(--space-3); font-size: var(--small); }
/* Quantities save themselves when JS runs (product.js); the button is the no-JS path */
@media (scripting: enabled) { [data-autoupdate] .cart__update { display: none; } }
.cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

/* Checkout ----------------------------------------------------------------- */
.checkout__form { display: grid; gap: var(--space-6); }
.checkout__group {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
	min-width: 0;
}
.checkout__legend {
	float: left;
	width: 100%;
	padding: 0;
	font-family: var(--stack-display);
	font-size: var(--h4-m);
	font-weight: var(--fw-medium);
	line-height: var(--lh-h4);
}
.checkout__legend + * { clear: both; }
@media (min-width: 768px) {
	.checkout__legend { font-size: var(--h4); }
}
.checkout__terms { color: var(--color-text-muted); font-size: var(--small); text-align: center; }

/* Order received ------------------------------------------------------------ */
.order-received { display: grid; align-content: start; gap: var(--space-6); }
.order-received__block {
	display: grid;
	gap: var(--space-6);
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
}
.order-received__title { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
.order-received__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
@media (min-width: 768px) {
	.order-received__title { font-size: var(--h4); }
}
/* Timelines on light cards: four stages across only when there is room */
.order-received .timeline,
.track-result .timeline { margin-top: 0; }
@media (min-width: 768px) and (max-width: 1279px) {
	.order-received .timeline { grid-template-columns: 1fr; gap: var(--space-6); }
	.order-received .timeline::before,
	.order-received .timeline::after {
		top: calc(var(--node) / 2);
		bottom: calc(var(--node) / 2);
		right: auto;
		left: calc(var(--node) / 2 - var(--rule-accent) / 2);
		width: var(--rule-accent);
		height: auto;
	}
	.order-received .timeline::after { transform-origin: top; transform: scaleY(calc(var(--progress) / (var(--stages) - 1))); }
	.order-received .timeline__stage { padding-top: 0; padding-left: calc(var(--node) + var(--space-4)); }
}

/* Tracking and account ------------------------------------------------------ */
.narrow > .form-card { margin-block: var(--space-6); }
.track-result {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--r-card);
	background: var(--color-surface);
}
.track-result:focus-visible { outline-offset: var(--focus-offset); }
.track-result__title { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
.track-result__meta { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.account {
	display: grid;
	gap: var(--space-6);
	padding-block: var(--space-6) var(--space-12);
}
@media (min-width: 1024px) {
	.account { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; gap: var(--gutter); padding-block: var(--space-8) var(--space-16); }
}
.account__aside { display: grid; gap: var(--space-3); padding: var(--space-6) 0; }
.account__title { font-size: var(--h4-m); font-weight: var(--fw-medium); line-height: var(--lh-h4); }
.account__text { max-width: var(--measure); color: var(--color-text-muted); }
.account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
@media (min-width: 768px) {
	.account__title,
	.track-result__title { font-size: var(--h4); }
}