/* 2SM checkout — port of app/src/pages/checkout.astro onto FunnelKit's layout_9 DOM.
   Tokens, geometry and section order follow the local page; every rule here either
   restyles a FunnelKit node or hides one of its prebuilt-demo blocks. */

@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSans-400-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSans-400-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSans-700-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSans-700-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSerif-700-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSerif-700-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body.woocommerce-checkout{
  --paper:#fff; --ink:#000; --ink-body:#141414; --ink-soft:#4a4a4a; --ink-faint:#6b6b6b;
  --rule:#e3e3e0; --wash:#f7f7f5; --band:#000; --marker:#fff3a3;
  --cta:#ffd61e; --cta-ink:#000; --cta-shade:#d0a800; --price:#12783f; --tick:#12783f; --err:#b91c1c;
  --font:'Noto Sans',system-ui,sans-serif; --font-display:'Noto Serif',Georgia,serif;
  --ease:cubic-bezier(0.32, 0.72, 0, 1);
  background:var(--wash); color:var(--ink-body);
  font-family:var(--font); font-size:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height:1.5;
  letter-spacing:0; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.woocommerce-checkout h1,
body.woocommerce-checkout h2,
body.woocommerce-checkout h3{font-family:var(--font-display); color:var(--ink); font-weight:700}

/* ---------- FunnelKit prebuilt-demo furniture. Removed, not merely dimmed. ----------
   These blocks ship with layout_9 and carried invented content on the live page:
   a stock logo, a fictional support agent, "Award-Winning", "100% Satisfaction
   Guaranteed", support@example.com and a placeholder phone number. */
body.woocommerce-checkout .wfacp-header,
body.woocommerce-checkout .wfacp_header,
body.woocommerce-checkout .outside_header_wrap,
body.woocommerce-checkout .wfacp-logo,
body.woocommerce-checkout .wfacp_logo_wrap,
body.woocommerce-checkout .wfacp_promises_0,
body.woocommerce-checkout .wfacp_customer_0,
body.woocommerce-checkout .wfacp_benefits_0,
body.woocommerce-checkout .wfacp_testimonials_0,
body.woocommerce-checkout .wfacp_assurance_0,
body.woocommerce-checkout .wfacp_footer,
body.woocommerce-checkout .wfacp_inner_footer_m,
body.woocommerce-checkout .wfacp_footer_sec,
body.woocommerce-checkout .wfacp-right-panel,
body.woocommerce-checkout .wfacp-coupon-section,
body.woocommerce-checkout .wfacp_woocommerce_form_coupon,
body.woocommerce-checkout .wfacp_showcoupon,
body.woocommerce-checkout .wfacp_main_showcoupon,
body.woocommerce-checkout .wfacp_sidebar_coupon_show,
body.woocommerce-checkout #order_coupon_field,
body.woocommerce-checkout .product-image,
body.woocommerce-checkout .wfacp_mb_cart_accordian,
body.woocommerce-checkout .mb_header_section,
body.woocommerce-checkout .wfacp-footer-text,
body.woocommerce-checkout .wfacp_footer_wrap_n,
body.woocommerce-checkout .wfacp_footer_n,
body.woocommerce-checkout .wfacp_summary_img_true img{display:none!important}

/* ---------- Shell ---------- */
body.woocommerce-checkout .wfacp-main-container,
body.woocommerce-checkout .wfacp-wrapper-decoration,
body.woocommerce-checkout .wfacp-panel-wrapper,
body.woocommerce-checkout .wfacp-middle-container,
body.woocommerce-checkout .wfacp-form-panel,
body.woocommerce-checkout .wfacp-left-wrapper,
body.woocommerce-checkout .wfacp-form,
body.woocommerce-checkout .wfacp_main_form,
body.woocommerce-checkout .wfacp-inside,
body.woocommerce-checkout #wfacp-sec-wrapper{
  max-width:none; width:auto; margin:0; padding:0; float:none;
  background:transparent; border:0; box-shadow:none;
}
body.woocommerce-checkout .wfacp-comm-wrapper{display:block; max-width:none; margin:0; padding:0}
/* The prebuilt header is gone, so the space it reserved above the card goes with it.
   FunnelKit sets this padding with its own weight, hence the !important. */
body.woocommerce-checkout .wfacp-panel-wrapper,
body.woocommerce-checkout .wfacp-wrapper-decoration,
body.woocommerce-checkout .wfacp-comm-wrapper{padding-top:0!important; margin-top:0!important}
/* FunnelKit sets this one with !important of its own, so match its specificity and win on order. */
body.wfacp_main_wrapper.woocommerce-checkout .wfacp-left-wrapper{padding-top:0!important; margin-top:0!important}

/* The bar is moved to the top of the container by the child theme's script so that it can
   span the whole viewport rather than only the form column. */
body.woocommerce-checkout .twosm-checkout-brand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 0; padding:15px 18px; border:0;
  background:var(--band); color:#fff;
  font-size:18px; font-weight:700; letter-spacing:-.01em; text-align:center;
}
body.woocommerce-checkout .twosm-checkout-brand svg{width:17px;height:17px;flex:none;opacity:.85}
body.woocommerce-checkout .twosm-checkout-brand strong{font-weight:700}
body.woocommerce-checkout .twosm-checkout-brand a{display:none}

/* ---------- The card ---------- */
body.woocommerce-checkout .wfacp-left-panel{
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 2px 10px rgba(16,24,40,.06);
  margin:22px 12px; padding:0; overflow:hidden; float:none; width:auto;
}
body.woocommerce-checkout #wfacp_checkout_form{margin:0}

/* The "You're one step away." intro, injected by the child theme before the form. */
body.woocommerce-checkout .twosm-co-intro{padding:26px 20px 2px; margin:0}
body.woocommerce-checkout .twosm-co-intro h1{
  font-size:clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem); line-height:1.08;
  letter-spacing:-0.02em; margin:0;
}

body.woocommerce-checkout .wfacp-section{
  padding:24px 20px; margin:0; border:0; background:transparent;
}
body.woocommerce-checkout .wfacp-section + .wfacp-section{border-top:1px solid var(--rule)}

/* Section names are the small-caps labels from the local page. layout_9 ships them
   hidden (`.none`); they carry the structure this design depends on, so bring them back. */
body.woocommerce-checkout .wfacp_internal_form_wrap,
body.woocommerce-checkout .wfacp-comm-title{display:block!important; margin:0}
body.woocommerce-checkout .wfacp_section_heading,
body.woocommerce-checkout .wfacp-comm-title h2{
  font-family:var(--font)!important; font-size:14px!important; font-weight:700!important;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint)!important;
  margin:0 0 14px!important; padding:0; line-height:1.3; text-align:left!important;
}
body.woocommerce-checkout .wfacp-comm-title h4{display:none}

/* ---------- Fields ---------- */
body.woocommerce-checkout .wfacp-form-control,
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select.country_select,
body.woocommerce-checkout .wfacp-form-control-wrapper input[type=text],
body.woocommerce-checkout .wfacp-form-control-wrapper input[type=email]{
  width:100%; height:auto; padding:14px 15px; font-size:18px;
  border:1px solid var(--rule); border-radius:6px; background:#fff;
  font-family:var(--font); color:var(--ink-body); box-shadow:none;
}
body.woocommerce-checkout .wfacp-form-control:focus,
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus{outline:2px solid var(--ink); outline-offset:-1px; border-color:var(--ink)}
body.woocommerce-checkout .select2-container--default .select2-selection--single{
  height:auto; padding:8px 6px; border:1px solid var(--rule); border-radius:6px;
}
body.woocommerce-checkout .wfacp-form-control-label{
  font-size:15px; color:var(--ink-soft); font-weight:400;
}
body.woocommerce-checkout .form-row{margin:0 0 14px; padding:0}
body.woocommerce-checkout .wfacp-row{display:block}
body.woocommerce-checkout .form-row-first,
body.woocommerce-checkout .form-row-last,
body.woocommerce-checkout .wfacp-col-left-half{width:100%; float:none}
@media(min-width:560px){
  body.woocommerce-checkout #billing_country_field{width:calc(58% - 7px); float:left; clear:none}
  body.woocommerce-checkout #billing_postcode_field{width:calc(42% - 7px); float:right; clear:none}
  body.woocommerce-checkout #billing_postcode_field + *{clear:both}
}

/* ---------- Item / price table and order summary ---------- */
body.woocommerce-checkout .wfacp_order_sec table,
body.woocommerce-checkout .wfacp_pro_switch table{width:100%; border-collapse:collapse}
body.woocommerce-checkout .wfacp_order_sec th,
body.woocommerce-checkout .wfacp_pro_switch th{
  font-family:var(--font); font-size:13.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-faint); text-align:left;
  border-bottom:1px solid var(--rule); padding:0 0 9px;
}
body.woocommerce-checkout .wfacp_order_sec th:last-child,
body.woocommerce-checkout .wfacp_pro_switch th:last-child{text-align:right}
body.woocommerce-checkout .wfacp_order_sec td,
body.woocommerce-checkout .wfacp_pro_switch td{
  padding:12px 0; border-bottom:1px solid var(--rule); font-size:18px; background:transparent;
}
body.woocommerce-checkout .wfacp_order_sec td:last-child,
body.woocommerce-checkout .wfacp_pro_switch td:last-child{text-align:right}
body.woocommerce-checkout .wfacp_order_sec tr.order-total td,
body.woocommerce-checkout .wfacp_order_sec tr.order-total th{
  border-bottom:0; border-top:2px solid var(--ink); font-size:23px; padding-top:14px; font-weight:700;
}
body.woocommerce-checkout .wfacp_order_sec tr.order-total .amount{font-size:23px}
body.woocommerce-checkout .product-name.wfacp_summary_img_true{padding-left:0!important}

/* One product, switching off: the radio, the quantity stepper and the quick-view icon are
   all controls for choices that do not exist here, so the section reads as the local
   page's plain Item/Price table. */
body.woocommerce-checkout #product_switching_field .wfacp_product_switcher_col_1,
body.woocommerce-checkout #product_switching_field .wfacp_switcher_checkbox,
body.woocommerce-checkout #product_switching_field .wfacp_qv-button,
body.woocommerce-checkout #product_switching_field .wfacp_product_quantity_container,
body.woocommerce-checkout #product_switching_field .wfacp-product-switch-title .product-quantity,
body.woocommerce-checkout #product_switching_field .wfacp_product_switcher_container .product-remove{display:none!important}

/* The header row: "Products" on the left, "Price" on the right, like the local Item/Price
   table. Its three cells are .product-remove, .product-quantity (hidden) and .product-name. */
body.woocommerce-checkout #product_switching_field .wfacp-product-switch-title{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
body.woocommerce-checkout #product_switching_field .wfacp-product-switch-title .wfacp_qty_price_wrap{
  display:flex; gap:12px;
}
body.woocommerce-checkout #product_switching_field .wfacp_product_row,
body.woocommerce-checkout #product_switching_field .wfacp_row_wrap{
  background:transparent!important; border:0!important; padding:12px 0!important; margin:0!important;
}
body.woocommerce-checkout #product_switching_field .wfacp_product_row{border-bottom:1px solid var(--rule)!important}
body.woocommerce-checkout #product_switching_field .wfacp_ps_title_wrap{padding:0!important}
body.woocommerce-checkout #product_switching_field .wfacp_product_switcher_item{font-size:18px}
body.woocommerce-checkout #product_switching_field .wfacp-product-switch-title{
  font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-faint); padding:0 0 9px; border-bottom:1px solid var(--rule);
}
body.woocommerce-checkout #product_switching_field .wfacp-product-switch-title > div{padding:0}

/* FunnelKit's cart-capture opt-out ships in a pink that reads as an error next to a
   payment form. It is a quiet secondary action. */
body.woocommerce-checkout .bwfan_email_consent_no_thanks{
  color:var(--ink-faint)!important; text-decoration:underline; text-underline-offset:3px;
}

/* ---------- Order bump ----------
   FunnelKit's layout_1 skin draws a dashed box and reserves a product-image
   column. There is no image for this product, so WooCommerce fills it with its
   grey placeholder; the local design has no thumbnail at all. Both go, and the
   box takes the solid marker-yellow treatment used on the sales page. */
body.woocommerce-checkout .wfob_bump_wrapper:empty{display:none}
body.woocommerce-checkout .wfob_wrap_start{margin:0 0 22px}
body.woocommerce-checkout .wfob_bump,
body.woocommerce-checkout .wfob_sec_start{
  border:2px solid var(--cta-shade)!important; border-style:solid!important;
  border-radius:10px!important; background:#fffdf4!important;
  padding:18px 16px!important; margin:0!important; box-shadow:none!important;
}
body.woocommerce-checkout .wfob_bump .wfob_sec_start{
  border:0!important; padding:0!important; background:transparent!important;
}
/* The image column and its placeholder */
body.woocommerce-checkout .wfob_wrap_start .wfob_pro_img,
body.woocommerce-checkout .wfob_wrap_start .wfob_image_wrap,
body.woocommerce-checkout .wfob_wrap_start .wfob_product_image,
body.woocommerce-checkout .wfob_wrap_start img{display:none!important}
body.woocommerce-checkout .wfob_wrap_start .bwf_display_flex{display:block!important}
body.woocommerce-checkout .wfob_wrap_start .wfob_pro_txt_wrap{width:100%!important; max-width:none!important; padding-left:0!important}

body.woocommerce-checkout .wfob_title_wrap{
  margin:0 0 10px; font-size:17px; line-height:1.4; font-weight:700; cursor:pointer;
}
body.woocommerce-checkout .wfob_title_wrap label{cursor:pointer}
body.woocommerce-checkout .wfob_skin_description,
body.woocommerce-checkout .wfob_text_inner{font-size:17px; line-height:1.45; color:var(--ink-body)}
body.woocommerce-checkout .wfob_bump_highlight,
body.woocommerce-checkout .wfob_title{
  background:var(--marker); color:var(--price); font-weight:700;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
body.woocommerce-checkout .wfob_wrap_start input[type=checkbox]{
  width:20px; height:20px; accent-color:var(--price); margin-right:9px; vertical-align:-3px;
}

/* ---------- Wallets, sitting with the card fields ----------
   FunnelKit's own "Express Checkout" heading and OR separator are switched off in
   settings; the divider below is ours, so the wallets and the card entry read as one
   payment step instead of two competing blocks. */
body.woocommerce-checkout .fkwcs-express-checkout-wrapper,
body.woocommerce-checkout #wfacp_smart_button_stripe_gpay_apay,
body.woocommerce-checkout .fkwcs_payment_request_wrapper{margin:0 0 4px; padding:0; border:0; background:none}
body.woocommerce-checkout .fkwcs-express-checkout-title,
body.woocommerce-checkout .fkwcs-express-separator,
body.woocommerce-checkout .fkwcs_express_separator{display:none!important}
body.woocommerce-checkout .twosm-wallets-start{margin-top:2px}

/* Rule either side of a centred label, no wrapper element per side. */
body.woocommerce-checkout .twosm-or{
  display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-faint);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
body.woocommerce-checkout .twosm-or::before,
body.woocommerce-checkout .twosm-or::after{content:''; flex:1; height:1px; background:var(--rule)}
/* Nothing to divide when no wallet is available on this device. */
body.woocommerce-checkout .twosm-wallets-start:not(:has(~ * .fkwcs-express-checkout-wrapper)) ~ .twosm-or:last-of-type{}

/* ---------- Payment ----------
   Stripe is the only gateway, so the radio, the gateway name and FunnelKit's card-network
   icon strip are all choosing between one option and duplicating the accepted-methods
   image under the button. The card fields sit flat on the card, as on the local page. */
body.woocommerce-checkout .wc_payment_methods{list-style:none; margin:0; padding:0; border:0}
body.woocommerce-checkout .wc_payment_methods > li{border:0; background:none; padding:0; margin:0}
/* Only the chooser furniture goes. Nothing that could contain the Stripe mount point
   is touched — hiding the payment box's first paragraph took the card fields with it. */
body.woocommerce-checkout .wc_payment_methods input[type=radio],
body.woocommerce-checkout .wc_payment_methods label img,
body.woocommerce-checkout .fkwcs-card-icons,
body.woocommerce-checkout .payment_method_icons{display:none!important}
body.woocommerce-checkout .wc_payment_method > label{
  font-size:14px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); padding:0; margin:0 0 10px;
}
body.woocommerce-checkout .payment_box{
  background:transparent; border:0; border-radius:0; padding:0; margin:0;
}
body.woocommerce-checkout .payment_box::before{display:none}
/* FunnelKit's "We Respect Your Privacy & Information" strip is template boilerplate that
   the local page does not carry; the privacy notice above the button already says it. */
body.woocommerce-checkout .wfacp-payment-dec{display:none!important}

/* ---------- The button ---------- */
body.woocommerce-checkout .place-order{padding:0; margin:20px 0 0}
/* FunnelKit sizes the button to a percentage of its wrapper; the local page runs it full
   width, so the wrapper and the button both take the whole column. */
body.woocommerce-checkout .wfacp-order-place-btn-wrap{width:100%; text-align:left}
body.wfacp_main_wrapper.woocommerce-checkout #place_order{width:100%!important; max-width:none!important}
/* FunnelKit paints this button green from its own template stylesheet, so every property
   the local page cares about is stated at matching specificity. */
body.wfacp_main_wrapper.woocommerce-checkout #place_order,
body.wfacp_main_wrapper.woocommerce-checkout #place_order:hover,
body.wfacp_main_wrapper.woocommerce-checkout #place_order:focus{
  width:100%; padding:20px; min-height:0; font-size:21px; font-weight:700; line-height:1.3;
  color:var(--cta-ink)!important; background:var(--cta)!important;
  background-color:var(--cta)!important; background-image:none!important;
  border:0; border-radius:5px;
  cursor:pointer; font-family:var(--font); letter-spacing:.01em;
  box-shadow:0 4px 0 0 var(--cta-shade);
  transition:transform .14s ease-out, box-shadow .14s ease-out;
}
body.woocommerce-checkout #place_order:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 6px 0 0 var(--cta-shade)}
body.woocommerce-checkout #place_order:active:not(:disabled){transform:translateY(2px); box-shadow:0 2px 0 0 var(--cta-shade)}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{font-size:15px; color:var(--ink-soft)}
body.woocommerce-checkout .woocommerce-privacy-policy-text p{font-size:14px; color:var(--ink-faint)}
/* Links carry an underline rather than WooCommerce's pink, matching the local pages. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-checkout .woocommerce-privacy-policy-text a{
  color:inherit; text-decoration:underline; text-underline-offset:3px;
}

/* Accepted-methods strip, injected after the button by the child theme. */
body.woocommerce-checkout .twosm-co-methods{
  display:block; width:100%; max-width:400px; height:auto; margin:16px auto 0;
}

/* ---------- "You're about to:" ---------- */
body.woocommerce-checkout .twosm-checkout-outcomes{margin:0 12px 40px; padding:0}
body.woocommerce-checkout .twosm-checkout-outcomes h2{
  font-size:clamp(1.4375rem, 1.2rem + 0.9vw, 1.6875rem); line-height:1.16;
  letter-spacing:-0.016em; margin:0 0 16px;
}
body.woocommerce-checkout .twosm-checkout-outcomes ul{list-style:none; margin:0; padding:0}
body.woocommerce-checkout .twosm-checkout-outcomes li{
  position:relative; padding:0 0 0 36px; margin:0 0 15px; font-size:19px; line-height:1.45;
}
body.woocommerce-checkout .twosm-checkout-outcomes li svg{
  position:absolute; left:0; top:1px; width:24px; height:24px; color:var(--tick);
}
body.woocommerce-checkout .twosm-co-help{
  margin:24px 0 0; font-size:16px; color:var(--ink-faint);
}
body.woocommerce-checkout .twosm-co-help a{color:var(--ink-soft)}

body.woocommerce-checkout :focus-visible{outline:3px solid var(--ink); outline-offset:2px}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .wfacp_inline_error{color:var(--err); font-size:16px}

/* ---------- Tablet ---------- */
@media(min-width:721px){
  body.woocommerce-checkout .wfacp-left-panel{margin:26px auto 24px; max-width:640px}
  body.woocommerce-checkout .wfacp-section{padding:28px 32px}
  body.woocommerce-checkout .twosm-co-intro{padding:32px 32px 2px}
  body.woocommerce-checkout .twosm-checkout-brand{font-size:20px; padding:17px 18px}
  body.woocommerce-checkout .twosm-checkout-outcomes{max-width:640px; margin:0 auto 48px; padding:0 32px}
}

/* ---------- Desktop: form left, reassurance right ---------- */
@media(min-width:900px){
  /* layout_9's row is a CSS table and FunnelKit defends that with !important, so the two
     columns are built as table cells rather than as a grid. Same result, no specificity
     war: the form keeps 60% and the aside takes the 40% the hidden sidebar vacated. */
  body.woocommerce-checkout .wfacp-comm-wrapper{
    max-width:1100px; margin:0 auto; padding:0 24px!important; table-layout:fixed; width:100%;
  }
  body.woocommerce-checkout .wfacp-left-wrapper{width:60%; vertical-align:top}
  body.woocommerce-checkout .wfacp-left-panel{margin:26px 0 30px; max-width:none}
  body.woocommerce-checkout .twosm-checkout-outcomes{
    display:table-cell; width:40%; vertical-align:top;
    max-width:none; margin:0; padding:58px 0 0 40px;
  }
  body.woocommerce-checkout .twosm-checkout-outcomes li{font-size:18px; margin-bottom:17px}
}