/*
 * CheckoutWC, brought into the design.
 *
 * The checkout is the plugin's, not the theme's: it owns the three step flow,
 * the field logic, the express payment buttons and the order review. Rebuilding
 * that would mean rebuilding a payment flow, which is the one place on a store
 * where being clever is expensive. So the markup stays theirs and this decides
 * how it looks.
 *
 * Its palette was already remapped through the plugin's own design settings in
 * Phase 2, so the greens and brasses come from there. What is left is what the
 * settings cannot reach: the typefaces, the radii, the card treatment, the
 * option rows, and every touch target the plugin draws smaller than 44px.
 *
 * Everything is scoped to `body.checkout-wc` or to a `cfw-` class, so none of it
 * can leak onto a page the plugin is not rendering. The side cart is the
 * exception: it is in the DOM on every page, so its rules are scoped by class
 * alone.
 */

/* -------------------------------------------------------------- typography */

body.checkout-wc,
body.checkout-wc [class*="cfw-"],
body.checkout-wc input,
body.checkout-wc select,
body.checkout-wc textarea,
body.checkout-wc button,
.cfw-side-cart-contents,
.cfw-side-cart-contents [class*="cfw-"] {
	font-family: var(--fms-font-body);
}

body.checkout-wc h1,
body.checkout-wc h2,
/*
 * The plugin's side cart close button. Its markup is CheckoutWC's, but the
 * button is in the DOM on every page of the site and it was the last control
 * anywhere with no hover state, so it gets one here with the rest of the
 * plugin's restyling.
 */
.cfw-side-cart-close-btn {
	transition: color 0.18s, background 0.18s;
}

.cfw-side-cart-close-btn:hover {
	color: var(--fms-brass);
}

body.checkout-wc h3,
body.checkout-wc .cfw-panel-heading,
.cfw-side-cart-contents-header {
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	color: var(--fms-ink);
}

body.checkout-wc .cfw-panel-heading,
body.checkout-wc .cfw-module > h2 {
	margin: 0 0 24px;
	font-size: var(--fms-size-h4);
	line-height: var(--fms-leading-heading);
}

/* ------------------------------------------------------------------ layout */

body.checkout-wc .cfw-panel {
	padding: 32px 34px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

body.checkout-wc .cfw-panel + .cfw-panel {
	margin-top: 20px;
}

/*
 * The checkout wore a different logo from the rest of the site. CheckoutWC
 * paints its own setting, the client's original PNG, as a background on an
 * empty anchor, and that artwork is a blue wordmark: a colour the palette does
 * not contain, on the one page where a shopper is deciding whether to trust
 * the site. Pointed at the theme's own vector instead, and sized so the anchor
 * stops claiming 757px of empty width.
 */
body.checkout-wc .cfw-logo a.logo {
	width: 290px;
	max-width: 100%;
	background-image: url("../logo/fms-logo-forest-brass.svg");
	background-position: left center;
}

/* ------------------------------------------------------------------ fields */

body.checkout-wc .cfw-floatable-label,
body.checkout-wc .cfw-input-wrap label {
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

/*
 * `cfw-text-input`, `cfw-select-input`, `cfw-tel-input`, `cfw-country-input`
 * and `cfw-state-input` are NOT on the form controls. Every one of them is on
 * the `<p class="form-row">` that wraps one. Styling them as fields therefore
 * drew a bordered, cream, rounded box around another bordered, cream, rounded
 * box, on every field of the checkout. The wrapper is layout and nothing else.
 */
body.checkout-wc .cfw-input-wrap {
	/*
	 * 5px inline is not decoration, it is the plugin's grid: its rows carry
	 * `margin: 0 -5px` and expect each column to give it back. Setting padding
	 * to 0 outright made every pair of fields touch, and left the one row that
	 * is not a `cfw-input-wrap`, the email field, inset 5px from all the rest.
	 */
	padding: 0 5px;
	border: 0;
	background: none;
}

/*
 * A field that is not inside one of the plugin's grid rows has nothing to
 * cancel that 5px against, so it sat inset from every other field on the page.
 * The email address is the one that does this.
 */
body.checkout-wc .cfw-module > .cfw-input-wrap {
	padding-inline: 0;
}

body.checkout-wc .cfw-input-wrap input,
body.checkout-wc .cfw-input-wrap select,
body.checkout-wc .cfw-input-wrap textarea {
	/* At 390 the longest placeholder, "Apartment, suite, unit, etc.
	 * (optional)", is wider than the field and was cut mid word. */
	text-overflow: ellipsis;
	min-height: var(--fms-field-h);
	padding: 14px 16px 12px;
	border: 1px solid var(--fms-border);
	border-radius: 10px;
	background: var(--fms-cream);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

body.checkout-wc .cfw-input-wrap input:focus-visible,
body.checkout-wc .cfw-input-wrap select:focus-visible,
body.checkout-wc .cfw-input-wrap textarea:focus-visible {
	outline: var(--fms-focus-ring);
	outline-offset: var(--fms-focus-offset);
}

/* ----------------------------------------------------------------- buttons */

body.checkout-wc .cfw-primary-btn,
body.checkout-wc button.cfw-primary-btn,
.cfw-side-cart-contents .cfw-primary-btn {
	min-height: var(--fms-tap-min);
	padding: 17px 34px 15px;
	border: 0;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-forest);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-white);
}

body.checkout-wc .cfw-primary-btn:hover,
.cfw-side-cart-contents .cfw-primary-btn:hover {
	background: linear-gradient(var(--fms-shade-22), var(--fms-shade-22)), var(--fms-forest);
	color: var(--fms-white);
}

body.checkout-wc .cfw-secondary-btn,
.cfw-side-cart-contents .cfw-secondary-btn {
	min-height: var(--fms-tap-min);
	padding: 12px 24px 10px;
	border: 1.5px solid var(--fms-forest);
	border-radius: var(--fms-radius-pill);
	background: none;
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
}

body.checkout-wc .cfw-secondary-btn:hover,
.cfw-side-cart-contents .cfw-secondary-btn:hover {
	background: var(--fms-forest);
	color: var(--fms-cream);
}

/*
 * The promo code button before a code has been typed. CheckoutWC fills it with
 * the muted grey and white text, which on a cream panel reads as a heavy, dead
 * slab sitting next to an empty field. It is the same shape as the secondary
 * button, so it keeps that shape and only loses its colour until there is
 * something to apply.
 */
/*
 * Specificity, again, and worse than the note at the top of this file
 * suggested. The plugin's secondary button rule is
 *
 *   .checkoutwc .cfw-secondary-btn:not(.cfw-primary-btn)
 *     :not(.cfw-quantity-stepper-btn-minus):not(.cfw-quantity-stepper-btn-plus)
 *
 * which scores five classes. `body.checkout-wc .cfw-secondary-btn` scores two
 * and a type, so the theme's ghost secondary button above has in fact never
 * been applied to anything: what the promo code panel has been showing all
 * along is the plugin's own filled grey. The shape below is the plugin's,
 * copied exactly so the two tie and source order settles it.
 */
.checkoutwc .cfw-secondary-btn:not(.cfw-primary-btn):not(.cfw-quantity-stepper-btn-minus):not(.cfw-quantity-stepper-btn-plus) {
	min-height: var(--fms-tap-min);
	padding: 12px 24px 10px;
	border: 1.5px solid var(--fms-forest);
	border-radius: var(--fms-radius-pill);
	background: none;
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
}

.checkoutwc .cfw-secondary-btn:not(.cfw-primary-btn):not(.cfw-quantity-stepper-btn-minus):not(.cfw-quantity-stepper-btn-plus):hover {
	background: var(--fms-forest);
	color: var(--fms-cream);
}

/*
 * Before a code has been typed. The plugin fills it with grey and white text,
 * which on a cream panel reads as a heavy dead slab beside an empty field. It
 * keeps the secondary button's shape and only loses its colour.
 */
.checkoutwc .cfw-secondary-btn-inactive:not(.cfw-primary-btn):not(.cfw-quantity-stepper-btn-minus):not(.cfw-quantity-stepper-btn-plus),
.cfw-side-cart-contents .cfw-secondary-btn-inactive {
	border-color: var(--fms-border);
	background: none;
}

/* The back link between steps reads as a link, not a second primary action. */
body.checkout-wc .cfw-prev-tab,
body.checkout-wc .cfw-return-to-information-btn {
	display: inline-flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	border: 0;
	background: none;
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
}

/* ------------------------------------------------------------ option rows
 * Delivery method and payment method. The mockup draws each as a 12px card with
 * a radio on the left and the price on the right.
 */

body.checkout-wc .cfw-radio-reveal-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.checkout-wc .cfw-radio-reveal-li {
	margin: 0;
	border: 1.5px solid var(--fms-border);
	border-radius: 12px;
	background: var(--fms-white);
	overflow: hidden;
}

body.checkout-wc .cfw-radio-reveal-li.cfw-active {
	border-color: var(--fms-forest);
	background: var(--fms-cream);
}

body.checkout-wc .cfw-radio-reveal-label {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--fms-tap-min);
	padding: 18px 20px;
	cursor: pointer;
}

body.checkout-wc .cfw-radio-reveal-title {
	font-weight: var(--fms-weight-medium);
	font-size: 15.5px;
	color: var(--fms-ink);
}

body.checkout-wc .cfw-radio-reveal-content {
	padding: 0 20px 18px;
}

body.checkout-wc .cfw-radio-reveal-li .amount,
body.checkout-wc .cfw-radio-reveal-li .woocommerce-Price-amount {
	font-weight: var(--fms-weight-medium);
	color: var(--fms-brass);
}

/* ---------------------------------------------------------- review panes */

body.checkout-wc .cfw-review-pane {
	padding: 20px 24px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

body.checkout-wc .cfw-review-pane-label {
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

body.checkout-wc .cfw-review-pane-content {
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

body.checkout-wc .cfw-review-pane-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-brass);
}

/* -------------------------------------------------------- the order table */

body.checkout-wc .cfw-cart-table,
.cfw-side-cart-contents .cfw-cart-table {
	color: var(--fms-ink);
}

body.checkout-wc .cfw-cart-item-title,
.cfw-side-cart-contents .cfw-cart-item-title {
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: 17px;
	line-height: 1.25;
	color: var(--fms-ink);
}

body.checkout-wc .cfw-cart-item-image-wrap,
.cfw-side-cart-contents .cfw-cart-item-image-wrap {
	border-radius: 12px;
	background: var(--fms-cream);
}

body.checkout-wc .cfw-totals-list,
.cfw-side-cart-contents .cfw-totals-list {
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

body.checkout-wc .cfw-totals-list .amount,
.cfw-side-cart-contents .cfw-totals-list .amount {
	font-weight: var(--fms-weight-medium);
}

/* ----------------------------------------------------- touch targets, 44px
 * Criterion 9. Every one of these was measured under 44px at 390: the side
 * cart's close button at 24 by 26, its quantity stepper at 30 by 30, its remove
 * link at 20 by 21, and the coupon toggle at 21 tall. The visual size of each
 * control is unchanged; only the area around it grows.
 */

.cfw-side-cart-close-btn,
.cfw-side-cart-close-trigger,
.cfw-quantity-stepper-btn-minus,
.cfw-quantity-stepper-btn-plus,
.cfw-remove-item-button,
.cfw-show-coupons-module,
body.checkout-wc .cfw-quantity-stepper-btn-minus,
body.checkout-wc .cfw-quantity-stepper-btn-plus,
body.checkout-wc .cfw-remove-item-button,
body.checkout-wc .cfw-show-coupons-module {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fms-tap-min);
	min-height: var(--fms-tap-min);
}

.cfw-show-coupons-module,
body.checkout-wc .cfw-show-coupons-module {
	justify-content: flex-start;
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-brass);
}

.cfw-quantity-stepper {
	gap: 2px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-cream);
}

/*
 * The value between the two steppers is given `width: 100%` by the plugin, so
 * inside a 138px flex row it claimed all 136 of the inner width and shoved the
 * plus button out through the right hand end of the pill: minus and the number
 * inside, plus floating on the page beside it. It has to shrink, and the two
 * buttons must not.
 */
main.checkoutwc .cfw-quantity-stepper .cfw-quantity-stepper-value-label,
.cfw-side-cart-contents .cfw-quantity-stepper .cfw-quantity-stepper-value-label {
	flex: 1 1 auto;
	width: auto;
	min-width: 28px;
}

main.checkoutwc .cfw-quantity-stepper .cfw-quantity-stepper-btn-minus,
main.checkoutwc .cfw-quantity-stepper .cfw-quantity-stepper-btn-plus,
.cfw-side-cart-contents .cfw-quantity-stepper .cfw-quantity-stepper-btn-minus,
.cfw-side-cart-contents .cfw-quantity-stepper .cfw-quantity-stepper-btn-plus {
	flex: none;
}

.cfw-quantity-stepper-value-label {
	min-width: 28px;
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	text-align: center;
	color: var(--fms-ink);
}

/*
 * The rest of the plugin's greys.
 *
 * The note at the top of this file lists five colours CheckoutWC hardcodes.
 * That list was drawn from step 1's fields, which is all anybody had looked at.
 * Driving the flow through Shipping and Payment and running the palette check
 * on each step found seven, on furniture that only exists past step 1: the
 * review pane, the shipping method list, the summary thumbnails, the quantity
 * stepper's icons and its dividers, and the "Change" links.
 *
 * Measured per step: 5 distinct off-palette values on Information, 5 on
 * Shipping, 6 on Payment. Acceptance criterion 3 reported zero because it had
 * only ever been run on pages at rest, and two thirds of the checkout is not
 * one of those.
 */

/* #333 on headings, fields and the stepper icons. */
.checkoutwc h2,
.checkoutwc .input-text,
main.checkoutwc h2 {
	color: var(--fms-ink);
}

.checkoutwc .cfw-quantity-stepper svg,
.checkoutwc .cfw-quantity-stepper svg path,
.cfw-side-cart-contents .cfw-quantity-stepper svg,
.cfw-side-cart-contents .cfw-quantity-stepper svg path {
	fill: var(--fms-ink);
}

/* #666 on the tax note and the price amounts beside it. */
.checkoutwc small.includes_tax,
.checkoutwc small.includes_tax .woocommerce-Price-amount,
#cfw-cart-summary small.includes_tax,
#cfw-cart-summary small.includes_tax .woocommerce-Price-amount {
	color: var(--fms-muted);
}

/*
 * #b3b3b3 on the "Change" links, which is why they read as disabled text. They
 * are the only way back to an earlier step, so they read as links: forest, and
 * brass on hover, like every other link in the theme.
 */
.checkoutwc a.cfw-tab-link,
.checkoutwc a.cfw-tab-link.cfw-small {
	color: var(--fms-forest);
	text-decoration: underline;
	text-decoration-color: var(--fms-brass);
	text-underline-offset: 3px;
}

.checkoutwc a.cfw-tab-link:hover,
.checkoutwc a.cfw-tab-link.cfw-small:hover {
	color: var(--fms-brass);
}

/* #999 and #ddd on the shipping method rows and the radios inside them. */
.checkoutwc .cfw-shipping-methods-list,
.checkoutwc .cfw-shipping-methods-list li,
.checkoutwc input.shipping_method,
.checkoutwc input.input-radio {
	border-color: var(--fms-border);
	color: var(--fms-muted);
}

/* #ddd again on the review pane's own rules. */
.checkoutwc .cfw-review-pane > li > div,
.checkoutwc .cfw-review-pane-link {
	border-color: var(--fms-border);
}

/* #d9d9d9 on the inputs this file had not reached, radios among them. */
.checkoutwc .form-row input.input-radio,
.checkoutwc input.garlic-auto-save,
.checkoutwc .cfw-module input.input-text {
	border-color: var(--fms-border);
}

/* #d3d4d5 on the stepper's two dividers. */
.checkoutwc .cfw-quantity-stepper-btn-minus,
.checkoutwc .cfw-quantity-stepper-btn-plus,
.cfw-side-cart-contents .cfw-quantity-stepper-btn-minus,
.cfw-side-cart-contents .cfw-quantity-stepper-btn-plus {
	border-color: var(--fms-border);
}

/*
 * The promo code field. The plugin styles it through
 * `#cfw-cart-summary input[type="text"]`, and an id beats every class based
 * rule in this file, so this one has to carry an id too.
 */
#cfw-cart-summary input[type="text"],
#cfw-cart-summary input[type="email"],
#cfw-cart-summary input {
	/*
	 * `!important`, because the plugin's rule carries it too. Specificity has
	 * nothing left to offer once both sides use an id, which is the same
	 * reason the `.form-row` rule further down this file already has one.
	 */
	border-color: var(--fms-border) !important;
	background: var(--fms-cream) !important;
	color: var(--fms-ink) !important;
}

/*
 * The shipping method rows. The radio itself carries the plugin's grey on both
 * its border and its colour, and the rule that does it outscores a plain class,
 * so the list is named as well as the input.
 */
.checkoutwc .cfw-shipping-methods-list .cfw-shipping-method-inner input.shipping_method,
.checkoutwc .cfw-shipping-methods-list li input,
.checkoutwc ul.cfw-shipping-methods-list li {
	border-color: var(--fms-border);
	color: var(--fms-muted);
	accent-color: var(--fms-forest);
}

/* #e1e1e1 around the summary thumbnails. */
.checkoutwc img.attachment-cfw_cart_thumb,
#cfw-cart-summary img,
.cfw-side-cart-contents img {
	border-color: var(--fms-border);
}

/* ------------------------------------------------------------ validation */

/*
 * The checkout's error state, which nothing had ever looked at.
 *
 * PROJECT-BRIEF.md settled this treatment before a line was written: brass
 * border and text, plus an icon and an explicit textual prefix, so the message
 * never depends on colour alone, because the palette contains no red and
 * adding one would break the palette rule. forms.css does it for Gravity Forms
 * and for WooCommerce's own notices. The checkout was never done, because the
 * only way to see it is to submit a bad value, and every check so far has read
 * a page at rest.
 *
 * What it did instead: Parsley, the client side validator CheckoutWC ships,
 * drew a #f04f63 border and #f04f63 message text. Two off-palette reds, no
 * icon, no prefix, and the whole meaning carried by colour.
 *
 * `!important` on the border because Parsley's own rule has one.
 */
.checkoutwc .parsley-error input,
.checkoutwc .parsley-error select,
.checkoutwc .parsley-error textarea,
.checkoutwc input.parsley-error,
.checkoutwc select.parsley-error,
.checkoutwc textarea.parsley-error {
	border-color: var(--fms-brass) !important;
	border-width: 2px !important;
	/*
	 * Parsley draws its red as a 1px box shadow ring, not as a border, so
	 * setting the border colour left the field looking exactly as red as
	 * before. The shadow has to be replaced, not just the border.
	 */
	box-shadow: 0 0 0 1px var(--fms-brass) !important;
}

/*
 * And the ring needs its own rule, because the plugin's is
 * `.form-row .parsley-error:not(.checkbox)`, which scores three classes and
 * carries `!important`. Two `!important` declarations are settled by
 * specificity, and `.checkoutwc` in front of the same shape scores four.
 */
.checkoutwc .form-row .parsley-error:not(.checkbox) {
	box-shadow: 0 0 0 1px var(--fms-brass) !important;
}

.checkoutwc .parsley-errors-list,
.checkoutwc .parsley-errors-list li {
	color: var(--fms-brass);
	font-size: var(--fms-size-meta);
}

/*
 * The prefix and the mark. `content` on a pseudo element is read out by
 * screen readers in every current engine, which is what makes this a textual
 * cue and not a decorative one.
 */
.checkoutwc .parsley-errors-list li::before {
	content: "! Error: ";
	font-weight: var(--fms-weight-bold);
}

/* The label above a field that failed. #a00 in the plugin's sheet. */
.checkoutwc .form-row.woocommerce-invalid label,
.checkoutwc .form-row.woocommerce-invalid .cfw-floatable-label {
	color: var(--fms-brass);
}

.checkoutwc .form-row.woocommerce-invalid input,
.checkoutwc .form-row.woocommerce-invalid select {
	border-color: var(--fms-brass);
	border-width: 2px;
}

/*
 * The banner at the top of a failed submission. The plugin fills it with
 * #f8d7da on a #721c24, which is three colours the palette does not have; the
 * theme's own notice treatment is a white card with a brass top rule, and the
 * wording carries the meaning.
 */
.checkoutwc .cfw-alert-error,
.checkoutwc .woocommerce-error,
#cfw .cfw-alert-error,
#cfw .woocommerce-error {
	border: 1px solid var(--fms-border) !important;
	border-top: 3px solid var(--fms-brass) !important;
	border-radius: var(--fms-radius-note) !important;
	background: var(--fms-white) !important;
	color: var(--fms-ink) !important;
	box-shadow: var(--fms-shadow-card);
}

.checkoutwc .cfw-alert-error::before,
.checkoutwc .woocommerce-error::before {
	color: var(--fms-brass) !important;
}

/* --------------------------------------------------------- the side cart */

.cfw-side-cart-contents {
	background: var(--fms-cream);
	color: var(--fms-ink);
}

.cfw-side-cart-contents-header {
	font-size: var(--fms-size-h4);
}

.cfw-side-cart-contents-footer {
	border-top: 1px solid var(--fms-border);
	background: var(--fms-white);
}

/* -------------------------------------------------------------- messages */

body.checkout-wc .cfw-alert {
	padding: 14px 18px;
	border: 1px solid var(--fms-border);
	border-left: 4px solid var(--fms-brass);
	border-radius: var(--fms-radius-input);
	background: var(--fms-sage);
	font-size: var(--fms-size-meta);
	color: var(--fms-ink);
}

body.checkout-wc .cfw-small {
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

/* ================================== beating the plugin's own stylesheet === */

/*
 * The selectors below deliberately mirror CheckoutWC's own.
 *
 * Its stylesheet is minified and hardcodes a handful of colours the design
 * settings cannot reach: #737373 on labels and placeholders, #333 in fields,
 * #ddd, #d9d9d9 and #dfe3e8 on borders. Those are five colours the palette does
 * not have, and acceptance criterion 3 counts them.
 *
 * Its rules score three classes and a type, for example
 * `.checkoutwc .form-row input[type=text]`, so a single class here loses. The
 * shape is copied and `fms-checkout` is enqueued after the plugin's sheet, so
 * equal specificity plus later source order settles it. The class names are the
 * plugin's documented template API, so they are a fair thing to depend on; the
 * file's minified contents are not, which is why nothing here relies on the
 * order or the names inside it.
 *
 * `main.checkoutwc` is the plugin's own wrapper. It is not on the body: the body
 * carries `checkout-wc` with a hyphen, and mistaking one for the other is a good
 * half hour.
 */

main.checkoutwc {
	--cfw-body-font-family: var(--fms-font-body);
	--cfw-heading-font-family: var(--fms-font-heading);
}

/*
 * The secondary button's colours have to be set as the plugin's own variables,
 * not as properties. Its rule declares `color` with `!important`, so no
 * selector this theme can write will beat it; the variable is the documented
 * way in and it is the same approach already used for the side cart below.
 * Background and border are not !important, so those stay as properties in the
 * button block above.
 */
main.checkoutwc,
.cfw-side-cart-contents {
	--cfw-buttons-secondary-background-color: transparent;
	--cfw-buttons-secondary-text-color: var(--fms-forest);
	--cfw-buttons-secondary-hover-background-color: var(--fms-forest);
	--cfw-buttons-secondary-hover-text-color: var(--fms-cream);
}

/* ------------------------------------------------------------------ fields */

.checkoutwc .form-row input[type="text"],
.checkoutwc .form-row input[type="email"],
.checkoutwc .form-row input[type="tel"],
.checkoutwc .form-row input[type="password"],
.checkoutwc .form-row input[type="number"],
.checkoutwc .form-row select,
.checkoutwc .form-row textarea {
	min-height: var(--fms-field-h);
	padding: 14px 16px 12px;
	border: 1px solid var(--fms-border);
	border-radius: 10px;
	background: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.checkoutwc .form-row label.cfw-floatable-label,
#cfw-cart-summary label.cfw-floatable-label {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	color: var(--fms-muted);
}

/* The plugin sets the placeholder with !important, so this has to as well. */
.checkoutwc .form-row ::placeholder,
#cfw-cart-summary ::placeholder {
	color: var(--fms-muted) !important;
}

.checkoutwc input[type="checkbox"],
main.checkoutwc input[type="checkbox"] {
	border: 1px solid var(--fms-border);
	border-radius: 4px;
	background-color: var(--fms-white);
}

/* ----------------------------------------------------------------- buttons */

.checkoutwc .cfw-secondary-btn,
main.checkoutwc .cfw-secondary-btn {
	border-radius: var(--fms-radius-pill);
}

.checkoutwc .cfw-primary-btn,
main.checkoutwc .cfw-primary-btn {
	border-radius: var(--fms-radius-pill);
}

/* -------------------------------------------------------- option groups */

.cfw-accordion .cfw-radio-reveal-group,
.checkoutwc .cfw-accordion .cfw-radio-reveal-group {
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
}

/* ---------------------------------------------------------------- notices */

.cfw-alert,
.checkoutwc .cfw-alert {
	border: 1px solid var(--fms-border);
	border-left: 4px solid var(--fms-brass);
	border-radius: var(--fms-radius-input);
	background: var(--fms-sage);
	color: var(--fms-ink);
}

/*
 * WooCommerce's own notices, inside the checkout. The plugin paints them
 * #fafafa on #dfe3e8 with #383d41 text and marks the background !important, so
 * all three are replaced here rather than in forms.css, which the plugin's
 * sheet outranks on this page.
 */
.checkoutwc .woocommerce-error,
.checkoutwc .woocommerce-info,
.checkoutwc .woocommerce-message,
main.checkoutwc .woocommerce-error,
main.checkoutwc .woocommerce-info,
main.checkoutwc .woocommerce-message {
	border: 1px solid var(--fms-border) !important;
	border-left: 4px solid var(--fms-brass) !important;
	border-radius: var(--fms-radius-input);
	background-color: var(--fms-sage) !important;
	color: var(--fms-ink);
}

.checkoutwc .woocommerce-error {
	border-left-color: var(--fms-forest) !important;
}

/* --------------------------------------------------------------- the grey
 * `.cfw-light-gray` is the plugin's utility class for secondary text, and it is
 * hardcoded to #737373. Muted is the palette's equivalent.
 */
main.checkoutwc .cfw-light-gray {
	color: var(--fms-muted);
}

/*
 * The last six. Each was measured on the rendered checkout and each is a colour
 * the palette does not have: #d9d9d9 on the field borders, #e6e6e6 on a blocked
 * panel, #eeeeee down the side of the summary, #717171 on the quantity link,
 * black on the order total and #eff1f3 above it.
 *
 * `!important` appears only where the plugin used it first. Its field border is
 * `border: 1px solid #d9d9d9 !important`, and there is no selector that beats
 * an important declaration.
 */

.checkoutwc .form-row input[type="text"],
.checkoutwc .form-row input[type="email"],
.checkoutwc .form-row input[type="tel"],
.checkoutwc .form-row input[type="password"],
.checkoutwc .form-row input[type="number"],
.checkoutwc .form-row select,
.checkoutwc .form-row textarea {
	border-color: var(--fms-border) !important;
}

main.checkoutwc .cfw-blocked,
.checkoutwc .cfw-blocked {
	border-color: var(--fms-border);
}

main.checkoutwc .col-lg-5,
.checkoutwc form.checkout > .col-lg-5 {
	border-left-color: var(--fms-border);
}

main.checkoutwc .cfw-quantity-bulk-edit,
.checkoutwc .cfw-quantity-bulk-edit {
	color: var(--fms-muted);
}

main.checkoutwc table.cfw-module tr.order-total,
main.checkoutwc table.cfw-module tr.order-total th,
main.checkoutwc table.cfw-module tr.order-total td {
	border-top-color: var(--fms-border);
	color: var(--fms-ink);
}

/*
 * Four more, each pinned to its actual source rather than guessed at.
 *
 * Two are ID selectors, `#cfw-payment-request-buttons` and `#cfw-cart-summary`,
 * which no class can outrank, so the ids are used. One is the loading shimmer's
 * own custom property, which is the right lever for it. The last is the cart
 * item's secondary text at #717171.
 */

:root,
main.checkoutwc {
	--cfw-loading-shimmer-primary-color: var(--fms-sage);
}

#cfw-payment-request-buttons {
	border-color: var(--fms-border);
	border-radius: var(--fms-radius-card);
}

#cfw-cart-summary {
	border-inline-start-color: var(--fms-border);
}

.cfw-edit-item-quantity-control-wrap,
.cfw-cart-table .cart-item-row .cfw-cart-item-description .cfw-cart-item-data {
	color: var(--fms-muted);
}

/*
 * The step indicator, and the last of the small targets.
 *
 * The three steps are `a.cfw-small` inside the plugin's breadcrumb, drawn at 12px
 * and 74 by 12. The mockup draws them at 14.5px beside a numbered disc, and
 * criterion 9 wants 44px at 390. The disc is the plugin's own and its colours
 * already come from the design settings, so only the type and the hit area
 * change here.
 */

main.checkoutwc a.cfw-small,
.checkoutwc .cfw-tab-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	font-weight: var(--fms-weight-medium);
	font-size: 14.5px;
}

/* `flex: none` matters: inside the side cart's row the buttons were given 44px
 * and then shrunk back to 30 by the flex layout. */
.cfw-quantity-stepper-btn-minus,
.cfw-quantity-stepper-btn-plus,
main.checkoutwc .cfw-quantity-stepper-btn-minus,
main.checkoutwc .cfw-quantity-stepper-btn-plus,
.cfw-side-cart-contents .cfw-quantity-stepper-btn-minus,
.cfw-side-cart-contents .cfw-quantity-stepper-btn-plus {
	flex: none;
	width: var(--fms-tap-min);
	height: var(--fms-tap-min);
	min-width: var(--fms-tap-min);
}

.cfw-quantity-stepper-value-label,
main.checkoutwc .cfw-quantity-stepper-value-label,
.cfw-side-cart-contents .cfw-quantity-stepper-value-label {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fms-tap-min);
	min-height: var(--fms-tap-min);
}

/* ------------------------------------------------- the floating cart button
 * CheckoutWC can put a floating cart button in the corner of every page. The
 * design does not have one, and the header already carries a cart with a count,
 * so a second one is a duplicate control rather than a feature. It is hidden
 * here rather than switched off in the plugin's settings, because settings are
 * not carried by version control and this is.
 *
 * The variables are still set. Its icon colour falls back to #222, which is a
 * ninth colour, and if the client ever turns the button back on it should be in
 * the palette when it appears rather than a fortnight later.
 */

:root {
	--cfw-side-cart-icon-color: var(--fms-forest);
	--cfw-side-cart-icon-text-color: var(--fms-ink);
	--cfw-side-cart-button-background: var(--fms-white);
	--cfw-side-cart-quantity-background: var(--fms-forest);
	--cfw-side-cart-quantity-text-color: var(--fms-cream);
}

#cfw-side-cart-floating-button,
.cfw-side-cart-floating-button-anchor {
	display: none;
}