/**
 * checkout.css
 *
 * Ported from the approved review mockup. The Preferred Payment Method
 * field's markup (.payment-options / .payment-option) is hand-built in
 * PHP (class-checkout-fields.php's render_payment_method_field())
 * rather than generated via WooCommerce's woocommerce_form_field()
 * radio type — that was tried first and silently produced plain,
 * unstyled radios in production, because it depended on an unverified
 * assumption about WooCommerce's internal radio-field markup that
 * didn't match what this WooCommerce version actually renders. See
 * that CSS block below for the full explanation.
 */

.page-header {
	border-bottom: 2px solid #111;
	padding: 10px 0 14px;
	margin-bottom: 24px;
}
.page-header h1 {
	margin: 0;
	font-size: 24px;
	text-transform: uppercase;
}
.checkout-steps {
	font-size: 12px;
	color: #888;
	margin-top: 6px;
}
.checkout-steps strong {
	color: var(--ink);
}

.checkout-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
	/* Bottom spacing before the footer now comes from .site-footer's
	 * canonical margin-top (footer.css, testing-round item 18) — this
	 * page-specific padding-bottom was removed 2026-09-02 to avoid
	 * doubling up with it. */
}

/* ---------------- Form sections ---------------- */
.form-section {
	border: 1px solid var(--line);
	padding: 24px;
	margin-bottom: 20px;
}
.form-section h2,
.form-section h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
	margin-bottom: 18px;
}

/* Pay for Order page (v65 fix, 2026-09-02) — Order Details / Shipping
 * Address recap text. Live bug: these two blocks were bare, unclassed
 * <p>/<div> tags inside .form-section and rendered in a mismatched,
 * serif-looking font (confirmed via user screenshot), while every other
 * block of text on this page (.summary-row, .summary-line-item, etc.)
 * already used a real class and rendered correctly. Font-family is set
 * explicitly here (matching base.css's body rule) rather than relying on
 * inheritance through WooCommerce's own .woocommerce wrapper, which
 * evidently doesn't reliably carry the theme's font down to unstyled
 * elements. Deliberately new, page-specific classes — NOT a
 * `.form-section p`/`div` rule — because .form-section is also used by
 * the real Checkout page's Company/Shipping/Payment-Method fields, which
 * must not be touched by this fix. Matches mockups-pay-for-order.html,
 * the approved design reference for this fix. */
.detail-text,
.address-block {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 13.5px;
	color: var(--ink-soft);
	line-height: 1.7;
}
.detail-text {
	margin: 0;
}

/* ---------------- Shipping address checkbox ---------------- */
/* WooCommerce wraps this in an <h3>, which by default inherits the
 * uppercase/bordered .form-section h3 section-heading treatment above
 * — wrong here, since this is a checkbox row, not a real section
 * heading. Overridden to read as a plain, left-aligned checkbox row
 * instead.
 *
 * The rules below alone weren't enough to actually fix the visual —
 * confirmed via DevTools that this text-align/display:flex was
 * correctly winning the cascade, yet the checkbox and its label text
 * still rendered pushed to opposite ends of the row. Root cause,
 * confirmed the same way: this file's own generic
 * ".woocommerce-shipping-fields input { width: 100%; ... }" rule
 * (written for the real text fields — First Name, City, ZIP, etc.)
 * also matched this checkbox <input>, since a checkbox is an <input>
 * too. Forcing width:100% on a flex-item checkbox makes it claim the
 * entire row's width, shoving the label text after it all the way to
 * the right edge — exactly the "pushed to opposite ends" look this
 * was showing. That rule now excludes
 * :not([type="checkbox"]):not([type="radio"]) specifically so this
 * class of bug can't recur if a radio/checkbox is ever added
 * elsewhere inside these field wrappers. */
#ship-to-different-address {
	text-align: left;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 14px;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
}
#ship-to-different-address .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 400;
}
#ship-to-different-address input[type="checkbox"] {
	margin: 0;
}

.prefill-note {
	font-size: 11px;
	color: #888;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.prefill-note svg {
	width: 13px;
	height: 13px;
}

/* WooCommerce's default checkout field wrappers, restyled to match our
 * form-field visual language rather than its default theme. */
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row {
	margin-bottom: 14px;
}
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	margin-bottom: 6px;
	color: #444;
}
.woocommerce-billing-fields input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea,
.woocommerce-shipping-fields input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-shipping-fields select,
.woocommerce-shipping-fields textarea {
	width: 100%;
	border: 1px solid #ccc;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
}
/* Custom arrow for the Country/State dropdowns — same pattern already
   used on the My Account address forms (see account.css). WooCommerce
   automatically enhances Country/State selects with Select2
   (wc-country-select.js, bundled with WC core), which hides the real
   <select> entirely and replaces it with its own generated markup — the
   rule below is a fallback only (covers the brief flash before Select2's
   JS runs, and any select Select2 doesn't touch). The actual visible
   styling for Country/State is the .select2-container block further
   down, unscoped/global the same way it is in account.css, since that
   stylesheet isn't enqueued on the checkout page (no conflict). */
.woocommerce-billing-fields select,
.woocommerce-shipping-fields select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}
.select2-container {
	display: block;
	width: 100% !important;
	margin-bottom: 14px;
}
.select2-container--default .select2-selection--single {
	border: 1px solid #ccc;
	border-radius: 0;
	height: auto;
	padding: 10px 12px;
	background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal;
	padding: 0;
	font-size: 13.5px;
	font-family: inherit;
	color: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: auto;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: 0;
	width: 12px;
	height: 8px;
	margin: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.select2-container--open .select2-selection--single { border-color: #111; }
.select2-dropdown { border: 1px solid #111; border-radius: 0; }
.select2-search--dropdown .select2-search__field { border: 1px solid #ccc; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.select2-results__option--highlighted[aria-selected] { background: #111 !important; color: #fff !important; }

/* WooCommerce's default order-notes field ("Order notes" textarea under
   the core "Additional information" heading — rendered by WooCommerce's
   own form-billing.php or form-shipping.php template, whichever one
   wc_ship_to_billing_address_only() routes it to; same
   .woocommerce-additional-fields wrapper class either way). No CSS
   existed for this field at all before. The "Additional information"
   <h3> itself already inherits the correct look for free from the
   existing ".form-section h2, .form-section h3" rule above (this block
   is always nested inside one of this theme's .form-section wrappers) —
   only the label + textarea needed new rules, matching the same visual
   language as the billing/shipping fields above them. */
.woocommerce-additional-fields {
	margin-top: 4px;
}
.woocommerce-additional-fields .form-row.notes label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	margin-bottom: 6px;
	color: #444;
}
.woocommerce-additional-fields #order_comments {
	width: 100%;
	border: 1px solid #ccc;
	padding: 10px 12px;
	font-size: 13.5px;
	font-family: inherit;
	min-height: 90px;
	resize: vertical;
}

/* ---------------- Preferred Payment Method ---------------- */
/* Hand-built markup (see class-checkout-fields.php's
 * render_payment_method_field()) rather than relying on
 * woocommerce_form_field()'s radio-type output — that was tried first
 * and produced plain, unstyled radios in production despite this exact
 * CSS existing, because it depended on an unverified assumption about
 * WooCommerce's internal radio-field markup (a <ul class="wc_radios">
 * structure) that didn't actually match what this WooCommerce version
 * renders. Hand-building the markup directly removes that dependency
 * entirely — these selectors are guaranteed to match, since the PHP
 * that outputs them is right next to this CSS and uses these exact
 * class names on purpose. */
.payment-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.payment-option {
	position: relative;
	display: block;
	border: 1px solid #ccc;
	padding: 12px 10px;
	text-align: center;
	font-size: 12.5px;
	cursor: pointer;
}
.payment-option input {
	position: absolute;
	opacity: 0;
}
.payment-option:has(input:checked) {
	border: 2px solid #111;
	font-weight: 700;
}
.payment-note {
	font-size: 11.5px;
	color: #888;
	margin-top: 12px;
}

/* ---------------- Payment panel (below the 3-option selector) ---------------- */
/* Only one of the 3 panels below is visible at a time — toggled by
 * assets/js/checkout-payment.js based on which option is selected,
 * server-rendered with the correct one already visible for the
 * initially-selected method so there's no flash of the wrong panel
 * before JS runs. */
.payment-panel {
	margin-top: 16px;
}

/* Credit Cards panel — #b2b-woopayments-mount starts as an empty div;
 * assets/js/checkout-payment.js relocates WooPayments' own real,
 * already-rendered gateway box (li.payment_method_woocommerce_payments
 * .payment_box — its actual secure card field, owned entirely by
 * WooPayments' own plugin code) into it. This box's border/padding is
 * what makes the relocated content read as part of this panel instead
 * of WooCommerce's default gateway list styling; the nested reset below
 * strips WooCommerce core's own default .payment_box
 * background/padding/margin so it doesn't double up with this box's. */
#b2b-woopayments-mount {
	border: 1px solid #ccc;
	padding: 12px;
	background: #fff;
	min-height: 44px;
}
#b2b-woopayments-mount .payment_box {
	padding: 0;
	margin: 0;
	background: none;
	border: none;
}
.payment-security-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #888;
	margin-top: 10px;
}
.payment-security-badge svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

/* Request Bill Pay / Cash (In-Person) panels — a plain informational
 * box, same visual weight as .prefill-note elsewhere on this page. */
.payment-info-box {
	border: 1px solid var(--line);
	background: #fafafa;
	padding: 14px 16px;
	font-size: 12.5px;
	color: #444;
	line-height: 1.55;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.payment-info-box svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
	color: #666;
}
@media (max-width: 900px) {
	.payment-options {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.payment-options {
		grid-template-columns: 1fr;
	}
}

/* ---------------- Order summary sidebar ---------------- */
.summary-box {
	border: 2px solid #111;
	padding: 22px;
	position: sticky;
	top: 90px;
}
.summary-box h3 {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
	margin-bottom: 14px;
}
.summary-line-item {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 12.5px;
}
.summary-line-item .thumb {
	width: 44px;
	height: 44px;
	background: #f2f2f2;
	border: 1px solid #ddd;
	flex-shrink: 0;
}
.summary-line-item .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.summary-line-item .info h4 {
	font-size: 12.5px;
	margin: 0 0 2px;
}
.summary-line-item .info .meta {
	font-size: 11px;
	color: #888;
}
.summary-line-item .line-price {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}
.summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 6px 0;
}
.summary-row.savings {
	font-weight: 700;
}
.summary-row.total {
	border-top: 2px solid #111;
	margin-top: 10px;
	padding-top: 12px;
	font-weight: 800;
	font-size: 16px;
}

.place-order-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	padding: 15px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	margin-top: 10px;
	cursor: pointer;
}
.place-order-btn:hover {
	background: #fff;
	color: #111;
}

/* ---------------- Order confirmation (thank you) page ---------------- */
.confirmation-box {
	border: 2px solid #111;
	padding: 40px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
/*
 * The confirmation-sent paragraph interpolates the buyer's real billing
 * email (an unbounded, unpredictable string) — same overflow bug class
 * already found and fixed on the Contact Us page's admin_email mailto
 * link (see .entry-content in base.css), but a different CSS scope
 * since this box isn't inside .entry-content. Confirmed via Playwright:
 * a realistic long email ("jordan@acmepromotionalproductsandapparelsupply.com")
 * overflowed .confirmation-box (scrollWidth 415 vs clientWidth 268 at
 * 320px) until this rule was added.
 */
.confirmation-box p {
	overflow-wrap: anywhere;
}
.confirmation-box .check-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
}
.confirmation-box .order-number {
	font-size: 28px;
	font-weight: 800;
	margin: 8px 0 4px;
}
.confirmation-box .order-number-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #888;
}
/* Payment Confirmation state (v66, thankyou.php) — grayscale only, per
 * this project's "no color for UI styling, color reserved for product
 * variant swatches" standard. Matches mockups-payment-confirmation.html. */
.confirmation-box .paid-badge {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	padding: 4px 10px;
	border: 1px solid #111;
	color: #111;
	background: var(--bg-soft);
	margin-top: 10px;
}
.confirmation-box .next-steps {
	text-align: left;
	border-top: 1px solid var(--line);
	margin-top: 24px;
	padding-top: 20px;
	font-size: 13.5px;
	color: var(--ink-soft);
}
.confirmation-box .next-steps strong {
	color: var(--ink);
}
.confirmation-recap {
	text-align: left;
	border-top: 1px solid var(--line);
	margin-top: 20px;
	padding-top: 20px;
}
.confirmation-recap h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
}
.confirmation-actions {
	display: flex;
	gap: 10px;
	margin-top: 26px;
}
.confirmation-actions a {
	flex: 1;
	text-align: center;
	padding: 13px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	border: 1px solid #111;
}
.confirmation-actions a.primary {
	background: #111;
	color: #fff;
}
.confirmation-actions a.primary:hover {
	background: #fff;
	color: #111;
}
.confirmation-actions a.secondary {
	background: #fff;
	color: #111;
}
.confirmation-actions a.secondary:hover {
	background: #111;
	color: #fff;
}

/* ---------------- Real WooCommerce payment section ---------------- */
/* Gateway list hidden — see review-order.php's docblock: with exactly
 * one always-available gateway, showing a native single-item selection
 * list would be redundant next to this theme's own Preferred Payment
 * Method field above it. The real Place Order button (#place_order)
 * stays fully visible and functional — just restyled to match
 * .place-order-btn's look, targeting WooCommerce's real button
 * directly rather than replacing it, so its actual submit/AJAX
 * behavior is completely untouched. */
.woocommerce-checkout-payment ul.payment_methods,
.woocommerce-checkout-payment .payment_box {
	display: none;
}
/* WooCommerce core ships its own default styling for #payment itself
   (not just its children) — a grey background box with padding and a
   border-radius, meant to visually contain the gateway list + button
   together. With that list hidden above, the leftover box just showed
   as an empty grey band that #place_order sat inside without actually
   being centered in it (root cause of "place order button not
   vertically aligned in the middle of the grey background" — there was
   never supposed to be a grey background at all: the approved mockup
   has the button sitting in plain flow with no wrapping box). Neutralized
   here so #place_order is the only thing left, in plain flow, matching
   the mockup exactly. */
.woocommerce-checkout-payment #payment {
	background: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
/*
 * display/width added 2026-09-07 — WooCommerce wraps #place_order in
 * this <p class="form-row place-order">, and without an explicit width
 * here it's a shrink-wrapped block (sized to fit its own content, same
 * effect as display: inline-block for width purposes). #place_order's
 * own width: 100% below was computing against THAT shrunken parent —
 * not the .summary-box it visually sits inside — so the button ended
 * up sized to roughly its own text width instead of the box's full
 * content width (confirmed via screenshot: a first attempt at just
 * #place_order's own width:100% wasn't enough on its own). Forcing this
 * wrapper to be a real 100%-width block fixes the chain: #place_order's
 * width: 100% now resolves against the actual .summary-box content
 * width, matching Get Quote's "Get My Personalized Quote" button (see
 * base.css's .btn-block, same underlying fix for that page).
 *
 * !important added 2026-09-07 (v92.3) — the fix above was live on the
 * deployed site (confirmed by pulling the deployed checkout.css
 * directly) but the button was STILL inset from the box edges.
 * WooCommerce core's own stylesheet carries its own rule for this
 * wrapper — `#payment div.form-row { padding: 1em; }` — which combines
 * an ID with an element type (specificity 1,0,1) and beats this file's
 * plain-class selector (0,3,0) regardless of enqueue order, so its
 * ~16px padding was winning over our `padding: 0` and insetting the
 * button from both edges. Rather than chase WooCommerce core's exact
 * selector (which can change between WC versions), !important pins
 * this wrapper's box model unconditionally — the right tool
 * specifically for overriding a third-party stylesheet we don't
 * control and can't guarantee load order against.
 */
.woocommerce-checkout-payment .form-row.place-order {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
#place_order {
	display: block !important;
	width: 100% !important;
	text-align: center;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	padding: 15px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	margin-top: 10px;
	cursor: pointer;
}
#place_order:hover {
	background: #fff;
	color: #111;
}
.woocommerce-terms-and-conditions-wrapper {
	font-size: 12px;
	color: #666;
	margin-bottom: 10px;
}

/* Pay for Order page's real payment section (v64, checkout/form-pay.php)
 * — unlike the main Checkout page, there's no custom Preferred Payment
 * Method selector here to make the native gateway list redundant, so
 * unlike the .woocommerce-checkout-payment rule above, ul.payment_methods
 * stays visible here on purpose (Manual/Bill Pay is filtered out of this
 * page's gateway list already — see class-manual-payment-gateway.php's
 * hide_on_pay_for_order_page() — so this is just WooPayments' own real
 * card fields). Only strips WooCommerce core's default grey box/padding
 * around #payment, matching the "plain flow, no wrapping box" look
 * #place_order already has elsewhere on checkout. #order_review is a
 * safe, page-specific hook — WooCommerce's real order-pay template is
 * the only one that wraps its payment area in a form with this id. */
#order_review #payment {
	background: none;
	border-radius: 0;
	padding: 20px 0 0;
	margin: 0;
}
#order_review ul.payment_methods {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
/*
 * Mobile-audit "Pay for Order" pass (2026-09-15). WooCommerce's own
 * gateway <label> ships completely unstyled here (no rule in this file
 * targeted it before) — it's just inline text, so its clickable area is
 * only the text's own line-height. Confirmed via Playwright
 * getBoundingClientRect(): 171x17px, well under a comfortable tap
 * target, for what is otherwise this page's only way to (re-)select a
 * payment gateway by tapping directly on it. The <input> and <label>
 * are siblings (WooCommerce's real markup, not nested), so the label's
 * `for` attribute already makes the whole label clickable — this just
 * gives it padding so that clickable area is actually big enough to
 * tap on a phone, without touching WooCommerce's own input/label
 * markup or this list's already-correct desktop appearance (padding is
 * inside the existing plain-list-item flow, so nothing shifts on
 * desktop beyond a slightly taller row).
 */
#order_review ul.payment_methods li label {
	display: inline-block;
	padding: 13px 0;
	cursor: pointer;
}

/* .btn-sm exists in account.css too, but that stylesheet isn't
 * enqueued on the checkout/order-received pages — duplicated here
 * (same values) rather than widening account.css's own enqueue
 * conditions just for one small utility class. */
.btn-sm {
	padding: 8px 14px;
	font-size: 11px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
	.checkout-layout {
		grid-template-columns: 1fr;
	}
	.summary-box {
		position: static;
	}
	/*
	 * Mobile-audit "Checkout" pass (2026-09-15). billing_first_name/
	 * billing_last_name (and any other WooCommerce field the checkout
	 * field definitions pair up) render with WooCommerce's own
	 * form-row-first/form-row-last classes, which WooCommerce's core
	 * frontend stylesheet (still loaded — never dequeued, see
	 * account.css's own note on the same point) floats to roughly 47%
	 * width each so they sit side by side. Neither this file nor
	 * account.css's identical field CSS ever overrode that for mobile —
	 * exactly the same gap already found and fixed on My Account's
	 * Billing Settings/Account Settings forms
	 * (.woocommerce-address-fields__field-wrapper/.woocommerce-
	 * EditAccountForm .form-row-first/-last, account.css). Same fix
	 * here: full width, unfloated, once the two-column .checkout-layout
	 * itself has already collapsed at this breakpoint, so First/Last
	 * Name (etc.) never sit cramped into a ~47%-wide box on a phone
	 * screen. !important for the same reason account.css needed it on
	 * its own copy of this fix — WooCommerce core's rule combines an
	 * ancestor class with an element type, which beats a plain 2-class
	 * selector on specificity regardless of stylesheet load order.
	 */
	.woocommerce-billing-fields .form-row-first,
	.woocommerce-billing-fields .form-row-last,
	.woocommerce-shipping-fields .form-row-first,
	.woocommerce-shipping-fields .form-row-last {
		width: 100% !important;
		float: none !important;
	}
}