/*
 * Cart and checkout: WooCommerce's Cart and Checkout blocks (inc/checkout.php). Their layout, fields and
 * phone behaviour are WooCommerce's; these rules bring them up to the brand's sizes: readable text, 48px
 * targets and the two-tone focus ring. WooCommerce's block stylesheets load after this one, so selectors
 * start with `body` to win at equal specificity.
 */

/* Text: the blocks shrink most of their text to 11–13px, mostly through WordPress's "small" font-size preset.
 * Item names, prices, totals and option labels are what a customer checks before paying, so they get the
 * body size; the VAT line stays small but legible. */
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) {
	--wp--preset--font-size--small: var(--ca-text-body);
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item-tax {
	font-size: var(--ca-text-small);
}

/* The product's short description is its highlights list (inc/product.php); in the cart it only pushes
 * the price and quantity down. Size and other choices (product details) still show. */
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-product-metadata__description {
	display: none;
}

/* Targets: at least 48px. The remove button is a 24px bin icon; the checkbox rows' labels are clickable,
 * so the row gets the height. */
body .wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ca-size-control);
	min-height: var(--ca-size-control);
}

body .wp-block-woocommerce-checkout .wc-block-components-checkbox label {
	min-height: var(--ca-size-control);
	align-items: center;
}

body .wp-block-woocommerce-checkout .wc-block-checkout__login-prompt {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
}

/* Product names in the cart: a taller target without spacing the row out. */
body .wp-block-woocommerce-cart .wc-block-components-product-name {
	display: inline-block;
	padding-block: calc((var(--ca-size-control) - 1lh) / 2);
	margin-block: calc((1lh - var(--ca-size-control)) / 2);
}

/* The terms and privacy links in the agreement line under "Place order" (WooCommerce draws them plain). */
body .wp-block-woocommerce-checkout .wc-block-checkout__terms a {
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
}

body .wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
}

/* Notices: Blocksy's white-on-red error banner is 3.8:1; the brand status colours pass, and keep the icon
 * and words so colour isn't the only signal. */
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner {
	--ca-notice-bg: var(--ca-status-info-bg);
	--ca-notice-border: var(--ca-status-info-border);
	--ca-notice-text: var(--ca-status-info-text);
	--ca-notice-icon: var(--ca-status-info-icon);
	/* Blocksy colours the banners through these. */
	--background-color: var(--ca-notice-bg);
	--theme-text-color: var(--ca-notice-text);
	border-color: var(--ca-notice-border);
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner.is-error {
	--ca-notice-bg: var(--ca-status-error-bg);
	--ca-notice-border: var(--ca-status-error-border);
	--ca-notice-text: var(--ca-status-error-text);
	--ca-notice-icon: var(--ca-status-error-icon);
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner.is-success {
	--ca-notice-bg: var(--ca-status-success-bg);
	--ca-notice-border: var(--ca-status-success-border);
	--ca-notice-text: var(--ca-status-success-text);
	--ca-notice-icon: var(--ca-status-success-icon);
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner.is-warning {
	--ca-notice-bg: var(--ca-status-warning-bg);
	--ca-notice-border: var(--ca-status-warning-border);
	--ca-notice-text: var(--ca-status-warning-text);
	--ca-notice-icon: var(--ca-status-warning-icon);
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner > svg {
	background-color: var(--ca-notice-icon);
	fill: var(--ca-bg-surface);
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-notice-banner :is(a, button) {
	color: inherit;
}

/* Mini-cart: the dropdown under the header's cart on larger screens (Blocksy; on phones the cart icon goes
 * straight to the cart page). Blocksy styles it as two identical small capitals buttons; "Checkout" is the
 * main action, so "View cart" becomes the secondary button, and both get the control height. Its colours
 * are Customizer settings (config/theme-mods.json, header cart item). */
.ct-cart-content .woocommerce-mini-cart__total {
	font-size: var(--ca-text-body);
	text-transform: none;
}

.ct-cart-content .woocommerce-mini-cart__buttons .button {
	min-height: var(--ca-size-control);
	font-size: var(--ca-text-label);
	text-transform: none;
}

.ct-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout) {
	border: var(--ca-border-width-control) solid var(--ca-action-secondary-border);
	background: var(--ca-action-secondary-bg);
	color: var(--ca-action-secondary-text);
}

.ct-cart-content .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background: var(--ca-action-secondary-bg-hover);
}

.ct-cart-content .woocommerce-mini-cart .remove {
	min-width: var(--ca-size-control);
	min-height: var(--ca-size-control);
}

/* Focus: Blocksy Companion's block styles remove the halo from focused controls with !important, so the brand
 * ring is restated here the same way: the standard ring on buttons and links, the field style (theme.css) on
 * fields. */
body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(a, button, input[type='checkbox'], input[type='radio'], [tabindex]):focus-visible {
	outline: var(--ca-border-width-focus) solid var(--ca-border-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ca-border-focus-halo) !important;
}

body :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button']), select, textarea):focus-visible {
	border-color: var(--ca-border-focus);
	outline: var(--ca-border-width-focus) solid transparent;
	outline-offset: 0;
	box-shadow:
		inset 0 0 0 var(--ca-border-width-thin) var(--ca-border-focus),
		0 0 0 calc(var(--ca-border-width-focus) + var(--ca-border-width-thin)) var(--ca-border-focus-halo) !important;
}