body#at-theme {
/*
 * Cart page.
 *
 * Layout inspired by Travis' bb-theme-child cart.php:
 *   .at-cart__form    flex: actions (30%) | main (70%)
 *   .at-cart__collaterals  full-width totals below
 */

.at-cart {
	padding-block: var(--at-space-6) var(--at-space-8);
}

/* Card headings — h2 inherits WarText from base.css. */
.at-cart__heading,
.at-cart__main .cart_totals h2 {
	font-size: var(--at-fs-display-l);
	color: var(--at-headline);
	margin: 0 0 var(--at-space-4);
	padding-bottom: var(--at-space-3);
	border-bottom: 1px solid var(--at-divider);
}
.at-cart__sub {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-body-sm);
	font-weight: 500;
	color: var(--at-body);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	margin: var(--at-space-5) 0 var(--at-space-2);
}

/* === Layout grid ===
 * Two columns; the form wraps actions+main with display:contents so the
 * grid parent places each panel directly. Cart Details + Cart Totals live
 * inside the single .at-cart__main card on the right (col 2).
 */
.at-cart__layout {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: var(--at-space-6);
	align-items: start;
}
.at-cart__form {
	display: contents;
	margin: 0;
}
.at-cart__actions { grid-column: 1; }
.at-cart__main    { grid-column: 2; }

/* === Actions column (left) — no card chrome, like the checkout nav. === */
.at-cart__actions {
	background-color: transparent;
	border: 0;
	padding: 0;
	margin-top: 24px; /* aligns with the "Cart details" heading on the right (desktop only) */
}

.at-cart__update,
.at-cart__coupon button.at-btn {
	width: 100%;
}

/* .at-btn — global button component lives in base.css. */

/* Coupon */
.at-cart__coupon {
	display: flex;
	flex-direction: column;
	gap: var(--at-space-2);
}
.at-cart__coupon input[type="text"],
.at-cart__coupon input#coupon_code {
	height: 40px;
	padding: 0 var(--at-space-3);
	background-color: var(--at-canvas);
	color: var(--at-headline);
	border: 1px solid var(--at-divider);
	border-radius: var(--at-radius-xs);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
}
.at-cart__coupon input[type="text"]:focus {
	border-color: var(--at-highlight);
	outline: none;
}

/* Wallet block (LWS virtual wallet shortcode) */
.at-cart__wallet {
	margin-top: var(--at-space-3);
	padding: var(--at-space-4);
	background-color: var(--at-canvas);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-xs);
	font-family: var(--at-font-body);
	font-size: var(--at-fs-body-sm);
	color: var(--at-body);
}

/* === Main column (right) — single unified card holding Cart details +
 * the products table + Cart totals + the proceed-to-checkout button. === */
.at-cart__main {
	background-color: var(--at-surface);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-5);
}
/* Inner separator before the Cart Totals block (rendered by WC). */
.at-cart__main .cart-collaterals {
	margin-top: var(--at-space-5);
	border-top: 1px solid var(--at-divider);
	padding-top: var(--at-space-5);
}

/* Items table */
.shop_table.cart {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 0;
}
.shop_table.cart thead th {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	color: var(--at-muted);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	text-align: left;
	padding: var(--at-space-3) var(--at-space-3);
	border-bottom: 1px solid var(--at-divider);
	font-weight: normal;
	background-color: transparent;
}
.shop_table.cart tbody td {
	padding: var(--at-space-4) var(--at-space-3);
	border-bottom: 1px solid var(--at-hairline);
	color: var(--at-body);
	vertical-align: middle;
}
.shop_table.cart tbody tr:last-child td {
	border-bottom: 0;
}

.shop_table.cart .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background-color: var(--at-canvas);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-xs);
	padding: var(--at-space-2);
}

.shop_table.cart .product-name a {
	color: var(--at-headline);
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-body-sm);
	letter-spacing: var(--at-tracking-tight);
}
.shop_table.cart .product-name a:hover { color: var(--at-highlight); }

.shop_table.cart .product-price,
.shop_table.cart .product-subtotal {
	font-family: var(--at-font-body);
	color: var(--at-headline);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.shop_table.cart .product-subtotal {
	font-weight: 600;
	color: var(--at-highlight);
}

.shop_table.cart .product-quantity input.qty {
	width: 64px;
	height: 36px;
	padding: var(--at-space-1) var(--at-space-2);
	background-color: transparent;
	color: var(--at-headline);
	border: 1px solid var(--at-divider);
	border-radius: var(--at-radius-xs);
	font-family: var(--at-font-body);
	text-align: center;
}
.shop_table.cart .product-quantity input.qty:focus {
	border-color: var(--at-highlight);
	outline: none;
}

/* Remove × */
.shop_table.cart .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--at-divider);
	border-radius: 50%;
	color: var(--at-muted);
	font-size: 1.2rem;
	background-color: transparent;
	transition: all var(--at-trans-fast);
}
.shop_table.cart .product-remove a.remove:hover {
	color: var(--at-highlight);
	border-color: var(--at-highlight);
	background-color: transparent;
}

/* WC's .cart-collaterals wrapper sits inside .at-cart__main now — no chrome of its own. */
.at-cart__main .cart-collaterals {
	background: transparent;
	border: 0;
	padding: 0;
}
.at-cart__collaterals .cart_totals h2 {
	display: none; /* duplicate of our heading */
}

.cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 0;
}
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: var(--at-space-3) 0;
	border-top: 1px solid var(--at-hairline);
	background: transparent;
}
.cart_totals table.shop_table tr:first-child th,
.cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}
.cart_totals table.shop_table th {
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	color: var(--at-muted);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
	text-align: left;
	font-weight: normal;
}
.cart_totals table.shop_table td {
	font-family: var(--at-font-body);
	color: var(--at-headline);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Order total — Plex Sans 600 (WarText clips $ at small sizes) */
.cart_totals .order-total td,
.cart_totals .order-total .amount {
	font-family: var(--at-font-body);
	font-weight: 600;
	font-size: var(--at-fs-subhead);
	color: var(--at-highlight);
}

.cart_totals .shipping-calculator-button,
.cart_totals .shipping-calculator-form a {
	color: var(--at-muted);
	font-family: var(--at-font-mono);
	font-size: var(--at-fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--at-tracking-eyebrow);
}
.cart_totals .shipping-calculator-button:hover { color: var(--at-highlight); }

/* Checkout pill — prefix with to beat WC/Stripe/WP-blocks
 * presets (often inject a purple accent via custom-properties or .button.alt). */
.cart_totals .wc-proceed-to-checkout {
	margin-top: var(--at-space-5);
	padding: 0;
}
.cart_totals a.checkout-button,
.cart_totals a.checkout-button.button,
.cart_totals a.checkout-button.button.alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	background-color: var(--at-highlight);
	background-image: none;
	color: var(--at-canvas);
	border: 2px solid var(--at-highlight);
	border-radius: 0;
	font-family: var(--at-font-body);
	font-weight: 700;
	font-size: var(--at-fs-body);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background-color var(--at-trans-fast), color var(--at-trans-fast);
}
.cart_totals a.checkout-button:hover {
	background-color: transparent;
	color: var(--at-highlight);
}

/* Empty cart */
.cart-empty,
.wc-empty-cart-message {
	background-color: var(--at-surface);
	border: 1px solid var(--at-hairline);
	border-radius: var(--at-radius-sm);
	padding: var(--at-space-6);
	text-align: center;
	color: var(--at-body);
	margin: 0 var(--at-space-5);
}
.return-to-shop {
	text-align: center;
	margin-block: var(--at-space-5);
}
.return-to-shop .button {
	display: inline-flex;
	padding: var(--at-space-3) var(--at-space-5);
	background-color: transparent;
	color: var(--at-body);
	border: 1px solid var(--at-divider);
	border-radius: var(--at-radius-xs);
	font-family: var(--at-font-body);
	font-weight: 700;
	font-size: var(--at-fs-body-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: all var(--at-trans-fast);
}
.return-to-shop .button:hover {
	color: var(--at-highlight);
	border-color: var(--at-highlight);
}

/* Notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
	background-color: var(--at-surface);
	border: 1px solid var(--at-divider);
	border-radius: var(--at-radius-xs);
	padding: var(--at-space-3) var(--at-space-5);
	color: var(--at-body);
	margin: 0 0 var(--at-space-4);
}

@media (max-width: 980px) {
	.at-cart__layout {
		grid-template-columns: 1fr;
	}
	.at-cart__actions,
	.at-cart__main {
		grid-column: 1;
	}
	.at-cart__actions {
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	.shop_table.cart thead { display: none; }
	.shop_table.cart tbody td {
		display: block;
		text-align: right;
		padding: var(--at-space-2) 0;
		border-bottom: 0;
	}
	.shop_table.cart tbody td::before {
		content: attr(data-title);
		float: left;
		font-family: var(--at-font-mono);
		font-size: var(--at-fs-eyebrow);
		color: var(--at-muted);
		text-transform: uppercase;
		letter-spacing: var(--at-tracking-eyebrow);
	}
	.shop_table.cart tbody td.product-remove::before,
	.shop_table.cart tbody td.product-thumbnail::before { display: none; }
	.shop_table.cart tbody tr {
		border-bottom: 1px solid var(--at-hairline);
		display: block;
		padding-block: var(--at-space-3);
	}
}
}