/**
 * BustBunny checkout restyle (owner request 2026-08-11).
 * Same elements, same order, same hooks: this file only re-dresses the existing
 * WFACP template-9 checkout. Gated behind the `checkout_restyle_enabled` setting
 * (default OFF), so shipping this file changes nothing until the toggle is on.
 * The theme paints hard; like the account panels (J2), colors carry !important.
 */

/* ---------- page canvas ---------- */
body.woocommerce-checkout {
	background: #f6f7f9 !important;
}

/* ---------- every form section becomes one calm card ---------- */
body.woocommerce-checkout .wfacp-section.wfacp-hg-by-box {
	background: #fff !important;
	border: 1px solid #e7ebf1 !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
	padding: 26px 26px 22px !important;
	margin: 0 0 18px !important;
}

/* Section titles: quiet, consistent, with a slim brand tick */
body.woocommerce-checkout h2.wfacp_section_heading {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: .01em !important;
	color: #101828 !important;
	margin: 0 0 16px !important;
	padding: 0 0 12px 14px !important;
	border-bottom: 1px solid #eef1f5 !important;
	position: relative !important;
	text-transform: none !important;
}
body.woocommerce-checkout h2.wfacp_section_heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 14px;
	width: 4px;
	border-radius: 4px;
	background: #e0409a;
}

/* ---------- inputs ---------- */
body.woocommerce-checkout .wfacp-form-control,
body.woocommerce-checkout select.wfacp-form-control,
body.woocommerce-checkout .select2-selection {
	min-height: 46px !important;
	border: 1.5px solid #dde3ea !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #101828 !important;
	font-size: .95rem !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.woocommerce-checkout .wfacp-form-control:focus,
body.woocommerce-checkout .select2-container--open .select2-selection {
	border-color: #e0409a !important;
	box-shadow: 0 0 0 3px rgba(224, 64, 154, .12) !important;
	outline: none !important;
}
body.woocommerce-checkout .wfacp-form-control-label {
	color: #475467 !important;
	font-weight: 600 !important;
}
body.woocommerce-checkout .wfacp_inline_error {
	border-radius: 8px !important;
}

/* ---------- express checkout ---------- */
body.woocommerce-checkout .wfacp_smart_button_container {
	border: 0 !important;
	background: transparent !important;
}
body.woocommerce-checkout .wfacp_smart_button_container .wfacp_single_btn_shimmer {
	border-radius: 10px !important;
	overflow: hidden !important;
}

/* ---------- shipping methods: selectable card rows ---------- */
body.woocommerce-checkout .wfacp_shipping_method ul li,
body.woocommerce-checkout ul#shipping_method li {
	border: 1.5px solid #e7ebf1 !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin: 0 0 10px !important;
	background: #fff !important;
	transition: border-color .15s ease, background .15s ease;
}
body.woocommerce-checkout .wfacp_shipping_method ul li:has(input:checked),
body.woocommerce-checkout ul#shipping_method li:has(input:checked) {
	border-color: #e0409a !important;
	background: #fdf5fa !important;
}

/* ---------- payment methods: same card row language ---------- */
body.woocommerce-checkout .wc_payment_methods .wc_payment_method {
	border: 1.5px solid #e7ebf1 !important;
	border-radius: 10px !important;
	margin: 0 0 10px !important;
	background: #fff !important;
	overflow: hidden !important;
	transition: border-color .15s ease;
}
body.woocommerce-checkout .wc_payment_methods .wc_payment_method:has(input:checked) {
	border-color: #e0409a !important;
}
body.woocommerce-checkout .wc_payment_methods .wc_payment_method > label {
	padding: 13px 14px !important;
	font-weight: 600 !important;
	color: #101828 !important;
}
body.woocommerce-checkout .wc_payment_methods .payment_box {
	background: #f9fafb !important;
	border-top: 1px solid #eef1f5 !important;
	color: #475467 !important;
}

/* ---------- the order bump: from yellow-dashed to the house pink card ---------- */
body.woocommerce-checkout .wfob_bump {
	border: 1.5px solid #f3c6de !important;
	background: #fdf2f8 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	padding: 16px !important;
}
body.woocommerce-checkout .wfob_bump * {
	animation: none !important;
}
body.woocommerce-checkout .wfob_bump [class*="arrow"],
body.woocommerce-checkout .wfob_bump [class*="pointer"] {
	display: none !important;
}
body.woocommerce-checkout .wfob_bump .wfob_bump_title_start,
body.woocommerce-checkout .wfob_bump h3,
body.woocommerce-checkout .wfob_bump h4 {
	color: #b83280 !important;
	background: transparent !important;
	text-decoration: none !important;
}
body.woocommerce-checkout .wfob_bump img {
	border-radius: 10px !important;
	border: 1px solid #f3c6de !important;
}

/* ---------- help bar + guarantee + consent ---------- */
body.woocommerce-checkout .bb-help-bar,
body.woocommerce-checkout [class*="need-help"],
body.woocommerce-checkout .wfacp_footer_text {
	background: #f9fafb !important;
	border-radius: 10px !important;
	color: #475467 !important;
}
body.woocommerce-checkout .bb-fk-guarantee {
	border: 1px solid #e7ebf1 !important;
	border-radius: 12px !important;
	background: #fff !important;
}

/* ---------- order summary column: match the card language ---------- */
body.woocommerce-checkout .wfacp_mini_cart_items,
body.woocommerce-checkout .wfacp_mini_cart_reviews,
body.woocommerce-checkout .wfacp_template_9_cart_item_details {
	background: #fff !important;
	border: 1px solid #e7ebf1 !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
body.woocommerce-checkout .wfacp_template_9_coupon .wfacp-form-control {
	border-radius: 10px !important;
}

/* ---------- the one loud element that stays loud: the pay button ---------- */
body.woocommerce-checkout #place_order {
	background: linear-gradient(180deg, #e0409a, #c9328a) !important;
	border: 0 !important;
	border-radius: 12px !important;
	min-height: 54px !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	letter-spacing: .02em !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(224, 64, 154, .25) !important;
	transition: transform .12s ease, box-shadow .12s ease;
}
body.woocommerce-checkout #place_order:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(224, 64, 154, .32) !important;
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	body.woocommerce-checkout .wfacp-section.wfacp-hg-by-box {
		padding: 18px 16px 14px !important;
		border-radius: 12px !important;
	}
}

/* ================================================================
 * Round 2 (owner review, 2026-08-11 late): fixes + order summary
 * ================================================================ */

/* 1. The 46px control sizing must never hit checkboxes/radios (it stretched the
      "Use a different billing address" toggle into a tall pill). */
body.woocommerce-checkout input[type="checkbox"].wfacp-form-control,
body.woocommerce-checkout input[type="radio"].wfacp-form-control,
body.woocommerce-checkout .wfacp_checkbox_field input {
	min-height: 0 !important;
	height: 18px !important;
	width: 18px !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	accent-color: #e0409a;
	flex: 0 0 18px !important;
}
body.woocommerce-checkout .wfacp_checkbox_field {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/* 2. Double borders: the row cards are OUR border; the list containers must not
      draw their own frame around them. */
body.woocommerce-checkout ul#shipping_method,
body.woocommerce-checkout .wfacp_shipping_method ul,
body.woocommerce-checkout ul.wc_payment_methods,
body.woocommerce-checkout .woocommerce-checkout-payment,
body.woocommerce-checkout .wc_payment_methods {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* 3. Consistent radios in both option lists (unselected were mismatched browser
      defaults next to the big custom selected dot). */
body.woocommerce-checkout ul#shipping_method input[type="radio"],
body.woocommerce-checkout .wc_payment_methods input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	border: 2px solid #cfd7e0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	position: relative !important;
	flex: 0 0 20px !important;
	margin: 0 10px 0 0 !important;
	vertical-align: middle !important;
	cursor: pointer;
}
body.woocommerce-checkout ul#shipping_method input[type="radio"]:checked,
body.woocommerce-checkout .wc_payment_methods input[type="radio"]:checked {
	border-color: #e0409a !important;
}
body.woocommerce-checkout ul#shipping_method input[type="radio"]:checked::before,
body.woocommerce-checkout .wc_payment_methods input[type="radio"]:checked::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #e0409a;
}

/* 4. Guarantee now sits BELOW the form: slim, centered, left-aligned text. */
body.woocommerce-checkout .bb-fk-guarantee {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	max-width: 720px !important;
	margin: 6px auto 42px !important;
	padding: 14px 20px !important;
	text-align: left !important;
}
body.woocommerce-checkout .bb-fk-guarantee-icon {
	color: #e0409a !important;
	font-size: 1.3rem !important;
}

/* 5. "Create an account" box: solid quiet card instead of the dashed frame. */
body.woocommerce-checkout .create-account {
	border: 1.5px solid #e7ebf1 !important;
	border-style: solid !important;
	border-radius: 10px !important;
	background: #f9fafb !important;
	padding: 12px 14px !important;
}

/* ================================================================
 * 6. ORDER SUMMARY ("Your Cart") rework
 * ================================================================ */

/* The card itself: roomier, no inner table frames anywhere. */
body.woocommerce-checkout .wfacp_template_9_cart_item_details,
body.woocommerce-checkout .wfacp_min_cart_widget {
	padding: 22px 22px 18px !important;
}
body.woocommerce-checkout table.wfacp_mini_cart_items,
body.woocommerce-checkout table.wfacp_mini_cart_items td,
body.woocommerce-checkout table.wfacp_mini_cart_items th,
body.woocommerce-checkout table.wfacp_mini_cart_items tr,
body.woocommerce-checkout .wfacp_mini_cart_reviews,
body.woocommerce-checkout .wfacp_mini_cart_reviews td,
body.woocommerce-checkout .wfacp_mini_cart_reviews th,
body.woocommerce-checkout .wfacp_mini_cart_reviews tr {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Item row: thumb left, name + meta stacked beside it, price top right. */
body.woocommerce-checkout tr.wfacp_product_row > td.product-name-area {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	padding: 6px 0 10px !important;
	width: auto !important;
}
body.woocommerce-checkout tr.wfacp_product_row .product-image {
	flex: 0 0 64px !important;
	position: relative !important;
}
body.woocommerce-checkout tr.wfacp_product_row .product-image img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	border: 1px solid #eef1f5 !important;
}
body.woocommerce-checkout .wfacp_order_summary_item_name {
	font-size: .92rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: #101828 !important;
}
body.woocommerce-checkout tr.wfacp_product_row td.product-total {
	text-align: right !important;
	white-space: nowrap !important;
	font-weight: 700 !important;
	color: #101828 !important;
	padding: 6px 0 0 10px !important;
	vertical-align: top !important;
}

/* Quantity bubble on the thumbnail: brand pink, not mint green. */
body.woocommerce-checkout .wfacp-qty-ball,
body.woocommerce-checkout .wfacp-qty-count {
	background: #e0409a !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	font-weight: 700 !important;
}

/* Subscription line under the item: quiet single block, no orphan label. */
body.woocommerce-checkout .wfacp_mini_cart_items dl.variation {
	margin: 6px 0 0 !important;
	font-size: .78rem !important;
	line-height: 1.45 !important;
	color: #667085 !important;
	display: block !important;
}
body.woocommerce-checkout .wfacp_mini_cart_items dl.variation dt { display: none !important; }
body.woocommerce-checkout .wfacp_mini_cart_items dl.variation dd { margin: 0 !important; }
body.woocommerce-checkout .wfacp_mini_cart_items dl.variation p { margin: 0 !important; }
body.woocommerce-checkout .bb-checkout-sub-badge {
	margin: 6px 0 4px !important;
	display: inline-block !important;
}

/* Compact quantity stepper. */
body.woocommerce-checkout .wfacp_quantity_selector {
	display: inline-flex !important;
	align-items: stretch !important;
	border: 1px solid #e2e7ee !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	height: 30px !important;
	margin-top: 8px !important;
}
body.woocommerce-checkout .wfacp_quantity_selector .value-button {
	width: 28px !important;
	border: 0 !important;
	background: #f6f7f9 !important;
	color: #475467 !important;
	font-size: .95rem !important;
	line-height: 28px !important;
	cursor: pointer;
}
body.woocommerce-checkout .wfacp_quantity_selector input {
	width: 34px !important;
	min-height: 0 !important;
	height: 28px !important;
	border: 0 !important;
	border-left: 1px solid #e2e7ee !important;
	border-right: 1px solid #e2e7ee !important;
	border-radius: 0 !important;
	text-align: center !important;
	font-size: .85rem !important;
}

/* Remove-item control: small quiet circle, clear of the price. */
body.woocommerce-checkout .wfacp_delete_item_wrap a,
body.woocommerce-checkout .wfacp_mini_cart_remove_item_from_cart {
	color: #98a2b3 !important;
	opacity: .8;
}

/* Coupon toggle: quiet grey line with a pink action, not a bare blue link. */
body.woocommerce-checkout .wfacp_main_showcoupon,
body.woocommerce-checkout .wfacp_main_showcoupon a {
	color: #667085 !important;
	font-size: .85rem !important;
	text-align: center !important;
	text-decoration: none !important;
}
body.woocommerce-checkout .wfacp_main_showcoupon a { color: #c9328a !important; font-weight: 600 !important; }

/* Totals: airy rows, a single divider, a confident Total. */
body.woocommerce-checkout .wfacp_mini_cart_reviews th,
body.woocommerce-checkout .wfacp_mini_cart_reviews td {
	padding: 7px 0 !important;
	font-size: .9rem !important;
	color: #475467 !important;
	font-weight: 500 !important;
}
body.woocommerce-checkout .wfacp_mini_cart_reviews td { text-align: right !important; }
body.woocommerce-checkout .wfacp_mini_cart_reviews tr.order-total th,
body.woocommerce-checkout .wfacp_mini_cart_reviews tr.order-total td {
	border-top: 1px solid #eef1f5 !important;
	padding-top: 13px !important;
	font-size: 1.08rem !important;
	font-weight: 800 !important;
	color: #101828 !important;
}

/* Our renews row: a soft pink strip so the recurring commitment reads clearly. */
body.woocommerce-checkout tr.bb-checkout-recurring-row th,
body.woocommerce-checkout tr.bb-checkout-recurring-row td {
	background: #fdf2f8 !important;
	color: #b83280 !important;
	font-size: .82rem !important;
	font-weight: 600 !important;
	padding: 9px 10px !important;
}
body.woocommerce-checkout tr.bb-checkout-recurring-row th { border-radius: 8px 0 0 8px !important; }
body.woocommerce-checkout tr.bb-checkout-recurring-row td { border-radius: 0 8px 8px 0 !important; }

/* Round 3: the two stragglers + summary column width. */

/* The yellow "Need help ordering?" strip -> quiet neutral card. */
body.woocommerce-checkout .help-ordering,
body.woocommerce-checkout .help-ordering * {
	background: #f9fafb !important;
	background-image: none !important;
}
body.woocommerce-checkout .help-ordering {
	border-radius: 10px !important;
	border: 1px solid #eef1f5 !important;
	padding: 12px !important;
	color: #475467 !important;
}
body.woocommerce-checkout .help-ordering a { color: #c9328a !important; }

/* The dashed frame around "Create an account" lives on the account-fields wrapper. */
body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout .woocommerce-account-fields .create-account {
	border-style: solid !important;
	border-color: #e7ebf1 !important;
	border-width: 1.5px !important;
	border-radius: 10px !important;
	background: #f9fafb !important;
}
body.woocommerce-checkout .woocommerce-account-fields .create-account {
	border: 0 !important;
	background: transparent !important;
}

/* Give the item name column the room it needs; price keeps a slim fixed lane. */
body.woocommerce-checkout table.wfacp_mini_cart_items td.product-name-area { width: 74% !important; }
body.woocommerce-checkout table.wfacp_mini_cart_items td.product-total { width: 26% !important; }
body.woocommerce-checkout tr.wfacp_product_row .product-image { flex-basis: 56px !important; }
body.woocommerce-checkout tr.wfacp_product_row .product-image img { width: 56px !important; height: 56px !important; }

/* Round 4: order-summary item row escapes the table grid entirely.
   The two-td table split strangled the name column in the narrow sidebar;
   as a flex row the details take every free pixel and the price keeps a
   fixed lane, so the meta stops shattering into one-word lines. */
body.woocommerce-checkout tr.wfacp_product_row {
	display: flex !important;
	align-items: flex-start !important;
	width: 100% !important;
}
body.woocommerce-checkout tr.wfacp_product_row > td.product-name-area {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}
body.woocommerce-checkout tr.wfacp_product_row > td.product-total {
	flex: 0 0 auto !important;
	width: auto !important;
	padding-top: 6px !important;
}
body.woocommerce-checkout .wfacp_mini_cart_items dl.variation {
	font-size: .75rem !important;
	color: #98a2b3 !important;
}
body.woocommerce-checkout .wfacp_order_summary_item_name { font-size: .88rem !important; }

/* ================================================================
 * Round 5 (owner review): OR divider, real checked dots, and the
 * order summary's ACTUAL markup (elementor mini-cart variant).
 * ================================================================ */

/* Express checkout reads as one flow now; the OR strip goes. */
body.woocommerce-checkout .wfacp_smart_button_or_text_placeholder { display: none !important; }

/* Checked radios: pseudo-elements do not render on <input>, which is why the
   selected option showed an empty ring. Paint the dot with a gradient instead. */
body.woocommerce-checkout ul#shipping_method input[type="radio"]:checked,
body.woocommerce-checkout .wc_payment_methods input[type="radio"]:checked {
	border-color: #e0409a !important;
	background: radial-gradient(circle, #e0409a 0 40%, #fff 46% 100%) !important;
}
/* And the selected row itself gets a firmer mark. */
body.woocommerce-checkout ul#shipping_method li:has(input:checked),
body.woocommerce-checkout .wc_payment_methods .wc_payment_method:has(input:checked) {
	border-width: 2px !important;
	box-shadow: 0 0 0 3px rgba(224, 64, 154, .10) !important;
}

/* ---------- order summary, the variant this page actually renders ---------- */

/* Heading row: smaller label, no dead air above the first item. */
body.woocommerce-checkout .wfacp-order-summary-label {
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	color: #101828 !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
body.woocommerce-checkout .wfacp_wrapper_start.wfacp_mini_cart_start_h { padding: 18px 20px 16px !important; }
body.woocommerce-checkout .wfacp_order_summary_container { padding: 0 !important; margin: 0 !important; }

/* Item row: thumb 56px, details take the rest, price in a fixed right lane. */
body.woocommerce-checkout table.wfacp_order_sum { margin: 0 !important; }
body.woocommerce-checkout table.wfacp_order_sum td,
body.woocommerce-checkout table.wfacp_order_sum th { border: 0 !important; background: transparent !important; }
body.woocommerce-checkout table.wfacp_order_sum tr.cart_item { display: flex !important; align-items: flex-start !important; width: 100% !important; }
body.woocommerce-checkout table.wfacp_order_sum tr.cart_item > td.product-name-area {
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	padding: 4px 0 8px !important;
}
body.woocommerce-checkout table.wfacp_order_sum tr.cart_item > td.product-total {
	flex: 0 0 auto !important;
	width: auto !important;
	text-align: right !important;
	white-space: nowrap !important;
	font-weight: 700 !important;
	color: #101828 !important;
	padding: 4px 0 0 10px !important;
}
body.woocommerce-checkout table.wfacp_order_sum .product-image { flex: 0 0 56px !important; width: 56px !important; }
body.woocommerce-checkout table.wfacp_order_sum .wfacp-pro-thumb,
body.woocommerce-checkout table.wfacp_order_sum .product-image img {
	width: 56px !important;
	height: 56px !important;
	border-radius: 10px !important;
}
body.woocommerce-checkout table.wfacp_order_sum .product-image img { border: 1px solid #eef1f5 !important; object-fit: cover !important; }
body.woocommerce-checkout table.wfacp_order_sum .product-name { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
body.woocommerce-checkout .wfacp_mini_cart_item_title {
	font-size: .88rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #101828 !important;
	display: block !important;
}
body.woocommerce-checkout table.wfacp_order_sum dl.variation {
	margin: 5px 0 0 !important;
	font-size: .75rem !important;
	line-height: 1.45 !important;
	color: #98a2b3 !important;
}
body.woocommerce-checkout table.wfacp_order_sum dl.variation dt { display: none !important; }
body.woocommerce-checkout table.wfacp_order_sum dl.variation dd,
body.woocommerce-checkout table.wfacp_order_sum dl.variation p { margin: 0 !important; display: inline !important; }
body.woocommerce-checkout table.wfacp_order_sum .product-quantity { margin: 6px 0 0 !important; }

/* Totals table alignment + tighter rhythm. */
body.woocommerce-checkout .wfacp_mini_cart_reviews th { text-align: left !important; }
body.woocommerce-checkout .wfacp_mini_cart_reviews th,
body.woocommerce-checkout .wfacp_mini_cart_reviews td { padding: 6px 0 !important; }
body.woocommerce-checkout tr.bb-checkout-recurring-row th,
body.woocommerce-checkout tr.bb-checkout-recurring-row td {
	font-size: .78rem !important;
	line-height: 1.35 !important;
	padding: 8px 10px !important;
	white-space: nowrap !important;
}

/* Coupon toggle spacing inside this variant. */
body.woocommerce-checkout .wfacp_woocommerce_form_coupon { margin: 6px 0 8px !important; }

/* ================================================================
 * Round 6: undo the collapse. WFACP floats/widths on .product-name
 * fought the flex experiment and squeezed the title to one char per
 * line. Grid tracks cannot collapse; floats are neutralised outright.
 * ================================================================ */
body.woocommerce-checkout table.wfacp_order_sum tr.cart_item > td.product-name-area {
	display: grid !important;
	grid-template-columns: 56px minmax(0, 1fr) !important;
	gap: 10px 12px !important;
	align-items: start !important;
}
body.woocommerce-checkout table.wfacp_order_sum .product-image,
body.woocommerce-checkout table.wfacp_order_sum .product-name {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: none !important;
	margin: 0 !important;
}
body.woocommerce-checkout table.wfacp_order_sum .product-name { grid-column: 2 !important; }
body.woocommerce-checkout table.wfacp_order_sum .wfacp_cart_title_sec,
body.woocommerce-checkout table.wfacp_order_sum .wfacp_mini_cart_item_title {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

/* Shipping rows: radio, label and price on one centred line. */
body.woocommerce-checkout ul#shipping_method li {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
body.woocommerce-checkout ul#shipping_method li > input[type="radio"] { margin: 0 !important; }
body.woocommerce-checkout ul#shipping_method li label {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	cursor: pointer;
}
body.woocommerce-checkout ul#shipping_method li label .woocommerce-Price-amount,
body.woocommerce-checkout ul#shipping_method li label > span:last-child {
	float: none !important;
	margin-left: auto !important;
	font-weight: 700 !important;
	color: #101828 !important;
}

/* ================================================================
 * Round 7: the summary item layout, scoped under the container ID.
 * WFACP's own !important width/float rules tie with class selectors
 * and win on load order; an ID in the selector outranks them all.
 * ================================================================ */
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item > td.product-name-area {
	display: grid !important;
	grid-template-columns: 56px minmax(0, 1fr) !important;
	gap: 8px 12px !important;
	align-items: start !important;
	width: 100% !important;
	float: none !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item { display: flex !important; width: 100% !important; }
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item > td.product-name-area { flex: 1 1 auto !important; min-width: 0 !important; }
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item > td.product-total { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; padding: 4px 0 0 10px !important; }
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-image {
	grid-column: 1 !important;
	float: none !important;
	width: 56px !important;
	max-width: 56px !important;
	min-width: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-image img,
#wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp-pro-thumb { width: 56px !important; height: 56px !important; max-width: 56px !important; }
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-name {
	grid-column: 2 !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp_cart_title_sec,
#wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp_mini_cart_item_title {
	float: none !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	white-space: normal !important;
	text-align: left !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum dl.variation,
#wfacp_mini_cart_start_h table.wfacp_order_sum .bb-checkout-sub-badge { text-align: left !important; }

/* ================================================================
 * Round 8: sidebar layout polish. Header on one line, a 72px thumb
 * with a proper count bubble, room for the text, and no descendant
 * width caps left anywhere in the item's text column.
 * ================================================================ */

/* "Your Cart" left, currency picker top right, one visual row. */
#wfacp_mini_cart_start_h { position: relative !important; }
#wfacp_mini_cart_start_h .wfacp-order-summary-label {
	font-size: 1.05rem !important;
	margin: 2px 0 16px !important;
	line-height: 32px !important;
}
#wfacp_mini_cart_start_h [id^="woocommerce-multi-currency"] {
	position: absolute !important;
	top: 14px !important;
	right: 18px !important;
	margin: 0 !important;
	z-index: 3;
}

/* Item thumb, grid and count bubble: see the 2026-09-29 desktop block at the end
 * of this file. The Round-8 versions were removed there, not overridden here. */
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-image { position: relative !important; overflow: visible !important; }

/* No width caps anywhere inside the text column, full stop. */
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-name,
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-name * {
	max-width: none !important;
	float: none !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp_mini_cart_item_title {
	font-size: .95rem !important;
	line-height: 1.35 !important;
	margin: 2px 0 0 !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum dl.variation {
	width: 100% !important;
	display: block !important;
	font-size: .8rem !important;
	color: #8a94a3 !important;
	margin: 6px 0 0 !important;
}
#wfacp_mini_cart_start_h table.wfacp_order_sum .bb-checkout-sub-badge { margin: 8px 0 0 !important; }
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-quantity { margin: 10px 0 0 !important; }

/* Coupon line: one centred line, quiet. */
#wfacp_mini_cart_start_h .wfacp_main_showcoupon { white-space: nowrap !important; margin: 10px 0 !important; display: block !important; }

/* Renews strip: label left, amount right, one line. */
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-top: 6px !important; }
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row th { border-radius: 8px 0 0 8px !important; flex: 1 1 auto !important; text-align: left !important; }
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row td { border-radius: 0 8px 8px 0 !important; flex: 0 0 auto !important; }

/* ================================================================
 * Round 9: shipping rows on ONE line, the bump gets its checkbox
 * back, and the pay button becomes the product-page CTA pill.
 * ================================================================ */

/* Shipping: radio + name + price, one row, everything centred. */
body.woocommerce-checkout ul#shipping_method li {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	gap: 10px !important;
}
body.woocommerce-checkout ul#shipping_method li label {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	line-height: 1.35 !important;
}
body.woocommerce-checkout ul#shipping_method li label .woocommerce-Price-amount,
body.woocommerce-checkout ul#shipping_method li > .woocommerce-Price-amount {
	margin-left: auto !important;
	white-space: nowrap !important;
	float: none !important;
	font-weight: 700 !important;
	color: #101828 !important;
}

/* The bump's title row (which holds the YES checkbox) was collateral damage of the
   [class*="pointer"] hide: wfob_title_wrap.wfob_display_pointer matched it and the
   offer became unclickable. Bring the row back; keep animations off. */
body.woocommerce-checkout .wfob_bump .wfob_title_wrap { display: block !important; }
body.woocommerce-checkout .wfob_bump .wfob_bump_checkbox { display: inline-block !important; width: 18px !important; height: 18px !important; accent-color: #e0409a; }
body.woocommerce-checkout .wfob_bump label { cursor: pointer; }

/* Place order: the product page's CTA pill, full stop. */
body.woocommerce-checkout #place_order {
	border-radius: 999px !important;
	min-height: 58px !important;
	font-size: 1.1rem !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}

/* ================================================================
 * Round 10: sidebar de-padding + dedupe, qty rule, softer selection.
 * ================================================================ */

/* One card only: the outer mini-cart block already paints the panel, so the
   inner layers stop double-padding and double-bordering. */
body.woocommerce-checkout #wfacp_mini_cart_start_h.wfacp_wrapper_start { padding: 8px 6px 6px !important; }
body.woocommerce-checkout .wfacp_min_cart_widget,
body.woocommerce-checkout .wfacp_template_9_cart_item_details,
body.woocommerce-checkout .wfacp_mini_cart_items,
body.woocommerce-checkout .wfacp_mini_cart_reviews {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* The currency picker was wrapping ("US D"): compact, quiet, nowrap. */
#wfacp_mini_cart_start_h [id^="woocommerce-multi-currency"] {
	top: 10px !important;
	right: 6px !important;
	white-space: nowrap !important;
}
#wfacp_mini_cart_start_h [id^="woocommerce-multi-currency"] * { white-space: nowrap !important; }
#wfacp_mini_cart_start_h [id^="woocommerce-multi-currency"] .wmc-current-currency,
#wfacp_mini_cart_start_h [id^="woocommerce-multi-currency"] > div {
	border: 0 !important;
	background: transparent !important;
	padding: 2px 4px !important;
}

/* The renews strip already states price + cadence; the per-line variation text
   repeated it word for word in a narrow column. One statement, once. */
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item:has(.bb-checkout-sub-badge) dl.variation { display: none !important; }

/* Subscriptions are always quantity 1: no stepper on subscription lines. */
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item:has(.bb-checkout-sub-badge) .wfacp_quantity_selector,
#wfacp_mini_cart_start_h table.wfacp_order_sum tr.cart_item:has(.bb-checkout-sub-badge) .product-quantity,
body .fkcart-modal .fkcart--item:has(.bb-fk-sub-badge) .fkcart-quantity,
body .fkcart-preview-ui .fkcart--item:has(.bb-fk-sub-badge) .fkcart-quantity { display: none !important; }

/* Selected option rows: one confident border, no halo, no double read. */
body.woocommerce-checkout ul#shipping_method li:has(input:checked),
body.woocommerce-checkout .wc_payment_methods .wc_payment_method:has(input:checked) {
	border-width: 1.5px !important;
	box-shadow: none !important;
}

/* Round 11: the populated shipping list is not always ul#shipping_method;
   cover every WFACP/Woo pattern so the one-line flex actually attaches. */
body.woocommerce-checkout .wfacp_shipping_method ul li,
body.woocommerce-checkout ul[id^="shipping_method"] li,
body.woocommerce-checkout .woocommerce-shipping-methods li {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	gap: 10px !important;
}
body.woocommerce-checkout .wfacp_shipping_method ul li > input[type="radio"],
body.woocommerce-checkout .woocommerce-shipping-methods li > input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	border: 2px solid #cfd7e0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	flex: 0 0 20px !important;
	margin: 0 !important;
}
body.woocommerce-checkout .wfacp_shipping_method ul li > input[type="radio"]:checked,
body.woocommerce-checkout .woocommerce-shipping-methods li > input[type="radio"]:checked {
	border-color: #e0409a !important;
	background: radial-gradient(circle, #e0409a 0 40%, #fff 46% 100%) !important;
}
body.woocommerce-checkout .wfacp_shipping_method ul li label,
body.woocommerce-checkout ul[id^="shipping_method"] li label,
body.woocommerce-checkout .woocommerce-shipping-methods li label {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
body.woocommerce-checkout .wfacp_shipping_method ul li label .woocommerce-Price-amount,
body.woocommerce-checkout .woocommerce-shipping-methods li label .woocommerce-Price-amount {
	margin-left: auto !important;
	white-space: nowrap !important;
	float: none !important;
}

/* ================================================================
 * Round 12: the REAL populated shipping markup is
 * li > .wfacp_single_shipping > (.wfacp_shipping_radio input+label)(.wfacp_shipping_price)
 * — the one-line layout belongs on those nodes, not on the li.
 * ================================================================ */
body.woocommerce-checkout .wfacp_single_shipping {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 12px !important;
}
body.woocommerce-checkout .wfacp_shipping_radio {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
}
body.woocommerce-checkout .wfacp_shipping_radio label {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: inline !important;
	line-height: 1.4 !important;
	cursor: pointer;
}
body.woocommerce-checkout .wfacp_shipping_price {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	font-weight: 700 !important;
	color: #101828 !important;
	margin-left: auto !important;
	float: none !important;
}
body.woocommerce-checkout input.shipping_method[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	border: 2px solid #cfd7e0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	flex: 0 0 20px !important;
	margin: 0 !important;
	cursor: pointer;
}
body.woocommerce-checkout input.shipping_method[type="radio"]:checked {
	border-color: #e0409a !important;
	background: radial-gradient(circle, #e0409a 0 40%, #fff 46% 100%) !important;
}

/* Multi-cadence carts: the renews strip wraps instead of clipping. */
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row th,
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row td { white-space: normal !important; }

/* ================================================================
 * Round 13: three self-inflicted artifacts.
 * ================================================================ */

/* Renews strip: the label keeps one line and its natural width; only the
   amount side may wrap. (white-space:normal on a squeezed flex th collapsed
   "Renews Automatically" to one letter per line.) */
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row th {
	white-space: nowrap !important;
	flex: 0 0 auto !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row td {
	white-space: normal !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	text-align: right !important;
	word-break: normal !important;
}

/* ONE count bubble: the ball is the circle, the count inside it is plain text.
   Styling both classes as absolute circles drew two overlapping dots. */
#wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp-qty-ball .wfacp-qty-count,
body.woocommerce-checkout .wfacp-qty-ball .wfacp-qty-count {
	position: static !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: inline !important;
	font-size: inherit !important;
	color: inherit !important;
}

/* Stepper buttons: the theme adds icon pseudo-elements on top of the +/- text,
   which read as doubled glyphs. Text only. */
body.woocommerce-checkout .wfacp_quantity_selector .value-button::before,
body.woocommerce-checkout .wfacp_quantity_selector .value-button::after {
	display: none !important;
	content: none !important;
}

/* Round 14: the renews amount cell gets guaranteed room (a flex cell inside a
   table row can otherwise collapse to a character's width), one cadence per line. */
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row td {
	min-width: 55% !important;
	line-height: 1.5 !important;
}

/* Renews strip, final: the cell sizes to its widest cadence line so the pink
   background always contains the text; the row wraps if the column is tight. */
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row { flex-wrap: wrap !important; }
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row td {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin-left: auto !important;
}

/* ================================================================
 * Pass 10 (owner review 2026-09-05): mobile padding + order bump
 * Verified on real 390px captures (browser agent 0.9.51, data.viewport cdp).
 * ================================================================ */
@media (max-width: 767px) {
	/* One gutter, carried by the panel only. Every other wrapper contributes 0,
	   otherwise the paddings stack (first attempt widened the gutter). */
	body.woocommerce-checkout .wfacp_main_wrap,
	body.woocommerce-checkout .wfacp_main_form,
	body.woocommerce-checkout #wfacp-e-form,
	body.woocommerce-checkout .wfacp_wrapper > .container,
	body.woocommerce-checkout .wfacp_page {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	body.woocommerce-checkout .wfacp-left-panel,
	body.woocommerce-checkout .wfacp-right-panel {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	body.woocommerce-checkout .wfacp-section.wfacp-hg-by-box {
		padding: 16px 14px 12px !important;
		margin: 0 0 12px !important;
		border-radius: 12px !important;
	}
	body.woocommerce-checkout h2.wfacp_section_heading {
		margin: 0 0 12px !important;
		padding: 0 0 10px 12px !important;
	}
	body.woocommerce-checkout .wfacp-form-control,
	body.woocommerce-checkout select.wfacp-form-control {
		min-height: 44px !important;
		font-size: 16px !important; /* iOS zooms on anything smaller */
	}

	/* Order bump header row is .wfob_bgBox_table > .wfob_bump_title_start + .wfob_price_container
	   (a table-style row). On phones make it a wrapping flex row: the title takes the full width and
	   the prices sit on their own line beneath, right-aligned, never wrapping digit by digit. */
	body.woocommerce-checkout .wfob_bump .wfob_bgBox_table {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		padding: 12px !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_bump_title_start {
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: flex-start !important;
		gap: 8px !important;
		font-size: 14px !important;
		line-height: 1.35 !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_label_wrap { flex: 1 1 auto !important; min-width: 0 !important; }
	body.woocommerce-checkout .wfob_bump .wfob_price_container,
	body.woocommerce-checkout .wfob_bump .wfob_price {
		flex: 1 1 100% !important;
		width: 100% !important;
		white-space: nowrap !important;
		text-align: right !important;
		margin: 4px 0 0 !important;
		font-size: 14px !important;
		line-height: 1.3 !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_pro_image_wrap {
		flex: 0 0 64px !important;
		max-width: 64px !important;
		margin-right: 10px !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_pro_img_wrap img {
		width: 64px !important;
		height: 64px !important;
		object-fit: contain !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		padding: 0 !important;
	}
}

/* Pass 12c: hide every previous renews treatment. Those rules (pink card,
   flex th+td, stacked box) kept painting two strings on the same pixels. */
body.woocommerce-checkout tr.bb-checkout-recurring-row,
#wfacp_mini_cart_start_h tr.bb-checkout-recurring-row,
body.woocommerce-checkout .bb-checkout-recurring,
#wfacp_mini_cart_start_h .bb-checkout-recurring {
	display: none !important;
}

/* One sentence, one cell, not a flex pair.
 *
 * 2026-09-28: this row was wrapping at roughly half the card's width. The cause was the
 * display:block below. The row lives in a <tfoot> (table-footer-group), so a block-level <tr>
 * gets wrapped in an ANONYMOUS table-row box, and the cell's width:100% then resolves against
 * that anonymous box, which the table sizes to its first column. Forcing more width onto the
 * cell could not win, because the box it was measuring against was the narrow one.
 *
 * Fixed by letting it be a real table row again and doing the spanning with colspan, which the
 * markup already carries. The original reason for display:block was that FunnelKit flexes th+td
 * PAIRS and they overlapped; a single colspan'd cell has no pair to overlap with. */
body.woocommerce-checkout #wfacp_mini_cart_start_h table tr.bb-checkout-renews-row,
body.woocommerce-checkout tr.bb-checkout-renews-row,
#wfacp_mini_cart_start_h tr.bb-checkout-renews-row {
	display: table-row !important;
	width: 100% !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.woocommerce-checkout #wfacp_mini_cart_start_h tr.bb-checkout-renews-row th,
body.woocommerce-checkout tr.bb-checkout-renews-row th {
	display: none !important;
}
body.woocommerce-checkout #wfacp_mini_cart_start_h tr.bb-checkout-renews-row td,
body.woocommerce-checkout #wfacp_mini_cart_start_h td.bb-checkout-renews,
body.woocommerce-checkout tr.bb-checkout-renews-row td,
body.woocommerce-checkout td.bb-checkout-renews {
	display: table-cell !important;
	position: static !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	box-sizing: border-box !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 8px 0 0 !important;
	margin: 0 !important;
	text-align: left !important;
	color: #b83280 !important;
	font-size: .8rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-transform: none !important;
	white-space: normal !important;
}

/* ---- 2026-09-28: dead space under the quantity stepper ----
   .wfacp_quantity_selector is inline-flex inside a block .product-quantity wrapper, so the
   wrapper's inherited line-height reserves a descender strip underneath it. Owner screenshot
   showed it as a gap below "- 1 +" in the checkout cart. Collapse the wrapper's line box and
   top-align the stepper; the stepper keeps its own 30px height. */
body.woocommerce-checkout table.wfacp_order_sum .product-quantity,
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-quantity { line-height: 0 !important; font-size: 0 !important; }
body.woocommerce-checkout .wfacp_quantity_selector,
#wfacp_mini_cart_start_h .wfacp_quantity_selector { vertical-align: top !important; }
body.woocommerce-checkout .wfacp_quantity_selector input,
#wfacp_mini_cart_start_h .wfacp_quantity_selector input { font-size: 13px !important; }
body.woocommerce-checkout .wfacp_quantity_selector .value-button,
#wfacp_mini_cart_start_h .wfacp_quantity_selector .value-button { font-size: 14px !important; }

/* ============================================================================
   2026-09-28 (owner): one visual family for the two upsells that sit together
   directly above Place Order.

   There are two different mechanisms in that strip and they used to look like
   they came from different decades: our own Subscribe & Save card (a big
   gradient button) and the FunnelKit order bump (a yellow highlighter bar, a
   red arrow GIF and a pale pink body). The customer has no idea these are
   different systems, so they are styled here as one component: a white card,
   a real checkbox, a soft pink accent when active.

   Everything below carries !important on purpose. FunnelKit prints the bump's
   colours from _wfob_design_data into a generated <style> block on every
   render, so ordinary rules lose. The owner's values are left untouched in the
   bump editor; only the presentation is overridden.

   Shared tokens (kept literal rather than as custom properties, because these
   rules have to win inside FunnelKit's own cascade):
     card        #fff, 1px #efd9e6, radius 16px
     active      #c83784 border, #fdf2f8 tint
     ink         #1f2937 primary, #6b7280 secondary
     save pill   #e9f7ef bg, #16a34a text
   ========================================================================= */

/* ---------------------------------------------------- our subscription card */
/* Every selector is doubled with #wfacp-e-form and the layout properties carry
   !important. FunnelKit's checkout stylesheet scopes its rules to the form's ID,
   so "#wfacp-e-form label {display:block}" outranks any class selector we write:
   the first build of this card lost its flex row and the checkbox box, an empty
   inline <span>, collapsed to zero size. Specificity here is not decoration. */
body.woocommerce-checkout .bb-checkout-subup,
#wfacp-e-form .bb-checkout-subup { margin: 0 0 14px !important; }
body.woocommerce-checkout .bb-checkout-subup:empty,
#wfacp-e-form .bb-checkout-subup:empty { display: none !important; }

body.woocommerce-checkout .bb-subup,
#wfacp-e-form .bb-subup {
	display: block !important;
	border: 1px solid #efd9e6 !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: 0 8px 24px -18px rgba(90, 40, 80, .45) !important;
	overflow: hidden !important;
	padding: 0 !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.woocommerce-checkout .bb-subup:hover,
#wfacp-e-form .bb-subup:hover { border-color: #e0a9c8 !important; }
body.woocommerce-checkout .bb-subup.is-on,
#wfacp-e-form .bb-subup.is-on {
	border-color: #c83784 !important;
	box-shadow: 0 10px 26px -18px rgba(200, 55, 132, .55) !important;
}
body.woocommerce-checkout .bb-subup.is-busy,
#wfacp-e-form .bb-subup.is-busy { opacity: .6 !important; pointer-events: none !important; }

/* The whole header row is the label, so the entire strip is a hit target. */
body.woocommerce-checkout .bb-subup .bb-subup-head,
#wfacp-e-form .bb-subup .bb-subup-head {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 14px 16px !important;
	cursor: pointer !important;
	background: #fcf6f9 !important;
	border-bottom: 1px solid #f4e6ee !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #1f2937 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
body.woocommerce-checkout .bb-subup.is-on .bb-subup-head,
#wfacp-e-form .bb-subup.is-on .bb-subup-head { background: #fdf2f8 !important; }

/* Real input, visually replaced by .bb-subup-box but still focusable. */
body.woocommerce-checkout .bb-subup .bb-subup-check,
#wfacp-e-form .bb-subup .bb-subup-check {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-box,
#wfacp-e-form .bb-subup .bb-subup-box {
	display: block !important;
	flex: 0 0 auto !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	border: 2px solid #c9b6c2 !important;
	border-radius: 7px !important;
	background: #fff !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: border-color .15s ease, background .15s ease;
}
body.woocommerce-checkout .bb-subup .bb-subup-check:checked + .bb-subup-box,
#wfacp-e-form .bb-subup .bb-subup-check:checked + .bb-subup-box {
	border-color: #c83784 !important;
	background: #c83784 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-check:checked + .bb-subup-box::after,
#wfacp-e-form .bb-subup .bb-subup-check:checked + .bb-subup-box::after {
	content: "" !important;
	position: absolute !important;
	left: 6px !important;
	top: 2px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid #fff !important;
	border-width: 0 2.5px 2.5px 0 !important;
	transform: rotate(45deg) !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-check:focus-visible + .bb-subup-box,
#wfacp-e-form .bb-subup .bb-subup-check:focus-visible + .bb-subup-box {
	outline: 2px solid #c83784 !important;
	outline-offset: 2px !important;
}

body.woocommerce-checkout .bb-subup .bb-subup-headline,
#wfacp-e-form .bb-subup .bb-subup-headline {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-weight: 800 !important;
	font-size: .95rem !important;
	line-height: 1.3 !important;
	color: #1f2937 !important;
	margin: 0 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-money,
#wfacp-e-form .bb-subup .bb-subup-money {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: baseline !important;
	gap: 7px !important;
	white-space: nowrap !important;
	margin: 0 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-money s,
#wfacp-e-form .bb-subup .bb-subup-money s { color: #9ca3af !important; font-size: .85rem !important; }
body.woocommerce-checkout .bb-subup .bb-subup-money strong,
#wfacp-e-form .bb-subup .bb-subup-money strong { color: #c83784 !important; font-size: 1.15rem !important; font-weight: 800 !important; }

body.woocommerce-checkout .bb-subup .bb-subup-body,
#wfacp-e-form .bb-subup .bb-subup-body {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px 16px 14px !important;
	margin: 0 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-img,
#wfacp-e-form .bb-subup .bb-subup-img {
	display: flex !important;
	flex: 0 0 auto !important;
	width: 56px !important;
	height: 56px !important;
	border: 1px solid #f0e4ea !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background: #fff !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-img img,
#wfacp-e-form .bb-subup .bb-subup-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; }
body.woocommerce-checkout .bb-subup .bb-subup-copy,
#wfacp-e-form .bb-subup .bb-subup-copy { flex: 1 1 auto !important; min-width: 0 !important; }
body.woocommerce-checkout .bb-subup .bb-subup-name,
#wfacp-e-form .bb-subup .bb-subup-name {
	display: block !important;
	font-weight: 700 !important;
	font-size: .9rem !important;
	color: #1f2937 !important;
	line-height: 1.3 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-meta,
#wfacp-e-form .bb-subup .bb-subup-meta {
	display: block !important;
	margin-top: 3px !important;
	font-size: .78rem !important;
	color: #6b7280 !important;
	line-height: 1.45 !important;
}
body.woocommerce-checkout .bb-subup .bb-subup-pills,
#wfacp-e-form .bb-subup .bb-subup-pills { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 7px !important; }
body.woocommerce-checkout .bb-subup .bb-subup-pills small,
#wfacp-e-form .bb-subup .bb-subup-pills small {
	background: #e9f7ef !important;
	color: #16a34a !important;
	font-size: .68rem !important;
	font-weight: 800 !important;
	padding: 3px 9px !important;
	border-radius: 999px !important;
	line-height: 1.4 !important;
}

@media (max-width: 520px) {
	body.woocommerce-checkout .bb-subup .bb-subup-head,
	#wfacp-e-form .bb-subup .bb-subup-head { flex-wrap: wrap !important; }
	body.woocommerce-checkout .bb-subup .bb-subup-headline,
	#wfacp-e-form .bb-subup .bb-subup-headline { flex: 1 1 100% !important; order: 3 !important; }
	body.woocommerce-checkout .bb-subup .bb-subup-money,
	#wfacp-e-form .bb-subup .bb-subup-money { order: 2 !important; margin-left: auto !important; }
}

/* --------------------------------------------- FunnelKit bump, same language */
body.woocommerce-checkout #wfob_wrap .wfob_bump,
#wfacp-e-form #wfob_wrap .wfob_bump {
	border: 1px solid #efd9e6 !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: 0 8px 24px -18px rgba(90, 40, 80, .45) !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 0 14px !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_Box,
#wfacp-e-form #wfob_wrap .wfob_Box { border: 0 !important; background: transparent !important; padding: 0 !important; }

/* The highlighter-yellow heading bar becomes the card's header strip. */
body.woocommerce-checkout #wfob_wrap .wfob_bgBox_table,
body.woocommerce-checkout #wfob_wrap .wfob_bgBox_table_box,
#wfacp-e-form #wfob_wrap .wfob_bgBox_table,
#wfacp-e-form #wfob_wrap .wfob_bgBox_table_box {
	background: #fcf6f9 !important;
	border: 0 !important;
	border-bottom: 1px solid #f4e6ee !important;
	border-radius: 0 !important;
	padding: 12px 16px !important;
	margin: 0 !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_title,
#wfacp-e-form #wfob_wrap .wfob_title {
	color: #1f2937 !important;
	font-size: .95rem !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	padding: 0 0 0 10px !important;
}
/* The owner's copy colours "Yes!" red and the offer green. Calm both down. */
body.woocommerce-checkout #wfob_wrap .wfob_title span,
body.woocommerce-checkout #wfob_wrap .wfob_title font,
#wfacp-e-form #wfob_wrap .wfob_title span,
#wfacp-e-form #wfob_wrap .wfob_title font { color: #1f2937 !important; }

body.woocommerce-checkout #wfob_wrap .wfob_price,
#wfacp-e-form #wfob_wrap .wfob_price {
	color: #c83784 !important;
	font-weight: 800 !important;
	font-size: 1.1rem !important;
	white-space: nowrap !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_price del,
body.woocommerce-checkout #wfob_wrap .wfob_price s,
#wfacp-e-form #wfob_wrap .wfob_price del,
#wfacp-e-form #wfob_wrap .wfob_price s {
	color: #9ca3af !important;
	font-weight: 600 !important;
	font-size: .85rem !important;
	margin-right: 5px !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_price ins,
#wfacp-e-form #wfob_wrap .wfob_price ins { text-decoration: none !important; color: #c83784 !important; }
/* The subscription marker sits INLINE beside the price, never on its own line: a second
   line here made every bump header taller than the Subscribe & Save card above it. */
body.woocommerce-checkout #wfob_wrap .wfob_price .bb-bump-renews,
#wfacp-e-form #wfob_wrap .wfob_price .bb-bump-renews {
	display: inline-block !important;
	vertical-align: middle !important;
	margin-left: 8px !important;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	background: #fdf2f8 !important;
	color: #c83784 !important;
	font-size: .62rem !important;
	font-weight: 800 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
}

/* The animated red arrow GIF: gone. */
body.woocommerce-checkout #wfob_wrap .wfob_blink_img_wrap,
#wfacp-e-form #wfob_wrap .wfob_blink_img_wrap { display: none !important; }

/* Native checkbox, sized and coloured to match ours. */
body.woocommerce-checkout #wfob_wrap .wfob_bump_checkbox,
#wfacp-e-form #wfob_wrap .wfob_bump_checkbox {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	margin: 0 !important;
	border: 2px solid #c9b6c2 !important;
	border-radius: 7px !important;
	accent-color: #c83784 !important;
	cursor: pointer !important;
	box-shadow: none !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bump_checkbox:checked,
#wfacp-e-form #wfob_wrap .wfob_bump_checkbox:checked { border-color: #c83784 !important; }

/* The pale pink body becomes plain white, same padding rhythm as our card. */
body.woocommerce-checkout #wfob_wrap .wfob_contentBox,
#wfacp-e-form #wfob_wrap .wfob_contentBox {
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 12px 16px 14px !important;
	margin: 0 !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_pro_img_wrap img,
#wfacp-e-form #wfob_wrap .wfob_pro_img_wrap img {
	border: 1px solid #f0e4ea !important;
	border-radius: 10px !important;
	background: #fff !important;
	max-width: 72px !important;
	height: auto !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_text_inner,
#wfacp-e-form #wfob_wrap .wfob_text_inner {
	font-size: .82rem !important;
	color: #6b7280 !important;
	line-height: 1.5 !important;
}
/* Our computed bump description leads with an <h3> savings headline. */
body.woocommerce-checkout #wfob_wrap .wfob_text_inner h3,
#wfacp-e-form #wfob_wrap .wfob_text_inner h3 {
	font-size: .8rem !important;
	font-weight: 800 !important;
	letter-spacing: .02em !important;
	margin: 0 0 5px !important;
	line-height: 1.3 !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_text_inner h3 span,
body.woocommerce-checkout #wfob_wrap .wfob_text_inner h3 strong,
#wfacp-e-form #wfob_wrap .wfob_text_inner h3 span,
#wfacp-e-form #wfob_wrap .wfob_text_inner h3 strong { color: #c83784 !important; }
body.woocommerce-checkout #wfob_wrap .wfob_text_inner p,
#wfacp-e-form #wfob_wrap .wfob_text_inner p { margin: 0 !important; }

/* ----------------------------------------------------------------------------
   2026-09-28: totals-table alignment.

   Subtotal, Tax and Total read left-label / right-value, but the Shipping row's
   label sat centred, so the column looked broken. WooCommerce emits that row as
   a <th> with its own alignment and FunnelKit centres <th> inside the summary.
   Pin every label cell left and every value cell right so the four rows line up.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #wfacp_mini_cart_start_h .wfacp_order_sum tfoot th,
body.woocommerce-checkout .wfacp_order_sum tfoot th,
#wfacp_mini_cart_start_h .wfacp_order_sum tfoot th {
	text-align: left !important;
	padding-left: 0 !important;
}
body.woocommerce-checkout #wfacp_mini_cart_start_h .wfacp_order_sum tfoot td,
body.woocommerce-checkout .wfacp_order_sum tfoot td,
#wfacp_mini_cart_start_h .wfacp_order_sum tfoot td {
	text-align: right !important;
	padding-right: 0 !important;
}
/* ...except our full-width renews sentence, which spans both columns. */
body.woocommerce-checkout .wfacp_order_sum tfoot td.bb-checkout-renews,
#wfacp_mini_cart_start_h .wfacp_order_sum tfoot td.bb-checkout-renews {
	text-align: left !important;
}


/* ----------------------------------------------------------------------------
   2026-09-28: totals-table alignment, second attempt.

   The first attempt targeted `.wfacp_order_sum tfoot th`, which matches nothing:
   measuring the real DOM showed these rows live in
   `table.shop_table.wfacp_mini_cart_reviews` inside TBODY, and that Shipping is
   emitted as a <td> (inheriting text-align:right) while Subtotal, Tax and Total
   are <th> (left). Right-aligning a label inside a 159px first column is what
   made "Shipping" look centred while the rest sat flush left.

   Pin the first cell of every totals row left and the value cell right. The
   renews sentence spans both columns, so it is first AND last child; the
   :not(:first-child) guard keeps it out of the right-aligned rule.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout table.wfacp_mini_cart_reviews tbody > tr > th:first-child,
body.woocommerce-checkout table.wfacp_mini_cart_reviews tbody > tr > td:first-child,
#wfacp_mini_cart_start_h table.wfacp_mini_cart_reviews tbody > tr > th:first-child,
#wfacp_mini_cart_start_h table.wfacp_mini_cart_reviews tbody > tr > td:first-child {
	text-align: left !important;
}
body.woocommerce-checkout table.wfacp_mini_cart_reviews tbody > tr > td:last-child:not(:first-child),
#wfacp_mini_cart_start_h table.wfacp_mini_cart_reviews tbody > tr > td:last-child:not(:first-child) {
	text-align: right !important;
}

/* ----------------------------------------------------------------------------
   Uniform bump headers.

   The owner's bump titles vary in length ("MATCH my 3 Months..." is one line,
   "ADD 1 Month of Hormonal Balance to my order" wraps to two), so the header
   strips were different heights and the stack looked ragged. Centring the row
   and giving it a consistent min-height evens them out without truncating any
   copy, and the price column is allowed to sit on one line.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout #wfob_wrap .wfob_bgBox_table,
#wfacp-e-form #wfob_wrap .wfob_bgBox_table {
	min-height: 56px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bgBox_table_box,
#wfacp-e-form #wfob_wrap .wfob_bgBox_table_box {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_title,
#wfacp-e-form #wfob_wrap .wfob_title {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-size: .92rem !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_price_container,
#wfacp-e-form #wfob_wrap .wfob_price_container {
	flex: 0 0 auto !important;
	text-align: right !important;
	white-space: nowrap !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_check_container,
#wfacp-e-form #wfob_wrap .wfob_check_container {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
}

/* ============================================================================
   2026-09-28: the mini-cart while it is refreshing, and the quantity stepper.

   THE PINK HALF-MOONS. FunnelKit skeletonises the summary during an update and
   hides the quantity bubble while it does:

       .wfacp_anim_active .wfacp-qty-ball { display: none }

   That rule carries no !important, and the bubble restyle further up this file
   sets `display: flex !important`, so ours won. The bubble kept painting on top
   of the grey skeleton and was clipped by the placeholder block into a pink
   half-circle at the corner of every row. Our own override caused it, so our
   override has to stand down while the skeleton is up.

   The renews sentence had the same problem in reverse: it stayed fully rendered
   in brand pink while every other line was a grey block, which read as a
   rendering fault rather than a loading state.
   ========================================================================= */
body.wfacp_anim_active #wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp-qty-ball,
body.wfacp_anim_active #wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp-qty-count,
body.wfacp_anim_active .wfacp-qty-ball,
body.wfacp_anim_active .wfacp-qty-count,
.wfacp_anim_active #wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp-qty-ball,
.wfacp_anim_active #wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp-qty-count,
.wfacp_anim_active .wfacp-qty-ball,
.wfacp_anim_active .wfacp-qty-count {
	display: none !important;
}
/* Hidden, not removed: taking it out of flow would shift the totals as the
   skeleton swaps back in. */
body.wfacp_anim_active .bb-checkout-renews-row,
.wfacp_anim_active .bb-checkout-renews-row {
	visibility: hidden !important;
}
/* Round the placeholder blocks so the loading state matches the cards around it. */
body.wfacp_anim_active #wfacp_mini_cart_start_h .wfacp_order_sum .product-image,
.wfacp_anim_active #wfacp_mini_cart_start_h .wfacp_order_sum .product-image {
	border-radius: 12px !important;
	overflow: hidden !important;
}

/* ---- quantity stepper spacing ----
   The stepper carried 18px above it (10px on .product-quantity plus 8px on
   .wfacp_quantity_selector) against 6px of cell padding below, so a row with a
   stepper stood 19px taller than one without and the block sat low in its row.
   One margin, not two, and the two row types now sit closer together. */
body.woocommerce-checkout table.wfacp_order_sum .product-quantity,
#wfacp_mini_cart_start_h table.wfacp_order_sum .product-quantity {
	margin-top: 6px !important;
	margin-bottom: 0 !important;
}
body.woocommerce-checkout table.wfacp_order_sum .wfacp_quantity_selector,
#wfacp_mini_cart_start_h table.wfacp_order_sum .wfacp_quantity_selector {
	margin: 0 !important;
}

/* ----------------------------------------------------------------------------
   2026-09-28: the gap under the quantity stepper, measured rather than guessed.

   Tightening the stepper's own margins was not enough because the space is not
   the stepper's. Below the last row sit THREE stacked spacers, each set by a
   different element that knows nothing about the other two:

       .wfacp_woocommerce_form_coupon   margin-top     6px
       .wfacp-coupon-page               padding-top    8px
       a.wfacp_main_showcoupon          margin-top    10px
                                                     ----
                                                      24px

   plus 6px of cell padding inside the row, so 30px of dead space under the
   "- +" control. Collapsed to a single 12px gap owned by one element, which is
   enough to separate the cart from the coupon prompt without a hole.
   -------------------------------------------------------------------------- */
body.woocommerce-checkout .wfacp_woocommerce_form_coupon,
#wfacp_mini_cart_start_h .wfacp_woocommerce_form_coupon {
	margin-top: 0 !important;
	margin-bottom: 6px !important;
}
body.woocommerce-checkout .wfacp-coupon-page,
#wfacp_mini_cart_start_h .wfacp-coupon-page {
	padding-top: 0 !important;
	padding-bottom: 12px !important;
}
/* Margin only. Setting display:inline-block here shrank the link to its text and
   lost the centring it had as a block, which was not part of the spacing fix. */
body.woocommerce-checkout a.wfacp_main_showcoupon,
#wfacp_mini_cart_start_h a.wfacp_main_showcoupon {
	margin: 12px 0 0 !important;
}

/* ============================================================================
   2026-09-28: three small defects on the restyled bumps and the cart header.
   ========================================================================= */

/* 1. THE STRAY CORNER ON HOVER.
      FunnelKit's social-proof tooltip draws a speech-bubble pointer as a pair of
      CSS triangles (border-width 11px 12px 0, absolutely positioned). The tooltip
      body itself is not in use here, so all that ever appeared was the bare
      pointer, reading as a notch cut out of the card's top edge. Hide the tooltip
      and its pointers inside our bumps rather than trying to re-place them. */
body.woocommerce-checkout #wfob_wrap .wfob-social-proof-tooltip,
#wfacp-e-form #wfob_wrap .wfob-social-proof-tooltip { display: none !important; }
body.woocommerce-checkout #wfob_wrap .wfob-social-proof-tooltip::before,
body.woocommerce-checkout #wfob_wrap .wfob-social-proof-tooltip::after,
#wfacp-e-form #wfob_wrap .wfob-social-proof-tooltip::before,
#wfacp-e-form #wfob_wrap .wfob-social-proof-tooltip::after {
	content: none !important;
	border: 0 !important;
	display: none !important;
}

/* 2. THE DOUBLE BORDER.
      The input already has appearance:none and our 2px border, and the wrapper is
      clean, so the inner square is the control's own background image / inset
      shadow still painting underneath. Strip both and draw the tick ourselves, so
      the bump checkbox is identical to the Subscribe & Save one above it. */
body.woocommerce-checkout #wfob_wrap .wfob_bump_checkbox,
#wfacp-e-form #wfob_wrap .wfob_bump_checkbox {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	background-color: #fff !important;
	box-shadow: none !important;
	outline: none !important;
	position: relative !important;
	flex: 0 0 auto !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bump_checkbox:checked,
#wfacp-e-form #wfob_wrap .wfob_bump_checkbox:checked {
	background-color: #c83784 !important;
	border-color: #c83784 !important;
	background-image: none !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bump_checkbox:checked::after,
#wfacp-e-form #wfob_wrap .wfob_bump_checkbox:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 5px !important;
	top: 1px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid #fff !important;
	border-width: 0 2.5px 2.5px 0 !important;
	transform: rotate(45deg) !important;
	background: none !important;
}
/* The wrapper must not clip the tick. */
body.woocommerce-checkout #wfob_wrap .wfob_checkbox_input_wrap,
#wfacp-e-form #wfob_wrap .wfob_checkbox_input_wrap { overflow: visible !important; }

/* 3. THE CURRENCY FLAG AND ITS CHEVRON.
      CURCY positions .wmc-open-dropdown-currencies absolutely, so it sat on top of
      the "USD" label, and the flag carries an inline `margin: -8px -12px` that
      pulls the two together. Lay the three parts out as a flex row with a real gap
      and let the chevron take its own space. */
body.woocommerce-checkout .wmc-current-currency,
#wfacp_mini_cart_start_h .wmc-current-currency {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	position: relative !important;
	padding-right: 0 !important;
	line-height: 1 !important;
}
body.woocommerce-checkout .wmc-current-currency .wmc-current-flag,
#wfacp_mini_cart_start_h .wmc-current-currency .wmc-current-flag {
	margin: 0 !important;
	transform: scale(0.55) !important;
	transform-origin: center !important;
	flex: 0 0 auto !important;
}
body.woocommerce-checkout .wmc-current-currency .wmc-current-currency-code,
#wfacp_mini_cart_start_h .wmc-current-currency .wmc-current-currency-code {
	margin: 0 !important;
	white-space: nowrap !important;
}
body.woocommerce-checkout .wmc-current-currency .wmc-open-dropdown-currencies,
#wfacp_mini_cart_start_h .wmc-current-currency .wmc-open-dropdown-currencies {
	position: static !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	right: auto !important;
	top: auto !important;
}

/* ============================================================================
   2026-09-28 (round 2): the three follow-ups, fixed at the right elements.
   ========================================================================= */

/* 1. THE DOUBLE BORDER, properly this time.
      The markup is a bordered SPAN wrapping the real control:

        <span class="wfob_bump_checkbox">            22x22, our 2px border
          <input type="checkbox" class="wfob_checkbox">  18x18, FunnelKit's 2px #dedfea
        </span>

      Earlier rules styled the SPAN as though it were the checkbox, which is why
      appearance:none and background-image:none changed nothing: a span has no
      native appearance to suppress. Two nested boxes, two borders.

      The wrapper now carries no box of its own and the INPUT is the control, in
      the light grey the owner asked to keep (#dedfea). The Subscribe & Save box
      above is moved to the same grey so all three read as one set. */
body.woocommerce-checkout #wfob_wrap span.wfob_bump_checkbox,
#wfacp-e-form #wfob_wrap span.wfob_bump_checkbox {
	border: 0 !important;
	background: none !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	box-shadow: none !important;
}
body.woocommerce-checkout #wfob_wrap input.wfob_checkbox,
#wfacp-e-form #wfob_wrap input.wfob_checkbox {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #dedfea !important;
	border-radius: 7px !important;
	background: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	position: relative !important;
	cursor: pointer !important;
	flex: 0 0 auto !important;
}
body.woocommerce-checkout #wfob_wrap input.wfob_checkbox:checked,
#wfacp-e-form #wfob_wrap input.wfob_checkbox:checked {
	background: #c83784 !important;
	border-color: #c83784 !important;
}
body.woocommerce-checkout #wfob_wrap input.wfob_checkbox:checked::after,
#wfacp-e-form #wfob_wrap input.wfob_checkbox:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 6px !important;
	top: 2px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid #fff !important;
	border-width: 0 2.5px 2.5px 0 !important;
	transform: rotate(45deg) !important;
}
/* Same grey on our own box, so the three checkboxes match. */
body.woocommerce-checkout .bb-subup .bb-subup-box,
#wfacp-e-form .bb-subup .bb-subup-box { border-color: #dedfea !important; }

/* 2. THE FLAG SITTING TOO FAR LEFT.
      CURCY shrinks the flag with transform: scale(), which does NOT shrink its
      layout box: the box stays 33px while the flag draws at about 18px, leaving
      ~7px of dead space on each side. Removing CURCY's negative margins (which
      existed to cancel exactly that) left a 20px gap before "USD". The negative
      margin comes back, tuned to the 0.55 scale actually in use. */
body.woocommerce-checkout .wmc-current-currency .wmc-current-flag,
#wfacp_mini_cart_start_h .wmc-current-currency .wmc-current-flag {
	margin: 0 -7px 0 -4px !important;
}

/* 3. STILL TOO MUCH UNDER THE STEPPER.
      18px remained: 6px of cell padding plus a 12px coupon margin. Both trimmed;
      8px total, which reads as a deliberate separation rather than a hole. */
body.woocommerce-checkout table.wfacp_order_sum td.product-name-area,
#wfacp_mini_cart_start_h table.wfacp_order_sum td.product-name-area {
	padding-bottom: 2px !important;
}
body.woocommerce-checkout a.wfacp_main_showcoupon,
#wfacp_mini_cart_start_h a.wfacp_main_showcoupon {
	margin: 6px 0 0 !important;
}

/* ============================================================================
   2026-09-28 (round 3): headline weight, the page jumping on click, and how the
   checkbox looks while the cart is refreshing.
   ========================================================================= */

/* 1. Headline weight now matches the bumps: lead word regular, offer bold. */
body.woocommerce-checkout .bb-subup .bb-subup-headline,
#wfacp-e-form .bb-subup .bb-subup-headline { font-weight: 500 !important; }
body.woocommerce-checkout .bb-subup .bb-subup-headline strong,
#wfacp-e-form .bb-subup .bb-subup-headline strong { font-weight: 800 !important; color: #1f2937 !important; }

/* 2. THE PAGE JUMPING TO THE TOP ON CLICK.
      The real checkbox is visually hidden with position:absolute so the drawn box
      can stand in for it. An absolutely positioned element resolves against its
      nearest POSITIONED ancestor, and the card had none, so the input was laid
      out against a container far up the page. Clicking the label moved focus to
      it and the browser dutifully scrolled there. The FunnelKit bumps never did
      this because their input sits in normal flow.

      Giving the label a positioning context keeps the input inside the card, so
      focus lands where the customer clicked and nothing scrolls. */
body.woocommerce-checkout .bb-subup .bb-subup-head,
#wfacp-e-form .bb-subup .bb-subup-head { position: relative !important; }
body.woocommerce-checkout .bb-subup .bb-subup-check,
#wfacp-e-form .bb-subup .bb-subup-check {
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	margin: 0 !important;
	width: 22px !important;
	height: 22px !important;
	opacity: 0 !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
}

/* 3. THE CHECKBOX WHILE THE CART IS REFRESHING.
      Ticking a bump starts a refresh, and the skeleton fades the strip, which left
      the box a washed-out pink blob at the moment the customer most wants to see
      that their click registered. Hold the checked state at full strength for the
      duration; it is the one element that should stay legible while the rest
      greys out. */
body.wfacp_anim_active #wfob_wrap input.wfob_checkbox,
.wfacp_anim_active #wfob_wrap input.wfob_checkbox,
body.wfacp_anim_active .bb-subup .bb-subup-box,
.wfacp_anim_active .bb-subup .bb-subup-box {
	opacity: 1 !important;
	filter: none !important;
}
body.wfacp_anim_active #wfob_wrap input.wfob_checkbox:checked,
.wfacp_anim_active #wfob_wrap input.wfob_checkbox:checked {
	background: #c83784 !important;
	border-color: #c83784 !important;
}
body.wfacp_anim_active .bb-subup .bb-subup-check:checked + .bb-subup-box,
.wfacp_anim_active .bb-subup .bb-subup-check:checked + .bb-subup-box {
	background: #c83784 !important;
	border-color: #c83784 !important;
}

/* ============================================================================
   2026-09-28 (round 4): the checked tick, and "Yes!" sitting away from the box.
   ========================================================================= */

/* THE MALFORMED TICK.
   The tick was drawn the usual way, an empty ::after with two borders rotated 45
   degrees. That technique depends on the element keeping content-box sizing and
   on nothing else touching border-width; inside FunnelKit's cascade it came out
   as a white wedge rather than a checkmark. A background SVG cannot be distorted
   that way: there is no box to resize and no border to override. The ::after is
   removed outright so the two cannot fight. */
body.woocommerce-checkout #wfob_wrap input.wfob_checkbox:checked::after,
#wfacp-e-form #wfob_wrap input.wfob_checkbox:checked::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
}
body.woocommerce-checkout #wfob_wrap input.wfob_checkbox:checked,
#wfacp-e-form #wfob_wrap input.wfob_checkbox:checked {
	background-color: #c83784 !important;
	border-color: #c83784 !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 13px 13px !important;
}

/* "YES!" NEXT TO THE CHECKBOX.
   The header row already has a 10px flex gap; the title was adding another 10px
   of its own padding on top, which left the label floating away from the control
   it belongs to. One gap is enough. */
body.woocommerce-checkout #wfob_wrap .wfob_title,
#wfacp-e-form #wfob_wrap .wfob_title {
	padding-left: 0 !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bgBox_table,
#wfacp-e-form #wfob_wrap .wfob_bgBox_table { gap: 12px !important; }

/* ============================================================================
   2026-09-28 (round 5): checked state as ONE shorthand, and the real gap source.
   ========================================================================= */

/* THE CHECKED BOX WAS HALF-STYLED.
   The unchecked rule further up sets `background: #fff !important` as a
   SHORTHAND, which also resets background-position and background-image. The
   checked rule then set those back as separate longhands, and the result was a
   mix: the tick image and its size applied, the pink fill and the centring did
   not. Declaring the whole checked background in a single shorthand removes the
   split, so there is nothing left to partially override. */
body.woocommerce-checkout #wfob_wrap input.wfob_checkbox:checked,
#wfacp-e-form #wfob_wrap input.wfob_checkbox:checked,
body.wfacp_anim_active #wfob_wrap input.wfob_checkbox:checked,
.wfacp_anim_active #wfob_wrap input.wfob_checkbox:checked {
	background: #c83784 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center center / 13px 13px no-repeat !important;
	border-color: #c83784 !important;
}

/* THE 31px GAP.
   Setting the title's padding to 0 and the row gap to 12px still measured 31px,
   because neither was the source: the checkbox's own cell is wider than the
   22px control inside it, and the slack sits between them. Collapse the cell to
   its content and the label lands next to the box it belongs to. */
body.woocommerce-checkout #wfob_wrap .wfob_check_container,
#wfacp-e-form #wfob_wrap .wfob_check_container,
body.woocommerce-checkout #wfob_wrap .wfob_checkbox_input_wrap,
#wfacp-e-form #wfob_wrap .wfob_checkbox_input_wrap {
	width: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	flex: 0 0 22px !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bgBox_tablecell.wfob_check_container,
#wfacp-e-form #wfob_wrap .wfob_bgBox_tablecell.wfob_check_container {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* ============================================================================
   2026-09-28 (round 6): stop styling the input, style the wrapper.

   Three rounds were spent trying to paint the <input> itself. The rules load,
   parse, match the element (verified with Element.matches) and carry !important,
   while every competing rule does not, and the checked box still computed white.
   Whatever wins that particular property, chasing it further is not worth more
   passes, and the mechanism that already works two cards above is right here:
   our own Subscribe & Save box is a SPAN with the input hidden on top of it.

   The bump markup happens to have the same shape:

       <span class="wfob_bump_checkbox">   <- paint this
         <input class="wfob_checkbox">     <- hide this, keep it clickable
       </span>

   So the span becomes the visible control and the input becomes a transparent
   hit target covering it. One box, no cascade fight, and the checked state is
   driven by :has() on the parent. Native focus and keyboard behaviour are kept
   because the real input is still there and still focusable, just invisible.
   ========================================================================= */
body.woocommerce-checkout #wfob_wrap span.wfob_bump_checkbox,
#wfacp-e-form #wfob_wrap span.wfob_bump_checkbox {
	position: relative !important;
	display: inline-block !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	flex: 0 0 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #dedfea !important;
	border-radius: 7px !important;
	background: #fff !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	overflow: hidden !important;
}
body.woocommerce-checkout #wfob_wrap span.wfob_bump_checkbox:has(input:checked),
#wfacp-e-form #wfob_wrap span.wfob_bump_checkbox:has(input:checked) {
	border-color: #c83784 !important;
	background: #c83784 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center center / 13px 13px no-repeat !important;
}
/* The real control: invisible, exactly covering the drawn box, still clickable. */
body.woocommerce-checkout #wfob_wrap span.wfob_bump_checkbox input.wfob_checkbox,
#wfacp-e-form #wfob_wrap span.wfob_bump_checkbox input.wfob_checkbox {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	opacity: 0 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	z-index: 2 !important;
}

/* THE GAP BETWEEN THE BOX AND "YES!", at the right element.
   Setting a gap on .wfob_bgBox_table did nothing because the checkbox and the
   title are not siblings there: both live inside .wfob_bump_title_start, so the
   row gap never applied between them. Lay THAT out instead. */
body.woocommerce-checkout #wfob_wrap .wfob_bump_title_start,
#wfacp-e-form #wfob_wrap .wfob_bump_title_start {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.woocommerce-checkout #wfob_wrap .wfob_bump_title_start > *,
#wfacp-e-form #wfob_wrap .wfob_bump_title_start > * { margin: 0 !important; }
body.woocommerce-checkout #wfob_wrap .wfob_bump_title_start .wfob_checkbox_input_wrap,
#wfacp-e-form #wfob_wrap .wfob_bump_title_start .wfob_checkbox_input_wrap {
	width: 22px !important;
	min-width: 22px !important;
	flex: 0 0 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* THE 31px, found at last: .wfob_label_wrap has padding-left: 53px.
   FunnelKit's own layout overlays the checkbox INSIDE the label, so the wrap
   reserves 53px for it. Our header lays the box out as a flex sibling instead,
   which means that reservation is empty space and no amount of gap tuning on the
   row or the title could close it: the padding sits between them. Measured: span
   ends at x=218, label content starts at x=249. */
/* Zeroing it entirely was wrong: the checkbox is positioned OVER this element,
   not laid out beside it, so with no padding the title ran underneath the box
   (measured -22px, i.e. a 22px overlap). The reservation has to stay, just sized
   to the control instead of FunnelKit's larger default: 22px box + 12px gap. */
body.woocommerce-checkout #wfob_wrap .wfob_label_wrap,
#wfacp-e-form #wfob_wrap .wfob_label_wrap {
	padding-left: 34px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

/* ================================================================
 * "Create an account" box: hold the WPLoyalty signup line INSIDE it
 * ================================================================
 *
 * WPLoyalty prints its reward line as a SIBLING of p.create-account, not inside
 * it:
 *
 *   <div class="woocommerce-account-fields">      <- the box is drawn here
 *     <p class="form-row create-account">...</p>  <- this carries the padding
 *     <span class="wlr-signup-message">Signup and earn 10 points!</span>
 *     <br />
 *   </div>
 *
 * The box therefore had no padding of its own and the span inherited none, so
 * "Signup and earn 10 points!" sat flush against the wrapper's left edge, below
 * the checkbox row, reading as if it had escaped the card. Moving the padding
 * onto the wrapper makes every child sit inside it, whatever WPLoyalty injects.
 */
body.woocommerce-checkout .woocommerce-account-fields {
	padding: 12px 14px !important;
}
body.woocommerce-checkout .woocommerce-account-fields .create-account {
	padding: 0 !important;
	margin: 0 !important;
}
/* Align the reward line under the label text rather than under the checkbox. */
body.woocommerce-checkout .woocommerce-account-fields .wlr-signup-message {
	display: block !important;
	margin: 6px 0 0 30px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #6b7280 !important;
}
/* The trailing <br> only adds a blank line under the message. */
body.woocommerce-checkout .woocommerce-account-fields > br {
	display: none !important;
}

/* ================================================================
 * Mobile pass, 2026-09-29 (owner review on a real phone)
 * ================================================================
 *
 * Two complaints, both about horizontal space:
 *
 *   1. The checkout is too narrow. Gutters were stacking: 12px on the panel
 *      plus 14px on every section card meant 52px of the viewport was padding
 *      before any content, on a 390px screen. That is 13% of the width spent on
 *      whitespace, and it is why the form felt cramped and the fields short.
 *
 *   2. The order bump's body copy renders at desktop sizes on a phone. The
 *      sizes come from FunnelKit's bump designer, which has no mobile scale, so
 *      a 28px heading and 20px italic body land unchanged on a 390px screen:
 *      "COMPLETE YOUR 30-DAY FOUNDATION!" took four lines and the description
 *      ran to eleven. Capping them here rather than in the bump designer keeps
 *      the desktop design intact.
 *
 * Everything below is inside a phone media query, so desktop is untouched.
 */
@media (max-width: 767px) {

	/* ---- 1. Gutters: see the block at the end of this file ----
	   The rules that were here shrank the SECTION CARD and the LEFT PANEL. Those
	   are the inner layers; they made the form fields stretch without moving the
	   page margin at all, because the margin the eye reads is set two levels
	   higher by FunnelKit's builder wrapper. Removed, and handled properly at the
	   end of this file. */

	/* ---- 2. Order bump: cap the designer's desktop type scale ---- */
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap {
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}
	/* FunnelKit writes the designer's sizes onto the inner elements, so the cap
	   has to reach descendants, not just the wrapper. */
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap p,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap span,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap div,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap em,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap i {
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap strong,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap b {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}
	/* The bump's own headline. Left-aligned and two sizes down: centred caps at
	   28px is what produced the four-line heading. */
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap h1,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap h2,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap h3,
	body.woocommerce-checkout .wfob_bump .wfob_pro_txt_wrap h4,
	body.woocommerce-checkout .wfob_bump .wfob_title {
		font-size: 15px !important;
		line-height: 1.25 !important;
		margin: 0 0 6px !important;
		text-align: left !important;
		letter-spacing: 0 !important;
	}
	/* Prices on one line next to each other, not stacked in a right-hand column
	   where the strike-through and the live price read as two separate rows. */
	body.woocommerce-checkout .wfob_bump .wfob_price_container {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
		align-items: baseline !important;
		gap: 8px !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_price_container del,
	body.woocommerce-checkout .wfob_bump .wfob_price del {
		font-size: 13px !important;
		opacity: .6 !important;
	}
	body.woocommerce-checkout .wfob_bump .wfob_price_container ins,
	body.woocommerce-checkout .wfob_bump .wfob_price ins {
		font-size: 15px !important;
		font-weight: 800 !important;
		text-decoration: none !important;
	}

	/* The checkbox row stays the tap target; make it comfortably big. */
	body.woocommerce-checkout .wfob_bump .wfob_checkbox_input_wrap input[type="checkbox"],
	body.woocommerce-checkout .wfob_bump input.wfob_bump_checkbox {
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
	}
}


/* ================================================================
 * Mobile page margin: NOT fixed from this file. See the theme.
 * ================================================================
 *
 * The grey funnel panel's side gutter is set by
 * `body .bwf-section-wrap.bwf-section-4d6ccf62`, printed INLINE in the checkout
 * page by themes/flatsome-child/functions.php (search "Trim funnel-page gray
 * panel"). Inline page CSS has the same specificity as anything written here and
 * comes later in the document, so no selector in this stylesheet can win, with or
 * without !important. A rule was tried here and silently lost; it has been removed
 * rather than left to look like it works.
 *
 * The gutter is now 0 on phones and 12px on tablets, set in the theme.
 */

/* ================================================================
 * Checkout content: full-bleed on phones (2026-09-29, final layer)
 * ================================================================
 *
 * The last 15px per side comes from Flatsome's own global rule:
 *
 *   .container, .container-width, .full-width .ubermenu-nav, .row
 *       { padding-left: 15px; padding-right: 15px; }
 *
 * The checkout content wrapper is `cart-container container page-wrapper
 * page-checkout`, so it picks that up like every other container on the site.
 *
 * SCOPE MATTERS HERE. `.container` is a site-wide Flatsome class: the site header
 * uses it too (`header-inner flex-row container logo-left medium-logo-center`).
 * Zeroing `.container` globally would push the header account/login links hard
 * against the screen edge, which is exactly what the owner flagged. So this is
 * pinned to the checkout wrapper's own class combination and reaches nothing
 * else. Verified against the rendered page: the only element carrying both
 * `.cart-container` and `.page-checkout` is the checkout content wrapper.
 *
 * Phones only. On desktop the wrapper is max-width 1100px and centred, so the
 * 15px is invisible and there is nothing to gain by touching it.
 *
 * Unlike the grey funnel panel (see the note above, fixed in the theme because
 * its rule is printed inline in the page), this one lives in a real stylesheet
 * (flatsome.css) at specificity 0,1,0, so it can be beaten from here.
 */
@media (max-width: 767px) {
	body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ================================================================
 * Mobile round 2 (2026-09-29): bump regression fix + 3 tidy-ups
 * ================================================================ */
@media (max-width: 767px) {

	/* ---- 1. Order bump: hands off the layout ----
	   See the note at the end of this file. Every layout rule I wrote for the bump
	   has been removed; only type caps remain, further down. ---- */

	/* ---- 2. Drop the page title on phones ----
	 * It is the checkout step breadcrumb ("Shopping Cart / Checkout details /
	 * Order Complete"), but only the active step renders on mobile, so all it
	 * actually shows is a large "CHECKOUT DETAILS" heading that costs ~100px of
	 * vertical space and tells the customer nothing they do not already know.
	 * Desktop keeps it, where the full three-step trail is visible and useful. */
	body.woocommerce-checkout .checkout-page-title.page-title {
		display: none !important;
	}

	/* ---- 3. The two top blocks get their gutter back ----
	 * Everything else on the page is now full-bleed, which is right for the cards
	 * because their content is inset by their own padding. These two are not
	 * cards: the points banner and the order-summary bar both paint a background
	 * right to the pixel edge, which reads as broken rather than deliberate.
	 * The banner carries an inline `margin:5px 0`, so !important is required. */
	body.woocommerce-checkout .wlr-message-info,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap,
	body.woocommerce-checkout .wfacp_wrapper_start.wfacp_mini_cart_start_h {
		margin-left: 10px !important;
		margin-right: 10px !important;
		/* These elements are already full-width. Margin alone makes them
		   100% + 20px wide, which overflows the viewport and gives the whole page
		   a horizontal scrollbar. The width has to come down by the same amount
		   the margin adds. */
		width: auto !important;
		max-width: calc(100% - 20px) !important;
		box-sizing: border-box !important;
	}

	/* ---- 4. Expanded order summary ----
	 * The totals rows are th/td pairs. Earlier rules in this file flex some of
	 * those pairs, which left the Shipping label floating in the middle of the row
	 * while Subtotal and Tax sat hard left. Pin every totals label left and every
	 * amount right so the four rows line up as a column. */
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.cart-subtotal th,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.shipping th,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.tax-total th,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.order-total th,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.woocommerce-shipping-totals th {
		text-align: left !important;
		width: auto !important;
		padding-left: 0 !important;
		float: none !important;
	}
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.cart-subtotal td,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.shipping td,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.tax-total td,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.order-total td,
	body.woocommerce-checkout #wfacp_mini_cart_start_h tr.woocommerce-shipping-totals td {
		text-align: right !important;
		padding-right: 0 !important;
		float: none !important;
	}
	/* The currency switcher was rendering as a large boxed control that dominated
	   the top of the summary. It is a secondary control here. */
	body.woocommerce-checkout #wfacp_mini_cart_start_h .woocommerce-multi-currency.wmc-shortcode {
		max-width: 132px !important;
		margin-left: auto !important;
		transform: scale(.88) !important;
		transform-origin: right top !important;
	}
}

/* ================================================================
 * Order bump on mobile: why there are no layout rules here
 * ================================================================
 *
 * 2026-09-29. I twice wrote layout CSS for the bump against class names I could
 * not see, and the second attempt broke it badly: `display: flex` on what I
 * assumed were the bump's content wrappers turned the headline into a one-word
 * column ("COM / PLET / E / YOU / R 30- / DAY ..."). Removed, along with the
 * float-based replacement, which was another guess.
 *
 * Why the guessing happened: the bump is injected by AJAX only when the cart
 * qualifies, so it is absent from a plain `curl` of /checkout/ and cannot be
 * inspected the way the rest of this stylesheet was. `.wfob_content` and
 * `.wfob_text_inner`, which several rules here target, are NOT classes this
 * plugin emits at all.
 *
 * The real markup, read from
 * funnel-builder-pro/modules/order-bumps/includes/skins-classes/bump.php:
 *
 *     .bwf_display_col_flex.wfob_pro_image_wrap    (bottle)
 *     .bwf_display_col_flex.wfob_pro_txt_wrap      (headline + description)
 *
 * and the plugin already ships its own mobile rule, generated per bump:
 *
 *     ... .bwf_display_col_flex.wfob_pro_txt_wrap { width: 100%; }
 *
 * So the stock mobile layout is correct on its own. It stacks the copy to full
 * width under the bottle. Nothing here should fight it.
 *
 * What remains below is type sizing ONLY: the bump designer has no mobile scale,
 * so its desktop sizes land unchanged on a phone. Font-size and line-height
 * cannot break the flex layout the way display/float/flex-basis can.
 *
 * If the bump still needs layout work, get the rendered DOM first (DevTools on a
 * real qualifying cart), because it cannot be derived from the page source.
 */
@media (max-width: 767px) {
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap p,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap span,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap em,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap i {
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h1,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h2,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h3,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h4 {
		font-size: 15px !important;
		line-height: 1.3 !important;
		letter-spacing: 0 !important;
		margin: 0 0 6px !important;
	}
}

/* ================================================================
 * Order bump: make it shorter on phones (2026-09-29)
 * ================================================================
 *
 * The stock layout is correct (see the note above, I am not touching it again),
 * but each bump runs to roughly a third of a phone screen: a price row, a "Yes!"
 * row, then a block of image + heading + five lines of italic description, all at
 * desktop spacing. Two bumps in a row push the pay button well below the fold.
 *
 * Everything here is padding, margin, font-size, line-height and image size.
 * Nothing sets display, float, flex or width on a bump wrapper, because those are
 * the properties that broke it last time and the markup only exists after the
 * AJAX render, so it cannot be verified from the page source.
 */
@media (max-width: 767px) {
	body.woocommerce-checkout #wfob_wrap .wfob_bump {
		margin-bottom: 10px !important;
	}
	/* The header row (checkbox, "Yes! ...", price) carries a 56px floor from an
	   earlier pass plus its own padding. */
	body.woocommerce-checkout #wfob_wrap .wfob_bgBox_table,
	#wfacp-e-form #wfob_wrap .wfob_bgBox_table {
		min-height: 0 !important;
		padding: 9px 12px !important;
	}
	body.woocommerce-checkout #wfob_wrap .wfob_bump_title_start {
		font-size: 13.5px !important;
		line-height: 1.3 !important;
	}
	/* Body block: heading, description, badge. */
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap p,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap span,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap em,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap i {
		font-size: 12.5px !important;
		line-height: 1.38 !important;
	}
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap p {
		margin: 0 0 4px !important;
	}
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h1,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h2,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h3,
	body.woocommerce-checkout #wfob_wrap .wfob_pro_txt_wrap h4 {
		font-size: 13.5px !important;
		line-height: 1.25 !important;
		margin: 0 0 4px !important;
		letter-spacing: 0 !important;
	}
	/* Smaller bottle: it is decorative here, the copy is doing the selling. */
	body.woocommerce-checkout #wfob_wrap .wfob_pro_image_wrap img {
		width: 52px !important;
		height: 52px !important;
		object-fit: contain !important;
	}
	/* Trim the padding the content block sits in. */
	body.woocommerce-checkout #wfob_wrap .wfob_bgBox_cell,
	body.woocommerce-checkout #wfob_wrap .wfob_price_container {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}
}

/* ================================================================
 * Expanded order summary on phones (2026-09-29)
 * ================================================================
 *
 * MEASURED, not guessed. Captured with Playwright at 390x844 on dev:
 *
 *   wrapper  .wfacp_collapsible_order_summary_wrap.wfacp-inside.wfacp_mobile   (NO id)
 *   table    table.wfacp_mini_cart_items.wfacp_collapsible_summary
 *   row      tr.cart_item.wfacp_product_row
 *   cells    td.product-name-area (w 251)   td.product-total (w 59)
 *   totals   tr.cart-subtotal / tr.shipping_total_fee / tr.order-total
 *
 * Two facts that invalidated the earlier attempt:
 *
 *   1. The VISIBLE summary on mobile has no id. `#wfacp_mini_cart_start_h` is the
 *      hidden desktop instance, so every rule scoped to it was dead. The page
 *      source shows both; only a real mobile render shows which one is on screen.
 *   2. The shipping row is `tr.shipping_total_fee`, NOT `tr.shipping`. That is why
 *      the Shipping label stayed centred while Subtotal and Total sat left.
 *
 * Measured symptom: the title was 51px wide at x=228 inside a 251px cell, with a
 * 130px dead gap after the 56px bottle, so it wrapped one word per line. The cell
 * is laid out as a flex row here so the copy gets the width the cell actually has.
 */
@media (max-width: 767px) {

	/* ---- product row: bottle | title+qty | price ---- */
	/* The cell resolves to display:grid from FunnelKit's own CSS (confirmed by
	   computed style; the rule lives in a cross-origin sheet whose cssRules cannot
	   be enumerated, which is why a stylesheet scan does not show it). Rather than
	   fight it, drive the grid: a fixed bottle column and one flexible text column. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-name-area {
		display: grid !important;
		grid-template-columns: 52px minmax(0, 1fr) !important;
		column-gap: 10px !important;
		align-items: start !important;
		padding: 10px 0 !important;
		vertical-align: top !important;
	}
	/* Measured: this box sits at x=108 w=183 but its children start at x=228, i.e.
	   ~120px of left inset inside it. That inset is the dead gap that squeezed the
	   title to 63px and made it wrap one word per line. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_order_summary_item_name {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		display: block !important;
		text-align: left !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-name-area .product-image {
		flex: 0 0 52px !important;
		width: 52px !important;
		max-width: 52px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb img {
		width: 52px !important;
		height: 52px !important;
		max-width: 52px !important;
		object-fit: contain !important;
	}
	/* The copy column takes every pixel the bottle does not. min-width:0 is what
	   actually lets a flex item shrink its text instead of overflowing. */
	/* NB: `.product-name` from mini-cart-items.php is NOT what this checkout renders.
	   The collapsible summary uses `.wfacp_order_summary_item_name`, handled above. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_cart_title_sec {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		float: none !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mini_cart_item_title {
		display: block !important;
		width: auto !important;
		max-width: none !important;
		font-size: 13.5px !important;
		line-height: 1.3 !important;
		font-weight: 600 !important;
		text-align: left !important;
	}
	/* Stepper sits under the title, left aligned, and is smaller. */
	/* Remove control: on the title line, not adrift between the columns. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
		position: static !important;
		float: right !important;
		width: auto !important;
		margin: 0 0 0 6px !important;
		line-height: 1 !important;
	}
	/* Price column hugs its content and tops-aligns with the title. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-total {
		vertical-align: top !important;
		text-align: right !important;
		white-space: nowrap !important;
		width: 1% !important;
		padding: 10px 0 !important;
		font-size: 13.5px !important;
		font-weight: 700 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-qty-ball {
		width: 19px !important;
		height: 19px !important;
		line-height: 19px !important;
		font-size: 11px !important;
	}

	/* ---- currency switcher: it was a full-width 52px bar above the product ---- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .woocommerce-multi-currency.wmc-shortcode {
		width: auto !important;
		max-width: 104px !important;
		margin: 0 0 6px auto !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wmc-current-currency {
		padding: 4px 8px !important;
		font-size: 12.5px !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wmc-current-flag {
		width: 17px !important;
		height: 17px !important;
		background-size: contain !important;
	}

	/* ---- totals: EVERY label left, EVERY amount right, tighter rows ---- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_reviews th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart-subtotal th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.shipping_total_fee th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_reviews td:first-child {
		text-align: left !important;
		padding: 7px 0 !important;
		font-size: 13.5px !important;
		font-weight: 500 !important;
		white-space: nowrap !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_reviews td,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart-subtotal td,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.shipping_total_fee td,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td {
		text-align: right !important;
		padding: 7px 0 !important;
		font-size: 13.5px !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td {
		font-size: 16px !important;
		font-weight: 800 !important;
		padding-top: 10px !important;
	}
	/* Coupon line */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-coupon-section,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_coupon_wrap {
		margin: 6px 0 !important;
		font-size: 13px !important;
	}
}

/* Order summary, polish pass (2026-09-29, after measuring the grid fix) */
@media (max-width: 767px) {
	/* The remove control was landing on its own line under the price. Pin it to
	   the top-right of the row so it reads as an affordance on the line item
	   rather than a stray glyph. The row is the positioning context. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item {
		position: relative !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
		position: absolute !important;
		top: 34px !important;
		right: 0 !important;
		float: none !important;
		margin: 0 !important;
		width: auto !important;
		line-height: 1 !important;
		opacity: .5 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap a {
		font-size: 15px !important;
	}
	/* Price sits above it, so keep the column clear of the x. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-total {
		padding-bottom: 0 !important;
	}

	/* Currency: a small pill, not a 100px bordered box. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .woocommerce-multi-currency.wmc-shortcode {
		max-width: 88px !important;
		margin: 0 0 2px auto !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wmc-current-currency {
		padding: 3px 7px !important;
		font-size: 12px !important;
		border-radius: 6px !important;
	}

	/* Close the dead space between the coupon line and the totals. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_items {
		margin-bottom: 4px !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_reviews {
		margin-top: 4px !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-coupon-section,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_coupon_wrap,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_coupon_page {
		margin: 2px 0 6px !important;
		padding: 0 !important;
	}
}

/* Order summary, product rows (2026-09-29, third look with two items in cart) */
@media (max-width: 767px) {
	/* With more than one line item the rows ran together and the x floated in the
	   gap between them, reading as though it belonged to neither. Separate the
	   items and pair the x with the stepper, so each row is: bottle + title + price
	   on top, then quantity controls and remove on one line beneath. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item + tr.cart_item td {
		border-top: 1px solid #f1e6ec !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item td.product-name-area,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item td.product-total {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	/* Sit the remove control on the stepper's line rather than under the price. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
		top: auto !important;
		bottom: 14px !important;
		right: 0 !important;
	}
	/* Stepper: no dead run to its right, and a touch smaller. */
	/* Title a shade tighter so a 2-line name does not dominate the row. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mini_cart_item_title {
		font-size: 13px !important;
		line-height: 1.28 !important;
	}
}

/* Order summary rows, corrected placement (2026-09-29, measured DOM tree)
 *
 * Measured structure of tr.cart_item on mobile (it is display:flex, not a table row):
 *
 *   tr.cart_item                    flex, position:relative, w350
 *     td.product-name-area          grid, w291
 *       .product-image              w52
 *       .wfacp_order_summary_item_name  w223
 *         .wfacp_cart_title_sec     w223   (title)
 *         .product-quantity         w223   (stepper only 77 wide, 146px dead to its right)
 *     td.product-total              block, w59
 *       span.woocommerce-Price-amount
 *       span.wfacp_cart_product_name_h   <-- position:relative, HEIGHT 0
 *         .wfacp_delete_item_wrap        <-- position:absolute
 *
 * The x was landing ABOVE the price because its containing block is that
 * zero-height relative span inside the price cell, so `bottom` resolved against a
 * 0px box, not against the row. Making that span static hands the x to the row
 * (which is already position:relative), where bottom-right puts it on the same
 * line as the stepper. Stepper left, remove right, price top right.
 */
@media (max-width: 767px) {
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_cart_product_name_h {
		position: static !important;
		display: block !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
		position: absolute !important;
		top: auto !important;
		bottom: 10px !important;
		right: 0 !important;
		width: auto !important;
		margin: 0 !important;
		opacity: .45 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap a {
		width: 26px !important;
		height: 26px !important;
		line-height: 26px !important;
	}
	/* The quantity block spanned the full text column with the stepper adrift at
	   its left. Shrink it to its content so the line reads stepper ... x. */
	/* Price keeps the top line to itself. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-total {
		padding-top: 10px !important;
	}
}

/* ================================================================
 * Order summary line items: redesign, not another nudge (2026-09-29)
 * ================================================================
 *
 * The previous passes moved things around without fixing what actually looked
 * cheap. Four separate defects, each addressed below:
 *
 *   1. The bottle sat in a bordered, rounded frame, so the product read as a
 *      thumbnail in a box rather than as the product.
 *   2. The quantity ball hung off the frame's top-right corner and clipped the
 *      border, which is what made the whole row look unfinished.
 *   3. The stepper was three grey slabs with hairline dividers at 24-26px each.
 *   4. The x sat at bottom-right with nothing near it, so it read as belonging
 *      to no row in particular.
 *
 * Target shape, which is the standard mobile line item:
 *
 *      [bottle]  Product title over two lines        $39.95
 *                ( - 1 + )                               x        <- x centred on the row
 *
 * The x is vertically centred on the row instead of pinned to a corner. It
 * cannot be placed next to the stepper: the stepper lives in td.product-name-area
 * and the x lives in td.product-total, two different flex children of the row, and
 * the stepper's width changes with the quantity's digit count, so any fixed left
 * offset would drift.
 */
@media (max-width: 767px) {

	/* 1 + 2. Bottle: no frame, and the count chip tucked into the corner. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb {
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
		overflow: visible !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb img {
		border: 0 !important;
		border-radius: 8px !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-qty-ball {
		top: -5px !important;
		right: -5px !important;
		width: 18px !important;
		height: 18px !important;
		line-height: 18px !important;
		font-size: 10.5px !important;
		font-weight: 700 !important;
		border-radius: 50% !important;
		box-shadow: 0 0 0 2px #fff !important;   /* reads as a chip on the image, not a clipped square */
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-qty-count,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-pro-count {
		font-size: 10.5px !important;
		line-height: 18px !important;
	}

	/* 3. Stepper: one rounded pill with quiet controls. */

	/* 4. Remove: centred on the row's right edge, so it clearly owns the row. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
		position: absolute !important;
		top: 50% !important;
		bottom: auto !important;
		right: 0 !important;
		transform: translateY(-50%) !important;
		opacity: .38 !important;
	}

	/* Tighter row now that nothing needs the extra room. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item td.product-name-area,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item td.product-total {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	/* Keep the title clear of the x's column so two-line names never run under it. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-total {
		padding-right: 26px !important;
	}
}

/* Stepper collapse fix (2026-09-29).
 *
 * `.product-quantity { display:inline-block; width:auto }` from the pass above
 * computed to width:0. An inline-block shrink-wraps its content, its only child
 * is an inline-flex that is ALSO shrink-to-fit, and the pair resolved to zero.
 * The stepper then got 27px to lay out three 28px children in, so the -, the 1
 * and the + printed on top of each other.
 *
 * Back to block (it takes the text column's width, which costs nothing because
 * the pill inside is still shrink-to-fit) and the pill's children are pinned so
 * they can never be squeezed again.
 */
@media (max-width: 767px) {
	/* The frame is drawn on the wrapper as well as the thumb; clear both. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .product-image,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .product-image > * {
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .product-image img {
		border-radius: 8px !important;
	}
	/* qty ball must stay above the image and keep its own styling */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-qty-ball {
		background: #c83784 !important;
		color: #fff !important;
		border-radius: 50% !important;
		box-shadow: 0 0 0 2px #fff !important;
		z-index: 2 !important;
	}
}

/* ================================================================
 * Quantity stepper: reverted to stock (2026-09-29)
 * ================================================================
 *
 * I restyled this control as a rounded pill and broke it twice.
 *
 *   Attempt 1: `.product-quantity { display:inline-block; width:auto }` computed
 *              to width:0 (an inline-block shrink-wrapping an inline-flex child
 *              that is itself shrink-to-fit), so the pill got 27px for three
 *              28px children and the minus, the 1 and the plus printed on top of
 *              each other.
 *   Attempt 2: pinning the children with flex:0 0 auto fixed the measured widths
 *              (84px = 28+25+28, verified) but the minus still rendered over the
 *              input.
 *
 * The control is three divs plus a number input with the plugin's own JS bound to
 * them, and FunnelKit sizes it from its own stylesheet. Re-skinning it properly is
 * more than a CSS override and is not worth risking a control the customer needs
 * to change quantities with. Stock appearance restored; only the spacing around it
 * is ours. Revisit with the plugin's own markup if the look really matters.
 */
@media (max-width: 767px) {
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .product-quantity {
		display: block !important;
		width: auto !important;
		margin: 8px 0 0 !important;
		text-align: left !important;
	}
}

/* Bottle frame (2026-09-29). Measured: the 1px #eef1f5 border and 10px radius are
   on the <img> itself, not on .wfacp-pro-thumb or .product-image, which is why
   clearing those two did nothing. */
@media (max-width: 767px) {
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .product-image img,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb img {
		border: 0 !important;
		border-radius: 8px !important;
		box-shadow: none !important;
		background: transparent !important;
	}
}

/* Bottle frame, specificity escalation (2026-09-29).
 * The previous rule matched the <img> and carried !important, yet the 1px
 * #eef1f5 border survived: it is set by a stylesheet served cross-origin (three
 * sheets throw on cssRules, so they cannot be enumerated from the page) with a
 * more specific !important rule. Prefixing with the form's id outranks any
 * selector that carries no id. */
@media (max-width: 767px) {
	#wfacp-e-form .wfacp_collapsible_order_summary_wrap .product-image img,
	#wfacp-e-form .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb img,
	#wfacp-e-form .wfacp_collapsible_order_summary_wrap td.product-name-area img {
		border: 0 !important;
		border-width: 0 !important;
		border-style: none !important;
		border-radius: 8px !important;
		box-shadow: none !important;
		padding: 0 !important;
		background: transparent !important;
	}
}

/* ================================================================
 * Our own quantity stepper (2026-09-29)
 * ================================================================
 * Rendered by mu-plugins/bb-checkout-summary-parts.php through FunnelKit's
 * `wfacp_display_quantity_increment_placeholder` seam, so these class names are
 * ours and nothing upstream competes for them. The two earlier attempts to skin
 * the stock control failed because its width came from the plugin's own CSS and
 * collapsed to zero; here the box is defined from scratch.
 */
.bb-qty-wrap { margin: 8px 0 0 !important; text-align: left !important; }
.bb-qty {
	display: inline-flex !important;
	align-items: center !important;
	height: 30px !important;
	border: 1px solid #e7dae2 !important;
	border-radius: 999px !important;
	background: #fff !important;
	overflow: hidden !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
}
.bb-qty__btn {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 28px !important;
	line-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #b0899b !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-align: center !important;
	cursor: pointer !important;
	user-select: none !important;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease !important;
}
.bb-qty__btn:hover  { background: #fdf2f8 !important; color: #c83784 !important; }
.bb-qty__btn:active { background: #fbe4ef !important; }
.bb-qty__input {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 28px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-left: 1px solid #f2e6ec !important;
	border-right: 1px solid #f2e6ec !important;
	border-radius: 0 !important;
	background: transparent !important;
	text-align: center !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #1f2937 !important;
	box-shadow: none !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}
.bb-qty__input::-webkit-outer-spin-button,
.bb-qty__input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.bb-qty__input:focus { outline: none !important; box-shadow: none !important; }

/* Image comes through wfacp_cart_image with our class on it. */
#wfacp-e-form .bb-cart-thumb,
.wfacp_collapsible_order_summary_wrap .bb-cart-thumb {
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Stepper width, made deterministic (2026-09-29).
 * Our element also carries FunnelKit's `wfacp_quantity_selector` class (kept so
 * their JS keeps working), and their stylesheet sizes that class from a
 * cross-origin sheet. Relying on shrink-to-fit gave a 32px box clipping 90px of
 * children. The width is stated outright instead: 3 x 30px cells + 2px borders. */
.bb-qty.wfacp_quantity_selector,
#wfacp-e-form .bb-qty,
.wfacp_collapsible_order_summary_wrap .bb-qty {
	width: 92px !important;
	min-width: 92px !important;
	max-width: 92px !important;
	flex: 0 0 92px !important;
	box-sizing: border-box !important;
}

/* Stepper buttons back into flow (2026-09-29).
 * Measured: the minus button and the input both sat at x=89, i.e. on top of each
 * other, and the plus at x=151. FunnelKit positions `.value-button` ABSOLUTELY
 * (left/right of the control), so `flex: 0 0 30px` on them meant nothing: an
 * absolutely positioned child is out of flow and is not a flex item. Returning
 * them to static makes the three cells lay out as a real flex row. */
.bb-qty .value-button,
.bb-qty .bb-qty__btn,
#wfacp-e-form .bb-qty .value-button {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	float: none !important;
}
.bb-qty { position: relative !important; }

/* ================================================================================
 * ORDER SUMMARY: full visual rebuild (2026-09-29)
 * ================================================================================
 *
 * Everything before this in the mobile summary work was corrective: put the title
 * back in the right column, stop the x floating, align the Shipping label. This
 * block is the design pass on top of that, and it deliberately restyles every
 * element rather than nudging the stock look.
 *
 * Direction: a white card, generous whitespace, one accent colour used sparingly.
 * Type carries the hierarchy instead of boxes and borders, which is what made the
 * stock panel read as cheap: four different bordered rectangles competing at the
 * same weight.
 *
 *   header      quiet label, total in brand pink, the only pink at the top
 *   thumbnail   larger, soft shadow, no frame, no count chip (the stepper says it)
 *   title       15px semibold, dark, 2 lines max before it wraps naturally
 *   price       right, tabular, same weight as the title so the row reads as a pair
 *   stepper     borderless pill on a blush ground, pink glyphs, no inner dividers
 *   remove      hairline x, only reaches full opacity on interaction
 *   totals      muted labels, dark values, the grand total set apart by size
 *
 * Scoped to the collapsible wrapper so the desktop sidebar is untouched.
 * ------------------------------------------------------------------------------ */
@media (max-width: 767px) {

	/* ---------- the card itself ---------- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap {
		background: #fff !important;
		border: 1px solid #f0eaee !important;
		border-radius: 14px !important;
		box-shadow: 0 1px 2px rgba(31, 41, 55, .04) !important;
		overflow: hidden !important;
	}

	/* ---------- header bar ---------- */
	body.woocommerce-checkout .wfacp_mb_mini_cart_sec_accordion,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap > .wfacp_mb_mini_cart_sec {
		border-bottom: 1px solid #f4eef1 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_show_hide_text,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mb_mini_cart_text {
		font-size: 14px !important;
		font-weight: 600 !important;
		color: #4b5563 !important;
		letter-spacing: -0.01em !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_show_price_wrap,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_cart_mb_fragment_price {
		font-size: 17px !important;
		font-weight: 800 !important;
		color: #c83784 !important;
		letter-spacing: -0.02em !important;
	}

	/* ---------- currency: a quiet text control, not a bordered box ---------- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .woocommerce-multi-currency.wmc-shortcode {
		max-width: 94px !important;
		margin: 2px 0 10px auto !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wmc-current-currency {
		border: 0 !important;
		background: #f8f5f7 !important;
		border-radius: 8px !important;
		padding: 5px 9px !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		color: #6b7280 !important;
		box-shadow: none !important;
	}

	/* ---------- product rows ---------- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item + tr.cart_item td {
		border-top: 1px solid #f6f1f4 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart_item td.product-name-area {
		grid-template-columns: 60px minmax(0, 1fr) !important;
		column-gap: 13px !important;
		padding: 14px 0 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-name-area .product-image {
		flex: 0 0 60px !important;
		width: 60px !important;
		max-width: 60px !important;
	}
	/* Bigger, softer, no frame. The shadow does the separating that the border did. */
	#wfacp-e-form .wfacp_collapsible_order_summary_wrap .wfacp-pro-thumb img,
	#wfacp-e-form .wfacp_collapsible_order_summary_wrap .product-image img {
		width: 60px !important;
		height: 60px !important;
		border: 0 !important;
		border-radius: 10px !important;
		background: #fbf9fa !important;
		box-shadow: 0 1px 3px rgba(31, 41, 55, .07) !important;
		object-fit: contain !important;
	}
	/* The count chip duplicated the stepper directly beneath it. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-qty-ball {
		display: none !important;
	}

	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mini_cart_item_title {
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.32 !important;
		color: #111827 !important;
		letter-spacing: -0.01em !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap td.product-total {
		font-size: 15px !important;
		font-weight: 600 !important;
		color: #111827 !important;
		padding: 14px 24px 14px 0 !important;
		font-variant-numeric: tabular-nums !important;
	}

	/* ---------- remove: present, not shouting ---------- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
		opacity: .28 !important;
		transition: opacity .15s ease !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap:hover,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap:active {
		opacity: .75 !important;
	}

	/* ---------- coupon ---------- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-coupon-section a,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_coupon_page a,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .showcoupon {
		font-size: 13.5px !important;
		font-weight: 600 !important;
		color: #c83784 !important;
		text-decoration: none !important;
	}

	/* ---------- totals ---------- */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_reviews th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart-subtotal th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.shipping_total_fee th {
		font-size: 14px !important;
		font-weight: 500 !important;
		color: #6b7280 !important;
		padding: 8px 0 !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap table.wfacp_mini_cart_reviews td,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.cart-subtotal td,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.shipping_total_fee td {
		font-size: 14px !important;
		font-weight: 600 !important;
		color: #374151 !important;
		padding: 8px 0 !important;
		font-variant-numeric: tabular-nums !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total th {
		font-size: 16px !important;
		font-weight: 700 !important;
		color: #111827 !important;
		padding-top: 14px !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td {
		font-size: 21px !important;
		font-weight: 800 !important;
		color: #c83784 !important;
		padding-top: 14px !important;
		letter-spacing: -0.02em !important;
		font-variant-numeric: tabular-nums !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total th,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td {
		border-top: 1px solid #f0eaee !important;
	}
}

/* ---------- the stepper, redesigned (our markup, so no fighting) ---------- */
.bb-qty.wfacp_quantity_selector,
#wfacp-e-form .bb-qty {
	height: 32px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #f9f3f6 !important;
	overflow: visible !important;
}
.bb-qty__btn {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 32px !important;
	line-height: 32px !important;
	color: #c83784 !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	border-radius: 10px !important;
}
.bb-qty__btn:hover  { background: #f5e5ee !important; color: #a92d6e !important; }
.bb-qty__btn:active { background: #efd6e4 !important; }
.bb-qty__input {
	flex: 0 0 32px !important;
	width: 32px !important;
	height: 32px !important;
	border: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	background: transparent !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #111827 !important;
	font-variant-numeric: tabular-nums !important;
}
.bb-qty.wfacp_quantity_selector,
#wfacp-e-form .bb-qty,
.wfacp_collapsible_order_summary_wrap .bb-qty {
	width: 92px !important; min-width: 92px !important; max-width: 92px !important;
}

/* Order summary polish (2026-09-29): the grand total's colour lives on a child
   element, the stepper kept hairlines from the earlier pass, and the header rule
   was a full-strength brand bar sitting directly under a quiet label. */
@media (max-width: 767px) {
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td *,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td .woocommerce-Price-amount,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.order-total td bdi {
		color: #c83784 !important;
		font-size: 21px !important;
		font-weight: 800 !important;
	}
	/* The brand bar under the header competed with the total for the eye. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mb_mini_cart_sec_accordion,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mb_mini_cart_sec {
		border-bottom-color: #f2e8ee !important;
	}
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_mb_mini_cart_sec_accordion_content {
		border-top: 0 !important;
	}
	/* Coupon prompt: an action, not a headline. */
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp-coupon-section a,
	body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .showcoupon {
		font-size: 13px !important;
		font-weight: 600 !important;
	}
}
/* No internal rules in the pill: the tint alone separates the cells. */
.bb-qty__input,
#wfacp-e-form .bb-qty__input {
	border: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	box-shadow: none !important;
	background: rgba(255,255,255,.66) !important;
	border-radius: 8px !important;
}

/* ================================================================================
 * Summary rows v2: quieter stepper, trash affordance, subscription treatment
 * ================================================================================
 * 2026-09-29. Three changes:
 *   1. The stepper read as three stacked boxes because the number sat in its own
 *      white well inside a tinted pill. One outline, transparent cells, no well.
 *   2. A circled x reads as "close", not "remove". Swapped for a bin glyph, moved
 *      to the row's bottom-right next to the quantity it belongs to.
 *   3. A subscription and a one-time purchase looked identical in the one place a
 *      customer checks what they are committing to. Subscription rows now carry a
 *      tinted ground, a left accent and a renewal line.
 * ------------------------------------------------------------------------------ */

/* ---------- 1. quantity: a single outlined control ---------- */
.bb-qty.wfacp_quantity_selector,
#wfacp-e-form .bb-qty,
.wfacp_collapsible_order_summary_wrap .bb-qty {
	height: 30px !important;
	width: 88px !important; min-width: 88px !important; max-width: 88px !important;
	background: transparent !important;
	border: 1px solid #e4dbe1 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}
.bb-qty__btn {
	flex: 0 0 28px !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	background: transparent !important;
	color: #9b8592 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	border-radius: 0 !important;
}
.bb-qty__btn:hover  { background: #fbf4f8 !important; color: #c83784 !important; }
.bb-qty__btn:active { background: #f6e9f1 !important; }
.bb-qty__input,
#wfacp-e-form .bb-qty__input {
	flex: 0 0 30px !important;
	width: 30px !important;
	height: 28px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #1f2937 !important;
}

/* ---------- 2. remove: a bin, bottom-right ---------- */
body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap {
	position: absolute !important;
	top: auto !important;
	bottom: 14px !important;
	right: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	width: auto !important;
}
/* Their circled-x svg is replaced rather than removed, so the anchor, its classes
   and the click handler bound to them all stay exactly as the plugin left them. */
body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap a svg {
	display: none !important;
}
body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap a {
	display: block !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 8px !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b8592' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") !important;
	transition: background-color .15s ease !important;
}
body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap .wfacp_delete_item_wrap a:hover {
	background-color: #fdf0f5 !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c83784' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") !important;
}

/* ---------- 3. subscription rows ---------- */
body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.bb-is-subscription td {
	background: transparent !important;
}
body.woocommerce-checkout .wfacp_collapsible_order_summary_wrap tr.bb-is-subscription td.product-name-area {
	box-shadow: none !important;
}
.bb-sub-line {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 6px 0 0 !important;
}
.bb-sub-chip {
	display: inline-block !important;
	padding: 2px 7px !important;
	border-radius: 5px !important;
	background: #f7e3ee !important;
	color: #a92d6e !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	line-height: 1.5 !important;
}
.bb-sub-note {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #7c6b74 !important;
	line-height: 1.35 !important;
}

/* ================================================================================
 * DESKTOP order summary: same design language (2026-09-29)
 * ================================================================================
 * Measured, because the two viewports use DIFFERENT wrappers and this caused a
 * whole pass of dead rules earlier:
 *
 *   mobile   .wfacp_collapsible_order_summary_wrap   (no id)
 *   desktop  #wfacp_mini_cart_start_h  >  .wfacp_order_summary_container
 *
 * Both render the same tables (.wfacp_mini_cart_items / .wfacp_mini_cart_reviews)
 * and the same row classes, so the design carries over; only the wrapper and the
 * column width differ. The sidebar is ~315px, narrower than the phone panel, so
 * type steps down a little rather than being copied across verbatim.
 *
 * The stepper and the bin are styled outside any media query, so they are already
 * consistent on both.
 * ------------------------------------------------------------------------------ */
/* ============================================================================
 * DESKTOP ORDER SUMMARY  (>=768px)   2026-09-29
 *
 * Measured, not guessed. The desktop summary lives under #wfacp_mini_cart_start_h
 * and each row is:
 *
 *   tr.cart_item                          display:flex, position:relative
 *     td.product-name-area                display:GRID
 *       div.product-image                 holds .wfacp-pro-thumb > span.wfacp-pro-count
 *       div.product-name                  .wfacp_cart_title_sec + .product-quantity.bb-qty-wrap
 *     td.product-total                    price + .wfacp_cart_product_name_h
 *       span.wfacp_cart_product_name_h    position:relative  <- offset parent of the trash
 *         span.wfacp_delete_item_wrap     position:ABSOLUTE
 *
 * Three things in that tree decide the layout and each one bit on the first pass:
 *  1. product-name-area is a grid, so the thumb/title split is a grid-template,
 *     not a float or a flex basis.
 *  2. the trash is absolutely positioned against .wfacp_cart_product_name_h, which
 *     sits beside the price. Left alone it lands on top of the price. Making that
 *     span position:static hands the trash to tr.cart_item (already relative) and
 *     it can then be placed at the row's bottom-right.
 *  3. the quantity ball is span.wfacp-pro-count inside the thumb, not an
 *     ::after on the image.
 * ========================================================================== */
@media (min-width: 768px) {

	/* The summary already sits inside FunnelKit's own card, .wfacp-mini-cart-block.
	 * Giving .wfacp_order_summary_container a second background, border and radius
	 * drew a card inside a card, and the two paddings (20px outer + 16px inner +
	 * 6px on the wrapper) left the item titles only 257px of a 343px column, which
	 * is what wrapped "Breast Enhancement - 1 Month Supply" onto four lines.
	 * One card: the outer element carries it, everything inside is transparent. */
	#wfacp_mini_cart_start_h .wfacp_order_summary_container {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	#wfacp_mini_cart_start_h.wfacp_wrapper_start,
	#wfacp_mini_cart_start_h { padding: 0 !important; }

	body.woocommerce-checkout .wfacp-mini-cart-block {
		background: #fff !important;
		border: 1px solid #f0eaee !important;
		border-radius: 14px !important;
		box-shadow: 0 1px 2px rgba(31,41,55,.04) !important;
		padding: 18px 16px !important;
	}

	/* Currency: a quiet chip, same as mobile. */
	#wfacp_mini_cart_start_h .woocommerce-multi-currency.wmc-shortcode { max-width: 96px !important; }
	#wfacp_mini_cart_start_h .wmc-current-currency {
		border: 0 !important; background: #f8f5f7 !important; border-radius: 8px !important;
		padding: 5px 9px !important; font-size: 12px !important; font-weight: 600 !important;
		color: #6b7280 !important; box-shadow: none !important;
	}

	/* ---- row shell ------------------------------------------------------ */
	#wfacp_mini_cart_start_h tr.cart_item {
		position: relative !important;
		align-items: stretch !important;
		padding: 0 !important;
	}
	#wfacp_mini_cart_start_h tr.cart_item + tr.cart_item { border-top: 1px solid #f6f1f4 !important; }
	#wfacp_mini_cart_start_h tr.cart_item td.product-name-area,
	#wfacp_mini_cart_start_h tr.cart_item td.product-total {
		border: 0 !important;
		padding: 14px 0 12px 0 !important;
		vertical-align: top !important;
		background: transparent !important;
	}

	/* ---- thumb + title: a real grid, 52px gutter then everything else ---- */
	#wfacp_mini_cart_start_h td.product-name-area {
		grid-template-columns: 48px minmax(0, 1fr) !important;
		column-gap: 10px !important;
		align-items: start !important;
	}
	#wfacp_mini_cart_start_h td.product-name-area .product-image {
		width: 48px !important; max-width: 48px !important; min-width: 48px !important;
		margin: 0 !important; padding: 0 !important;
	}
	#wfacp_mini_cart_start_h .wfacp-pro-thumb { border: 0 !important; padding: 0 !important; background: none !important; }
	#wfacp_mini_cart_start_h .wfacp-pro-thumb img,
	#wfacp_mini_cart_start_h .product-image img {
		width: 48px !important; height: 48px !important;
		border: 0 !important; outline: 0 !important; box-shadow: none !important;
		border-radius: 10px !important;
		background: #fbf9fa !important;
		object-fit: contain !important;
		display: block !important;
	}
	/* The pink count ball. The quantity is already spelled out in the stepper
	 * directly underneath, so the ball is pure duplication and it collides with
	 * the thumbnail's top-right corner. */
	#wfacp_mini_cart_start_h .wfacp-pro-count,
	#wfacp_mini_cart_start_h .wfacp-qty-ball,
	#wfacp_mini_cart_start_h .wfacp-qty-count { display: none !important; }

	#wfacp_mini_cart_start_h td.product-name-area .product-name { padding: 0 !important; margin: 0 !important; }
	#wfacp_mini_cart_start_h .wfacp_cart_title_sec,
	#wfacp_mini_cart_start_h .wfacp_order_summary_item_name {
		font-size: 13.5px !important;
		line-height: 1.35 !important;
		font-weight: 600 !important;
		color: #1f2937 !important;
		letter-spacing: -.005em !important;
		margin: 0 0 8px 0 !important;
	}

	/* ---- stepper: compact, under the title, left aligned ---------------- */
	#wfacp_mini_cart_start_h .product-quantity.bb-qty-wrap { margin: 0 !important; padding: 0 !important; }
	#wfacp_mini_cart_start_h .bb-qty {
		width: 84px !important;
		height: 28px !important;
		margin: 0 !important;
	}
	#wfacp_mini_cart_start_h .bb-qty .value-button { position: static !important; }

	/* ---- price ---------------------------------------------------------- */
	#wfacp_mini_cart_start_h td.product-total {
		text-align: right !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		color: #1f2937 !important;
		font-variant-numeric: tabular-nums !important;
		white-space: nowrap !important;
		padding-left: 10px !important;
		min-width: 76px !important;
		flex: 0 0 auto !important;
	}

	/* ---- trash: bottom-right of the row --------------------------------- */
	/* Neutralising this offset parent is what frees the button from the price. */
	#wfacp_mini_cart_start_h .wfacp_cart_product_name_h,
	#wfacp_mini_cart_start_h td.product-total { position: static !important; }
	#wfacp_mini_cart_start_h .wfacp_delete_item_wrap {
		position: absolute !important;
		right: 0 !important;
		bottom: 12px !important;
		top: auto !important;
		left: auto !important;
		width: 26px !important; height: 26px !important;
	}
	#wfacp_mini_cart_start_h .wfacp_mini_cart_remove_item_from_cart {
		display: block !important;
		width: 26px !important; height: 26px !important;
		border-radius: 7px !important;
		font-size: 0 !important;           /* hides the "x" glyph, keeps the hit area */
		color: transparent !important;
		background: #faf7f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
		border: 1px solid #f1ebee !important;
		opacity: 1 !important;
		transition: background-color .15s, border-color .15s !important;
	}
	#wfacp_mini_cart_start_h .wfacp_mini_cart_remove_item_from_cart:hover {
		background-color: #fdeef5 !important;
		border-color: #f3cfe0 !important;
	}
	/* The link carries content:"x" on ::before. display:none alone was not taking,
	 * so the glyph is removed at the source with content:none as well. The inner
	 * <svg> is hidden too; the trash is drawn as the link's background image. */
	#wfacp_mini_cart_start_h a.wfacp_mini_cart_remove_item_from_cart::before,
	#wfacp_mini_cart_start_h a.wfacp_mini_cart_remove_item_from_cart::after {
		content: none !important;
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}
	#wfacp_mini_cart_start_h a.wfacp_mini_cart_remove_item_from_cart > svg { display: none !important; }

	/* ---- subscription rows ---------------------------------------------- */
	/* BB already prints its own "SUBSCRIPTION" pill and savings line inside the
	 * title cell, so this adds ground and an edge only, never a second label. */
	#wfacp_mini_cart_start_h tr.cart_item.bb-is-subscription td.product-name-area,
	#wfacp_mini_cart_start_h tr.cart_item.bb-is-subscription td.product-total {
		background: transparent !important;
	}
	#wfacp_mini_cart_start_h tr.cart_item.bb-is-subscription td.product-name-area {
		box-shadow: none !important;
	}

	/* ---- coupon line ----------------------------------------------------- */
	#wfacp_mini_cart_start_h .wfacp_coupon_field_wrap,
	#wfacp_mini_cart_start_h .wfacp-coupon-toggle-text {
		font-size: 12.5px !important;
	}

	/* ---- totals ---------------------------------------------------------- */
	#wfacp_mini_cart_start_h .cart-subtotal th,
	#wfacp_mini_cart_start_h tr.shipping_total_fee th,
	#wfacp_mini_cart_start_h .cart-discount th {
		font-size: 13px !important; font-weight: 500 !important; color: #6b7280 !important;
		border: 0 !important; padding: 7px 0 !important; text-align: left !important;
	}
	#wfacp_mini_cart_start_h .cart-subtotal td,
	#wfacp_mini_cart_start_h tr.shipping_total_fee td,
	#wfacp_mini_cart_start_h .cart-discount td {
		font-size: 13px !important; font-weight: 600 !important; color: #1f2937 !important;
		border: 0 !important; padding: 7px 0 !important; text-align: right !important;
		font-variant-numeric: tabular-nums !important;
	}
	#wfacp_mini_cart_start_h .order-total th,
	#wfacp_mini_cart_start_h .order-total td {
		border: 0 !important;
		border-top: 1px solid #f0eaee !important;
		padding: 13px 0 2px 0 !important;
	}
	#wfacp_mini_cart_start_h .order-total th {
		font-size: 15px !important; font-weight: 700 !important; color: #1f2937 !important; text-align: left !important;
	}
	#wfacp_mini_cart_start_h .order-total td {
		font-size: 19px !important; font-weight: 700 !important; color: #c83784 !important;
		text-align: right !important; font-variant-numeric: tabular-nums !important;
	}
}

/* ============================================================================
 * MOBILE ORDER SUMMARY: two defects found on the 2026-09-29 capture pass.
 * ========================================================================== */
@media (max-width: 767px) {

	/* 1. The subscription tint was painted on td.product-name-area only. The price
	 *    cell next to it computed to rgba(0,0,0,0), so the row's right third stayed
	 *    white and the tint looked like a rendering fault rather than a state. */
	.wfacp_collapsible_order_summary_wrap tr.cart_item.bb-is-subscription,
	.wfacp_collapsible_order_summary_wrap tr.cart_item.bb-is-subscription td.product-total {
		background: transparent !important;
	}

	/* 2. The renewal note (td.bb-checkout-renews) laid out on a single line wider
	 *    than its own 348px box, so it ran off the right edge mid-word. */
	/*    An earlier `white-space: normal !important` for this cell already exists in
	 *    this file at (0,2,2) specificity and still lost: the measured computed value
	 *    was nowrap with scrollWidth 418 inside a 348px cell. Anchoring on the form's
	 *    ID puts this rule an order of magnitude above whatever is setting it. */
	body.woocommerce-checkout #wfacp-e-form tfoot tr.bb-checkout-renews-row td.bb-checkout-renews,
	body.woocommerce-checkout #wfacp-e-form tr.bb-checkout-renews-row td,
	.wfacp_collapsible_order_summary_wrap td.bb-checkout-renews {
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: normal !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-right: 2px !important;
		line-height: 1.45 !important;
	}
}

@media (max-width: 767px) {
	/* The SUBSCRIPTION pill is inline with the title, so it landed beside the last
	 * word and broke the line as "Supply  (SUBSCRIPTION)". Give it its own row. */
	.wfacp_collapsible_order_summary_wrap tr.cart_item.bb-is-subscription .bb-checkout-sub-badge,
	.wfacp_collapsible_order_summary_wrap .bb-checkout-sub-badge {
		display: inline-flex !important;
		float: none !important;
		clear: both !important;
		margin: 7px 0 0 0 !important;
	}
	.wfacp_collapsible_order_summary_wrap .wfacp_cart_title_sec { display: block !important; }
}

/* ============================================================================
 * Desktop: widen the order-summary column  (2026-09-29)
 *
 * The summary column is .bwf-inner-col at `flex: 0 1 38%`, which renders 358px
 * of the 1230px row. With the nested card removed that leaves 311px of content,
 * still narrow enough that two-word product names wrap.
 *
 * The element also carries a generated class (.bwf-inner-col-e3909cbb) tied to
 * this funnel step, so :has() is used to find the column by what it contains.
 * The hashed class is kept as a second selector for engines without :has(), and
 * both are harmless if the funnel is rebuilt with a different hash.
 * ========================================================================== */
@media (min-width: 1000px) {
	body.woocommerce-checkout .bwf-inner-col:has(> .wfacp-mini-cart-block),
	body.woocommerce-checkout .bwf-inner-col-e3909cbb {
		flex-basis: 46% !important;
		max-width: 46% !important;
	}
}

/* ================================================================
 * Spacing tweaks, 2026-10-06 (owner review)
 * ================================================================
 *
 * 1. The "Create an account" box sat flush on the First name field: the box
 *    has margin 0 and the field below has no top margin, so the gap was 0px
 *    where every other field pair has 16px. Give the box the same 16px.
 *
 * 2. Stripe's "Credit Card" row prints its seven card logos in a span after
 *    the label text. The radio and label are inline, so the logos wrap onto a
 *    second line that starts at the row's left edge, directly under the
 *    selected radio, which touched them. Only the logo row is moved: it is
 *    indented 33px (radio 20px + its 10px margin + the text gap) so it lines
 *    up under "Credit Card", and the logos are 2px narrower with a 4px gap so
 *    all seven still fit on one line at 390px. Every other payment row is
 *    untouched. The #wfacp-e-form id outranks FunnelKit's own span rules.
 */
body.woocommerce-checkout .woocommerce-account-fields {
	margin-bottom: 16px !important;
}
body.woocommerce-checkout #wfacp-e-form #payment li.payment_method_fkwcs_stripe > label .fkwcs_stripe_icons {
	display: block !important;
	margin: 4px 0 0 33px !important;
	white-space: nowrap !important;
}
body.woocommerce-checkout #wfacp-e-form #payment li.payment_method_fkwcs_stripe > label .fkwcs_stripe_icons img {
	width: 30px !important;
	height: auto !important;
	margin: 0 4px 0 0 !important;
	vertical-align: middle !important;
}