/*
 * Cart lines and summary (design/artboards/cart-drawer.html; tangens-components.md, Cart drawer):
 * shared by the cart drawer and the cart page. One density at both widths, as the artboard draws it.
 */

:where(.cart-lines, .cart-summary ul, .cart-empty ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-lines,
.cart-summary,
.cart-empty {
	font-size: 0.9375rem;
	line-height: normal;
}

.cart-item {
	display: flex;
	gap: 1.25rem;
	padding-block: 1.5rem;
	border-block-end: var(--hairline) solid var(--line);
}

.cart-item__thumb {
	flex: 0 0 4.75rem;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
}

.cart-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cart-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
}

.cart-item__top,
.cart-item__bottom {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.cart-item__top {
	align-items: flex-start;
}

.cart-item__bottom {
	align-items: center;
}

.cart-item__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cart-item__name {
	font-weight: 500;
}

.cart-item__colour {
	color: var(--graphite);
}

.cart-item__remove {
	flex: none;
	color: var(--graphite);
	font-size: 0.875rem;
	text-decoration: underline;
	text-decoration-thickness: var(--hairline);
	text-underline-offset: 4px;
}

/* Quantity stepper (components, Controls): 1px stone at the radius, 34px buttons. */
.stepper {
	display: flex;
	align-items: center;
	border: var(--hairline) solid var(--stone);
	border-radius: var(--radius);
}

.stepper__button {
	width: 2.125rem;
	height: 2.125rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.stepper__button:disabled {
	color: var(--stone);
	cursor: default;
}

.stepper__value {
	min-width: 1.625rem;
	text-align: center;
}

/* ——— Summary: trust list, sums, VAT line, Checkout, payment marks ——— */
.cart-summary {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cart-summary__trust {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	padding-block-end: 1.25rem;
	border-block-end: var(--hairline) solid var(--line);
	color: var(--graphite);
}

.cart-summary__sums {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
}

.cart-summary__row {
	display: flex;
	justify-content: space-between;
	color: var(--graphite);
}

.cart-summary__row dd {
	margin: 0;
}

.cart-summary__row--total {
	color: var(--ink);
	font-size: 1.0625rem;
	font-weight: 500;
}

/* "Free" is a word as well as a colour (CLAUDE.md, state is structural). */
.cart-summary__row .is-free {
	color: var(--success);
	font-weight: 500;
}

.cart-summary__vat {
	margin-block-start: -0.75rem;
	color: var(--stone);
	font-size: 0.875rem;
}

.cart-summary__checkout {
	width: 100%;
	/* 20 padding and 14px type at both widths: the cart keeps one density (the button steps to 18
	   and 13px elsewhere below 768). */
	padding: 1.25rem;
	font-size: 0.875rem;
}

.cart-summary__payment {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.125rem;
}

.cart-summary__mark {
	width: auto;
}

.cart-summary__mark--visa { height: 0.8125rem; }
.cart-summary__mark--mastercard { height: 1.25rem; }
.cart-summary__mark--apple-pay,
.cart-summary__mark--google-pay { height: 1.125rem; }
.cart-summary__mark--klarna { height: 1.125rem; }

/* ——— Empty ——— */
.cart-empty {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 1rem;
}

.cart-empty__links a {
	text-decoration: underline;
	text-decoration-thickness: var(--hairline);
	text-underline-offset: 4px;
}

.cart-empty__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}