tags are direct children of
sitting between and for each field) */
.woocommerce-checkout .form-row {
margin-bottom: 0;
padding: 0;
}
/* Required field asterisk */
.woocommerce-checkout .form-row label abbr.required,
.woocommerce-checkout .form-row label .required {
color: #ef4444;
text-decoration: none;
font-weight: 700;
border: none;
}
/* Input wrapper (WC wraps inputs in ) */
.woocommerce-input-wrapper {
display: block;
width: 100%;
}
/* Base input styling for all checkout fields */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 0.875rem;
color: #1e293b;
background-color: #fff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
-webkit-appearance: none;
font-family: inherit;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
border-color: #0e7490;
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
color: #94a3b8;
}
/* Textarea (order notes) */
.woocommerce-checkout .form-row textarea {
min-height: 100px;
resize: vertical;
}
/* Select dropdowns */
.woocommerce-checkout .form-row select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px;
padding-right: 2.5rem;
}
/* Validation error state (WC adds .woocommerce-invalid) */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* Validated (correct) state */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select {
border-color: #22c55e;
}
/* ═══════════════════════════════════════════
Checkout — Select2 Dropdown Styling
(WC uses Select2 for country/state fields)
═══════════════════════════════════════════ */
.woocommerce-checkout .select2-container {
width: 100% !important;
}
.woocommerce-checkout .select2-container .select2-selection--single {
height: auto;
min-height: 2.75rem;
padding: 0.5rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background-color: #fff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single {
border-color: #0e7490;
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
color: #1e293b;
font-size: 0.875rem;
line-height: 1.5;
padding: 0;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
height: 100%;
right: 0.75rem;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__placeholder {
color: #94a3b8;
}
/* Select2 dropdown panel */
.select2-dropdown {
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 999999;
}
.select2-results__option {
padding: 0.5rem 1rem;
font-size: 0.875rem;
color: #334155;
transition: background-color 0.1s;
}
.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
background-color: #0e7490 !important;
color: #fff !important;
}
.select2-results__option[aria-selected="true"] {
background-color: #f0fdfa;
color: #0e7490;
font-weight: 500;
}
.select2-search--dropdown {
padding: 0.5rem;
}
.select2-search--dropdown .select2-search__field {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 0.375rem;
font-size: 0.875rem;
outline: none;
}
.select2-search--dropdown .select2-search__field:focus {
border-color: #0e7490;
box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.15);
}
/* ═══════════════════════════════════════════
Checkout — WC Notices & Messages
═══════════════════════════════════════════ */
/* WC checkout error notice group (prepended to form.checkout by WC JS) */
.woocommerce-checkout .woocommerce-NoticeGroup {
margin-bottom: 1rem;
}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
padding: 1rem 1.25rem;
border-radius: 0.75rem;
font-size: 0.875rem;
line-height: 1.6;
margin-bottom: 1rem;
list-style: none;
}
.woocommerce-checkout .woocommerce-error {
background-color: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
.woocommerce-checkout .woocommerce-error li {
list-style: none;
margin-bottom: 0.25rem;
}
.woocommerce-checkout .woocommerce-error li:last-child {
margin-bottom: 0;
}
.woocommerce-checkout .woocommerce-message {
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
}
.woocommerce-checkout .woocommerce-info {
background-color: #f0f9ff;
border: 1px solid #bae6fd;
color: #0c4a6e;
}
/* Links inside notices */
.woocommerce-checkout .woocommerce-error a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-info a {
color: #0e7490;
font-weight: 600;
text-decoration: underline;
}
/* ═══════════════════════════════════════════
Checkout — Create Account checkbox area
═══════════════════════════════════════════ */
.woocommerce-checkout #createaccount {
accent-color: #0e7490;
}
.woocommerce-checkout .create-account p {
font-size: 0.8125rem;
color: #64748b;
background: none !important;
border: none !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════
Checkout — WC Blockoverlay / Loading state
═══════════════════════════════════════════ */
.woocommerce-checkout .blockUI.blockOverlay {
background: rgba(255, 255, 255, 0.7) !important;
opacity: 1 !important;
}
.woocommerce-checkout .loader {
display: none !important;
}
/* ═══════════════════════════════════════════
Checkout — Terms & conditions content box
═══════════════════════════════════════════ */
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions {
max-height: 200px;
overflow-y: auto;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #f8fafc;
font-size: 0.8125rem;
line-height: 1.7;
color: #475569;
}
/* ═══════════════════════════════════════════════════════════════
EXPRESS CHECKOUT / PAYMENT BUTTONS
(PayPal, Apple Pay, Google Pay, Stripe, WooPay, etc.)
Payment plugins inject button containers via WooCommerce hooks.
IMPORTANT: Never use overflow:hidden or change display/flex on
payment containers — it breaks iframe-based buttons like Apple Pay.
Only add spacing, border-radius, and cosmetic styles.
═══════════════════════════════════════════════════════════════ */
/* ─── Shimmer skeleton while payment SDKs load ─── */
@keyframes pranathrive-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
/* Empty containers get a subtle loading placeholder */
.wc-proceed-to-checkout .ppc-button-wrapper:empty,
.wc-proceed-to-checkout #ppc-button:empty,
.wc-proceed-to-checkout #ppc-button-ppcp-gateway:empty,
.wc-proceed-to-checkout .ppcp-button-apm:empty,
.wc-proceed-to-checkout #wc-stripe-payment-request-wrapper:empty,
.wc-proceed-to-checkout #wcpay-payment-request-wrapper:empty,
.wc-proceed-to-checkout #wcpay-express-checkout-element:empty,
.wc-proceed-to-checkout #wc-stripe-express-checkout-element:empty,
form.cart ~ .ppc-button-wrapper:empty,
form.cart ~ #ppc-button:empty,
form.cart ~ .ppcp-button-apm:empty,
form.cart ~ #wc-stripe-payment-request-wrapper:empty,
form.cart ~ #wcpay-payment-request-wrapper:empty,
form.cart .ppc-button-wrapper:empty,
form.cart #ppc-button:empty,
form.cart .ppcp-button-apm:empty,
form.cart #wc-stripe-payment-request-wrapper:empty,
form.cart #wcpay-payment-request-wrapper:empty,
#payment .ppc-button-wrapper:empty,
#payment #ppc-button:empty,
#payment .ppcp-button-apm:empty,
#payment #wc-stripe-payment-request-wrapper:empty,
#payment #wcpay-payment-request-wrapper:empty {
min-height: 48px;
border-radius: 0.625rem;
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 800px 100%;
animation: pranathrive-shimmer 1.5s infinite linear;
}
/* ─── "OR" separator line between Checkout/ATC and express buttons ─── */
#wc-stripe-payment-request-button-separator,
.wcpay-payment-request-button-separator,
.woocommerce-proceed-to-checkout-button-separator,
.ppcp-or-separator {
display: flex !important;
align-items: center;
gap: 1rem;
margin: 1.25rem 0;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
}
#wc-stripe-payment-request-button-separator::before,
#wc-stripe-payment-request-button-separator::after,
.wcpay-payment-request-button-separator::before,
.wcpay-payment-request-button-separator::after,
.woocommerce-proceed-to-checkout-button-separator::before,
.woocommerce-proceed-to-checkout-button-separator::after,
.ppcp-or-separator::before,
.ppcp-or-separator::after {
content: '';
flex: 1;
height: 1px;
background: #e2e8f0;
}
/* ─── CART PAGE: Spacing for express buttons inside .wc-proceed-to-checkout ─── */
.wc-proceed-to-checkout .ppc-button-wrapper,
.wc-proceed-to-checkout #ppc-button,
.wc-proceed-to-checkout #ppc-button-ppcp-gateway,
.wc-proceed-to-checkout #ppcp-messages,
.wc-proceed-to-checkout .ppcp-button-apm,
.wc-proceed-to-checkout #wc-stripe-payment-request-wrapper,
.wc-proceed-to-checkout .wc-stripe-payment-request-wrapper,
.wc-proceed-to-checkout #wc-stripe-express-checkout-element,
.wc-proceed-to-checkout #wcpay-payment-request-wrapper,
.wc-proceed-to-checkout #wcpay-express-checkout-element,
.wc-proceed-to-checkout .wc-amazon-checkout-button,
.wc-proceed-to-checkout .wc_ppec_express_checkout_button {
margin-top: 0.75rem;
}
/* ─── PRODUCT PAGE: Spacing for express buttons after add-to-cart ─── */
form.cart ~ .ppc-button-wrapper,
form.cart ~ #ppc-button,
form.cart ~ #ppc-button-ppcp-gateway,
form.cart ~ #ppcp-messages,
form.cart ~ .ppcp-button-apm,
form.cart ~ #wc-stripe-payment-request-wrapper,
form.cart ~ .wc-stripe-payment-request-wrapper,
form.cart ~ #wc-stripe-express-checkout-element,
form.cart ~ #wcpay-payment-request-wrapper,
form.cart ~ #wcpay-express-checkout-element,
form.cart ~ .wc-amazon-checkout-button,
form.cart ~ .wc_ppec_express_checkout_button,
form.cart .ppc-button-wrapper,
form.cart .ppcp-button-apm,
form.cart #ppc-button,
form.cart #ppc-button-ppcp-gateway,
form.cart #ppcp-messages,
form.cart #wc-stripe-payment-request-wrapper,
form.cart .wc-stripe-payment-request-wrapper,
form.cart #wc-stripe-express-checkout-element,
form.cart #wcpay-payment-request-wrapper,
form.cart #wcpay-express-checkout-element {
margin-top: 1rem;
}
/* ─── PayPal Smart Buttons (PPCP) — spacing between stacked buttons ─── */
.ppc-button-wrapper .paypal-buttons,
#ppc-button .paypal-buttons,
.ppcp-button-apm .paypal-buttons {
margin-bottom: 0.5rem;
}
.ppc-button-wrapper .paypal-buttons:last-child,
#ppc-button .paypal-buttons:last-child,
.ppcp-button-apm .paypal-buttons:last-child {
margin-bottom: 0;
}
/* PayPal "Pay Later" / "Pay in 4" messaging */
#ppcp-messages,
.ppcp-messages,
[id*="ppcp-message"],
[class*="ppcp-message"] {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
font-size: 0.8125rem;
color: #475569;
text-align: center;
}
#ppcp-messages iframe,
.ppcp-messages iframe {
max-width: 100%;
}
/* ─── Stripe / WooPay Express Checkout (Apple Pay / Google Pay) ─── */
/* Only set min-height so buttons render properly — no overflow clipping */
#wc-stripe-payment-request-wrapper button,
.wc-stripe-payment-request-wrapper button,
#wcpay-payment-request-wrapper button,
#wcpay-express-checkout-element button {
min-height: 48px;
border-radius: 0.5rem !important;
}
/* ─── Amazon Pay button ─── */
.wc-amazon-checkout-button,
#pay_with_amazon,
.amazon-button-container {
margin-top: 0.75rem;
}
/* ═══════════════════════════════════════════════════
CHECKOUT: Payment Gateway Icons (Visa, MC, Amex…)
Icons must fit on ONE row in the narrow right column.
═══════════════════════════════════════════════════ */
.payment-gateway-icon {
display: inline-flex !important;
align-items: center;
gap: 2px !important;
flex-wrap: nowrap !important;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
.payment-gateway-icon img {
max-height: 18px !important;
width: auto !important;
border-radius: 2px;
border: 1px solid #e2e8f0;
background: #fff;
padding: 1px 2px;
object-fit: contain;
flex-shrink: 0;
}
/* PayPal / Stripe icons — no card border (they are already logos) */
.payment_method_ppcp-gateway .payment-gateway-icon img,
.payment_method_paypal .payment-gateway-icon img,
.payment_method_ppcp-credit-card-gateway .payment-gateway-icon img,
[class*="payment_method_ppcp"] .payment-gateway-icon img,
[class*="payment_method_paypal"] .payment-gateway-icon img {
max-height: 18px !important;
border: none;
background: transparent;
padding: 0;
}
.payment_method_stripe .payment-gateway-icon img,
.payment_method_stripe_cc .payment-gateway-icon img,
.payment_method_woocommerce_payments .payment-gateway-icon img {
max-height: 18px !important;
}
/* WooPayments card brand logos — force single row */
.payment-methods--logos,
.payment-methods--logos > [role="button"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 2px !important;
}
.payment-methods--logos img {
max-height: 18px !important;
width: auto !important;
flex-shrink: 0;
}
.payment-methods--logos .payment-methods--logos-count {
white-space: nowrap;
font-size: 0.6875rem;
color: #64748b;
flex-shrink: 0;
}
/* Payment label layout — prevent wrapping in narrow right column */
.pranathrive-payment-label {
flex-wrap: nowrap !important;
gap: 0.5rem !important;
overflow: hidden;
}
.pranathrive-payment-label > span.flex-1 {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
.pranathrive-payment-label > .payment-gateway-icon {
flex-shrink: 0;
max-width: 50%;
}
/* ═══════════════════════════════════════════════════
CHECKOUT: Express Checkout sections injected by
plugins above/below the payment methods list
═══════════════════════════════════════════════════ */
#payment .ppcp-button-apm,
#payment .ppc-button-wrapper,
#payment #ppc-button,
#payment #ppc-button-ppcp-gateway,
#payment #wc-stripe-payment-request-wrapper,
#payment #wcpay-payment-request-wrapper,
#payment #wcpay-express-checkout-element,
#payment #wc-stripe-express-checkout-element {
margin-bottom: 1rem;
}
/* ═══════════════════════════════════════════════════
PayPal credit card fields in checkout gateway panel
═══════════════════════════════════════════════════ */
.payment_box .ppcp-credit-card-gateway-card-field,
.payment_box .card-field {
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
background: #fff;
margin-bottom: 0.75rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.payment_box .ppcp-credit-card-gateway-card-field:focus-within,
.payment_box .card-field:focus-within {
border-color: #0e7490;
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}
/* ═══════════════════════════════════════════
Checkout — WC-generated shipping row in order review
(wc_cart_totals_shipping_html outputs its own )
Break out of table-layout:fixed so shipping methods
get full width of the card, not just the 30% column.
═══════════════════════════════════════════ */
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals {
display: block;
width: 100%;
border-bottom: 1px solid #f1f5f9;
padding: 0.75rem 0;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals th {
display: block;
width: 100%;
text-align: left;
padding: 0 0 0.375rem 0;
font-size: 0.875rem;
font-weight: 400;
color: #64748b;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
display: block;
width: 100%;
text-align: left;
padding: 0;
}
/* Ensure tfoot displays properly with mixed block/table rows */
.woocommerce-checkout-review-order-table tfoot {
display: table-row-group;
width: 100%;
}
/* Compact shipping method cards inside the narrow review column */
.woocommerce-checkout-review-order-table #shipping_method li {
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
gap: 0.5rem;
margin-bottom: 0.375rem;
}
.woocommerce-checkout-review-order-table #shipping_method label {
font-size: 0.8125rem;
color: #334155;
}
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td .amount {
font-weight: 600;
color: #0e7490;
}
/* Paragraphs inside checkout shipping (e.g. "Enter address" message) */
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td p {
margin: 0;
padding: 0.25rem 0;
font-size: 0.8125rem;
color: #64748b;
line-height: 1.5;
background: none;
border: none;
}
/* ═══════════════════════════════════════════
Checkout — WCPay Express Checkout Wrapper
(Apple Pay / Google Pay at top of checkout form)
═══════════════════════════════════════════ */
.wcpay-express-checkout-wrapper {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.wcpay-express-checkout-wrapper:empty,
.wcpay-express-checkout-wrapper:has(> :only-child[style*="display:none"]):not(:has(#wcpay-express-checkout-element *)) {
display: none;
}
/* WCPay separator ("— OR —") */
#wcpay-express-checkout-button-separator {
display: flex !important;
align-items: center;
gap: 1rem;
margin: 1rem 0 0;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
}
#wcpay-express-checkout-button-separator::before,
#wcpay-express-checkout-button-separator::after {
content: '';
flex: 1;
height: 1px;
background: #e2e8f0;
}
/* When separator is hidden by plugin, respect it */
#wcpay-express-checkout-button-separator[style*="display:none"],
#wcpay-express-checkout-button-separator[style*="display: none"] {
display: none !important;
}
/* ═══════════════════════════════════════════
Checkout — Payment buttons after Place Order
(PayPal, Apple Pay, Google Pay injected via hooks)
═══════════════════════════════════════════ */
#ppc-button-ppcp-applepay,
#ppc-button-ppcp-googlepay,
#woo_pp_ec_button_checkout {
margin-top: 0.75rem;
}
/* ═══════════════════════════════════════════
Checkout — Hide WC default coupon toggle notice
(We have our own styled banner in form-coupon.php)
═══════════════════════════════════════════ */
.woocommerce-form-coupon-toggle {
display: none !important;
}
/* ═══════════════════════════════════════════
Checkout — Coupon form inside our custom panel
(Override WC's JS which hides form.checkout_coupon)
═══════════════════════════════════════════ */
#coupon-form-panel .checkout_coupon,
#coupon-form-panel .woocommerce-form-coupon {
display: block !important;
}
/* ═══════════════════════════════════════════
Checkout — WooCommerce Payments card fields
(Stripe Elements iframe containers)
═══════════════════════════════════════════ */
.payment_method_woocommerce_payments .payment_box .wc-payment-elements-field,
.payment_method_woocommerce_payments .payment_box #wc-card-element,
.payment_method_woocommerce_payments .payment_box .wc-block-components-text-input {
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
background: #fff;
margin-bottom: 0.75rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.payment_method_woocommerce_payments .payment_box .wc-payment-elements-field:focus-within {
border-color: #0e7490;
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15);
}
/* ═══════════════════════════════════════════
Checkout — Shipping info/notice paragraphs
on the checkout page (from WP page editor)
═══════════════════════════════════════════ */
body.woocommerce-checkout > p.has-text-align-center {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
border: 1px solid #a7f3d0;
border-radius: 0.75rem;
font-size: 0.875rem;
line-height: 1.7;
color: #1e293b;
margin-bottom: 0.5rem;
}
body.woocommerce-checkout > p.has-text-align-center:first-of-type {
margin-top: 1.5rem;
}
body.woocommerce-checkout > p.has-text-align-center strong {
color: #059669;
font-weight: 700;
}
/* ═══════════════════════════════════════════
Checkout — WC update_order_review overlay fix
Prevent order review from shifting/overflowing
═══════════════════════════════════════════ */
.woocommerce-checkout-review-order {
position: relative;
}
.woocommerce-checkout #order_review {
position: relative;
}
/* ═══════════════════════════════════════════
Checkout — "Ship to different address" toggle
CSS fallback for toggle switch knob position.
Tailwind peer-checked:translate-x-5 handles this,
but we add a raw CSS rule as a safety net.
═══════════════════════════════════════════ */
#ship-to-different-address-checkbox:checked ~ span:last-child {
transform: translateX(1.25rem);
}
#ship-to-different-address-checkbox:checked ~ span:first-of-type {
background-color: #0e7490;
}
/* ═══════════════════════════════════════════
Checkout — Grid column containment
Prevent long text or wide elements from
overflowing the 3-column grid layout
═══════════════════════════════════════════ */
form.checkout.woocommerce-checkout {
min-width: 0;
}
form.checkout.woocommerce-checkout > .lg\:col-span-2,
form.checkout.woocommerce-checkout > .lg\:col-span-1 {
min-width: 0;
}
/* ─── CRITICAL: Error notices inside checkout grid ───
WC's checkout.min.js prepends