/* ================================================================== The Longevity Edge — Checkout page styles (loaded only on /checkout/). Depends on tokens.css + components.css. ================================================================== */ /* === Page shell — kill Kadence header/sidebar so our layout owns the page === */ body.woocommerce-checkout .entry-header, body.woocommerce-checkout .page-title, body.woocommerce-checkout .entry-title { display: none !important; } body.woocommerce-checkout .content-area { margin-top: 0 !important; padding: 0 !important; } body.woocommerce-checkout .entry-content-wrap { padding: 0 !important; } body.woocommerce-checkout main#main { padding: 0 !important; } body.woocommerce-checkout .primary-sidebar { display: none !important; } .checkout-page { background: var(--canvas); padding: var(--s-6) 0 var(--s-9); width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .checkout-shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); } /* === Page header === */ .checkout-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; } .checkout-page-header-text { min-width: 0; } .checkout-page-header h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--navy-900); margin: 0 0 var(--s-2); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } .checkout-page-sub { font-size: var(--fs-sm); color: var(--success); margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .checkout-page-sub svg { color: var(--success); flex-shrink: 0; } .checkout-back-to-cart { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900); background: var(--surface); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); text-decoration: none; transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); white-space: nowrap; } .checkout-back-to-cart:hover, .checkout-back-to-cart:focus-visible { border-color: var(--gold-600); color: var(--gold-600); box-shadow: 0 4px 12px rgba(14, 26, 43, 0.06); transform: translateX(-2px); outline: none; } .checkout-back-to-cart svg { color: currentColor; flex-shrink: 0; } .checkout-notices { margin-bottom: var(--s-5); } .checkout-notices .woocommerce-NoticeGroup, .checkout-notices .woocommerce-error, .checkout-notices .woocommerce-message, .checkout-notices .woocommerce-info { background: var(--surface); border: 1px solid var(--navy-100); border-left: 4px solid var(--cta-600); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-family: var(--font-body); color: var(--navy-900); list-style: none; margin: 0 0 var(--s-3); } .checkout-notices .woocommerce-message { border-left-color: var(--success); } .checkout-notices .woocommerce-info { border-left-color: var(--navy-700); } /* === Two-column layout === */ .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s-6); align-items: start; } @media (max-width: 960px) { .checkout-layout { grid-template-columns: 1fr; } } /* === Upsell banner (one-time → subscribe) === */ .checkout-upsell { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); background: linear-gradient(105deg, var(--gold-50) 0%, var(--surface) 100%); border: 1px solid var(--gold-100); border-left: 4px solid var(--gold-600); border-radius: var(--r-lg); margin-bottom: var(--s-5); } .checkout-upsell-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .checkout-upsell-eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--gold-600); margin: 0 0 4px; } .checkout-upsell-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--navy-900); margin: 0 0 4px; letter-spacing: var(--ls-tight); } .checkout-upsell-sub { font-size: var(--fs-sm); color: var(--ink-700); margin: 0; } .checkout-upsell-cta { white-space: nowrap; padding: 8px 16px; font-size: var(--fs-sm); } @media (max-width: 640px) { .checkout-upsell { grid-template-columns: 1fr; text-align: center; } .checkout-upsell-icon { margin: 0 auto; } } /* === Form sections (numbered steps) === */ .checkout-section { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5); } .checkout-section-header { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--navy-100); } .checkout-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-900); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .checkout-section-header h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin: 0; letter-spacing: var(--ls-tight); } .checkout-section-sub { font-size: var(--fs-sm); color: var(--ink-700); margin: 4px 0 0; display: inline-flex; align-items: center; gap: 6px; } .checkout-section-sub a { color: var(--gold-600); text-decoration: underline; font-weight: 600; } .checkout-section-sub a:hover { color: var(--cta-600); } .checkout-section-sub svg { color: var(--success); flex-shrink: 0; } /* === WC form fields restyled === */ .checkout .form-row { display: flex; flex-direction: column; margin: 0 0 var(--s-3); padding: 0; } .checkout .form-row label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-700); margin-bottom: 6px; letter-spacing: var(--ls-wide); text-transform: uppercase; } .checkout .form-row label .required { color: var(--cta-600); text-decoration: none; margin-left: 2px; } .checkout .form-row label .optional { color: var(--ink-500); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); } .checkout .form-row input.input-text, .checkout .form-row textarea, .checkout .form-row select, .checkout .form-row .select2-selection--single { width: 100%; height: 44px; padding: 0 var(--s-3); font-family: var(--font-body); font-size: var(--fs-base); color: var(--navy-900); background: var(--canvas); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); box-sizing: border-box; } .checkout .form-row textarea { height: 96px; padding: var(--s-3); resize: vertical; } .checkout .form-row input.input-text:focus, .checkout .form-row textarea:focus, .checkout .form-row select:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(196, 156, 88, 0.15); } .checkout .form-row .select2-selection--single { display: flex; align-items: center; } .checkout .form-row .select2-selection__rendered { line-height: 1.5; padding: 0 !important; color: var(--navy-900) !important; } .checkout .form-row .select2-selection__arrow { height: 44px !important; right: 8px !important; } .checkout .form-row.woocommerce-invalid input.input-text, .checkout .form-row.woocommerce-invalid textarea, .checkout .form-row.woocommerce-invalid select { border-color: var(--cta-600); } .checkout .form-row.woocommerce-validated input.input-text { border-color: var(--success); } /* Two-column form rows */ .checkout .form-row-first { grid-column: 1; } .checkout .form-row-last { grid-column: 2; } .checkout #customer_details, .checkout .woocommerce-billing-fields__field-wrapper, .checkout .woocommerce-shipping-fields__field-wrapper, .checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); } .checkout .form-row-wide { grid-column: 1 / -1; } @media (max-width: 640px) { .checkout #customer_details, .checkout .woocommerce-billing-fields__field-wrapper, .checkout .woocommerce-shipping-fields__field-wrapper, .checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } } /* Ship-to-different-address checkbox */ .checkout #ship-to-different-address { margin: 0 0 var(--s-3); } .checkout #ship-to-different-address label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); text-transform: none; letter-spacing: 0; color: var(--navy-900); font-weight: 600; cursor: pointer; } .checkout #ship-to-different-address input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold-600); } .checkout .woocommerce-additional-fields h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--navy-900); margin: var(--s-4) 0 var(--s-3); } /* WC default extras we don't need */ .checkout .woocommerce-account-fields .create-account label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-700); } .checkout .woocommerce-account-fields .create-account input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold-600); } /* === Order summary (right column, sticky) === */ .checkout-summary-col { position: sticky; top: 96px; } @media (max-width: 960px) { .checkout-summary-col { position: static; } } .checkout-summary { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); } .checkout-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); } .checkout-summary-header h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin: 0; letter-spacing: var(--ls-tight); } .checkout-summary-toggle { display: none; align-items: center; gap: 4px; background: transparent; border: 0; color: var(--gold-600); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; padding: 4px 8px; cursor: pointer; } .checkout-summary-toggle .checkout-summary-toggle-hide { display: none; } .checkout-summary-toggle[aria-expanded="true"] .checkout-summary-toggle-show { display: none; } .checkout-summary-toggle[aria-expanded="true"] .checkout-summary-toggle-hide { display: inline; } .checkout-summary-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .checkout-summary-toggle svg { transition: transform 180ms var(--ease-out); } @media (max-width: 960px) { .checkout-summary-toggle { display: inline-flex; } .checkout-summary-body { display: none; } .checkout-summary-body.is-open { display: block; } } /* === WC review order table → flex rows === */ .checkout-summary .shop_table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-3); border: 0; } .checkout-summary .shop_table thead { display: none; } .checkout-summary .shop_table .cart_item td, .checkout-summary .shop_table tfoot td, .checkout-summary .shop_table tfoot th { padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--navy-100); font-family: var(--font-body); } .checkout-summary .shop_table .cart_item .product-name { color: var(--navy-900); font-weight: 600; font-size: var(--fs-base); padding-right: var(--s-3); } .checkout-summary .shop_table .cart_item .product-name .product-quantity { color: var(--ink-500); font-weight: 500; margin-left: 4px; } .checkout-summary .shop_table .cart_item .product-total { color: var(--navy-900); font-weight: 700; text-align: right; font-feature-settings: "tnum","lnum"; } .checkout-summary .shop_table tfoot .cart-subtotal th, .checkout-summary .shop_table tfoot .shipping th, .checkout-summary .shop_table tfoot .fee th, .checkout-summary .shop_table tfoot .tax-rate th { color: var(--ink-700); font-weight: 500; } .checkout-summary .shop_table tfoot .cart-subtotal td, .checkout-summary .shop_table tfoot .shipping td, .checkout-summary .shop_table tfoot .fee td, .checkout-summary .shop_table tfoot .tax-rate td { color: var(--navy-900); font-weight: 600; text-align: right; font-feature-settings: "tnum","lnum"; } .checkout-summary .shop_table tfoot .order-total th { color: var(--navy-900); font-weight: 700; font-size: var(--fs-lg); border-bottom: 0; padding-top: var(--s-4); } .checkout-summary .shop_table tfoot .order-total td { color: var(--navy-900); font-weight: 700; font-size: var(--fs-lg); text-align: right; border-bottom: 0; padding-top: var(--s-4); font-feature-settings: "tnum","lnum"; } .checkout-summary .shop_table tfoot .order-total td .woocommerce-Price-amount { color: var(--gold-600); } /* WC subscriptions recurring totals */ .checkout-summary .shop_table tfoot .recurring-totals { padding-top: var(--s-3); } .checkout-summary .shop_table tfoot .recurring-totals h2.wc-subscriptions-recurring-totals-heading { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); color: var(--navy-900); margin: var(--s-3) 0 var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--navy-100); } .checkout-summary .shop_table .recurring-total th, .checkout-summary .shop_table .recurring-total td { font-size: var(--fs-sm); color: var(--ink-700); } /* Shipping method radios */ .checkout-summary #shipping_method { list-style: none; margin: 0; padding: 0; } .checkout-summary #shipping_method li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: var(--fs-sm); } .checkout-summary #shipping_method input[type="radio"] { accent-color: var(--gold-600); } .checkout-summary .woocommerce-shipping-destination { font-size: var(--fs-xs); color: var(--ink-500); margin: 6px 0 0; } /* === Payment methods === */ .checkout-summary #payment { background: transparent; border-radius: 0; padding: 0; margin-top: var(--s-4); } .checkout-summary #payment ul.payment_methods { list-style: none; margin: 0; padding: 0; border-bottom: 0; } .checkout-summary #payment ul.payment_methods li { padding: var(--s-3); margin: 0 0 var(--s-2); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); background: var(--canvas); transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); } .checkout-summary #payment ul.payment_methods li:has(input[type="radio"]:checked) { border-color: var(--gold-600); background: var(--gold-50); } .checkout-summary #payment ul.payment_methods li label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; color: var(--navy-900); cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; } .checkout-summary #payment ul.payment_methods li input[type="radio"] { accent-color: var(--gold-600); width: 18px; height: 18px; } .checkout-summary #payment ul.payment_methods li img { max-height: 22px; vertical-align: middle; margin-left: 4px; } .checkout-summary #payment ul.payment_methods li .payment_box { margin-top: var(--s-3); padding: var(--s-3); background: var(--surface); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-700); } .checkout-summary #payment ul.payment_methods li .payment_box p { margin: 0 0 var(--s-2); } .checkout-summary #payment ul.payment_methods li .payment_box p:last-child { margin-bottom: 0; } .checkout-summary #payment ul.payment_methods li .payment_box input[type="text"], .checkout-summary #payment ul.payment_methods li .payment_box input[type="email"], .checkout-summary #payment ul.payment_methods li .payment_box select { width: 100%; height: 40px; padding: 0 var(--s-3); font-family: var(--font-body); font-size: var(--fs-base); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); background: var(--canvas); box-sizing: border-box; } /* Terms & conditions */ .checkout-summary .woocommerce-terms-and-conditions-wrapper { margin: var(--s-4) 0; } .checkout-summary .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; } .checkout-summary .woocommerce-form__input-checkbox { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold-600); flex-shrink: 0; } /* === Place Order button === */ .checkout-summary #place_order, .checkout-summary .place-order .button { display: block; width: 100%; text-align: center; margin-top: var(--s-4); height: 56px; line-height: 56px; padding: 0 var(--s-4); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; letter-spacing: -0.005em; background: var(--cta-600); color: #fff; border: 0; border-radius: var(--r-md); cursor: pointer; box-shadow: 0 4px 12px rgba(168, 38, 50, 0.22); transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); text-transform: none; } .checkout-summary #place_order:hover, .checkout-summary .place-order .button:hover { background: var(--cta-700); box-shadow: 0 8px 20px rgba(168, 38, 50, 0.32); transform: translateY(-1px); } .checkout-summary #place_order:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* === Trust signals & help === */ .checkout-summary-trust { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--navy-100); } .checkout-summary-trust-item { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-normal); } .checkout-summary-trust-item svg { color: var(--success); margin-top: 2px; } .checkout-summary-trust-item strong { color: var(--navy-900); font-weight: 700; } .checkout-summary-help { font-size: var(--fs-sm); color: var(--ink-700); margin: var(--s-4) 0 0; text-align: center; } .checkout-summary-help a { color: var(--gold-600); font-weight: 600; text-decoration: underline; } .checkout-summary-help a:hover { color: var(--cta-600); } /* === WC blocked overlay during AJAX === */ .checkout .blockUI.blockOverlay { background: var(--canvas) !important; opacity: 0.6 !important; } .processing #order_review_wrap { opacity: 0.7; pointer-events: none; } /* === Mobile collapsible summary on top === */ @media (max-width: 960px) { .checkout-summary { padding: var(--s-4) var(--s-5); } .checkout-summary-col { margin-bottom: var(--s-4); } .checkout-summary-trust { padding-top: var(--s-4); margin-top: var(--s-4); } } /* ================================================================== fix9z2 — checkout staging issues ================================================================== */ /* Trust strip styles weren't being loaded on /checkout/ (they live in cart.css which is only enqueued on /cart/). Inline them here so the trust strip renders correctly on checkout too. */ body.woocommerce-checkout .cart-trust-strip { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: var(--navy-900); color: #fff; padding: var(--s-3) var(--s-4); margin-bottom: 0; } body.woocommerce-checkout .cart-trust-strip ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-5) var(--s-6); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; } body.woocommerce-checkout .cart-trust-strip li { display: inline-flex; align-items: center; gap: var(--s-2); color: rgba(255,255,255,0.92); } body.woocommerce-checkout .cart-trust-icon { color: var(--gold-300); font-size: 14px; line-height: 1; } @media (max-width: 700px) { body.woocommerce-checkout .cart-trust-strip ul { gap: var(--s-3) var(--s-4); font-size: 10px; } } /* Force the right-column summary children into a clean vertical stack. Kadence/WC's default checkout-review-order rules were collapsing the body and floating trust signals into a sub-column. */ body.woocommerce-checkout .checkout-summary { display: block !important; } body.woocommerce-checkout .checkout-summary > .checkout-summary-header, body.woocommerce-checkout .checkout-summary > .checkout-summary-body, body.woocommerce-checkout .checkout-summary > .checkout-summary-trust, body.woocommerce-checkout .checkout-summary > .checkout-summary-help { display: block !important; width: 100% !important; float: none !important; clear: both !important; position: static !important; } body.woocommerce-checkout .checkout-summary > .checkout-summary-trust { display: flex !important; flex-direction: column !important; } body.woocommerce-checkout .checkout-summary #order_review, body.woocommerce-checkout .checkout-summary .woocommerce-checkout-review-order { display: block !important; width: 100% !important; float: none !important; position: static !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-checkout .checkout-summary .woocommerce-checkout-review-order-table, body.woocommerce-checkout .checkout-summary .shop_table { width: 100% !important; display: table !important; table-layout: auto !important; } /* Tighten the order-review line items so the product name + cadence don't wrap awkwardly. Give the product-name column 70% and right-align the price. */ body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name { width: 70%; line-height: var(--lh-normal); } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-total { width: 30%; white-space: nowrap; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-quantity { display: inline-block; margin-left: 4px; color: var(--ink-500); font-weight: 500; } /* Hide WC's "Have a coupon?" toggle and form. Coupon entry stays on /cart/. */ body.woocommerce-checkout .woocommerce-form-coupon-toggle, body.woocommerce-checkout form.checkout_coupon, body.woocommerce-checkout .woocommerce-form-login-toggle, body.woocommerce-checkout form.woocommerce-form-login { display: none !important; } /* Hide WC's default "Billing details" / "Shipping details" / "Additional information" H3 headings — our numbered section headers already label these. */ body.woocommerce-checkout .woocommerce-billing-fields > h3, body.woocommerce-checkout .woocommerce-shipping-fields > h3:not(#ship-to-different-address), body.woocommerce-checkout .woocommerce-additional-fields > h3 { display: none !important; } /* Hide the standalone "#order_review_heading" if WC injects one separately. */ body.woocommerce-checkout #order_review_heading { display: none !important; } /* Hide any stray notice wrappers rendered by woocommerce_before_checkout_form above our custom page section (WC default puts notices + the coupon/login toggles into the content area before our
opens). */ body.woocommerce-checkout > .site .content-area > .entry-content-wrap > .woocommerce-notices-wrapper:empty { display: none !important; } /* ================================================================== fix9z3 — radio buttons, shipping width, Place Order centering, privacy text relocation ================================================================== */ /* Place Order button: line-height 56 already centers vertically, so the extra 9.6px vertical padding from inherited WC styles was pushing text off-center. Zero the vertical padding. */ body.woocommerce-checkout .checkout-summary #place_order, body.woocommerce-checkout .checkout-summary .place-order .button, body.woocommerce-checkout button#place_order { padding: 0 var(--s-4) !important; line-height: 56px !important; height: 56px !important; box-sizing: border-box !important; } /* Shipping methods inside #order_review: the parent ul was inheriting a flex layout from somewhere, squeezing each
  • to ~63px. Force a clean vertical list with radios inline beside text. */ body.woocommerce-checkout .checkout-summary #shipping_method, body.woocommerce-checkout .checkout-summary ul#shipping_method { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } body.woocommerce-checkout .checkout-summary #shipping_method li { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 4px 0 !important; font-size: var(--fs-sm) !important; flex-wrap: nowrap !important; } body.woocommerce-checkout .checkout-summary #shipping_method li input[type="radio"] { display: inline-block !important; width: 16px !important; height: 16px !important; margin: 0 !important; flex-shrink: 0 !important; accent-color: var(--gold-600); } body.woocommerce-checkout .checkout-summary #shipping_method li label { display: inline !important; margin: 0 !important; font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--navy-900) !important; text-transform: none !important; letter-spacing: 0 !important; flex: 1 1 auto !important; line-height: 1.4 !important; } /* Same protection for payment-method radios so they sit inline with the label */ body.woocommerce-checkout .checkout-summary #payment ul.payment_methods { display: block !important; } body.woocommerce-checkout .checkout-summary #payment ul.payment_methods li { display: block !important; list-style: none !important; } body.woocommerce-checkout .checkout-summary #payment ul.payment_methods li label { display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.woocommerce-checkout .checkout-summary #payment ul.payment_methods li input[type="radio"] { display: inline-block !important; width: 18px !important; height: 18px !important; margin: 0 !important; vertical-align: middle !important; flex-shrink: 0 !important; } /* Give the Shipment row's a sensible min-width so it doesn't crush the shipping options into a sliver of the row. */ body.woocommerce-checkout .checkout-summary .shop_table .shipping th, body.woocommerce-checkout .checkout-summary .shop_table .woocommerce-shipping-totals th { width: 90px; min-width: 90px; vertical-align: top; padding-top: 6px; } body.woocommerce-checkout .checkout-summary .shop_table .shipping td, body.woocommerce-checkout .checkout-summary .shop_table .woocommerce-shipping-totals td { width: auto; padding-left: var(--s-3); } /* Hide WC's default privacy-policy-text — we're rendering it ourselves below the trust signals via the .checkout-summary-privacy paragraph. */ body.woocommerce-checkout .woocommerce-privacy-policy-text { display: none !important; } /* The new relocated privacy paragraph */ body.woocommerce-checkout .checkout-summary-privacy { font-size: var(--fs-xs); color: var(--ink-500); line-height: var(--lh-normal); margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--navy-100); } body.woocommerce-checkout .checkout-summary-privacy a { color: var(--navy-700); text-decoration: underline; font-weight: 600; } body.woocommerce-checkout .checkout-summary-privacy a:hover { color: var(--gold-600); } /* ================================================================== fix9z4 — order review table layout + payment button restyle ================================================================== */ /* Force a stable two-column table layout so the cart_item row doesn't collapse to the natural width of its content (~90px) while the tfoot rows render at the full ~355px. table-layout:fixed + width:100% + explicit column widths on the first row guarantee even sizing. */ body.woocommerce-checkout .checkout-summary .shop_table, body.woocommerce-checkout .checkout-summary .woocommerce-checkout-review-order-table { table-layout: fixed !important; width: 100% !important; border-collapse: collapse !important; } /* Column widths come from the first rendered row. The thead is hidden, so apply widths to every row's first/last child to be safe. */ body.woocommerce-checkout .checkout-summary .shop_table tr > th:first-child, body.woocommerce-checkout .checkout-summary .shop_table tr > td:first-child { width: 62% !important; min-width: 0 !important; max-width: none !important; padding-left: 0 !important; } body.woocommerce-checkout .checkout-summary .shop_table tr > th:last-child, body.woocommerce-checkout .checkout-summary .shop_table tr > td:last-child { width: 38% !important; min-width: 0 !important; max-width: none !important; text-align: right !important; padding-right: 0 !important; } /* The earlier .shipping th { width: 90px } rule no longer applies once table-layout:fixed wins, but null it out explicitly so it can't return. */ body.woocommerce-checkout .checkout-summary .shop_table .shipping th, body.woocommerce-checkout .checkout-summary .shop_table .woocommerce-shipping-totals th { width: 62% !important; min-width: 0 !important; max-width: none !important; } body.woocommerce-checkout .checkout-summary .shop_table .shipping td, body.woocommerce-checkout .checkout-summary .shop_table .woocommerce-shipping-totals td { width: 38% !important; } /* The shipping options TD contains the ul#shipping_method. Make it fill the column and left-align (overriding the right-align cascade above). */ body.woocommerce-checkout .checkout-summary .shop_table .shipping td, body.woocommerce-checkout .checkout-summary .shop_table .woocommerce-shipping-totals td { text-align: left !important; } /* Product name + total inside the cart_item row — pull back to reasonable sizing. Product name can wrap (multi-line OK if needed). Subscribe&Save sub-label appears inline; keep it tight via font-size on the bracket text. */ body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name { color: var(--navy-900); font-weight: 600; font-size: var(--fs-base); padding-right: var(--s-3) !important; line-height: 1.35; vertical-align: top; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-total { color: var(--navy-900); font-weight: 700; font-feature-settings: "tnum","lnum"; vertical-align: top; white-space: nowrap; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-quantity { display: inline-block; margin-left: 6px; color: var(--ink-500); font-weight: 500; font-size: var(--fs-sm); } /* Authorize.net CIM injects a prominent blue "Manage Payment Methods" button next to the saved-card form. De-emphasize so it doesn't compete with the Place Order CTA — make it a small ghost link instead. */ body.woocommerce-checkout .sv-wc-payment-gateway-payment-form-manage-payment-methods, body.woocommerce-checkout a.button.sv-wc-payment-gateway-payment-form-manage-payment-methods { display: inline-block !important; background: transparent !important; color: var(--gold-600) !important; padding: 6px 10px !important; height: auto !important; line-height: 1.4 !important; font-family: var(--font-body) !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; border-radius: var(--r-sm) !important; text-decoration: underline !important; box-shadow: none !important; margin: var(--s-2) 0 0 !important; } body.woocommerce-checkout .sv-wc-payment-gateway-payment-form-manage-payment-methods:hover, body.woocommerce-checkout a.button.sv-wc-payment-gateway-payment-form-manage-payment-methods:hover { color: var(--cta-600) !important; background: transparent !important; transform: none !important; } /* Tighten saved-card radio rows so they line up with method selection */ body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-payment-form-saved-payment-method { display: flex !important; align-items: center !important; gap: 8px !important; padding: 6px 0; font-size: var(--fs-sm); } body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-payment-form-saved-payment-method input[type="radio"] { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--gold-600); flex-shrink: 0; } body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-payment-form-saved-payment-method label { font-weight: 500 !important; color: var(--navy-900) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } /* The credit card brand logos block under "Pay securely using your credit card" */ body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-credit-card-form-supported-card-types { display: flex !important; align-items: center !important; gap: 6px !important; margin: var(--s-2) 0 var(--s-3) !important; flex-wrap: wrap !important; } body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-credit-card-form-supported-card-types img { max-height: 22px !important; width: auto !important; } /* ================================================================== fix9z5 — defense overrides for tbody:flex bleed + saved-card radios ================================================================== */ /* Override the WCSO plugin's cart.css tbody:flex rule which was bleeding into the checkout review table. (Plugin v1.2.15 fixes this at the source, but theme-side override protects against older plugin versions.) */ body.woocommerce-checkout .checkout-summary .shop_table { display: table !important; } body.woocommerce-checkout .checkout-summary .shop_table thead { display: none !important; } body.woocommerce-checkout .checkout-summary .shop_table tbody { display: table-row-group !important; flex-direction: initial !important; } body.woocommerce-checkout .checkout-summary .shop_table tfoot { display: table-footer-group !important; } body.woocommerce-checkout .checkout-summary .shop_table tr { display: table-row !important; width: auto !important; } body.woocommerce-checkout .checkout-summary .shop_table th, body.woocommerce-checkout .checkout-summary .shop_table td { display: table-cell !important; } /* Default first-child cells should LEFT-align (override the inherited text-align: right that I applied for the price column). */ body.woocommerce-checkout .checkout-summary .shop_table tr > th:first-child, body.woocommerce-checkout .checkout-summary .shop_table tr > td:first-child { text-align: left !important; } /* Inline the product cadence + qty so "Subscribe & Save - Every 1 Month × 1" doesn't split across three lines. */ body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name small, body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name span:not(.product-quantity) { display: inline; line-height: 1.4; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name .product-quantity, body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-quantity { display: inline; margin-left: 6px; color: var(--ink-500); font-weight: 500; font-size: var(--fs-sm); } /* Saved-card radio rows — Authorize.net CIM crams the Manage Payment Methods button + saved-card radios + labels into a single

    that gets display:flex flex-direction:column from somewhere, stacking radios above labels. Reset to block flow with inline radios. */ body.woocommerce-checkout .checkout-summary .payment_box p.form-row, body.woocommerce-checkout .checkout-summary .payment_box p.form-row.form-row-wide { display: block !important; flex-direction: row !important; } body.woocommerce-checkout .checkout-summary .payment_box input[type="radio"] { display: inline-block !important; width: 18px !important; height: 18px !important; vertical-align: middle !important; margin: 0 6px 0 0 !important; float: none !important; accent-color: var(--gold-600); } body.woocommerce-checkout .checkout-summary .payment_box label.sv-wc-payment-gateway-payment-form-saved-payment-method, body.woocommerce-checkout .checkout-summary .payment_box label[for*="payment-token"], body.woocommerce-checkout .checkout-summary .payment_box label[for*="use-new-payment-method"] { display: inline-block !important; vertical-align: middle !important; font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--navy-900) !important; margin: 0 0 var(--s-2) 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; } /* Push each saved-card line break to behave as a proper line break so radios pair cleanly with their labels. */ body.woocommerce-checkout .checkout-summary .payment_box br { display: block; content: ""; margin-top: 4px; } /* ================================================================== fix9z6 — right-column spacing polish ================================================================== */ /* Re-tune column widths: 45/55 gives the shipping options TD room for the "Free Express Shipping" label without forcing it to wrap, while the product-name TD still fits "Ultra Potent Fish Oil" on one line. */ body.woocommerce-checkout .checkout-summary .shop_table tr > th:first-child, body.woocommerce-checkout .checkout-summary .shop_table tr > td:first-child { width: 45% !important; padding-right: var(--s-3) !important; } body.woocommerce-checkout .checkout-summary .shop_table tr > th:last-child, body.woocommerce-checkout .checkout-summary .shop_table tr > td:last-child { width: 55% !important; padding-left: 0 !important; } /* Uniform vertical padding across all rows by default; specific rows below override where they need more breathing room. */ body.woocommerce-checkout .checkout-summary .shop_table th, body.woocommerce-checkout .checkout-summary .shop_table td { padding-top: 10px !important; padding-bottom: 10px !important; vertical-align: top !important; } /* Cart item — keep product name + cadence + qty tightly grouped */ body.woocommerce-checkout .checkout-summary .shop_table .cart_item th, body.woocommerce-checkout .checkout-summary .shop_table .cart_item td { padding-top: 12px !important; padding-bottom: 14px !important; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name { line-height: 1.4 !important; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-name .product-quantity { font-size: var(--fs-sm) !important; color: var(--ink-500) !important; font-weight: 500 !important; } body.woocommerce-checkout .checkout-summary .shop_table .cart_item .product-total { vertical-align: top !important; padding-top: 12px !important; font-size: var(--fs-base) !important; } /* Shipping row — TH aligned with first radio, options stacked tightly */ body.woocommerce-checkout .checkout-summary .shop_table tr.shipping th, body.woocommerce-checkout .checkout-summary .shop_table tr.woocommerce-shipping-totals th { padding-top: 12px !important; vertical-align: top !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.shipping td, body.woocommerce-checkout .checkout-summary .shop_table tr.woocommerce-shipping-totals td { padding-top: 8px !important; padding-bottom: 8px !important; vertical-align: top !important; } /* Original Price — subtle small line-through */ body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-original-price th, body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-original-price td { font-size: var(--fs-sm) !important; font-weight: 500 !important; color: var(--ink-500) !important; padding-top: 8px !important; padding-bottom: 8px !important; border-bottom: 0 !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-original-price td { text-decoration: line-through; } body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-original-price td .woocommerce-Price-amount { color: var(--ink-500) !important; } /* Savings — muted label + bold green amount */ body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-savings th { font-weight: 500 !important; color: var(--ink-700) !important; font-size: var(--fs-sm) !important; padding-top: 4px !important; padding-bottom: 12px !important; border-bottom: 0 !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-savings td { font-weight: 700 !important; color: var(--success) !important; font-size: var(--fs-sm) !important; padding-top: 4px !important; padding-bottom: 12px !important; border-bottom: 0 !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.wcso-cart-savings td .woocommerce-Price-amount { color: var(--success) !important; } /* Order Total — prominent: top border, larger gold price */ body.woocommerce-checkout .checkout-summary .shop_table tr.order-total th, body.woocommerce-checkout .checkout-summary .shop_table tr.order-total td { padding-top: 16px !important; padding-bottom: 14px !important; border-top: 2px solid var(--navy-100) !important; font-size: var(--fs-lg) !important; font-weight: 700 !important; vertical-align: middle !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.order-total th { color: var(--navy-900) !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.order-total td { color: var(--gold-600) !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.order-total td .woocommerce-Price-amount { color: var(--gold-600) !important; } /* Subtotal — also without border-bottom; rows just stack on padding */ body.woocommerce-checkout .checkout-summary .shop_table tr.cart-subtotal th, body.woocommerce-checkout .checkout-summary .shop_table tr.cart-subtotal td { border-bottom: 0 !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.shipping th, body.woocommerce-checkout .checkout-summary .shop_table tr.shipping td, body.woocommerce-checkout .checkout-summary .shop_table tr.woocommerce-shipping-totals th, body.woocommerce-checkout .checkout-summary .shop_table tr.woocommerce-shipping-totals td { border-bottom: 0 !important; } body.woocommerce-checkout .checkout-summary .shop_table tr.cart_item th, body.woocommerce-checkout .checkout-summary .shop_table tr.cart_item td { border-bottom: 1px solid var(--navy-100) !important; } /* Manage Payment Methods — force block-level so the first saved-card radio doesn't end up trailing it on the same line. */ body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-payment-form-manage-payment-methods, body.woocommerce-checkout .checkout-summary a.button.sv-wc-payment-gateway-payment-form-manage-payment-methods { display: block !important; width: -moz-fit-content !important; width: fit-content !important; margin: 0 0 var(--s-3) 0 !important; } /* Tighten payment box internals */ body.woocommerce-checkout .checkout-summary .payment_box { padding: var(--s-4) !important; } body.woocommerce-checkout .checkout-summary .payment_box > p:first-of-type { margin: 0 0 var(--s-3) !important; color: var(--ink-700); font-size: var(--fs-sm); } /* ================================================================== fix9z7 — Credit Card box redesign (tiles + form polish) ================================================================== */ /* Hide the redundant "Pay securely using your credit card." text. SSL is already communicated by the header lock + the secure-checkout line in the page header. Target the first

    inside the payment_box that isn't a form-row (which would be the saved-card list). */ body.woocommerce-checkout .checkout-summary .payment_box > p:first-of-type:not(.form-row) { display: none !important; } /* The .form-row.form-row-wide that contains Manage Payment Methods + saved-card radios + labels needs to render its children stacked, with each input+label pair styled as a card tile. */ body.woocommerce-checkout .checkout-summary .payment_box .form-row.form-row-wide { margin: 0 0 var(--s-3) !important; } body.woocommerce-checkout .checkout-summary .payment_box .form-row.form-row-wide br { display: none !important; } /* Manage Payment Methods link — small, top of the list, low-emphasis */ body.woocommerce-checkout .checkout-summary .sv-wc-payment-gateway-payment-form-manage-payment-methods, body.woocommerce-checkout .checkout-summary a.button.sv-wc-payment-gateway-payment-form-manage-payment-methods { display: block !important; width: -moz-fit-content !important; width: fit-content !important; margin: 0 0 var(--s-3) auto !important; /* right-align as a quiet utility link */ font-size: var(--fs-xs) !important; padding: 0 !important; background: transparent !important; } /* Saved-card labels as tiles. Each pair is