/* ITEMPLS — cart, checkout, and the single-mode conflict surface.
 *
 * The cart carries one piece of information no generic cart has: the mode
 * it is committed to. It is stated at the top, so a customer who is about
 * to be refused an item understands why before the refusal, not after.
 */

.it-cartpage, .woocommerce-cart, .woocommerce-checkout { padding-block: var(--it-s5) var(--it-s8); }

/* The cart's committed mode, stated once and clearly. */
.it-cartmode {
	display: flex; align-items: center; gap: var(--it-s3);
	padding: var(--it-s4);
	border: 1px solid var(--it-line);
	border-left-width: 3px;
	border-radius: var(--it-r);
	background: var(--it-surface);
	margin-bottom: var(--it-s5);
}
.it-cartmode--ladder { border-left-color: var(--it-ladder); }
.it-cartmode--nonladder { border-left-color: var(--it-nonladder); }
.it-cartmode__t { font-weight: 650; }
.it-cartmode__d { color: var(--it-text-muted); font-size: var(--it-fs-sm); }

/* The conflict message. It has to explain and offer a way forward, not
 * just say no -- a refusal with no next step reads as a broken shop. */
.it-conflict {
	border: 1px solid var(--it-danger);
	background: var(--it-danger-soft);
	border-radius: var(--it-r);
	padding: var(--it-s4) var(--it-s5);
	display: grid; gap: var(--it-s3);
}
.it-conflict__t { font-weight: 700; color: var(--it-text); }
.it-conflict__actions { display: flex; flex-wrap: wrap; gap: var(--it-s2); }

/* ----------------------------------------------------------- cart table */
.woocommerce table.shop_table {
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	color: var(--it-text);
}
.woocommerce table.shop_table th {
	background: var(--it-surface-2);
	color: var(--it-text-muted);
	font-size: var(--it-fs-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--it-line);
	padding: var(--it-s3) var(--it-s4);
}
.woocommerce table.shop_table td {
	border-top: 1px solid var(--it-line);
	padding: var(--it-s4);
	vertical-align: middle;
}
.woocommerce table.shop_table img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--it-r-sm); background: var(--it-surface-2); }

/* A cart line must state its mode; the product name no longer carries it. */
.it-line-mode { display: inline-flex; margin-top: 4px; }

/* On a phone a 6-column cart table cannot fit. Collapse it to rows. */
@media (max-width: 720px) {
	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td { display: block; width: 100%; }
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tr {
		border-top: 1px solid var(--it-line);
		padding: var(--it-s3) 0;
	}
	.woocommerce table.shop_table td {
		border: 0;
		display: flex; justify-content: space-between; gap: var(--it-s3);
		padding: 6px var(--it-s4);
	}
	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		color: var(--it-text-muted);
		font-size: var(--it-fs-sm);
		font-weight: 600;
	}
	.woocommerce table.shop_table td.product-remove::before,
	.woocommerce table.shop_table td.product-thumbnail::before { content: none; }
}

/* ------------------------------------------------------------- totals */
.cart_totals, .woocommerce-checkout-review-order {
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	padding: var(--it-s5);
}
.cart_totals h2, .woocommerce-checkout-review-order h3 { font-size: var(--it-fs-lg); }

/* No gateway alters the product total; the checkout should not imply it can. */
.it-nofees {
	display: flex; gap: 8px; align-items: center;
	color: var(--it-text-muted); font-size: var(--it-fs-sm);
	margin-top: var(--it-s3);
}

/* --------------------------------------------------------- checkout form */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-billing-fields {
	background: transparent;
}
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods {
	background: var(--it-surface) !important;
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
}
.woocommerce-checkout #payment ul.payment_methods li {
	border-bottom: 1px solid var(--it-line);
	padding: var(--it-s3) var(--it-s4);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--it-surface-2);
	border-radius: var(--it-r);
	color: var(--it-text-muted);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* This is a digital shop: no shipping anywhere in the flow. */
.woocommerce-shipping-fields, .shipping, tr.shipping,
.woocommerce-checkout .shipping_address { display: none !important; }

/* The Battle.net tag is the delivery address here, so it is given the
 * prominence an address field would normally get. */
.it-battletag {
	border: 1px solid var(--it-accent-line);
	background: var(--it-accent-soft);
	border-radius: var(--it-r);
	padding: var(--it-s4);
	margin-bottom: var(--it-s4);
}
.it-battletag__t { font-weight: 650; margin-bottom: 4px; }
.it-battletag__d { color: var(--it-text-muted); font-size: var(--it-fs-sm); }

/* ------------------------------------------------------------ trust row */
.it-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--it-s3);
	margin-top: var(--it-s5);
}
.it-trust__item {
	display: flex; gap: 10px; align-items: flex-start;
	padding: var(--it-s3);
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r);
}
.it-trust__item svg { color: var(--it-ok); flex: none; margin-top: 2px; }
.it-trust__t { font-weight: 650; font-size: var(--it-fs-sm); }
.it-trust__d { color: var(--it-text-muted); font-size: var(--it-fs-xs); }

/* ------------------------------------------------------------------------
 * Cart, as it actually rendered with an item in it -- found by the real
 * browser purchase flow, since an empty cart shows none of this.
 *
 * The product name on the cart line was near-invisible, dark on dark: a
 * customer could read the "Ladder" badge but not what they were buying.
 * The order-mode title, the delivery note, the totals labels and the
 * checkout-step labels had the same fault. Kirki colours these by component
 * after every stylesheet, hence !important on the text colour only.
 * ------------------------------------------------------------------------ */
html body.woocommerce-cart table.shop_table td,
html body.woocommerce-cart table.shop_table td.product-name,
html body.woocommerce-cart table.shop_table td.product-name a,
html body.woocommerce-checkout table.shop_table td,
html body.woocommerce-checkout table.shop_table .product-name {
	color: var(--it-text) !important;
	font-family: var(--it-font) !important;
}
html body.woocommerce-cart table.shop_table td.product-name a:hover { color: var(--it-accent) !important; }
html body .cart_totals th, html body .cart_totals td,
html body .woocommerce-checkout-review-order-table th,
html body .woocommerce-checkout-review-order-table td {
	color: var(--it-text-muted) !important;
	font-family: var(--it-font) !important;
	background: transparent !important;
}
html body .cart_totals .order-total th,
html body .cart_totals .order-total td { color: var(--it-text) !important; }

html body .it-cartmode__t { color: var(--it-text) !important; font-family: var(--it-font) !important; }
html body .it-cartmode__d { color: var(--it-text-muted) !important; }
html body .it-cartmode .it-badge,
html body .it-line-mode { font-family: var(--it-font) !important; }

/* The delivery note from the delivery-notice plugin: legible, same type. */
html body .itempls-delivery-notice {
	color: var(--it-text-muted) !important;
	font-family: var(--it-font) !important;
}
html body .itempls-delivery-notice strong { color: var(--it-text) !important; }

/* Coupon: a dark secondary button, not the parent theme's white one. */
html body.woocommerce-cart .coupon .button,
html body.woocommerce-cart button[name="update_cart"] {
	background: var(--it-surface-3) !important;
	color: var(--it-text) !important;
	border: 1px solid var(--it-line) !important;
}

/* Shoptimizer's cart -> checkout -> confirmation steps: labels were invisible
 * and the track was white. */
html body .checkout-wrap .checkout-bar li,
html body .checkout-wrap .checkout-bar li a { color: var(--it-text-muted) !important; font-family: var(--it-font) !important; }
html body .checkout-wrap .checkout-bar li.active,
html body .checkout-wrap .checkout-bar li.active a { color: var(--it-text) !important; }
html body .checkout-wrap .checkout-bar::before,
html body .checkout-wrap .checkout-bar li::after { background: var(--it-line) !important; }
html body .checkout-wrap .checkout-bar li::before {
	background: var(--it-surface-2) !important;
	border-color: var(--it-line-strong) !important;
	color: var(--it-text-muted) !important;
}
html body .checkout-wrap .checkout-bar li.active::before {
	background: var(--it-accent) !important;
	border-color: var(--it-accent) !important;
	color: var(--it-text-on-accent) !important;
}

/* The order-mode banner's description line was still in the parent's serif. */
html body .it-cartmode__d { font-family: var(--it-font) !important; }