/* components/cart: a plain table with the amounts aligned at the end, the total in bold above a rule. */
@layer components {
	.dv-cart {
		margin-block: var(--space-3);
		max-inline-size: 100%;
		overflow-x: auto;
	}

	.dv-cart-table {
		border-collapse: collapse;
		min-inline-size: 60%;
	}

	.dv-cart-table caption {
		padding-block: var(--space-2);
		font-weight: bold;
		text-align: start;
	}

	.dv-cart-table th,
	.dv-cart-table td {
		padding: var(--space-1) var(--space-2);
		text-align: start;
		border-block-end: 1px solid var(--color-border);
	}

	.dv-cart-table .dv-cart-amount {
		text-align: end;
		white-space: nowrap;
	}

	.dv-cart-table .dv-cart-empty td {
		font-style: italic;
	}

	.dv-cart-table .dv-cart-total th,
	.dv-cart-table .dv-cart-total td {
		font-weight: bold;
		border-block-start: 2px solid var(--color-text);
	}
}