/* SparkED — the commerce skin's rules for the header's cart, on every page.
 *
 * The header's mini-cart drawer opens on any page, so the rules it uses load everywhere WooCommerce is active: the
 * buttons (its "View my cart", "Go to checkout" and "Start shopping"), the notices, a course's name and image in a
 * line, the totals' borders. The rest of the commerce skin (commerce.css) loads only on the store's own views
 * (MP-1324, Audit MP-1316 G2). These rules moved here from commerce.css unchanged and in their order; on the store's
 * views commerce.css loads after this sheet. Presentation only, as commerce.css.
 */

/* Buttons: WooCommerce's classic and block buttons take the site's pill. So do the commerce plugin's course links on
 * the order-received page and a notice's "View cart" (MP-1045): a block page has no .woocommerce wrapper around them.
 * Their words sit in the middle at any height (Chris's walk, MP-1430): WooCommerce lays some out as blocks, which put
 * the words at the top of a taller button. */
.woocommerce a.button,
#sparked-order-state a.button,
.wc-block-components-notice-banner .wc-forward,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--coral-dark);
	text-align: center;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	/* The site's button motion (site.css): eased colour, a 1px lift, a soft shadow. */
	transition: background-color var(--sparked-motion-button) var(--sparked-ease), box-shadow var(--sparked-motion-button) var(--sparked-ease), transform var(--sparked-motion-button) var(--sparked-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
#sparked-order-state a.button:hover,
.wc-block-components-notice-banner .wc-forward:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover {
	background: var(--sparked-role-primary-hover);
	color: var(--wp--preset--color--paper);
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* WooCommerce's own "alt" (primary) button: the same pill, the same states (eng-8f85). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--wp--preset--color--coral-dark);
	color: var(--wp--preset--color--paper);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--sparked-role-primary-hover);
	color: var(--wp--preset--color--paper);
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Pressed sinks back; focus shows the ring whether or not the pointer is over it. */
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
#sparked-order-state a.button:active,
.wc-block-components-notice-banner .wc-forward:active,
.wc-block-components-button:not(.is-link):active,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:active,
.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active {
	transform: translateY(1px);
	box-shadow: none;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
#sparked-order-state a.button:focus-visible,
.wc-block-components-notice-banner .wc-forward:focus-visible,
.wc-block-components-button:not(.is-link):focus-visible,
.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:focus-visible,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
	outline: var(--sparked-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	.woocommerce #respond input#submit:hover,
	#sparked-order-state a.button:hover,
	.wc-block-components-notice-banner .wc-forward:hover,
	.wc-block-components-button:not(.is-link):hover,
	.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover,
	.wc-block-cart__submit-button:hover,
	.wc-block-components-checkout-place-order-button:hover,
	.woocommerce a.button:active,
	.woocommerce button.button:active,
	.woocommerce input.button:active,
	.woocommerce #respond input#submit:active,
	#sparked-order-state a.button:active,
	.wc-block-components-notice-banner .wc-forward:active,
	.wc-block-components-button:not(.is-link):active,
	.wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:active,
	.wc-block-cart__submit-button:active,
	.wc-block-components-checkout-place-order-button:active {
		transform: none;
	}
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.wc-block-components-button:disabled {
	background: var(--wp--preset--color--paper-deep);
	color: var(--wp--preset--color--ink-soft);
	opacity: 1;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wc-block-components-button.is-link,
.woocommerce a.remove {
	color: var(--wp--preset--color--cobalt-dark);
}

/* Notices: the four status pairs (design team C2, site.css "statuses"), each with its icon and a label, never colour
 * alone. WooCommerce's own notices keep their markup, role and wording; only their look changes. The icon is the
 * ::after (placed at the start), the label the ::before (read first). WooCommerce's filled icon gives way to the
 * coordinated stroke icon. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	--sparked-status-dark: var(--sparked-status-info-dark);
	--sparked-status-light: var(--sparked-status-info-light);
	--sparked-status-icon: var(--sparked-icon-info);
	--sparked-status-label: "Information";
	position: relative;
	padding: 1rem 1.25rem 1rem 3.25rem;
	border: 1px solid var(--sparked-status-dark);
	border-radius: var(--sparked-message-radius, 0.375rem 1.5rem 0.75rem 0.375rem); /* site.css: one edge, the four corners (MP-2140) */
	background: var(--sparked-status-light);
	color: var(--wp--preset--color--ink);
	list-style: none;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	--sparked-status-dark: var(--sparked-status-error-dark);
	--sparked-status-light: var(--sparked-status-error-light);
	--sparked-status-icon: var(--sparked-icon-error);
	--sparked-status-label: "Error";
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	--sparked-status-dark: var(--sparked-status-success-dark);
	--sparked-status-light: var(--sparked-status-success-light);
	--sparked-status-icon: var(--sparked-icon-success);
	--sparked-status-label: "Success";
}

.wc-block-components-notice-banner.is-warning {
	--sparked-status-dark: var(--sparked-status-warning-dark);
	--sparked-status-light: var(--sparked-status-warning-light);
	--sparked-status-icon: var(--sparked-icon-warning);
	--sparked-status-label: "Warning";
}

/* WooCommerce colours each kind of banner with two classes (.is-error and the rest); this outranks them by one more,
 * whichever stylesheet loads last. */
.wc-block-components-notice-banner.wc-block-components-notice-banner:is(.is-error, .is-success, .is-warning, .is-info) {
	background: var(--sparked-status-light);
	border-color: var(--sparked-status-dark);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content::before {
	content: var(--sparked-status-label);
	display: block;
	position: static;
	margin-block-end: 0.15rem;
	color: var(--sparked-status-dark);
	font-family: inherit;
	font-weight: 700;
}

.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after,
.wc-block-components-notice-banner::after {
	content: "";
	position: absolute;
	inset-inline-start: 1.1rem;
	top: 1.05rem;
	width: 1.4rem;
	height: 1.4rem;
	background: var(--sparked-status-dark);
	-webkit-mask: var(--sparked-status-icon) center / contain no-repeat;
	mask: var(--sparked-status-icon) center / contain no-repeat;
}

.wc-block-components-notice-banner > svg {
	display: none;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
	color: var(--sparked-status-dark);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--peacock-light);
}

/* A course's name in the cart and the order summary: a card title, so Hanken Grotesk 700 (B2). */
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wc-block-components-totals-item,
.wc-block-components-totals-wrapper,
.wc-block-components-panel {
	border-color: var(--wp--preset--color--border) !important;
}

/* Notices: WooCommerce's banner padding carries !important, so the icon sat on the "Success" label. */
.wc-block-components-notice-banner.wc-block-components-notice-banner {
	padding: 1rem 1.25rem 1rem 3.25rem !important;
}

/* Each notice closes (Chris's walk, MP-1430; notices.js adds the button): a ✕ at its end, 44 px to touch, in the
   notice's own status colour; the words keep clear of it. */
.sparked-notice__close {
	position: absolute;
	inset-block-start: 0.4rem;
	inset-inline-end: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--sparked-status-dark);
	font: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.sparked-notice__close:hover {
	box-shadow: inset 0 0 0 2px var(--sparked-status-dark);
}

.sparked-notice__close:focus-visible {
	outline: 2px solid var(--sparked-status-dark);
	outline-offset: 2px;
}

.sparked-has-close.sparked-has-close,
.wc-block-components-notice-banner.wc-block-components-notice-banner.sparked-has-close {
	padding-inline-end: 3.75rem !important;
}

/* "View cart" in a notice is a button after the words, not an underlined link floated before them (WooCommerce
   forces its colour, ground and padding with !important). */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content:has(> .wc-forward) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content:has(> .wc-forward)::before {
	flex-basis: 100%;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wc-forward {
	order: 1;
	float: none;
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.5rem 1.1rem !important;
	background: var(--wp--preset--color--coral-dark) !important;
	color: var(--wp--preset--color--paper) !important;
	font-size: var(--wp--preset--font-size--small);
	opacity: 1;
	text-decoration: none;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wc-forward:hover {
	background: var(--sparked-role-primary-hover) !important;
}