/**
 * Cart page: woocommerce/cart/cart.php and cart-empty.php (Cart 2186:932,
 * empty state 2160:5473). No mobile frame: homepage mobile patterns
 * (stacked, 20px gutters and box padding, full-width primary button).
 * The title card is shared with the checkout.
 */

body.xat-cart {
	background: var(--color-white);
}

/* Breadcrumb (2186:1058): 20px above, 24px under, as on the product page. */
.cart-page > .breadcrumb {
	padding-top: 20px;
	padding-bottom: var(--space-md);
}

/* Notices (not designed): the mini cart style. Hidden while WooCommerce's
 * wrapper is empty. */
.cart-notices:empty,
.cart-notices:has(> .woocommerce-notices-wrapper:empty:only-child) {
	display: none;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
	margin: 0 0 var(--space-xs);
	padding: 12px 16px;
	border: 1px solid var(--color-orange);
	border-radius: var(--radius-md);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
	list-style: none;
}

.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
	border-color: var(--color-line);
}

.cart-notices .woocommerce-error::before,
.cart-notices .woocommerce-message::before,
.cart-notices .woocommerce-info::before {
	content: none;
}

.cart-notices .woocommerce-error li + li {
	margin-top: 4px;
}

/* Layout: stacked below 1280, then the 808 + 32 + 440 columns of the frame. */
.cart-page__form {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
	padding-bottom: var(--section-space);
}

.cart-page__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

@media (min-width: 1280px) {
	.cart-page__form {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 32px;
	}
}

/* Progress box (2186:1390): cream, radius 20, 24px / 28px padding. */
.cart-progress {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--space-md) 20px;
	border-radius: 20px;
	background: var(--color-cream);
	color: var(--color-ink);
}

.cart-progress__shipping {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.cart-progress__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--color-black);
	color: var(--color-white);
}

.cart-progress__bar {
	overflow: hidden;
	height: 10px;
	border-radius: var(--radius-pill);
	background: var(--color-line);
}

.cart-progress__fill {
	display: block;
	height: 100%;
	border-radius: var(--radius-pill);
	background: linear-gradient(to right, var(--color-green), var(--color-yellow), var(--color-orange));
}

.cart-progress__gift {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.cart-progress__gift-icon {
	flex: none;
}

@media (min-width: 768px) {
	.cart-progress {
		padding: var(--space-md) 28px;
	}
}

/* Lines (2186:1402-1462). */
.cart-lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.cart-lines__head {
	display: none;
}

.cart-lines__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: photo and info side by side, then the stepper and the total in
 * their own row across the line, so the 130px stepper never gets squeezed
 * by a long total. */
.cart-line {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	grid-template-areas:
		"photo info info"
		"qty qty total";
	gap: 12px 16px;
	align-items: center;
	padding: var(--space-sm) 20px var(--space-sm) var(--space-sm);
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

.cart-line__photo {
	grid-area: photo;
	align-self: start;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 10px;
	background: var(--color-photo);
}

.cart-line__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-line__info {
	display: flex;
	grid-area: info;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.cart-line__name {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
	overflow-wrap: break-word;
}

.cart-line__name a {
	color: inherit;
	text-decoration: none;
}

.cart-line__name a:hover {
	color: var(--color-orange);
}

.cart-line__meta {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

.cart-line__meta--gift {
	color: var(--color-orange);
	font-weight: var(--weight-semibold);
}

/* Label/S muted, underlined; the tap area grows to 44px without moving it. */
.cart-line__remove {
	position: relative;
	color: var(--color-muted);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
	text-decoration: underline;
}

.cart-line__remove::after {
	position: absolute;
	inset: -15px -8px;
	content: "";
}

.cart-line__remove:hover {
	color: var(--color-orange);
}

.cart-line__qty {
	grid-area: qty;
	min-width: 0;
}

.qty--cart {
	width: max-content;
}

.cart-line__total {
	grid-area: total;
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h4);
	line-height: var(--leading-h4);
	text-align: right;
	white-space: nowrap;
}

.cart-line__fixed-qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

/* Stepper (2186:1417): cream pill with a line border, 6px padding, white
 * 36px round − and + buttons, the number between them. The buttons' tap
 * area grows to 44px. */
.qty--cart {
	gap: 4px;
	height: auto;
	padding: 6px;
	background: var(--color-cream);
}

.qty--cart .qty__step {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	background: var(--color-white);
}

.qty--cart .qty__step::after {
	position: absolute;
	inset: -4px;
	content: "";
}

.qty--cart .qty__step:disabled {
	background: var(--color-white);
}

.qty--cart .qty__input {
	flex: none;
	width: 36px;
	height: 36px;
}

.cart-line.is-busy {
	opacity: 0.6;
}

@media (min-width: 768px) {
	.cart-lines__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 134px 130px;
		margin: 0;
		padding: 12px var(--space-md) 0;
		color: var(--color-muted);
		font-size: var(--text-label-s);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-label-s);
		line-height: var(--leading-label-s);
	}

	.cart-lines__head span:nth-child(2) {
		text-align: center;
	}

	.cart-lines__head span:nth-child(3) {
		text-align: right;
	}

	/* 2186:1406: 16px padding, 24px on the right, 20px gaps; photo 112,
	 * stepper 130, total 110. */
	.cart-line {
		grid-template-columns: 112px minmax(0, 1fr) 130px 110px;
		grid-template-areas: "photo info qty total";
		gap: 20px;
		padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
	}

	.cart-line__photo {
		align-self: center;
	}

	.cart-line__qty {
		display: flex;
		justify-content: center;
	}
}

/* Continue shopping (2186:1463) and the update button for visitors without
 * JavaScript (cart.js hides it). */
.cart-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding-top: var(--space-xs);
}

.cart-page__update {
	min-height: 44px;
	padding: 0 var(--space-sm);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	font: inherit;
	font-size: var(--text-body-s);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

.cart-page__update[hidden] {
	display: none;
}

/* Order summary (2186:1468): white, line border, radius 30, 32px padding,
 * 16px between the parts. Sticky from 1280 ("Sticky on scroll"). */
.cart-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
	padding: var(--space-md) 20px;
	border: 1px solid var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
}

@media (min-width: 768px) {
	.cart-summary {
		padding: 32px;
		border-radius: 30px;
	}
}

@media (min-width: 1280px) {
	.cart-summary {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-stuck-height, 88px) + var(--space-md));
	}
}

.cart-summary__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.cart-summary__divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--color-line);
}

/* Summary lines (2186:1470): Body/M muted label, Label/M value. */
.summary-lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
}

.summary-lines__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
}

.summary-lines dt {
	color: var(--color-muted);
	font-size: var(--text-body-m);
	line-height: var(--leading-body-m);
}

.summary-lines dd {
	margin: 0;
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
	text-align: right;
	white-space: nowrap;
}

.summary-lines .summary-lines__saving {
	color: var(--color-green);
}

.summary-lines .summary-lines__gift {
	color: var(--color-orange);
}

.summary-lines__remove {
	position: relative;
	margin-left: 6px;
	color: var(--color-muted);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	text-decoration: underline;
}

.summary-lines__remove::after {
	position: absolute;
	inset: -15px -8px;
	content: "";
}

.summary-lines__remove:hover {
	color: var(--color-orange);
}

/* Discount code (2186:1483). */
.coupon {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.coupon__label {
	color: var(--color-ink);
	font-size: var(--text-label-m);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-label-m);
}

.coupon__row {
	display: flex;
	gap: var(--space-xs);
}

.coupon__input {
	flex: 1;
	box-sizing: border-box;
	min-width: 0;
	height: var(--button-height);
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-field);
	line-height: var(--leading-body-m);
	appearance: none;
}

.coupon__input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.coupon__input:hover {
	border-color: var(--color-muted);
}

.coupon__input:focus {
	border-color: var(--color-ink);
}

.coupon__apply {
	flex: none;
}

/* Total (2186:1493): "Total" in Heading/H3, the amount in Heading/H2. */
.cart-summary__total {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 var(--space-sm);
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
}

.cart-summary__total-label {
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-h3);
	line-height: var(--leading-h3);
}

.cart-summary__total-value {
	font-size: var(--text-h2);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

.cart-summary__tax {
	margin: 0;
	color: var(--color-muted);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
}

/* 2186:1497: 56px tall. */
.cart-summary__checkout {
	min-height: 56px;
}

/* Payment chips (2186:1501): cream pills, Label/S. */
.cart-summary__methods {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-summary__methods li {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-label-s);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label-s);
	line-height: var(--leading-label-s);
}

/* Trust lines (2186:1508): cream box, Body/S, green check marks. */
.cart-summary__trust {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: var(--space-sm) 20px;
	border-radius: var(--radius-md);
	background: var(--color-cream);
	color: var(--color-ink);
	font-size: var(--text-body-s);
	line-height: var(--leading-body-s);
	list-style: none;
}

.cart-summary__check {
	color: var(--color-green);
}

/* You might also like (2186:1512): 120px under the cart (the form's bottom
 * space), heading, cards 32px below, 120px to the footer. */
.related--cart {
	padding-top: 0;
}

@media (min-width: 1024px) {
	.related--cart .related__list {
		margin-top: 32px;
	}
}

/* Empty cart (2160:5473): white box, 1.5px dashed line border, radius 30,
 * 72px padding; the mascot (394 x 272, top of the figure) fades into the
 * white; the message in Heading/H2; the dark button. */
.cart-page__empty {
	padding-bottom: var(--section-space);
}

.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 48px 20px;
	border: 1.5px dashed var(--color-line);
	border-radius: 20px;
	background: var(--color-white);
	text-align: center;
}

.cart-empty__mascot {
	display: block;
	width: min(394px, 100%);
	height: auto;
	aspect-ratio: 394 / 272;
	object-fit: cover;
	object-position: top;
	mask-image: linear-gradient(to bottom, black 74.265%, transparent);
}

.cart-empty__title {
	margin: 0;
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-h2);
	line-height: var(--leading-h2);
}

@media (min-width: 768px) {
	.cart-empty {
		padding: 72px var(--space-lg);
		border-radius: 30px;
	}
}