/* ============================================================
   COMMERCE — cart · checkout · my account · order received
   ------------------------------------------------------------
   Loaded only on those four screens, plus Track order (inc/enqueue.php, priority
   20). It lives here rather than in style.css §13 because it is
   ~1300 lines that would otherwise sit in the global stylesheet
   for every page on a 1GB box — INSTRUCTIONS.md §4's per-page
   rule. style.css §13 points here.

   Two class contracts, not one, because the pages do not share a
   renderer (see inc/commerce.php):

     .wc-block-*    cart + checkout — React, CSS is the only lever
     .woocommerce-* my account + thank-you — classic templates

   Everything is scoped under .wows-commerce. That is deliberate:
   it clears WooCommerce's own block CSS on specificity, so this
   file works regardless of which stylesheet the browser sees
   first. No raw hex — tokens only (INSTRUCTIONS.md §5).

   TABLE OF CONTENTS
   1. Page chrome — container, H1, step indicator
   2. Shared primitives — panels, inputs, buttons
   3. Cart (block)
   4. Checkout (block)
   5. Order received (classic)
   6. My account (classic)
   6b. Track order (classic shortcode)
   7. Responsive — 1040 / 900 / 680
   ============================================================ */


/* ============================================================
   1. PAGE CHROME
   ============================================================ */

.wows-commerce {
	padding-bottom: var(--wows-section);
}

.wows-commerce .wows-breadcrumb {
	padding-top: var(--wows-sp-8);
}

.wows-commerce__head {
	margin-top: var(--wows-sp-6);
	margin-bottom: var(--wows-sp-6);
}

.wows-commerce__title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-3xl);
	font-weight: 700;
	letter-spacing: var(--wows-ls-h1);
	line-height: var(--wows-lh-heading);
	margin: 0;
}

/* --- Step indicator (Cart → Checkout → Done) ---------------- */

.wows-steps {
	display: flex;
	align-items: center;
	gap: var(--wows-sp-3);
	flex-wrap: wrap;
	list-style: none;
	margin: var(--wows-sp-5) auto 0;
	padding-top: 0;
	padding-bottom: 0;
	counter-reset: none;
}

.wows-steps__step {
	display: flex;
	align-items: center;
	gap: var(--wows-sp-1);
}

/* The 40px rule between steps. A pseudo-element rather than a real element so
   the list stays a clean <ol> for screen readers. */
.wows-steps__step:not(:last-child)::after {
	content: "";
	width: 40px;
	height: 1px;
	margin-left: var(--wows-sp-2);
	background: var(--wows-border-strong);
}

.wows-steps__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: var(--wows-fs-sm);
	font-weight: 700;
	background: var(--wows-divider);
	color: var(--wows-text-faint);
}

.wows-steps__label {
	font-size: var(--wows-fs-base);
	font-weight: 600;
	color: var(--wows-text-faint);
}

.wows-steps__step.is-active .wows-steps__dot,
.wows-steps__step.is-done .wows-steps__dot {
	background: var(--wows-accent);
	color: var(--wows-white);
}

.wows-steps__step.is-active .wows-steps__label,
.wows-steps__step.is-done .wows-steps__label {
	color: var(--wows-ink);
}

/* The blocks ship an .alignwide wrapper. This theme has no theme.json, so
   alignwide is inert — but pin the margins so a future one cannot widen the
   cart back out of the container. */
.wows-commerce__body .alignwide,
.wows-commerce__body .alignfull {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}


/* ============================================================
   2. SHARED PRIMITIVES
   ------------------------------------------------------------
   The mockup builds both screens from one bordered white panel
   and one input. Defined once here, used by §3–§6.
   ============================================================ */

/* The checkout step carries `.wc-block-components-form` because Woo's
   packages-style.css resets it with `.wc-block-components-form
   .wc-block-components-checkout-step { background: none; border: none;
   padding: 0; margin: 0 0 24px }` — (0,2,0), loaded after this file, so the
   short form tied and lost and the panels never drew (live, 28 Sep 2026).
   → LESSONS §CSS-2 */
.wows-commerce .wc-block-cart__main,
.wows-commerce .wc-block-components-form .wc-block-components-checkout-step,
.wows-commerce .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,
.wows-commerce .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
}

/* --- Inputs ------------------------------------------------- */

.wows-commerce input[type="text"],
.wows-commerce input[type="email"],
.wows-commerce input[type="tel"],
.wows-commerce input[type="url"],
.wows-commerce input[type="password"],
.wows-commerce input[type="number"],
.wows-commerce input[type="search"],
.wows-commerce select,
.wows-commerce textarea {
	width: 100%;
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-base);
	color: var(--wows-ink);
	background: var(--wows-white);
	border: 1px solid var(--wows-border-strong);
	border-radius: var(--wows-r-chip);
	padding: var(--wows-sp-2) var(--wows-sp-3);
	transition: border-color var(--wows-t-base), box-shadow var(--wows-t-base);
}

.wows-commerce input:focus,
.wows-commerce select:focus,
.wows-commerce textarea:focus {
	outline: none;
	border-color: var(--wows-accent);
	box-shadow: var(--wows-focus-ring);
}

.wows-commerce label {
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	color: var(--wows-text);
}

.wows-commerce .required {
	color: var(--wows-error);
	text-decoration: none;
}

/* --- Buttons ------------------------------------------------
   Woo's classic templates emit .button, the blocks emit
   .wc-block-components-button. Both land on the mockup's accent
   button; the orders table's row actions opt out in §6.

   `.wows-commerce .woocommerce .button` rather than the shorter
   `.wows-commerce .button`, because WooCommerce's own frontend
   CSS styles these as `.woocommerce button.button` — two classes
   and an element, which beats a two-class selector. Three
   classes wins on the class count alone. Without it the Log in
   and View cart buttons stay Woo's default grey. */

.wows-commerce .woocommerce .button,
.wows-commerce .button,
.wows-commerce .wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wows-sp-1);
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-base);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	padding: var(--wows-sp-3) var(--wows-sp-6);
	border: 1px solid transparent;
	border-radius: var(--wows-r-md);
	background: var(--wows-accent);
	color: var(--wows-white);
	transition: background var(--wows-t-base);
}

.wows-commerce .woocommerce .button:hover,
.wows-commerce .button:hover,
.wows-commerce .wc-block-components-button:hover {
	background: var(--wows-accent-dark);
	color: var(--wows-white);
}

.wows-commerce .wc-block-components-button__text {
	display: inline-flex;
	align-items: center;
	gap: var(--wows-sp-1);
}


/* ============================================================
   3. CART (block)
   ------------------------------------------------------------
   Mockup: line-item card + 380px sticky summary, gap 28.
   ============================================================ */

.wows-commerce .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: var(--wows-sp-8);
	align-items: start;
}

/* min-width: 0 is load-bearing. A grid item defaults to `min-width: auto`,
   which is its min-content width — and the line-items table's min-content
   width is the sum of its fixed columns plus padding. Without this the card
   refuses to shrink below that and the whole page scrolls sideways on a
   phone.

   The `.wc-block-components-sidebar-layout` step is load-bearing: Woo's
   cart.css sets `width: 65%` on `.wc-block-components-sidebar-layout
   .wc-block-components-main` — two classes, the same as the short form of
   this selector — and loads after this file, so the tie went to Woo. On live
   (28 Sep 2026) the line-items card filled 395px of a 608px track, which only
   became visible once cross-sells put a card grid inside it. → LESSONS §CSS-2 */
.wows-commerce .wc-block-components-sidebar-layout .wc-block-components-main,
.wows-commerce .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 0;
	float: none;
}

/* --- Line items --------------------------------------------- */

.wows-commerce .wc-block-cart__main {
	overflow: hidden;
}

/* table-layout: fixed so the two declared column widths below are honoured
   exactly. On auto, a long product name widens the product column, the table
   grows past 100%, and the total column is clipped by the card's
   overflow:hidden — which is what rounds the corners. */
.wows-commerce .wc-block-cart-items {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.wows-commerce .wc-block-cart-items__header {
	background: var(--wows-surface-2);
}

/* Selector carries .wc-block-cart__main to clear Woo's
   `.wc-block-cart__main .wc-block-cart-items th:last-child{padding-right:0}`,
   which otherwise strips the right padding from the Total header alone and
   leaves the word sitting on the card's rounded corner. */
.wows-commerce .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header th {
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wows-text-faint);
	border: 0;
	padding: var(--wows-sp-4) var(--wows-sp-7);
}

/* Column widths.
   Woo pins the image column to 80px and the total column to 100px, at a
   specificity of `table.wc-block-cart-items .wc-block-cart-items__header .…`.
   Those widths assume Woo's own 16px cell padding; against the mockup's 26px
   the total column's content box drops to 48px, "RM1,899.00" overflows, and
   the .wc-block-cart__main overflow:hidden that rounds the card's corners
   clips it. So the widths are re-declared at matching specificity rather than
   left to be inherited. Keep the cell padding below and these widths in step.
   Table layout only (container ≥ 700px): the narrow layout further down sets
   its own tracks and zeroes these widths, so there is no phone variant. */
.wows-commerce table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-image,
.wows-commerce table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	width: 98px;
	padding-right: 0;
}

/* display:table-cell undoes Woo's `.wc-block-cart-item__total{display:flex}`.
   A flex <td> stops being a table cell, so the browser stops counting it in
   the column widths and the table runs wide. The right-alignment it was doing
   is handled by text-align plus the inner
   .wc-block-cart-item__total-price-and-sale-badge-wrapper, which stays flex. */
.wows-commerce table.wc-block-cart-items .wc-block-cart-items__header .wc-block-cart-items__header-total,
.wows-commerce table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	display: table-cell;
	width: 160px;
	text-align: right;
}

/* Selector carries .wc-block-cart__main and .wc-block-cart-items to reach
   (0,4,1). Woo zeroes line-item padding twice — `.wc-block-cart__main
   .wc-block-cart-items td{padding:20px 0}` (0,2,1) in its table layout and
   `.wc-block-cart table.wc-block-cart-items td{padding:0}` (0,2,2) in its
   narrow one — and cart.css loads after this file, so the plain
   `.wows-commerce .wc-block-cart-items__row td` (0,2,1) lost both and every
   cell rendered at 0: thumbnail on the card's left edge, total on its right.
   This rule is for the table layout only; the narrow layout below resets it. */
.wows-commerce .wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__row td {
	border: 0;
	border-top: 1px solid var(--wows-border-soft);
	padding: var(--wows-sp-6) var(--wows-sp-7);
	vertical-align: top;
	transition: background var(--wows-t-fast);
}

/* The two cells either side of the product cell take their gutter from its
   padding, so each gives up the inner side: the image keeps 26 + 72 = 98px,
   and the total keeps 160 − 26 = 134px of content — room for "RM470,000.00"
   at 17px. Re-stated at (0,4,2) because the padding rule above, at (0,4,1),
   outranks the image's own padding-right:0 in the widths rule (0,3,2). */
.wows-commerce table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
	padding-right: 0;
}

.wows-commerce table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
	padding-left: 0;
}

/* Narrow layout. Below a 700px container Woo turns each row into a grid —
   `grid-template-columns: 80px 132px`, product spanning to an implicit
   line 4, total auto-placed into a fifth-ish implicit track — which only fits
   at Woo's own zero cell padding. Rather than tune padding against those
   tracks, the theme replaces the grid: thumbnail down the left, product
   beside it, line total under the product, right-aligned. The row carries the
   padding; the cells carry none. Same @container condition as Woo's, so the
   two layouts switch at the same width and on the same box
   (.wp-block-woocommerce-cart, container-type:inline-size in cart.css).
   Specificity: Woo's row rules are (0,3,1) and its cell placements (0,4,1);
   these are (0,4,1) and (0,5,1)/(0,4,2), and also clear the table rules
   above. */
@container (max-width: 699px) {

	.wows-commerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: var(--wows-sp-4);
		row-gap: var(--wows-sp-2);
		padding: var(--wows-sp-5) var(--wows-sp-4);
		border-top: 1px solid var(--wows-border-soft);
	}

	/* Woo draws its own separator under every row but the last, in
	   currentColor at 20%; the theme's border-top above replaces it. */
	.wows-commerce .wc-block-cart table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child) .wc-block-cart-items__row {
		border-bottom: 0;
	}

	/* The header row is hidden here, so the first row's rule would sit on
	   the card's top edge. */
	.wows-commerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row:first-child {
		border-top: 0;
	}

	.wows-commerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
		width: auto;
		min-width: 0;
		padding: 0;
		border: 0;
	}

	.wows-commerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		grid-column: 1;
		grid-row: 1 / span 2;
		padding: 0;
	}

	.wows-commerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2;
		grid-row: 1;
	}

	.wows-commerce .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2;
		grid-row: 2;
		text-align: right;
	}
}

.wows-commerce .wc-block-cart-items__row:hover td {
	background: var(--wows-row-hover);
}

.wows-commerce .wc-block-cart-item__image img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--wows-surface);
	border-radius: var(--wows-r-md);
	padding: var(--wows-sp-1);
}

.wows-commerce .wc-block-components-product-name {
	display: block;
	font-size: var(--wows-fs-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wows-ink);
	text-decoration: none;
	margin-bottom: 4px;
}

.wows-commerce .wc-block-components-product-name:hover {
	color: var(--wows-accent);
}

.wows-commerce .wc-block-cart-item__prices {
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-muted);
	margin-bottom: var(--wows-sp-1);
}

.wows-commerce .wc-block-components-product-metadata {
	font-size: var(--wows-fs-xs);
	color: var(--wows-text-faint);
	line-height: var(--wows-lh-body);
}

/* Woo prints a truncated copy of the product short description under every
   line. The mockup's row carries brand + name + unit price and nothing else,
   and on this catalogue the descriptions are long enough to double the row
   height. Hidden rather than unhooked — the block has no PHP hook. */
.wows-commerce .wc-block-components-product-metadata__description {
	display: none;
}

/* --- Quantity stepper --------------------------------------- */

.wows-commerce .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: var(--wows-sp-4);
	margin-top: var(--wows-sp-2);
}

.wows-commerce .wc-block-components-quantity-selector {
	display: flex;
	align-items: center;
	width: auto;
	min-width: 0;
	border: 1px solid var(--wows-border-strong);
	border-radius: var(--wows-r-sm);
	overflow: hidden;
	background: var(--wows-white);
}

.wows-commerce .wc-block-components-quantity-selector::after {
	display: none;
}

/* Selector deliberately long. Two rules outrank a plain
   `.wows-commerce .wc-block-components-quantity-selector__input`: Woo's own
   `.wc-block-components-quantity-selector input.…__input` (0,3,1), and this
   file's own generic `.wows-commerce input[type="number"]` (0,2,1) in §2 —
   which would otherwise draw a second bordered box around the number, inside
   the stepper's pill. */
.wows-commerce .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	order: 2;
	width: 34px;
	min-width: 0;
	padding: 0;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-base);
	font-weight: 600;
	text-align: center;
	color: var(--wows-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.wows-commerce .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
	box-shadow: none;
	border: 0;
	outline: none;
}

.wows-commerce .wc-block-components-quantity-selector__button {
	width: 36px;
	height: 40px;
	padding: 0;
	font-family: var(--wows-font-body);
	font-size: 17px;
	color: var(--wows-text);
	background: var(--wows-white);
	border: 0;
	border-radius: 0;
	opacity: 1;
	cursor: pointer;
	transition: background var(--wows-t-fast), color var(--wows-t-fast);
}

.wows-commerce .wc-block-components-quantity-selector__button:hover {
	background: var(--wows-divider);
	color: var(--wows-ink);
}

.wows-commerce .wc-block-components-quantity-selector__button--minus {
	order: 1;
}

.wows-commerce .wc-block-components-quantity-selector__button--plus {
	order: 3;
}

/* --- Remove ------------------------------------------------- */

.wows-commerce .wc-block-cart-item__remove-link {
	font-size: var(--wows-fs-sm);
	font-weight: 500;
	color: var(--wows-text-faint);
	background: none;
	border: 0;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
	transition: color var(--wows-t-fast);
}

.wows-commerce .wc-block-cart-item__remove-link:hover {
	color: var(--wows-error);
}

/* --- Line total --------------------------------------------- */

.wows-commerce .wc-block-cart-item__total {
	text-align: right;
	white-space: nowrap;
}

.wows-commerce .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--wows-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--wows-ink);
}

/* --- Summary ------------------------------------------------ */

/* gap:0, with the spacing declared on .wc-block-cart__submit instead. The
   sidebar's three children are the summary card, an express-payments slot that
   is empty on this store, and the submit block — a flex gap would leave a hole
   where the empty slot is. */
.wows-commerce .wc-block-cart__sidebar {
	position: sticky;
	top: var(--wows-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wows-commerce .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
	padding: var(--wows-sp-7);
}

.wows-commerce .wc-block-cart__totals-title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wows-ink);
	padding: 0;
	margin: 0 0 var(--wows-sp-5);
}

.wows-commerce .wc-block-components-totals-wrapper {
	padding: var(--wows-sp-3) 0;
	border-top: 0;
}

.wows-commerce .wc-block-components-totals-wrapper::after {
	display: none;
}

/* Below a 700px container Woo hides the "Cart totals" heading
   (`.wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title
   {display:none}` in cart.css, same @container), which leaves the coupon row
   first in the card: 22px card padding + its own 14px on top, 14px below — the
   "Add coupons" link sat in a 72px band. With the heading gone the card's
   padding is the only top space it needs. */
@container (max-width: 699px) {

	.wows-commerce .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
		padding-top: 0;
	}
}

.wows-commerce .wc-block-components-totals-item {
	font-size: var(--wows-fs-base);
	color: var(--wows-text);
	padding: 0;
	margin-bottom: var(--wows-sp-2);
}

.wows-commerce .wc-block-components-totals-item__value {
	font-weight: 600;
	color: var(--wows-ink);
}

/* Total row */
.wows-commerce .wc-block-components-totals-footer-item {
	padding-top: var(--wows-sp-3);
	border-top: 1px solid var(--wows-border);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	color: var(--wows-ink);
}

.wows-commerce .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wows-font-display);
	font-size: 24px;
	font-weight: 700;
}

.wows-commerce .wc-block-components-totals-footer-item__description,
.wows-commerce .wc-block-components-totals-footer-item-shipping {
	font-size: var(--wows-fs-sm);
	font-weight: 400;
	color: var(--wows-text-muted);
}

/* --- Coupon ------------------------------------------------- */

.wows-commerce .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: var(--wows-fs-base);
	font-weight: 600;
	color: var(--wows-accent);
	padding: 0;
	margin: 0;
}

.wows-commerce .wc-block-components-totals-coupon__form {
	display: flex;
	gap: var(--wows-sp-1);
	margin-top: var(--wows-sp-2);
}

.wows-commerce .wc-block-components-totals-coupon__input {
	flex: 1;
	margin: 0;
}

.wows-commerce .wc-block-components-totals-coupon__button {
	flex-shrink: 0;
	padding: var(--wows-sp-2) var(--wows-sp-5);
	font-size: var(--wows-fs-sm);
	background: var(--wows-search);
	color: var(--wows-ink);
}

.wows-commerce .wc-block-components-totals-coupon__button:hover {
	background: var(--wows-divider);
	color: var(--wows-ink);
}

/* --- Proceed to checkout ------------------------------------ */

.wows-commerce .wc-block-cart__submit {
	margin: var(--wows-sp-4) 0 0;
}

/* Woo makes this container `position: fixed; bottom: 0; width: 100%` and
   docks the button to the foot of the viewport on narrow screens. The mockup
   keeps it in the summary column at every width, and a fixed bar would cover
   the sticky mobile buy-bar the PDP already puts there (style.css §12). Its
   ::before is a drop shadow for the docked state and goes with it. */
.wows-commerce .wc-block-cart__submit-container,
.wows-commerce .wc-block-cart__submit-container--sticky {
	position: static;
	width: auto;
	padding: 0;
	background: none;
	box-shadow: none;
}

.wows-commerce .wc-block-cart__submit-container--sticky::before {
	display: none;
}

.wows-commerce .wc-block-cart__submit-button {
	width: 100%;
	font-size: var(--wows-fs-md);
	padding: var(--wows-sp-3) var(--wows-sp-6);
	background: var(--wows-accent);
	color: var(--wows-white);
}

/* Accepted-card icons under the button. Woo gives them `margin: 0 0 14px` and
   no top margin, so Visa and Mastercard sat flush against Proceed to Checkout
   (Eddy, 28 Sep 2026). Scoped through the sidebar to clear Woo's one-class
   rule outright; the 14px bottom margin goes too, since nothing follows. */
.wows-commerce .wc-block-cart__sidebar .wc-block-components-payment-method-icons {
	margin: var(--wows-sp-4) 0 0;
	gap: var(--wows-sp-1);
}

.wows-commerce .wc-block-cart__sidebar .wc-block-components-payment-method-icons .wc-block-components-payment-method-icon {
	margin: 0;
}

/* --- Empty cart --------------------------------------------- */

.wows-commerce .wp-block-woocommerce-empty-cart-block {
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-xl);
	padding: 70px var(--wows-sp-9);
	text-align: center;
}

.wows-commerce .wc-block-cart__empty-cart__title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-xl);
	font-weight: 700;
	margin: 0 0 var(--wows-sp-1);
}

/* The empty cart also renders a "New in store" product row from the page
   content. Woo lays that out with fixed percentage widths per column
   (has-4-columns), which do not fold — at phone widths the row ran past the
   panel and gave the page a horizontal scrollbar. */
.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--wows-sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `ul.` is load-bearing, not tidiness — do not simplify this selector.
 *
 * Woo's own rule is `.wc-block-grid.has-4-columns .wc-block-grid__product
 * { flex: 1 0 25%; max-width: 25% }`, written for the flex row the rule above
 * replaces with a grid. Three classes, so it ties this rule at (0,3,0) if the
 * `ul` is dropped — and on a tie the later stylesheet wins, which is Woo's:
 * `all-products.css` is a block stylesheet and loads after the theme's.
 *
 * The tie is why the 25% survived. Against a grid track rather than the row it
 * was written for, `max-width: 25%` resolves to a quarter of one 260px column,
 * so every card was 65px wide: titles broken mid-word and "Add to cart" set one
 * letter per line, four thin ribbons across the empty cart. Reported by Eddy
 * with a screenshot, 22 Aug 2026 — a structural check cannot see it, since the
 * markup and the enqueue are both correct. → LESSONS §CSS-2
 *
 * Keyed on `ul.` + the grid class rather than on `.has-4-columns`, so the fix
 * does not evaporate if the block is ever set to 3 or 5 columns. */
.wows-commerce .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products .wc-block-grid__product {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Make these look like the theme's product cards.
 *
 * Once the row fitted (above), it was still Woo's default block styling in a
 * theme that has its own card: blue underlined titles, no card, images at
 * three different heights, near-black buttons, and prices on different
 * baselines because a two-line title pushed the button down. On the page a
 * customer lands on when their cart empties, the row is the entire call to
 * action — it should read as the same shop as the archive.
 *
 * These are the `.wows-product-card` rules from style.css re-pointed at
 * Woo's block classes, deliberately not abstracted into a shared selector
 * list: the block markup is WooCommerce's and can change under us, and one
 * broken card style should not be able to take the archive with it. If the
 * card design changes, both places change — that is the accepted cost.
 *
 * `margin: 0 0 auto` on the price is what aligns the buttons: the card is a
 * flex column, so the auto margin absorbs the slack a short title leaves and
 * every button lands on the same baseline. Verified: four cards, all 438px
 * tall, buttons within 1px of each other.
 *
 * The multiply blend on the image is not decoration — see the long note on
 * `.wows-product-card__media` in style.css. 455 of 564 products have a JPEG
 * with an opaque white backdrop baked in, which otherwise shows as a hard
 * white rectangle inside the grey well. `isolation: isolate` keeps the blend
 * inside the card.
 */
.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	overflow: hidden;
	text-align: left;
	transition: transform var(--wows-t-slow), box-shadow var(--wows-t-slow);
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
	transform: translateY(-4px);
	box-shadow: var(--wows-shadow-card-lg);
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	display: block;
	text-decoration: none;
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.05;
	margin: 0;
	padding: var(--wows-sp-6);
	background: var(--wows-surface);
	overflow: hidden;
	isolation: isolate;
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .35s ease;
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img {
	transform: scale(1.05);
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wows-ink);
	text-decoration: none;
	margin: 0;
	padding: var(--wows-sp-5) var(--wows-sp-5) 0;
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
	margin: 0 0 auto;
	padding: var(--wows-sp-2) var(--wows-sp-5) 0;
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	margin: 0;
	padding: var(--wows-sp-4) var(--wows-sp-5) var(--wows-sp-5);
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	width: 100%;
	padding: var(--wows-sp-2) var(--wows-sp-4);
	background: var(--wows-accent);
	color: var(--wows-white);
	border-radius: var(--wows-r-pill);
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.wows-commerce .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--wows-accent-dark);
	color: var(--wows-white);
}

/* --- Cross-sells ("You may be interested in…") -------------

   The cart block's `cart-cross-sells-block` renders under the line items,
   inside .wc-block-cart__main, whenever a cart product has Woo cross-sells —
   every printer since 28 Sep 2026 (GitHub #23): its toner, ink or ribbon.
   Unstyled it was a 36px `has-large-font-size` heading over Woo's
   `inline-block; width: 30%` columns and near-black pill buttons.

   They are add-ons to the order above, not more browsing, so they are laid
   out as one: a tinted tray along the foot of the line-items card, an
   eyebrow heading, and compact rows — thumbnail, name and price, an outline
   "Add to cart" that stays secondary to Proceed to Checkout. The heading's
   words are Woo's (CLAUDE.md, Copy); uppercase is styling only.

   Each row is a grid. The block wraps image, title, rating and price in one
   unclassed <div> and the button's wrapper is its sibling, so that <div> is
   `display: contents` and its children take grid areas directly. The rating
   is left out of the row: an add-on row has no room for it and the catalogue
   carries almost no reviews.

   Every selector carries `.wp-block-woocommerce-cart` because Woo's rules do —
   `.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block
   .cross-sells-product div .wc-block-components-product-image` is (0,4,1),
   and cart.css loads after this file, so a tie is a loss. → LESSONS §CSS-2 */

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
	margin: 0;
	padding: var(--wows-sp-6) var(--wows-sp-7) var(--wows-sp-7);
	border-top: 1px solid var(--wows-border-soft);
	background: var(--wows-surface-2);
}

/* The heading carries `has-large-font-size`, and core's global styles set that
   class `font-size: var(--wp--preset--font-size--large) !important` — no
   selector here can outrank it. Redefining the preset on the heading itself
   does, without an !important of our own: the core rule still wins, and reads
   our value. */
.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .wp-block-heading {
	--wp--preset--font-size--large: var(--wows-fs-sm);
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-sm);
	font-weight: 700;
	letter-spacing: var(--wows-ls-eyebrow);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wows-accent);
	margin: 0 0 var(--wows-sp-4);
}

/* The product list is an unclassed <div>, the heading's only sibling. One row
   per product at every width, like the line items above: two-up, a 101px
   button left ~120px for names like "Canon Cartridge 070 Black Standard Toner
   Cartridge". */
.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wows-sp-2);
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"img name btn"
		"img price btn";
	align-items: center;
	column-gap: var(--wows-sp-4);
	row-gap: 2px;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--wows-sp-2);
	text-align: left;
	background: var(--wows-white);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-md);
	transition: border-color var(--wows-t-base), box-shadow var(--wows-t-base);
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product:hover {
	border-color: var(--wows-border-hover);
	box-shadow: var(--wows-shadow-float);
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div:first-child {
	display: contents;
}

/* Multiply blend + isolation: see `.wows-product-card__media` in style.css. */
.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image {
	grid-area: img;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	margin: 0;
	padding: 6px;
	border-radius: var(--wows-r-sm);
	background: var(--wows-surface);
	overflow: hidden;
	isolation: isolate;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image a {
	display: flex;
	width: 100%;
	height: 100%;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title {
	grid-area: name;
	align-self: end;
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-base);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
}

/* Two lines, then an ellipsis — toner names run long and the row is short. */
.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-rating-stars {
	display: none;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price {
	grid-area: price;
	align-self: start;
	display: block;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
	margin: 0;
	padding: 0;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price del {
	color: var(--wows-text-faint);
	font-weight: 500;
	margin-right: 6px;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price ins {
	text-decoration: none;
	background: none;
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
	grid-area: btn;
	margin: 0;
	padding: 0;
}

/* Outline, not solid: Proceed to Checkout is the page's one solid accent
   button and this must not compete with it. */
.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	padding: 8px var(--wows-sp-4);
	font-family: var(--wows-font-body);
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--wows-accent);
	background: var(--wows-white);
	border: 1.5px solid var(--wows-accent);
	border-radius: var(--wows-r-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--wows-t-base), color var(--wows-t-base);
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button__button:hover {
	background: var(--wows-accent);
	color: var(--wows-white);
}

.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button__button:focus-visible {
	outline: 2px solid var(--wows-accent);
	outline-offset: 2px;
}


/* ============================================================
   4. CHECKOUT (block)
   ------------------------------------------------------------
   Mockup (standalone checkout): stacked bordered panels at 18px
   gap, beside a 400px sticky summary.
   ============================================================ */

.wows-commerce .wc-block-checkout .wc-block-components-sidebar-layout,
.wows-commerce .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
	grid-template-columns: 1fr 400px;
	gap: var(--wows-sp-8);
}

.wows-commerce .wc-block-checkout__form {
	display: flex;
	flex-direction: column;
	gap: var(--wows-sp-5);
	padding: 0;
	margin: 0;
}

/* Woo prints empty placeholder blocks into the form — the express-payment
   slot, the shipping-method toggle and pickup options when local pickup is
   off. Each still took an 18px flex gap, so Contact and Shipping sat 54px
   apart. :empty stops matching the moment Woo renders anything into one. */
.wows-commerce .wc-block-checkout__form > :empty {
	display: none;
}

/* --- Step panels -------------------------------------------- */

/* Same selector as the panel in §2, for the same reason. margin: 0 matters:
   Woo's 24px bottom margin otherwise stacks on the form's 18px flex gap. */
.wows-commerce .wc-block-components-form .wc-block-components-checkout-step {
	padding: var(--wows-sp-7);
	margin: 0;
}

.wows-commerce .wc-block-components-checkout-step__heading {
	margin: 0 0 var(--wows-sp-5);
}

.wows-commerce .wc-block-components-checkout-step__title {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	color: var(--wows-ink);
	margin: 0;
}

.wows-commerce .wc-block-components-checkout-step__description {
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-muted);
	line-height: var(--wows-lh-body);
}

.wows-commerce .wc-block-components-checkout-step__content {
	padding: 0;
	margin: 0;
}

/* The order-note and terms steps are checkbox-only; the panel border reads as
   an empty box around them, so they drop back to plain rows. The order-note
   block is itself a checkout step, so its selector names both classes: that
   outranks the panel rules here and in the 680px block. Terms is not a step. */
.wows-commerce .wc-block-components-form .wc-block-checkout__order-notes.wc-block-components-checkout-step,
.wows-commerce .wc-block-components-form .wc-block-checkout__terms {
	border: 0;
	margin: 0;
	padding: 0;
	background: none;
}

.wows-commerce .wc-block-checkout__terms {
	font-size: var(--wows-fs-sm);
	color: var(--wows-text-muted);
}

/* --- Fields ------------------------------------------------- */

.wows-commerce .wc-block-components-text-input {
	margin-top: var(--wows-sp-3);
}

.wows-commerce .wc-block-components-text-input input[type="text"],
.wows-commerce .wc-block-components-text-input input[type="email"],
.wows-commerce .wc-block-components-text-input input[type="tel"],
.wows-commerce .wc-blocks-components-select__select {
	height: auto;
	padding: var(--wows-sp-2) var(--wows-sp-3);
	border-radius: var(--wows-r-chip);
	border-color: var(--wows-border-strong);
}

/* Woo floats its labels into the input. Keep that behaviour — it is the
   block's own interaction — but bring the resting colour into the palette. */
.wows-commerce .wc-block-components-text-input label,
.wows-commerce .wc-blocks-components-select__label {
	color: var(--wows-text-faint);
	font-weight: 500;
}

.wows-commerce .wc-block-components-validation-error {
	font-size: var(--wows-fs-xs);
	color: var(--wows-error);
}

.wows-commerce .wc-block-components-address-card {
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-md);
	padding: var(--wows-sp-4);
	font-size: var(--wows-fs-base);
	color: var(--wows-text);
}

.wows-commerce .wc-block-components-address-card__edit {
	font-weight: 600;
	color: var(--wows-accent);
}

/* --- Payment + shipping radio rows -------------------------- */

/* Which element carries the border depends on the gateway.
   A payment method with instructions (BACS, the live gateway) is wrapped in a
   .wc-block-components-radio-control-accordion-option so the description can
   expand under the label, and Woo explicitly zeroes the label's border in that
   case. A plain option (shipping rates) has no wrapper. So both get the card
   treatment, and the accordion's inner label opts back out below. */
.wows-commerce .wc-block-components-radio-control__option,
.wows-commerce .wc-block-components-radio-control-accordion-option,
.wows-commerce .wc-block-checkout__shipping-method-option {
	margin-bottom: var(--wows-sp-1);
	border: 1.5px solid var(--wows-border-hover);
	border-radius: var(--wows-r-md);
	background: var(--wows-white);
	font-size: var(--wows-fs-base);
	transition: border-color var(--wows-t-fast), background var(--wows-t-fast);
}

/* Woo absolutely positions the radio input at left:16px, width 20px, and
   clears it with `padding-left: 48px` on the option. Keep that 48px — a
   shorthand padding here puts the label underneath the radio. */
.wows-commerce .wc-block-components-radio-control__option {
	padding: var(--wows-sp-3) var(--wows-sp-5) var(--wows-sp-3) 48px;
}

.wows-commerce .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0;
	margin-bottom: 0;
}

/* Woo draws three separate hairlines over this control: a border on the group
   wrapper, a 1px rule between options, and an inset 1.5px `currentColor` ring
   on the selected one — currentColor being the near-black body ink. All three
   are replaced by the per-option border above and the accent state below. */
.wows-commerce .wc-block-components-radio-control--highlight-checked::after,
.wows-commerce .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.wows-commerce .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after {
	display: none;
}

.wows-commerce .wc-block-components-radio-control__option-checked,
.wows-commerce .wc-block-components-radio-control__option--checked-option-highlighted,
.wows-commerce .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wows-commerce .wc-block-checkout__shipping-method-option--selected {
	border-color: var(--wows-accent);
	background: var(--wows-accent-tint-2);
	box-shadow: none;
}

.wows-commerce .wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option {
	background: none;
}

/* The dot and ring default to currentColor / #000. */
.wows-commerce .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--wows-accent);
}

.wows-commerce .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--wows-accent);
}

.wows-commerce .wc-block-components-radio-control__label {
	font-weight: 600;
	color: var(--wows-ink);
}

.wows-commerce .wc-block-components-radio-control__description,
.wows-commerce .wc-block-components-radio-control__secondary-description,
.wows-commerce .wc-block-components-radio-control-accordion-content {
	font-size: var(--wows-fs-sm);
	line-height: var(--wows-lh-body);
	color: var(--wows-text-muted);
}

/* Give HitPay its description back.
 *
 * On the block checkout HitPay rendered as a bare label — no description —
 * while Billplz directly above it showed both a description and a logo, which
 * made the card option look the less trustworthy of the two. Reported by Eddy
 * after the first real card order, 22 Aug 2026.
 *
 * IT IS NOT THE THEME DROPPING IT, AND IT IS NOT A MISSING SETTING. The
 * description is sent to the browser intact — `wcSettings.paymentMethodData
 * .hitpay.description` carries the full sentence — and it is in the DOM. What
 * hides it is a rule in WooCommerce core's own checkout.css:
 *
 *     .wc-block-components-radio-control-accordion-content:empty,
 *     .wc-block-components-radio-control-accordion-content:has(> :only-child:empty)
 *         { display: none }
 *
 * meant to collapse a gateway that has nothing to say. The HitPay plugin
 * appends an empty `<div id="hitpay_background_layer">` to its accordion
 * content. `:only-child` counts elements and ignores text nodes, so that empty
 * div is the only child as far as the selector is concerned, core reads the
 * whole block as empty, and the description text node goes with it. Two
 * plugins' markup meeting core's CSS; the theme is not in the chain, and this
 * would look the same on the old theme.
 *
 * Keyed on the plugin's own id rather than on `:has(> div:empty)` so it cannot
 * un-hide a genuinely empty accordion belonging to some other gateway. It
 * costs nothing if HitPay ever drops the div — the selector simply stops
 * matching and core's rule no longer applies either. Specificity is (1,2,0)
 * against core's (0,3,0), so no !important is needed.
 */
.wows-commerce .wc-block-components-radio-control-accordion-content:has(> #hitpay_background_layer) {
	display: block;
}

/* --- Sidebar summary ---------------------------------------- */

.wows-commerce .wc-block-checkout__sidebar {
	position: sticky;
	top: var(--wows-sticky-top);
}

.wows-commerce .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--wows-sp-7);
}

.wows-commerce .wc-block-components-checkout-order-summary__title {
	margin: 0 0 var(--wows-sp-5);
}

.wows-commerce .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wows-ink);
}

.wows-commerce .wc-block-components-order-summary-item {
	padding: var(--wows-sp-2) 0;
	font-size: var(--wows-fs-sm);
	color: var(--wows-text);
}

.wows-commerce .wc-block-components-order-summary-item__image img {
	border-radius: var(--wows-r-sm);
	background: var(--wows-surface);
}

.wows-commerce .wc-block-components-order-summary-item__quantity {
	background: var(--wows-accent-tint);
	border-color: var(--wows-accent-tint);
	color: var(--wows-accent);
	font-weight: 700;
}

/* --- Place order -------------------------------------------- */

.wows-commerce .wc-block-checkout__actions {
	padding: 0;
}

.wows-commerce .wc-block-checkout__actions_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wows-sp-4);
	padding: 0;
}

.wows-commerce .wc-block-components-checkout-place-order-button {
	font-size: var(--wows-fs-md);
	padding: var(--wows-sp-3) var(--wows-sp-6);
}

.wows-commerce .wc-block-components-checkout-return-to-cart-button {
	font-size: var(--wows-fs-base);
	font-weight: 600;
	color: var(--wows-accent);
	background: none;
	border: 0;
	padding: 0;
}

.wows-commerce .wc-block-components-checkout-return-to-cart-button:hover {
	background: none;
	color: var(--wows-accent-dark);
}

/* --- Notices ------------------------------------------------ */

.wows-commerce .wc-block-components-notice-banner {
	border-radius: var(--wows-r-md);
	font-size: var(--wows-fs-base);
}


/* ============================================================
   5. ORDER RECEIVED (classic template)
   ------------------------------------------------------------
   The GA4 purchase push (PORTING-MAP A3) prints into this page.
   It is a <script> and carries no class — nothing here can hide
   it, but do not add a blanket `.woocommerce-order > * ` rule
   that could.
   ============================================================ */

.wows-commerce .woocommerce-order {
	max-width: 820px;
}

.wows-commerce .woocommerce-thankyou-order-received {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-2xl);
	font-weight: 700;
	line-height: var(--wows-lh-heading);
	letter-spacing: var(--wows-ls-h2);
	color: var(--wows-ink);
	background: var(--wows-success-bg);
	border-radius: var(--wows-r-xl);
	padding: var(--wows-sp-9) var(--wows-sp-8);
	margin: 0 0 var(--wows-sp-8);
	text-align: center;
}

.wows-commerce .woocommerce-thankyou-order-received::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	margin: 0 auto var(--wows-sp-6);
	border-radius: 50%;
	font-size: 34px;
	color: var(--wows-success-text);
	background: var(--wows-white);
}

/* Order overview — the reference / date / total / method strip — and the BACS
   account block, which Woo builds from the same .order_details list.

   Flex rather than grid on purpose. Woo floats these <li>s and gives them a
   dashed right border and a percentage width; a grid track would keep the
   float's cleared space and leave holes in the row. Resetting float/width and
   letting the items size to their content is what actually collapses them
   onto one line. */
.wows-commerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wows-sp-5) var(--wows-sp-9);
	list-style: none;
	margin: 0 0 var(--wows-sp-8);
	padding: var(--wows-sp-7);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
}

.wows-commerce ul.order_details li {
	float: none;
	width: auto;
	min-width: 0;
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wows-text-faint);
	border: 0;
	padding: 0;
	margin: 0;
}

.wows-commerce ul.order_details li strong {
	display: block;
	margin-top: 6px;
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wows-ink);
}

/* Bank-transfer instructions — BACS is the live gateway, so this panel is on
   every completed order. */
.wows-commerce .woocommerce-bacs-bank-details {
	background: var(--wows-surface-2);
	border-radius: var(--wows-r-panel);
	padding: var(--wows-sp-7);
	margin-bottom: var(--wows-sp-8);
}

.wows-commerce .wc-bacs-bank-details-heading {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	margin: 0 0 var(--wows-sp-2);
}

/* Sits inside the tinted panel above, so it drops the card treatment the
   shared .order_details rule gives the thank-you strip. */
.wows-commerce .wc-bacs-bank-details {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: var(--wows-fs-base);
	color: var(--wows-text);
}

.wows-commerce .woocommerce-order-details__title,
.wows-commerce .woocommerce-column__title,
.wows-commerce .woocommerce-customer-details h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	margin: 0 0 var(--wows-sp-4);
}

/* --- Order tables (thank-you and view-order) ---------------- */

.wows-commerce .shop_table {
	width: 100%;
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 var(--wows-sp-8);
	font-size: var(--wows-fs-base);
}

.wows-commerce .shop_table th {
	background: var(--wows-surface-2);
	font-size: var(--wows-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wows-text-faint);
	text-align: left;
	padding: var(--wows-sp-3) var(--wows-sp-6);
	border: 0;
}

.wows-commerce .shop_table td {
	padding: var(--wows-sp-3) var(--wows-sp-6);
	border: 0;
	border-top: 1px solid var(--wows-border-soft);
	color: var(--wows-text);
	vertical-align: top;
}

/* Woo marks the first cell of each orders-table body row as a <th>, being the
   row's header. It is a data cell to the reader, so it opts out of the tinted
   uppercase column-header treatment above. */
.wows-commerce .shop_table tbody th {
	background: none;
	font-size: var(--wows-fs-base);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wows-text);
	border-top: 1px solid var(--wows-border-soft);
	padding: var(--wows-sp-3) var(--wows-sp-6);
	vertical-align: top;
}

.wows-commerce .shop_table td a {
	color: var(--wows-ink);
	font-weight: 600;
	text-decoration: none;
}

.wows-commerce .shop_table td a:hover {
	color: var(--wows-accent);
}

.wows-commerce .shop_table tfoot th {
	background: none;
	font-size: var(--wows-fs-base);
	letter-spacing: normal;
	text-transform: none;
	color: var(--wows-text);
	border-top: 1px solid var(--wows-border-soft);
}

/* .order-total is Woo's own class on the grand-total row. Targeting it rather
   than tfoot's last row matters because the last row is "Payment method" on
   any order that has one — which, with BACS as the live gateway, is all of
   them. */
.wows-commerce .shop_table tfoot .order-total th,
.wows-commerce .shop_table tfoot .order-total td {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	color: var(--wows-ink);
}

/* Same float reset as .order_details above — Woo gives these columns
   `float` and `width: 48%`, which leaves a hole in the first grid track. */
.wows-commerce .woocommerce-columns--addresses,
.wows-commerce .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wows-sp-8);
}

/* float/width only. Padding is deliberately not reset here: My Account's
   address cards carry .col-1/.col-2 as well as .woocommerce-Address, and a
   `padding: 0` at this specificity would strip the card padding set in §6 and
   leave the address text on the card's border. */
.wows-commerce .woocommerce-column,
.wows-commerce .col2-set .col-1,
.wows-commerce .col2-set .col-2 {
	float: none;
	width: auto;
	margin: 0;
}

/* ---- Clearfix pseudo-elements vs. grid and flex -----------------------
   Woo clears its floats with `content:" "; display:table` on ::before and
   ::after. Harmless while the container is a block — but grid and flex both
   promote those pseudo-elements to real **items**. ::before then takes the
   first slot and shifts every real child along one.

   Three separate symptoms in this file traced back to it: the billing address
   landing in the right-hand column of the thank-you page, the My Account nav
   rendering to the right of its own content, and the address cards' headings
   sitting 77px in from the card's padding edge.

   Any new `display: grid` or `display: flex` in this file on a Woo-authored
   container needs its selector adding here. */
.wows-commerce .woocommerce::before,
.wows-commerce .woocommerce::after,
.wows-commerce .col2-set::before,
.wows-commerce .col2-set::after,
.wows-commerce .woocommerce-columns--addresses::before,
.wows-commerce .woocommerce-columns--addresses::after,
.wows-commerce .woocommerce-Addresses::before,
.wows-commerce .woocommerce-Addresses::after,
/* This pair needs the extra .woocommerce-Address to outrank Woo's
   `.woocommerce-account .addresses .title::before`, which is one class
   heavier than the selectors above. Measured: the two zero-width items were
   taking a share of the header's space-between distribution and holding the
   heading 55px off each edge. */
.wows-commerce .woocommerce-Address .woocommerce-Address-title::before,
.wows-commerce .woocommerce-Address .woocommerce-Address-title::after {
	display: none;
}

.wows-commerce .woocommerce-columns--addresses address {
	font-style: normal;
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
	border: 0;
	padding: 0;
}


/* ============================================================
   6. MY ACCOUNT (classic templates)
   ------------------------------------------------------------
   Sidebar width matches the shop archive's filter column (248px)
   so the two screens share one rhythm.
   ============================================================ */

.wows-commerce .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

.wows-commerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* is-active only exists once a customer is logged in, so this grid applies to
   the account screens and not to the logged-out login form. */
.wows-commerce .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
	margin: 0;
}

.wows-commerce--account .woocommerce {
	display: grid;
	grid-template-columns: 248px 1fr;
	gap: 34px;
	align-items: start;
}

.wows-commerce--account .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.wows-commerce .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: var(--wows-sp-1);
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-panel);
	position: sticky;
	top: var(--wows-sticky-top);
}

.wows-commerce .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.wows-commerce .woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--wows-sp-2) var(--wows-sp-3);
	border-radius: var(--wows-r-sm);
	font-size: var(--wows-fs-base);
	font-weight: 500;
	color: var(--wows-text);
	text-decoration: none;
	transition: background var(--wows-t-fast), color var(--wows-t-fast);
}

.wows-commerce .woocommerce-MyAccount-navigation a:hover {
	background: var(--wows-surface-2);
	color: var(--wows-ink);
}

.wows-commerce .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--wows-accent-tint);
	color: var(--wows-accent);
	font-weight: 700;
}

.wows-commerce .woocommerce-MyAccount-content p {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
}

/* --- Login / lost-password ---------------------------------- */

/* Woo prints an <h2> above the login form. At the global h2 size it reads as
   a second page title under the H1 immediately above it. */
.wows-commerce .woocommerce > h2,
.wows-commerce .woocommerce-MyAccount-content > h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-lg);
	font-weight: 700;
	letter-spacing: var(--wows-ls-tight);
	margin: 0 0 var(--wows-sp-4);
}

.wows-commerce .woocommerce-form-login,
.wows-commerce .woocommerce-ResetPassword {
	max-width: 460px;
	margin: 0;
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	padding: var(--wows-sp-7);
}

.wows-commerce .woocommerce-form-row {
	margin-bottom: var(--wows-sp-4);
	padding: 0;
}

.wows-commerce .woocommerce-form-row label {
	display: block;
	margin-bottom: 6px;
}

.wows-commerce .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--wows-sp-1);
	font-weight: 500;
	color: var(--wows-text-muted);
}

.wows-commerce .woocommerce-form-login__rememberme input {
	width: auto;
}

.wows-commerce .woocommerce-LostPassword {
	font-size: var(--wows-fs-sm);
	margin: var(--wows-sp-3) 0 0;
}

.wows-commerce .woocommerce-LostPassword a {
	color: var(--wows-accent);
	text-decoration: none;
}

/* --- Addresses ---------------------------------------------- */

.wows-commerce .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wows-sp-5);
}

.wows-commerce .woocommerce-Address {
	width: auto;
	float: none;
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	padding: var(--wows-sp-7);
}

.wows-commerce .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wows-sp-2);
	margin-bottom: var(--wows-sp-3);
}

.wows-commerce .woocommerce-Address-title h2 {
	font-family: var(--wows-font-display);
	font-size: var(--wows-fs-md);
	font-weight: 700;
	margin: 0;
}

.wows-commerce .woocommerce-Address-title .edit {
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	color: var(--wows-accent);
	text-decoration: none;
}

.wows-commerce .woocommerce-Address address {
	font-style: normal;
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
}

/* --- Orders table ------------------------------------------- */

.wows-commerce .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

/* Row action links are secondary to the page's primary button, so they take
   the outline treatment rather than the accent fill from §2. One class deeper
   than that rule, for the same reason its comment gives. */
.wows-commerce .woocommerce .woocommerce-orders-table__cell-order-actions .button,
.wows-commerce .woocommerce .woocommerce-MyAccount-content .button.wc-forward {
	font-size: var(--wows-fs-sm);
	font-weight: 600;
	padding: var(--wows-sp-1) var(--wows-sp-3);
	background: var(--wows-white);
	color: var(--wows-ink);
	border-color: var(--wows-border-hover);
}

.wows-commerce .woocommerce .woocommerce-orders-table__cell-order-actions .button:hover,
.wows-commerce .woocommerce .woocommerce-MyAccount-content .button.wc-forward:hover {
	background: var(--wows-white);
	color: var(--wows-ink);
	border-color: var(--wows-ink);
}

/* --- Notices ------------------------------------------------ */

.wows-commerce .woocommerce-info,
.wows-commerce .woocommerce-message,
.wows-commerce .woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wows-sp-3);
	list-style: none;
	font-size: var(--wows-fs-base);
	border: 1px solid var(--wows-border);
	border-left: 3px solid var(--wows-accent);
	border-radius: var(--wows-r-md);
	background: var(--wows-surface-2);
	color: var(--wows-text);
	padding: var(--wows-sp-3) var(--wows-sp-6);
	margin: 0 0 var(--wows-sp-6);
}

/* Woo positions an icon-font glyph absolutely inside each notice. It lands on
   top of the first word once the notice is re-padded, and the 3px accent bar
   above already carries the same signal. */
.wows-commerce .woocommerce-info::before,
.wows-commerce .woocommerce-message::before,
.wows-commerce .woocommerce-error::before {
	display: none;
}

.wows-commerce .woocommerce-message {
	border-left-color: var(--wows-success);
	background: var(--wows-success-bg);
	color: var(--wows-success-text);
}

.wows-commerce .woocommerce-error {
	border-left-color: var(--wows-error);
	background: var(--wows-error-bg);
	color: var(--wows-error);
}

/* The add-to-cart card (inc/added-notice.php) when it lands on the cart —
   printed there by wows_commerce_cart_notices(). Same card as the product
   page (style.css §12 "Notices"), re-declared here because that rule is
   scoped :not(.wows-commerce). The inner .wows-added layout is global. */
.wows-commerce .woocommerce-notices-wrapper .woocommerce-message:has(.wows-added) {
	display: block;
	padding: var(--wows-sp-3);
	border: 1px solid transparent;
	border-radius: var(--wows-r-lg);
	background:
		linear-gradient(var(--wows-white), var(--wows-white)) padding-box,
		linear-gradient(120deg, var(--wows-tint-2), var(--wows-success-bg)) border-box;
	color: var(--wows-text);
	box-shadow: var(--wows-shadow-card);
}

/* No focus ring on the card itself — see the note in style.css §12. */
.wows-commerce .woocommerce-notices-wrapper .woocommerce-message:has(.wows-added):focus,
.wows-commerce .woocommerce-notices-wrapper .woocommerce-message:has(.wows-added):focus-visible {
	outline: none;
}

/* "View cart" on the cart page links to the page it sits on. The sentence
   says what happened; the cart below is the thing to look at. */
.wows-commerce--step-1 .wows-added a.wc-forward {
	display: none;
}


/* ============================================================
   6b. TRACK ORDER (classic shortcode)
   ------------------------------------------------------------
   `/track-order/` — `[woocommerce_order_tracking]`, the target of
   the order emails' "View my order" button (inc/order-email.php).
   Routed through page-commerce.php by wows_commerce_is_track_page(),
   so inputs, labels and the button already come from §2; this
   only lays the form out as a card like the login form in §6.

   Woo floats .form-row-first / -last at 47% and clears with a
   <div class="clear">; a grid replaces the floats so the two
   fields share one row and stack at 680 (§7).
   ============================================================ */

.wows-commerce .woocommerce-form-track-order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--wows-sp-4);
	max-width: 720px;
	margin: 0;
	border: 1px solid var(--wows-border);
	border-radius: var(--wows-r-lg);
	padding: var(--wows-sp-7);
	background: var(--wows-white);
}

.wows-commerce .woocommerce-form-track-order > p,
.wows-commerce .woocommerce-form-track-order > .clear {
	grid-column: 1 / -1;
}

.wows-commerce .woocommerce-form-track-order > p:first-child {
	margin: 0 0 var(--wows-sp-5);
	color: var(--wows-text-muted);
	line-height: var(--wows-lh-body);
}

.wows-commerce .woocommerce-form-track-order .form-row {
	float: none;
	width: auto;
	margin: 0 0 var(--wows-sp-4);
	padding: 0;
}

.wows-commerce .woocommerce-form-track-order .form-row-first {
	grid-column: 1;
}

.wows-commerce .woocommerce-form-track-order .form-row-last {
	grid-column: 2;
}

.wows-commerce .woocommerce-form-track-order .form-row label {
	display: block;
	margin-bottom: 6px;
}

.wows-commerce .woocommerce-form-track-order > .clear {
	display: none;
}

.wows-commerce .woocommerce-form-track-order .form-row:last-of-type {
	margin: var(--wows-sp-2) 0 0;
}

/* The result: "Order #N was placed on … and is currently …".
   Woo wraps each fact in <mark>; the UA highlighter yellow is not
   a palette colour. */
.wows-commerce .order-info {
	font-size: var(--wows-fs-base);
	line-height: var(--wows-lh-body);
	color: var(--wows-text);
}

.wows-commerce .order-info mark {
	background: none;
	color: var(--wows-ink);
	font-weight: 700;
}


/* ============================================================
   7. RESPONSIVE
   ------------------------------------------------------------
   Same three breakpoints as style.css §17: 1040 / 900 / 680.
   ============================================================ */

@media (max-width: 1040px) {

	.wows-commerce .wc-block-components-sidebar-layout,
	.wows-commerce .wc-block-checkout .wc-block-components-sidebar-layout,
	.wows-commerce .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: var(--wows-sp-6);
	}

	.wows-commerce--account .woocommerce {
		grid-template-columns: 210px 1fr;
		gap: var(--wows-sp-6);
	}
}

@media (max-width: 900px) {

	/* One column. The summary leads on cart — a buyer on a phone wants the
	   total and the checkout button without scrolling past every line — and
	   follows on checkout, where the form is the task. */
	.wows-commerce .wc-block-components-sidebar-layout,
	.wows-commerce .wc-block-checkout .wc-block-components-sidebar-layout,
	.wows-commerce .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.wows-commerce .wc-block-cart__sidebar,
	.wows-commerce .wc-block-checkout__sidebar {
		position: static;
	}

	.wows-commerce .wc-block-cart__sidebar {
		order: -1;
	}

	.wows-commerce--account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.wows-commerce .woocommerce-MyAccount-navigation ul {
		position: static;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	.wows-commerce .woocommerce-Addresses,
	.wows-commerce .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wows-sp-5);
	}
}

@media (max-width: 680px) {

	.wows-commerce__title {
		font-size: var(--wows-fs-2xl);
	}

	.wows-commerce .wc-block-components-form .wc-block-components-checkout-step,
	.wows-commerce .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,
	.wows-commerce .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block,
	.wows-commerce .woocommerce-Address,
	.wows-commerce .woocommerce-form-login,
	.wows-commerce .woocommerce-form-track-order {
		padding: var(--wows-sp-6);
	}

	/* §6b — the two fields stack. */
	.wows-commerce .woocommerce-form-track-order {
		grid-template-columns: minmax(0, 1fr);
	}

	.wows-commerce .woocommerce-form-track-order .form-row-first,
	.wows-commerce .woocommerce-form-track-order .form-row-last {
		grid-column: 1;
	}

	.wows-commerce ul.order_details {
		gap: var(--wows-sp-4);
		padding: var(--wows-sp-6);
	}

	.wows-commerce .wp-block-woocommerce-empty-cart-block {
		padding: var(--wows-sp-9) var(--wows-sp-5);
	}

	.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
		padding: var(--wows-sp-5) var(--wows-sp-4);
	}

	/* The button moves under the price: at 343px the row has no room for
	   name, price and button side by side. */
	.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas:
			"img name"
			"img price"
			"img btn";
		row-gap: 4px;
	}

	.wows-commerce .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
		margin-top: 4px;
	}

	/* The steps rule is the first thing worth losing on a narrow screen. */
	.wows-steps__step:not(:last-child)::after {
		width: 16px;
	}

	.wows-commerce .wc-block-checkout__actions_row {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}