/*
 * The cart.
 *
 * Two columns split by a hairline: the items and the loyalty pitch on the
 * left, the order summary on the right — the reference's layout, and the
 * reason the templates replace WooCommerce's table rather than restyling it.
 *
 * The rows here are `.cart-row`, not `.cart-line`: the header's cart panel
 * already owns `.cart-line` for its own compact rows, and this stylesheet
 * loads on the cart page — where that panel is also in the document. Two
 * components sharing a class name means one of them renders wrong.
 */

.cart-page {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
	gap: 0;
	margin-block-end: var(--section-gap);
}

.cart-page__summary {
	padding-inline-start: 30px;
	border-inline-start: 1px solid var(--color-border);
}

.cart-page__items {
	padding-inline-end: 40px;
}

.cart-page__continue {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-block-end: 22px;
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-size: 22px;
	text-decoration: none;
}

.cart-page__continue:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cart-page__continue-arrow {
	font-size: 20px;
}

/* ─── Lines ──────────────────────────────────────────────────────────────── */

.cart-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	gap: 22px;
	padding-block: 18px;
	border-block-end: 1px solid var(--color-border-light);
}

.cart-row__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--product-card-bg);
}

.cart-row__name {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
}

.cart-row__name a {
	color: var(--color-ink);
	text-decoration: none;
}

.cart-row__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WooCommerce renders item meta as a <dl>; the design prints it as one line. */
.cart-row__meta {
	margin: 0 0 12px;
	color: var(--color-text-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cart-row__meta dl,
.cart-row__meta dt,
.cart-row__meta dd,
.cart-row__meta p {
	display: inline;
	margin: 0;
	font-size: inherit;
}

.cart-row__meta dt {
	font-weight: 600;
}

.cart-row__meta dd::after {
	content: "\00a0\00a0";
}

.cart-row__qty {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cart-row__qty-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * WooCommerce's quantity box. The selector carries `.woocommerce` because its
 * own `.woocommerce .quantity .qty` is (0,2,1) and a shorter rule loses.
 */
.woocommerce .cart-row__qty .quantity {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	float: none;
}

.woocommerce .cart-row__qty .quantity .qty {
	width: 42px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 15px;
	text-align: center;
	/* The steppers are the control; the spinners would be a second one. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .cart-row__qty .quantity .qty::-webkit-outer-spin-button,
.woocommerce .cart-row__qty .quantity .qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

.cart-step {
	width: 26px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.cart-step:hover {
	color: var(--color-ink);
}

.cart-row__money {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	white-space: nowrap;
}

.cart-row__price {
	font-size: 16px;
}

/*
 * WooCommerce's `.woocommerce a.remove` is `color:#a00!important` and a 1em
 * circle of type; the icon inside takes currentColor, so this has to answer
 * with its own !important to get the design's quiet grey bin.
 */
.woocommerce .cart-row__remove,
.woocommerce .cart-row__remove:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 0;
	background: none;
	color: var(--color-text-muted) !important;
	font-size: 0;
	text-decoration: none;
}

.woocommerce .cart-row__remove:hover {
	color: var(--color-ink) !important;
}

.cart-row__remove .icon {
	width: 18px;
	height: 18px;
}

.cart-form__actions {
	display: flex;
	justify-content: flex-end;
	margin-block-start: 18px;
}

/* ─── Loyalty pitch ──────────────────────────────────────────────────────── */

/* The photograph sits in its own column beside the pitch, as the reference
   lays it out; without one the pitch simply centres in the band. */
.cart-promo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	margin-block-start: 34px;
	padding: 20px;
	background: var(--color-surface);
	text-align: center;
}

.cart-promo--figure {
	grid-template-columns: 210px minmax(0, 1fr);
}

.cart-promo__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	filter: grayscale(1);
}

.cart-promo__body {
	padding-block: 10px;
}

.cart-promo__eyebrow {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cart-promo__heading {
	margin: 2px 0 8px;
	font-family: var(--font-script);
	font-size: 38px;
	line-height: 1.1;
	/* The script's ascenders and descenders are long; without this the loop of
	   the S is clipped by the line above. */
	padding-block: 4px;
}

.cart-promo__copy {
	max-width: 60ch;
	margin: 0 auto 6px;
	font-size: 15px;
	line-height: 1.5;
}

.cart-promo__login {
	margin: 0 0 18px;
	font-size: 15px;
}

.cart-promo__login a {
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── Order summary ──────────────────────────────────────────────────────── */

/*
 * The summary's content is inset from the hairline, but the checkout button
 * runs the full width of the column — the reference's arrangement — so the
 * inset lives on an inner wrapper the button sits outside of.
 */
.cart-summary__inner {
	padding-inline: 40px 12px;
}

.cart-summary__title {
	margin: 0 0 26px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
	text-align: center;
}

.cart-estimate {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px 16px;
	margin: 0 0 30px;
}

.cart-estimate__heading {
	grid-column: 1 / -1;
	margin: 0 0 2px;
	font-size: 15px;
}

.cart-estimate__suburb,
.cart-estimate__submit {
	grid-column: 1 / -1;
}

.cart-estimate__submit {
	justify-self: start;
	min-height: 40px;
}

.cart-summary__rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	margin: 0 0 30px;
	font-size: 15px;
}

.cart-summary__label,
.cart-summary__value {
	margin: 0;
}

.cart-summary__value {
	text-align: end;
}

.cart-summary__label--total,
.cart-summary__value--total {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cart-summary__panels {
	margin-block-end: 30px;
	padding-inline: 15px;
	background: var(--color-surface);
}

.cart-extra + .cart-extra {
	border-block-start: 1px solid var(--color-border);
}

.cart-extra__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 17px;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.cart-extra__summary::-webkit-details-marker {
	display: none;
}

/* A plus that loses its upright when the panel is open. */
.cart-extra__sign {
	position: relative;
	flex: none;
	width: 15px;
	height: 15px;
}

.cart-extra__sign::before,
.cart-extra__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 15px;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
}

.cart-extra__sign::after {
	transform: translateY(-50%) rotate(90deg);
	transition: opacity 0.18s ease;
}

[open] > .cart-extra__summary .cart-extra__sign::after {
	opacity: 0;
}

.cart-extra__body {
	padding-block-end: 17px;
}

.cart-coupon,
.cart-giftcard {
	display: grid;
	gap: 10px;
}

.cart-coupon {
	grid-template-columns: minmax(0, 1fr) auto;
}

.cart-giftcard .btn {
	justify-self: start;
}

/*
 * The checkout button. WooCommerce prints it through
 * `woocommerce_proceed_to_checkout` with its own `.checkout-button` classes,
 * whose `.woocommerce .button` rules are (0,2,0) — matched here with the extra
 * class so the design's charcoal slab wins.
 */
.woocommerce .cart-summary__checkout .checkout-button,
.woocommerce .cart-summary__checkout a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 24px;
	border-radius: 0;
	background: var(--color-charcoal);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.11em;
	line-height: 1.2;
	text-transform: uppercase;
}

.woocommerce .cart-summary__checkout .checkout-button:hover {
	background: var(--color-ink);
	color: var(--color-white);
}

.cart-assist {
	margin-block-start: 30px;
}

.cart-assist__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cart-assist__line {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

/* ─── Don't miss out ─────────────────────────────────────────────────────── */

.cart-suggest {
	margin-block-start: 46px;
}

.cart-suggest__title {
	margin: 0 0 24px;
	padding-block-end: 14px;
	border-block-end: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cart-suggest__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px var(--tile-gap);
}

/* ─── Empty ──────────────────────────────────────────────────────────────── */

.cart-empty {
	padding-block: 20px 70px;
	text-align: center;
}

.cart-empty__title {
	margin: 0 0 14px;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
}

.cart-empty__action {
	margin-block-start: 26px;
}

@media (max-width: 899px) {
	.cart-page {
		grid-template-columns: minmax(0, 1fr);
	}

	.cart-page__items {
		padding-inline-end: 0;
	}

	.cart-page__summary {
		margin-block-start: 32px;
		padding-block-start: 32px;
		padding-inline-start: 0;
		border-inline-start: 0;
		border-block-start: 1px solid var(--color-border);
	}

	.cart-row {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 14px;
	}

	/* The price and the bin move under the details rather than squeezing a
	   third column into 320px. */
	.cart-row__money {
		grid-column: 2;
		justify-content: space-between;
	}

	.cart-promo__heading {
		font-size: 32px;
	}
}

/*
 * The bin. WooCommerce's `.woocommerce a.remove` sets `color: var(--wc-red)
 * !important`, and an earlier `.woocommerce .cart-row__remove` rule lost to it
 * on the live page (the bin measured rgb(170, 0, 0)). This selector does not
 * depend on the `.woocommerce` wrapper and outranks it outright: (0,3,1).
 */
.cart-page a.remove.cart-row__remove,
.cart-page a.remove.cart-row__remove:hover {
	background: none !important;
	color: var(--color-text-muted) !important;
}

.cart-page a.remove.cart-row__remove:hover {
	color: var(--color-ink) !important;
}

@media (max-width: 899px) {
	.cart-summary__inner {
		padding-inline: 0;
	}

	.cart-promo--figure {
		grid-template-columns: minmax(0, 1fr);
	}

	.cart-promo__image {
		max-width: 220px;
		margin-inline: auto;
	}

	.cart-suggest__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}