/* ============================================================
   WooCommerce My Account Design (by Pixaris)
   SHOP, PRODUCT, CART, MINI CART, CHECKOUT

   ------------------------------------------------------------
   WHY THIS FILE IS BUILT IN LAYERS
   ------------------------------------------------------------

   The first version of this stylesheet rebuilt the layout of
   these pages: grids instead of floats, flex rows instead of
   the theme's own arrangement, and padding reset to zero so
   spacing could be set here instead.

   That broke real pages, and it broke them in one consistent
   way. A commercial theme reserves space for absolutely
   positioned children using padding on the parent. Flatsome
   positions the mini-cart thumbnail absolutely and holds space
   for it with padding on the surrounding link. Setting that
   padding to zero did not "reset" anything - it deleted the
   space the image was sitting in, and the product title printed
   on top of the picture. The same reset removed the horizontal
   padding that separated two table headings, so PRODUCTO and
   SUBTOTAL ran together as PRODUCTOSUBTOTAL, and a column
   squeezed to ninety pixels wrapped a four-word product name
   onto four lines.

   None of that is a theme being difficult. It is this file
   having taken responsibility for layout it could not see.

   So the work is now split, and each layer is allowed to touch
   strictly less than the one below it:

     LAYER 1 - HARMONISE  (body.wma-shop-harmonise)
       Appearance only. May set colour, background-color,
       border-color, border-radius, box-shadow, outline,
       font-weight, text-transform and letter-spacing.
       May NOT set display, position, float, width, height,
       margin, padding, grid or flex anything.
       This layer cannot move a pixel, so it cannot break a
       layout. It is the default.

     LAYER 2 - REFINE  (body.wma-shop-refine)
       Adds font-size, margin, and padding that only ever
       increases. Still no display, position, float or width.
       Safe on any theme whose layout already works.

     LAYER 3 - REBUILD  (body.wma-shop-rebuild)
       The structural layer: grids, cards, the two-column
       checkout. This is the one that can conflict with a
       heavily customised theme, so it is opt-in and says so
       in the admin screen.

   Each layer's class is only present when that level or higher
   is chosen, so the rules stack without needing to be repeated.

   The mini cart is deliberately Layer 1 only. Its markup
   differs more between themes than any other part of a shop -
   Flatsome renders it inside its own off-canvas panel with its
   own positioning - and it is the element that broke worst.
   Colour it, leave its arrangement alone.

   Tokens come from WMA_Frontend::token_block(), printed inline,
   so the shop reads the same settings as the account area and
   the two cannot drift apart.
   ============================================================ */

body.wma-shop-harmonise,
body.wma-minicart {
	--wma-muted: color-mix( in srgb, var( --wma-text, #1A1A2E ) 55%, transparent );
	--wma-line: color-mix( in srgb, var( --wma-text, #1A1A2E ) 10%, transparent );
	--wma-tint: color-mix( in srgb, var( --wma-primary, #673DE6 ) 10%, transparent );
	--wma-shadow: 0 1px 2px rgba( 20, 20, 43, .04 ), 0 4px 16px rgba( 20, 20, 43, .05 );
	--wma-shadow-hover: 0 6px 24px rgba( 20, 20, 43, .10 );
	--wma-ok: #0F8A5F;
	--wma-bad: #D63638;
	/*
	 * The fill behind a WooCommerce notice. Derived from the text colour
	 * rather than written as a hex, so a store using a dark palette gets a
	 * tile a shade off its own card instead of a grey rectangle that
	 * belongs to nobody. Every rule that uses it carries a plain-grey
	 * fallback for browsers without color-mix().
	 */
	--wma-notice-bg: color-mix( in srgb, var( --wma-text, #1A1A2E ) 5%, var( --wma-card-bg, #FFFFFF ) );
}

/* ============================================================
   LAYER 1 - HARMONISE

   Appearance only. Nothing below this heading may set a
   property that affects layout.

   The point of this layer is the problem visible in the
   screenshots that started this rewrite: one button tan,
   another salmon, the quantity stepper a third colour. Those
   are the theme's palette showing through wherever this
   stylesheet did not reach. Reaching everywhere - in colour
   only - fixes the incoherence without touching arrangement.
   ============================================================ */

/* ---------- the theme's own design tokens ----------
   Flatsome 3.15 and later drive most of their components from
   these. Setting them means the theme paints its own widgets in
   this palette, with no selector fight at all. Older Flatsome
   compiles colours in directly and simply ignores this block,
   which is why the explicit rules below still exist. */
body.wma-shop-harmonise {
	--fs-color-primary: var( --wma-primary, #673DE6 );
	--fs-color-secondary: var( --wma-accent, #00C2A8 );
	--fs-color-success: var( --wma-ok );
	--fs-color-alert: var( --wma-bad );
	--fs-experimental-link-color: var( --wma-primary, #673DE6 );
	--fs-experimental-link-color-hover: var( --wma-primary, #673DE6 );
	/* Storefront and several other WooCommerce themes read these. */
	--woocommerce: var( --wma-primary, #673DE6 );
	--wc-primary: var( --wma-primary, #673DE6 );
	--wc-green: var( --wma-ok );
	--wc-red: var( --wma-bad );
}

/* ---------- one colour for every primary action ----------
   Add to cart, place order, proceed to checkout, apply coupon.
   Colour and corner only: no height, no padding, no display, so
   whatever shape the theme gave the button it keeps. */
body.wma-shop-harmonise .woocommerce a.button,
body.wma-shop-harmonise .woocommerce button.button,
body.wma-shop-harmonise .woocommerce input.button,
body.wma-shop-harmonise .woocommerce a.button.alt,
body.wma-shop-harmonise .woocommerce button.button.alt,
body.wma-shop-harmonise .woocommerce input.button.alt,
body.wma-shop-harmonise .woocommerce #respond input#submit,
body.wma-shop-harmonise .woocommerce .checkout-button,
body.wma-shop-harmonise .woocommerce button#place_order,
body.wma-shop-harmonise .woocommerce .single_add_to_cart_button {
	border-color: var( --wma-primary, #673DE6 );
	background-color: var( --wma-primary, #673DE6 );
	color: #fff;
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
}

body.wma-shop-harmonise .woocommerce a.button:hover,
body.wma-shop-harmonise .woocommerce button.button:hover,
body.wma-shop-harmonise .woocommerce input.button:hover,
body.wma-shop-harmonise .woocommerce a.button.alt:hover,
body.wma-shop-harmonise .woocommerce button.button.alt:hover,
body.wma-shop-harmonise .woocommerce .checkout-button:hover,
body.wma-shop-harmonise .woocommerce button#place_order:hover {
	background-color: var( --wma-primary, #673DE6 );
	border-color: var( --wma-primary, #673DE6 );
	color: #fff;
	filter: brightness( 1.08 );
}

/* ---------- the secondary actions ----------
   "Continue shopping", "Update cart", "Apply coupon" are real
   choices but never the recommended one. In the screenshots
   these arrived in the theme's salmon, competing with the
   button that actually moves the purchase forward. Outlined, so
   there is one filled button per screen and it is the one to
   press. */
body.wma-shop-harmonise .woocommerce a.button.wc-backward,
body.wma-shop-harmonise .woocommerce .return-to-shop a.button,
body.wma-shop-harmonise .woocommerce button[name="update_cart"],
body.wma-shop-harmonise .woocommerce button[name="apply_coupon"],
body.wma-shop-harmonise .woocommerce .coupon button.button {
	background-color: transparent;
	border-color: var( --wma-line );
	color: var( --wma-text, #1A1A2E );
	box-shadow: none;
	text-shadow: none;
}

body.wma-shop-harmonise .woocommerce a.button.wc-backward:hover,
body.wma-shop-harmonise .woocommerce .return-to-shop a.button:hover,
body.wma-shop-harmonise .woocommerce button[name="update_cart"]:hover,
body.wma-shop-harmonise .woocommerce button[name="apply_coupon"]:hover,
body.wma-shop-harmonise .woocommerce .coupon button.button:hover {
	background-color: var( --wma-tint );
	border-color: var( --wma-primary, #673DE6 );
	color: var( --wma-primary, #673DE6 );
	filter: none;
}

/* ---------- the quantity stepper ----------
   Flatsome draws its own plus and minus buttons and paints them
   in the theme's primary. In the screenshots that was salmon
   next to a tan checkout button. Colour only - the stepper keeps
   the size and position the theme gave it. */
body.wma-shop-harmonise .woocommerce .quantity input.qty,
body.wma-shop-harmonise .quantity input.qty {
	border-color: var( --wma-line );
	background-color: var( --wma-card-bg, #fff );
	color: var( --wma-text, #1A1A2E );
	border-radius: calc( var( --wma-radius, 14px ) - 8px );
	box-shadow: none;
}

body.wma-shop-harmonise .woocommerce .quantity .minus,
body.wma-shop-harmonise .woocommerce .quantity .plus,
body.wma-shop-harmonise .quantity .minus,
body.wma-shop-harmonise .quantity .plus,
body.wma-shop-harmonise .woocommerce .quantity button {
	border-color: var( --wma-line );
	background-color: var( --wma-bg, #F5F6FA );
	color: var( --wma-text, #1A1A2E );
	box-shadow: none;
	text-shadow: none;
}

body.wma-shop-harmonise .woocommerce .quantity .minus:hover,
body.wma-shop-harmonise .woocommerce .quantity .plus:hover,
body.wma-shop-harmonise .quantity .minus:hover,
body.wma-shop-harmonise .quantity .plus:hover {
	background-color: var( --wma-tint );
	border-color: var( --wma-primary, #673DE6 );
	color: var( --wma-primary, #673DE6 );
}

/* ---------- fields ---------- */
body.wma-shop-harmonise .woocommerce input[type="text"],
body.wma-shop-harmonise .woocommerce input[type="email"],
body.wma-shop-harmonise .woocommerce input[type="tel"],
body.wma-shop-harmonise .woocommerce input[type="password"],
body.wma-shop-harmonise .woocommerce input[type="search"],
body.wma-shop-harmonise .woocommerce input[type="number"],
body.wma-shop-harmonise .woocommerce textarea,
body.wma-shop-harmonise .woocommerce select,
body.wma-shop-harmonise .woocommerce .select2-selection {
	border-color: var( --wma-line );
	border-radius: calc( var( --wma-radius, 14px ) - 6px );
	background-color: var( --wma-card-bg, #fff );
	color: var( --wma-text, #1A1A2E );
	box-shadow: none;
}

body.wma-shop-harmonise .woocommerce input:focus,
body.wma-shop-harmonise .woocommerce textarea:focus,
body.wma-shop-harmonise .woocommerce select:focus {
	border-color: var( --wma-primary, #673DE6 );
	box-shadow: 0 0 0 3px var( --wma-tint );
	outline: none;
}

/* A field the checkout rejected. Colour is the whole message
   here, so it belongs in the layer that cannot break anything. */
body.wma-shop-harmonise .woocommerce .woocommerce-invalid input.input-text,
body.wma-shop-harmonise .woocommerce .woocommerce-invalid select,
body.wma-shop-harmonise .woocommerce .woocommerce-invalid .select2-selection {
	border-color: var( --wma-bad );
	box-shadow: 0 0 0 3px rgba( 214, 54, 56, .12 );
}

body.wma-shop-harmonise .woocommerce .woocommerce-validated input.input-text {
	border-color: color-mix( in srgb, var( --wma-ok ) 55%, transparent );
}

/* ---------- notices ----------
   Colour and corner only. The old version also set display,
   flex and padding, which is what made theme-drawn tick marks
   land in the middle of the sentence.

   The fill is a light grey tile rather than the card white it
   used to be. A white notice on a white page is a line of
   coloured text with a hairline around it, which is why "the
   cart has been filled from your previous order" read as part
   of the cart table's heading area instead of as an
   announcement about it. Grey is the cheapest way to say "this
   is a different kind of thing" without moving anything.

   Flatsome's after-header placement is handled separately below:
   that one is full-bleed, so the fill goes on its inner container
   instead of on the notice itself. */
body.wma-shop-harmonise .woocommerce-message,
body.wma-shop-harmonise .woocommerce-info,
body.wma-shop-harmonise .woocommerce-error {
	border-color: var( --wma-line );
	border-left-color: var( --wma-primary, #673DE6 );
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-notice-bg, #F3F4F6 );
	color: var( --wma-text, #1A1A2E );
	box-shadow: var( --wma-shadow );
}

body.wma-shop-harmonise .woocommerce-message {
	border-left-color: var( --wma-ok );
}

body.wma-shop-harmonise .woocommerce-error {
	border-left-color: var( --wma-bad );
}

/* The one .woocommerce-info that is not an announcement.
   WooCommerce prints the checkout's "Have a coupon?" prompt
   through the notice system, and the refine layer below turns it
   into a card on purpose, so it keeps the card's fill. Grey
   there would read as a disabled field rather than a link. */
body.wma-shop-harmonise .woocommerce-form-coupon-toggle .woocommerce-info {
	background-color: var( --wma-card-bg, #fff );
}

/* ---------- the after-header strip ----------
   Two placements, and only one of them is a block the width of
   the page. On the cart, WooCommerce prints the notice inside the
   page container, so a background on it stops where the cart
   cards stop. Everywhere else Flatsome prints it on
   flatsome_after_header, outside any container and full-bleed,
   with a centred .container of its own inside it - so the same
   background ran the whole width of the screen while the product
   below it sat in a column.

   The fix is to paint the child rather than the parent. That
   inner element is the theme's own container: the same max-width
   and the same centring as every other block on the page, which
   is exactly the line the tile needed to stop on. Nothing here
   sets a width, so this stays a Layer 1 change - it is the same
   two declarations, moved down one element.

   Descendant rather than child, because an error notice is a
   <ul> and puts an <li> between the two. */
body.wma-shop-harmonise #wrapper > .message-wrapper {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

body.wma-shop-harmonise #wrapper > .message-wrapper .message-container {
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-notice-bg, #F3F4F6 );
	color: var( --wma-text, #1A1A2E );
	box-shadow: var( --wma-shadow );
}

/* ---------- badges, price, stock ---------- */
body.wma-shop-harmonise .woocommerce span.onsale {
	background-color: var( --wma-accent, #00C2A8 );
	color: #fff;
	border-radius: 999px;
	box-shadow: none;
}

body.wma-shop-harmonise .woocommerce .price,
body.wma-shop-harmonise .woocommerce .amount {
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .woocommerce .price del,
body.wma-shop-harmonise .woocommerce .price del .amount {
	color: var( --wma-muted );
	font-weight: 400;
}

body.wma-shop-harmonise .woocommerce .price ins {
	text-decoration: none;
	font-weight: 700;
}

body.wma-shop-harmonise .woocommerce .stock {
	color: var( --wma-ok );
}

body.wma-shop-harmonise .woocommerce .stock.out-of-stock {
	color: var( --wma-bad );
}

body.wma-shop-harmonise .woocommerce .star-rating,
body.wma-shop-harmonise .woocommerce .star-rating span {
	color: var( --wma-accent, #00C2A8 );
}

/* ---------- links, tabs, pagination ---------- */
body.wma-shop-harmonise .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .woocommerce nav.woocommerce-pagination ul li span.current,
body.wma-shop-harmonise .woocommerce nav.woocommerce-pagination ul li a:hover {
	background-color: var( --wma-primary, #673DE6 );
	border-color: var( --wma-primary, #673DE6 );
	color: #fff;
}

/* ---------- payment methods ---------- */
body.wma-shop-harmonise .woocommerce #payment ul.payment_methods li {
	border-color: var( --wma-line );
}

body.wma-shop-harmonise .woocommerce #payment ul.payment_methods li:has( input:checked ) {
	border-color: var( --wma-primary, #673DE6 );
}

body.wma-shop-harmonise .woocommerce #payment input[type="radio"],
body.wma-shop-harmonise .woocommerce input[type="checkbox"] {
	accent-color: var( --wma-primary, #673DE6 );
}

/* ---------- the quality floor ----------
   A visible focus ring on everything focusable, including the
   places a theme removed it from. Reaching checkout by keyboard
   is how a screen-reader user buys something. */
body.wma-shop-harmonise .woocommerce a:focus-visible,
body.wma-shop-harmonise .woocommerce button:focus-visible,
body.wma-shop-harmonise .woocommerce input:focus-visible,
body.wma-shop-harmonise .woocommerce select:focus-visible,
body.wma-shop-harmonise .woocommerce textarea:focus-visible {
	outline: 3px solid var( --wma-primary, #673DE6 );
	outline-offset: 2px;
}

@media ( prefers-contrast: more ) {

	body.wma-shop-harmonise,
	body.wma-minicart {
		--wma-line: color-mix( in srgb, var( --wma-text, #1A1A2E ) 32%, transparent );
		--wma-muted: color-mix( in srgb, var( --wma-text, #1A1A2E ) 78%, transparent );
	}
}

/* ============================================================
   MINI CART - LAYER 1 ONLY

   Colour, and nothing else, on purpose.

   This is the element the previous version broke worst: the
   title printed over the thumbnail, the price was clipped and
   the remove button sat on top of both. The cause was setting
   padding to zero on the link, which is where Flatsome was
   holding space for a thumbnail it positions absolutely.

   So the arrangement here belongs to the theme. Every rule
   below sets a colour, a corner or a weight, which means this
   block cannot move anything - whichever of the three levels is
   chosen, and on the account screens too, where the header
   mini cart opens just as readily.
   ============================================================ */

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item,
body.wma-minicart ul.cart_list li {
	border-color: var( --wma-line );
}

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item a:not(.remove),
body.wma-minicart ul.cart_list li a:not(.remove) {
	color: var( --wma-text, #1A1A2E );
	font-weight: 600;
}

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item a:not(.remove):hover,
body.wma-minicart ul.cart_list li a:not(.remove):hover {
	color: var( --wma-primary, #673DE6 );
}

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item img,
body.wma-minicart ul.cart_list li img {
	border-radius: 10px;
	background-color: var( --wma-bg, #F5F6FA );
}

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item .quantity,
body.wma-minicart ul.cart_list li .quantity {
	color: var( --wma-muted );
}

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item a.remove,
body.wma-minicart ul.cart_list li a.remove {
	color: var( --wma-muted ) !important; /* core sets this colour at high specificity */
	background-color: transparent;
	border-radius: 999px;
}

body.wma-minicart ul.woocommerce-mini-cart li.mini_cart_item a.remove:hover,
body.wma-minicart ul.cart_list li a.remove:hover {
	color: var( --wma-bad ) !important; /* overrides core's own hover colour */
	background-color: rgba( 214, 54, 56, .10 );
}

body.wma-minicart .woocommerce-mini-cart__total {
	border-color: var( --wma-line );
	color: var( --wma-text, #1A1A2E );
}

body.wma-minicart .woocommerce-mini-cart__total strong,
body.wma-minicart .woocommerce-mini-cart__total .amount {
	color: var( --wma-text, #1A1A2E );
}

/* The two buttons at the foot of the panel. "View cart" is a
   step sideways and "Checkout" is the step forward, so only one
   of them is filled - which is the fix for the screenshot where
   both were coloured and neither read as the next action. */
body.wma-minicart .woocommerce-mini-cart__buttons .button {
	border-color: var( --wma-primary, #673DE6 );
	background-color: var( --wma-primary, #673DE6 );
	color: #fff;
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
}

body.wma-minicart .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background-color: transparent;
	border-color: var( --wma-line );
	color: var( --wma-text, #1A1A2E );
}

body.wma-minicart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background-color: var( --wma-tint );
	border-color: var( --wma-primary, #673DE6 );
	color: var( --wma-primary, #673DE6 );
}

body.wma-minicart .woocommerce-mini-cart__empty-message {
	color: var( --wma-muted );
}

/* ============================================================
   LAYER 2 - REFINE

   Adds type scale, margin, and padding that only ever
   increases. Still nothing that sets display, position, float
   or width, so a working layout stays working.
   ============================================================ */

/* ---------- type ---------- */
body.wma-shop-refine .woocommerce .woocommerce-products-header__title,
body.wma-shop-refine .woocommerce h1.page-title,
body.wma-shop-refine .woocommerce div.product .product_title {
	font-size: clamp( 24px, 3.4vw, 30px );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-refine .woocommerce div.product p.price,
body.wma-shop-refine .woocommerce div.product span.price {
	font-size: clamp( 20px, 2.6vw, 26px );
	font-weight: 700;
}

body.wma-shop-refine .woocommerce .term-description,
body.wma-shop-refine .woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 15.5px;
	line-height: 1.65;
	color: var( --wma-muted );
}

body.wma-shop-refine .woocommerce .woocommerce-result-count {
	font-size: 14px;
	color: var( --wma-muted );
}

/* ---------- notices ----------
   The grey tile in Layer 1 makes the notice a shape on the page,
   and a shape needs room. Without it the banner touches the
   breadcrumb above and the cart card below, and three things
   stacked with no gap read as one thing - which is how a
   confirmation ends up looking like a table heading.

   Margin and padding only, both increases, so this stays inside
   what Layer 2 is allowed to do. */
body.wma-shop-refine .woocommerce-message,
body.wma-shop-refine .woocommerce-info,
body.wma-shop-refine .woocommerce-error {
	margin-top: 24px;
	margin-bottom: 24px;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* 24px is the inset the cards use, so the tick mark starts on the
   same line as the card content below it. Scoped to the wrapper
   WooCommerce prints itself, because the theme zeroes that inner
   container's side padding when it is nested in another one -
   which is what put the tick mark on the tile's own left edge. */
body.wma-shop-refine .woocommerce-notices-wrapper > .woocommerce-message,
body.wma-shop-refine .woocommerce-notices-wrapper > .woocommerce-info,
body.wma-shop-refine .woocommerce-notices-wrapper > .woocommerce-error {
	padding-left: 24px;
	padding-right: 24px;
}

/* The after-header strip, whose tile is one element further down.
   The padding goes where the fill went, or it would be 18px of
   transparent space around a tile with none of its own.

   The margin stays on the strip, and 11px is not a typo. Flatsome
   gives that element .75em of vertical padding at font-size 1.1em,
   which is a shade over 13px; the padding is space this layer may
   add to but not take away, so the margin makes up the difference
   and the gap comes to the same 24px as the cart.

   Side padding rises from the container's own 15px to 24px, which
   is the figure the cart notice and the cards use, so the sentence
   starts on the same line on both screens. */
body.wma-shop-refine #wrapper > .message-wrapper {
	margin-top: 11px;
	margin-bottom: 11px;
}

body.wma-shop-refine #wrapper > .message-wrapper .message-container {
	padding-top: 18px;
	padding-bottom: 18px;
	padding-left: 24px;
	padding-right: 24px;
}

/* ---------- table headings ----------
   Padding is added on both axes, never zeroed. The previous
   version set "padding: 12px 0", which removed the horizontal
   padding two adjacent headings were relying on to stay apart -
   and produced the PRODUCTOSUBTOTAL in the screenshot. */
body.wma-shop-refine .woocommerce table.shop_table th {
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --wma-muted );
}

body.wma-shop-refine .woocommerce table.shop_table td {
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 15px;
}

/* A minimum gap between two cells, whatever the theme's own
   padding is, expressed as a border so it can never be the
   thing that collapses. */
body.wma-shop-refine .woocommerce table.shop_table th + th,
body.wma-shop-refine .woocommerce table.shop_table td + td {
	border-left: 8px solid transparent;
}

/* The money column takes only the width it needs and never
   wraps; the name column gets everything left over. This is the
   actual fix for "Sweet Math Learning Module" arriving one word
   per line - it was a column squeezed to nothing, not a
   wrapping problem. */
body.wma-shop-refine .woocommerce table.shop_table td.product-price,
body.wma-shop-refine .woocommerce table.shop_table td.product-subtotal,
body.wma-shop-refine .woocommerce table.shop_table td.product-total,
body.wma-shop-refine .woocommerce table.shop_table th.product-price,
body.wma-shop-refine .woocommerce table.shop_table th.product-subtotal,
body.wma-shop-refine .woocommerce table.shop_table th.product-total {
	white-space: nowrap;
}

body.wma-shop-refine .woocommerce table.shop_table td.product-name {
	overflow-wrap: break-word;
	hyphens: none;
}

body.wma-shop-refine .woocommerce table.shop_table tfoot tr.order-total th,
body.wma-shop-refine .woocommerce table.shop_table tfoot tr.order-total td,
body.wma-shop-refine .woocommerce .cart_totals tr.order-total th,
body.wma-shop-refine .woocommerce .cart_totals tr.order-total td {
	font-size: 19px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var( --wma-text, #1A1A2E );
}

/* ---------- form rhythm ---------- */
body.wma-shop-refine .woocommerce form .form-row label,
body.wma-shop-refine .woocommerce .woocommerce-billing-fields label {
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var( --wma-text, #1A1A2E );
}

/* A checkbox label wants the opposite treatment to a field
   label - the same distinction that put "Stay signed in" off
   its own checkbox on the sign-in screen. */
body.wma-shop-refine .woocommerce label.checkbox,
body.wma-shop-refine .woocommerce label.woocommerce-form__label-for-checkbox {
	font-weight: 500;
}

body.wma-shop-refine .woocommerce .woocommerce-billing-fields h3,
body.wma-shop-refine .woocommerce .woocommerce-shipping-fields h3,
body.wma-shop-refine .woocommerce h3#order_review_heading,
body.wma-shop-refine .woocommerce .cart_totals h2,
body.wma-shop-refine .woocommerce .related > h2,
body.wma-shop-refine .woocommerce .upsells > h2 {
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var( --wma-text, #1A1A2E );
}

/* ---------- widgets and sidebars ----------
   Surface and spacing, no arrangement. A shop sidebar is
   several plugins' worth of markup and the one thing they all
   respond to is being given a consistent container. */
body.wma-shop-refine .woocommerce .widget,
body.wma-shop-refine .widget-area .widget,
body.wma-shop-refine .sidebar-inner .widget {
	padding: 18px 20px;
	border: 1px solid var( --wma-line );
	border-radius: var( --wma-radius, 14px );
	background-color: var( --wma-card-bg, #fff );
	box-shadow: var( --wma-shadow );
	font-size: 14.5px;
}

body.wma-shop-refine .woocommerce .widget .widget-title,
body.wma-shop-refine .widget-area .widget .widget-title,
body.wma-shop-refine .sidebar-inner .widget .widget-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --wma-muted );
}

body.wma-shop-refine .woocommerce .widget ul li a {
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-refine .woocommerce .widget ul li a:hover {
	color: var( --wma-primary, #673DE6 );
}

body.wma-shop-refine .woocommerce .widget ul li .count {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --wma-muted );
}

body.wma-shop-refine .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var( --wma-line );
	border-radius: 999px;
}

body.wma-shop-refine .woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background-color: var( --wma-primary, #673DE6 );
	border-radius: 999px;
}

body.wma-shop-refine .woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	border-radius: 999px;
	border-color: var( --wma-card-bg, #fff );
	background-color: var( --wma-primary, #673DE6 );
}

/* ---------- product tabs and panels ---------- */
body.wma-shop-refine .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 14.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

body.wma-shop-refine .woocommerce div.product .woocommerce-tabs .panel {
	font-size: 15px;
	line-height: 1.7;
}

body.wma-shop-refine .woocommerce table.shop_attributes th {
	font-weight: 600;
	color: var( --wma-muted );
}

body.wma-shop-refine .woocommerce div.product .product_meta {
	font-size: 13.5px;
	color: var( --wma-muted );
}

/* ---------- images ---------- */
body.wma-shop-refine .woocommerce div.product div.images img {
	border-radius: var( --wma-radius, 14px );
	background-color: var( --wma-bg, #F5F6FA );
}

body.wma-shop-refine .woocommerce ul.products li.product img {
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-bg, #F5F6FA );
}

body.wma-shop-refine .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --wma-text, #1A1A2E );
}

/* ---------- order received ---------- */
body.wma-shop-refine .woocommerce ul.order_details li {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --wma-muted );
}

body.wma-shop-refine .woocommerce ul.order_details li strong {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var( --wma-text, #1A1A2E );
}

/* ============================================================
   LAYER 3 - REBUILD

   Structure. Opt-in, and the admin screen says to look at a
   product page, the cart and the checkout after turning it on.

   Two rules learned from the screenshots, applied throughout:

     Never zero a padding on an element that might be holding
     space for an absolutely positioned child. Set the property
     that is wanted, not everything around it.

     Every grid and flex child gets min-width: 0. Without it a
     table or a long word sets the column's minimum size, the
     column refuses to shrink, and its neighbour is squeezed to
     nothing - which is how a summary column ended up ninety
     pixels wide with its contents hanging out of it.
   ============================================================ */

body.wma-shop-rebuild .woocommerce ul.products > li.product,
body.wma-shop-rebuild .woocommerce form.checkout > *,
body.wma-shop-rebuild .woocommerce .cart-collaterals > * {
	min-width: 0;
}

/* ---------- the product grid ----------
   Replaces the float layout WooCommerce and most themes still
   use here, so the widths and gutter margins that came with it
   have to be released or every card is 22.05% of a grid cell. */
body.wma-shop-rebuild .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
	gap: 20px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

body.wma-shop-rebuild .woocommerce ul.products::before,
body.wma-shop-rebuild .woocommerce ul.products::after {
	display: none;
}

body.wma-shop-rebuild .woocommerce ul.products li.product {
	width: auto !important;  /* releases the theme's percentage width */
	margin: 0 !important;    /* releases the theme's gutter margin */
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0;
	border: 1px solid var( --wma-line );
	border-radius: var( --wma-radius, 14px );
	background-color: var( --wma-card-bg, #fff );
	box-shadow: var( --wma-shadow );
	overflow: hidden;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}

body.wma-shop-rebuild .woocommerce ul.products li.product:hover {
	transform: translateY( -3px );
	border-color: color-mix( in srgb, var( --wma-primary, #673DE6 ) 30%, transparent );
	box-shadow: var( --wma-shadow-hover );
}

body.wma-shop-rebuild .woocommerce ul.products li.product img {
	width: 100%;
	margin: 0;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

body.wma-shop-rebuild .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.wma-shop-rebuild .woocommerce ul.products li.product h2 {
	margin: 0;
	padding: 16px 16px 0;
}

body.wma-shop-rebuild .woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	padding: 8px 16px 0;
}

body.wma-shop-rebuild .woocommerce ul.products li.product .star-rating {
	margin: 10px 16px 0;
}

/* Pushed to the foot of the card so a row has its actions on
   one line however long the names above them are. */
body.wma-shop-rebuild .woocommerce ul.products li.product .button {
	margin: 16px;
	margin-top: auto;
	width: calc( 100% - 32px );
}

/* ---------- the buy row ----------
   Quantity and add-to-cart matched in height on one line. */
body.wma-shop-rebuild .woocommerce div.product form.cart:not(.variations_form) {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

body.wma-shop-rebuild .woocommerce div.product form.cart .quantity {
	margin: 0;
	float: none;
}

body.wma-shop-rebuild .woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}

body.wma-shop-rebuild .woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- cart and checkout surfaces ---------- */
body.wma-shop-rebuild .woocommerce table.shop_table {
	border: 1px solid var( --wma-line );
	border-radius: var( --wma-radius, 14px );
	border-collapse: separate;
	border-spacing: 0;
	background-color: var( --wma-card-bg, #fff );
	box-shadow: var( --wma-shadow );
	overflow: hidden;
}

body.wma-shop-rebuild .woocommerce .woocommerce-billing-fields__field-wrapper,
body.wma-shop-rebuild .woocommerce .woocommerce-shipping-fields__field-wrapper,
body.wma-shop-rebuild .woocommerce #order_review,
body.wma-shop-rebuild .woocommerce .cart-collaterals .cart_totals {
	padding: 22px;
	border: 1px solid var( --wma-line );
	border-radius: var( --wma-radius, 14px );
	background-color: var( --wma-card-bg, #fff );
	box-shadow: var( --wma-shadow );
}

/* Inside a card the table is a list, not a panel of its own. */
body.wma-shop-rebuild .woocommerce #order_review table.shop_table,
body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	width: 100%;
}

/* ---------- two columns, where there is genuinely room ----------
   The summary gets a stated width rather than a fraction. As a
   fraction it collapsed under the address column and its table
   hung out of the side of the card, which is the checkout in
   the screenshot. 340px is enough for a product name, a
   quantity and a price on one line; below 1040px the whole
   thing is one column instead. */
@media ( min-width: 1040px ) {

	body.wma-shop-rebuild .woocommerce form.checkout {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) 340px;
		align-items: start;
		gap: 26px;
	}

	body.wma-shop-rebuild .woocommerce form.checkout > .woocommerce-form-login,
	body.wma-shop-rebuild .woocommerce form.checkout > .checkout_coupon,
	body.wma-shop-rebuild .woocommerce form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
	}

	body.wma-shop-rebuild .woocommerce form.checkout .col2-set {
		grid-column: 1;
		min-width: 0;
	}

	body.wma-shop-rebuild .woocommerce form.checkout #order_review_heading,
	body.wma-shop-rebuild .woocommerce form.checkout #order_review {
		grid-column: 2;
		min-width: 0;
	}

	/* The summary follows down a long form so the total and the pay
	   button stay in view. */
	body.wma-shop-rebuild .woocommerce form.checkout #order_review {
		position: sticky;
		top: 24px;
	}

	body.wma-shop-rebuild .woocommerce .cart-collaterals {
		display: flex;
		justify-content: flex-end;
	}

	body.wma-shop-rebuild .woocommerce .cart-collaterals .cart_totals {
		width: 420px;
		max-width: 100%;
	}
}

/* A last resort rather than a layout: if a payment gateway or a
   currency switcher puts something genuinely too wide inside the
   summary, it scrolls in place instead of overflowing the card
   and clipping the prices. */
body.wma-shop-rebuild .woocommerce #order_review table.shop_table {
	display: block;
	overflow-x: auto;
}

body.wma-shop-rebuild .woocommerce #order_review table.shop_table thead,
body.wma-shop-rebuild .woocommerce #order_review table.shop_table tbody,
body.wma-shop-rebuild .woocommerce #order_review table.shop_table tfoot {
	display: table;
	width: 100%;
}

/* ---------- the cart on a phone ----------
   A five-column table cannot be read on a 360px screen, so each
   row becomes a card with its headings written in beside the
   values, from the data-title attribute WooCommerce already
   sets and already translates. */
@media ( max-width: 640px ) {

	body.wma-shop-rebuild .woocommerce table.shop_table.cart thead {
		display: none;
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart,
	body.wma-shop-rebuild .woocommerce table.shop_table.cart tbody,
	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr,
	body.wma-shop-rebuild .woocommerce table.shop_table.cart td {
		display: block;
		width: auto;
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart {
		border: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item {
		position: relative;
		margin: 0 0 12px;
		padding: 16px;
		border: 1px solid var( --wma-line );
		border-radius: var( --wma-radius, 14px );
		background-color: var( --wma-card-bg, #fff );
		box-shadow: var( --wma-shadow );
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td {
		border: 0;
		text-align: left;
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td::before {
		content: attr( data-title ) ": ";
		margin-right: 6px;
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var( --wma-muted );
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail::before,
	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td.product-remove::before,
	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td.product-name::before,
	body.wma-shop-rebuild .woocommerce table.shop_table.cart td.actions::before {
		content: none;
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td.product-name {
		padding-right: 40px;
	}

	body.wma-shop-rebuild .woocommerce table.shop_table.cart tr.cart_item td.product-remove {
		position: absolute;
		top: 14px;
		right: 14px;
	}

	/* Totals stay a two-column reading task: a figure under its own
	   label is harder to scan than one beside it. */
	body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table,
	body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table tbody {
		display: table;
		width: 100%;
	}

	body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table tr {
		display: table-row;
	}

	body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table th,
	body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table td {
		display: table-cell;
	}

	body.wma-shop-rebuild .woocommerce .cart_totals table.shop_table td::before {
		content: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	body.wma-shop-rebuild .woocommerce ul.products li.product {
		transition: none;
	}

	body.wma-shop-rebuild .woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* Print: a cart or an order is something people keep as a
   record, and the cards, shadows and buttons are noise on paper. */
@media print {

	body.wma-shop-harmonise .woocommerce table.shop_table,
	body.wma-shop-harmonise .woocommerce ul.order_details li,
	body.wma-shop-harmonise .woocommerce #order_review {
		border: 1px solid #999;
		background: none;
		box-shadow: none;
	}

	body.wma-shop-harmonise .woocommerce .button,
	body.wma-shop-harmonise .woocommerce .wc-proceed-to-checkout,
	body.wma-shop-harmonise .woocommerce td.actions {
		display: none;
	}
}

/* ============================================================
   THE SCREENS THE LAYERS ABOVE NEVER REACHED

   Three things were wrong on a desktop and none of them were
   about taste:

   1. The single product page had no rules at all. The body class
      was being added and the stylesheet never used it, so the
      one screen people spend the most time on kept the theme's
      layout entirely.

   2. Cards were given a background and a radius without being
      given room, so a rounded panel sat flush against the thing
      above it and read as a mistake rather than a card.

   3. Flatsome's own column and row rules were winning on
      layout, because a single class selector beats an element
      one and most of the rules here were written against
      WooCommerce's markup rather than the theme's.

   Everything below is scoped to a wma-shop-* body class, so a
   store that has the redesign switched off is untouched.
   ============================================================ */

/* ---------- shared card treatment ----------
   One definition, so a panel cannot end up with the background
   and radius of a card and none of its spacing. */
body.wma-shop-refine .wma-card,
body.wma-shop-refine .woocommerce .cart-collaterals .cart_totals,
body.wma-shop-refine .woocommerce #order_review,
body.wma-shop-refine .woocommerce .woocommerce-form-coupon,
body.wma-shop-refine .woocommerce form.checkout_coupon {
	margin-bottom: 24px;
	padding: 22px 24px;
	border: 1px solid var(--wma-line);
	border-radius: var(--wma-radius);
	background: var(--wma-card-bg);
	box-shadow: var(--wma-shadow);
}

/* The coupon form sits directly above a rule the theme draws.
   Two horizontal lines a few pixels apart is the "misaligned"
   look; the card already separates it, so the rule goes. */
body.wma-shop-refine .woocommerce form.checkout_coupon + hr,
body.wma-shop-refine .woocommerce .woocommerce-form-coupon-toggle + hr,
body.wma-shop-refine .woocommerce-cart-form + hr,
body.wma-shop-refine .woocommerce .cart-wrapper > hr {
	display: none;
}

body.wma-shop-refine .woocommerce .woocommerce-form-coupon-toggle {
	margin-bottom: 18px;
}

/* The coupon prompt.
   It is a wc notice, which Flatsome draws as a bordered strip with almost no
   padding, so the card had text pressed against its own edges. */
body.wma-shop-refine .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0;
	padding: 18px 22px;
	border-radius: var(--wma-radius);
	line-height: 1.5;
}

body.wma-shop-refine .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info::before {
	/* WooCommerce reserves a left inset for an icon Flatsome does not draw,
	   which is what pushed the text off centre inside the card. */
	display: none;
}

/* The form that opens underneath it gets the same treatment, so the two read
   as one thing rather than a card followed by a dashed box. */
body.wma-shop-refine .woocommerce form.checkout_coupon.woocommerce-form-coupon {
	margin: 14px 0 24px;
	padding: 22px;
	border-style: solid;
	border-radius: var(--wma-radius);
}

body.wma-shop-refine .woocommerce form.checkout_coupon .form-row {
	margin-bottom: 0;
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */

body.wma-shop-refine.wma-shop-product .product-title,
body.wma-shop-refine.wma-shop-product .product_title {
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
}

body.wma-shop-refine.wma-shop-product .woocommerce-product-details__short-description {
	color: var(--wma-muted);
	line-height: 1.6;
}

/* Nothing is done to the column itself here: see the note in the rebuild
   layer about .product-info.summary being a grid column. */



body.wma-shop-refine.wma-shop-product .price,
body.wma-shop-refine.wma-shop-product p.price {
	font-size: 26px;
	font-weight: 700;
	color: var(--wma-text);
}

body.wma-shop-refine.wma-shop-product .price del {
	color: var(--wma-muted);
	font-weight: 400;
}

/* Tabs read as a strip of links rather than the theme's boxes. */
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--wma-bg);
	list-style: none;
}

body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs::before,
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs::after,
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs li::before,
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 999px;
}

body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wma-muted);
}

body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs li.active a,
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs li a:hover {
	background: var(--wma-card-bg);
	color: var(--wma-text);
	box-shadow: 0 1px 3px rgba(20, 20, 43, .10);
}

body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs .panel {
	padding: 0;
	border: 0;
	background: none;
}

/* ============================================================
   CART AND CHECKOUT ALIGNMENT

   The rounded panels were sitting flush against their
   neighbours and against the page edge on a desktop.
   ============================================================ */

@media ( min-width: 850px ) {
	/* Margin, not padding: these sit inside grid columns and padding here
	   would add to the column's own and unbalance the row. */
	body.wma-shop-refine .woocommerce .cart-collaterals {
		margin-left: 12px;
	}
}

body.wma-shop-refine .woocommerce table.shop_table {
	border-radius: var(--wma-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

/* A table with a radius and a border on every cell shows corners
   poking through the curve. */
body.wma-shop-refine .woocommerce table.shop_table td,
body.wma-shop-refine .woocommerce table.shop_table th {
	border-left: 0;
	border-right: 0;
}

body.wma-shop-refine .woocommerce .cart_totals table.shop_table,
body.wma-shop-refine .woocommerce #order_review table.shop_table {
	/* Already inside a card: a second border draws a box in a box. */
	border: 0;
	box-shadow: none;
	margin: 0;
}

body.wma-shop-refine .woocommerce .cart_totals h2,
body.wma-shop-refine .woocommerce #order_review_heading {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}

/* The place-order button belongs to the card above it. */
body.wma-shop-refine .woocommerce #payment {
	background: none;
	border-radius: 0;
}

body.wma-shop-refine .woocommerce #payment div.form-row.place-order {
	padding: 18px 0 0;
	margin: 0;
}

/* ============================================================
   HOLDING THE LAYOUT AGAINST THE THEME

   Flatsome's row and column rules are single-class selectors and
   were beating rules written against WooCommerce's own markup.
   These carry the body class as well, which puts them ahead
   without needing !important anywhere.
   ============================================================ */

/*
 * Flatsome's grid is built on negative margins: .row pulls itself 10-15px
 * wider than its container on both sides, and every .col puts that space
 * back as padding. The two only work as a pair.
 *
 * Stripping the column padding - which looked like the fix for content
 * sitting off centre - left the negative margins with nothing compensating
 * them, so every row hung past both edges of the screen. On a phone that
 * shows up as the whole page shifted left with a band of white down the
 * right, and a card whose right edge is somewhere off-screen.
 *
 * So the grid is left alone. Where a card needs breathing room it gets its
 * own margin, which is the layer's own business and cannot unbalance
 * somebody else's arithmetic.
 */
body.wma-shop-refine .woocommerce .row {
	max-width: 100%;
}

/* Belt and braces: a single overflowing element inside a checkout - a wide
   table, a long unbroken order number - would otherwise scroll the whole
   page sideways and produce the same symptom for a different reason. */
body.wma-shop-refine.wma-shop-checkout,
body.wma-shop-refine.wma-shop-cart {
	overflow-x: hidden;
}

@media ( max-width: 849px ) {
	body.wma-shop-refine .woocommerce .cart-collaterals,
	body.wma-shop-refine .woocommerce-cart-form {
		/* Only the extra inset this layer added on a desktop is removed
		   here; the theme's own padding stays, because the row above is
		   still pulling itself wider by the same amount. */
		padding-left: inherit;
		padding-right: inherit;
	}

	body.wma-shop-refine .wma-card,
	body.wma-shop-refine .woocommerce .cart-collaterals .cart_totals,
	body.wma-shop-refine .woocommerce #order_review {
		padding: 18px 16px;
		margin-bottom: 18px;
	}
}

/* ============================================================
   FULL REDESIGN, AGAINST FLATSOME'S ACTUAL MARKUP

   The rebuild layer promised a product grid, product cards,
   quantity matched to add-to-cart, a two-column checkout and a
   card-per-item cart on phones. It was written against
   WooCommerce's default markup - ul.products, li.product,
   #order_review - and Flatsome does not use most of it. Its
   loop is .product-small.box with .box-image and .box-text, its
   checkout is .large-7/.large-5 columns, and its cart is a
   .cart-wrapper around a responsive table.

   So the layer found almost nothing to style, which is why the
   level that promises the most visible change was the one that
   appeared to do the least.
   ============================================================ */

/* ---------- product cards in a loop ---------- */
body.wma-shop-rebuild .product-small.box {
	height: 100%;
	padding: 0 0 14px;
	border: 1px solid var(--wma-line);
	border-radius: var(--wma-radius);
	background: var(--wma-card-bg);
	overflow: hidden;
	transition: box-shadow .16s, transform .16s;
}

body.wma-shop-rebuild .product-small.box:hover {
	box-shadow: var(--wma-shadow);
	transform: translateY(-2px);
}

body.wma-shop-rebuild .product-small.box .box-image {
	border-radius: 0;
}

body.wma-shop-rebuild .product-small.box .box-text {
	padding: 14px 16px 0;
}

body.wma-shop-rebuild .product-small.box .product-title a {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wma-text);
	text-transform: none;
	letter-spacing: normal;
}

body.wma-shop-rebuild .product-small.box .price {
	font-weight: 700;
	color: var(--wma-text);
}

/* Equal-height cards need the column to stretch, which Flatsome's
   row does not do on its own. */
body.wma-shop-rebuild.wma-shop-archive .products.row {
	align-items: stretch;
}

body.wma-shop-rebuild.wma-shop-archive .products.row > .col {
	display: flex;
}

body.wma-shop-rebuild.wma-shop-archive .products.row > .col > .col-inner {
	width: 100%;
}

/* ---------- single product ---------- */
/*
 * .col-inner only, never .col.
 *
 * Flatsome's markup is class="product-info summary col col-fit entry-summary",
 * so .product-info.summary is itself a grid column. Zeroing its padding takes
 * away the space that balances the row's negative margins and pushes the
 * whole product page off the right of the screen. col-inner carries no such
 * arithmetic and is safe to flatten.
 */
body.wma-shop-rebuild.wma-shop-product .product-info.col-inner {
	padding-top: 0;
	padding-bottom: 0;
}

@media ( min-width: 850px ) {
	/* Extra breathing room from the gallery, added inside the column rather
	   than by changing the column's own padding. */
	body.wma-shop-rebuild.wma-shop-product .product-info.col-inner {
		padding-left: 12px;
	}
}

/* Quantity and add-to-cart on one line, matched in height. Flatsome wraps
   them in .add-to-cart-wrapper, which is where this has to happen. */
body.wma-shop-rebuild.wma-shop-product form.cart .quantity,
body.wma-shop-rebuild.wma-shop-product .add-to-cart-wrapper .quantity {
	height: 50px;
	margin-right: 10px;
}

body.wma-shop-rebuild.wma-shop-product form.cart .quantity input.qty,
body.wma-shop-rebuild.wma-shop-product form.cart .quantity input[type="button"] {
	height: 50px;
	line-height: 50px;
}

body.wma-shop-rebuild.wma-shop-product form.cart button.single_add_to_cart_button,
body.wma-shop-rebuild.wma-shop-product .add-to-cart-wrapper button.single_add_to_cart_button {
	height: 50px;
	min-height: 50px;
	padding: 0 26px;
	border-radius: var(--wma-radius);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

body.wma-shop-rebuild.wma-shop-product form.cart,
body.wma-shop-rebuild.wma-shop-product .add-to-cart-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

body.wma-shop-rebuild.wma-shop-product .is-well.add-to-cart-wrapper {
	padding: 18px;
	border-radius: var(--wma-radius);
	background: var(--wma-bg);
}

/* ---------- checkout: two columns, summary that follows ---------- */
@media ( min-width: 850px ) {
	body.wma-shop-rebuild.wma-shop-checkout .large-5.col {
		align-self: flex-start;
		position: sticky;
		/* clear of Flatsome's sticky header */
		top: 96px;
	}
}

/* col-inner carries no grid arithmetic of its own, so it is safe to flatten;
   .col is the one holding the row's negative margins in check and is left
   exactly as the theme set it. */
body.wma-shop-rebuild.wma-shop-checkout .large-7.col > .col-inner,
body.wma-shop-rebuild.wma-shop-checkout .large-5.col > .col-inner {
	padding-top: 0;
	padding-bottom: 0;
}



/* ---------- cart: a card per item on a phone ----------
   Flatsome's responsive table already stacks; without a card each row runs
   into the next and the whole thing reads as one long list. */
@media ( max-width: 849px ) {
	body.wma-shop-rebuild.wma-shop-cart .cart-wrapper {
		overflow: visible;
	}

	/*
	 * The table itself has to stop being a table.
	 *
	 * Turning the rows into blocks and leaving <table> as display:table
	 * meant the browser still sized the whole thing by table layout: the
	 * six columns kept their intrinsic widths, the table stayed wider than
	 * the screen, and every card ended up flush to the left with a band of
	 * empty space down the right. The rows looked stacked; the box around
	 * them never was.
	 */
	body.wma-shop-rebuild.wma-shop-cart table.cart,
	body.wma-shop-rebuild.wma-shop-cart table.cart tbody {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0;
		border: 0;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart tbody tr.cart_item {
		display: block;
		margin: 0 0 14px;
		padding: 16px;
		border: 1px solid var(--wma-line);
		border-radius: var(--wma-radius);
		background: var(--wma-card-bg);
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart tbody tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: auto;
		padding: 6px 0;
		border: 0;
		text-align: right;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart tbody tr.cart_item td.product-thumbnail {
		justify-content: flex-start;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart tbody tr.cart_item td.product-remove {
		justify-content: flex-end;
		padding-top: 0;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart thead {
		display: none;
	}

	/* The actions row holds the coupon field and Update cart, and is a
	   table cell spanning six columns it no longer has. */
	body.wma-shop-rebuild.wma-shop-cart table.cart tbody tr:not(.cart_item),
	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions .coupon {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 0 14px;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions .coupon input.input-text {
		flex: 1 1 150px;
		min-width: 0;
		margin: 0;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions .coupon button {
		flex: 0 0 auto;
		margin: 0;
	}

	/* pull-left and small fight the stacked layout they were written for */
	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions button[name="update_cart"] {
		float: none;
		width: 100%;
		margin: 0;
	}
}

/* ============================================================
   BUTTONS THAT WRAP

   Spanish labels are longer than English ones - "Ver detalles",
   "Continuar comprando" - and a button given a fixed height
   with text that wraps to two lines either overflows or grows
   lopsided against its neighbour. These size to their content
   with a floor rather than a fixed height, and every button in
   a row of product cards lines up because the card is a column
   with the button pushed to the bottom.
   ============================================================ */

body.wma-shop-rebuild .product-small.box .box-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

body.wma-shop-rebuild .product-small.box .box-text .button,
body.wma-shop-rebuild .product-small.box .box-text .add-to-cart-button {
	margin-top: auto;
}

body.wma-shop-rebuild .product-small.box .button,
body.wma-shop-rebuild .woocommerce .cart .actions .button,
body.wma-shop-rebuild .woocommerce .wc-proceed-to-checkout .button,
body.wma-shop-rebuild .woocommerce .continue-shopping .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 46px;
	padding: 11px 16px;
	border-radius: var(--wma-radius);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	/* wrap onto a second line rather than overflow the button */
	white-space: normal;
	text-transform: none;
	letter-spacing: normal;
}


/* ============================================================
   EQUAL GUTTERS

   The last fix stopped this plugin unbalancing Flatsome's grid
   by removing half of it. That was right, but it left the other
   problem in place: on a phone the row still pulls itself
   10-15px wider on both sides and the column pads it back, and
   whatever the container does with that overhang is not
   symmetrical once a card with its own border sits inside.
   The result is a page that reads as slightly off - more air
   down the right than the left.

   Rather than adjusting one side to compensate, both halves of
   the arithmetic are set together: the row's negative margins
   go to zero and the columns get one padding value. Symmetric
   by construction, so it cannot drift again.

   Only cart, checkout and the product page, and only where
   those rows are already stacked - the grid is doing real work
   at wider sizes and is left alone there.
   ============================================================ */

@media ( max-width: 849px ) {

	body.wma-shop-refine.wma-shop-checkout .row,
	body.wma-shop-refine.wma-shop-cart .row,
	body.wma-shop-refine.wma-shop-product .row {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	body.wma-shop-refine.wma-shop-checkout .row > .col,
	body.wma-shop-refine.wma-shop-cart .row > .col,
	body.wma-shop-refine.wma-shop-product .row > .col {
		/* One value, both sides. */
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
		flex-basis: 100%;
	}

	/*
	 * The page gutter now lives on the container, in one place, so every
	 * card on the screen starts and ends on the same two lines - the
	 * coupon box, the billing panel and the order summary included.
	 */
	body.wma-shop-refine.wma-shop-checkout .cart-container,
	body.wma-shop-refine.wma-shop-checkout .page-checkout,
	body.wma-shop-refine.wma-shop-cart .cart-container,
	body.wma-shop-refine.wma-shop-product .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Nothing inside may add an inset of its own, or the alignment the
	   container just established is lost one element at a time. */
	body.wma-shop-refine.wma-shop-checkout .woocommerce,
	body.wma-shop-refine.wma-shop-checkout form.checkout,
	body.wma-shop-refine.wma-shop-checkout .col-inner,
	body.wma-shop-refine.wma-shop-cart .woocommerce,
	body.wma-shop-refine.wma-shop-cart .col-inner {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	body.wma-shop-refine.wma-shop-cart .woocommerce .cart-collaterals {
		margin-left: 0;
	}

	/* Cards then run the full width between those gutters. */
	body.wma-shop-refine .wma-card,
	body.wma-shop-refine .woocommerce .cart-collaterals .cart_totals,
	body.wma-shop-refine .woocommerce #order_review,
	body.wma-shop-refine .woocommerce .woocommerce-form-coupon,
	body.wma-shop-refine .woocommerce form.checkout_coupon,
	body.wma-shop-refine .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ------------------------------------------------------------
   And the same discipline on a desktop: the two checkout
   columns are separated by the grid itself, so neither needs an
   inset of its own. One extra margin on one column is precisely
   how a layout ends up looking a few pixels wrong without
   anybody being able to say why.
   ------------------------------------------------------------ */
@media ( min-width: 850px ) {
	body.wma-shop-refine .woocommerce .cart-collaterals {
		margin-left: 0;
	}
}

/* ============================================================
   DESKTOP CORRECTIONS

   Four faults on a desktop, and all four are the same mistake
   made in four places: a rule written against WooCommerce's
   own markup, applied to Flatsome's, whose arithmetic is not
   the same.

   Nothing below removes a layer. Each fix is scoped to the
   layer that introduced the fault, so a store on harmonise is
   still untouched.
   ============================================================ */

/* ------------------------------------------------------------
   1. CHECKOUT - A GRID WITH ONE THING TO PUT IN TWO COLUMNS

   WooCommerce's own checkout form has the address fields and
   the order summary as direct children, so a two-column grid
   on form.checkout puts one in each column. Flatsome's form
   holds a single .row, and that row holds .large-7 and
   .large-5.

   So the grid had one item for two columns. The row went into
   the 1fr column, the stated 340px column stayed empty, and
   the whole checkout was compressed into the left two thirds
   of the container with a blank band down the right - which is
   the screenshot. Inside that squeeze Flatsome's own
   percentages took a further 42% for the summary, the
   .has-border wrapper took 60px of padding, and the card took
   48 more: 172px of usable width, which is why the card
   number, the expiry and the CVC printed on top of each other
   and the order table grew a scrollbar.

   Two independent corrections, so this holds whether or not
   :has() is available.
   ------------------------------------------------------------ */

/* Whatever the browser: a theme that brings its own row is
   bringing the layout, and the row takes the full width of the
   grid rather than one column of it. */
@media ( min-width: 1040px ) {

	body.wma-shop-rebuild .woocommerce form.checkout > .row {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* And where :has() is available the grid is not declared at
   all on such a form - one layout doing the work instead of
   two overlaid. */
@supports selector( :has( * ) ) {

	@media ( min-width: 1040px ) {

		body.wma-shop-rebuild .woocommerce form.checkout:has( > .row ) {
			display: block;
			gap: 0;
		}
	}
}

/* The summary follows the page down by way of the theme's own
   sticky column (see the .large-5 rule above). A second sticky
   on #order_review inside it can only fight it, and its
   containing block is no taller than itself, so it was never
   doing anything here anyway. */
body.wma-shop-rebuild.wma-shop-checkout .large-5.col #order_review {
	position: static;
}

/* ------------------------------------------------------------
   2. CHECKOUT SUMMARY - ONE FRAME, NOT TWO

   Flatsome's default checkout marks the summary column
   .has-border: a 2px frame in the primary colour and 30px of
   padding. #order_review inside it is already a card in this
   design, so the screen carried a box drawn inside a box - and
   the 60px the outer padding took was 60px the payment fields
   did not get.

   col-inner carries none of the grid's arithmetic (see the
   note further up), so flattening it is safe. The card keeps
   the frame, and the summary reads like the cart totals.
   ------------------------------------------------------------ */
body.wma-shop-refine.wma-shop-checkout .large-5.col > .col-inner.has-border,
body.wma-shop-refine.wma-shop-checkout .large-5.col > .col-inner.is-well {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* ------------------------------------------------------------
   3. PAYMENT FIELDS CANNOT BE LAID OUT IN HALVES

   A gateway that puts expiry beside CVC is assuming the width
   of a form, not of a sidebar. Stacked and full width at every
   size: correct in a column this narrow, and it means a narrow
   column can never again produce overlapping placeholders.
   ------------------------------------------------------------ */
body.wma-shop-refine .woocommerce #order_review .payment_box .form-row,
body.wma-shop-refine .woocommerce #order_review .wc-credit-card-form .form-row,
body.wma-shop-refine .woocommerce #order_review .form-row-first,
body.wma-shop-refine .woocommerce #order_review .form-row-last {
	float: none;
	clear: both;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------------------
   4. CART - THE CARD THAT CLIPPED ITS OWN LAST COLUMN

   The cart table was carrying the card itself: border, radius,
   shadow and overflow: hidden. Two consequences, both in the
   screenshot.

   Flatsome zeroes the outer padding of the first and last cell
   in a row - td:first-child { padding-left: 0 } - which is
   right when a table has no frame of its own, because the
   figures then line up with the text above them. Once the
   table is a card, the remove cross sits on the left border
   and SUBTOTAL sits on the right one.

   And a table cannot hold padding around its own columns: the
   heading is set uppercase and tracked out, it asked for a few
   pixels more than automatic table layout had given its
   column, and overflow: hidden cut the last letter off rather
   than letting the column have them.

   So the card moves out to the wrapper Flatsome already
   provides, where padding is padding rather than a column
   width, and the wrapper is allowed to scroll. A store with
   more columns than this one now gets a scrollbar in the worst
   case instead of a truncated total, which is the difference
   between a layout under pressure and a wrong figure.

   Only where that wrapper exists, so a theme without one keeps
   the table-as-card it had.
   ------------------------------------------------------------ */
@media ( min-width: 850px ) {

	body.wma-shop-refine.wma-shop-cart .cart-wrapper {
		padding: 4px 20px 8px;
		border: 1px solid var( --wma-line );
		border-radius: var( --wma-radius );
		background: var( --wma-card-bg );
		box-shadow: var( --wma-shadow );
		overflow-x: auto;
	}

	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart {
		margin: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
	}

	/* The 20px the wrapper now holds on each side has to come from
	   somewhere or the table simply scrolls instead of clipping.
	   The thumbnail is the column with the most to give: 90px of
	   frame around an image that is square and will fill whatever
	   it is given. */
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart td.product-thumbnail,
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart th.product-thumbnail {
		width: 68px;
		min-width: 68px;
		max-width: 68px;
	}

	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart td.product-thumbnail img {
		width: 100%;
		height: auto;
	}

	/* And the rest from the gap between cells, which was set at 8px
	   as a floor against two headings touching. Six is still a gap. */
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart th + th,
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart td + td {
		border-left: 6px solid transparent;
	}

	/* A heading may wrap. Only the figures may not - and a price is
	   one token, so nowrap on them costs nothing. Keeping it on the
	   heading is what asked the column for width it did not have. */
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart th.product-price,
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart th.product-subtotal,
	body.wma-shop-refine.wma-shop-cart .cart-wrapper table.shop_table.cart th.product-total {
		white-space: normal;
		letter-spacing: .02em;
	}

	/* Continue shopping and Update cart were both being given the
	   full width of the row, so each took a line of its own and the
	   card ran on past the item it was describing. They are two
	   choices of the same size: side by side, each as wide as its
	   own label. */
	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions {
		padding-top: 20px;
		padding-bottom: 8px;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions .button {
		width: auto;
	}

	body.wma-shop-rebuild.wma-shop-cart table.cart td.actions .continue-shopping {
		margin-right: 12px;
	}
}

/* ------------------------------------------------------------
   5. PRODUCT CARDS - ROOM INSIDE, AND AIR ABOVE THE BUTTON

   margin-top: auto puts the button at the foot of the card, so
   a row of cards has its actions on one line however long the
   names above them are. What it does not do is guarantee a
   gap: an auto margin distributes space the card has spare,
   and the tallest card in a row - or the only card on a
   single-result archive - has none. Both screenshots show the
   same thing, the button hard against the price.

   So the gap is a padding on the block above it, which is
   there whether the card has room to give or not, and the auto
   margin goes on doing its own job on top of that.
   ------------------------------------------------------------ */
body.wma-shop-rebuild .product-small.box {
	padding-bottom: 18px;
}

body.wma-shop-rebuild .product-small.box .box-text {
	padding: 18px 20px 0;
	row-gap: 4px;
}

/* The floor the auto margin cannot supply. This sits under the
   price and under anything printed with it - a billing cycle,
   "Monthly subscription" - because it is the wrapper that is
   padded, not the price itself. */
body.wma-shop-rebuild .product-small.box .box-text > .price-wrapper {
	padding-bottom: 14px;
}

/* Whichever of the theme's two shapes the action arrives in. */
body.wma-shop-rebuild .product-small.box .box-text > .add-to-cart-button,
body.wma-shop-rebuild .product-small.box .box-text > .button,
body.wma-shop-rebuild .product-small.box .box-text > form.cart {
	margin-top: auto;
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   6. AIR BETWEEN THE CARDS

   Flatsome's product loop is .row-small: a 10px negative
   margin on the row and 9.8px of padding on each column, so
   19.6px between one card and the next and the same underneath.
   That is a gutter judged for cards with no edges. These cards
   have a border, a radius and a shadow, and at 19.6px they
   read as one block of panels rather than a set of things.

   Both halves of the arithmetic are set together, as
   everywhere else in this file - the row's margins and the
   columns' padding - so the grid cannot end up lopsided. The
   extra goes underneath as well, because a row of cards needs
   more room below it than beside it, not less.

   On a phone the cards are two to a row inside a page gutter
   this file already sets on the container, and 19.6px between
   them is right at that size - so this starts where the grid
   starts doing real work.
   ------------------------------------------------------------ */
@media ( min-width: 850px ) {

	body.wma-shop-refine.wma-shop-archive .products.row.row-small,
	body.wma-shop-refine.wma-shop-product .products.row.row-small {
		margin-left: -13px;
		margin-right: -13px;
	}

	body.wma-shop-refine.wma-shop-archive .products.row.row-small > .col,
	body.wma-shop-refine.wma-shop-product .products.row.row-small > .col {
		padding-left: 13px;
		padding-right: 13px;
		padding-bottom: 30px;
	}
}

/* ============================================================
   SECOND PASS

   The checkout lays out correctly now, which made three things
   visible that the squeeze had been hiding, and the product
   page turned out to have the same fault as the cart table: a
   piece of the theme's own drawing left stranded inside
   something this stylesheet had replaced underneath it.
   ============================================================ */

/* ------------------------------------------------------------
   7. A CARD HAS TO CONTAIN WHAT IS IN IT

   WooCommerce lays a checkout out in floated halves -
   .form-row-first and .form-row-last, 48% each - and clears
   them with .form-row-wide on the next full-width row. The
   last pair has no row after it, so nothing clears them and
   the panel's height stops above them.

   On an unstyled panel that is invisible. Once the panel is a
   card it is not: the bottom border draws straight through the
   email and telephone fields and the next heading prints on
   top of them, which is the screenshot.

   flow-root contains the floats and changes nothing else. The
   pseudo-element does the same job for anything that predates
   it, and costs an empty table row where it is not needed.
   ------------------------------------------------------------ */
body.wma-shop-refine .woocommerce .woocommerce-billing-fields__field-wrapper,
body.wma-shop-refine .woocommerce .woocommerce-shipping-fields__field-wrapper,
body.wma-shop-refine .woocommerce .woocommerce-additional-fields__field-wrapper,
body.wma-shop-refine .woocommerce .woocommerce-address-fields__field-wrapper {
	display: flow-root;
}

body.wma-shop-refine .woocommerce .woocommerce-billing-fields__field-wrapper::after,
body.wma-shop-refine .woocommerce .woocommerce-shipping-fields__field-wrapper::after,
body.wma-shop-refine .woocommerce .woocommerce-additional-fields__field-wrapper::after,
body.wma-shop-refine .woocommerce .woocommerce-address-fields__field-wrapper::after {
	content: "";
	display: table;
	clear: both;
}

/* ------------------------------------------------------------
   8. THE ORDER NOTES WERE NOT PART OF THE DESIGN

   Billing and shipping were given cards and their headings
   were given the type treatment. The additional-fields block -
   "Additional information", and the order notes under it - was
   in neither list, so on the same screen it kept the theme's
   uppercase tracked-out heading and had no card at all while
   everything around it had both. Nothing was wrong with it; it
   had simply been missed.

   Note which element is carded: the wrapper, not the block.
   The heading is a sibling of the wrapper and stays outside
   the card, exactly as the billing heading does, or the two
   halves of the same form would be built differently.
   ------------------------------------------------------------ */
body.wma-shop-rebuild .woocommerce .woocommerce-additional-fields__field-wrapper {
	padding: 22px;
	border: 1px solid var( --wma-line );
	border-radius: var( --wma-radius, 14px );
	background-color: var( --wma-card-bg, #fff );
	box-shadow: var( --wma-shadow );
}

body.wma-shop-refine .woocommerce .woocommerce-additional-fields h3,
body.wma-shop-refine .woocommerce .woocommerce-account-fields h3 {
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var( --wma-text, #1A1A2E );
}

/* The notes field is the one textarea on the checkout and it
   arrives with no rows worth typing into. */
body.wma-shop-refine .woocommerce .woocommerce-additional-fields textarea {
	min-height: 100px;
	line-height: 1.6;
}

/* ------------------------------------------------------------
   9. THE PAYMENT BOX

   Two faults, one of them only partly this stylesheet's to
   fix.

   The brand marks a gateway prints inside its own label had
   nothing holding them off the wording, so "Tarjetas de
   Crédito ó Débito" ran straight into the Amex logo. A label
   is a row of things - words and marks - and wants to be laid
   out as one.

   And the field styling above is written against
   input[type="text"], input[type="tel"] and so on, which is
   every field WooCommerce's own credit card form draws. A
   gateway using hosted fields draws a div and mounts an iframe
   in it, so it matched none of those rules and arrived with no
   border beside billing fields that all had one.

   The wrapper classes below are the ones the common hosted
   field gateways document. This is deliberately not a guess at
   every gateway there is: one that names its wrapper something
   else will still need a line adding here, and it is better
   that it looks unstyled than that a blind selector reformats
   an iframe somebody else is positioning.
   ------------------------------------------------------------ */
body.wma-shop-refine .woocommerce #payment ul.payment_methods li label img {
	max-height: 22px;
	width: auto;
	margin: 0 0 0 6px;
	vertical-align: middle;
}

body.wma-shop-rebuild .woocommerce #payment ul.payment_methods li label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1.45;
}

body.wma-shop-rebuild .woocommerce #payment ul.payment_methods li label img {
	margin: 0;
}

/* Nothing inside a payment box is laid out in halves. The
   column is not wide enough for it and a hosted field cannot
   be relied upon to know how wide it is. */
body.wma-shop-refine .woocommerce #payment .payment_box > p,
body.wma-shop-refine .woocommerce #payment .payment_box > div,
body.wma-shop-refine .woocommerce #payment .payment_box > fieldset > p {
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

body.wma-shop-refine .woocommerce #payment .payment_box .StripeElement,
body.wma-shop-refine .woocommerce #payment .payment_box .wc-stripe-elements-field,
body.wma-shop-refine .woocommerce #payment .payment_box .wc-stripe-iban-element-field,
body.wma-shop-refine .woocommerce #payment .payment_box .wc-payment-gateway-hosted-field,
body.wma-shop-refine .woocommerce #payment .payment_box .braintree-hosted-field,
body.wma-shop-refine .woocommerce #payment .payment_box .wc-card-holder-field {
	padding: 11px 12px;
	border: 1px solid var( --wma-line );
	border-radius: calc( var( --wma-radius, 14px ) - 6px );
	background-color: var( --wma-card-bg, #fff );
}

/* ------------------------------------------------------------
   10. THE TAB PILL AND THE RULE ABOVE IT

   The same fault as the cart table, on a different screen.

   Flatsome marks the active tab with a 3px bar in the primary
   colour, drawn as an absolutely positioned pseudo-element on
   the link at top: 0 with width: 100% - and draws the divider
   between tabs the same way, on the link, at left: -1em. The
   pill treatment above replaced the boxes both were designed
   for, but only hid the pseudo-elements on the li. The ones on
   the a survived.

   So the active tab carried a square bar across the top of a
   rounded pill, out past both corners, a few pixels under the
   rule the theme draws above the tabs - which is two
   horizontal lines almost touching, and reads as the pill
   sitting on the rule. The pill is the indicator here; the bar
   has nothing left to indicate.

   And the strip is now as wide as the tabs in it. Stretched
   across the page it read as a bar with something in the
   corner rather than a set of choices, and on a product with
   one tab, as a mistake.
   ------------------------------------------------------------ */
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs > li > a::before,
body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs > li > a::after {
	display: none;
	content: none;
}

body.wma-shop-rebuild.wma-shop-product .woocommerce-tabs ul.tabs {
	width: fit-content;
	max-width: 100%;
	margin-top: 10px;
	align-items: center;
}

/* ============================================================
   AN EMPTY CART

   A card with a drawn basket, a count badge and one clear way
   out. Everything is stroked in the store's own ink and
   accented with its own colours, so it belongs to this shop
   rather than looking like a stock graphic dropped in.

   Two colours are used: the primary for one pencil and the
   count, and a second warm accent for the other pencil. The
   accent has its own token so a store can set it without
   touching anything else, and it falls back to the primary
   rather than to a colour picked here - a drawing in somebody
   else's brand is worse than a drawing in one colour.
   ============================================================ */

body.wma-shop-harmonise .wma-empty {
	/*
	 * The second pencil's colour.
	 *
	 * Derived from the store's own primary rather than picked here, so the
	 * drawing is always two-tone and always on brand - a fixed second hue
	 * would look borrowed on any shop whose palette did not happen to suit
	 * it. Set --wma-empty-accent yourself to use a real second colour, such
	 * as the gold in a logo.
	 */
	--wma-empty-accent: color-mix( in srgb, var( --wma-primary, #673DE6 ) 42%, var( --wma-card-bg, #fff ) );

	display: flex;
	justify-content: center;
	padding: 32px 16px 56px;
}

body.wma-shop-harmonise .wma-empty-card {
	width: 100%;
	max-width: 400px;
	padding: 0 28px 34px;
	border-radius: calc( var( --wma-radius, 14px ) + 6px );
	background: var( --wma-card-bg, #fff );
	box-shadow: var( --wma-shadow, 0 8px 30px rgba( 20, 20, 43, .07 ) );
	text-align: center;
	overflow: hidden;
}

/* ---------- the drawing ---------- */
body.wma-shop-harmonise .wma-empty-art {
	position: relative;
	/* Pulled to the card's edges so the tinted rise inside the drawing
	   reaches them, which is what stops it looking like a picture pasted
	   onto a panel. */
	margin: 0 -28px 22px;
}

body.wma-shop-harmonise .wma-empty-svg {
	display: block;
	width: 100%;
	height: auto;
}

body.wma-shop-harmonise .wma-empty-hill {
	fill: color-mix( in srgb, var( --wma-text, #1A1A2E ) 4%, var( --wma-card-bg, #fff ) );
}

body.wma-shop-harmonise .wma-empty-basket,
body.wma-shop-harmonise .wma-empty-basket-rim {
	fill: var( --wma-card-bg, #fff );
	stroke: var( --wma-text, #1A1A2E );
	stroke-width: 4;
}

body.wma-shop-harmonise .wma-empty-face {
	fill: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .wma-empty-mouth {
	stroke: var( --wma-text, #1A1A2E );
	stroke-width: 3.4;
	fill: none;
}

body.wma-shop-harmonise .wma-empty-pencil-a {
	fill: var( --wma-empty-accent );
}

body.wma-shop-harmonise .wma-empty-pencil-b {
	fill: var( --wma-primary, #673DE6 );
}

body.wma-shop-harmonise .wma-empty-sparkle {
	fill: color-mix( in srgb, var( --wma-text, #1A1A2E ) 18%, transparent );
}

body.wma-shop-harmonise .wma-empty-shadow {
	fill: color-mix( in srgb, var( --wma-text, #1A1A2E ) 9%, transparent );
}

/* ---------- the count badge ----------
   HTML rather than text inside the SVG, so it translates and uses the same
   typeface as the rest of the page. */
body.wma-shop-harmonise .wma-empty-count {
	position: absolute;
	left: 12%;
	top: 52%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 2px dashed color-mix( in srgb, var( --wma-text, #1A1A2E ) 30%, transparent );
	background: var( --wma-card-bg, #fff );
	line-height: 1;
}

body.wma-shop-harmonise .wma-empty-count-n {
	font-size: 20px;
	font-weight: 700;
	color: var( --wma-primary, #673DE6 );
}

body.wma-shop-harmonise .wma-empty-count-l {
	margin-top: 2px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var( --wma-muted, #5A6B85 );
}

/* ---------- words ---------- */
body.wma-shop-harmonise .wma-empty-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var( --wma-text, #1A1A2E );
	text-transform: none;
}

body.wma-shop-harmonise .wma-empty-text {
	margin: 0 auto 24px;
	max-width: 28ch;
	font-size: 15px;
	line-height: 1.55;
	color: var( --wma-muted, #5A6B85 );
}

/* Whatever another plugin prints through woocommerce_cart_is_empty. Kept
   plain: it is somebody else's sentence, not a second announcement. */
body.wma-shop-harmonise .wma-empty .woocommerce-info,
body.wma-shop-harmonise .wma-empty .cart-empty {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --wma-muted, #5A6B85 );
	font-size: 14.5px;
	text-align: center;
}

body.wma-shop-harmonise .wma-empty .woocommerce-info::before,
body.wma-shop-harmonise .wma-empty .cart-empty::before {
	display: none;
}

/* ---------- the way out ---------- */
body.wma-shop-harmonise .wma-empty-go {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	padding: 13px 24px;
	border-radius: var( --wma-radius, 14px );
	background: var( --wma-primary, #673DE6 );
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	transition: filter .14s, box-shadow .14s;
}

body.wma-shop-harmonise .wma-empty-go:hover,
body.wma-shop-harmonise .wma-empty-go:focus {
	filter: brightness( 1.06 );
	box-shadow: 0 6px 18px color-mix( in srgb, var( --wma-primary, #673DE6 ) 30%, transparent );
	color: #fff;
	text-decoration: none;
}

body.wma-shop-harmonise .wma-empty-go:focus-visible,
body.wma-shop-harmonise .wma-empty-note a:focus-visible {
	outline: 3px solid var( --wma-text, #1A1A2E );
	outline-offset: 2px;
}

body.wma-shop-harmonise .wma-empty-note {
	margin: 14px auto 0;
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.45;
	color: var( --wma-muted, #5A6B85 );
}

body.wma-shop-harmonise .wma-empty-note a {
	color: var( --wma-primary, #673DE6 );
	font-weight: 600;
	text-decoration: none;
}

body.wma-shop-harmonise .wma-empty-note a:hover {
	text-decoration: underline;
}

@media ( max-width: 600px ) {
	body.wma-shop-harmonise .wma-empty {
		padding: 20px 12px 44px;
	}

	body.wma-shop-harmonise .wma-empty-card {
		padding: 0 20px 28px;
	}

	body.wma-shop-harmonise .wma-empty-art {
		margin-left: -20px;
		margin-right: -20px;
	}

	body.wma-shop-harmonise .wma-empty-title {
		font-size: 20px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body.wma-shop-harmonise .wma-empty-go {
		transition: none;
	}
}

/* ============================================================
   NOTICES ON THE SHOP PAGES

   The notice markup is this plugin's own now and carries
   .wma-notice, so the shop keeps the tile it already had while
   no longer depending on winning a specificity argument with
   the theme over WooCommerce's class.

   The account stylesheet does not load here and this one does
   not load there, so the shared piece is small and stated in
   both rather than one file reaching into the other's pages.
   ============================================================ */

body.wma-shop-harmonise .wma-notice {
	border-color: var( --wma-line );
	border-left-color: var( --wma-primary, #673DE6 );
	border-left-width: 3px;
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-notice-bg, #F3F4F6 );
	color: var( --wma-text, #1A1A2E );
	box-shadow: var( --wma-shadow );
	list-style: none;
}

body.wma-shop-harmonise .wma-notice-success {
	border-left-color: var( --wma-ok );
}

body.wma-shop-harmonise .wma-notice-error {
	border-left-color: var( --wma-bad );
}

body.wma-shop-harmonise .wma-notice::before,
body.wma-shop-harmonise .wma-notice::after {
	display: none;
}

body.wma-shop-harmonise .wma-notice li {
	list-style: none;
}

/* The coupon prompt is a notice by construction but a control by intent, so
   it keeps the card fill rather than the grey one. */
body.wma-shop-harmonise .woocommerce-form-coupon-toggle .wma-notice {
	background-color: var( --wma-card-bg, #fff );
}

body.wma-shop-refine .wma-notice {
	margin-top: 24px;
	margin-bottom: 24px;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* ============================================================
   ONE NOTICE, EVERYWHERE

   The sign-in screens and the shop had drifted into two
   different-looking messages. The reason is in the layer
   contract rather than in an oversight: Layer 1 is allowed to
   change colours and nothing else, so it could say what colour
   the left edge should be but not that there should be one.
   Setting border-left-color on an element the theme gives no
   border paints nothing at all, which is why the shop's
   notices had a grey fill and no accent while the account's
   had both.

   So the tile is stated here, in the layer that is allowed to
   set padding and borders. Same values as the account screens:
   same fill, same 3px accent, same radius, same inset. A person
   who sees "added to your cart" and then "that field is
   required" at checkout is looking at one design.

   Layer 1 keeps its colours-only rules above, so a store on
   that level is unchanged.
   ============================================================ */

body.wma-shop-refine .woocommerce-message,
body.wma-shop-refine .woocommerce-info,
body.wma-shop-refine .woocommerce-error,
body.wma-shop-refine .wma-notice,
body.wma-shop-refine #wrapper > .message-wrapper .message-container {
	box-sizing: border-box;
	max-width: 100%;
	padding: 15px 18px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-left: 3px solid var( --wma-primary, #673DE6 );
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-notice-bg, #F3F4F6 );
	color: var( --wma-text, #1A1A2E );
	box-shadow: none;
	font-size: 14.5px;
	line-height: 1.5;
	list-style: none;
	text-align: left;
}

body.wma-shop-refine .woocommerce-message,
body.wma-shop-refine .wma-notice-success {
	border-left-color: var( --wma-ok );
}

body.wma-shop-refine .woocommerce-error,
body.wma-shop-refine .wma-notice-error {
	border-left-color: var( --wma-bad );
}

/*
 * The full-bleed strip Flatsome prints after the header.
 *
 * The wrapper spans the window and the container inside it is the theme's
 * own centred column, so the tile goes on the container. Without the reset
 * above it, the wrapper kept a fill of its own and the tile appeared to run
 * off both edges of the screen - which, with the theme's negative margins
 * underneath, is what left the first letter of the message off-screen.
 */
body.wma-shop-refine #wrapper > .message-wrapper {
	padding-top: 14px;
	padding-bottom: 14px;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

body.wma-shop-refine #wrapper > .message-wrapper .message-container {
	/* Its own gutters, so the text cannot end up against the window edge. */
	margin-left: auto;
	margin-right: auto;
}

/* WooCommerce reserves a left inset for an icon most themes never draw. */
body.wma-shop-refine .woocommerce-message::before,
body.wma-shop-refine .woocommerce-info::before,
body.wma-shop-refine .woocommerce-error::before,
body.wma-shop-refine .wma-notice::before,
body.wma-shop-refine #wrapper > .message-wrapper .message-container::before {
	display: none;
}

body.wma-shop-refine .woocommerce-message li,
body.wma-shop-refine .woocommerce-info li,
body.wma-shop-refine .woocommerce-error li,
body.wma-shop-refine .wma-notice li {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

body.wma-shop-refine .woocommerce-message li:last-child,
body.wma-shop-refine .woocommerce-info li:last-child,
body.wma-shop-refine .woocommerce-error li:last-child,
body.wma-shop-refine .wma-notice li:last-child {
	margin-bottom: 0;
}

/* The button WooCommerce puts inside "added to your cart". */
body.wma-shop-refine .woocommerce-message .button,
body.wma-shop-refine .wma-notice .button {
	float: none;
	margin: 10px 0 0;
	padding: 8px 16px;
	border-radius: calc( var( --wma-radius, 14px ) - 6px );
	font-size: 13.5px;
	text-transform: none;
	letter-spacing: normal;
}

/*
 * The coupon prompt stays a card rather than a grey tile: it is a notice by
 * construction and a control by intent, and grey there reads as a disabled
 * field rather than something to press.
 */
body.wma-shop-refine .woocommerce-form-coupon-toggle .woocommerce-info {
	border-left-color: var( --wma-line );
	background-color: var( --wma-card-bg, #fff );
}

/* ============================================================
   THE FULL-BLEED STRIP, CONSTRAINED TO THE CONTENT COLUMN

   Flatsome prints the "added to your cart" notice after the
   header, outside every container and the full width of the
   window. Giving it a tile therefore produced a tile the full
   width of the window: correct colours, wrong shape, and
   nothing on the page lines up with it.

   The strip stays full width - moving it would fight the theme
   for no gain - and becomes a centring box for whatever is
   inside it. The notice then stops on the same line as the
   product below it.

   1080px is Flatsome's own container width. A store that has
   changed it in the customizer sets --wma-content-max to match
   and everything here follows; the value is not repeated
   anywhere else.
   ============================================================ */

body.wma-shop-harmonise {
	--wma-content-max: 1080px;
}

body.wma-shop-refine #wrapper > .message-wrapper {
	display: flex;
	justify-content: center;
	/* The theme's own container gutters, so the tile never touches the
	   window edge on a narrow screen. */
	padding-left: 15px;
	padding-right: 15px;
}

body.wma-shop-refine #wrapper > .message-wrapper > * {
	width: 100%;
	max-width: var( --wma-content-max, 1080px );
	margin-left: 0;
	margin-right: 0;
}

/*
 * The same treatment wherever else WooCommerce prints a notice outside the
 * page container - the cart and checkout print theirs inside one, so those
 * are already the right width and this changes nothing for them.
 */
body.wma-shop-refine .woocommerce-notices-wrapper > .woocommerce-message,
body.wma-shop-refine .woocommerce-notices-wrapper > .woocommerce-info,
body.wma-shop-refine .woocommerce-notices-wrapper > .woocommerce-error,
body.wma-shop-refine .woocommerce-notices-wrapper > .wma-notice {
	max-width: var( --wma-content-max, 1080px );
	margin-left: auto;
	margin-right: auto;
}

@media ( max-width: 600px ) {
	body.wma-shop-refine #wrapper > .message-wrapper {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ============================================================
   THE NOTICE IS AS WIDE AS THE CONTENT, NOT THE WINDOW

   This plugin overrides WooCommerce's notice templates so the
   markup can be relied on. Flatsome overrides them too, and its
   version does something this one did not copy: it puts the
   full-bleed strip on the notice itself and a centred
   .container inside it. Replacing the template threw that inner
   container away, so on a product page - where the theme prints
   the notice after the header, outside every container - the
   tile had nothing left to stop it and ran the width of the
   screen.

   Earlier rules here aimed at "#wrapper > .message-wrapper",
   which is the theme's markup and no longer exists once this
   plugin's template is in use. They are kept for a store that
   turns the notice templates off with wma_replace_notices, and
   the rules below are the ones that do the work.

   One constraint, on the notice itself, so it does not matter
   which of the two markups is on the page or whether the notice
   sits in a container:

   - inside the cart or checkout column it is already narrower
     than the limit, so the limit does nothing and the notice
     stays flush with the cards above and below it;
   - printed loose after the header it stops on the same line as
     the product.
   ============================================================ */

body.wma-shop-refine .woocommerce-message,
body.wma-shop-refine .woocommerce-info,
body.wma-shop-refine .woocommerce-error,
body.wma-shop-refine .wma-notice {
	max-width: var( --wma-content-max, 1080px );
	margin-left: auto;
	margin-right: auto;
}

/*
 * Gutters, but only where the notice is loose.
 *
 * On the cart, the checkout and the account the notice sits inside a column
 * that already has the page's padding, and insetting it again would leave it
 * narrower than the cards it belongs with. Everywhere else it is against the
 * window and needs the theme's own 15px.
 */
body.wma-shop-refine:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .woocommerce-message,
body.wma-shop-refine:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .woocommerce-info,
body.wma-shop-refine:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .woocommerce-error,
body.wma-shop-refine:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .wma-notice {
	max-width: min( var( --wma-content-max, 1080px ), calc( 100% - 30px ) );
}

/* Flatsome's own markup, for a store that has switched this plugin's notice
   templates off. The tile goes on the inner container there, so the notice
   itself must not carry one as well. */
body.wma-shop-refine .woocommerce-message.message-wrapper,
body.wma-shop-refine .woocommerce-info.message-wrapper,
body.wma-shop-refine .woocommerce-error.message-wrapper {
	max-width: none;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

body.wma-shop-refine .message-wrapper > .message-container {
	max-width: var( --wma-content-max, 1080px );
	margin-left: auto;
	margin-right: auto;
	padding: 15px 18px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-left: 3px solid var( --wma-primary, #673DE6 );
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-notice-bg, #F3F4F6 );
	/* The theme centres this text; the tile reads as a sentence, not a banner. */
	text-align: left;
}

body.wma-shop-refine .woocommerce-message.message-wrapper > .message-container {
	border-left-color: var( --wma-ok );
}

body.wma-shop-refine .woocommerce-error.message-wrapper > .message-container {
	border-left-color: var( --wma-bad );
}

/* ============================================================
   THIS PLUGIN'S OWN NOTICE, AT EVERY LEVEL

   The width limit above is scoped to the "colours, type and
   spacing" level. A store on "Colours only" - which is the
   default and the recommended one - never gets it, so the
   product page notice stayed the full width of the window no
   matter how many times the rule was rewritten. That is the
   whole of the bug: the rules were right and were never on the
   page.

   The reason it needs fixing at all is this plugin's doing.
   Flatsome's notice template wraps the message in a centred
   .container; this plugin replaces that template and its
   version has no container, so the containment the theme would
   have given was removed by the override.

   .wma-notice is markup this plugin prints. Dressing it fully
   at every level does not break the promise the levels make -
   that promise is about not disturbing the theme's own layout,
   and this element is not the theme's. Notices printed by
   anything else keep the level rules exactly as before.
   ============================================================ */

body.wma-shop-harmonise .wma-notice {
	box-sizing: border-box;
	display: block;
	max-width: var( --wma-content-max, 1080px );
	margin-left: auto;
	margin-right: auto;
	padding: 15px 18px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-left: 3px solid var( --wma-primary, #673DE6 );
	border-radius: calc( var( --wma-radius, 14px ) - 4px );
	background-color: var( --wma-notice-bg, #F3F4F6 );
	color: var( --wma-text, #1A1A2E );
	box-shadow: none;
	font-size: 14.5px;
	line-height: 1.5;
	list-style: none;
	text-align: left;
}

body.wma-shop-harmonise .wma-notice-success {
	border-left-color: var( --wma-ok, #0F8A5F );
}

body.wma-shop-harmonise .wma-notice-error {
	border-left-color: var( --wma-bad, #D63638 );
}

body.wma-shop-harmonise .wma-notice::before,
body.wma-shop-harmonise .wma-notice::after {
	display: none;
}

body.wma-shop-harmonise .wma-notice li {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

body.wma-shop-harmonise .wma-notice li:last-child {
	margin-bottom: 0;
}

body.wma-shop-harmonise .wma-notice .button {
	float: none;
	margin: 10px 0 0;
	padding: 8px 16px;
	border-radius: calc( var( --wma-radius, 14px ) - 6px );
	font-size: 13.5px;
	text-transform: none;
	letter-spacing: normal;
}

/* Loose after the header, it needs the theme's gutter; inside the cart,
   checkout or account column it already has one. */
body.wma-shop-harmonise:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .wma-notice {
	max-width: min( var( --wma-content-max, 1080px ), calc( 100% - 30px ) );
}

/* The coupon prompt is a control, not an announcement. */
body.wma-shop-harmonise .woocommerce-form-coupon-toggle .wma-notice {
	background-color: var( --wma-card-bg, #fff );
	border-left-color: var( --wma-line, #E6E8EC );
}

/* ============================================================
   WIDTH, WHOEVER PRINTED IT

   The rule above constrains this plugin's own notice markup.
   That covers the normal case, but not two real ones: a store
   that turns the notice templates off with wma_replace_notices,
   and a plugin that prints a WooCommerce-classed notice without
   going through the template at all.

   Width only - no borders, no padding, no colours - so the
   "Colours only" level still changes nothing about how a notice
   looks. A message spanning the whole window while everything
   else on the page stops at the content edge is a containment
   the theme would have applied itself, and which this plugin
   removed by replacing the template. Restoring it is not a
   redesign.
   ============================================================ */

body.wma-shop-harmonise .woocommerce-message,
body.wma-shop-harmonise .woocommerce-info,
body.wma-shop-harmonise .woocommerce-error {
	max-width: var( --wma-content-max, 1080px );
	margin-left: auto;
	margin-right: auto;
}

body.wma-shop-harmonise:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .woocommerce-message,
body.wma-shop-harmonise:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .woocommerce-info,
body.wma-shop-harmonise:not( .wma-shop-cart ):not( .wma-shop-checkout ):not( .wma-account ) .woocommerce-error {
	max-width: min( var( --wma-content-max, 1080px ), calc( 100% - 30px ) );
}

/* Flatsome's own structure, where the message is the full-bleed strip and the
   centred container lives inside it. Constraining the strip there would
   squeeze the theme's own layout, so the container is what gets the limit. */
body.wma-shop-harmonise .woocommerce-message.message-wrapper,
body.wma-shop-harmonise .woocommerce-info.message-wrapper,
body.wma-shop-harmonise .woocommerce-error.message-wrapper {
	max-width: none;
}

/* ============================================================
   THANK YOU

   Quiet and short. Somebody has just paid: the job is to say
   it worked, give them the one thing they want next, and get
   out of the way. The order facts are there because people
   check them, but they are a strip beneath the message rather
   than the message itself.

   Same tokens as the account area and the shop, so the last
   screen of a purchase and the first screen of the account are
   recognisably one product.
   ============================================================ */

body.wma-shop-harmonise .wma-thanks {
	max-width: 560px;
	margin: 0 auto;
	padding: 48px 20px 64px;
	text-align: center;
}

body.wma-shop-harmonise .wma-thanks-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: color-mix( in srgb, var( --wma-ok, #0F8A5F ) 12%, var( --wma-card-bg, #fff ) );
	color: var( --wma-ok, #0F8A5F );
}

body.wma-shop-harmonise .wma-thanks-mark svg {
	width: 32px;
	height: 32px;
}

body.wma-shop-harmonise .wma-thanks-title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --wma-text, #1A1A2E );
	text-transform: none;
}

body.wma-shop-harmonise .wma-thanks-text {
	margin: 0 auto 28px;
	max-width: 36ch;
	font-size: 15.5px;
	line-height: 1.55;
	color: var( --wma-muted, #5A6B85 );
}

/* ---------- the way onward ---------- */
body.wma-shop-harmonise .wma-thanks-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0 0 32px;
}

body.wma-shop-harmonise .wma-thanks-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 34px;
	border-radius: var( --wma-radius, 14px );
	background: var( --wma-primary, #673DE6 );
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	transition: filter .14s, box-shadow .14s;
}

body.wma-shop-harmonise .wma-thanks-go:hover,
body.wma-shop-harmonise .wma-thanks-go:focus {
	filter: brightness( 1.06 );
	box-shadow: 0 6px 20px color-mix( in srgb, var( --wma-primary, #673DE6 ) 28%, transparent );
	color: #fff;
	text-decoration: none;
}

body.wma-shop-harmonise .wma-thanks-go:focus-visible,
body.wma-shop-harmonise .wma-thanks-alt:focus-visible {
	outline: 3px solid var( --wma-text, #1A1A2E );
	outline-offset: 2px;
}

body.wma-shop-harmonise .wma-thanks-alt {
	font-size: 14.5px;
	font-weight: 600;
	color: var( --wma-muted, #5A6B85 );
	text-decoration: none;
}

body.wma-shop-harmonise .wma-thanks-alt:hover {
	color: var( --wma-text, #1A1A2E );
	text-decoration: underline;
}

/* ---------- the facts ---------- */
body.wma-shop-harmonise .wma-thanks-card {
	padding: 4px 8px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-radius: var( --wma-radius, 14px );
	background: var( --wma-card-bg, #fff );
	text-align: left;
}

body.wma-shop-harmonise .wma-thanks-facts {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wma-shop-harmonise .wma-thanks-facts li {
	flex: 1 1 auto;
	min-width: 132px;
	margin: 0;
	padding: 16px;
	list-style: none;
}

/* A hairline between facts, but never one hanging off the end of a row. */
body.wma-shop-harmonise .wma-thanks-facts li + li {
	border-left: 1px solid var( --wma-line, #E6E8EC );
}

body.wma-shop-harmonise .wma-thanks-k {
	display: block;
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --wma-muted, #5A6B85 );
}

body.wma-shop-harmonise .wma-thanks-v {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .wma-thanks-v .amount {
	font-weight: 700;
}

/* Whatever the gateway prints - bank details, a reference to quote. */
body.wma-shop-harmonise .wma-thanks .woocommerce-order-overview,
body.wma-shop-harmonise .wma-thanks .woocommerce-bacs-bank-details {
	margin: 24px 0 0;
	padding: 18px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-radius: var( --wma-radius, 14px );
	background: var( --wma-notice-bg, #F3F4F6 );
	text-align: left;
	list-style: none;
}

body.wma-shop-harmonise .wma-thanks-failed .wma-thanks-card {
	padding: 20px;
}

@media ( max-width: 600px ) {
	body.wma-shop-harmonise .wma-thanks {
		padding: 34px 16px 48px;
	}

	body.wma-shop-harmonise .wma-thanks-title {
		font-size: 24px;
	}

	body.wma-shop-harmonise .wma-thanks-go {
		width: 100%;
	}

	/* Stacked, so the hairline goes across rather than down. */
	body.wma-shop-harmonise .wma-thanks-facts li {
		flex: 1 1 100%;
		padding: 13px 16px;
	}

	body.wma-shop-harmonise .wma-thanks-facts li + li {
		border-left: 0;
		border-top: 1px solid var( --wma-line, #E6E8EC );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body.wma-shop-harmonise .wma-thanks-go {
		transition: none;
	}
}

/* ============================================================
   WHAT WOOCOMMERCE PRINTS UNDER THE THANK YOU

   The template hands control back to WooCommerce at the end,
   and WooCommerce prints the order table and the addresses
   there. Those arrived with no card around them and no gutter
   on a phone: an order table running edge to edge, then a
   centred address floating on its own with nothing to sit in.

   They belong to the same screen, so they get the same card,
   the same width and the same left-aligned reading. Kept as
   markup this plugin styles rather than replaces, because a
   gateway or a plugin adding a row to that table should keep
   working without knowing about any of this.
   ============================================================ */

body.wma-shop-harmonise .wma-thanks .woocommerce-order-details,
body.wma-shop-harmonise .wma-thanks .woocommerce-customer-details {
	margin: 28px 0 0;
	padding: 20px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-radius: var( --wma-radius, 14px );
	background: var( --wma-card-bg, #fff );
	text-align: left;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-order-details__title,
body.wma-shop-harmonise .wma-thanks .woocommerce-column__title,
body.wma-shop-harmonise .wma-thanks .woocommerce-customer-details h2 {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .wma-thanks .woocommerce-order-details table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 14.5px;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-order-details th,
body.wma-shop-harmonise .wma-thanks .woocommerce-order-details td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var( --wma-line, #E6E8EC );
	text-align: left;
	vertical-align: top;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-order-details thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var( --wma-muted, #5A6B85 );
}

/* Money reads down the right edge, which is the only way a column of
   figures can be compared at a glance. */
body.wma-shop-harmonise .wma-thanks .woocommerce-order-details th:last-child,
body.wma-shop-harmonise .wma-thanks .woocommerce-order-details td:last-child {
	text-align: right;
	white-space: nowrap;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-order-details tfoot tr:last-child th,
body.wma-shop-harmonise .wma-thanks .woocommerce-order-details tfoot tr:last-child td {
	border-bottom: 0;
	padding-top: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var( --wma-text, #1A1A2E );
}

/* The address. WooCommerce centres it and leaves it italic, which on its own
   under a card reads as a caption rather than as where the order is going. */
body.wma-shop-harmonise .wma-thanks .woocommerce-customer-details address {
	padding: 0;
	border: 0;
	border-radius: 0;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	text-align: left;
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .wma-thanks .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 20px;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-customer-details .woocommerce-column {
	width: auto;
	float: none;
	padding: 0;
	margin: 0;
}

@media ( max-width: 600px ) {
	body.wma-shop-harmonise .wma-thanks .woocommerce-order-details,
	body.wma-shop-harmonise .wma-thanks .woocommerce-customer-details {
		padding: 16px;
	}

	/* The product name needs the room; the price stays on its own line
	   rather than crushing the name into two words per row. */
	body.wma-shop-harmonise .wma-thanks .woocommerce-order-details tbody td {
		font-size: 14px;
	}
}

/* ============================================================
   THE TABLES UNDER THE THANK YOU

   Two faults, one cause each.

   The downloads table overflowed because the stacking written
   for the account area is scoped to the account area, and the
   thank you screen is a checkout page. Same treatment, stated
   for this screen: it is a different page, not a different
   design.

   The order table looked like a white slab sitting inside a
   card because it is - WooCommerce and the theme both give
   .shop_table a background and a border of their own, and the
   card this plugin drew around it made that a second box. The
   inner one is stripped so there is one card.
   ============================================================ */

/* One card, not a card holding another one. */
body.wma-shop-harmonise .wma-thanks .shop_table,
body.wma-shop-harmonise .wma-thanks .shop_table tbody,
body.wma-shop-harmonise .wma-thanks .shop_table tfoot,
body.wma-shop-harmonise .wma-thanks .shop_table tr,
body.wma-shop-harmonise .wma-thanks .shop_table th,
body.wma-shop-harmonise .wma-thanks .shop_table td {
	background: none;
	box-shadow: none;
	border-radius: 0;
}

body.wma-shop-harmonise .wma-thanks .shop_table {
	border: 0;
}

/* The downloads table, which is its own card on this screen because it
   arrives before the order details rather than inside them. */
/*
 * The card goes on the section, not on the table.
 *
 * WooCommerce already wraps downloads in a section with its own heading, so
 * carding the table put a second box inside the first - the same card-in-card
 * the order details had.
 */
body.wma-shop-harmonise .wma-thanks .woocommerce-order-downloads {
	margin: 28px 0 0;
	padding: 20px;
	border: 1px solid var( --wma-line, #E6E8EC );
	border-radius: var( --wma-radius, 14px );
	background: var( --wma-card-bg, #fff );
	text-align: left;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-order-downloads h2,
body.wma-shop-harmonise .wma-thanks .woocommerce-order-downloads .woocommerce-order-downloads__title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var( --wma-text, #1A1A2E );
}

body.wma-shop-harmonise .wma-thanks .woocommerce-table--order-downloads {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	border-collapse: collapse;
	text-align: left;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-table--order-downloads th,
body.wma-shop-harmonise .wma-thanks .woocommerce-table--order-downloads td {
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var( --wma-line, #E6E8EC );
	text-align: left;
	vertical-align: middle;
}

body.wma-shop-harmonise .wma-thanks .woocommerce-table--order-downloads thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var( --wma-muted, #5A6B85 );
}

@media ( max-width: 700px ) {
	/*
	 * Stacked, for the same reason as the account area: four columns and a
	 * button cannot share a phone, and the button is the column that falls
	 * off the edge - the one thing somebody came to this screen to press.
	 */
	body.wma-shop-harmonise .wma-thanks .shop_table,
	body.wma-shop-harmonise .wma-thanks .shop_table tbody,
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot,
	body.wma-shop-harmonise .wma-thanks .shop_table tr,
	body.wma-shop-harmonise .wma-thanks .shop_table td {
		display: block;
		width: auto;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
		border: 0;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tbody tr,
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr {
		padding: 6px 0;
		border-bottom: 1px solid var( --wma-line, #E6E8EC );
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tbody tr:last-child,
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr:last-child {
		border-bottom: 0;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 0;
		border-bottom: 0;
		text-align: right;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table td::before {
		content: attr( data-title );
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var( --wma-muted, #5A6B85 );
		text-align: left;
	}

	/* WooCommerce leaves some cells unlabelled; no label, no empty column. */
	body.wma-shop-harmonise .wma-thanks .shop_table td:not( [data-title] )::before {
		content: none;
	}

	/* The product is the subject of the row, so it reads across the full
	   width rather than being squeezed against its own price. */
	body.wma-shop-harmonise .wma-thanks .shop_table td.download-product,
	body.wma-shop-harmonise .wma-thanks .shop_table td.woocommerce-table__product-name {
		display: block;
		text-align: left;
		font-weight: 600;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table td.download-product::before,
	body.wma-shop-harmonise .wma-thanks .shop_table td.woocommerce-table__product-name::before {
		display: block;
		margin: 0 0 4px;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table td.download-actions {
		display: block;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table td .button,
	body.wma-shop-harmonise .wma-thanks .shop_table td .woocommerce-MyAccount-downloads-file {
		display: block;
		width: 100%;
		margin: 6px 0 0;
		text-align: center;
	}

	/*
	 * The totals rows are a th for the label and a td for the money, so they
	 * are not stacked like the body rows - they are already a pair and read
	 * correctly side by side. Making the th a block would have dropped
	 * "Subtotal" onto its own line above the figure and doubled the height of
	 * the summary for nothing.
	 */
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 0;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tfoot th {
		display: block;
		padding: 0;
		border: 0;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var( --wma-muted, #5A6B85 );
		text-align: left;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tfoot td {
		display: block;
		padding: 0;
		text-align: right;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tfoot td::before {
		content: none;
	}

	/* The total keeps its weight when everything else is a quiet pair. */
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr:last-child th,
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr:last-child td {
		font-size: 16px;
		font-weight: 700;
		color: var( --wma-text, #1A1A2E );
	}
}

/* ------------------------------------------------------------
   Corrections to the stacked tables on a phone.

   Three faults, each from the stacking meeting markup it did
   not expect.
   ------------------------------------------------------------ */

@media ( max-width: 700px ) {
	/*
	 * 1. The action cell printed its own heading beside the button, so a
	 *    download row read "DOWNLOAD  [ Download ]". The button already
	 *    says what it does; the heading is noise next to it.
	 */
	body.wma-shop-harmonise .wma-thanks .shop_table td.download-actions::before,
	body.wma-shop-harmonise .wma-thanks .shop_table td.woocommerce-table__product-total::before {
		content: none;
	}

	/*
	 * 2. The totals rows kept the hairline each cell carries for the desktop
	 *    layout. In a flex row that border stops at the end of the label, so
	 *    "Subtotal:" appeared underlined for no reason. The line belongs to
	 *    the row.
	 */
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot th,
	body.wma-shop-harmonise .wma-thanks .shop_table tfoot td {
		border: 0;
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr {
		border-bottom: 1px solid var( --wma-line, #E6E8EC );
	}

	body.wma-shop-harmonise .wma-thanks .shop_table tfoot tr:last-child {
		border-bottom: 0;
	}

	/*
	 * 3. The line total sat on its own under the product name with nothing
	 *    to tie it to. It is the price of the thing named above it, so it
	 *    reads on the right of that name's block rather than as a new fact.
	 */
	body.wma-shop-harmonise .wma-thanks .shop_table td.woocommerce-table__product-total {
		display: block;
		margin-top: 2px;
		text-align: right;
		font-weight: 700;
	}

	/* The product name and its quantity belong together and left. */
	body.wma-shop-harmonise .wma-thanks .shop_table td.woocommerce-table__product-name {
		padding-bottom: 0;
	}
}