/* =========================================================================
   SOS — WooCommerce Blocks Checkout: Shipping + Payment option "pills"
   Target: sentineloceansystems.com/checkout/  (Enfold child theme + PPCP)
   Paste into: Appearance → Customize → Additional CSS
   -------------------------------------------------------------------------
   Built and verified against the LIVE DOM, 19 Aug 2026. Every selector below
   was confirmed to hit its target in-browser.

   WHAT IT DOES
   1. Shipping options  → white outlined pills, black-ringed when selected
   2. Payment options   → full-width 56px brand-coloured pills
   3. Card pill         → Visa / Mastercard / Amex / Discover marks, inline SVG
   4. Place Order button→ turns PayPal blue when PayPal is the chosen method
   5. Dropdown arrows   → removes Enfold's blurry PNG arrow doubling up on
                          WooCommerce's SVG chevron
   6. Primary CTAs      → pill-shaped on both /cart and /checkout

   GATEWAYS PRESENT ON THIS SITE
     • ppcp-credit-card-gateway  ("Debit & Credit Cards")
     • ppcp-gateway             ("PayPal")

   DESIGN RULES BEING ENFORCED (deliberate — see NOTES at the bottom)
   • Unselected = white + hairline border. Only ONE pill is ever filled.
   • Text is LEFT-aligned. Express Checkout buttons are centre-aligned. This
     is the strongest cue that says "choice", not "action".
   • The selected payment pill keeps its 28px radius on all four corners and
     the accordion panel sits inside it, so it reads as one enclosed card —
     not a floating button with orphaned text underneath.
   • Selection is fill + tick glyph (redundant encoding), so it survives
     colour-blindness and Windows High Contrast (which strips backgrounds).
   • The native radio input stays in the DOM, focusable and tabbable.

   WHY SO MANY !important FLAGS
   Confirmed in live testing, not defensive habit:
     • Enfold's #top selectors beat plain classes on colour, font-size and h2
     • WooCommerce Blocks sets display:none + a transform on ::after, which
       silently kills the tick
     • Woo's --highlight-checked draws its own border, causing double outlines
   ========================================================================= */

/* =========================================================================
   PART 1 — SHIPPING OPTIONS
   No accordion wrapper here: the <label> itself is the pill. Deliberately
   quieter than the payment pills (outline + tick, not a full colour fill) so
   payment stays the loudest thing in the checkout.
   ========================================================================= */

#shipping-option .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

#shipping-option .wc-block-components-radio-control::before,
#shipping-option .wc-block-components-radio-control::after {
	display: none !important;
}

#shipping-option .wc-block-components-radio-control__option {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;               /* min-height, never height — 200% zoom */
	margin: 0;
	padding: 14px 20px 14px 56px;
	background: #fff !important;
	border: 1px solid #8a8a8a !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	outline: none !important;
	color: #1a1a1a !important;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

#shipping-option .wc-block-components-radio-control__option--checked-option-highlighted,
#shipping-option .wc-block-components-radio-control__option-checked {
	background: #fafafa !important;
	border: 2px solid #111 !important;
	padding: 13px 19px 13px 55px !important;  /* compensate the 2px border */
}

#shipping-option .wc-block-components-radio-control__option-checked::before {
	background: #111 !important;
	border-color: #111 !important;
}

#shipping-option .wc-block-components-radio-control__option-checked::after {
	opacity: 1 !important;
	border-color: #fff !important;
}

/* Price sits hard right, and stays bold enough to scan */
#shipping-option .wc-block-components-radio-control__secondary-label,
#shipping-option .wc-block-components-radio-control__secondary-description,
#shipping-option .wc-block-components-formatted-money-amount {
	margin-left: auto !important;
	flex: 0 0 auto;
	font-weight: 700 !important;
	color: #1a1a1a !important;
}

@media (hover: hover) {
	#shipping-option
		.wc-block-components-radio-control__option:not(
			.wc-block-components-radio-control__option-checked
		):hover {
		background: #f5f5f5 !important;
		border-color: #111 !important;
	}

	#shipping-option
		.wc-block-components-radio-control__option:not(
			.wc-block-components-radio-control__option-checked
		):hover::before {
		border-color: #111 !important;
	}
}

#shipping-option
	.wc-block-components-radio-control__option:has(
		.wc-block-components-radio-control__input:focus-visible
	) {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111 !important;
}

/* =========================================================================
   PART 2 — PAYMENT OPTIONS
   ========================================================================= */

#payment-method .wc-block-components-radio-control {
	--sos-pill-radius: 28px;
	--sos-pill-border: #8a8a8a;
	--sos-pill-fill: #111111;         /* default / card */
	--sos-pill-hover-bg: #f5f5f5;
	--sos-pill-hover-border: #111111;
	--sos-pill-hover-text: #111111;

	display: flex;
	flex-direction: column;
	gap: 20px;      /* payment panels are enclosed cards — they need more air
	                   between them than the shipping pills do */
	border: 0;
	border-radius: 0;
	background: none;
}

/* PayPal pill accent — PayPal blue, matched to the Express Checkout button
   and to the Place Order button in Part 4. */
#payment-method
	.wc-block-components-radio-control-accordion-option:has([id$="ppcp-gateway"]) {
	--sos-pill-fill: #0070ba;
	--sos-pill-hover-bg: #f2f8fc;
	--sos-pill-hover-border: #0070ba;
	--sos-pill-hover-text: #005c99;
}

/* --- The pill container. Styled on the OPTION WRAPPER (not the label) so the
   expanded accordion panel lives inside the same rounded box. ------------- */
#payment-method .wc-block-components-radio-control-accordion-option {
	position: relative;
	margin: 0;
	background: #fff;
	border: 1px solid var(--sos-pill-border);
	border-radius: var(--sos-pill-radius);
	overflow: hidden;
	transition: border-color 0.15s ease, border-radius 0.15s ease;
}

/* Kill WooCommerce's own --highlight-checked border/shadow (double outline) */
#payment-method .wc-block-components-radio-control--highlight-checked::before,
#payment-method .wc-block-components-radio-control--highlight-checked::after,
#payment-method
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted::before,
#payment-method
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted::after {
	display: none !important;
}

#payment-method .wc-block-components-radio-control__option,
#payment-method .wc-block-components-radio-control__option-checked {
	box-shadow: none !important;
	border: 0 !important;
	outline: none;
}

/* --- The label strip (the visible pill) --------------------------------- */
#payment-method .wc-block-components-radio-control__option {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	margin: 0;
	padding: 14px 20px 14px 56px;
	border-radius: 0;
	background: transparent;
	text-align: left;              /* NOT centred — the "not a button" cue */
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#payment-method .wc-block-components-radio-control__option-layout,
#payment-method .wc-block-components-radio-control__label-group,
#payment-method .wc-block-components-radio-control__label {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 12px;
}

/* Enfold forces 13px / #444 on bare spans inside the label. Confirmed live. */
#shipping-option .wc-block-components-radio-control__option,
#shipping-option .wc-block-components-radio-control__option *,
#payment-method .wc-block-components-radio-control__option,
#payment-method .wc-block-components-radio-control__option *,
#payment-method .wc-block-components-radio-control__label span {
	color: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
}

#payment-method .wc-block-components-radio-control__option {
	color: #1a1a1a !important;
}

#payment-method .wc-block-components-radio-control__option-checked {
	color: #fff !important;
}

/* --- The radio input — invisible, full-size, focusable and tabbable.
   NEVER display:none (removes it from tab order = un-completable checkout). */
#shipping-option .wc-block-components-radio-control__input,
#payment-method .wc-block-components-radio-control__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: inherit;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

/* --- Selection indicator: hairline ring → filled disc + tick.
   The !important flags are load-bearing: WooCommerce Blocks sets display:none,
   a transform and a background on ::after. Confirmed live. ---------------- */
#shipping-option .wc-block-components-radio-control__option::before,
#payment-method .wc-block-components-radio-control__option::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	width: 22px !important;
	height: 22px !important;
	margin-top: -11px !important;
	box-sizing: border-box !important;
	border: 2px solid var(--sos-pill-border, #8a8a8a) !important;
	border-radius: 50% !important;
	background: #fff !important;
	transform: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease;
}

#shipping-option .wc-block-components-radio-control__option::after,
#payment-method .wc-block-components-radio-control__option::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 25px !important;
	top: 50% !important;
	width: 6px !important;
	height: 11px !important;
	margin-top: -8px !important;
	box-sizing: border-box !important;
	background: transparent !important;
	border: solid var(--sos-pill-fill, #111) !important;
	border-width: 0 2px 2px 0 !important;
	border-radius: 0 !important;
	transform: rotate(45deg) !important;
	box-shadow: none !important;
	opacity: 0 !important;
	transition: opacity 0.15s ease;
}

/* --- Hover — desktop pointers only, or the state latches after tap on iOS - */
@media (hover: hover) {
	#payment-method
		.wc-block-components-radio-control-accordion-option:not(
			.wc-block-components-radio-control-accordion-option--checked-option-highlighted
		):hover {
		border-color: var(--sos-pill-hover-border);
	}

	#payment-method
		.wc-block-components-radio-control-accordion-option:not(
			.wc-block-components-radio-control-accordion-option--checked-option-highlighted
		):hover
		.wc-block-components-radio-control__option {
		background: var(--sos-pill-hover-bg);
		color: var(--sos-pill-hover-text) !important;
	}

	#payment-method
		.wc-block-components-radio-control-accordion-option:not(
			.wc-block-components-radio-control-accordion-option--checked-option-highlighted
		):hover
		.wc-block-components-radio-control__option::before {
		border-color: var(--sos-pill-hover-border) !important;
	}
}

/* --- SELECTED: fill the strip, square the bottom corners so the pill fuses
   with its accordion panel ------------------------------------------------ */
#payment-method
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
#payment-method
	.wc-block-components-radio-control-accordion-option:has(
		.wc-block-components-radio-control__option-checked
	) {
	border-color: var(--sos-pill-fill);
	border-radius: var(--sos-pill-radius);   /* all four corners — card, not tab */
}

#payment-method .wc-block-components-radio-control__option-checked {
	background: var(--sos-pill-fill);
}

#payment-method .wc-block-components-radio-control__option-checked::before {
	background: #fff !important;
	border-color: #fff !important;
}

#payment-method .wc-block-components-radio-control__option-checked::after {
	opacity: 1 !important;
}

/* --- The accordion panel — light grey (#fafafa, same as the selected shipping
   pill) so the white hosted-field inputs have something to sit against.
   Must stay LIGHT: PPCP mounts cross-origin card fields in here and their
   inputs are white — a dark panel would look broken and you can't restyle
   inside the iframe. Do not animate its height either (iframe resize thrash
   and mis-measured field boxes). ------------------------------------------ */
#payment-method .wc-block-components-radio-control-accordion-content {
	margin: 0;
	padding: 18px 24px 28px;   /* deep bottom pad so content clears the curve */
	background: #fafafa;
	color: #1a1a1a;
	border-top: 0;
	border-radius: 0 0 27px 27px;  /* 1px inside the wrapper's 28px border */
}

#payment-method .wc-block-components-radio-control-accordion-content:empty {
	display: none;
	padding: 0;
}

#payment-method .wc-block-components-radio-control-accordion-content p {
	margin: 0 0 8px;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5;
	color: #4a4a4a !important;
}

#payment-method .wc-block-components-radio-control-accordion-content p:last-child {
	margin-bottom: 0;
}

/* --- Focus: :focus-visible only, so mouse clicks don't ring. Two-tone so it
   reads on both white and near-black grounds. ----------------------------- */
#payment-method
	.wc-block-components-radio-control-accordion-option:has(
		.wc-block-components-radio-control__input:focus-visible
	) {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}

/* --- Section headings become quiet rules, so "Shipping options" and
   "Payment options" read as dividers between kinds of thing, not as more
   content. h2 needs !important — Enfold's #top h2 wins otherwise. --------- */
#payment-method {
	margin-top: 40px;
}

#shipping-option h2.wc-block-components-title,
#shipping-option .wc-block-components-checkout-step__title,
#payment-method h2.wc-block-components-title,
#payment-method .wc-block-components-checkout-step__title {
	display: block !important;
	width: 100%;
	margin: 0 0 16px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid #e5e5e5 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: #6e6e6e !important;
}

/* --- Order-placement / busy state. Fade only the UNSELECTED pill — the buyer
   must still see what they chose while the spinner runs. ------------------ */
#payment-method.is-loading
	.wc-block-components-radio-control-accordion-option:not(
		.wc-block-components-radio-control-accordion-option--checked-option-highlighted
	) {
	opacity: 0.4;
	pointer-events: none;
}

/* =========================================================================
   PART 3 — CARD BRAND MARKS on the "Debit & Credit Cards" pill
   Inline SVG data-URI, so this works regardless of PPCP plugin settings and
   costs zero extra HTTP requests. The white card bodies keep the marks
   legible against the black fill when the pill is selected.

   ALTERNATIVE: WooCommerce → Settings → Payments → PayPal → Payment Methods →
   Advanced Credit and Debit Card Payments → Configure has a "Card Icons"
   setting that renders PayPal's own official artwork into the (currently
   empty) .wc-block-components-payment-method-icons container. If you turn
   that on, delete this Part 3 block to avoid showing two sets of logos.
   ========================================================================= */

#payment-method .wc-block-components-payment-method-icons {
	margin: 0 0 0 auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

#payment-method .wc-block-components-payment-method-icons img {
	max-height: 22px;
	width: auto;
	display: block;
}

/* PPCP renders an EMPTY icon container on this site — without this you get a
   stray blob on the right of the selected pill. Confirmed live. */
#payment-method .wc-block-components-payment-method-icons:empty {
	display: none !important;
}

#payment-method
	.wc-block-components-radio-control-accordion-option:has(
		[id$="credit-card-gateway"]
	)
	.wc-block-components-radio-control__label::after {
	content: "";
	display: block;
	margin-left: auto;
	flex: 0 0 auto;
	width: 164px;
	height: 24px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'164'%20height%3D'24'%20viewBox%3D'0%200%20164%2024'%3E%3Cg%20font-family%3D'Arial%2CHelvetica%2Csans-serif'%20font-weight%3D'bold'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'38'%20height%3D'24'%20rx%3D'4'%20fill%3D'%23fff'%20stroke%3D'%23DEDEDE'%2F%3E%3Ctext%20x%3D'19'%20y%3D'16'%20font-size%3D'10'%20fill%3D'%231A1F71'%20text-anchor%3D'middle'%20font-style%3D'italic'%3EVISA%3C%2Ftext%3E%3Crect%20x%3D'42'%20y%3D'0'%20width%3D'38'%20height%3D'24'%20rx%3D'4'%20fill%3D'%23fff'%20stroke%3D'%23DEDEDE'%2F%3E%3Ccircle%20cx%3D'56'%20cy%3D'12'%20r%3D'7'%20fill%3D'%23EB001B'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'12'%20r%3D'7'%20fill%3D'%23F79E1B'%20fill-opacity%3D'0.85'%2F%3E%3Crect%20x%3D'84'%20y%3D'0'%20width%3D'38'%20height%3D'24'%20rx%3D'4'%20fill%3D'%231F72CF'%2F%3E%3Ctext%20x%3D'103'%20y%3D'16'%20font-size%3D'8'%20fill%3D'%23fff'%20text-anchor%3D'middle'%3EAMEX%3C%2Ftext%3E%3Crect%20x%3D'126'%20y%3D'0'%20width%3D'38'%20height%3D'24'%20rx%3D'4'%20fill%3D'%23fff'%20stroke%3D'%23DEDEDE'%2F%3E%3Ctext%20x%3D'143'%20y%3D'14'%20font-size%3D'5.4'%20fill%3D'%234D4D4D'%20text-anchor%3D'middle'%3EDISCOVER%3C%2Ftext%3E%3Cpath%20d%3D'M126%2020%20Q150%2020%20164%2012%20L164%2020%20Q164%2024%20160%2024%20L130%2024%20Q126%2024%20126%2020%20Z'%20fill%3D'%23F76B1C'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
		no-repeat center / contain;
}

/* =========================================================================
   PART 4 — Place Order button turns PayPal blue when PayPal is selected.
   Woo already swaps the label to "Proceed to PayPal"; this matches the
   colour. Driven by :has() on the checked input — no JS needed.
   ========================================================================= */

.wc-block-checkout__form:has(
		#radio-control-wc-payment-method-options-ppcp-gateway:checked
	)
	.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout:has(
		#radio-control-wc-payment-method-options-ppcp-gateway:checked
	)
	.wc-block-components-checkout-place-order-button {
	background-color: #0070ba !important;
	border-color: #0070ba !important;
	color: #fff !important;
}

.wc-block-checkout__form:has(
		#radio-control-wc-payment-method-options-ppcp-gateway:checked
	)
	.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout:has(
		#radio-control-wc-payment-method-options-ppcp-gateway:checked
	)
	.wc-block-components-checkout-place-order-button:hover {
	background-color: #005c99 !important;
	border-color: #005c99 !important;
}

/* =========================================================================
   PART 5 — Fix the doubled / blurry dropdown arrow

   Two arrows were being drawn on every WooCommerce Blocks <select>:
     1. Enfold sets appearance:none and paints its own arrow as a base64 PNG
        background-image — a 30x13 bitmap at background-size:auto, which is why
        it looked soft and grey.
     2. WooCommerce Blocks renders its own crisp 24x24 SVG chevron
        (.wc-blocks-components-select__expand) on top of it.

   Overlapping, they read as one smudged double-chevron. Drop the bitmap, keep
   the vector. Scoped to the Blocks class so Enfold's own selects elsewhere on
   the site are untouched.
   ========================================================================= */

.wc-blocks-components-select__select,
#top .wc-blocks-components-select__select,
.wc-block-components-form .wc-blocks-components-select__select {
	background-image: none !important;
	padding-right: 36px !important;   /* clear the SVG, which sits absolute */
}

.wc-blocks-components-select__expand {
	fill: #1a1a1a;
	right: 12px;
}

/* =========================================================================
   PART 6 — Primary CTA buttons become pills
   Matches the Express Checkout / PayPal button shape across the funnel:
     • /cart      "Proceed to Checkout"
     • /checkout  "Place Order"
     • /checkout  "Proceed to PayPal"  (same element, relabelled by Woo)
   overflow:hidden keeps Woo's loading-spinner overlay inside the radius.
   ========================================================================= */

a.wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	border-radius: 999px !important;
	overflow: hidden;
}

/* =========================================================================
   PART 7 — Mobile (verified at 375px)
   ========================================================================= */

@media (max-width: 480px) {
	#payment-method {
		margin-top: 32px;
	}

	#shipping-option .wc-block-components-radio-control__option,
	#payment-method .wc-block-components-radio-control__option {
		padding: 14px 16px 14px 50px;
	}

	#shipping-option .wc-block-components-radio-control__option,
	#shipping-option .wc-block-components-radio-control__option *,
	#payment-method .wc-block-components-radio-control__option,
	#payment-method .wc-block-components-radio-control__option *,
	#payment-method .wc-block-components-radio-control__label span {
		font-size: 15px !important;
	}

	#shipping-option .wc-block-components-radio-control__option::before,
	#payment-method .wc-block-components-radio-control__option::before {
		left: 15px !important;
	}

	#shipping-option .wc-block-components-radio-control__option::after,
	#payment-method .wc-block-components-radio-control__option::after {
		left: 22px !important;
	}

	#payment-method
		.wc-block-components-radio-control-accordion-option:has(
			[id$="credit-card-gateway"]
		)
		.wc-block-components-radio-control__label::after {
		width: 110px;
		height: 16px;
	}

	#payment-method .wc-block-components-radio-control-accordion-content {
		padding: 16px 18px 24px;
	}

	#payment-method .wc-block-components-payment-method-icons img {
		max-height: 18px;
	}
}

/* =========================================================================
   PART 8 — Windows High Contrast / forced-colors.
   background-color is stripped in this mode, so a fill-only design would
   communicate nothing at all. Restore a border + system-colour state.
   ========================================================================= */

@media (forced-colors: active) {
	#shipping-option .wc-block-components-radio-control__option,
	#payment-method .wc-block-components-radio-control-accordion-option {
		border: 1px solid ButtonBorder !important;
	}

	#shipping-option .wc-block-components-radio-control__option-checked,
	#payment-method
		.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
		border: 3px solid Highlight !important;
	}

	#shipping-option .wc-block-components-radio-control__option::before,
	#payment-method .wc-block-components-radio-control__option::before {
		border-color: ButtonBorder !important;
		forced-color-adjust: none;
	}

	#shipping-option .wc-block-components-radio-control__option-checked::after,
	#payment-method .wc-block-components-radio-control__option-checked::after {
		border-color: ButtonText !important;
	}
}

/* =========================================================================
   PART 9 — Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	#shipping-option .wc-block-components-radio-control__option,
	#shipping-option .wc-block-components-radio-control__option::before,
	#shipping-option .wc-block-components-radio-control__option::after,
	#payment-method .wc-block-components-radio-control-accordion-option,
	#payment-method .wc-block-components-radio-control__option,
	#payment-method .wc-block-components-radio-control__option::before,
	#payment-method .wc-block-components-radio-control__option::after {
		transition: none;
	}
}

/* =========================================================================
   NOTES — read before "fixing" anything above

   COLOUR
   • PayPal pill and Place Order button are both #0070ba, matching the
     Express Checkout button. White on #0070ba = 5.2:1 — passes WCAG AA for
     normal text (4.5:1), but it is the weakest contrast on the page. If you
     ever want more headroom, #003087 (PayPal dark navy) gives 11.9:1 and
     still reads unmistakably as PayPal.
   • Card pill is #111111; white on it = 18.9:1 (AAA), matching the site's
     existing black CTA language.
   • Unselected border #8a8a8a = 3.4:1 on white, clearing WCAG 1.4.11
     non-text contrast. The theme's #d4d4d4 rule colour is 1.6:1 and FAILS —
     do not swap it back in.

   THE ONE THING TO PROTECT
   Because the PayPal pill, the Express Checkout button and the Place Order
   button now share a colour, the anti-button devices are doing real work:
   left-aligned label text, only one pill filled at a time, the expansion into
   an enclosed card, and no shadow / no :active press on the pills. If any of
   those get removed, buyers start asking "did I already pay?".

   • Only ONE pill is ever filled. Two saturated pills side by side reads as
     two buttons and a coin flip; one filled + one outlined reads as a choice.
   • Labels must stay NOUNS ("PayPal", "Debit & Credit Cards"). The moment
     they become verbs ("Pay with PayPal") the button confusion returns.
   • Full-width stacked, not 2-up: the accordion panel opening under a single
     column is the only spatially coherent arrangement.
   • Payment pills are 56px, deliberately taller than the 48px Express buttons.
   • Shipping is intentionally quieter than payment — outline + tick, not a
     colour fill. With only one shipping method available, a big filled pill
     for a non-choice would shout for no reason. If a second method is ever
     added and you want more emphasis, change the #fafafa background in
     Part 1 to #111 and flip the label colour to #fff.
   • :has() drives the per-gateway colour, the selected-wrapper state, the card
     marks and the Place Order button colour. Supported in all current
     browsers. Older ones degrade gracefully: black fill everywhere, no card
     marks, black Place Order button — nothing breaks.
   ========================================================================= */