/*
 * Cart and checkout.
 *
 * The blocks are WooCommerce's; this file dresses them in the project's tokens
 * and nothing else. No layout is rebuilt: the two screens in the buying path
 * are the worst possible place to diverge from a component the plugin will keep
 * updating, and every rule here survives that update or stops mattering.
 *
 * Loaded only on /cart/ and /checkout/, so the rest of the site never pays for
 * it. Every value is a token — CLAUDE.md section 5 allows no other kind.
 */

/* --- Type -----------------------------------------------------------------
 *
 * Section 5.5 puts every number in Inter with tabular figures. On these two
 * screens almost everything is a number, and a total whose digits change width
 * as it recalculates reads as the page twitching. Cormorant is absent by
 * design: nothing here is editorial. Caveat is banned outright.
 */

.woocommerce-cart .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-checkout .wc-block-components-product-price,
.woocommerce-cart .wc-block-components-formatted-money-amount,
.woocommerce-checkout .wc-block-components-formatted-money-amount,
.woocommerce-cart .wc-block-components-quantity-selector__input,
.woocommerce-checkout .wc-block-components-quantity-selector__input {
	font-family: var( --wp--preset--font-family--sans );
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .wc-block-components-title,
.woocommerce-checkout .wc-block-components-title,
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-title,
.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 600;
	color: var( --wp--preset--color--brown );
}

/*
 * Safety net, not a duplicate of the rule above: the global `heading` element
 * style (theme.json) now paints every h1-h6 purple, which is right for the
 * brand pages and wrong here. Cart and checkout are Operate mode (CLAUDE.md
 * section 13) and stay brown on purpose — the page h1 ("Cart", "Checkout")
 * and the empty-cart pattern's own headings have no component-specific class
 * to hang a colour on the way the WooCommerce block titles above do, so this
 * catches every heading under the region instead of one at a time.
 */
.woocommerce-cart main h1,
.woocommerce-cart main h2,
.woocommerce-cart main h3,
.woocommerce-cart main h4,
.woocommerce-cart main h5,
.woocommerce-cart main h6,
.woocommerce-checkout main h1,
.woocommerce-checkout main h2,
.woocommerce-checkout main h3,
.woocommerce-checkout main h4,
.woocommerce-checkout main h5,
.woocommerce-checkout main h6 {
	color: var( --wp--preset--color--brown );
}

/* --- Colour ---------------------------------------------------------------
 *
 * Section 5.3 allows one purple CTA per screen. On the cart that is "Proceed to
 * checkout"; on the checkout it is "Place order". Everything else that
 * WooCommerce ships purple by default — links, secondary buttons — is brown, so
 * the one button that completes the purchase is the only purple on the page.
 */

.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var( --wp--preset--color--purple );
	color: var( --wp--preset--color--white );
	border-radius: var( --wp--custom--radius--md, 4px );
}

.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-cart .wc-block-cart__submit-button:focus,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
	background-color: var( --wp--preset--color--purple-hover );
}

/*
 * Scoped to main, and buttons excluded — both exclusions are bug fixes, not
 * tidiness.
 *
 * `.woocommerce-cart` is a body class, so without `main` this rule reached every
 * link on the page, the footer's included, and those sit on brown. Brown on
 * brown is 1:1: the footer navigation disappeared on both screens, against
 * section 5.3, which puts white text on brown.
 *
 * And a link carrying `.wp-element-button` is a button, with a purple fill.
 * Recolouring its text brown gives brown on purple — 1.61:1, the exact pair
 * section 5.3 names and forbids in both directions. The empty cart shows it:
 * WooCommerce's "New in store" grid renders add-to-cart buttons there, and
 * every axe run that seeded a cart first walked straight past them.
 */
.woocommerce-cart main a:not( .wc-block-cart__submit-button, .wp-element-button ),
.woocommerce-checkout main a:not( .wc-block-components-checkout-place-order-button, .wp-element-button ) {
	color: var( --wp--preset--color--brown );
}

.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-checkout .wc-block-components-product-metadata {
	color: var( --wp--preset--color--text-muted );
}

/*
 * Section 5.1 keeps gray-light off anything functional. WooCommerce borders its
 * inputs in its own grey; ours is the one the palette allows for a field edge.
 */
.woocommerce-cart .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-select__container,
.woocommerce-checkout .wc-block-components-combobox-control input {
	border-color: var( --wp--preset--color--gray-dark );
	font-size: var( --wp--preset--font-size--base );
}

/*
 * The focus ring, purple and visible, on controls the plugin styles itself.
 * Section 12 requires a visible focus everywhere, and WooCommerce's own ring is
 * its blue, not ours.
 */
/*
 * main, for the same reason as the link colour above: the body class would carry
 * a purple ring into the footer, and section 5.3 puts a white one on brown. The
 * header and footer already have their own, from site-chrome.css.
 */
.woocommerce-cart main :focus-visible,
.woocommerce-checkout main :focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: 2px;
}

/*
 * The quantity stepper is the exception. Its buttons clear their own outline
 * and showed nothing at all on focus, and its input draws focus with a 1px
 * brown inset box-shadow instead of an outline — visible, and enough for AA,
 * but thinner and quieter than the ring every other control on the site uses.
 * Section 12 asks for a visible focus on every stop, so both are brought up to
 * the same purple: the buttons through the outline they had discarded, the
 * input through the mechanism it already uses, since it forces outline off.
 */
.woocommerce-cart .wc-block-components-quantity-selector__button:focus-visible,
.wc-block-components-drawer .wc-block-components-quantity-selector__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--purple );
	outline-offset: -2px;
}

/*
 * Matching WooCommerce's own shape rather than reaching for !important: its
 * rule is `.wc-block-components-quantity-selector input.…__input:focus`, and a
 * selector without the element part loses to it however many classes it has.
 */
.woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus-visible,
.wc-block-components-drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus-visible {
	box-shadow: inset 0 0 0 2px var( --wp--preset--color--purple );
	outline: none;
}

/* --- Motion ---------------------------------------------------------------
 *
 * Section 7: only transform and opacity, and no decorative animation at all on
 * these two screens.
 *
 * WooCommerce's floating label carries `transition: all .2s ease` while its
 * floated state changes `top` and `font-size` — both layout properties, both
 * outside what the rule permits, on seven fields of the checkout. The label
 * still moves; it just arrives instead of gliding, which is the compliant half
 * of the effect and the half that actually tells the visitor the field is
 * filled.
 */
.woocommerce-cart .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-text-input label {
	transition-property: color, opacity;
}

/* --- Target size ----------------------------------------------------------
 *
 * WCAG 2.2 AA 2.5.8. Section 8 holds the whole site to 2.2 AA, and in US
 * ecommerce an accessibility failure is litigation exposure, not a nicety.
 *
 * WooCommerce's quantity stepper overflows its own container: the plus button
 * ends about 34px past the container's right edge and lands on top of the
 * "Remove item" button beside it, leaving roughly 10px of that button clear.
 * axe reads it as a target "partially obscured", which is the polite
 * description — on a phone it is a control you can aim at and miss. Our own QA
 * harness did exactly that, clicking the centre of the remove button and
 * reaching the stepper instead, which is the visitor's experience too.
 *
 * The fix is to stop the overflow rather than to push the neighbour away: the
 * stepper sizes to its content, so its buttons stay inside it and the remove
 * button is clear. A wider gap was tried and does not fix it — the overflow
 * simply travels with the gap. Stacking the two controls also passes, and was
 * not chosen: it makes the row taller on every cart to work around a bug in one
 * component's width.
 *
 * The mini-cart drawer carries the same markup and the same defect, and its fix
 * lives in site-chrome.css: the drawer opens from the header on every page, and
 * this stylesheet only loads on two of them.
 */

.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	flex: 0 0 auto;
	inline-size: auto;
	min-inline-size: max-content;
}

.woocommerce-cart .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	min-block-size: 32px;
	min-inline-size: 32px;
}