/* SparkED — the commerce skin.
 *
 * Styles WooCommerce's own cart, checkout, order and account pages so they belong to the site. Presentation
 * only: no template of those pages is overridden and no behaviour is changed here — the logic of sign-in,
 * pricing and payment belongs to the commerce plugin. Everything is a colour, a radius, a font or a space.
 *
 * Loaded on the store's own views only (MP-1324). The rules the header's cart drawer uses on every page (buttons,
 * notices, a line's name and image, the totals' borders) are in commerce-header.css, which loads before this sheet.
 */

/* --------------------------------------------------------------------------------- shared surfaces */

.woocommerce-page main,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-form-border-radius: var(--wp--custom--radius--small);
}

.woocommerce-cart main.wp-block-group,
.woocommerce-checkout main.wp-block-group,
.woocommerce-account main.wp-block-group,
.woocommerce-order-received main.wp-block-group {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* A page that opens on a colored band meets the header with no strip of page between them, and one that ends on a
   colored section meets the footer the same way (MP-893): the band is the page's top, not a box inside it. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-order-received) main.wp-block-group:has(> .sparked-section.has-background:first-child) {
	padding-block-start: 0;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-order-received) main.wp-block-group:has(> .sparked-section.has-background:last-child) {
	padding-block-end: 0;
}

.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-account .wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------------------ the course page */

/*
 * A1 (design team; MP-866): the editorial column (title, summary, facts, outcomes, overview, details) beside the art
 * and the purchase panel. On a wide screen the panel stays in view within this layout and stops at its end; on a phone
 * the order is art, title and facts, purchase, then the rest, and nothing is pinned to the screen.
 */
.sparked-course-layout {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.sparked-course-layout > .wp-block-column:last-child {
	align-self: stretch;
}

@media (min-width: 1100px) {
	.sparked-course-aside {
		position: sticky;
		top: 1.5rem;
	}
}

@media (max-width: 781px) {
	.sparked-course-layout > .wp-block-column,
	.sparked-course-aside {
		display: contents;
	}

	.sparked-course-layout .sparked-course-image { order: 1; }
	.sparked-course-layout .sparked-course-intro { order: 2; }
	.sparked-course-layout .sparked-course-buy { order: 3; }
	.sparked-course-layout .sparked-course-outcomes { order: 4; }
	.sparked-course-layout .sparked-course-overview { order: 5; }
	.sparked-course-layout .sparked-course-details { order: 6; }
}

.sparked-course-intro {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: var(--wp--preset--color--gold-light);
}

.sparked-course-intro .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.sparked-course-intro .wp-block-post-excerpt {
	margin-block-end: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-soft);
}

.sparked-course-intro .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.sparked-course-layout > .wp-block-column:first-child > * + * {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.sparked-course-image {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* The outcomes, first under the title: three short statements, each a card with a tick. */
.sparked-course-outcomes h2 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--heading);
}

.sparked-course-outcomes ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sparked-course-outcomes li {
	position: relative;
	padding: 3.25rem 1.25rem 1.25rem;
	background: var(--wp--preset--color--peacock-light);
	font-weight: 600;
	line-height: 1.45;
}

.sparked-course-outcomes li::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	inset-inline-start: 1.25rem;
	width: 0.95rem;
	height: 0.5rem;
	border-inline-start: 3px solid var(--wp--preset--color--peacock-dark);
	border-block-end: 3px solid var(--wp--preset--color--peacock-dark);
	transform: rotate(-45deg);
}

/* The placeholder (a course with no image yet) fills the frame as a real image does. */
.sparked-course-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The course's picture takes the four-corner shape its figure sets (site.css). */
	border-radius: var(--sparked-tl) var(--sparked-tr) var(--sparked-br) var(--sparked-bl);
}

.sparked-course-buy .wc-block-components-product-price,
.sparked-course-buy .wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ink);
}

.sparked-course-buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
}

.sparked-course-buy form.cart .quantity {
	display: none; /* A course is bought once; the commerce plugin sells each individually. */
}

.sparked-course-buy form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	text-align: center;
}

.sparked-course-buy p.stock {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

.sparked-course-overview > h2 {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------------- cart (blocks) */

.wp-block-woocommerce-cart .wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-cart-items th,
.wp-block-woocommerce-cart .wc-block-cart-items td {
	border-color: var(--wp--preset--color--line);
}

/* Sentence case, as everywhere (the packet's §4). WooCommerce's own rules are table.wc-block-cart-items
   .wc-block-cart-items__header and .wc-block-cart .wc-block-cart__totals-title, so these out-rank them. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header,
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-soft);
}

/* A course's row in a narrow cart (C41 F5, WCAG 1.4.10 Reflow): WooCommerce's grid gives the course a fixed 132px column
   beside the 80px picture and the price, so at 320px the row ran about 30px past the window and the whole page scrolled
   sideways. The course column may now narrow when the row has no room (never wider than WooCommerce's 132px), and a long
   word in it wraps rather than holding it open. Wider carts are drawn exactly as before. */
:root .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: 80px minmax(0, 132px);
}

:root .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__product {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar-layout .wc-block-components-sidebar > .wp-block-woocommerce-checkout-order-summary-block {
	/* Panels, not cards (MP-893): the small radius, never a pill or a large curve that clips what is inside. */
	border-radius: var(--wp--custom--radius--small);
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--card);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading);
}

/* WooCommerce's empty-cart mark is a crying face. This site does not scold; the words are enough. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

.wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading);
}

/* The empty cart is the site's one empty state (A11), standing on the page with no box around it (MP-893). */
.wp-block-woocommerce-empty-cart-block {
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

/* ----------------------------------------------------------------------------- checkout (blocks) */

.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* WooCommerce sets its fields inside a form at (0,3,1), and its focus at (0,4,1) with no colour: the ":root
 * .wc-block-components-form" forms outrank both, so the checkout's fields take these too (measured in the browser). */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
:root .wc-block-components-form .wc-block-components-text-input input[type="text"],
:root .wc-block-components-form .wc-block-components-text-input input[type="email"],
:root .wc-block-components-form .wc-block-components-text-input input[type="tel"],
:root .wc-block-components-form .wc-block-components-text-input input[type="number"],
:root .wc-block-components-form .wc-block-components-text-input input[type="password"],
:root .wc-block-components-form .wc-block-components-text-input input[type="url"],
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	/* A field's edge stands out 3:1 from the page (WCAG 1.4.11), as the site's own fields (site.css). */
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.wc-block-components-text-input input:focus,
:root .wc-block-components-form .wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="url"]):focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--cobalt-dark);
	box-shadow: 0 0 0 3px var(--wp--preset--color--cobalt-dark);
	outline: none;
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: var(--wp--custom--radius--small);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked,
.wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--cobalt-dark);
}

.wc-block-checkout__actions_row {
	gap: 1rem;
}

/* The commerce plugin's embedded payment step and order-state panel sit in a soft card. */
.woocommerce-order-pay #order_review,
.woocommerce-order-pay .woocommerce > ul.order_details,
.woocommerce-checkout .woocommerce > .woocommerce-order {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--card);
}

/* ------------------------------------------------------------------- order confirmation and orders */

.wc-block-order-confirmation-status,
.woocommerce-thankyou-order-received {
	font-family: var(--wp--preset--font-family--display);
}

.wc-block-order-confirmation-summary-list,
.woocommerce ul.order_details {
	padding: 1.25rem 1.5rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--peacock-light);
	border: 0;
}

.woocommerce table.shop_table,
.wc-block-order-confirmation-totals table {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--card);
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.wc-block-order-confirmation-totals table th,
.wc-block-order-confirmation-totals table td {
	padding: 0.9rem 1.1rem;
	border-color: var(--wp--preset--color--line);
}

.woocommerce table.shop_table thead th {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------------------------------ my account */

.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* WooCommerce's float clearfix (::before and ::after, each with content) would be grid items: the empty ::before took
 * the first cell and pushed the tabs into the second column, the content under them. A grid needs no clearfix. */
:root .woocommerce-account .woocommerce::before,
:root .woocommerce-account .woocommerce::after {
	content: none;
}

@media (min-width: 782px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 15rem minmax(0, 1fr);
		align-items: start;
	}

	/* Signed in, the tabs and an order table need more than the text column: the wide width (the page's section holds
	 * its content to the text column, and the content holds the account to it again). */
	.woocommerce-account.logged-in .sparked-section > .wp-block-post-content,
	.woocommerce-account.logged-in .wp-block-post-content > .woocommerce {
		max-width: var(--wp--style--global--wide-size);
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* The tabs' box has the four-corner signature at the medium size (section 10 of site.css: a smaller content box), its
 * small corners at the top so the first tab's highlight sits clear of them, the large one at the bottom right, away
 * from the tabs' words (Chris's 11-04 walk, MP-2318). A border all round, never one side only. */
.woocommerce-MyAccount-navigation ul {
	--sparked-shape-l: 2.5rem;
	--sparked-shape-m: 1.25rem;
	--sparked-shape-s: 0.5rem;
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0.6rem 0.6rem 1.25rem;
	list-style: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--sparked-shape-s) var(--sparked-shape-s) var(--sparked-shape-l) var(--sparked-shape-m);
	background: var(--wp--preset--color--card);
}

/* WooCommerce's own sheet gives each tab 1em above and below (0.35em on a phone) on top of the link's padding, and 2em
 * under the list: six tabs stood about 490px tall. The link's padding alone sizes a tab. */
:root .woocommerce-account .woocommerce-MyAccount-navigation li {
	padding: 0;
}

:root .woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
}

/* Chris's 11-04 walk (MP-2318): "far too much white space under My account and above and below the sign-in". The title
 * band's own padding spaces the title, at the smaller step, with no margin under the title (the cart's and checkout's
 * title keeps its margin); the account section ends at the smaller step too. Its top stays at least the wave's height
 * plus 1rem (site.css section 10: the curve never reaches the words). */
.woocommerce-account .wp-block-post-title {
	margin-block-end: 0;
}

.woocommerce-account main > .sparked-section:first-child {
	padding-block: var(--wp--preset--spacing--40);
}

.woocommerce-account main > .sparked-section:first-child + .sparked-section {
	padding-block-end: var(--wp--preset--spacing--40);
}

/* WooCommerce's notices holder is a grid item of the account even when it holds nothing: empty, it added one grid gap
 * above the sign-in. It takes its place again as soon as a notice is in it. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Signed out, the sign-in's heading (the identity plugin's governed sign-in) opens the section: no margin above it. */
.woocommerce-account .woocommerce .sparked-m2-governed-login > h2:first-child {
	margin-block-start: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 0.95rem;
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--gold-light);
	font-weight: 600;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-ResetPassword {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--card);
}

.woocommerce form .form-row label {
	font-weight: 600;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.85rem 1.1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
}

/* Focus: the site's Cobalt edge and ring (site.css), at this rule's own specificity (en2-8832). */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--cobalt-dark);
	box-shadow: 0 0 0 3px var(--wp--preset--color--cobalt-dark);
	outline: none;
}

/* WooCommerce's "Show password" button (the eye beside every WooCommerce password field: sign-in, register, account
 * details, checkout) is only its 22px icon, under the 24px a pointer target needs (WCAG 2.2 2.5.8; C41 F1). Here it
 * is 2.75rem square with the icon in its middle, and the field keeps its words clear of it. Its focus ring is the
 * site's own (site.css). WooCommerce's markup, script and sheet are not changed. */
:root .woocommerce form .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	right: 0.25rem;
}

/* The field's words stop before the button (the button and its gap): the fields' padding above would otherwise run
 * them under it, the password's dots and, shown, the password itself. */
:root .woocommerce form span.password-input input {
	padding-right: 3.5rem;
}

/* A status word on an order: a quiet pill. */
.woocommerce-orders-table__cell-order-status,
.woocommerce-order-details mark,
.woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* ----------------------------------------------------- the four-corner signature on the store's boxes (MP-964) */

/* The outcomes: the medium set (site.css section 10); the tick and the words clear the large curve. */
.sparked-course-outcomes li {
	--sparked-box-pad: calc(var(--sparked-shape-l) / 2 + 0.5rem);
	padding: calc(var(--sparked-box-pad) + 1.75rem) var(--sparked-box-pad) var(--sparked-box-pad);
}

.sparked-course-outcomes li::before {
	top: calc(var(--sparked-box-pad) + 0.25rem);
	inset-inline-start: var(--sparked-box-pad);
}

.sparked-course-intro {
	--sparked-box-pad: calc(var(--sparked-shape-l) / 2 + 0.5rem);
	padding: max(clamp(1.5rem, 4vw, 2.75rem), var(--sparked-box-pad));
}

/* The cart's and the checkout's summary boxes, the order details and the sign-in, register and coupon forms are
   content boxes: the medium signature, the padding clear of it. What sits inside them (the summary's own block,
   the fields) keeps the small radius. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar,
.wc-block-order-confirmation-summary-list,
.woocommerce ul.order_details,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-ResetPassword {
	--sparked-shape-l: 2.5rem;
	--sparked-shape-m: 1.25rem;
	--sparked-shape-s: 0.5rem;
	--sparked-box-pad: calc(var(--sparked-shape-l) / 2 + 0.5rem);
	border-radius: var(--sparked-shape-l) var(--sparked-shape-m) var(--sparked-shape-s) var(--sparked-shape-s);
	padding: max(clamp(1.25rem, 3vw, 2rem), var(--sparked-box-pad));
}

/* WooCommerce's layout sets its sidebars' padding with a longer selector (none on a phone, about 2% on a wide
   screen), which would put the summary's first line inside the curve: this one is longer still. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar:is(.wc-block-cart__sidebar, .wc-block-checkout__sidebar) {
	padding: max(clamp(1.25rem, 3vw, 2rem), var(--sparked-box-pad));
}

/* ------------------------------------- the order-received page, the store's notices, the orders table (MP-1045) */

/* The head: "Thank you", then the course's state and its button in a content box (the commerce plugin's panel,
   which the theme's order-received template places here). */
.sparked-order-received__head .wc-block-order-confirmation-status {
	margin-block: 0;
}

#sparked-order-state {
	margin-block-start: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--card);
}

#sparked-order-state > p {
	margin: 0;
}

#sparked-order-state > p:first-child {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
}

#sparked-order-state > p + p,
#sparked-order-state > .sparked-order-courses {
	margin-block-start: 1rem;
}

#sparked-order-state .sparked-order-courses {
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

#sparked-order-state .sparked-order-courses li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding-block: 0.75rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
}

/* The order: one even gap between its parts, whatever WooCommerce's blocks set (48 px here, 24 there, none above
   the addresses once a theme's gap rule wins). */
.sparked-order-received.sparked-order-received > * {
	margin-block: 0;
}

.sparked-order-received.sparked-order-received > * + * {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.sparked-order-received .wp-block-heading {
	margin-block: 0 0.75rem;
}

/* The summary band: WooCommerce zeroes a summary list's padding with a longer selector than the theme's (MP-964). */
.wc-block-order-confirmation-summary ul.wc-block-order-confirmation-summary-list {
	padding: max(clamp(1.25rem, 3vw, 2rem), var(--sparked-box-pad));
}

/* Every box on the page in the same medium signature, the words clear of its curves: the course's state, what was
   bought, the addresses and the buyer's other answers (WooCommerce gives the last three its own 4 px corners). */
#sparked-order-state,
.sparked-order-received :is(.wc-block-order-confirmation-totals table, .wc-block-order-confirmation-billing-address, .wc-block-order-confirmation-shipping-address, .wc-block-components-additional-fields-list) {
	--sparked-shape-l: 2.5rem;
	--sparked-shape-m: 1.25rem;
	--sparked-shape-s: 0.5rem;
	--sparked-box-pad: calc(var(--sparked-shape-l) / 2 + 0.5rem);
	border-radius: var(--sparked-shape-l) var(--sparked-shape-m) var(--sparked-shape-s) var(--sparked-shape-s);
}

#sparked-order-state,
.sparked-order-received :is(.wc-block-order-confirmation-billing-address, .wc-block-order-confirmation-shipping-address) {
	padding: max(clamp(1.25rem, 3vw, 2rem), var(--sparked-box-pad));
}

.sparked-order-received .wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list {
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--card);
}

.sparked-order-received .wc-block-order-confirmation-totals table :is(th, td):first-child {
	padding-inline-start: var(--sparked-box-pad);
}

.sparked-order-received .wc-block-order-confirmation-totals table :is(th, td):last-child {
	padding-inline-end: var(--sparked-box-pad);
}

.sparked-order-received .wc-block-order-confirmation-totals table thead th {
	padding-block-start: 1.25rem;
}

.sparked-order-received .wc-block-order-confirmation-totals table tfoot tr:last-child :is(th, td) {
	padding-block-end: 1.25rem;
}

/* My account → Orders: the View button sized for a table row and centred in it, its word in its middle (Chris's walk,
   MP-1430: WooCommerce made it a 50 px block with the word at the top; its block-theme rule, which sets the block,
   carries three classes and a tag, so the second selector carries one more class). */
.woocommerce-orders-table th,
.woocommerce-orders-table td {
	vertical-align: middle;
}

.woocommerce .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.45rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	vertical-align: middle;
}