/**
 * Reusable action states. Existing component geometry remains in frontend.css.
 */

/* #701723, which is --ps-color-brand-700 exactly — named rather than written
   out so it keeps moving with the scale. Every primary action shares it. */
.myc-card-buy,
.myc-cart-checkout,
.myc-load-more,
.myc-product-purchase button.single_add_to_cart_button,
.myc-product-purchase .single_add_to_cart_button,
.myc-product-purchase button.myc-ajax-add-to-cart-button {
	background: var(--ps-color-brand-700);
	transition: background-color var(--ps-transition-fast), border-color var(--ps-transition-fast), color var(--ps-transition-fast), box-shadow var(--ps-transition-fast), transform var(--ps-transition-fast);
}

/*
 * Outranks WooCommerce's .button.alt defaults without using !important.
 *
 * font-weight is stated explicitly, at the same 700 WooCommerce's own
 * `.woocommerce button.button { font-weight: 700; }` already carries, rather
 * than left to whichever of the two happens to win — that rule wraps its
 * `body` context in :where(), which carries zero specificity, so it and
 * product-options.css's shared declaration are equally specific and only
 * source order (WooCommerce's stylesheet loads second) decided it.
 */
body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.single_add_to_cart_button,
body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.myc-ajax-add-to-cart-button {
	background-color: var(--ps-color-brand-700);
	color: #fff;
	font-weight: 700;
}

/*
 * Colour alone carries the hover; these buttons do not move under the
 * pointer. The tone sits between brand-600 and brand-700 and has no slot on
 * that scale, so it is written out rather than given a token that would
 * imply a step the scale does not have.
 */
.myc-card-buy:hover,
.myc-cart-checkout:hover,
.myc-load-more:hover,
.myc-product-purchase button.single_add_to_cart_button:hover:not(:disabled),
.myc-product-purchase .single_add_to_cart_button:hover:not(:disabled),
.myc-product-purchase button.myc-ajax-add-to-cart-button:hover:not(:disabled) {
	background: #852733;
}

body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.single_add_to_cart_button:hover:not(:disabled),
body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.myc-ajax-add-to-cart-button:hover:not(:disabled) {
	background-color: #852733;
}

.myc-card-buy:active,
.myc-cart-checkout:active,
.myc-load-more:active,
.myc-product-purchase button.single_add_to_cart_button:active:not(:disabled),
.myc-product-purchase .single_add_to_cart_button:active:not(:disabled),
.myc-product-purchase button.myc-ajax-add-to-cart-button:active:not(:disabled) {
	transform: translateY(1px);
}

.myc-card-link,
.myc-page-link,
.myc-primary-link {
	transition: background-color var(--ps-transition-fast), border-color var(--ps-transition-fast), color var(--ps-transition-fast), box-shadow var(--ps-transition-fast), transform var(--ps-transition-fast);
}

.myc-card-link:hover,
.myc-card-link:focus-visible,
.myc-page-link:hover,
.myc-page-link:focus-visible {
	border-color: var(--ps-color-brand-600);
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
}

.myc-page-link.is-current {
	border-color: var(--ps-color-brand-700);
	background: var(--ps-color-brand-700);
}

.myc-primary-link:hover,
.myc-primary-link:focus-visible {
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
}

.myc-secondary-link:hover,
.myc-secondary-link:focus-visible {
	border-color: rgb(255 255 255 / 58%);
	background: rgb(255 255 255 / 10%);
}

.myc-card-buy.is-loading,
.myc-product-purchase .single_add_to_cart_button.is-loading,
.myc-product-purchase .myc-ajax-add-to-cart-button.is-loading {
	background: var(--ps-color-brand-700);
}

/*
 * Something outside every author stylesheet on this page halves this
 * button's opacity while it carries the disabled attribute — checked all of
 * them, none declare it, and removing the disabled attribute alone (with
 * every class intact) already restores full opacity. That points at the
 * browser's own default for a disabled <button>, not WooCommerce or this
 * theme, and it survives a plain `opacity: 1` here. Only !important beats it.
 *
 * Fill matches --ps-color-summary-fill on purpose, the same colour as the
 * totals box, so a disabled purchase button and the totals it can't yet
 * total read as one family.
 */
.myc-product-purchase .myc-ajax-add-to-cart-button:disabled,
.myc-product-purchase .single_add_to_cart_button:disabled {
	background: var(--ps-color-summary-fill);
	color: var(--ps-color-text-muted);
	opacity: 1 !important;
}

body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.single_add_to_cart_button:disabled,
body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.myc-ajax-add-to-cart-button:disabled {
	background-color: var(--ps-color-summary-fill);
	color: var(--ps-color-text-muted);
	opacity: 1 !important;
}

.myc-product-purchase .single_add_to_cart_button.is-loading:disabled,
.myc-product-purchase .myc-ajax-add-to-cart-button.is-loading:disabled,
body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.single_add_to_cart_button.is-loading:disabled,
body.woocommerce.myc-app-body .myc-product-purchase button.button.alt.myc-ajax-add-to-cart-button.is-loading:disabled {
	background-color: var(--ps-color-brand-700);
	color: transparent;
	opacity: 1;
	cursor: progress;
}