/**
 * Tenant-branded WooCommerce checkout / cart (JD 2026-08-18).
 *
 * Every value is a token var(--lpos-*) already emitted by BrandTokens -- zero hex/px brand
 * literals in this file (no-hardcoding law). Scoped STRICTLY to body.woocommerce-checkout /
 * body.woocommerce-cart; no other page is touched. The block-checkout markup (wc-block-*) and
 * the classic shortcode markup (.woocommerce) are both covered.
 */

/* ---- The page ground: the console's own dark glass world, not the theme's white. ---- */
body.woocommerce-checkout,
body.woocommerce-cart {
	background: var(--lpos-bg, #0b0b12) !important;
	color: var(--lpos-ink, #e8e6f0) !important;
	font-family: var(--lpos-font-ui, inherit) !important;
}

/* Theme chrome stands down: the checkout is a focused funnel, the console is its header. */
body.woocommerce-checkout .wp-block-template-part:first-child,
body.woocommerce-cart .wp-block-template-part:first-child,
body.woocommerce-checkout header.wp-block-template-part,
body.woocommerce-cart header.wp-block-template-part,
body.woocommerce-checkout .site-header,
body.woocommerce-cart .site-header {
	display: none !important;
}

/* ---- Tenant logo above the form (only paints when the pack carries one). ---- */
body.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout::before,
body.woocommerce-cart .entry-content > .wp-block-woocommerce-cart::before,
/* Classic-markup fallback ONLY -- when the block checkout is present the block's own ::before
 * already carries the logo, and matching the .woocommerce wrapper too printed it TWICE. */
body.woocommerce-checkout .woocommerce:not(:has(.wp-block-woocommerce-checkout))::before,
body.woocommerce-cart .woocommerce:not(:has(.wp-block-woocommerce-cart))::before {
	content: "";
	display: block;
	height: calc(2 * var(--lpos-control-size, 46px));
	margin: var(--lpos-space-md, 12px) auto;
	background-image: var(--lpos-checkout-logo, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ---- Panels: order summary, form sections, totals ride the glass panel token. ---- */
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-panel,
body.woocommerce-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-cart .cart_totals {
	background: var(--lpos-glass-panel, rgba(255, 255, 255, 0.04)) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md, blur(10px)) !important;
	backdrop-filter: var(--lpos-blur-md, blur(10px)) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, var(--lpos-glass-veil, rgba(255, 255, 255, 0.1))) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	color: var(--lpos-ink, inherit) !important;
}

/* Text inside the blocks inherits the ink token instead of the theme's near-black. */
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-order-summary-item__description,
body.woocommerce-checkout .wc-block-components-formatted-money-amount,
body.woocommerce-cart .wc-block-components-totals-item,
body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3,
body.woocommerce-cart h1,
body.woocommerce-cart h2,
body.woocommerce-cart h3 {
	color: var(--lpos-ink, inherit) !important;
}

/* ---- Inputs: token field skin, accent focus ring. ---- */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-country-input input,
body.woocommerce-checkout .wc-block-components-state-input input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="number"] {
	background: var(--lpos-glass-panel, rgba(255, 255, 255, 0.04)) !important;
	color: var(--lpos-ink, inherit) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, var(--lpos-glass-veil, rgba(255, 255, 255, 0.1))) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	border-color: var(--lpos-accent, currentColor) !important;
	box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-checkbox__label,
body.woocommerce-checkout label {
	color: var(--lpos-ink-soft, var(--lpos-ink, inherit)) !important;
}

/* ---- The money buttons: accent, same control geometry as the console. ---- */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout button[type="submit"].button,
body.woocommerce-cart .checkout-button {
	background: var(--lpos-accent, #6133d9) !important;
	color: var(--lpos-ink-on-accent, #fff) !important;
	border: 0 !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	font-family: var(--lpos-font-ui, inherit) !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover {
	filter: brightness(1.1);
}

/* Links follow the accent. */
body.woocommerce-checkout a,
body.woocommerce-cart a {
	color: var(--lpos-accent, inherit);
}

/* Wide content keeps to the funnel column; never a horizontal scroll. */
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .entry-content {
	max-width: min(100%, 1100px);
	margin-inline: auto;
	padding-inline: var(--lpos-space-md, 12px);
}