@charset "UTF-8";
/*!
 * sst-checkout-ab — variant B skin: "Soft surfaces"   (WS-3b)
 *
 * Translates mock-B.html onto the real production checkout DOM:
 *   - WooCommerce 10.9.4 classic checkout (core form-checkout / form-billing /
 *     form-shipping / review-order templates, unmodified)
 *   - samurai-account-checkout-fields 0.2.16x (account benefits + create-account
 *     radios, business/customs <details>, phone control, coupon panel, review-table
 *     item/qty/line-total filters, country-clearance block)
 *   - sst-points 0.5.x (points panel, rank gauge row) and
 *     samurai-bulk-order-discount 0.3.x (next-tier row + meter)
 *   - samurai-payment-surcharge (tr.fee "PayPal fee (5%)")
 *   - the sst-checkout-ab structure from DESIGN §3 rendered by WS-2:
 *     .sst-co-steps / .sst-co-strip / .sst-co-bar / .sst-pm* / .sst-consent* /
 *     .sst-check* / .sst-pay* / .place-order[data-sst-gateway]
 *
 * Scope: every rule is prefixed with body.sst-co-ab.sst-co-v-b, so nothing can
 * reach a page that is not a variant-B checkout.
 *
 * Load order: assets/checkout-ab.css (shared shell/structure, WS-2) then this file.
 * The >=1024 two-column shell lives in the base CSS; this file supplies the variant
 * tokens it reads (--co-rail / --co-gap / --co-pad) plus all of the skin.
 *
 * Fonts come from the theme (Figtree). No @import, no external requests.
 */

/* ============================================================================
   0. TOKENS  (DESIGN §4 names + the extras mock B needs)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b{
	/* canvas + ink */
	--co-bg:#F4F4F1;
	--co-card:#FFFFFF;
	--co-ink:#15160F;
	--co-mute:#565952;
	--co-mute-2:#6B6E65;
	--co-rule:#E6E5DD;
	--co-rule-strong:#D3D2C8;
	/* Interactive boundaries — REVIEW-CO-2 M-15 (WCAG 1.4.11 non-text contrast).
	   A control's edge needs 3:1 against the surface beside it. --co-rule-strong
	   measures 1.52:1 on the white card and 1.48:1 on --co-field, so until 0.3.x
	   every text field, drawn checkbox/radio, selectable payment/shipping/consent
	   row and qty stepper in this arm had no boundary a low-vision customer could
	   find. --co-control is the same warm grey family (H 50deg), taken down to
	   3.86:1 on #FFF / 3.75:1 on --co-field / 3.50:1 on --co-bg / 3.47:1 on
	   --co-field-off. That is deliberately the weight arms A (--co-line #8F8B82,
	   3.40:1) and C (--co-line #8A8A8A, 3.45:1) already ship: a contrast fix in
	   one arm must not become a visual confound in the A/B test.
	   --co-control-hover is the hover/focus companion, 5.27:1 on #FFF, a hair
	   lighter than the --co-mute-2 hover .sst-account-choice__option already uses.
	   --co-rule-strong is UNCHANGED and stays on the decorative + inactive uses —
	   the dashed guest nudge, the Cheapest/Fastest chip, the points switch fill,
	   and disabled buttons / the locked coupon field (1.4.11 exempts inactive
	   components) — so the skin keeps its lightness. Numbers: NOTES-B-CONTRAST.md. */
	--co-control:#848278;
	--co-control-hover:#6E6C63;
	--co-field:#FCFCFA;
	--co-field-off:#F3F3EF;
	--co-thumb:#EFEEE7;
	/* Meter track. 0.2.5 (P3-3): #EDECE4 measured 4 % lighter than the white
	   card it sits on, so the track was invisible and only the fill read — the
	   reviews called it "a 3 px hairline in the row-rule colour". This is
	   deliberately a hair darker than --co-rule so a track can never be mistaken
	   for a row separator, and it is an ink tint (not a warm grey) so it reads
	   the same on the card (#FFF) and on the page (--co-bg). */
	--co-meter:rgba(21,22,15,.13);
	--co-meter-h:6px;

	/* status */
	--co-ok:#146B3A;
	--co-ok-tint:#F1F8F2;
	--co-ok-rule:#CDE6D5;
	--co-ok-pill-rule:#B8DDC4;
	--co-alert:#8A2B12;
	--co-alert-tint:#FDF2ED;
	--co-alert-rule:#F3D6C8;

	/* brand — Wise */
	--co-wise:#163300;
	--co-wise-accent:#9FE870;
	--co-wise-tint:#F3FBEA;

	/* brand — PayPal */
	--co-paypal:#003087;
	--co-paypal-accent:#0070E0;
	--co-paypal-tint:#EEF4FF;
	--co-paypal-rule:#CBDCF6;

	/* buttons */
	--co-primary:#111111;
	--co-primary-ink:#FFFFFF;
	--co-primary-hover:#000000;
	--co-secondary-hover:#F6F6F2;

	/* shape + motion */
	--co-radius:12px;
	--co-radius-input:10px;
	--co-radius-sm:8px;
	--co-pad:20px;
	--co-gap:16px;
	--co-rail:400px;
	--co-shadow:0 2px 14px rgba(32,32,22,.07);
	--co-shadow-lift:0 6px 22px rgba(32,32,22,.10);
	--co-shadow-bar:0 -3px 16px rgba(32,32,22,.10);
	--co-t:.15s;

	/* tokens read by checkout-ab.css (WS-2) */
	--co-rail-min:340px;
	--co-sticky-top:20px;
	--co-card-pad:18px;
	--co-card-gap:12px;
	--co-check-size:24px;
	--co-qty-size:32px;   /* cart stepper, matches the checkout stepper in §10 */
	--co-details-max:520px;
	--co-motion:150ms;
	--co-max:720px;
	/* the bottom-bar gap is taken on <body> in §20, not on the form */
	--co-bar-height:0px;
	/* …but the bar is still 103-107 px tall on screen, and `checkout-ab.css`
	   §12 lifts the help-chat launcher by `calc(var(--co-bar-height) + 12px)`.
	   With the token at 0 that resolves to 12 px and the launcher does not
	   move — see §21.14. This is B's real bar height, for anything that needs
	   the number rather than the form's padding. */
	--co-bar-real:112px;
	/* The rail itself is never pinned (--co-rail-position is left at the shared
	   default `static`): mock B's payment + consent stack is taller than a 900 px
	   viewport, so an inner scroller would park the pay button off screen. The
	   CTA inside it IS sticky (the shared default), which is the desktop twin of
	   variant B's fixed bottom bar below 1024 px — see §20. */
	--co-rail-cta:sticky;

	/* type */
	--co-font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--co-fs-eyebrow:10.5px;
	--co-fs-micro:11.5px;
	--co-fs-small:12.5px;
	--co-fs-body-s:13.5px;
	--co-fs-body:15px;
	--co-fs-h2:17px;
	--co-fs-h1:27px;
}

@media (min-width:768px){
	body.sst-co-ab.sst-co-v-b{--co-pad:24px;--co-gap:20px;--co-fs-h1:31px}
}
@media (min-width:1024px){
	body.sst-co-ab.sst-co-v-b{--co-gap:24px}
}

/* ============================================================================
   1. CANVAS + TYPOGRAPHY
   ========================================================================= */
body.sst-co-ab.sst-co-v-b{
	background:var(--co-bg);
	color:var(--co-ink);
	font-family:var(--co-font);
	font-size:var(--co-fs-body);
	line-height:1.5;
	letter-spacing:-.005em;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

body.sst-co-ab.sst-co-v-b .sst-page-header h1,
body.sst-co-ab.sst-co-v-b .entry-title,
body.sst-co-ab.sst-co-v-b .page-title{
	margin:0 0 6px;
	font-family:var(--co-font);
	font-size:var(--co-fs-h1);
	font-weight:800;
	letter-spacing:-.02em;
	line-height:1.1;
	color:var(--co-ink);
	text-align:left;
	text-transform:none;
}
body.sst-co-ab.sst-co-v-b .sst-page-header{margin:0 0 var(--co-gap);padding:0;border:0;background:none}
body.sst-co-ab.sst-co-v-b .sst-page-breadcrumb{
	margin:0 0 12px;
	font-size:var(--co-fs-small);
	color:var(--co-mute-2);
}
body.sst-co-ab.sst-co-v-b .sst-page,
body.sst-co-ab.sst-co-v-b .sst-page-content{background:none;border:0;box-shadow:none;padding:0}

/* card / section headings */
body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields > h3,
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields > h3,
body.sst-co-ab.sst-co-v-b .woocommerce-additional-fields > h3,
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields h3#ship-to-different-address,
body.sst-co-ab.sst-co-v-b #order_review_heading,
body.sst-co-ab.sst-co-v-b .sst-consent__title,
body.sst-co-ab.sst-co-v-b .sst-country-clearance__head h3,
body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths__head h2,
body.sst-co-ab.sst-co-v-b .sst-account-required-notice > strong,
body.sst-co-ab.sst-co-v-b .sst-co-strip__title{
	display:block;
	margin:0;
	padding:0;
	border:0;
	font-family:var(--co-font);
	font-size:var(--co-fs-h2);
	font-weight:700;
	letter-spacing:-.015em;
	line-height:1.25;
	color:var(--co-ink);
	text-transform:none;
}

/* small-caps eyebrows */
body.sst-co-ab.sst-co-v-b .sst-co-payhead__eyebrow,
body.sst-co-ab.sst-co-v-b .sst-co-eyebrow,
body.sst-co-ab.sst-co-v-b .sst-country-clearance__eyebrow,
body.sst-co-ab.sst-co-v-b .sst-express-checkout__eyebrow,
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__eyebrow{
	display:block;
	margin:0 0 6px;
	font-size:var(--co-fs-eyebrow);
	font-weight:800;
	letter-spacing:.13em;
	line-height:1.2;
	text-transform:uppercase;
	color:var(--co-mute-2);
}

body.sst-co-ab.sst-co-v-b p{margin:0 0 12px}
body.sst-co-ab.sst-co-v-b p:last-child{margin-bottom:0}

/* figures line up */
body.sst-co-ab.sst-co-v-b .woocommerce-Price-amount,
body.sst-co-ab.sst-co-v-b .sst-pay__amount,
body.sst-co-ab.sst-co-v-b .sst-co-bar__amount,
body.sst-co-ab.sst-co-v-b .sst-co-strip__line,
body.sst-co-ab.sst-co-v-b .sst-co-strip__total,
body.sst-co-ab.sst-co-v-b .sst-pm__fee,
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__input,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table td,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table th{
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
}

/* one focus ring everywhere */
body.sst-co-ab.sst-co-v-b :focus-visible{
	outline:2px solid var(--co-ink);
	outline-offset:2px;
	border-radius:4px;
}

/* ============================================================================
   2. CARD SURFACES
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths,
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice,
body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields,
body.sst-co-ab.sst-co-v-b .woocommerce-account-fields,
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields,
body.sst-co-ab.sst-co-v-b .woocommerce-additional-fields,
body.sst-co-ab.sst-co-v-b .sst-country-clearance,
body.sst-co-ab.sst-co-v-b .sst-express-checkout,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel,
body.sst-co-ab.sst-co-v-b .sst-consent,
body.sst-co-ab.sst-co-v-b .sst-co-strip,
body.sst-co-ab.sst-co-v-b .sst-checkout-login-panel,
body.sst-co-ab.sst-co-v-b .woocommerce-form-login-toggle .woocommerce-info{
	box-sizing:border-box;
	background:var(--co-card);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius);
	box-shadow:var(--co-shadow);
	padding:var(--co-pad);
	margin:0 0 var(--co-gap);
}

/* transparent WooCommerce plumbing */
body.sst-co-ab.sst-co-v-b #order_review,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order,
body.sst-co-ab.sst-co-v-b #payment,
body.sst-co-ab.sst-co-v-b #payment.woocommerce-checkout-payment,
body.sst-co-ab.sst-co-v-b #customer_details,
body.sst-co-ab.sst-co-v-b #customer_details > .col-1,
body.sst-co-ab.sst-co-v-b #customer_details > .col-2,
body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields__field-wrapper,
body.sst-co-ab.sst-co-v-b .woocommerce-additional-fields__field-wrapper{
	background:none;
	border:0;
	box-shadow:none;
	padding:0;
}
body.sst-co-ab.sst-co-v-b #payment{margin:0}

body.sst-co-ab.sst-co-v-b .woocommerce-form-login-toggle,
body.sst-co-ab.sst-co-v-b .woocommerce-form-coupon-toggle{margin:0 0 var(--co-gap)}

body.sst-co-ab.sst-co-v-b hr,
body.sst-co-ab.sst-co-v-b .sst-co-rule{
	height:1px;
	border:0;
	background:var(--co-rule);
	margin:16px 0;
}

/* ---- "Have an account? Log in" (ACF customer paths) ---- */
body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 18px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths__head{flex:1 1 240px;min-width:0}
body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths__head p{
	margin:4px 0 0;
	font-size:14px;
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-path-options{display:flex;gap:10px;flex-wrap:wrap}
body.sst-co-ab.sst-co-v-b .sst-checkout-path-card{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:38px;
	padding:0 16px;
	background:#fff;
	border:1px solid var(--co-primary);
	border-radius:var(--co-radius-input);
	color:var(--co-primary);
	font-family:var(--co-font);
	font-size:var(--co-fs-body-s);
	font-weight:700;
	cursor:pointer;
	transition:background var(--co-t),color var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-path-card strong{font-weight:700}
body.sst-co-ab.sst-co-v-b .sst-checkout-path-card:hover{background:var(--co-secondary-hover)}
body.sst-co-ab.sst-co-v-b .sst-checkout-path-card.is-active{
	background:var(--co-primary);
	color:var(--co-primary-ink);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-login-panel{flex:1 1 100%;margin:4px 0 0}
body.sst-co-ab.sst-co-v-b .sst-checkout-login-panel h3{
	margin:0 0 4px;
	font-size:var(--co-fs-body);
	font-weight:700;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-login-panel > p{
	font-size:var(--co-fs-body-s);
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-login-panel[hidden]{display:none}

/* ---- logged-in "saved address incomplete" notice ---- */
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	border-color:var(--co-alert-rule);
	background:var(--co-alert-tint);
}
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice strong{
	display:block;
	font-size:14px;
	font-weight:700;
	color:var(--co-alert);
}
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice span{
	display:block;
	margin-top:2px;
	font-size:var(--co-fs-body-s);
	color:var(--co-mute);
}

/* ============================================================================
   3. FORM CONTROLS
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .form-row{
	display:block;
	margin:0 0 14px;
	padding:0;
}
body.sst-co-ab.sst-co-v-b .form-row:last-child{margin-bottom:0}
body.sst-co-ab.sst-co-v-b .form-row[hidden]{display:none}
body.sst-co-ab.sst-co-v-b .clear{clear:both}

body.sst-co-ab.sst-co-v-b .form-row > label,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__saved > label{
	display:block;
	margin:0 0 6px;
	font-size:var(--co-fs-small);
	font-weight:700;
	line-height:1.35;
	letter-spacing:.01em;
	color:var(--co-mute);
	text-transform:none;
}
body.sst-co-ab.sst-co-v-b .form-row .required,
body.sst-co-ab.sst-co-v-b .form-row abbr.required,
body.sst-co-ab.sst-co-v-b .form-row .optional{
	color:var(--co-mute-2);
	font-weight:600;
	text-decoration:none;
	border:0;
}

body.sst-co-ab.sst-co-v-b .woocommerce-input-wrapper{display:block;width:100%}

body.sst-co-ab.sst-co-v-b input[type=text],
body.sst-co-ab.sst-co-v-b input[type=email],
body.sst-co-ab.sst-co-v-b input[type=tel],
body.sst-co-ab.sst-co-v-b input[type=search],
body.sst-co-ab.sst-co-v-b input[type=url],
body.sst-co-ab.sst-co-v-b input[type=password],
body.sst-co-ab.sst-co-v-b select,
body.sst-co-ab.sst-co-v-b textarea,
body.sst-co-ab.sst-co-v-b .select2-container--default .select2-selection--single{
	box-sizing:border-box;
	width:100%;
	height:auto;
	min-height:0;
	padding:12px 13px;
	background:var(--co-field);
	border:1px solid var(--co-control);
	border-radius:var(--co-radius-input);
	box-shadow:none;
	font-family:var(--co-font);
	font-size:var(--co-fs-body);
	font-weight:400;
	line-height:1.4;
	color:var(--co-ink);
	transition:border-color var(--co-t),box-shadow var(--co-t),background var(--co-t);
}
body.sst-co-ab.sst-co-v-b textarea{min-height:96px;resize:vertical}

body.sst-co-ab.sst-co-v-b select{
	appearance:none;
	-webkit-appearance:none;
	padding-right:34px;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23565952' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 13px center;
}

body.sst-co-ab.sst-co-v-b input::placeholder,
body.sst-co-ab.sst-co-v-b textarea::placeholder{color:#737670;opacity:1}

body.sst-co-ab.sst-co-v-b input:focus,
body.sst-co-ab.sst-co-v-b select:focus,
body.sst-co-ab.sst-co-v-b textarea:focus,
body.sst-co-ab.sst-co-v-b .select2-container--default.select2-container--focus .select2-selection--single,
body.sst-co-ab.sst-co-v-b .select2-container--default.select2-container--open .select2-selection--single{
	outline:none;
	background:#fff;
	border-color:var(--co-ink);
	box-shadow:0 0 0 1.5px var(--co-ink);
}

body.sst-co-ab.sst-co-v-b input:disabled,
body.sst-co-ab.sst-co-v-b select:disabled,
body.sst-co-ab.sst-co-v-b textarea:disabled,
body.sst-co-ab.sst-co-v-b input[readonly]{
	background:var(--co-field-off);
	color:var(--co-mute-2);
	cursor:not-allowed;
}

/* WooCommerce show-password eye */
body.sst-co-ab.sst-co-v-b .password-input{display:block;position:relative}
body.sst-co-ab.sst-co-v-b .show-password-input{
	position:absolute;
	top:50%;
	right:12px;
	transform:translateY(-50%);
	cursor:pointer;
}

/* select2 (country / state) */
body.sst-co-ab.sst-co-v-b .select2-container--default .select2-selection--single{display:flex;align-items:center}
body.sst-co-ab.sst-co-v-b .select2-container--default .select2-selection--single .select2-selection__rendered{
	padding:0;
	line-height:1.4;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:11px}
body.sst-co-ab.sst-co-v-b .select2-dropdown{
	border-color:var(--co-control);
	border-radius:var(--co-radius-input);
	box-shadow:var(--co-shadow-lift);
	overflow:hidden;
}
body.sst-co-ab.sst-co-v-b .select2-container--default .select2-results__option--highlighted[aria-selected]{
	background:var(--co-ink);
	color:#fff;
}

/* two-up rows */
body.sst-co-ab.sst-co-v-b .form-row-first,
body.sst-co-ab.sst-co-v-b .form-row-last{width:100%;float:none;margin-right:0}

@media (min-width:560px){
	body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields__field-wrapper,
	body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields__field-wrapper,
	body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__grid,
	body.sst-co-ab.sst-co-v-b .sst-country-clearance__grid{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:14px;
	}
	body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields__field-wrapper > .form-row,
	body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields__field-wrapper > .form-row,
	body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__grid > .form-row,
	body.sst-co-ab.sst-co-v-b .sst-country-clearance__grid > .form-row{grid-column:1/-1}
	body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields__field-wrapper > .form-row-first,
	body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields__field-wrapper > .form-row-first{grid-column:1/2}
	body.sst-co-ab.sst-co-v-b .woocommerce-billing-fields__field-wrapper > .form-row-last,
	body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields__field-wrapper > .form-row-last{grid-column:2/3}
	body.sst-co-ab.sst-co-v-b .sst-business-field--sst_vat_no,
	body.sst-co-ab.sst-co-v-b .sst-business-field--sst_fedex_account_no{grid-column:auto!important}
}

/* phone: country-code select + local number (ACF .sst-phone-control) */
/* THE COUNTRY-CODE SELECT HAS TO FIT ITS OWN VALUE (checkout D4-7,
   checkout_rates F13, member_checkout MC-18: B rendered "Germany -" at
   320-430 and "United Sta" at 430).
   Measured with the live font (15px Figtree) over all 200 options:
     median label 95px · p75 114px · "Germany +49" 93px · "Japan +81" 69px
     · "Netherlands +31" 110px · longest 272px
   and the box was giving the text only 140 - 13 - 34 = 93px (>=560) or
   118 - 13 - 34 = 71px (<=559). So even an 11-character label was clipped.
   The column now buys the text 130px at >=560 (covers p75) and 102px below
   (covers the median), paid for out of the chevron gutter first (34 -> 26)
   and the column second; at 320 the local-number field still keeps 108px.
   A select can never fit its longest option, so the overflow is at least
   made to read as deliberate with an ellipsis rather than a hard cut. */
body.sst-co-ab.sst-co-v-b .sst-phone-control{
	display:grid;
	grid-template-columns:minmax(0,168px) minmax(0,1fr);
	gap:8px;
	align-items:start;
}
body.sst-co-ab.sst-co-v-b .sst-phone-country-select{min-width:0}
body.sst-co-ab.sst-co-v-b .sst-phone-control select,
body.sst-co-ab.sst-co-v-b select#sst_phone_country{
	padding-left:12px;
	padding-right:26px;
	background-position:right 9px center;
	text-overflow:ellipsis;
}
body.sst-co-ab.sst-co-v-b .sst-phone-country-error{
	grid-column:1/-1;
	margin:2px 0 0;
	font-size:var(--co-fs-small);
	color:var(--co-alert);
}
body.sst-co-ab.sst-co-v-b .sst-phone-country-invalid .sst-phone-country-select{
	border-color:var(--co-alert);
	background:var(--co-alert-tint);
}
body.sst-co-ab.sst-co-v-b .sst-shipping-phone-hidden{display:none}

body.sst-co-ab.sst-co-v-b .form-row .description,
body.sst-co-ab.sst-co-v-b .sst-co-hint{
	display:block;
	margin-top:6px;
	font-size:var(--co-fs-small);
	font-weight:400;
	line-height:1.45;
	color:var(--co-mute-2);
}

/* validation */
body.sst-co-ab.sst-co-v-b .woocommerce-invalid input.input-text,
body.sst-co-ab.sst-co-v-b .woocommerce-invalid select,
body.sst-co-ab.sst-co-v-b .woocommerce-invalid textarea,
body.sst-co-ab.sst-co-v-b .sst-checkout-native-invalid-field{
	border-color:var(--co-alert);
	background:var(--co-alert-tint);
}
body.sst-co-ab.sst-co-v-b .woocommerce-invalid input.input-text:focus,
body.sst-co-ab.sst-co-v-b .sst-checkout-native-invalid-field:focus{box-shadow:0 0 0 1.5px var(--co-alert)}
body.sst-co-ab.sst-co-v-b .woocommerce-validated input.input-text{border-color:var(--co-ok-pill-rule)}

body.sst-co-ab.sst-co-v-b .sst-checkout-required-notice{
	margin:0 0 14px;
	padding:12px 14px;
	background:var(--co-alert-tint);
	border:1px solid var(--co-alert-rule);
	border-radius:var(--co-radius-input);
	color:var(--co-alert);
	font-size:var(--co-fs-body-s);
	line-height:1.5;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-required-notice strong{display:block;font-weight:700}
body.sst-co-ab.sst-co-v-b .sst-checkout-required-notice span{display:block;margin-top:3px;color:var(--co-mute)}
body.sst-co-ab.sst-co-v-b .sst-checkout-required-notice[hidden]{display:none}

/* ---- custom checkboxes + radios (any WC / ACF label markup) ----
   `.sst-check__input` is excluded everywhere: WS-2 ships a drawn
   `.sst-check__box` sibling for it, so that input must stay a bare, invisible,
   focusable control (see §14). */
body.sst-co-ab.sst-co-v-b input[type=checkbox]:not(.sst-check__input),
body.sst-co-ab.sst-co-v-b input[type=radio]:not(.input-radio){
	appearance:none;
	-webkit-appearance:none;
	flex:0 0 auto;
	position:relative;
	top:0;
	width:22px;
	height:22px;
	margin:1px 0 0;
	padding:0;
	background:#fff;
	border:1.5px solid var(--co-control);
	border-radius:6px;
	vertical-align:top;
	cursor:pointer;
	transition:background var(--co-t),border-color var(--co-t);
}
body.sst-co-ab.sst-co-v-b input[type=radio]:not(.input-radio){width:20px;height:20px;border-radius:50%}
body.sst-co-ab.sst-co-v-b input[type=checkbox]:not(.sst-check__input):checked{
	background-color:var(--co-ink);
	border-color:var(--co-ink);
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath d='M1 4.6L4.3 8 11 1.2' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:center;
}
body.sst-co-ab.sst-co-v-b input[type=radio]:not(.input-radio):checked{
	border-color:var(--co-ink);
	background-image:radial-gradient(circle at 50% 50%,var(--co-ink) 0 5px,rgba(0,0,0,0) 5.5px);
}
body.sst-co-ab.sst-co-v-b input[type=checkbox]:not(.sst-check__input):hover,
body.sst-co-ab.sst-co-v-b input[type=radio]:not(.input-radio):hover{border-color:var(--co-mute-2)}
body.sst-co-ab.sst-co-v-b input[type=checkbox]:not(.sst-check__input):disabled,
body.sst-co-ab.sst-co-v-b input[type=radio]:not(.input-radio):disabled{
	background-color:var(--co-field-off);
	border-color:var(--co-rule);
	cursor:not-allowed;
}

body.sst-co-ab.sst-co-v-b label.checkbox,
body.sst-co-ab.sst-co-v-b label.woocommerce-form__label-for-checkbox{
	display:flex;
	gap:11px;
	align-items:flex-start;
	margin:0;
	font-size:14px;
	font-weight:400;
	line-height:1.5;
	letter-spacing:0;
	color:var(--co-ink);
	cursor:pointer;
	text-transform:none;
}
body.sst-co-ab.sst-co-v-b label.checkbox > span:not(.sst-check__box),
body.sst-co-ab.sst-co-v-b label.woocommerce-form__label-for-checkbox > span:not(.sst-check__box){
	flex:1 1 auto;
	min-width:0;
	font-size:14px;
	font-weight:400;
	color:var(--co-ink);
	margin:0;
	letter-spacing:0;
}
body.sst-co-ab.sst-co-v-b label.checkbox a{
	color:var(--co-ink);
	text-decoration:underline;
	text-underline-offset:2px;
}
body.sst-co-ab.sst-co-v-b label.checkbox a:hover{text-decoration-thickness:2px}

/* newsletter opt-in / ship-to-different-address / other stand-alone checkboxes */
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields h3#ship-to-different-address,
body.sst-co-ab.sst-co-v-b .form-row.sst-co-checkbox-row{
	margin:0;
	padding:14px;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-input);
	font-size:14px;
	font-weight:400;
}
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields h3#ship-to-different-address label span{font-weight:650}
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-fields .shipping_address{margin-top:16px}

/* ============================================================================
   4. BUTTONS — 3-tier system (DESIGN §4)
   Primary = solid black (only the pay button, which then takes the gateway
   colour). Secondary = black outline. Tertiary = text link.
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .button,
body.sst-co-ab.sst-co-v-b button.button,
body.sst-co-ab.sst-co-v-b input.button,
body.sst-co-ab.sst-co-v-b a.button,
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice .button,
body.sst-co-ab.sst-co-v-b .sst-express-checkout__edit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:46px;
	padding:0 18px;
	background:#fff;
	border:1px solid var(--co-primary);
	border-radius:var(--co-radius-input);
	box-shadow:none;
	color:var(--co-primary);
	font-family:var(--co-font);
	font-size:14.5px;
	font-weight:700;
	line-height:1;
	letter-spacing:-.005em;
	text-decoration:none;
	text-transform:none;
	white-space:nowrap;
	cursor:pointer;
	transition:background var(--co-t),color var(--co-t),border-color var(--co-t),box-shadow var(--co-t),transform .1s;
}
body.sst-co-ab.sst-co-v-b .button:hover,
body.sst-co-ab.sst-co-v-b .sst-express-checkout__edit:hover{
	background:var(--co-secondary-hover);
	color:var(--co-primary);
}
body.sst-co-ab.sst-co-v-b .button:active{transform:translateY(1px)}
/* disabled = an inactive component: WCAG 1.4.11 exempts it, and the light
   edge is part of how "disabled" reads. Stays on --co-rule-strong. */
body.sst-co-ab.sst-co-v-b .button:disabled,
body.sst-co-ab.sst-co-v-b .button[disabled],
body.sst-co-ab.sst-co-v-b .button[aria-disabled=true]{
	background:var(--co-field-off);
	border-color:var(--co-rule-strong);
	color:var(--co-mute-2);
	cursor:not-allowed;
	transform:none;
	opacity:1;
}

/* compact secondary */
body.sst-co-ab.sst-co-v-b .sst-account-coupons__guest-actions .button,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control .button,
body.sst-co-ab.sst-co-v-b .shipping-calculator-button,
body.sst-co-ab.sst-co-v-b .sst-consent__notes .button,
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice .button,
body.sst-co-ab.sst-co-v-b .sst-express-checkout__edit{
	height:38px;
	padding:0 14px;
	font-size:var(--co-fs-body-s);
}

/* The promotion-policy notice's CTA — "Create account or log in on My Account",
   the longest button label in the checkout, printed by the mu-plugin on both the
   cart and the checkout.

   0.2.3 (D2): the blanket above is `white-space:nowrap; height:46px`, so this
   anchor's min-content width WAS its full 300 px. On the CART it sits inside
   `.cart_totals` (20 px of padding) inside `div.woocommerce`, which §24 lays out
   as a single grid column with an `auto` track: the track was sized to
   300 + 2x20 = 342 px, every sibling in it (the notices wrapper, the cart form,
   the collaterals) stretched to 342 px with it, and the document's minimum
   content width became 354 px. Mobile Chrome uses that as the layout viewport,
   so a 320 px phone laid the cart out at 354 px and scrolled sideways; on
   checkout the same anchor (in the consent card, a narrower box) produced 333 px.
   Letting the label wrap drops its min-content to one word. `height:auto` +
   `min-height` keeps the 44 px touch target on two lines.

   Ranked above BOTH the blanket (0,3,2) and the compact-secondary block above
   (0,4,1) via the `.woocommerce` step, so it does not depend on source order. */
body.sst-co-ab.sst-co-v-b .sst-promotion-policy-account-notice .button,
body.sst-co-ab.sst-co-v-b .woocommerce .sst-promotion-policy-account-notice a.button{
	max-width:100%;
	height:auto;
	min-height:44px;
	padding:10px 16px;
	font-size:var(--co-fs-body-s);
	line-height:1.35;
	text-align:center;
	white-space:normal;
}

/* P1-5 (B side) — the CTA is a BLOCK, never a word in a sentence.
   Today the mu-plugin prints it inside the last policy sentence, so at >=768
   the words "them on this order." wrap around and below the button box on a
   different baseline, and the bordered button lands ~20 px above the black
   primary — two adjacent "press me" targets at the decision point (cart F2,
   checkout D2-1). WS-2 owns lifting it out of the paragraph; this side owns
   the weight and the separation, and both halves are written so they hold
   whether the node stays a `<p>` or becomes WS-2's own wrapper:

   * the notice is a block with real space above and BELOW it, so the gap to
     the primary exists no matter which element follows it;
   * the button is a full-width secondary on its own line — it can never sit
     beside the sentence again, and it can never out-weigh the primary
     (P1-7: exactly one primary per viewport);
   * `float:none` because the mu-plugin's own stylesheet floats it at >=768.

   NB a mu-plugin `<style id="sst-checkout-cta-hierarchy">` already forces this
   anchor to white / #111 / 1 px border with `!important` — but only under
   `.woocommerce-checkout`. On the CART nothing forces it, so §4's outline tier
   is what makes the two pages agree. Do not "simplify" this to rely on either
   one alone.
   -> re-verify against NOTES-WS2 §14 when the standalone block lands. */
body.sst-co-ab.sst-co-v-b .sst-promotion-policy-account-notice,
body.sst-co-ab.sst-co-v-b .sst-consent .sst-promotion-policy-account-notice,
body.sst-co-ab.sst-co-v-b .sst-consent__notes .sst-promotion-policy-account-notice,
body.sst-co-ab.sst-co-v-b .sst-cart-totals .sst-promotion-policy-account-notice,
body.sst-co-ab.sst-co-v-b .wc-proceed-to-checkout .sst-promotion-policy-account-notice{
	display:block;
	float:none;
	clear:both;
	margin:14px 0 18px;
	padding:0;
	background:none;
	border:0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	line-height:1.5;
	text-align:left;
}
body.sst-co-ab.sst-co-v-b .sst-promotion-policy-account-notice > .button,
body.sst-co-ab.sst-co-v-b .woocommerce .sst-promotion-policy-account-notice > a.button{
	display:flex;
	float:none;
	width:100%;
	margin:10px 0 0;
}

/* tertiary text links */
body.sst-co-ab.sst-co-v-b .button.sst-button-secondary,
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__remove,
body.sst-co-ab.sst-co-v-b .woocommerce-remove-coupon,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__applied button,
body.sst-co-ab.sst-co-v-b .woocommerce-form-login-toggle .showlogin,
body.sst-co-ab.sst-co-v-b .woocommerce-form-coupon-toggle .showcoupon,
body.sst-co-ab.sst-co-v-b .sst-co-link{
	display:inline;
	height:auto;
	padding:0;
	background:none;
	border:0;
	box-shadow:none;
	color:var(--co-mute);
	font-family:var(--co-font);
	font-size:var(--co-fs-small);
	font-weight:600;
	line-height:inherit;
	text-decoration:underline;
	text-underline-offset:3px;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .button.sst-button-secondary{font-size:var(--co-fs-body-s)}
body.sst-co-ab.sst-co-v-b .button.sst-button-secondary:hover,
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__remove:hover,
body.sst-co-ab.sst-co-v-b .woocommerce-remove-coupon:hover,
body.sst-co-ab.sst-co-v-b .sst-co-link:hover{
	background:none;
	color:var(--co-ink);
	text-decoration-thickness:2px;
}

/* the account login form keeps an ink-filled submit */
body.sst-co-ab.sst-co-v-b form.woocommerce-form-login button[name=login]{
	background:var(--co-primary);
	border-color:var(--co-primary);
	color:var(--co-primary-ink);
}
body.sst-co-ab.sst-co-v-b form.woocommerce-form-login button[name=login]:hover{
	background:var(--co-primary-hover);
	color:var(--co-primary-ink);
}

body.sst-co-ab.sst-co-v-b form.checkout a:not(.button):not(.sst-co-link),
body.sst-co-ab.sst-co-v-b .sst-consent a:not(.button){
	color:var(--co-ink);
	text-underline-offset:2px;
}

/* ============================================================================
   5. BADGES / PILLS
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-pm__badge,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__head > span,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__head > span,
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__optional,
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__status{
	display:inline-flex;
	align-items:center;
	gap:5px;
	padding:3px 10px;
	border:1px solid transparent;
	border-radius:999px;
	font-size:var(--co-fs-micro);
	font-weight:700;
	font-style:normal;
	letter-spacing:.01em;
	line-height:1.5;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b .sst-pm__badge[data-kind=recommended]{
	background:var(--co-wise-accent);
	border-color:var(--co-wise-accent);
	color:var(--co-wise);
}
body.sst-co-ab.sst-co-v-b .sst-pm__badge[data-kind=nofee]{
	background:#fff;
	border-color:var(--co-ok-pill-rule);
	color:var(--co-ok);
}
body.sst-co-ab.sst-co-v-b .sst-pm__badge[data-kind=fee]{
	background:var(--co-paypal-tint);
	border-color:var(--co-paypal-rule);
	color:var(--co-paypal);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__head > span,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__head > span,
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__optional{
	background:var(--co-bg);
	border-color:var(--co-rule);
	color:var(--co-mute);
	font-size:var(--co-fs-eyebrow);
	font-weight:800;
	letter-spacing:.1em;
	text-transform:uppercase;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__status{
	background:var(--co-ok-tint);
	border-color:var(--co-ok-rule);
	color:var(--co-ok);
}

/* ============================================================================
   6. NOTICES
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .woocommerce-notices-wrapper{margin:0}
body.sst-co-ab.sst-co-v-b .woocommerce-error,
body.sst-co-ab.sst-co-v-b .woocommerce-message,
body.sst-co-ab.sst-co-v-b .woocommerce-info{
	margin:0 0 var(--co-gap);
	padding:12px 14px;
	background:var(--co-card);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-input);
	box-shadow:var(--co-shadow);
	color:var(--co-ink);
	font-size:var(--co-fs-body-s);
	line-height:1.5;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .woocommerce-error::before,
body.sst-co-ab.sst-co-v-b .woocommerce-message::before,
body.sst-co-ab.sst-co-v-b .woocommerce-info::before{display:none}
body.sst-co-ab.sst-co-v-b .woocommerce-error{
	background:var(--co-alert-tint);
	border-color:var(--co-alert-rule);
	color:var(--co-alert);
}
body.sst-co-ab.sst-co-v-b .woocommerce-error li{margin:0 0 4px;padding:0;list-style:none}
body.sst-co-ab.sst-co-v-b .woocommerce-error li:last-child{margin:0}
body.sst-co-ab.sst-co-v-b .woocommerce-message{
	background:var(--co-ok-tint);
	border-color:var(--co-ok-rule);
	color:var(--co-ok);
}
body.sst-co-ab.sst-co-v-b .woocommerce-error .button,
body.sst-co-ab.sst-co-v-b .woocommerce-message .button{
	height:34px;
	margin-left:10px;
	padding:0 12px;
	font-size:13px;
}
body.sst-co-ab.sst-co-v-b .blockUI.blockOverlay{background:rgba(244,244,241,.6)!important}

/* ============================================================================
   7. ACCOUNT BENEFITS + "Create account?" radios (ACF)
   section.sst-account-required-notice > strong / span / em / small /
   fieldset.sst-account-choice > legend + label.sst-account-choice__option
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .woocommerce-account-fields > .form-row.create-account{margin-bottom:0}
body.sst-co-ab.sst-co-v-b .woocommerce-account-fields > .create-account{margin-top:16px}
body.sst-co-ab.sst-co-v-b .woocommerce-account-fields > .create-account[hidden]{display:none}

body.sst-co-ab.sst-co-v-b .sst-account-required-notice{
	display:block;
	margin:0;
	padding:0;
	background:none;
	border:0;
}
body.sst-co-ab.sst-co-v-b .sst-account-required-notice > span,
body.sst-co-ab.sst-co-v-b .sst-account-required-notice > em,
body.sst-co-ab.sst-co-v-b .sst-account-required-notice > small{
	display:block;
	margin-top:6px;
	font-size:var(--co-fs-body-s);
	font-style:normal;
	font-weight:400;
	line-height:1.5;
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-account-required-notice > small{
	font-size:var(--co-fs-small);
	color:var(--co-mute-2);
}

body.sst-co-ab.sst-co-v-b .sst-account-choice{
	margin:16px 0 0;
	padding:0;
	border:0;
}
body.sst-co-ab.sst-co-v-b .sst-account-choice > legend{
	display:block;
	float:none;
	width:100%;
	margin:0 0 8px;
	padding:0;
	font-size:var(--co-fs-small);
	font-weight:700;
	letter-spacing:.01em;
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-account-choice > legend .required{color:var(--co-mute-2)}

body.sst-co-ab.sst-co-v-b .sst-account-choice__option{
	display:flex;
	gap:11px;
	align-items:flex-start;
	margin:0 0 10px;
	padding:13px 14px;
	background:var(--co-field);
	border:1px solid var(--co-control);
	border-radius:var(--co-radius-input);
	font-size:14px;
	cursor:pointer;
	transition:border-color var(--co-t),background var(--co-t),box-shadow var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-account-choice__option:hover{border-color:var(--co-mute-2)}
body.sst-co-ab.sst-co-v-b .sst-account-choice__option:has(input:checked){
	background:#fff;
	border-color:var(--co-ink);
	box-shadow:inset 0 0 0 1px var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-account-choice__option > span{
	flex:1 1 auto;
	min-width:0;
}
body.sst-co-ab.sst-co-v-b .sst-account-choice__option b{
	display:block;
	font-size:14px;
	font-weight:700;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-account-choice__option small{
	display:block;
	margin-top:2px;
	font-size:var(--co-fs-small);
	font-weight:400;
	line-height:1.45;
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-account-choice__error{
	margin:0;
	font-size:var(--co-fs-small);
	color:var(--co-alert);
}
body.sst-co-ab.sst-co-v-b .sst-account-choice:not(.sst-checkout-native-invalid) .sst-account-choice__error{display:none}
body.sst-co-ab.sst-co-v-b .sst-account-choice.sst-checkout-native-invalid .sst-account-choice__option{border-color:var(--co-alert)}

/* ============================================================================
   8. BUSINESS / CUSTOMS ACCORDION (native <details>, ACF)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details{
	margin:16px 0 0;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-input);
	overflow:hidden;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary{
	display:block;
	padding:14px;
	list-style:none;
	cursor:pointer;
	transition:background var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary::-webkit-details-marker{display:none}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary:hover{background:#fff}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary-main{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary-copy{display:block;min-width:0}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary-copy strong{
	display:block;
	font-size:var(--co-fs-body);
	font-weight:700;
	letter-spacing:-.01em;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary-copy em{
	display:block;
	margin-top:3px;
	font-size:var(--co-fs-small);
	font-style:normal;
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__status{margin-top:8px}
/* "Add optional details" — checkout D2-4 / member_checkout MC-14.
   ACF's account-checkout.css already builds this as a pill:
     .sst-checkout-business-details__toggle
       { min-height:44px; border:1px solid var(--sst-checkout-line);
         border-radius:6px; background:#fff; padding:0 14px; line-height:1 }
   and this skin used to answer with `padding:0` + `text-decoration:underline`,
   which produced BOTH at once: a bordered 44 px box with zero horizontal
   padding (label touching the left border, chevron poking the right one) and
   an underline running along the box's bottom edge. Measured at 320/390/768/
   1280/1440: padding 0px, border 1px #CFD4DA, text-decoration underline,
   line-height 13.5px. The reviews read it as "the only obviously-unfinished
   control in the skin".

   Resolution: keep the box (it is a real 44 px disclosure target that A and C
   both have) and make it variant B's SECONDARY button — ink hairline, no
   underline, chevron inside the padding. */
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__toggle{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-top:11px;
	padding:0 14px;
	min-height:44px;
	background:#fff;
	border:1px solid var(--co-primary);
	border-radius:var(--co-radius-input);
	color:var(--co-primary);
	font-size:var(--co-fs-body-s);
	font-weight:700;
	line-height:1.2;
	text-decoration:none;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary:hover .sst-checkout-business-details__toggle,
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__toggle:hover{
	background:var(--co-secondary-hover);
	border-color:var(--co-primary);
	color:var(--co-primary);
}
/* ACF turns the OPEN state solid #111. That would be a second solid-black
   block in the same viewport as the pay CTA (P1-7's rule: exactly one primary
   per viewport), so B's open state is the tinted secondary instead. */
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details[open] .sst-checkout-business-details__toggle{
	background:var(--co-secondary-hover);
	border-color:var(--co-primary);
	color:var(--co-primary);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__toggle-label{display:none}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details:not([open]):not(.sst-checkout-business-details--has-values) .sst-checkout-business-details__toggle-label--add,
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details:not([open]).sst-checkout-business-details--has-values .sst-checkout-business-details__toggle-label--edit,
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details[open] .sst-checkout-business-details__toggle-label--hide{display:inline}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__chevron{
	width:9px;
	height:9px;
	border-right:1.8px solid currentColor;
	border-bottom:1.8px solid currentColor;
	transform:rotate(45deg) translate(-1px,-1px);
	transition:transform var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details[open] .sst-checkout-business-details__chevron{
	transform:rotate(-135deg) translate(-2px,-2px);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__grid{
	padding:2px 14px 16px;
	background:#fff;
	border-top:1px solid var(--co-rule);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__grid .form-row{margin-top:14px;margin-bottom:0}
body.sst-co-ab.sst-co-v-b .sst-business-field--sst_invoice_customs_notes textarea{min-height:76px}

/* ============================================================================
   9. COUNTRY CLEARANCE (extra customs fields, ACF)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-country-clearance[hidden],
body.sst-co-ab.sst-co-v-b .sst-country-clearance__country[hidden]{display:none}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__head{margin:0 0 16px}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__head p{
	margin:6px 0 0;
	font-size:var(--co-fs-body-s);
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__country{
	margin-top:16px;
	padding-top:16px;
	border-top:1px solid var(--co-rule);
}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__selected{
	display:block;
	margin-bottom:4px;
	font-size:var(--co-fs-eyebrow);
	font-weight:800;
	letter-spacing:.13em;
	text-transform:uppercase;
	color:var(--co-mute-2);
}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__country-head h4{
	margin:0;
	font-size:var(--co-fs-body);
	font-weight:700;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__country-head p{
	margin:6px 0 0;
	font-size:var(--co-fs-small);
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__notice{
	margin-top:10px!important;
	padding:9px 12px;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-sm);
	color:var(--co-mute-2)!important;
}
body.sst-co-ab.sst-co-v-b .sst-country-clearance__grid{margin-top:14px}
body.sst-co-ab.sst-co-v-b .sst-clearance-field--inactive{display:none}

/* ============================================================================
   10. ORDER REVIEW TABLE

   THE FOOTER IS BLOCKS, THE ITEM ROWS ARE STILL A TABLE. That split is not a
   style preference — it is what makes base CSS section 1c work.

   WHY (measured 2026-08-21, on the production member DOM
   review2-evidence/dom/checkout_1753_B.html). samurai-fedex-shipping appends a
   `.samurai-fedex-package-ui` block to every rate <li>, and base 1c stacks the
   whole rate row with `display:flex; flex-direction:column` on
   `tr.woocommerce-shipping-totals:has(ul#shipping_method)`. Inside a real
   `display:table` a flex <tr> is no longer a row: CSS anonymous-table fixup
   wraps it in an anonymous table-CELL, that single cell lands in COLUMN 1, and
   the row inherits a column width instead of the rail. Measured with the
   deployed skin: rate row 250px of a 324px rail at 390, 596/670 at 768,
   276/350 at 1440 — and the same squeeze hit the two meter rows.
   `width:100%` on the row cannot help: it resolves against that same cell.
   Making the TABLE a block removes the anonymous fixup, so base 1c's flex row
   has the rail as its containing block and spans it. Same trap, same fix as the
   cart totals table in section 21.3.

   WHY tbody STAYS A TABLE. Below 768px WooCommerce's own
   woocommerce-smallscreen.css stacks the item cells and gives them width:100%.
   With a blocked tbody + flex item rows that collapses `.product-name` to 0 and
   the line total eats the row (measured on the member DOM at 390: name 0px,
   total 324px). `> tbody{display:table;width:100%}` keeps the item rows byte
   -for-byte the layout they have today, at full rail width, and confines the
   change to the footer.

   COMPOSING WITH BASE 1c. Base wins at (2,2,3)/(2,2,4) and is not fought: the
   generic `tfoot > tr` rule below is (0,3,4), so as soon as rate options exist
   base 1c's column stack takes over the row and its th/td. With NO rates the
   `:has()` does not match and the skin's own block+float treatment renders the
   "Shipment - Enter your address to view shipping options." state unchanged.
   The three stacked row shapes (shipping, bulk meter, rank meter) are re-scoped
   through `> tfoot >` to (0,4,4) so they still out-rank the generic flex row.

   Row/column semantics in the footer: the same trade WooCommerce's own
   `shop_table_responsive` makes below 768px. Every label still precedes its
   value in reading order.
   ========================================================================= */
body.sst-co-ab.sst-co-v-b #order_review_heading{margin:0 0 var(--co-gap)}

/* Only the FOOTER leaves the table. `tbody` is re-declared `display:table` so
   the item rows keep their own two-column table — including WooCommerce's
   smallscreen stack below 768px, which is what the store looks like today. */
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table{
	display:block;
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	font-size:var(--co-fs-body-s);
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tbody{
	display:table;
	width:100%;
	border-collapse:separate;
	border-spacing:0;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot{
	display:block;
	width:100%;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > thead{display:none}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table th,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table td{
	padding:0;
	background:none;
	border:0;
	font-weight:400;
	vertical-align:top;
}

/* ---- item rows — UNCHANGED table cells.
   Deliberately not converted to flex: at <=768 WooCommerce's own
   woocommerce-smallscreen.css stacks these cells and gives them width:100%, so
   a flex row collapses `.product-name` to 0 and the line total eats the row
   (measured on the member DOM at 390: name 0px, total 324px). The footer is the
   only part that has to leave the table.
   Scoped through the review table because the CART page's rows also carry
   `.cart_item`: an unscoped `tr.cart_item` rule ties (0,3,1) with the base's
   `.sst-cart-item` grid and, since this file loads last, would flatten it. */
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tr.cart_item td{padding:0 0 14px}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tr.cart_item:last-child td{padding-bottom:0}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tr.cart_item td.product-name{width:100%}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tr.cart_item td.product-total{
	padding-left:12px;
	text-align:right;
	white-space:nowrap;
}

body.sst-co-ab.sst-co-v-b .sst-checkout-order-item{
	display:grid;
	grid-template-columns:56px minmax(0,1fr);
	gap:12px;
	align-items:start;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-order-item--no-thumb{grid-template-columns:minmax(0,1fr)}
body.sst-co-ab.sst-co-v-b .sst-checkout-order-item__thumb{
	width:56px;
	height:56px;
	overflow:hidden;
	background:var(--co-thumb);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-sm);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-order-item__image{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:0;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-order-item__body{display:block;min-width:0}
body.sst-co-ab.sst-co-v-b .sst-checkout-order-item__name{
	display:block;
	font-size:var(--co-fs-body-s);
	font-weight:650;
	line-height:1.35;
	letter-spacing:-.01em;
	color:var(--co-ink);
}

/* qty stepper + purchase limit + Remove */
body.sst-co-ab.sst-co-v-b .product-quantity.sst-checkout-cart-qty{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px;
	margin:8px 0 0 68px;
	font-weight:400;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-order-item--no-thumb + .sst-checkout-cart-qty{margin-left:0}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__control{
	order:1;
	display:inline-flex;
	align-items:center;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--co-control);
	border-radius:var(--co-radius-sm);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__step{
	width:30px;
	height:30px;
	padding:0;
	background:none;
	border:0;
	color:var(--co-ink);
	font-family:var(--co-font);
	font-size:15px;
	font-weight:700;
	line-height:1;
	cursor:pointer;
	transition:background var(--co-t),color var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__step:hover:not(:disabled){background:var(--co-bg)}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__step:disabled,
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__step.is-at-max{color:#BFC0B8;cursor:not-allowed}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__input{
	width:40px;
	min-width:0;
	height:30px;
	padding:0;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	color:var(--co-ink);
	font-size:var(--co-fs-body-s);
	font-weight:700;
	text-align:center;
	appearance:textfield;
	-moz-appearance:textfield;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__input:focus{
	background:none;
	box-shadow:none;
	outline:2px solid var(--co-ink);
	outline-offset:-2px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__input::-webkit-outer-spin-button,
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__limit{
	order:2;
	font-size:var(--co-fs-micro);
	color:var(--co-mute-2);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__remove{order:3}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__status{
	order:4;
	flex:1 0 100%;
	font-size:var(--co-fs-small);
	color:var(--co-mute-2);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__status.is-error{color:var(--co-alert)}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__status.is-success{color:var(--co-ok)}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__status[hidden]{display:none}
body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty.is-loading{opacity:.55}

/* line total */
body.sst-co-ab.sst-co-v-b .sst-checkout-line-subtotal{display:block}
body.sst-co-ab.sst-co-v-b .sst-checkout-line-subtotal__amount{
	display:block;
	font-size:14px;
	font-weight:700;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-line-subtotal__formula{
	display:block;
	margin-top:3px;
	font-size:var(--co-fs-small);
	font-weight:400;
	color:var(--co-mute-2);
}

/* ---- totals ----
   Generic label/value row. Specificity (0,3,4): base 1c's rate row (2,2,3) and
   the skin's own block rows below both out-rank it, which is exactly how the
   three shapes coexist. */
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:0 14px;
	width:100%;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tfoot th,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tfoot td{
	display:block;
	flex:0 1 auto;
	min-width:0;
	padding:11px 0 0;
	font-size:var(--co-fs-body-s);
	line-height:1.45;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tfoot th{
	padding-right:14px;
	color:var(--co-mute);
	font-weight:400;
	text-align:left;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table tfoot td{
	color:var(--co-ink);
	font-weight:650;
	text-align:right;
}
/* The hairline goes on the ROW: on a flex row a border split across th and td
   would render as two segments with the flex gap showing through. */
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr:first-child{
	padding-top:5px;
	border-top:1px solid var(--co-rule);
}

body.sst-co-ab.sst-co-v-b tr.cart-discount th,
body.sst-co-ab.sst-co-v-b tr.cart-discount td{color:var(--co-ok)}
body.sst-co-ab.sst-co-v-b tr.cart-discount td{font-weight:700}

/* PayPal surcharge row — THE STAMP IS THE ONLY SELECTOR (REVIEW-CO-4 H-1).
   `checkout-ab.js:208` stamps `data-sst-fee="paypal"` on exactly the surcharge
   row on every `updated_checkout`, and clears it from every other row. This
   block used to carry a second selector,

     #order_review:has(.place-order[data-sst-gateway="ppcp-gateway"]) tr.fee td

   as a belt-and-braces fallback for a stamp that might not arrive — and because
   `tr.fee` also matches the two IMPORT-CHARGE rows, it painted the DDP and MPF
   **amounts** PayPal-navy whenever PayPal was selected. Measured at 1440 on the
   real three-fee rail: DDP `th #565952 / td #003087`, MPF the same, i.e. every
   fee value navy while only the labels stayed muted. On the page whose whole
   job is to stop ¥6,750 of import duty reading as part of a ¥3,329 PayPal
   surcharge (S1-8 / PP-01), that is the original defect in a new form.

   A fallback that cannot tell the surcharge from a customs charge is worse than
   no fallback: if the stamp ever stops arriving the correct outcome is "no row
   is tinted", not "all three are". Never re-add a position- or state-based
   selector here — the order of the three `tr.fee` rows depends on the
   destination country (NOTES-WS2 §14.2).

   Label AND value, so the row reads as one object. */
body.sst-co-ab.sst-co-v-b tr.fee[data-sst-fee=paypal] th,
body.sst-co-ab.sst-co-v-b tr.fee[data-sst-fee=paypal] td{
	color:var(--co-paypal);
}
body.sst-co-ab.sst-co-v-b tr.fee[data-sst-fee=paypal] td{
	font-weight:700;
}

body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.order-total{
	padding-top:5px;
	border-top:1px solid var(--co-rule);
}
body.sst-co-ab.sst-co-v-b tr.order-total th,
body.sst-co-ab.sst-co-v-b tr.order-total td{
	color:var(--co-ink);
	font-size:19px;
	font-weight:800;
	letter-spacing:-.02em;
}
body.sst-co-ab.sst-co-v-b tr.order-total td strong{font-weight:800}

/* shipping row, NO rates yet ("Shipment - Enter your address to view shipping
   options."). Re-scoped through `> tfoot >` so it out-ranks the generic flex
   row at (0,4,4) vs (0,3,4). When rates DO exist, base 1c's
   `:has(ul#shipping_method)` rule at (2,2,3) out-ranks this in turn and the row
   becomes the full-width column stack.

   0.2.3 (D3): this used to be `display:block` with a FLOATED label, and ACF
   took it apart. `account-checkout.css` prints
     body.woocommerce-checkout .woocommerce-checkout-review-order-table
       tr.woocommerce-shipping-totals.shipping th, … td{display:block;width:100%;text-align:left}
   at (0,4,3) — above the (0,3,3) `tr.woocommerce-shipping-totals th/td` rules
   below. So the floated label was given `width:100%`, ran the FULL rail, pushed
   the note onto its own line and lost its right alignment (ACF's
   `text-align:left` won too, and its `padding-top:0` on the td). Because a float
   is out of flow the note's BORDER BOX also started level with the label's, which
   is what the device matrix reported as a "Shipment × Enter your address"
   overlap at 1024/1280/1440/1920 (the text itself never overlapped — it was
   stacked). The row is now the same flex label/value pair as every other totals
   row, restated at (0,4,4) so ACF cannot reach `width`, `text-align` or
   `padding`, and there is no out-of-flow box left to overlap anything. */
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.woocommerce-shipping-totals{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:0 14px;
	width:100%;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.woocommerce-shipping-totals > th{
	flex:0 0 auto;
	float:none;
	width:auto;
	padding:11px 0 0;
	text-align:left;
}
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.woocommerce-shipping-totals > td{
	flex:1 1 auto;
	float:none;
	width:auto;
	min-width:0;
	padding:11px 0 0;
	text-align:right;
}
body.sst-co-ab.sst-co-v-b tr.woocommerce-shipping-totals th{
	display:block;
	float:left;
	padding:11px 14px 0 0;
	border-top:0;
}
body.sst-co-ab.sst-co-v-b tr.woocommerce-shipping-totals td{
	display:block;
	padding:11px 0 0;
	border-top:0;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	font-weight:400;
	line-height:1.45;
	text-align:right;
}
body.sst-co-ab.sst-co-v-b ul#shipping_method,
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-methods{
	clear:both;
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:8px 0 0;
	padding:0;
	list-style:none;
	text-align:left;
}
body.sst-co-ab.sst-co-v-b ul#shipping_method[hidden],
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-methods[hidden]{display:none}
body.sst-co-ab.sst-co-v-b ul#shipping_method li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:0;
	padding:10px 12px;
	background:var(--co-field);
	border:1px solid var(--co-control);
	border-radius:var(--co-radius-input);
	list-style:none;
}
body.sst-co-ab.sst-co-v-b ul#shipping_method li:has(input:checked){
	background:#fff;
	border-color:var(--co-ink);
	box-shadow:inset 0 0 0 1px var(--co-ink);
}
body.sst-co-ab.sst-co-v-b ul#shipping_method label{
	margin:0;
	color:var(--co-ink);
	font-size:var(--co-fs-body-s);
	font-weight:600;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .woocommerce-shipping-destination{
	clear:both;
	display:block;
	margin-top:8px;
	font-size:var(--co-fs-small);
	color:var(--co-mute-2);
}

/* meter rows: bulk next tier + rank gauge (+ pre-order exclusion notice).
   Also re-scoped to out-rank the generic flex row — these three stack a floated
   label, a right-aligned value and a full-width meter, which flex cannot do. */
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-bulk-discount-next-tier,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-points-rank-gauge,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-bulk-discount-preorder-exclusion{display:block}
body.sst-co-ab.sst-co-v-b tr.sst-bulk-discount-next-tier th,
body.sst-co-ab.sst-co-v-b tr.sst-points-rank-gauge th,
body.sst-co-ab.sst-co-v-b tr.sst-bulk-discount-preorder-exclusion th{
	display:block;
	float:left;
	padding:11px 14px 0 0;
	border-top:0;
}
body.sst-co-ab.sst-co-v-b tr.sst-bulk-discount-next-tier td,
body.sst-co-ab.sst-co-v-b tr.sst-points-rank-gauge td,
body.sst-co-ab.sst-co-v-b tr.sst-bulk-discount-preorder-exclusion td{
	display:block;
	padding:11px 0 0;
	border-top:0;
	text-align:right;
}
body.sst-co-ab.sst-co-v-b .sst-bulk-discount-next-tier__value{
	color:var(--co-ink);
	font-weight:650;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b .sst-points-rank-gauge__copy,
body.sst-co-ab.sst-co-v-b tr.sst-bulk-discount-preorder-exclusion td{
	display:inline-block;
	max-width:230px;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	font-weight:400;
	line-height:1.45;
	text-align:right;
}
body.sst-co-ab.sst-co-v-b .sst-points-rank-gauge__copy .woocommerce-Price-amount{
	color:var(--co-ink);
	font-weight:650;
}
/* THE TRACK IS SHARED GEOMETRY (P3-3). Both meters are `clear:both; width:100%`
   inside a block row, so they start at the same x and end at the same x at every
   width — the reviews measured A's and C's tracks taking their length from the
   text above them, which makes two meters in one card incomparable. Do not give
   either meter its own width, margin-left or grid-column.
   0.2.5: 4 px -> --co-meter-h (6 px) and a visible tint (§0), plus a bottom
   margin so the track can never sit ON a row rule and read as a border. */
body.sst-co-ab.sst-co-v-b .sst-bulk-discount-next-tier__meter,
body.sst-co-ab.sst-co-v-b .sst-points-rank-gauge__meter{
	clear:both;
	display:block;
	width:100%;
	height:var(--co-meter-h);
	margin:10px 0 2px;
	overflow:hidden;
	background:var(--co-meter);
	border-radius:999px;
}
body.sst-co-ab.sst-co-v-b .sst-bulk-discount-next-tier__meter > span,
body.sst-co-ab.sst-co-v-b .sst-points-rank-gauge__meter > span{
	display:block;
	height:100%;
	background:var(--co-wise);
	border-radius:inherit;
	transition:width .18s ease;
}

/* "Points you'll earn" row (cart today; harmless if it ever lands here) */
body.sst-co-ab.sst-co-v-b tr.sst-points-earn-preview td{font-weight:650}
body.sst-co-ab.sst-co-v-b .sst-points-earn-preview__note{font-weight:400;color:var(--co-mute-2)}

/* ---- 10b. THE REWARDS BLOCK (P3-3, on WS-2's P2-4 contract) ------------- *
   WS-2 now holds the bulk / rank / points rows back and re-emits them after
   the Total, tagged `sst-co-reward-row`, under a caption row:

     <tr class="sst-co-prepaid" data-sst-prepaid><td colspan=2>…</td></tr>
     <tr class="order-total">…</tr>
     <tr class="sst-co-rewards__head" data-sst-rewards-head><th colspan=2>Rewards</th></tr>
     <tr class="sst-co-reward-row sst-bulk-discount-next-tier">…</tr>
     <tr class="sst-co-reward-row sst-points-rank-gauge">…</tr>
     <tr class="sst-co-reward-row sst-points-earn-preview">…</tr>

   and its comment says "skins group them further". Being below the Total is
   what stops "you are ¥173,000 short of 0.2 %" reading as a charge
   (member_cart MC-04, checkout D3-2, checkout_rates F6); variant B's job is to
   make the group look like a panel rather than three orphan rows, so the money
   ledger visibly ends at the Total.

   The panel is drawn ROW BY ROW — every row is already a full-card flex/block
   box, so a shared tint plus a radius on the first and last row reads as one
   surface without adding a wrapper the DOM does not have. The rows keep their
   own layout (floated label, right-aligned value, full-width meter), so the
   two tracks still share one origin and one width (see the meter rules above).
   Both pages get this: the selectors are not table-scoped, exactly like the
   meter rules they sit next to.

   ONE SPECIFICITY NOTE, because it is easy to get wrong: the theme prints
     body.woocommerce-cart .cart_totals table.shop_table tr
       { display:table-row; border:0; padding:0 }        (0,3,3)
   so a plain `body.sst-co-ab.sst-co-v-b tr.sst-co-rewards__head` (0,3,1) ties
   on classes and LOSES on element count — measured: the tint and the radius
   landed, the padding silently did not. The padding therefore rides on the
   page-scoped selectors below (cart (0,5,2) / checkout (0,4,3)), the same
   re-scoping §12.2 needed for the checkout tfoot. */
body.sst-co-ab.sst-co-v-b tr.sst-co-rewards__head{
	margin-top:14px;
	background:var(--co-bg);
	border-radius:var(--co-radius-sm) var(--co-radius-sm) 0 0;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-co-rewards__head,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-co-rewards__head{
	padding:11px 12px 0;
}
body.sst-co-ab.sst-co-v-b tr.sst-co-rewards__head > th{
	float:none;
	padding:0;
	border:0;
	color:var(--co-mute-2);
	font-size:var(--co-fs-micro);
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b tr.sst-co-reward-row{
	background:var(--co-bg);
}
body.sst-co-ab.sst-co-v-b tr.sst-co-reward-row:last-child{
	border-radius:0 0 var(--co-radius-sm) var(--co-radius-sm);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-co-reward-row,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-co-reward-row{
	padding:0 12px;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-co-reward-row:last-child,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-co-reward-row:last-child{
	padding-bottom:12px;
}
/* the tint is the panel; a reward row must never also carry a money-row rule */
body.sst-co-ab.sst-co-v-b tr.sst-co-reward-row > th,
body.sst-co-ab.sst-co-v-b tr.sst-co-reward-row > td{border:0}
/* the meter track is tinted against the CARD; inside the panel it needs the
   same contrast against --co-bg, so it goes one step darker there. */
body.sst-co-ab.sst-co-v-b tr.sst-co-reward-row .sst-bulk-discount-next-tier__meter,
body.sst-co-ab.sst-co-v-b tr.sst-co-reward-row .sst-points-rank-gauge__meter{
	background:rgba(21,22,15,.16);
}

/* P2-4c — "US customs charges, prepaid…" sits under the DDP/MPF rows and is
   reassurance, not a money row: quiet, left-aligned, no separator of its own
   (checkout_rates F8). WS-2 gives it `text-align:left` + --co-mute; B takes it
   down one more step so it can never be mistaken for a charge.

   Scoped through the two tables for the same reason as the rewards panel: the
   money cells in both are already right-aligned and semi-bold at (0,4,2) /
   (0,4,4), so an unscoped (0,3,2) rule loses and the reassurance line renders
   bold and right-aligned — which is precisely what it must not look like.
   Measured before the re-scope: `font-weight 750`, `text-align right`. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-co-prepaid > td,
body.sst-co-ab.sst-co-v-b .woocommerce-checkout-review-order-table > tfoot > tr.sst-co-prepaid > td,
body.sst-co-ab.sst-co-v-b tr.sst-co-prepaid > td{
	padding-top:6px;
	border:0;
	color:var(--co-mute-2);
	font-size:var(--co-fs-micro);
	font-weight:400;
	line-height:1.45;
	text-align:left;
}

/* ============================================================================
   11. COUPON PANEL (ACF, woocommerce_review_order_before_payment prio 5)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__head,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:0 0 6px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__head h3,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__head h3{
	margin:0;
	color:var(--co-ink);
	font-size:var(--co-fs-body);
	font-weight:700;
	letter-spacing:-.012em;
	text-transform:none;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__account-required,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__account-prompt{
	margin:5px 0 0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	line-height:1.5;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__account-prompt{color:var(--co-mute-2)}

body.sst-co-ab.sst-co-v-b .sst-account-coupons__guest-actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 14px;
	margin-top:11px;
}

body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__saved{margin-top:12px}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__saved select{height:38px;padding:0 34px 0 12px;font-size:var(--co-fs-body-s)}

body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:8px;
	align-items:stretch;
	margin-top:11px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control .input-text{
	height:38px;
	padding:0 12px;
	font-size:var(--co-fs-body-s);
}
/* P1-7 — Apply is SECONDARY, never primary.
   Until 0.2.4 this filled the button with --co-primary, so on the member
   checkout (coupons unlocked) `Apply` was solid #111 at exactly the weight of
   `Place order`, and on the cart it matched `Proceed to checkout` — two
   visually-primary actions per viewport (cart F9, member_cart MC-06,
   DESIGN §4 maps Apply to the secondary tier). §4's blanket `.button` is
   already the outline tier, so this block now only restores the padding the
   grid wants and pins the secondary colours against source order. */
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control .button{
	background:#fff;
	border-color:var(--co-primary);
	color:var(--co-primary);
	padding:0 16px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control .button:hover:not(:disabled){
	background:var(--co-secondary-hover);
	color:var(--co-primary);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control .button:disabled,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control .button[aria-disabled=true]{
	background:var(--co-field-off);
	border-color:var(--co-rule-strong);
	color:var(--co-mute-2);
}

/* LOCKED (guest) IS NOT AN ERROR — checkout D2-2 / checkout_paypal PP-07.
   ACF's account-checkout.css paints the locked coupon field as a rejection on
   FIRST PAINT, before the guest has typed anything:

     .sst-checkout-coupon-panel.is-account-coupon-disabled
       .sst-checkout-coupon-panel__control input.input-text   (0,4,1)
       { border-color:#c7334c; background:#fff5f5; color:#8a1f36;
         box-shadow:0 0 0 1px rgba(199,51,76,.12) }
     …__account-prompt { background:#fff5f5; color:#8a1f36 }

   measured live at 390/768/1280/1440. A red field plus a pink alert sitting
   directly above the payment choice reads as "something is wrong with my
   order". Variant A already renders this state as plain muted text; B now does
   the same. Red stays reserved for a coupon the server actually rejected —
   `.sst-checkout-coupon-panel__status.is-error` above is untouched.

   Specificity: (0,6,2) / (0,6,1) through the two body classes, so it clears
   ACF's (0,4,1) without !important and without depending on load order. */
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel.is-account-coupon-disabled .sst-checkout-coupon-panel__control input.input-text{
	background:var(--co-field-off);
	border-color:var(--co-rule-strong);
	box-shadow:none;
	color:var(--co-mute-2);
	opacity:1;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel.is-account-coupon-disabled .sst-checkout-coupon-panel__control input.input-text::placeholder{color:var(--co-mute-2)}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel.is-account-coupon-disabled .sst-checkout-coupon-panel__account-prompt,
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel.is-account-coupon-disabled .sst-checkout-coupon-panel__account-required{
	background:none;
	color:var(--co-mute-2);
}

body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__status,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__status{
	margin-top:10px;
	padding:8px 10px;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-sm);
	color:var(--co-mute);
	font-size:var(--co-fs-small);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__status.is-success,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__status.is-success{
	background:var(--co-ok-tint);
	border-color:var(--co-ok-rule);
	color:var(--co-ok);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__status.is-error,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__status.is-error{
	background:var(--co-alert-tint);
	border-color:var(--co-alert-rule);
	color:var(--co-alert);
}
/* every block this skin gives an explicit `display` must still honour [hidden]
   (ACF and the points plugin toggle these panels by attribute).
   NB: `.sst-co-strip__body[hidden]` is deliberately NOT listed — the strip JS
   never removes that attribute, the `.is-open` class is what reveals it. */
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__status[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__status[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__applied[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__control[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__saved[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__head[hidden],
body.sst-co-ab.sst-co-v-b .sst-account-coupons__guest-actions[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__toggle[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel[hidden],
body.sst-co-ab.sst-co-v-b .sst-account-choice__option[hidden],
body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths[hidden],
body.sst-co-ab.sst-co-v-b .sst-saved-address-notice[hidden],
body.sst-co-ab.sst-co-v-b .sst-consent__notes[hidden],
body.sst-co-ab.sst-co-v-b .sst-co-strip__head[hidden]{display:none}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel.is-loading{opacity:.6}

body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__applied{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:10px 0 0;
	padding:0;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__applied li{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:5px 10px;
	background:var(--co-ok-tint);
	border:1px solid var(--co-ok-rule);
	border-radius:999px;
	color:var(--co-ok);
	font-size:var(--co-fs-small);
	font-weight:700;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__applied button{color:var(--co-ok)}
body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel__applied button:hover{color:var(--co-ink)}

/* ============================================================================
   12. POINTS PANEL (sst-points, before_payment prio 8)
   ========================================================================= */
/* guest nudge = the dashed "Create an account & get 500 pts" block from mock B.
   M-15: decorative — the box holds a <p>, not a control, so the dashed edge stays
   on --co-rule-strong. */
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel--guest{
	padding:12px 14px;
	background:var(--co-card);
	border:1px dashed var(--co-rule-strong);
	border-radius:var(--co-radius-input);
	box-shadow:none;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__guest{
	margin:0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	line-height:1.5;
}
body.sst-co-ab.sst-co-v-b .sst-points-earn-preview__inline{color:var(--co-ink);font-weight:700}

body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__earn{
	margin:6px 0 0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__toggle{
	display:flex;
	align-items:center;
	gap:11px;
	margin-top:12px;
	padding:12px 14px;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-input);
	font-size:14px;
	cursor:pointer;
	transition:border-color var(--co-t),background var(--co-t),box-shadow var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel.is-on .sst-checkout-points-panel__toggle{
	background:#fff;
	border-color:var(--co-ink);
	box-shadow:inset 0 0 0 1px var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__input{
	position:absolute;
	width:1px;
	height:1px;
	margin:0;
	padding:0;
	border:0;
	opacity:0;
	appearance:none;
	-webkit-appearance:none;
}
/* NOTE (M-15): this is the OFF fill of the points switch, not a boundary, so it
   stays on --co-rule-strong under the "colour-token change only" scope. It is
   still 1.52:1 against --co-field and 1.52:1 against its own white knob — the
   switch is hard to see when off. Flagged in NOTES-B-CONTRAST.md; changing it
   is a state-design call (off would become a mid-grey pill), not a rule fix. */
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__slider{
	position:relative;
	flex:0 0 auto;
	width:40px;
	height:22px;
	background:var(--co-rule-strong);
	border-radius:999px;
	transition:background var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__slider::after{
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:16px;
	height:16px;
	background:#fff;
	border-radius:50%;
	transition:transform var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__input:checked ~ .sst-checkout-points-panel__slider{background:var(--co-ink)}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__input:checked ~ .sst-checkout-points-panel__slider::after{transform:translateX(18px)}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__input:focus-visible ~ .sst-checkout-points-panel__slider{
	outline:2px solid var(--co-ink);
	outline-offset:2px;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__text{
	color:var(--co-ink);
	font-size:14px;
	font-weight:650;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__have,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__cap-note,
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__expiry-note{
	margin:8px 0 0;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	line-height:1.45;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel__have[hidden]{display:none}
body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel.is-loading{opacity:.6}

/* ============================================================================
   13. PAYMENT CARDS (.sst-pm — WS-2 payment-method.php)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-co-payhead{margin:0 0 12px}

body.sst-co-ab.sst-co-v-b ul.wc_payment_methods{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin:0 0 var(--co-gap);
	padding:0;
	background:none;
	border:0;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b li.wc_payment_method{
	position:relative;
	margin:0;
	padding:0;
	background:none;
	border:0;
	list-style:none;
	/* per-gateway brand triplet */
	--pm-brand:var(--co-ink);
	--pm-tint:#fff;
	--pm-on:#fff;
}
body.sst-co-ab.sst-co-v-b li.payment_method_samurai_wise{
	--pm-brand:var(--co-wise);
	--pm-tint:var(--co-wise-tint);
	--pm-on:var(--co-wise-accent);
}
body.sst-co-ab.sst-co-v-b li.payment_method_ppcp-gateway{
	--pm-brand:var(--co-paypal);
	--pm-tint:var(--co-paypal-tint);
	--pm-on:#fff;
}

/* the native radio keeps its place in the tab order but is never seen */
body.sst-co-ab.sst-co-v-b li.wc_payment_method > input.input-radio,
body.sst-co-ab.sst-co-v-b .sst-pm__radio{
	position:absolute;
	top:20px;
	left:20px;
	width:1px;
	height:1px;
	margin:0;
	padding:0;
	border:0;
	opacity:0;
	appearance:none;
	-webkit-appearance:none;
	z-index:1;
}
/* the gateway's own payment_fields() output stays in the DOM, out of sight */
body.sst-co-ab.sst-co-v-b .sst-pm__box,
body.sst-co-ab.sst-co-v-b li.wc_payment_method > .payment_box{
	position:absolute;
	width:1px;
	height:1px;
	margin:0;
	padding:0;
	overflow:hidden;
	background:none;
	border:0;
	clip-path:inset(50%);
	pointer-events:none;
}

body.sst-co-ab.sst-co-v-b .sst-pm{
	position:relative;
	display:block;
	padding:18px 18px 16px;
	background:var(--co-card);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius);
	box-shadow:var(--co-shadow);
	cursor:pointer;
	transition:border-color var(--co-t),background var(--co-t),box-shadow var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-pm:hover{
	border-color:var(--co-control-hover);
	box-shadow:var(--co-shadow-lift);
}
body.sst-co-ab.sst-co-v-b li.wc_payment_method--selected .sst-pm,
body.sst-co-ab.sst-co-v-b .sst-pm.is-selected,
body.sst-co-ab.sst-co-v-b li.wc_payment_method:has(input.input-radio:checked) .sst-pm{
	background:var(--pm-tint);
	border-color:var(--pm-brand);
	box-shadow:inset 0 0 0 1px var(--pm-brand),var(--co-shadow);
}
body.sst-co-ab.sst-co-v-b li.wc_payment_method:has(input.input-radio:focus-visible) .sst-pm{
	outline:2px solid var(--co-ink);
	outline-offset:3px;
}

/* head row: logo | title+sub, badges under the title */
body.sst-co-ab.sst-co-v-b .sst-pm__label{
	display:grid;
	grid-template-columns:auto minmax(0,1fr);
	gap:9px 12px;
	align-items:start;
	margin:0;
	padding-right:34px;
	font-size:inherit;
	font-weight:400;
	color:inherit;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-pm__logo{grid-column:1;grid-row:1;display:block;line-height:0;margin-top:1px}

/* OFFICIAL ARTWORK — DO NOT RECOLOUR (NOTES-WS2 §11).
   The wordmarks are registered trademarks shipped as-is from assets/brands/ and
   rendered as <img class="sst-pm__logo-img">. An <img> cannot inherit `fill` or
   `currentColor`, so the marks are safe by construction — but nothing here may
   reintroduce a tint via `filter`, `opacity`, `mix-blend-mode` or a background
   behind a transparent mark either. This skin sets size and box only.
   (The previous rule filled the Wise wordmark's pill with --co-wise-accent
   because the mark was our own inline SVG; the official file already carries
   its own lime and that override is gone.) */
body.sst-co-ab.sst-co-v-b .sst-pm__logo-img{
	display:block;
	width:auto;
	height:26px;         /* the artwork's own cap height; width follows the ratio */
	max-width:100%;
	object-fit:contain;
	object-position:left center;
	filter:none;
	opacity:1;
	mix-blend-mode:normal;
	/* --co-logo-tile is left at the base default `transparent` on purpose: the
	   Wise mark is a single dark forest green and the PayPal mark is navy+blue,
	   and both read cleanly on variant B's white card AND on its pale --co-*-tint
	   selected card. A plate here would look like an unwanted chip behind the
	   wordmark; the token is only worth setting where a skin's surface is dark.
	   The five card tiles DO need one — see .sst-pm__brand below, which sets its
	   own background rather than the shared token, so the wordmarks stay plate-free. */
	background:var(--co-logo-tile,transparent);
}

/* Legacy inline-SVG wordmark: kept only so a cached/older render still sizes
   correctly. No fill is asserted on it any more. */
body.sst-co-ab.sst-co-v-b .sst-pm__logo-svg{display:block;height:30px;width:auto}
body.sst-co-ab.sst-co-v-b .sst-pm__id{grid-column:2;grid-row:1;display:block;min-width:0}
body.sst-co-ab.sst-co-v-b .sst-pm__label:not(:has(.sst-pm__logo)) .sst-pm__id{grid-column:1/-1}
body.sst-co-ab.sst-co-v-b .sst-pm__badges{
	grid-column:2;
	grid-row:2;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0;
	padding:0;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-pm__label:not(:has(.sst-pm__logo)) .sst-pm__badges{grid-column:1/-1}

body.sst-co-ab.sst-co-v-b .sst-pm__title{
	display:block;
	margin:0;
	color:var(--co-ink);
	font-size:16.5px;
	font-weight:800;
	letter-spacing:-.015em;
	line-height:1.2;
}
body.sst-co-ab.sst-co-v-b .sst-pm__sub{
	display:block;
	margin:2px 0 0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:400;
	line-height:1.4;
}

/* check circle */
body.sst-co-ab.sst-co-v-b .sst-pm__check{
	position:absolute;
	top:16px;
	right:16px;
	display:grid;
	place-items:center;
	width:24px;
	height:24px;
	background:#fff;
	border:1.5px solid var(--co-control);
	border-radius:50%;
	color:var(--pm-on);
	line-height:0;
	transition:background var(--co-t),border-color var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-pm__check svg{
	width:14px;
	height:14px;
	opacity:0;
	transform:scale(.5);
	transition:opacity var(--co-t),transform var(--co-t);
}
body.sst-co-ab.sst-co-v-b li.wc_payment_method--selected .sst-pm__check,
body.sst-co-ab.sst-co-v-b .sst-pm.is-selected .sst-pm__check,
body.sst-co-ab.sst-co-v-b li.wc_payment_method:has(input.input-radio:checked) .sst-pm__check{
	background:var(--pm-brand);
	border-color:var(--pm-brand);
	color:var(--pm-on);
}
body.sst-co-ab.sst-co-v-b li.wc_payment_method--selected .sst-pm__check svg,
body.sst-co-ab.sst-co-v-b .sst-pm.is-selected .sst-pm__check svg,
body.sst-co-ab.sst-co-v-b li.wc_payment_method:has(input.input-radio:checked) .sst-pm__check svg{
	opacity:1;
	transform:none;
}

/* bullets */
body.sst-co-ab.sst-co-v-b .sst-pm__bullets,
body.sst-co-ab.sst-co-v-b .sst-pm__details-list{
	display:flex;
	flex-direction:column;
	gap:7px;
	margin:13px 0 0;
	padding:0;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-pm__details-list{margin-top:0}
body.sst-co-ab.sst-co-v-b .sst-pm__bullets li,
body.sst-co-ab.sst-co-v-b .sst-pm__details-list li{
	position:relative;
	margin:0;
	padding-left:20px;
	color:var(--co-mute);
	font-size:13px;
	line-height:1.45;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-pm__details-list li{font-size:var(--co-fs-small)}
body.sst-co-ab.sst-co-v-b .sst-pm__bullets li::before,
body.sst-co-ab.sst-co-v-b .sst-pm__details-list li::before{
	content:"";
	position:absolute;
	left:4px;
	top:8px;
	width:6px;
	height:6px;
	background:var(--pm-brand);
	border-radius:50%;
	opacity:.5;
}
body.sst-co-ab.sst-co-v-b .sst-pm__details-list li::before{top:7px;opacity:.85}
body.sst-co-ab.sst-co-v-b li.wc_payment_method--selected .sst-pm__bullets li::before,
body.sst-co-ab.sst-co-v-b .sst-pm.is-selected .sst-pm__bullets li::before{opacity:.85}

/* card brand tiles */
body.sst-co-ab.sst-co-v-b .sst-pm__brands{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
	margin:12px 0 0;
}
/* OFFICIAL CARD-SCHEME TILES — DO NOT RECOLOUR (NOTES-WS2 §11).
   34x22 box, `contain`, so a square blue Amex box and a wide black+orange
   Discover wordmark share a baseline without distortion. The tile gets a plain
   WHITE bed (not variant B's warm --co-bg, and never a tinted chip): several of
   these marks have transparent backgrounds and are drawn for white, and
   Discover's black wordmark needs the contrast. A hairline keeps the white tile
   from disappearing into the white card. */
body.sst-co-ab.sst-co-v-b .sst-pm__brand{
	box-sizing:content-box;
	display:block;
	width:34px;
	height:22px;
	padding:3px 5px;
	background:#fff;
	border:1px solid var(--co-rule);
	border-radius:5px;
	object-fit:contain;
	object-position:center;
	filter:none;
	opacity:1;
	mix-blend-mode:normal;
}
/* legacy inline-SVG tiles (older render) */
body.sst-co-ab.sst-co-v-b .sst-pm__brands svg{display:block;width:34px;height:22px}
/* checkout_paypal PP-09 — at 320 the five tiles need 5x46 + 4x6 = 254 px in a
   224 px card, so DISCOVER was orphaned on a second row (+60 px, and an orphan
   logo reads as a layout break on the narrowest width). The ARTWORK stays
   34x22 — PP-10 already says these marks are marginal on phones, so the chip's
   own padding and the row gap are what give way: 5x40 + 4x4 = 216 px, one row,
   tile height unchanged at 30 px. */
@media (max-width:359px){
	body.sst-co-ab.sst-co-v-b .sst-pm__brands{gap:4px}
	body.sst-co-ab.sst-co-v-b .sst-pm__brand{padding:3px 2px}
}

/* live fee line */
body.sst-co-ab.sst-co-v-b .sst-pm__fee{
	display:block;
	margin:12px 0 0;
	padding:9px 12px;
	background:#fff;
	border:1px solid var(--co-paypal-rule);
	border-radius:var(--co-radius-sm);
	color:var(--co-paypal);
	font-size:13px;
	font-weight:700;
	line-height:1.4;
}

/* PAYMENT DETAILS — a native <details> since P2-3 (NOTES-WS2 §14.2).
   DELETED in 0.2.5, and it must not come back: this block used to be

     .sst-pm__details { max-height:0; overflow:hidden; transition:max-height }
     …:has(input:checked) .sst-pm__details { max-height:520px }

   the reveal-on-select mechanism from the old div. On a `<details>` element
   `max-height:0; overflow:hidden` collapses the **`<summary>`** too, so the
   whole "Payment details" affordance disappears on any card that is not
   selected — the element's own `open` state is the mechanism now. Base §13
   currently defends with `max-height:none !important`, which is a guard for
   stale skins, not a licence to keep one.
   `.sst-pm__details-text` no longer exists in the DOM either; its rules went
   with it. `--co-details-max` (§0) is now unused and is kept for one release
   only because the base still lists it.

   Everything variant B needs is a closed-disclosure look. */
body.sst-co-ab.sst-co-v-b .sst-pm__details{
	margin:13px 0 0;
	padding:13px 0 0;
	border-top:1px solid rgba(21,22,15,.10);
}
body.sst-co-ab.sst-co-v-b .sst-pm__details-summary{
	display:flex;
	align-items:center;
	gap:6px;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:700;
	line-height:1.3;
	cursor:pointer;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-pm__details-summary::-webkit-details-marker{display:none}
body.sst-co-ab.sst-co-v-b .sst-pm__details-summary:hover{color:var(--co-ink)}
body.sst-co-ab.sst-co-v-b .sst-pm__details[open] > .sst-pm__details-summary{
	margin-bottom:9px;
	color:var(--co-ink);
}
/* the base draws the chevron with ::after — B only turns it. */
body.sst-co-ab.sst-co-v-b .sst-pm__details-summary::after{transition:transform var(--co-t)}
body.sst-co-ab.sst-co-v-b .sst-pm__details[open] > .sst-pm__details-summary::after{transform:rotate(180deg)}
body.sst-co-ab.sst-co-v-b .sst-pm__details-inner{
	margin-top:0;
	padding-top:0;
	border-top:0;
}

/* ============================================================================
   14. CONSENT CARD (.sst-consent — WS-2 payment.php + terms.php)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-consent__title{margin:0 0 16px}
body.sst-co-ab.sst-co-v-b .sst-consent__terms{margin:0}
body.sst-co-ab.sst-co-v-b .sst-consent__policy{margin:0 0 12px}
body.sst-co-ab.sst-co-v-b .sst-consent__policy p,
body.sst-co-ab.sst-co-v-b .woocommerce-privacy-policy-text p{
	margin:0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	line-height:1.5;
}

/* every consent row: our .sst-check plus the raw mu-plugin .form-row rows */
body.sst-co-ab.sst-co-v-b .sst-check,
body.sst-co-ab.sst-co-v-b .sst-consent__boxes > .form-row{
	display:block;
	margin:0 0 10px;
	padding:14px;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-input);
	scroll-margin-top:80px;
	transition:border-color var(--co-t),background var(--co-t),box-shadow var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-check:hover,
body.sst-co-ab.sst-co-v-b .sst-consent__boxes > .form-row:hover{border-color:var(--co-control-hover)}
body.sst-co-ab.sst-co-v-b .sst-check:has(input:checked),
body.sst-co-ab.sst-co-v-b .sst-consent__boxes > .form-row:has(input:checked){
	background:#fff;
	border-color:var(--co-control);
}

body.sst-co-ab.sst-co-v-b .sst-consent__boxes label.checkbox:not(.sst-check__label){
	display:flex;
	gap:11px;
	align-items:flex-start;
	margin:0;
	color:var(--co-ink);
	font-size:14px;
	font-weight:400;
	line-height:1.5;
	letter-spacing:0;
	cursor:pointer;
}
/* WooCommerce prints the terms row as `<span class="…__text">…</span>&nbsp;<abbr>*</abbr>`,
   i.e. the asterisk is a sibling of the text, not part of it. Flow-root + a
   floated box keeps the asterisk on the last line of the sentence instead of
   parking it at the far right of the row. */
body.sst-co-ab.sst-co-v-b .sst-consent label.sst-check__label{
	display:flow-root;
	margin:0;
	color:var(--co-ink);
	font-size:14px;
	font-weight:400;
	line-height:1.5;
	letter-spacing:0;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-check__text{display:inline;min-width:0}
body.sst-co-ab.sst-co-v-b .sst-check .required,
body.sst-co-ab.sst-co-v-b .sst-consent .required{
	color:var(--co-mute-2);
	text-decoration:none;
	border:0;
}

/* WS-2 ships a real box span for the terms checkbox */
body.sst-co-ab.sst-co-v-b .sst-check__input{
	position:absolute;
	width:24px;
	height:24px;
	margin:0;
	padding:0;
	border:0;
	background:none;
	opacity:0;
	cursor:pointer;
	z-index:1;
}
body.sst-co-ab.sst-co-v-b .sst-check__box{
	display:grid;
	place-items:center;
	float:left;
	flex:0 0 auto;
	width:24px;
	height:24px;
	margin:1px 11px 0 0;
	background:#fff;
	border:1.5px solid var(--co-control);
	border-radius:6px;
	color:#fff;
	line-height:0;
	transition:background var(--co-t),border-color var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-check__box svg{
	width:13px;
	height:13px;
	opacity:0;
	transform:scale(.6);
	transition:opacity var(--co-t),transform var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-check__input:checked ~ .sst-check__box{
	background:var(--co-ink);
	border-color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-check__input:checked ~ .sst-check__box svg{opacity:1;transform:none}
body.sst-co-ab.sst-co-v-b .sst-check__input:focus-visible ~ .sst-check__box{
	outline:2px solid var(--co-ink);
	outline-offset:2px;
}
/* the mu-plugin rows have no box span — the appearance:none input is the box */
body.sst-co-ab.sst-co-v-b .sst-consent__boxes input[type=checkbox]:not(.sst-check__input){width:24px;height:24px}

/* the theme prints an inline-styled consent sentence at prio 7 */
body.sst-co-ab.sst-co-v-b .sst-checkout-consent{
	margin:0 0 10px!important;
	color:var(--co-mute)!important;
	font-size:var(--co-fs-small)!important;
	line-height:1.5!important;
}
body.sst-co-ab.sst-co-v-b .sst-checkout-consent a{color:var(--co-mute)!important;text-underline-offset:2px}

/* ETD / forecast info strips that land inside the card */
body.sst-co-ab.sst-co-v-b .sst-consent .woocommerce-info,
body.sst-co-ab.sst-co-v-b .sst-forecast-cart-summary,
body.sst-co-ab.sst-co-v-b .sst-forecast-cart-notice{
	margin:0 0 10px;
	padding:10px 12px;
	background:var(--co-field);
	border-color:var(--co-rule);
	box-shadow:none;
	font-size:var(--co-fs-small);
	color:var(--co-mute);
}
body.sst-co-ab.sst-co-v-b .sst-forecast-cart-summary strong{color:var(--co-ink);font-weight:700}

/* flash for the first missing consent */
@keyframes sst-co-b-flash{
	0%,100%{box-shadow:0 0 0 0 rgba(21,22,15,0)}
	30%,70%{box-shadow:0 0 0 3px rgba(21,22,15,.18)}
}
body.sst-co-ab.sst-co-v-b .sst-check--flash{animation:sst-co-b-flash 1.1s ease}

/* inline consent error (JS inserts it as the card's first child) */
body.sst-co-ab.sst-co-v-b .sst-consent__error{
	margin:0 0 14px;
	padding:9px 12px;
	background:var(--co-alert-tint);
	border:1px solid var(--co-alert-rule);
	border-radius:var(--co-radius-sm);
	color:var(--co-alert);
	font-size:13px;
	font-weight:600;
}
body.sst-co-ab.sst-co-v-b .sst-consent__error[hidden]{display:none}

/* ACF / theme notes printed after the submit button */
body.sst-co-ab.sst-co-v-b .sst-consent__notes{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:9px;
	margin-top:14px;
}
body.sst-co-ab.sst-co-v-b .sst-consent__notes p{
	margin:0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	line-height:1.5;
}
body.sst-co-ab.sst-co-v-b .sst-consent__notes a:not(.button){color:var(--co-mute);text-underline-offset:2px}
body.sst-co-ab.sst-co-v-b .sst-consent__notes .button{margin-top:2px;text-decoration:none}
body.sst-co-ab.sst-co-v-b .sst-consent__notes .woocommerce-info{width:100%;margin:0}

/* ============================================================================
   15. PAY BUTTON (.place-order / #place_order / .sst-pay*)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .place-order{
	width:100%;
	margin:16px 0 0;
	padding:0;
	float:none;
}
body.sst-co-ab.sst-co-v-b .place-order noscript{
	display:block;
	margin-bottom:10px;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
}

body.sst-co-ab.sst-co-v-b #place_order,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0;
	width:100%;
	/* min-height, not height: the label is a translated sentence and must be
	   allowed to wrap in the longer of the 10 languages. */
	min-height:56px;
	height:auto;
	padding:10px 18px;
	background:var(--co-primary);
	border:0;
	border-radius:var(--co-radius-input);
	box-shadow:none;
	color:var(--co-primary-ink);
	font-family:var(--co-font);
	font-size:16px;
	font-weight:800;
	letter-spacing:-.01em;
	line-height:1.25;
	text-align:center;
	text-transform:none;
	white-space:normal;
	cursor:pointer;
	transition:background var(--co-t),color var(--co-t),box-shadow var(--co-t),transform .1s;
}
body.sst-co-ab.sst-co-v-b #place_order:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn:hover{
	background:var(--co-primary-hover);
	color:var(--co-primary-ink);
	box-shadow:var(--co-shadow-lift);
}
body.sst-co-ab.sst-co-v-b #place_order:active{transform:translateY(1px)}

body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=samurai_wise] #place_order,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=samurai_wise]{
	background:var(--co-wise);
	color:var(--co-wise-accent);
}
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=samurai_wise] #place_order:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=samurai_wise]:hover{
	background:#0F2600;
	color:var(--co-wise-accent);
}
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=ppcp-gateway] #place_order,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=ppcp-gateway]{
	background:var(--co-paypal);
	color:#fff;
}
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=ppcp-gateway] #place_order:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=ppcp-gateway]:hover{
	background:#00246A;
	color:#fff;
}

/* ACF disables #place_order during every update_checkout, and
   `checkout-ab.js:282` mirrors that state onto the bar button
   (`btn.disabled = !!( place && place.disabled )`). The grey recipe below is
   the NO-GATEWAY case only — the cart's proceed bar, and the checkout before
   a gateway is known. */
body.sst-co-ab.sst-co-v-b #place_order:disabled,
body.sst-co-ab.sst-co-v-b #place_order[disabled],
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway] #place_order:disabled,
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway] #place_order[disabled],
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn:disabled,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway]:disabled{
	background:var(--co-field-off);
	color:var(--co-mute-2);
	box-shadow:none;
	cursor:not-allowed;
	transform:none;
}

/* GATEWAY PARITY, INCLUDING WHILE BLOCKED (REVIEW-CO-4 H-3 / design-review
   S1-17, member_checkout MC-04).

   Measured before this block, arm B, Wise — the DEFAULT gateway, i.e. the state
   most mobile visitors land on — at every viewport 320→1920, guest and member:

     .sst-co-bar__btn   #F3F3EF bg / #6B6E65 ink
     #place_order       #163300 bg / #9FE870 ink

   The bar was wearing `--co-field-off` on `--co-mute-2`: verbatim the pair
   `member_checkout.md:45` called "literally the disabled recipe", while the real
   button four screens below read as the confident primary. Raising the contrast
   ratio (2.2 → 4.67) answered a number, not the finding. Cause: the grey block
   above is (0,5,1) through `[data-sst-gateway]:disabled` and out-ranked the
   gateway rules at (0,4,1), so the moment the mirror picked up a disabled
   `#place_order` the bar lost its gateway colour — and PayPal only looked right
   because selecting it fires an `updated_checkout` that re-enables the button.

   Resolution, the same shape variant C settled on: a blocked button keeps its
   GATEWAY BACKGROUND and dims only the label. The state stays legible (dimmed
   label, `not-allowed`, no lift, hover neutralised) and the two buttons can
   never disagree about which gateway is selected. Placed after the grey block
   and matching its (0,5,1), so source order decides — no `!important`, which
   this file does not use. */
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=samurai_wise] #place_order:disabled,
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=samurai_wise] #place_order[disabled],
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=samurai_wise]:disabled,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=samurai_wise][disabled]{
	background:var(--co-wise);
	color:#7FC356;
}
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=ppcp-gateway] #place_order:disabled,
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=ppcp-gateway] #place_order[disabled],
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=ppcp-gateway]:disabled,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=ppcp-gateway][disabled]{
	background:var(--co-paypal);
	color:#B8C5DD;
}
/* a blocked button must not answer to hover — B's soft-surface lift is reserved
   for a control that will actually do something. */
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn:disabled:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[disabled]:hover,
body.sst-co-ab.sst-co-v-b #place_order:disabled:hover,
body.sst-co-ab.sst-co-v-b #place_order[disabled]:hover{
	background:var(--co-field-off);
	color:var(--co-mute-2);
	box-shadow:none;
}
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=samurai_wise] #place_order:disabled:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=samurai_wise]:disabled:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=samurai_wise][disabled]:hover{
	background:var(--co-wise);
	color:#7FC356;
	box-shadow:none;
}
body.sst-co-ab.sst-co-v-b .place-order[data-sst-gateway=ppcp-gateway] #place_order:disabled:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=ppcp-gateway]:disabled:hover,
body.sst-co-ab.sst-co-v-b .sst-co-bar__btn[data-sst-gateway=ppcp-gateway][disabled]:hover{
	background:var(--co-paypal);
	color:#B8C5DD;
	box-shadow:none;
}

/* The label is a WALKED sentence, not a fixed trio: `.sst-pay__amount` is always
   %1$s and `.sst-pay__with` is always the gateway NAME (`Wise` / `PayPal`) — the
   connective words are separate `.sst-pay__label` spans and the spans arrive in
   whatever order the locale puts them in (en `Pay `·amount·` with `·with;
   de amount·` mit `·with·` bezahlen`; zh `使用 `·with·` 支付 `·amount).
   So: NO margin, padding or `:first-child`/`:last-child` rule on any single span,
   and spacing is the flex parent's business only. `gap` stays 0 on purpose — the
   spaces live inside the translated runs (`white-space:pre-wrap`, base CSS §7);
   a non-zero gap would double them in en/de/zh and invent one in a locale like
   `%2$s%1$s` that wants none. */
body.sst-co-ab.sst-co-v-b .sst-pay{
	display:inline-flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:center;
	gap:0;
}
body.sst-co-ab.sst-co-v-b .sst-pay__label,
body.sst-co-ab.sst-co-v-b .sst-pay__with,
body.sst-co-ab.sst-co-v-b .sst-pay__amount{margin:0;padding:0}
body.sst-co-ab.sst-co-v-b .sst-pay__amount{font-variant-numeric:tabular-nums}

/* ============================================================================
   16. MOBILE ITEMS STRIP (.sst-co-strip — WS-2, JS-filled)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-co-strip[hidden]{display:none}
/* checkout_rates F15 — the strip was NARROWER than every card beside it:
   331 px inside a 720 px column at 768 (≈400 px of empty white to its right),
   323 px inside 366 at 390. Cause is not the strip: ACF's account-checkout.css
   sets `form.checkout { display:grid; align-items:start }` and its ≤1023 rule
   only swaps `display` to `flex` + `flex-direction:column` — `align-items:start`
   survives into the flex context, so every direct child of the form is
   shrink-to-fit. `#customer_details` and `#order_review` happen to have content
   wide enough to fill it; the strip does not. `width:100%` is enough here and
   stays correct if the base ever sets `align-items:stretch`.
   -> flagged to WS-2: the same leak can shrink any short block the form gains. */
body.sst-co-ab.sst-co-v-b .sst-co-strip{width:100%}
body.sst-co-ab.sst-co-v-b .sst-co-strip__head{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px 10px;
	width:100%;
	margin:0;
	padding:0;
	background:none;
	border:0;
	color:inherit;
	font-family:var(--co-font);
	text-align:left;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__count{
	padding:1px 8px;
	background:var(--co-bg);
	border-radius:999px;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:700;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__total{
	margin-left:auto;
	font-size:var(--co-fs-body);
	font-weight:800;
	letter-spacing:-.02em;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__toggle{
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:600;
	text-decoration:underline;
	text-underline-offset:3px;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__chev{
	display:inline-flex;
	color:var(--co-mute);
	transition:transform var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__chev svg{display:block}
body.sst-co-ab.sst-co-v-b .sst-co-strip.is-open .sst-co-strip__chev{transform:rotate(180deg)}

/* the body ships with the hidden attribute; the open class reveals it */
body.sst-co-ab.sst-co-v-b .sst-co-strip__body{display:none;padding:0}
body.sst-co-ab.sst-co-v-b .sst-co-strip.is-open .sst-co-strip__body{
	display:flex;
	flex-direction:column;
	gap:14px;
	margin-top:16px;
	padding:16px 0 0;
	border-top:1px solid var(--co-rule);
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__row{
	display:grid;
	grid-template-columns:56px minmax(0,1fr) auto;
	gap:12px;
	align-items:start;
	padding:0;
	border-top:0;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__row:not(:has(.sst-co-strip__thumb)){grid-template-columns:minmax(0,1fr) auto}
body.sst-co-ab.sst-co-v-b .sst-co-strip__thumb{
	width:56px;
	height:56px;
	overflow:hidden;
	background:var(--co-thumb);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-sm);
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__name{
	display:block;
	min-width:0;
	color:var(--co-ink);
	font-size:var(--co-fs-body-s);
	font-weight:650;
	line-height:1.35;
	letter-spacing:-.01em;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__qty{
	display:block;
	margin-top:3px;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	font-weight:400;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__line{
	font-size:14px;
	font-weight:700;
	text-align:right;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__row--sub{
	padding-top:14px;
	border-top:1px solid var(--co-rule);
}
body.sst-co-ab.sst-co-v-b .sst-co-strip__row--sub .sst-co-strip__name{
	color:var(--co-mute);
	font-weight:400;
}

/* ============================================================================
   17. FIXED PAY BAR (.sst-co-bar — WS-2, JS-built, appended to <body>)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-co-bar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:40;
	padding:10px 16px calc(12px + env(safe-area-inset-bottom));
	background:#fff;
	border-top:1px solid var(--co-rule);
	box-shadow:var(--co-shadow-bar);
}
body.sst-co-ab.sst-co-v-b .sst-co-bar[hidden]{display:none}
/* mock B stacks the bar: a total row above a full-width pay button */
body.sst-co-ab.sst-co-v-b .sst-co-bar__inner{display:block;max-width:720px;margin:0 auto}
body.sst-co-ab.sst-co-v-b .sst-co-bar__total{
	display:flex;
	flex-direction:row;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	margin-bottom:8px;
}
body.sst-co-ab.sst-co-v-b .sst-co-bar__label{
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:600;
}
body.sst-co-ab.sst-co-v-b .sst-co-bar__amount{
	font-size:var(--co-fs-h2);
	font-weight:800;
	letter-spacing:-.02em;
}

/* ============================================================================
   18. STEP BAND — variant C only, hidden here
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-co-steps{display:none}

/* ============================================================================
   19. PRE-ORDER AGREEMENT MODAL (ACF, after_submit)
   ========================================================================= */
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal{
	position:fixed;
	inset:0;
	z-index:60;
	display:grid;
	place-items:center;
	padding:16px;
	background:rgba(21,22,15,.45);
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal[hidden]{display:none}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__dialog{
	width:100%;
	max-width:520px;
	max-height:88vh;
	overflow:auto;
	padding:var(--co-pad);
	background:var(--co-card);
	border-radius:var(--co-radius);
	box-shadow:0 18px 48px rgba(32,32,22,.28);
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom:14px;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__head h2{
	margin:0;
	font-size:20px;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__close{
	padding:0;
	background:none;
	border:0;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:600;
	text-decoration:underline;
	text-underline-offset:3px;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__body ul{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0;
	padding:0;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__body li{
	position:relative;
	margin:0;
	padding-left:20px;
	color:var(--co-mute);
	font-size:var(--co-fs-body-s);
	line-height:1.5;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__body li::before{
	content:"";
	position:absolute;
	left:4px;
	top:8px;
	width:6px;
	height:6px;
	background:var(--co-ink);
	border-radius:50%;
	opacity:.5;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__ack{
	display:flex;
	align-items:flex-start;
	gap:11px;
	margin-top:16px;
	padding:14px;
	background:var(--co-field);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-input);
	font-size:14px;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__actions{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:16px;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__back{
	flex:0 0 auto;
	height:46px;
	padding:0 18px;
	background:#fff;
	border:1px solid var(--co-primary);
	border-radius:var(--co-radius-input);
	color:var(--co-primary);
	font-family:var(--co-font);
	font-size:14.5px;
	font-weight:700;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__continue{
	flex:1 1 200px;
	height:46px;
	padding:0 18px;
	background:var(--co-primary);
	border:0;
	border-radius:var(--co-radius-input);
	color:var(--co-primary-ink);
	font-family:var(--co-font);
	font-size:14.5px;
	font-weight:700;
	cursor:pointer;
}
body.sst-co-ab.sst-co-v-b .sst-preorder-agreement-modal__continue:disabled{
	background:var(--co-field-off);
	color:var(--co-mute-2);
	cursor:not-allowed;
}

/* ============================================================================
   20. RESPONSIVE
   <=1023 single column (BRIEF §10 order/spacing); >=1024 two columns.
   The grid shell itself lives in checkout-ab.css; this block supplies the
   variant-B rhythm and the tokens that shell reads.
   ========================================================================= */
@media (max-width:559px){
	/* member_checkout MC-15: this used to be `display:none`, so `Purchase
	   limit: 2` — a real constraint, and the reason the `+` silently stops —
	   vanished below 560 px in B while A and C kept it at every width. It is
	   kept and given its own line instead (order 4 puts it after the stepper
	   and the remove link, `flex:1 0 100%` breaks it onto a new row), which
	   costs one 15 px line and no horizontal room. */
	body.sst-co-ab.sst-co-v-b .sst-checkout-cart-qty__limit{
		order:4;
		flex:1 0 100%;
		margin-top:2px;
	}
	body.sst-co-ab.sst-co-v-b .product-quantity.sst-checkout-cart-qty{margin-top:6px;gap:10px}
	body.sst-co-ab.sst-co-v-b .sst-points-rank-gauge__copy,
	body.sst-co-ab.sst-co-v-b tr.sst-bulk-discount-preorder-exclusion td{max-width:200px}
	body.sst-co-ab.sst-co-v-b .sst-phone-control{grid-template-columns:minmax(0,140px) minmax(0,1fr)}
}

@media (min-width:560px){
	body.sst-co-ab.sst-co-v-b .sst-checkout-order-item{grid-template-columns:64px minmax(0,1fr)}
	body.sst-co-ab.sst-co-v-b .sst-checkout-order-item__thumb{width:64px;height:64px}
	body.sst-co-ab.sst-co-v-b .product-quantity.sst-checkout-cart-qty{margin-left:76px}
	body.sst-co-ab.sst-co-v-b .sst-co-strip__row{grid-template-columns:64px minmax(0,1fr) auto}
	body.sst-co-ab.sst-co-v-b .sst-co-strip__thumb{width:64px;height:64px}
}

@media (min-width:768px) and (max-width:1023px){
	body.sst-co-ab.sst-co-v-b form.checkout,
	body.sst-co-ab.sst-co-v-b .woocommerce-notices-wrapper,
	body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths,
	body.sst-co-ab.sst-co-v-b .sst-saved-address-notice,
	body.sst-co-ab.sst-co-v-b .woocommerce-form-login-toggle{
		max-width:720px;
		margin-left:auto;
		margin-right:auto;
	}

	/* ---- P3-2 · tablet line length -------------------------------------- *
	   At 768/820 the single column is 720 px wide and every prose block runs
	   its full width. Measured on the real checkout DOM at 768 BEFORE this
	   block (Range client rects, characters / rendered line):
	     Wise detail bullet          562 px  = 102 ch
	     Wise reference bullet       439 px  =  76 ch
	     coupon panel copy      419-430 px  =  76 ch
	   i.e. the DENSEST, least-wanted text on the page is the furthest past the
	   ~75 ch comfort limit (checkout D4-3, checkout_rates F16). Return sweeps
	   get lost, so the small print is skimmed and later disputed.

	   Only PROSE is capped — never a field, a row, a card, a button or a
	   meter, so nothing that carries a number or a control changes width and
	   the cards keep their full-bleed 720 px edge. */
	body.sst-co-ab.sst-co-v-b .sst-pm__sub,
	body.sst-co-ab.sst-co-v-b .sst-pm__details li,
	body.sst-co-ab.sst-co-v-b .sst-pm__details p,
	body.sst-co-ab.sst-co-v-b .sst-pm .payment_box p,
	body.sst-co-ab.sst-co-v-b .sst-pm__note,
	body.sst-co-ab.sst-co-v-b .sst-consent p,
	body.sst-co-ab.sst-co-v-b .sst-consent__notes p,
	body.sst-co-ab.sst-co-v-b .sst-checkout-coupon-panel p,
	body.sst-co-ab.sst-co-v-b .sst-checkout-points-panel p,
	body.sst-co-ab.sst-co-v-b .sst-checkout-account-benefits p,
	body.sst-co-ab.sst-co-v-b .sst-checkout-account-benefits li,
	body.sst-co-ab.sst-co-v-b .sst-checkout-business-details__summary-copy em,
	body.sst-co-ab.sst-co-v-b .woocommerce-privacy-policy-text p{
		max-width:68ch;
	}

	/* member_cart MC-13 (the totals card capping at 560 px on tablets) was
	   briefly duplicated here. It now lives in `checkout-ab.css` §18 as
	   MCT-13, i.e. all three arms get it from the base — which is the right
	   place for it: the reviews' D4-9 complaint is precisely that the arms
	   were differing in ways nobody decided. Nothing to add on this side. */
}

/* room for the fixed pay bar */
@media (max-width:1023px){
	body.sst-co-ab.sst-co-v-b{padding-bottom:150px}
}

@media (min-width:1024px){
	body.sst-co-ab.sst-co-v-b{padding-bottom:0}
	body.sst-co-ab.sst-co-v-b .sst-co-bar{display:none}
	body.sst-co-ab.sst-co-v-b .sst-co-strip{display:none}
	body.sst-co-ab.sst-co-v-b .sst-pm{padding:20px 20px 18px}
	body.sst-co-ab.sst-co-v-b .sst-checkout-customer-paths{align-items:center}

	/* No grid placement here any more. checkout-ab.css now places all three
	   children explicitly (#customer_details col 1 / row 1-100, the heading col 2
	   row 1, the rail col 2 / row 2-100) and leaves the rail `static`, which is
	   exactly what mock B wants; the WS-3b workaround that used to live here was
	   deleted in the WS-2 fix round. Anything the form prints after
	   #customer_details (.sst-country-clearance) auto-flows into column 1 below it.

	   The pay button keeps the shared `position:sticky; bottom:0` inside the rail
	   (--co-rail-cta:sticky, §0) and therefore needs an opaque background — the
	   shared rule paints it with --co-card, which is the consent card's own white,
	   so the button reads as part of the card while it floats. The former
	   `background:none` override is gone with the opt-out. */
	body.sst-co-ab.sst-co-v-b #order_review .place-order{
		/* breathing room under the floating CTA and between it and the notes */
		padding-bottom:14px;
		/* the same upward shadow the fixed mobile bar uses, so the CTA reads as a
		   deliberate floating layer while it covers the consent copy behind it */
		box-shadow:var(--co-shadow-bar);
	}
}

/* ---- P3-1 · >=1280 balance ---------------------------------------------- *
   Measured at 1440 BEFORE this block (real checkout DOM, guest):
     shell 1240 · form column 816 x 1649 · rail 400 x 2335
   so the form column dead-ends 686 px above the rail's foot and ~66 % of the
   width is blank next to a 400 px ribbon carrying payment + consent + the CTA
   (checkout D1-4, checkout_paypal PP-11, member_checkout MC-12, cart F11).
   The rail's own copy pays for it too: the Wise bullets wrap at ~34 ch in
   400 px while the page has room for 80.

   What a SKIN can do about it is bounded. Moving the payment cards into the
   left column is a DOM/base change and belongs to WS-2; a max-width on the
   theme's container would fight a node this skin does not own. What is
   legitimately the skin's is `--co-rail` — a structural token the base
   documents for exactly this (NOTES-WS2 §2f) and reads in its own
   `grid-template-columns`. Widening it moves ~120 px of dead column into the
   column that is actually doing work, at both ends of the funnel (the base
   uses the same token for the cart's collaterals).

   Scoped to >=1280 on purpose: at 1024 the two tracks are 568 + 400, and
   taking 120 px off a 568 px form column would cramp the address fields.
   The residual emptiness is recorded in NOTES-WS3b §14.6 — it needs the DOM
   move, not more CSS. */
@media (min-width:1280px){
	body.sst-co-ab.sst-co-v-b{
		--co-rail:520px;
		--co-rail-min:440px;
	}
}

/* ============================================================================
   21. CART PAGE  (DESIGN §8 — /cart joins the A/B/C test)

   Scope: body.sst-co-ab.sst-co-v-b.woocommerce-cart. WS-1 prints the variant
   classes on `is_cart()` too, so §1-§6 (canvas, type, 3-tier buttons, badges,
   notices), §10's meter/points rules (they are not table-scoped), §15
   (.sst-pay* — the proceed CTA reuses that exact span anatomy), §17
   (.sst-co-bar) and §20's <=1023 body padding all apply here already and are
   NOT repeated. This section adds only what the cart's own DOM needs.

   PLACEMENT IS NOT OURS — checkout-ab.css §10 owns it, and it owns MORE of the
   cart than it owns of the checkout:
     * `.sst-cart-item` is a `grid-template-areas` card at <1024
       ("thumb main remove" / "thumb unit unit" / "thumb qty line") and a SIX
       column row at >=1024 ("thumb main unit qty line remove");
     * the >=1024 page grid lives on `.woocommerce`, with the form in column 1
       and `.cart-collaterals` in column 2, `position: var(--co-rail-position,
       sticky)`;
     * `.sst-cart-qty`, `.sst-cart-coupon`, `.sst-cart-totals` and
       `.sst-cart-cta` already have their boxes there.
   So nothing below sets grid-template-*, grid-area, grid-column/row,
   justify-self/align-self, position or float on any of them. Every rule here is
   surface, type, colour or control detail. Overriding the row's areas would
   silently undo the desktop six-column layout — NOTES-WS3b §8 is the record of
   what a skin-level placement patch costs.

   Two deliberate token choices for the cart:
     * `--co-rail-position` stays UNSET, so the collaterals column keeps the
       base's cart default `sticky`. Unlike the checkout rail (tall payment +
       consent stack, §8.1) the cart's totals card is short, so pinning it is
       exactly right.
     * `--co-qty-size` (§0) drops the base's 36 px stepper to 32 px, matching
       the checkout stepper in §10.

   DOM: templates/cart/cart.php + cart-totals.php + proceed-to-checkout-button.php
   (CW-2). The <table> deliberately survives — WooCommerce's own cart.js bails
   out of the form when `.woocommerce-cart-form__contents` is missing
   (cart.js:550) — so the rows become cards via `display:grid` on the <tr>.
   ========================================================================= */

/* ---- 21.1 page frame ---------------------------------------------------- */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce-notices-wrapper:empty{display:none}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-page-header{margin:0 0 var(--co-gap)}

/* woocommerce-smallscreen.css turns any `shop_table_responsive` into stacked
   rows below 768 px and prints `content: attr(data-title)` before every cell.
   Both cart tables are placed by the base's grid at every width, so the pseudo
   labels are dead weight — and they would land inside the grid areas. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart table.shop_table_responsive td::before,
body.sst-co-ab.sst-co-v-b.woocommerce-cart table.shop_table_responsive th::before{content:none!important}

/* ---- 21.2 items card ---------------------------------------------------- */
/* The FORM is the white card; the table inside it is plumbing. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart form.sst-cart-form,
body.sst-co-ab.sst-co-v-b.woocommerce-cart form.woocommerce-cart-form{
	box-sizing:border-box;
	padding:var(--co-pad);
	background:var(--co-card);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius);
	box-shadow:var(--co-shadow);
}
/* THE DANGLING RULE BESIDE "Apply coupon" (cart review, top-fix 4).
   The theme gives the cart table `box-shadow: 0 1px #00000008`, i.e. a 1 px
   #F7F7F7 line painted immediately BELOW the table's bottom edge. The coupon
   input and the Apply button end on exactly that edge and are opaque, so the
   only part of the line that is ever visible is the piece to the RIGHT of the
   button — a hairline that starts nowhere and stops at the card wall.
   Located by pixel-scanning the review shot `cart_B_ipadmini_fold.png`
   (y=467, x 610→718, #F7F7F7, i.e. from the button's right edge to the card's
   content edge) and reproduced locally on the real cart DOM. The card already
   carries --co-shadow of its own; the table must not carry a second one. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart table.sst-cart-items{
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	font-size:var(--co-fs-body-s);
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart table.sst-cart-items th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart table.sst-cart-items td{
	background:none;
	font-weight:400;
}
/* the totals table is inside its own card and gets its rules from §21.7 */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table{box-shadow:none}
/* the base gives every row a bottom hairline; on the last one it would double
   the card edge, and the actions row supplies its own rule. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart tr.sst-cart-item:last-of-type{border-bottom:0}

/* ---- 21.3 item row detail (no placement — see the header) --------------- */
/* the base sizes the <img> 64x64/cover; the skin gives it mock B's soft frame */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__thumb img{
	background:var(--co-thumb);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius-sm);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__thumb a{display:block}

body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__title{
	display:block;
	font-size:var(--co-fs-body-s);
	font-weight:650;
	line-height:1.35;
	letter-spacing:-.01em;
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__title a{
	color:inherit;
	font-weight:inherit;
	text-decoration:none;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__title a:hover{
	text-decoration:underline;
	text-underline-offset:3px;
}

/* wc_get_formatted_cart_item_data() output + the backorder notice */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__main .variation,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__main dl.variation,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__main .backorder_notification{
	margin:4px 0 0;
	color:var(--co-mute-2);
	font-size:var(--co-fs-micro);
	font-weight:400;
	line-height:1.45;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__main dl.variation dt,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__main dl.variation dd{
	display:inline;
	margin:0;
	padding:0;
	font-weight:inherit;
}

/* unit price is quiet meta; the line total is the row's one bold figure */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__unit{
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	font-weight:400;
	font-variant-numeric:tabular-nums;
	line-height:1.45;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__line{
	color:var(--co-ink);
	font-size:14px;
	font-weight:700;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart tr.sst-cart-item.is-loading{opacity:.55}

/* ---- 21.4 qty stepper --------------------------------------------------- */
/* The base builds the pill on `.sst-cart-qty` itself (border + radius +
   overflow) and the JS injects `.sst-cart-qty__btn` around WooCommerce's own
   `input.qty`. The skin only recolours it so it matches the checkout stepper
   (§10) — the two pages must feel like one product. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty{
	background:#fff;
	border-color:var(--co-control);
	border-radius:var(--co-radius-sm);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty input.qty{
	color:var(--co-ink);
	font-family:var(--co-font);
	font-size:var(--co-fs-body-s);
	font-weight:700;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty input.qty:focus{
	background:none;
	box-shadow:none;
	outline:2px solid var(--co-ink);
	outline-offset:-2px;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty__btn{
	color:var(--co-ink);
	font-family:var(--co-font);
	font-size:16px;
	font-weight:700;
	transition:background var(--co-t),color var(--co-t);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty__btn:hover:not(:disabled){background:var(--co-bg)}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty__btn:disabled{color:#BFC0B8;cursor:not-allowed}
/* a JS-less cart shows WooCommerce's bare number field; it still has to read as
   one of mock B's inputs rather than a naked spinner. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty:not(:has(.sst-cart-qty__btn)) input.qty{width:64px}

/* ---- 21.5 remove × ------------------------------------------------------ */
/* `a.remove` is WooCommerce's own "×" (the base already makes it a 28 px
   circle). Mock B keeps it quiet and only turns it alert-red on hover/focus. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__remove .remove,
body.sst-co-ab.sst-co-v-b.woocommerce-cart a.remove{
	background:none;
	border:1px solid transparent;
	color:var(--co-mute-2);
	font-family:var(--co-font);
	font-size:17px;
	font-weight:600;
	transition:background var(--co-t),color var(--co-t),border-color var(--co-t);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart a.remove:hover,
body.sst-co-ab.sst-co-v-b.woocommerce-cart a.remove:focus-visible{
	background:var(--co-alert-tint);
	border-color:var(--co-alert-rule);
	color:var(--co-alert);
}

/* ---- 21.6 coupon + update cart (inset at the foot of the items card) ---- */
body.sst-co-ab.sst-co-v-b.woocommerce-cart td.sst-cart-actions{border-top:1px solid var(--co-rule)}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-coupon__input,
body.sst-co-ab.sst-co-v-b.woocommerce-cart #coupon_code{
	box-sizing:border-box;
	height:44px;
	padding:0 14px;
	background:var(--co-field);
	border:1px solid var(--co-control);
	border-radius:var(--co-radius-input);
	box-shadow:none;
	color:var(--co-ink);
	font-family:var(--co-font);
	font-size:var(--co-fs-body-s);
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-coupon__input::placeholder{
	color:var(--co-mute-2);
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-coupon__input:focus{
	background:#fff;
	border-color:var(--co-ink);
	outline:none;
	box-shadow:inset 0 0 0 1px var(--co-ink);
}
/* P1-7 — Apply is SECONDARY here too. It used to be solid black, which put a
   full-width #111 block 500 px above the equally black `Proceed to checkout`
   at 390 px and made it the loudest control in the first viewport (cart F9,
   member_cart MC-06). Height and nowrap are the only box properties this row
   still needs; the colours are §4's outline tier, restated so the rule cannot
   lose to a later one. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-coupon .sst-cart-coupon__apply,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-coupon button[name=apply_coupon]{
	height:44px;
	padding:0 18px;
	background:#fff;
	border-color:var(--co-primary);
	color:var(--co-primary);
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-coupon .sst-cart-coupon__apply:hover:not(:disabled){
	background:var(--co-secondary-hover);
	color:var(--co-primary);
}
/* "Update cart" is the JS-less fallback. The base visually-hides it once the
   stepper exists (form.sst-cart--auto), so this only dresses the fallback. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-update{
	height:38px;
	margin:12px 0 0;
	padding:0 14px;
	font-size:var(--co-fs-body-s);
}

/* ---- 21.7 totals card --------------------------------------------------- */
/* The collaterals column holds the totals card and (when the store enables
   them) cross-sells. The base gives the totals card `margin-top:24px` below
   1024 and 0 above; variant B only re-tunes that gap to its own rhythm, which
   is rhythm, not placement — the >=1024 branch is left to the base. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-collaterals{display:block}
@media (max-width:1023px){
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals{margin-top:var(--co-gap)}
}

/* The base already gives .sst-cart-totals its border/radius/background and the
   >=1024 sticky placement; the skin adds mock B's padding, shadow and rhythm.
   No margin and no position is touched.

   THE BOTTOM AND RIGHT RESERVES ARE NOT DECORATION (NOTES-WS2 §14.3.4).
   `checkout-ab.css` §12 keeps a 56 px corner (and a 48 px right gutter below
   480) free of the help-chat launcher with
     body.sst-co-ab.woocommerce-cart .sst-cart-totals            (0,2,1)
       { padding-bottom: calc( var(--co-card-pad) + 56px ) }
   and this rule is (0,4,1), so the `padding` SHORTHAND below silently reset
   both to --co-pad and handed the corner back to the launcher. The reserves
   are therefore restated as longhands, in B's own pad unit. Keep them if you
   re-tune the padding. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals{
	box-sizing:border-box;
	padding:var(--co-pad);
	padding-bottom:calc(var(--co-pad) + 56px);
	background:var(--co-card);
	border-color:var(--co-rule);
	box-shadow:var(--co-shadow);
	text-align:left;
}
@media (max-width:479px){
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals{
		padding-right:calc(var(--co-pad) + 48px);
	}
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__title{
	display:block;
	margin:0 0 16px;
	padding:0;
	border:0;
	font-family:var(--co-font);
	font-size:var(--co-fs-h2);
	font-weight:700;
	letter-spacing:-.015em;
	line-height:1.25;
	color:var(--co-ink);
	text-transform:none;
}

/* The totals "table" is a list of label/value pairs, and two of its rows (the
   bulk and rank meters) have to run the FULL card width. Inside a real table
   that is impossible: a `display:block` <tr> becomes an anonymous block whose
   containing block is the FIRST COLUMN, so `width:100%` resolves to the column,
   not the table — measured at 415 px of a 690 px table — and the block rows
   also poison the column widths for every normal row (the value column was
   squeezed to 275 px). Making the table itself a block fixes both: each row's
   containing block becomes the card, and the label/value rows become flex.
   This is the same treatment WooCommerce's own `shop_table_responsive` applies
   below 768 px, so it is a familiar shape for this ecosystem; the label still
   precedes its value in reading order. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table > tbody{
	display:block;
	width:100%;
	background:none;
	border:0;
	border-radius:0;
	font-size:var(--co-fs-body-s);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:0 14px;
	width:100%;
}
/* NO CELL BORDERS — cart F8 ("short underlines under Shipment / Next bulk tier
   / Rank / Points you'll earn / Total and under '(sign in to collect)'").
   The theme prints
     body.woocommerce-cart .cart_totals table.shop_table th, … td
       { border-bottom:1px solid #edf0f3 }        (0,3,3)
   and because every cell in this table is a shrink-to-fit flex item, that
   border is only as wide as the label it sits under. Measured at 768: rules of
   46 / 66 / 92 / 40 / 90 px under six plain labels, next to ONE real link
   (`Calculate shipping`) — six labels that look clickable and one link that
   does not. Zeroing it here (0,4,2 beats the theme) is what removes them; row
   separators for this card are drawn on the ROW, below. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table th{
	display:block;
	flex:0 1 auto;
	padding:11px 0 0;
	background:none;
	border:0;
	color:var(--co-mute);
	font-weight:400;
	line-height:1.45;
	text-decoration:none;
	white-space:nowrap;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table td{
	display:block;
	flex:0 1 auto;
	min-width:0;
	padding:11px 0 0;
	background:none;
	border:0;
	color:var(--co-ink);
	font-weight:650;
	font-variant-numeric:tabular-nums;
	line-height:1.45;
	text-align:right;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr:first-child th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr:first-child td{padding-top:0}

body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.cart-discount th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.cart-discount td{color:var(--co-ok)}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.cart-discount td{font-weight:700}

/* the grand total is the one loud line.
   THE SEPARATOR IS DRAWN ON THE ROW, NOT ON THE CELLS. Per-cell borders split
   into two stubs of different widths (measured at 768: 41 px under `Total`,
   74 px under the amount, with a 556 px hole between them) — the same
   "two rules above Total that do not join" the reviews raise against A
   (checkout_rates F11, member_checkout MC-08). The row is `display:flex` and
   `width:100%`, so one border-top on it is one full-card rule. This mirrors
   what §12.2 already did for the checkout table's tfoot. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.order-total{
	margin-top:5px;
	border-top:1px solid var(--co-rule);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.order-total th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.order-total td{
	padding-top:16px;
	border:0;
	color:var(--co-ink);
	font-size:19px;
	font-weight:800;
	letter-spacing:-.02em;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.order-total td strong{font-weight:800}

/* shipping row / calculator: label floats, note and methods clear below it —
   the same shape the checkout totals use (§10). */
/* `display:block` on a <tr> makes it an anonymous block inside the table whose
   width is the FIRST COLUMN's width (~60% here), not the table's — measured at
   every breakpoint. `width:100%` is what makes the row, its right-aligned value
   and the meter below it span the whole card. Sizing inside our own totals
   table; the base does not place these rows. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.woocommerce-shipping-totals,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.shipping{display:block;width:100%}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.woocommerce-shipping-totals th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.shipping th{
	display:block;
	float:left;
	padding:11px 14px 0 0;
	border-top:0;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.woocommerce-shipping-totals td,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.shipping td{
	display:block;
	width:auto;
	padding:11px 0 0;
	border-top:0;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	font-weight:400;
	text-align:right;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce-shipping-calculator{clear:both;padding-top:10px;text-align:left}
/* `Calculate shipping` is the ONE real link in this card (cart F8). Production
   emits a bare `<a class="shipping-calculator-button">`, so §4's `.button`
   tiers never reach it and it kept the THEME's magenta #9E2C5F — measured
   `color: rgb(158,44,95)`, the only magenta on variant B's cart. Now that the
   six fake underlines are gone (§21.7) the underline means "link" again, and
   the one link that has it must wear the skin's own colour. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart a.shipping-calculator-button,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce-shipping-calculator > a{
	display:inline;
	color:var(--co-mute);
	font-size:var(--co-fs-small);
	font-weight:600;
	text-decoration:underline;
	text-underline-offset:3px;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart a.shipping-calculator-button:hover,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce-shipping-calculator > a:hover{
	color:var(--co-ink);
	text-decoration-thickness:2px;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce-shipping-destination{
	clear:both;
	display:block;
	margin-top:8px;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
}

/* the bulk / rank meter rows and the points-earn row arrive on
   `woocommerce_cart_totals_before_order_total`. Their look already lives in
   §10 (those selectors are not table-scoped); only this table's block-row
   treatment is repeated. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-bulk-discount-next-tier,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-points-rank-gauge,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-bulk-discount-preorder-exclusion{display:block;width:100%}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-bulk-discount-next-tier th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-points-rank-gauge th,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-bulk-discount-preorder-exclusion th{
	display:block;
	float:left;
	padding:11px 14px 0 0;
	border-top:0;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-bulk-discount-next-tier td,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-points-rank-gauge td,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-bulk-discount-preorder-exclusion td{
	display:block;
	width:auto;
	padding:11px 0 0;
	border-top:0;
	text-align:right;
}
/* on the cart the "points you'll earn" line is a reason to keep going, so it is
   the one green line in the table. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals__table tr.sst-points-earn-preview td{
	color:var(--co-ok);
	font-weight:700;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-points-earn-preview__note{
	display:block;
	margin-top:2px;
	color:var(--co-mute-2);
	font-size:var(--co-fs-micro);
	font-weight:400;
}

/* ---- 21.8 proceed CTA --------------------------------------------------- */
/* `a.checkout-button.button.alt.wc-forward.sst-cart-cta[data-sst-proceed]`,
   whose label is the SAME .sst-pay span anatomy as the pay button — so §15's
   span rules (no margins on any span, gap 0, tabular amount, ANY span order)
   already cover `Proceed to checkout · ¥X` and every translation of it,
   including one that puts the amount first.
   §4 gives every `.button` the outline look, so each declaration is qualified
   with the wrapper to out-rank it. Box and typography only — the base owns
   `display:flex`, `width:100%` and the alignment defaults. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-proceed .sst-cart-cta,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
	flex-wrap:wrap;
	align-items:baseline;
	gap:0;
	/* min-height, not height: the composed sentence must be free to wrap in the
	   longer of the ten languages. */
	min-height:56px;
	height:auto;
	padding:10px 18px;
	background:var(--co-primary);
	border:0;
	border-radius:var(--co-radius-input);
	box-shadow:none;
	color:var(--co-primary-ink);
	font-family:var(--co-font);
	font-size:16px;
	font-weight:800;
	letter-spacing:-.01em;
	line-height:1.25;
	text-transform:none;
	white-space:normal;
	transition:background var(--co-t),color var(--co-t),box-shadow var(--co-t),transform .1s;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-proceed .sst-cart-cta:hover,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
	background:var(--co-primary-hover);
	color:var(--co-primary-ink);
	box-shadow:var(--co-shadow-lift);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-proceed .sst-cart-cta:active{transform:translateY(1px)}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-proceed .sst-cart-cta[aria-disabled=true]{
	background:var(--co-field-off);
	color:var(--co-mute-2);
	box-shadow:none;
	pointer-events:none;
}

/* ---- 21.9 policy / action copy under the totals ------------------------- */
/* ACF and the theme hook notices in after the CTA (DESIGN §8: "style
   generically, do not move nodes"). They become quiet muted copy inside the
   totals card — never a second card, never a coloured notice box. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals .woocommerce-info,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals > p,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-proceed ~ p{
	margin:12px 0 0;
	padding:0;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	line-height:1.5;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals .woocommerce-info a,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals > p a{
	color:var(--co-mute);
	text-underline-offset:2px;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals .woocommerce-info .button,
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-totals > p .button{
	height:38px;
	margin:8px 0 0;
	padding:0 14px;
	font-size:var(--co-fs-body-s);
}

/* ---- 21.10 empty cart --------------------------------------------------- */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .cart-empty{
	box-sizing:border-box;
	display:block;
	margin:0 0 16px;
	padding:calc(var(--co-pad) * 1.6) var(--co-pad);
	background:var(--co-card);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius);
	box-shadow:var(--co-shadow);
	color:var(--co-ink);
	font-size:var(--co-fs-h2);
	font-weight:700;
	letter-spacing:-.015em;
	line-height:1.3;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .cart-empty::before{display:none}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .return-to-shop .button{min-width:200px}
/* An empty cart has no total, so the fixed bar must not linger. The condition
   mirrors checkout-ab.js's own guard (`initCart()` returns early when there is
   no `form.woocommerce-cart-form`) rather than keying off `.cart-empty`: the
   empty template renders no form at all, and testing for the form is also what
   keeps a *hidden* empty-state node from suppressing a real cart's bar. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart:not(:has(form.woocommerce-cart-form:not([hidden]))) .sst-co-bar{display:none}

/* ---- 21.11 cross-sells -------------------------------------------------- */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .cross-sells{
	box-sizing:border-box;
	margin:var(--co-gap) 0 0;
	padding:var(--co-pad);
	background:var(--co-card);
	border:1px solid var(--co-rule);
	border-radius:var(--co-radius);
	box-shadow:var(--co-shadow);
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .cross-sells > h2{
	display:block;
	margin:0 0 16px;
	font-size:var(--co-fs-h2);
	font-weight:700;
	letter-spacing:-.015em;
	line-height:1.25;
	color:var(--co-ink);
	text-transform:none;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .cross-sells ul.products{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
	margin:0;
	padding:0;
	list-style:none;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .cross-sells ul.products li.product{
	width:auto;
	margin:0;
	padding:0;
	float:none;
	list-style:none;
}

/* ---- 21.12 the reused fixed bar ----------------------------------------- */
/* §17 already paints .sst-co-bar. On the cart its button is the proceed CTA
   rather than #place_order, so it needs the primary look here; its label is
   again .sst-pay spans, already covered by §15. */
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-co-bar__btn{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:center;
	gap:0;
	width:100%;
	min-height:52px;
	height:auto;
	padding:10px 18px;
	background:var(--co-primary);
	border:0;
	border-radius:var(--co-radius-input);
	color:var(--co-primary-ink);
	font-family:var(--co-font);
	font-size:16px;
	font-weight:800;
	line-height:1.25;
	text-align:center;
	text-decoration:none;
	white-space:normal;
}
body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-co-bar__btn:hover{
	background:var(--co-primary-hover);
	color:var(--co-primary-ink);
}

/* ---- 21.13 responsive --------------------------------------------------- */
@media (max-width:559px){
	body.sst-co-ab.sst-co-v-b.woocommerce-cart{--co-qty-size:30px}
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .cross-sells ul.products{grid-template-columns:minmax(0,1fr)}
}

@media (min-width:768px) and (max-width:1023px){
	/* the same 720 px reading measure the checkout uses at this width (§20).
	   The base's cart grid only exists >=1024, so nothing is being fought. */
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce,
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .woocommerce-notices-wrapper,
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-page-header{
		max-width:720px;
		margin-left:auto;
		margin-right:auto;
	}
}

@media (min-width:1024px){
	/* Placement comes from checkout-ab.css §10; this only gives the desktop
	   six-column row's figures room not to wrap. */
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__unit{white-space:nowrap}
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-item__line{font-size:15px}
}

/* ---- 21.13 sub-360 phones: the stepper vs the item card ------------------
   checkout-ab.css §10 lays the item card out as `64px minmax(0,1fr) auto` and
   puts the qty stepper and the line total side by side on row 3; §10b then pins
   the stepper at `min-width:max-content` (M-2 — below its content width the `+`
   was 11 px wide and unhittable). This skin is the only one that wraps the cart
   in TWO padded cards (the form and the totals, `--co-pad` each side), so at
   320 px its item row is 254 px wide and the middle column resolves to 82 px
   against a 105 px stepper: the `+` was painted over the line total.

   That was invisible before 0.2.3 only because the cart's own minimum content
   width was 354 px (§6, the promotion-policy CTA) and mobile Chrome widened the
   layout viewport to match, handing the column the 23 px it was short of. With
   the page finally fitting 320 px the collision showed, so the card padding and
   the stepper both give a little back below 360 px. Placement is untouched —
   `--co-pad` and the control's own widths are this skin's to set (§21 preamble).
   Measured after: column 98 px, stepper 88 px. The buttons keep their full
   height, so the tap target only loses width. */
@media (max-width:359px){
	body.sst-co-ab.sst-co-v-b.woocommerce-cart{--co-pad:12px}
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty__btn{width:28px}
	body.sst-co-ab.sst-co-v-b.woocommerce-cart .sst-cart-qty input.qty{width:2.2em}
}

/* ---- 21.14 the help-chat launcher, for variant B only -------------------- *
   `checkout-ab.css` §12 (P1-1) lifts `#sst-order-help-chat` clear of the
   mobile bar with

     body.sst-co-ab.woocommerce-cart.sst-co-bar-on .sst-order-help-chat…
       { bottom: calc( var(--co-bar-height) + 12px + env(safe-area-inset-bottom) ) }

   and that is inert in THIS ARM ONLY, because §0 sets `--co-bar-height: 0px`
   on purpose (variant B takes the bar's room as `padding-bottom` on <body> in
   §20, not as padding on the form). Measured on the real cart DOM with the
   base as of 20:56: body carries `sst-co-bar-on`, the bar is 103 px tall, the
   token resolves to 0, the launcher computes `bottom: 12px` and its 56x56 box
   covers the bar's `Proceed to checkout` button by **52 x 52 px at 320, 390,
   412 and 430** — i.e. the fix lands for A and C and silently misses B.

   Rather than give up the token (the form must NOT gain bottom padding), the
   rule is restated with B's real bar height. (0,6,1) vs the base's (0,5,1).
   -> WS-2: consider keying §12 off the bar's measured height instead of a
      token a skin is free to zero, and this override can go. */
@media (max-width:1023px){
	body.sst-co-ab.sst-co-v-b.woocommerce-cart.sst-co-bar-on .sst-order-help-chat:not([data-position^="top"]){
		bottom:calc(var(--co-bar-real) + 12px + env(safe-area-inset-bottom,0px));
	}
}

/* ============================================================================
   22. PHASE-2 NODES — the look for WS-2's new DOM (NOTES-WS2 §14.2)
   The base carries the anatomy of every node below (§13-§17 of
   checkout-ab.css) and says in as many words that the colours are the skin's.
   Nothing here sets display, placement or the collapse mechanism.
   ========================================================================= */

/* ---- 22.1 FedEx rate badges + the delta (P2-1) --------------------------- */
/* The two axes must not look like one label repeated: `Cheapest` is a fact
   about money and wears variant B's money-green tint; `Fastest` is the store's
   own service claim (NOTES-WS2 §14.6) and stays an ink hairline chip. A row
   can carry both. Sizing/anatomy is base §14. M-15: decorative — a static label,
   not a control, so the chip edge stays on --co-rule-strong. */
body.sst-co-ab.sst-co-v-b .sst-ship__badge{
	background:#fff;
	border-color:var(--co-rule-strong);
	color:var(--co-mute);
	font-size:var(--co-fs-eyebrow);
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
}
body.sst-co-ab.sst-co-v-b .sst-ship__badge[data-kind=cheapest]{
	background:var(--co-ok-tint);
	border-color:var(--co-ok-pill-rule);
	color:var(--co-ok);
}
body.sst-co-ab.sst-co-v-b .sst-ship__badge[data-kind=fastest]{
	background:#fff;
	border-color:var(--co-ink);
	color:var(--co-ink);
}
body.sst-co-ab.sst-co-v-b .sst-ship__diff{
	color:var(--co-mute-2);
	font-size:var(--co-fs-small);
	font-weight:650;
}

/* ---- 22.2 the PayPal fee companion (P2-6) ------------------------------- */
/* Base swaps `.sst-pm__fee` out for `.sst-pm__total` on the selected card, so
   this is the ONE place the shopper sees the consequence of the choice at the
   moment of the choice (checkout_paypal PP-05: the fee row and the card are
   943-1020 px apart at every width). It therefore reads as a total, not as a
   caption: ink, not muted, with the fee itself kept quiet. */
body.sst-co-ab.sst-co-v-b .sst-pm__total{
	color:var(--co-ink);
	font-size:var(--co-fs-body-s);
	font-weight:700;
	line-height:1.35;
}
body.sst-co-ab.sst-co-v-b .sst-pm__total-amount{font-weight:800;letter-spacing:-.01em}
body.sst-co-ab.sst-co-v-b .sst-pm__total-fee{color:var(--co-mute);font-weight:650}

/* The surcharge row in the rail is coloured ONCE, in §10, keyed on the stamp
   alone. It used to be restated here as well; two rules for one row is how the
   H-1 leak survived a read-through, so this is deliberately just a pointer. */

/* ---- 22.3 the member confirm strip (P4) --------------------------------- */
/* Base renders it EXPANDED and lets the JS collapse, and the collapse is
   `max-height:0` on #customer_details — never `display:none`, or a required
   field stops being focusable and Chrome refuses to submit with no visible
   reason. This block touches neither. */
body.sst-co-ab.sst-co-v-b .sst-co-member{
	padding:var(--co-pad);
	border-color:var(--co-rule);
	border-radius:var(--co-radius);
	background:var(--co-card);
	box-shadow:var(--co-shadow);
	font-size:var(--co-fs-body-s);
}
body.sst-co-ab.sst-co-v-b .sst-co-member__greet{
	color:var(--co-ink);
	font-size:var(--co-fs-body);
	font-weight:800;
	letter-spacing:-.012em;
}
body.sst-co-ab.sst-co-v-b .sst-co-member__ship{
	color:var(--co-mute);
	font-size:var(--co-fs-body-s);
}
/* secondary, like every other "go and change something" control in this skin */
body.sst-co-ab.sst-co-v-b .sst-co-member__edit{
	border-color:var(--co-primary);
	border-radius:var(--co-radius-input);
	color:var(--co-primary);
	font-family:var(--co-font);
	font-size:var(--co-fs-body-s);
	font-weight:700;
	transition:background var(--co-t),color var(--co-t);
}
body.sst-co-ab.sst-co-v-b .sst-co-member__edit:hover{background:var(--co-secondary-hover)}

/* ---- 22.4 the compact page head (P2-5) ---------------------------------- */
/* Base shows this only ≤430 and hides the theme's own title at the same width,
   so there is exactly one visible h1. Do not widen the window here without
   hiding the theme title at the same width — two h1s is worse than a long one. */
body.sst-co-ab.sst-co-v-b .sst-co-pagehead{
	color:var(--co-ink);
	font-family:var(--co-font);
	font-size:23px;
	font-weight:800;
	letter-spacing:-.022em;
	line-height:1.2;
}

/* ---- 22.5 the busy window (P1-10) --------------------------------------- */
/* The FedEx rate call takes tens of seconds on this store, and during it the
   bar and the CTA advertise a subtotal-only amount (measured ¥27,000 → ¥34,924
   after rates). WS-2 sets `data-sst-busy="1"` and has no visual opinion; B
   quiets the amount so it does not read as final. Not `disabled` — the button
   must stay operable, only visibly unsettled. */
body.sst-co-ab.sst-co-v-b [data-sst-busy="1"] .sst-pay__amount,
body.sst-co-ab.sst-co-v-b [data-sst-busy="1"] .sst-co-bar__amount{
	opacity:.55;
	transition:opacity var(--co-t);
}

/* ============================================================================
   23. REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
	body.sst-co-ab.sst-co-v-b,
	body.sst-co-ab.sst-co-v-b *,
	body.sst-co-ab.sst-co-v-b *::before,
	body.sst-co-ab.sst-co-v-b *::after{
		transition-duration:.01ms!important;
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		scroll-behavior:auto!important;
	}
}