/* ==========================================================================
   First Mate XT - cart page
   Two columns: cart contents left, totals panel right (sticky).
   Cross-sells drop below the cart contents, in the left column.
   ========================================================================== */

/* --- Layout --------------------------------------------------------------- */

/* Guard on the form so the empty-cart view stays single column. */
.woocommerce-cart div.woocommerce:has(> .woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	grid-template-areas:
		"notices notices"
		"cart    totals"
		"cross   totals";
	align-items: start;
	column-gap: var(--xt-sp-xl);
	row-gap: var(--xt-sp-2xl);
}

.woocommerce-cart .woocommerce > .before-cart { grid-area: notices; }
.woocommerce-cart .woocommerce-cart-form { grid-area: cart; margin: 0; }

/* Lets the two collateral children become grid items themselves. */
.woocommerce-cart .cart-collaterals { display: contents; }
.woocommerce-cart .cart-collaterals .cross-sells { grid-area: cross; width: auto; float: none; margin: 0; }
.woocommerce-cart .cart-collaterals .cart_totals { grid-area: totals; width: auto; float: none; margin: 0; }

/* --- Cart table ----------------------------------------------------------- */

.woocommerce-cart table.shop_table.cart {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.woocommerce-cart table.shop_table.cart thead th {
	padding: 0 var(--xt-sp-sm) var(--xt-sp-sm);
	background: transparent;
	border-bottom: var(--xt-bw) solid var(--xt-line);
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--xt-fs-xs);
	font-weight: 700;
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	color: var(--xt-muted);
	text-align: left;
}

.woocommerce-cart table.shop_table.cart thead th.product-price,
.woocommerce-cart table.shop_table.cart thead th.product-subtotal { text-align: right; }
.woocommerce-cart table.shop_table.cart thead th.product-quantity { text-align: center; }

.woocommerce-cart table.shop_table.cart tbody td {
	padding: var(--xt-sp-lg) var(--xt-sp-sm);
	border-top: 0;
	border-bottom: var(--xt-bw) solid var(--xt-line);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
	text-align: right;
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--xt-fs-sm);
	color: var(--xt-text);
}

.woocommerce-cart table.shop_table.cart td.product-subtotal { font-weight: 700; }

.woocommerce-cart table.shop_table.cart td.product-name a {
	font-family: Barlow, sans-serif;
	font-weight: 600;
	font-size: var(--xt-fs-base);
	color: var(--xt-text);
	text-decoration: none;
}

.woocommerce-cart table.shop_table.cart td.product-name a:hover { color: var(--xt-red); }

.woocommerce-cart table.shop_table.cart td.product-thumbnail { width: 96px; }

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
}

/* Remove control */
.woocommerce-cart table.shop_table.cart td.product-remove { width: 40px; }

.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--xt-surface);
	color: var(--xt-muted) !important;
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
	background: var(--xt-surface);
	color: var(--xt-red) !important;
	border-color: var(--xt-red);
}

/* Quantity stepper, matching the product page control. */
.woocommerce-cart table.shop_table.cart td.product-quantity { text-align: center; }

.woocommerce-cart td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	width: auto;
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
	overflow: hidden;
}

.woocommerce-cart td.product-quantity .quantity input.qty {
	order: 2;
	width: 48px;
	min-height: 44px;
	padding: 0;
	text-align: center;
	background: transparent;
	border: 0;
	font-family: Barlow, sans-serif;
	font-weight: 600;
	color: var(--xt-text);
	-moz-appearance: textfield;
}

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

.woocommerce-cart td.product-quantity .quantity .action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-height: 44px;
	cursor: pointer;
	color: var(--xt-text);
	background: transparent;
	border: 0;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.woocommerce-cart td.product-quantity .quantity .action.minus { order: 1; }
.woocommerce-cart td.product-quantity .quantity .action.plus { order: 3; }
.woocommerce-cart td.product-quantity .quantity .action:hover { color: var(--xt-red); background: var(--xt-bg); }
.woocommerce-cart td.product-quantity .quantity .action svg { width: 14px; height: 14px; }

/* --- Coupon / update row -------------------------------------------------- */

.woocommerce-cart table.shop_table.cart td.actions {
	padding: var(--xt-sp-lg) var(--xt-sp-sm);
	border-bottom: 0;
}

.woocommerce-cart table.shop_table.cart td.actions .coupon {
	display: inline-flex;
	align-items: center;
	gap: var(--xt-sp-xs);
	float: none;
}

.woocommerce-cart table.shop_table.cart td.actions .coupon input#coupon_code {
	box-sizing: border-box;
	width: 200px;
	height: var(--xt-h-control);
	padding: 0 var(--xt-sp-md);
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
	font-family: Barlow, sans-serif;
	font-size: var(--xt-fs-sm);
	color: var(--xt-text);
}

/* --- Totals panel --------------------------------------------------------- */

.woocommerce-cart .cart_totals {
	position: sticky;
	top: var(--xt-sp-lg);
	padding: var(--xt-sp-xl);
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 var(--xt-sp-md);
	padding-bottom: var(--xt-sp-sm);
	border-bottom: var(--xt-bw) solid var(--xt-line);
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: var(--xt-fs-xl);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--xt-text);
}

.woocommerce-cart .cart_totals table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: var(--xt-sp-sm) 0;
	border: 0;
	border-bottom: var(--xt-bw) solid var(--xt-line);
	vertical-align: top;
	background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th {
	width: 40%;
	font-family: Barlow, sans-serif;
	font-weight: 700;
	font-size: var(--xt-fs-sm);
	color: var(--xt-text);
	text-align: left;
}

.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--xt-fs-sm);
	color: var(--xt-text);
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
	border-bottom: 0;
	padding-top: var(--xt-sp-md);
	font-size: var(--xt-fs-lg);
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total td { font-weight: 700; }

/* Shipping choices read as a list, not a table cell. */
.woocommerce-cart .cart_totals #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.woocommerce-cart .cart_totals #shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--xt-sp-xs);
	margin: 0 0 var(--xt-sp-xs);
	font-family: Barlow, sans-serif;
	font-size: var(--xt-fs-sm);
}

.woocommerce-cart .cart_totals #shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-cart .cart_totals #shipping_method input[type="radio"] { width: auto; min-height: 0; margin: 0; accent-color: var(--xt-red); }

.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
	font-family: Barlow, sans-serif;
	font-size: var(--xt-fs-sm);
	color: var(--xt-muted);
}

/* --- Cross-sells ---------------------------------------------------------- */

.woocommerce-cart .cross-sells > h2 {
	margin: 0 0 var(--xt-sp-md);
	padding-bottom: var(--xt-sp-sm);
	border-bottom: var(--xt-bw) solid var(--xt-line);
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: var(--xt-fs-xl);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--xt-text);
}

.woocommerce-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--xt-sp-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after { display: none; }

.woocommerce-cart .cross-sells ul.products li.product {
	width: auto;
	margin: 0;
	padding: var(--xt-sp-md);
	float: none;
	background: var(--xt-surface);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
}

.woocommerce-cart .cross-sells ul.products li.product img {
	width: 100%;
	height: auto;
	margin: 0 0 var(--xt-sp-sm);
	border-radius: var(--xt-r-sm);
}

.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 var(--xt-sp-xs);
	padding: 0;
	font-family: Barlow, sans-serif;
	font-weight: 600;
	font-size: var(--xt-fs-sm);
	line-height: 1.3;
	color: var(--xt-text);
}

.woocommerce-cart .cross-sells ul.products li.product .price {
	display: block;
	margin: 0 0 var(--xt-sp-sm);
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--xt-fs-sm);
	color: var(--xt-text);
}

.woocommerce-cart .cross-sells ul.products li.product a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 var(--xt-sp-md);
	background: var(--xt-surface);
	color: var(--xt-text);
	border: var(--xt-bw) solid var(--xt-line);
	border-radius: var(--xt-r-sm);
	font-family: Barlow, sans-serif;
	font-weight: 700;
	font-size: var(--xt-fs-xs);
	letter-spacing: var(--xt-ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.woocommerce-cart .cross-sells ul.products li.product a.button:hover {
	color: var(--xt-red);
	border-color: var(--xt-red);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.woocommerce-cart div.woocommerce:has(> .woocommerce-cart-form) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"notices"
			"cart"
			"totals"
			"cross";
		row-gap: var(--xt-sp-xl);
	}

	.woocommerce-cart .cart_totals { position: static; }

	.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.woocommerce-cart table.shop_table.cart thead { display: none; }

	.woocommerce-cart table.shop_table.cart tbody tr.cart_item {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr) 32px;
		grid-template-areas:
			"thumb name   remove"
			"thumb price  price"
			"qty   qty    subtotal";
		align-items: center;
		column-gap: var(--xt-sp-sm);
		row-gap: var(--xt-sp-xs);
		padding: var(--xt-sp-md) 0;
		border-bottom: var(--xt-bw) solid var(--xt-line);
	}

	.woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
		padding: 0;
		border: 0;
	}

	.woocommerce-cart table.shop_table.cart tbody td.product-thumbnail { grid-area: thumb; }
	.woocommerce-cart table.shop_table.cart tbody td.product-name { grid-area: name; }
	.woocommerce-cart table.shop_table.cart tbody td.product-remove { grid-area: remove; }
	.woocommerce-cart table.shop_table.cart tbody td.product-price { grid-area: price; text-align: left; }
	.woocommerce-cart table.shop_table.cart tbody td.product-quantity { grid-area: qty; text-align: left; }
	.woocommerce-cart table.shop_table.cart tbody td.product-subtotal { grid-area: subtotal; }

	.woocommerce-cart table.shop_table.cart td.actions .coupon { display: flex; width: 100%; }
	.woocommerce-cart table.shop_table.cart td.actions .coupon input#coupon_code { width: 100%; }

	.woocommerce-cart .cross-sells ul.products { grid-template-columns: minmax(0, 1fr); }
}


/* --- BNPL message ---------------------------------------------------------- */
/* WooPayments sizes this box with `height: var(--wc-bnpl-height)`, but its script
   only defines that variable on the block cart. On the classic cart the property
   is invalid, the box collapses, and the Stripe iframe inside overlaps the
   checkout button. Stripe's own wrapper also carries a -4px block margin that
   resists overriding, so the 8px it swallows is given back as padding here. */
.woocommerce-cart .cart_totals #payment-method-message,
.woocommerce-cart .wc-proceed-to-checkout > #payment-method-message {
	height: auto !important;
	min-height: 0;
	margin: 0 !important;
	padding: 4px 0 !important;
	overflow: visible;
}

.woocommerce-cart .cart_totals #payment-method-message iframe {
	display: block !important;
	margin: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
}