/*
 * woocommerce-checkout.css - cart, checkout and my account.
 *
 * WP7 of spec/00-BUILD-SPEC.md. Real money moves through two of these three
 * templates, so read section 5 risks R1, R2 and R3 before changing anything in
 * here.
 *
 * WHAT THIS FILE IS ALLOWED TO BE
 *
 * CSS only. The theme ships an EMPTY woocommerce/ template directory and this
 * package adds nothing to it, above all nothing under checkout/. GeneratePress
 * overrode no checkout template either: its entire contribution to /checkout/
 * was a two-column float layout plus a payment box restyle (05 section 3.9),
 * which is the single most useful fact about this rebuild. A template override
 * here would be a permanent maintenance liability on the one surface that must
 * keep working through every future WooCommerce release.
 *
 * THE THREE THINGS THAT MUST NEVER BREAK
 *
 * 1. Express payment buttons. .wcpay-express-checkout-wrapper,
 *    #wcpay-express-checkout-element and #wcpay-express-checkout-button-separator
 *    are WooPayments' own, they mount Apple Pay / Google Pay / WooPay, and the
 *    real baseline counted four of those nodes on a filled checkout and two on a
 *    filled cart. Nothing in this file may set display:none, visibility:hidden,
 *    height, overflow or transform on any of them, and nothing may make them a
 *    grid or flex ITEM of a container whose sizing they did not expect. They get
 *    margin and nothing else.
 * 2. The payment radio. WooCommerce prints style="display:none" INLINE on the
 *    radio when exactly one gateway is available, which is today's state
 *    (WooPayments only). That inline style is correct behaviour, not a bug: with
 *    one method there is nothing to choose. So this file does NOT fight it with
 *    !important. It styles the radio properly for the multi-gateway case, which
 *    is one enabled gateway away at any time, and styles the single-gateway row
 *    as an honest labelled header. See the PAYMENT section.
 * 3. Cart fragments. div.widget_shopping_cart_content and the .cart-contents
 *    spans are replaced wholesale by WooCommerce's AJAX refresh, so any styling
 *    that depends on a wrapper THIS file added would vanish on the first
 *    add-to-cart. Style the fragment root and its descendants, never a wrapper
 *    around it.
 *
 * SCOPING
 *
 * Every rule is scoped to .woocommerce-cart, .woocommerce-checkout,
 * .woocommerce-account or .woocommerce-order-received. WP6 owns shop, category
 * and product in assets/css/woocommerce.css, and the two files deliberately
 * share no selector, so neither package can silently restyle the other's
 * templates. That is also why the pill for .button.alt lives here scoped rather
 * than in the shared button block: the single product Add to cart button is
 * .button.alt too, and it belongs to WP6.
 *
 * BEATING SNIPPET 31
 *
 * Snippet 31 prints #rlj-content-link-style inline at wp_head priority 100, so
 * it lands AFTER this stylesheet and its selector carries six :not() clauses,
 * which is class-level specificity 7. Any rule here that has to win against it
 * is prefixed with #primary: one id outranks any number of classes, and #primary
 * is the content-area id every template already emits.
 *
 * @package rlj
 */

/* ==========================================================================
   0. WooCommerce's own custom properties.

   WooCommerce 11 exposes its form and colour tokens on :root, so the cheapest
   and most future-proof way to restyle its inputs is to move the token rather
   than out-specify 446 rules. --wc-form-border-color ships as
   rgba(32, 7, 7, 0.8), a near-black maroon that reads as a mistake next to this
   store's warm neutrals; it was measured live on the checkout and it is what
   every field border on the funnel is drawn with today.
   ========================================================================== */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-order-received {
	--wc-form-border-color: #c8c2b6;
	--wc-form-border-width: 1px;
	--wc-form-color-background: #ffffff;
	--wc-green: #3f6b3f;
	--wc-red: #a3323a;

	/* Local tokens, so the three templates cannot drift apart. */
	--funnel-card-border: var(--cream-border);
	--funnel-card-radius: var(--radius-card);
	--funnel-card-pad: 30px;
	--funnel-row-rule: 1px solid var(--rule-color);
	--funnel-field-height: 52px;
	--funnel-gap: 64px;

	/*
	 * TWO RADII ON THE FUNNEL, not four.
	 *
	 * The first version shipped 6px inputs, 8px notices, 10px cards and a pill,
	 * which put three near-identical corner treatments inside one 340px card and
	 * made the pill read as the odd one out rather than as the action. Every
	 * rectangle on these three templates is now --radius-card (10px) and every
	 * button is a pill; nothing else is allowed a corner of its own.
	 *
	 * The 20px checkbox and its 4px corner are the one exception and are not a
	 * third radius: 4 on 20 is the same corner-to-edge ratio as 10 on 52, so the
	 * box reads as the same shape at a fifth of the size. A literal 10px on a
	 * 20px box is a lozenge.
	 */
	--wc-form-border-radius: var(--radius-card);
}

/* ==========================================================================
   1. Section headings.

   One heading language across all three templates. GeneratePress rendered these
   as bare Catamaran 24px/500 h3s with no rule under them, which left the
   checkout looking like a bare form dump: "Contact information", "Billing
   details" and "Your order" had exactly the same weight as body copy two lines
   below them. Playfair at 22px with a hairline underneath is the same language
   the rest of the site already uses for page and section titles.

   #ship-to-different-address is an h3 that CONTAINS a checkbox label, so it is
   excluded here and treated as a control in section 5.
   ========================================================================== */

.woocommerce-checkout form.checkout h3:not(#ship-to-different-address),
.woocommerce-checkout #order_review_heading,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .rlj-cart-reassurance h2,
.woocommerce-cart .cross-sells h2,
.woocommerce-account #customer_login h2,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--text);
	margin: 0 0 22px;
	padding-bottom: 12px;
	border-bottom: var(--funnel-row-rule);
}

/* The order summary heading sits directly on top of its card, so it carries the
   card's inset rather than a rule of its own. */
.woocommerce-checkout #order_review_heading {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 14px;
}

/* ==========================================================================
   2. Buttons.

   WooCommerce paints .button.alt with a hardcoded #7f54b3, not with a custom
   property, so the token trick in section 0 cannot reach it and it needs real
   rules. Left alone, Place order and Proceed to checkout render purple.

   legacy-customizer.css already pills .button / .woocommerce button.button at
   class specificity 2, which WooCommerce's `.woocommerce a.button.alt` (3)
   outranks. These rules restore the store's black pill on the funnel only.
   ========================================================================== */

/*
 * Button SIZE, before colour.
 *
 * base.css never consumes tokens.css's --fs-button, so every button on the
 * funnel inherited the 19px body size and rendered uppercase at 600 weight:
 * RETURN TO SHOP on the empty cart came out as a 19px shout filling a 210pt
 * pill on a phone, and APPLY COUPON, UPDATE CART, LOG IN and REGISTER all
 * carried the same volume as the page title. Legibility was never the problem
 * on a 44px+ target; register was. 15px with 0.08em of tracking in a slightly
 * larger pill reads as expensive rather than as an app button, and it is the
 * size the header and the front page already use (front-page.css and
 * header.css both consume --fs-button locally for exactly this reason).
 *
 * The two full-width primaries, PROCEED TO CHECKOUT and PLACE ORDER, keep
 * their 20px in sections 8 and 9: they are the only two buttons on the store
 * that should be loud, and their own rules carry an id or four classes, so
 * they outrank this.
 */
.woocommerce-cart .woocommerce .button,
.woocommerce-checkout .woocommerce .button,
.woocommerce-account .woocommerce .button {
	font-size: var(--fs-button);
	letter-spacing: 0.08em;
	padding: 15px 30px;
}

.woocommerce-cart .woocommerce a.button.alt,
.woocommerce-cart .woocommerce button.button.alt,
.woocommerce-cart .woocommerce input.button.alt,
.woocommerce-checkout .woocommerce a.button.alt,
.woocommerce-checkout .woocommerce button.button.alt,
.woocommerce-checkout .woocommerce input.button.alt,
.woocommerce-account .woocommerce a.button.alt,
.woocommerce-account .woocommerce button.button.alt,
.woocommerce-account .woocommerce input.button.alt {
	background-color: var(--btn-bg);
	color: var(--btn-text);
	border: none;
	border-radius: var(--radius-button);
}

.woocommerce-cart .woocommerce a.button.alt:hover,
.woocommerce-cart .woocommerce button.button.alt:hover,
.woocommerce-checkout .woocommerce a.button.alt:hover,
.woocommerce-checkout .woocommerce button.button.alt:hover,
.woocommerce-account .woocommerce a.button.alt:hover,
.woocommerce-account .woocommerce button.button.alt:hover {
	background-color: var(--btn-bg-hover);
	color: var(--btn-text);
}

/*
 * A visible keyboard focus ring on every control that can take money. The live
 * site has none: GP's buttons rely on the UA ring, which the pill's background
 * swallows on a dark button.
 */
.woocommerce-cart .woocommerce .button:focus-visible,
.woocommerce-checkout .woocommerce .button:focus-visible,
.woocommerce-account .woocommerce .button:focus-visible,
.woocommerce-checkout #place_order:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

/*
 * Disabled Update cart. WooCommerce sets the attribute until a quantity
 * changes, and every product on this store is sold individually, so on a
 * single-line cart it is disabled for the whole visit. It should read as
 * unavailable, not as a second black call to action competing with Proceed to
 * checkout.
 */
.woocommerce-cart .woocommerce button.button:disabled,
.woocommerce-cart .woocommerce button.button:disabled[disabled] {
	background-color: transparent;
	color: var(--muted);
	border: 1px solid var(--rule-color);
	opacity: 1;
}

/* ==========================================================================
   3. Notices.

   WooCommerce core draws these as a grey slab with a 3px coloured top border
   and a WooCommerce-font glyph absolutely positioned at 1.5em from the left.
   GeneratePress replaced that with a full-bleed BLACK bar with white text, so
   "Returning customer?" and "Have a coupon?" arrive as two 70px black slabs
   above the fold of a fine jewellery checkout and push the first form field
   below 550px.

   The replacement keeps the semantics in the left border colour and drops the
   icon font entirely, because the glyph is the only reason the padding-left was
   3.5em and an icon font is one more thing that can fail to load.
   ========================================================================== */

.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
	background-color: var(--cream);
	border: 1px solid var(--cream-border);
	border-left: 3px solid var(--gold);
	border-top-width: 1px;
	border-radius: var(--funnel-card-radius);
	color: var(--text);
	font-size: 17px;
	line-height: 1.5;
	padding: 16px 22px;
	margin: 0 0 24px;
}

.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before {
	content: none;
}

.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.woocommerce-account .woocommerce-error {
	background-color: #fdf6f6;
	border-color: #e7cbcd;
	border-left-color: var(--wc-red);
}

/*
 * The two checkout toggles are not really notices, they are optional side
 * doors. They get the quietest treatment on the page so the form itself is the
 * thing the eye lands on.
 */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background-color: transparent;
	border: 1px solid var(--rule-color);
	border-radius: var(--funnel-card-radius);
	color: var(--muted);
	font-size: 16px;
	padding: 13px 20px;
	margin-bottom: 12px;
}

.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	max-width: 640px;
}

/* ==========================================================================
   4. Fields, labels and custom controls.

   The funnel's inputs are 50px tall with 9.5px of padding today, which is under
   the 44px comfortable-target line once the border is counted and cramped on a
   phone. 52px with real padding costs nothing and is measurably easier to hit.

   The focus treatment is new. WooCommerce's own focus rule is
   `border-color:currentColor`, which on this palette moves a #c8c2b6 border to
   #161616 and reads as almost nothing on a dark-on-white form.
   ========================================================================== */

.woocommerce-cart .woocommerce form .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-checkout .woocommerce form .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.woocommerce-account .woocommerce form .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--text);
	margin: 0 0 6px;
}

.woocommerce-cart .woocommerce form .form-row .input-text,
.woocommerce-cart .woocommerce form .form-row select,
.woocommerce-checkout .woocommerce form .form-row .input-text,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-account .woocommerce form .form-row .input-text,
.woocommerce-account .woocommerce form .form-row select {
	min-height: var(--funnel-field-height);
	padding: 12px 14px;
	font-size: 17px;
	color: var(--text);
	line-height: 1.4;
}

.woocommerce-cart .woocommerce form .form-row .input-text:focus,
.woocommerce-cart .woocommerce form .form-row select:focus,
.woocommerce-checkout .woocommerce form .form-row .input-text:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-account .woocommerce form .form-row .input-text:focus,
.woocommerce-account .woocommerce form .form-row select:focus {
	border-color: var(--text);
	box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.22);
	outline: none;
}

.woocommerce-checkout .woocommerce form .form-row textarea {
	min-height: 110px;
}

/*
 * WooCommerce hides the asterisk with visibility:hidden and relies on the
 * abbr[title] for screen readers, which leaves a required field with no visible
 * marker at all. Bring the marker back and keep the abbr's title intact.
 *
 * Gold, not red. WooCommerce's asterisk is #a00 maroon, which was the only
 * saturated red anywhere on this site and appeared eleven times on a checkout
 * and four times on the account page, shouting about fields that are merely
 * mandatory rather than wrong. --gold-on-cream is the darker gold (#8f6200),
 * chosen over --gold because it clears 4.5:1 on white and the marker carries
 * meaning. Red is kept for the states that ARE errors: .woocommerce-error and
 * the invalid-field border below.
 */
.woocommerce-cart .woocommerce form .form-row .required,
.woocommerce-checkout .woocommerce form .form-row .required,
.woocommerce-account .woocommerce form .form-row .required {
	visibility: visible;
	color: var(--gold-on-cream);
	text-decoration: none;
	border: 0;
}

/*
 * The one red that stays. WooCommerce marks a failed field with
 * .woocommerce-invalid and no border colour of its own worth the name, so a
 * customer who submits an incomplete checkout gets no field-level signal.
 */
.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select,
.woocommerce-account .woocommerce form .form-row.woocommerce-invalid .input-text {
	border-color: var(--wc-red);
}

/*
 * Checkboxes. There are five on a checkout (remember me, create account, ship
 * to a different address, terms) and every one of them is a 13px UA control
 * with a 4px hit area beyond the glyph. Drawn properly they get a 20px box, a
 * 44px row and a focus ring.
 */
.woocommerce-cart .woocommerce input[type="checkbox"],
.woocommerce-checkout .woocommerce input[type="checkbox"],
.woocommerce-account .woocommerce input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;

	/*
	 * display is load-bearing, not tidiness. WooCommerce sets
	 * `.woocommerce form .form-row .input-checkbox{display:inline}` and an
	 * inline non-replaced box ignores width and height, so the terms and
	 * create-account boxes render as a 2px vertical hairline while
	 * getComputedStyle still cheerfully reports 20x20. The ship-to-different
	 * checkbox looked correct throughout because it sits in an h3, not a
	 * .form-row, and never matched that rule.
	 */
	display: inline-block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	border: 1px solid var(--wc-form-border-color);
	border-radius: 4px;
	background-color: #ffffff;
	cursor: pointer;
	vertical-align: middle;
	position: relative;
}

.woocommerce-cart .woocommerce input[type="checkbox"]:checked,
.woocommerce-checkout .woocommerce input[type="checkbox"]:checked,
.woocommerce-account .woocommerce input[type="checkbox"]:checked {
	background-color: var(--text);
	border-color: var(--text);
}

/* Drawn rather than a glyph, so it cannot depend on an icon font loading. */
.woocommerce-cart .woocommerce input[type="checkbox"]:checked::after,
.woocommerce-checkout .woocommerce input[type="checkbox"]:checked::after,
.woocommerce-account .woocommerce input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.woocommerce-cart .woocommerce input[type="checkbox"]:focus-visible,
.woocommerce-checkout .woocommerce input[type="checkbox"]:focus-visible,
.woocommerce-account .woocommerce input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/*
 * Both selector groups are needed. WooCommerce ships
 * `.woocommerce form .form-row label.checkbox{display:inline}` at (0,3,2), so a
 * body-class prefix alone loses and the terms row collapses to a 28px line box
 * instead of the 44px target it is supposed to be. The first group carries
 * `form .form-row` to reach (0,4,2); the second covers the checkbox labels that
 * are not in a .form-row at all, which is the ship-to-different-address one.
 */
.woocommerce-cart .woocommerce form .form-row label.checkbox,
.woocommerce-cart .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce form .form-row label.checkbox,
.woocommerce-checkout .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-account .woocommerce form .form-row label.checkbox,
.woocommerce-account .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-cart .woocommerce label.checkbox,
.woocommerce-cart .woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce label.checkbox,
.woocommerce-checkout .woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce-account .woocommerce label.checkbox,
.woocommerce-account .woocommerce .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	cursor: pointer;
}

/* ==========================================================================
   5. Checkout layout.

   The float pair is GeneratePress's, reproduced to the fraction: .col2-set at
   52.9411764706% with a 5.8823529412% gutter, #order_review at 41.1764705882%.
   Floats rather than grid on purpose. form.checkout is an extension point that
   several plugins write into (WooCommerce Shipping already injects two address
   validation containers into it), and an unknown child of a float layout lands
   in normal flow, which is survivable, where an unknown child of a two-column
   grid lands in whichever cell is free, which is not.
   ========================================================================== */

@media (min-width: 769px) {

	.woocommerce-checkout form.checkout::before,
	.woocommerce-checkout form.checkout::after {
		content: "";
		display: table;
	}

	.woocommerce-checkout form.checkout::after {
		clear: both;
	}

	.woocommerce-checkout #customer_details {
		float: left;
		width: 52.9411764706%;
		margin-right: 5.8823529412%;
	}

	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #customer_details + #wc_checkout_add_ons {
		float: right;
		clear: right;
		width: 41.1764705882%;
		margin-right: 0;
	}
}

/* Billing and shipping stack inside the left column; WooCommerce floats them
   48/48 by default, which would put shipping beside billing at half width. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
	margin: 0;
}

/*
 * Field wrappers become a two-column grid. WooCommerce's own first/last floats
 * work, but they leave a 6% gutter that does not match anything else on the
 * page and they need clearing after every pair. The catch-all sets every row
 * full width first, so a field this theme has never seen spans both columns
 * rather than landing in a random cell.
 */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 18px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first {
	grid-column: 1;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
	grid-column: 2;
}

@media (max-width: 768px) {

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last {
		grid-column: 1;
	}
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	margin-bottom: 34px;
}

.woocommerce-checkout .woocommerce-account-fields {
	margin-bottom: 10px;
}

/*
 * WooCommerce pads every .form-row by 3px, which is invisible on a text field
 * and obvious on a checkbox: it left the create-account box 3px right of the
 * ship-to-different box directly beneath it. Vertical rhythm comes from margins
 * in this file, so the padding has nothing to do. Three classes and two
 * elements, to beat `.woocommerce form .form-row`.
 */
.woocommerce-cart .woocommerce form .form-row,
.woocommerce-checkout .woocommerce form .form-row,
.woocommerce-account .woocommerce form .form-row {
	padding: 0;
}

.woocommerce-checkout #payment .form-row.validate-required {
	padding: 0;
	margin: 0;
}

/*
 * The terms row is the one checkbox whose text wraps, and a flex row makes the
 * sentence, the link and the required marker three separate items: on a phone
 * the asterisk ended up alone against the right edge, vertically centred beside
 * two lines it did not belong to. Positioning the box instead lets the whole
 * sentence flow as one inline run and keeps the 44px target.
 */
.woocommerce-checkout .woocommerce form .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: block;
	position: relative;
	min-height: 44px;
	padding: 10px 0 10px 32px;
	line-height: 1.5;
}

.woocommerce-checkout .woocommerce form .woocommerce-terms-and-conditions-wrapper label.checkbox > input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 12px;
	margin: 0;
}

/*
 * Ship to a different address. WooCommerce floats this h3 left with clear:none
 * so it can sit beside a field, which on a full-width column just makes it look
 * detached from the panel it controls.
 */
.woocommerce-checkout h3#ship-to-different-address {
	float: none;
	clear: both;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
}

.woocommerce-checkout .shipping_address {
	padding-top: 6px;
}

/* The two login/coupon forms sit in the same narrow measure as their toggles. */
.woocommerce-checkout form.woocommerce-form-login,
.woocommerce-checkout form.checkout_coupon {
	max-width: 640px;
	border: 1px solid var(--rule-color);
	border-radius: var(--funnel-card-radius);
	padding: 24px 26px 10px;
	margin: 0 0 22px;
}

.woocommerce-checkout form.woocommerce-form-login .form-row-first,
.woocommerce-checkout form.woocommerce-form-login .form-row-last,
.woocommerce-checkout form.checkout_coupon .form-row-first,
.woocommerce-checkout form.checkout_coupon .form-row-last {
	float: none;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
}

/* ==========================================================================
   6. Express checkout.

   Spacing only. Everything inside .wcpay-express-checkout-wrapper belongs to
   WooPayments, mounts Apple Pay, Google Pay and WooPay, and is the highest
   converting path on mobile. No display, size, overflow or transform rules.
   ========================================================================== */

/*
 * One measure for everything above the billing form. The login toggle, the
 * coupon toggle and this wrapper all sit at 640px, so the top of the checkout
 * reads as one left-aligned stack instead of two narrow bars followed by a
 * 1312px Apple Pay button running the full width of the page.
 *
 * This is a max-width on WooPayments' outer DIV, never on
 * #wcpay-express-checkout-element or on anything Stripe mounts inside it. The
 * element is already fully responsive - it renders the same buttons in a 358px
 * mobile column - so narrowing its parent is the one dimension change that is
 * safe here. Verified after the change: still 4 express nodes on a filled
 * checkout, Apple Pay still painted. Nothing else in this section may set a
 * size, and nothing at all may set display, overflow or transform.
 */
.woocommerce-checkout .wcpay-express-checkout-wrapper {
	max-width: 640px;
	margin: 0 0 30px;
}

.woocommerce-checkout #wcpay-express-checkout-button-separator {
	color: var(--muted);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   7. Order summary and shop tables.

   The order review becomes one bordered card holding the line items, the
   payment method and Place order, so the thing the customer is paying for and
   the thing that takes the payment read as a single object. Today they are
   three unrelated grey blocks with a purple one in the middle.
   ========================================================================== */

.woocommerce-checkout #order_review {
	background-color: var(--base-3);
	border: 1px solid var(--funnel-card-border);
	border-radius: var(--funnel-card-radius);
	padding: 6px var(--funnel-card-pad) var(--funnel-card-pad);
}

.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table,
.woocommerce-account .woocommerce table.shop_table,
.woocommerce-order-received .woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	margin: 0 0 24px;
}

.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table th,
.woocommerce-account .woocommerce table.shop_table th,
.woocommerce-order-received .woocommerce table.shop_table th {
	background-color: transparent;
	border: 0;
	border-bottom: var(--funnel-row-rule);
	padding: 14px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	vertical-align: middle;
}

.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-checkout .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-order-received .woocommerce table.shop_table td {
	background-color: transparent;
	border: 0;
	border-bottom: var(--funnel-row-rule);
	padding: 18px 0;
	vertical-align: middle;
}

/* tfoot rows are label/value pairs, not data cells, so their th is body-weight. */
.woocommerce-cart .woocommerce table.shop_table tfoot th,
.woocommerce-checkout .woocommerce table.shop_table tfoot th,
.woocommerce-cart .woocommerce table.shop_table tbody th,
.woocommerce-checkout .woocommerce table.shop_table tbody th {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--text);
	padding: 14px 0;
	border-bottom: var(--funnel-row-rule);
}

/*
 * No width on either column. A width on any cell sets the whole column in an
 * auto-layout table, and WooCommerce's own 35% on .cart_totals th plus a 45%
 * here squeezed the product name in the order summary into three wrapped lines
 * inside a 380px card. Letting the label column size to its content and pinning
 * the amount right is both narrower in markup and correct at every width.
 */
.woocommerce-cart .woocommerce .cart_totals table th,
.woocommerce-checkout #order_review table.shop_table th {
	width: auto;
}

/* Money columns read as a ledger: labels left, amounts right, nothing wrapping. */
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart .cart_totals table td {
	text-align: right;
}

.woocommerce-cart .woocommerce table.shop_table tfoot td,
.woocommerce-checkout .woocommerce table.shop_table tfoot td {
	padding: 14px 0;
	text-align: right;
	font-weight: 500;

	/* An auto-layout table gives the long product name most of the width, which
	   left "Free shipping" wrapping across two lines in the summary column. */
	white-space: nowrap;
}

.woocommerce-cart .woocommerce table.shop_table tfoot td .woocommerce-shipping-destination,
.woocommerce-checkout .woocommerce table.shop_table tfoot td .woocommerce-shipping-destination {
	white-space: normal;
}

.woocommerce-cart .woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce-cart .woocommerce table.shop_table tfoot tr:last-child td,
.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
}

/* The total is the number the customer checks twice. */
.woocommerce-cart .woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce-checkout .woocommerce table.shop_table tfoot tr.order-total th {
	font-size: 19px;
	font-weight: 600;
}

.woocommerce-cart .woocommerce table.shop_table tfoot tr.order-total td,
.woocommerce-checkout .woocommerce table.shop_table tfoot tr.order-total td {
	font-size: 22px;
	font-weight: 600;
}

.woocommerce-checkout #order_review .product-total,
.woocommerce-checkout #order_review th.product-total {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-checkout #order_review .product-name {
	line-height: 1.4;
}

.woocommerce-checkout #order_review .product-quantity {
	color: var(--muted);
	font-weight: 400;
	white-space: nowrap;
}

/* The shipping row prints a radio list even when there is exactly one method,
   which on this store is always Free shipping. */
.woocommerce-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.woocommerce-checkout #shipping_method li {
	margin: 0;
	list-style: none;
}

.woocommerce-checkout #shipping_method label {
	display: inline;
	font-weight: 500;
}

/*
 * The shipping row is the one row in either money table whose value is three
 * lines tall: the method, "Shipping to CA." and a Change address link. With the
 * middle alignment every other row wants, the word "Shipment" floated down
 * beside line two and pointed at the destination rather than at the method it
 * labels. Top-aligning both cells puts the label on the same baseline as
 * "Free shipping", which is what it is naming.
 */
.woocommerce-cart .woocommerce table.shop_table tr.shipping th,
.woocommerce-cart .woocommerce table.shop_table tr.shipping td,
.woocommerce-checkout .woocommerce table.shop_table tr.shipping th,
.woocommerce-checkout .woocommerce table.shop_table tr.shipping td {
	vertical-align: top;
}

/* ==========================================================================
   8. Payment.

   RISK R2. GeneratePress clipped the native radio to a 1px rect and faked it
   with WooCommerce-font glyphs \e039 and \e03c on label::before. That trick is
   not reproduced. It depends on an icon font, it leaves the real control
   unreachable to anyone styling by state, and none of it was ever needed.

   What is reproduced instead:
     - the native radio, drawn with appearance:none so its checked and focus
       states are real states of a real control;
     - a 44px minimum row;
     - a full-width label, beating WooPayments' `display:inline` (specificity
       1,2,2) with 1,3,3, which is what makes today's grey box stop at 112px
       just past the word "Card".

   When WooCommerce prints style="display:none" on the radio because exactly one
   gateway is enabled, that inline style still wins and the row renders as a
   labelled header with the card logos, which is the honest presentation of a
   choice that does not exist. Enable a second gateway and the radios appear
   with no further work.
   ========================================================================== */

.woocommerce-checkout #payment {
	background-color: transparent;
	border-radius: 0;
	margin-top: 6px;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0;
	border: 0;
	border-bottom: var(--funnel-row-rule);
	list-style: none;
}

/*
 * The row is the flex container, not the label. The label has to be full width
 * so the card logos can sit hard right, and a full-width block label pushes an
 * inline-block radio onto a line of its own. Wrapping puts the radio and label
 * on line one and the payment box, which asks for 100% basis below, on line two.
 */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
	flex: 1 1 100%;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method + li.wc_payment_method {
	border-top: var(--funnel-row-rule);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	position: static;
	clip: auto;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	border: 1px solid var(--wc-form-border-color);
	border-radius: 50%;
	background-color: #ffffff;
	cursor: pointer;
	vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked {
	border: 6px solid var(--text);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

/*
 * 1,3,3 beats WooPayments' 1,2,2 `label{display:inline}`. Without this the
 * label shrink-wraps the word "Card" and the grey background stops mid-row.
 */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 auto;
	width: auto;
	min-height: 44px;
	padding: 16px 0;
	margin: 0;
	background-color: transparent;
	font-size: 17px;
	font-weight: 500;
	color: var(--text);
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"]:checked + label {
	background-color: transparent;
	font-weight: 600;
}

/* The card-brand logos WooPayments floats right; keep them right, drop the float. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label .payment-methods--logos {
	float: none;
	margin-left: auto;
}

/*
 * The payment box holds the Stripe UPE iframe. WooCommerce paints it #dcd7e2
 * with a lilac speech-bubble arrow; both are dropped. WooPayments samples the
 * surrounding computed styles to theme the fields inside the iframe, so keeping
 * this surface white and warm-bordered makes the card fields match the rest of
 * the form rather than fight it.
 */
/*
 * No border and no fill. The only thing inside it today is the Stripe UPE
 * iframe, whose own fields already carry borders, so a box around the box drew
 * a frame around a frame. A gateway that prints plain instructions instead
 * still gets its padding.
 */
.woocommerce-checkout #payment div.payment_box {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--text);
	font-size: 17px;
	padding: 4px 0 0;
	margin: 2px 0 18px;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/*
 * WooPayments wraps the card fields in a bare <fieldset>, and nothing on the
 * live site styles it, so the browser default applies: a 2px GROOVE border in
 * #efefef, drawn as a bevelled rectangle around the card element. It is the
 * last piece of raw user-agent chrome on the checkout and it sits directly
 * under the word "Card".
 *
 * min-width is the other half of the default. A fieldset's min-inline-size is
 * min-content, so it refuses to shrink below its widest child, which in a 478px
 * order column is how card fields end up overflowing their card.
 */
.woocommerce-checkout #payment fieldset.wc-payment-form {
	border: 0;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box textarea {
	border-color: var(--wc-form-border-color);
	border-top-color: var(--wc-form-border-color);
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	margin: 0 0 4px;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
	margin: 0;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 22px;
}

.woocommerce-checkout #payment .woocommerce-terms-and-conditions {
	background-color: var(--cream);
	border: 1px solid var(--cream-border);
	border-radius: var(--funnel-card-radius);
	box-shadow: none;
	padding: 22px 24px;
	margin: 14px 0 0;
	font-size: 16px;
	max-height: 320px;
	overflow-y: auto;
}

.woocommerce-checkout #payment .validate-required {
	margin: 10px 0 0;
	padding: 0;
}

/* Place order. Full width, unmissable, but 150% of body text (28.5px) shouts in
   a way this brand does not; letterspaced 20px carries the same weight. */
.woocommerce-checkout .woocommerce #payment #place_order {
	float: none;
	width: 100%;
	display: block;
	padding: 22px 28px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	background-color: var(--btn-bg);
	color: var(--btn-text);
	border: none;
	border-radius: var(--radius-button);
}

.woocommerce-checkout .woocommerce #payment #place_order:hover {
	background-color: var(--btn-bg-hover);
}

/* ==========================================================================
   9. Cart.
   ========================================================================== */

.woocommerce-cart table.shop_table.cart {
	margin-bottom: 40px;
}

.woocommerce-cart table.cart td.product-remove {
	width: 44px;
	padding-right: 8px;
}

/*
 * The remove control. WooCommerce ships it as a bare glyph with a 16px hit
 * area; drawn as a 30px ringed circle it is a real target. The colour is a
 * separate fight, in the block below.
 */
.woocommerce-cart #primary .woocommerce a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	border: 1px solid var(--rule-color);
	border-radius: 50%;

	/* #primary because snippet 31 underlines every .entry-content link at
	   class-level specificity 7, and an underlined multiplication sign reads as
	   a rendering fault rather than as a control. */
	text-decoration: none;
}

/*
 * The glyph colour, which has to be fought for.
 *
 * WooCommerce ships `a.remove{color:red!important}` and
 * `a.remove:hover{color:#fff!important;background:red}`. GP Premium overrode
 * both with `color:inherit!important`, so the live cart draws a BLACK cross -
 * losing GP Premium is what turns it red, which would make a saturated red the
 * loudest thing on a $1,166 line item. Worse, the fill above stays transparent
 * on hover, and WooCommerce's white-on-red hover colour would then be white on
 * white: the control would vanish under the pointer.
 *
 * Two !important declarations answering two !important declarations, which is
 * the only mechanism available. The destructive signal moves to the ring
 * instead, where it costs nothing to read.
 */
.woocommerce-cart #primary .woocommerce a.remove,
.woocommerce-cart #primary .woocommerce a.remove:hover,
.woocommerce-cart #primary .woocommerce a.remove:focus {
	color: var(--text) !important;
}

.woocommerce-cart .woocommerce a.remove:hover {
	border-color: var(--wc-red);
	background-color: transparent;
	opacity: 1;
}

/*
 * The quantity column, hidden when there is nothing in it to change.
 *
 * Every product on this store is sold individually, so WooCommerce renders the
 * quantity cell as a hidden input and the column arrives as a "QUANTITY"
 * heading over empty space. On the live site GeneratePress's quantity-button
 * script filled that gap with a "-" and a "+" astride nothing, which is worse.
 *
 * The test is for an editable control rather than for the store's current
 * configuration, so a cart that ever does contain an adjustable line keeps its
 * column. Browsers without :has() fall back to today's empty column.
 */
.woocommerce-cart table.cart:not(:has(td.product-quantity input[type="number"])) th.product-quantity,
.woocommerce-cart table.cart:not(:has(td.product-quantity input[type="number"])) td.product-quantity {
	display: none;
}

.woocommerce-cart .woocommerce a.remove:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/*
 * The product thumbnail is 32px on the live cart, which on a store selling
 * one-of-a-kind stones is too small to confirm you are buying the right piece.
 * WooCommerce sets width:32px at (0,3,1) and min-width:32px on the cell.
 */
.woocommerce-cart table.cart td.product-thumbnail {
	width: 96px;
	min-width: 96px;
	padding-right: 20px;
}

.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-cart table.cart .product-thumbnail img {
	width: 76px;
	height: auto;
	border-radius: var(--radius-image);
	background-color: var(--card-thumb-bg);
	display: block;
}

.woocommerce-cart table.cart td.product-name {
	font-size: 18px;
	line-height: 1.4;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	white-space: nowrap;
}

.woocommerce-cart table.cart td.product-subtotal {
	font-weight: 600;
}

/*
 * The actions row. WooCommerce gives the coupon input a 150px box with 6px of
 * padding and a #cfc8d8 border that matches nothing else on the page.
 */
.woocommerce-cart table.cart td.actions {
	background-color: transparent;
	border-bottom: 0;
	padding: 24px 0 0;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	align-items: center;
	gap: 10px;
	float: left;
}

.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-cart #content table.cart td.actions .input-text {
	float: none;
	width: 220px;
	min-height: var(--funnel-field-height);
	margin: 0;
	padding: 12px 14px;
	font-size: 17px;
	background-color: var(--base-3);
	border: 1px solid var(--wc-form-border-color);
	border-radius: var(--wc-form-border-radius);
	color: var(--text);
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
	border-color: var(--text);
	box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.22);
	outline: none;
}

.woocommerce-cart .woocommerce .coupon .button {
	border: 1px solid transparent;
}

/*
 * WooCommerce sizes the actions-row buttons with `padding:.618em 1em` from a
 * selector carrying table.cart AND td.actions, which outranks the funnel button
 * rule in section 2. Update cart therefore came out 36px tall beside a 47px
 * Apply coupon: a mismatched pair, and under the 44px target on a phone.
 */
.woocommerce-cart .woocommerce table.cart td.actions .button,
.woocommerce-cart .woocommerce table.cart td.actions button.button {
	padding: 15px 30px;
}

/*
 * .cart-collaterals is a clearfix container in WooCommerce, with ::before and
 * ::after set to display:table. Those pseudo-elements become grid ITEMS the
 * moment this box turns into a grid, so they have to go first or the layout
 * grows two empty cells.
 */
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after {
	content: none;
}

.woocommerce-cart .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
	gap: var(--funnel-gap);
	align-items: start;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: auto;
	background-color: var(--base-3);
	border: 1px solid var(--funnel-card-border);
	border-radius: var(--funnel-card-radius);
	padding: var(--funnel-card-pad);
}

.woocommerce-cart .cart-collaterals .cart_totals table {
	border-collapse: collapse;
	margin: 0 0 22px;
}

.woocommerce-cart .cart-collaterals .cart_totals table th {
	width: 45%;
}

.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th {
	border-top: 0;
	border-bottom: var(--funnel-row-rule);
}

.woocommerce-cart .cart-collaterals .cart_totals tr:last-child td,
.woocommerce-cart .cart-collaterals .cart_totals tr:last-child th {
	border-bottom: 0;
}

.woocommerce-cart .cart-collaterals .woocommerce-shipping-destination {
	color: var(--muted);
	font-size: 16px;
}

/*
 * WooCommerce prints a van glyph from its own icon font after "Change address".
 * text-decoration propagates from the link, so the underline ran straight
 * through the vehicle. An inline-block is not decorated by its ancestor, which
 * separates the two without touching either.
 */
.woocommerce-cart .shipping-calculator-button::after {
	display: inline-block;
	margin-left: 6px;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 22px 28px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: center;
}

/*
 * The reassurance panel, printed by inc/woocommerce-checkout.php into
 * woocommerce_cart_collaterals. It exists because the live cart leaves the
 * entire left half of a 1440px page empty next to the totals, and a cart is
 * exactly where a buyer wants shipping, provenance and payment answered.
 */
.woocommerce-cart .rlj-cart-reassurance {
	font-size: 17px;
	line-height: 1.55;
	color: var(--text);
}

.woocommerce-cart .rlj-cart-reassurance ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-cart .rlj-cart-reassurance li {
	position: relative;
	margin: 0 0 18px;
	padding-left: 26px;
}

.woocommerce-cart .rlj-cart-reassurance li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--gold);
}

.woocommerce-cart .rlj-cart-reassurance li:last-child {
	margin-bottom: 0;
}

/*
 * The empty cart is one short sentence and a button on an otherwise blank page.
 *
 * The sentence is six words, so it gets the same 640px measure as the two
 * checkout side doors rather than the full 1312px content width: a cream band
 * running the whole page for six words reads as an announcement, and the button
 * underneath it belongs to a panel it can see the end of. One measure for short
 * messages across all three templates.
 */
.woocommerce-cart .woocommerce-info.cart-empty,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info {
	max-width: 640px;
}

.woocommerce-cart .wc-empty-cart-message + .return-to-shop,
.woocommerce-cart .cart-empty + .return-to-shop {
	margin-top: 4px;
}

/* ==========================================================================
   10. My account.

   Logged out this is a login form and a register form. Logged in it is a
   vertical nav plus a content pane. Both are stock WooCommerce templates and
   neither is overridden.
   ========================================================================== */

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	content: none;
}

/*
 * align-items is stretch, not start, so the two cards are always the same
 * height whatever WooCommerce prints into them. With `start` they matched only
 * by coincidence of content length, and a validation notice inside one of them
 * is enough to break that.
 */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: stretch;
	margin-top: 10px;
}

/* Remember me and Log in share one .form-row, so without this the button sits
   hard against the checkbox it has nothing to do with. */
.woocommerce-account form.login .woocommerce-form-login__submit {
	margin-top: 10px;
}

/*
 * REGISTER and the legal sentence above it.
 *
 * WooCommerce prints the privacy paragraph as a bare div immediately before the
 * submit row. A div with no padding or border lets its last child's bottom
 * margin collapse straight through it, so the button arrived roughly 6px under
 * the gold underline of "privacy policy" - close enough to touch it - while the
 * .form-row's own 18px plus the card's 34px of padding left ~50px of empty card
 * BELOW it. The button read as part of the sentence rather than as the action
 * that ends the form.
 *
 * The spacing is stated on both sides here rather than left to collapse: 30px
 * above, and the trailing 18px removed so the gap below is the card padding
 * alone. That puts the button on the same rhythm as LOG IN in the card beside
 * it.
 */
.woocommerce-account form.register .woocommerce-privacy-policy-text {
	margin: 0 0 30px;
}

.woocommerce-account form.register .woocommerce-privacy-policy-text p:last-child {
	margin-bottom: 0;
}

.woocommerce-account form.register .form-row:last-child {
	margin-bottom: 0;
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: auto;
	background-color: var(--base-3);
	border: 1px solid var(--funnel-card-border);
	border-radius: var(--funnel-card-radius);
	padding: 30px 32px 34px;
}

.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	border: 0;
	padding: 0;
	margin: 0;
}

.woocommerce-account #customer_login .form-row {
	padding: 0;
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 16px 0 0;
	font-size: 16px;
}

.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--muted);
}

@media (max-width: 768px) {

	.woocommerce-account #customer_login {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/*
 * The sidebar widget divider, realigned.
 *
 * woocommerce-archive.css (WP6a, which owns the sidebar because the same five
 * widgets render on the shop, both category levels, /privacy-policy/, the 404
 * and here) insets each widget with `padding: 0 0 0 40px` and then draws the
 * separator as a border-top on that same box. A border is painted on the border
 * box, so the rule started 40px LEFT of the column it divides: measured 982 to
 * 1375.5 against a heading and every list item at 1023.
 *
 * Trading the left padding for an equal left margin moves the box's edge to
 * where its content already starts, so the rule lines up and not one pixel of
 * widget content moves. Scoped to .woocommerce-account, at three classes
 * against that file's two, so it wins on specificity regardless of enqueue
 * order and cannot touch the templates WP6a owns. Ideally that file inverts the
 * padding for every page and this block disappears.
 */
.woocommerce-account .widget-area .widget {
	padding-left: 0;
	margin-left: 40px;
}

@media (max-width: 768px) {

	/* Stacked under the content at this width, where the 40px indent is just a
	   ragged edge. Matches what WP6a's own mobile block does to the padding. */
	.woocommerce-account .widget-area .widget {
		margin-left: 0;
	}
}

/*
 * The account navigation. #primary is doing real work here: snippet 31 paints
 * every .entry-content link gold and underlined at class-level specificity 7,
 * and a nine-item vertical nav rendered in gold underline reads as a list of
 * broken links.
 */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 25%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--funnel-row-rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account #primary .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 16px 0;
	border-bottom: var(--funnel-row-rule);
	font-size: 17px;
	color: var(--text);
	text-decoration: none;
}

.woocommerce-account #primary .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account #primary .woocommerce-MyAccount-navigation li a:focus {
	color: var(--prose-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-account #primary .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 70%;
}

@media (max-width: 768px) {

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

/* ==========================================================================
   11. Mobile.

   WooCommerce's own woocommerce-smallscreen.css turns .shop_table_responsive
   into stacked rows with a data-title label on each cell, below 768px. That
   behaviour is kept; what is fixed is that the thumbnail row collapses to
   nothing and the remove control ends up alone in a row of its own.
   ========================================================================== */

@media (max-width: 768px) {

	.woocommerce-cart .cart-collaterals {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* Totals and the checkout button first; the reassurance copy reads after
	   the decision, not in front of it. */
	.woocommerce-cart .cart-collaterals .cart_totals {
		order: 1;
	}

	.woocommerce-cart .rlj-cart-reassurance {
		order: 2;
	}

	/*
	 * woocommerce-smallscreen.css stripes every second row with
	 * rgba(0,0,0,.025) at (0,3,3). Inside a bordered card that reads as a
	 * rendering fault rather than as banding.
	 */
	.woocommerce-cart .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
	.woocommerce-cart .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
		background-color: transparent;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item {
		display: block;
		position: relative;
		border: 1px solid var(--funnel-card-border);
		border-radius: var(--funnel-card-radius);
		padding: 18px 18px 6px;
		margin: 0 0 18px;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 10px 0;
		border-bottom: var(--funnel-row-rule);
		text-align: right;
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td::before {
		float: none;
		font-weight: 500;
		color: var(--muted);
	}

	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td:last-child {
		border-bottom: 0;
	}

	/*
	 * The product name gets the card's full width, left aligned, with no
	 * "Product:" label: it is the one cell whose content says what it is. The
	 * !important is answering WooCommerce's own
	 * `tr td{text-align:right!important}`, which has no other override.
	 */
	.woocommerce-cart table.shop_table_responsive.cart td.product-name {
		display: block;
		text-align: left !important;
		font-size: 17px;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-name::before {
		content: none;
	}

	/*
	 * The thumbnail. WooCommerce hides it outright below 768px, through a
	 * selector carrying #content, so a class-only override loses however many
	 * classes it stacks up. On a store selling one-of-a-kind stones, the
	 * picture of the stone is the single most reassuring thing on the page and
	 * the phone is where most of the traffic is.
	 */
	.woocommerce-cart #content table.cart td.product-thumbnail,
	.woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail {
		display: block;
		width: auto;
		padding: 0 0 12px;
		border-bottom: var(--funnel-row-rule);
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail::before {
		content: none;
	}

	.woocommerce-cart #content table.cart td.product-thumbnail img,
	.woocommerce-cart table.shop_table_responsive.cart td.product-thumbnail img {
		width: 110px;
	}

	/* The remove control is an action on the card, so it belongs in its corner
	   rather than in a row of its own above the product. */
	/* tr.cart_item is in the selector to match the row rule above it; without it
	   this loses on specificity and a hairline runs under the control. */
	.woocommerce-cart table.shop_table_responsive.cart tr.cart_item td.product-remove {
		position: absolute;
		top: 12px;
		right: 12px;
		display: block;
		width: auto;
		padding: 0;
		border-bottom: 0;
	}

	.woocommerce-cart table.shop_table_responsive.cart td.product-remove::before {
		content: none;
	}

	.woocommerce-cart table.cart td.actions {
		padding-top: 8px;
	}

	.woocommerce-cart table.cart td.actions .coupon {
		float: none;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-bottom: 12px;
	}

	/*
	 * WooCommerce puts the coupon field and its button on 48% each below 768px,
	 * again from a selector carrying #content, which on a 358px column leaves
	 * "Apply coupon" wrapping onto two lines inside a pill. Stacked full width
	 * is the only shape that fits.
	 */
	.woocommerce-cart #content table.cart td.actions .coupon .input-text,
	.woocommerce-cart #content table.cart td.actions .coupon input,
	.woocommerce-cart #content table.cart td.actions .coupon .button,
	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce-cart table.cart td.actions .coupon .button,
	.woocommerce-cart table.cart td.actions button[name="update_cart"] {
		width: 100%;
		float: none;
	}

	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout #order_review {
		padding: 22px 20px;
	}

	.woocommerce-checkout form.woocommerce-form-login,
	.woocommerce-checkout form.checkout_coupon {
		padding: 20px 18px 6px;
	}

	.woocommerce-checkout .woocommerce #payment #place_order,
	.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
		font-size: 18px;
		padding: 20px 18px;
	}

	/* The order summary table keeps its label/value shape on a phone rather
	   than restacking, because two short columns already fit. */
	.woocommerce-checkout #order_review table.shop_table tfoot th,
	.woocommerce-checkout #order_review table.shop_table tfoot td {
		display: table-cell;
	}
}

/* ==========================================================================
   12. Motion.

   a11y.css carries the global prefers-reduced-motion block. The only animated
   thing this package introduces is the button transition inherited from
   legacy-customizer.css, which that block already neutralises. Nothing is
   added here, and nothing in this file may animate a payment control.
   ========================================================================== */