/* PRISM Simple Checkout — Classic + Blocks shared surface
 * Themes: .psc-checkout--theme-dark | .psc-checkout--theme-light
 * Tokens set per theme; components use var(--psc-*).
 */

.psc-checkout {
  --psc-gap: 1rem;
  display: grid;
  gap: var(--psc-gap);
  margin: 0.5rem 0 1rem;
  padding: 1rem 1.1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--psc-border);
  background: var(--psc-surface);
  color: var(--psc-text);
  box-sizing: border-box;
}

/* ---------- Dark theme (default for dark storefronts) ---------- */
.psc-checkout--theme-dark {
  --psc-surface: #141210;
  --psc-surface-2: #1e1b17;
  --psc-text: #f7f3ea;
  --psc-text-muted: #d4cbb8;
  --psc-border: rgba(247, 243, 234, 0.28);
  --psc-accent: #d4af37;
  --psc-accent-text: #1a1508;
  --psc-banner-bg: #2a2210;
  --psc-banner-border: #c9a227;
  --psc-banner-text: #fff8e7;
  --psc-input-bg: #0c0b09;
  --psc-input-text: #fffdf8;
  --psc-input-border: rgba(247, 243, 234, 0.45);
  --psc-success: #8fd6a8;
  --psc-success-bg: rgba(46, 125, 70, 0.25);
  --psc-error: #ffb4a8;
  --psc-error-bg: rgba(140, 40, 30, 0.35);
  --psc-focus: #e8c547;
}

/* ---------- Light theme ---------- */
.psc-checkout--theme-light {
  --psc-surface: #ffffff;
  --psc-surface-2: #f6f4ef;
  --psc-text: #1a1714;
  --psc-text-muted: #4a453c;
  --psc-border: rgba(26, 23, 20, 0.16);
  --psc-accent: #8a6d12;
  --psc-accent-text: #ffffff;
  --psc-banner-bg: #fff7df;
  --psc-banner-border: #b8921a;
  --psc-banner-text: #1a1714;
  --psc-input-bg: #ffffff;
  --psc-input-text: #1a1714;
  --psc-input-border: rgba(26, 23, 20, 0.35);
  --psc-success: #0d6b35;
  --psc-success-bg: #e5f6eb;
  --psc-error: #9b1c1c;
  --psc-error-bg: #fde8e8;
  --psc-focus: #8a6d12;
}

.psc-checkout--stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--psc-gap);
  width: 100%;
}

.psc-checkout-root {
  width: 100%;
  margin: 0 0 1rem;
}

/* LAYOUT (1.0.10.12): in Standard layout the shell lives inside #order_review, above #payment.
 * Neutralise any theme flex/grid ordering it might inherit and give it breathing room. */
form.checkout.psc-layout-standard #order_review > .psc-checkout-root,
form.checkout.psc-layout-standard #order_review > #psc-checkout {
  order: 0;
  width: 100%;
  margin: 1rem 0;
}

.psc-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.psc-wordmark {
  max-width: 140px;
  height: auto;
  display: block;
}

/* Dark theme → white/light wordmark; light theme → black Groundsetter wordmark */
.psc-checkout--theme-dark .psc-wordmark--light,
.psc-checkout--theme-light .psc-wordmark--dark {
  display: none !important;
}

.psc-checkout--theme-dark .psc-wordmark--dark,
.psc-checkout--theme-light .psc-wordmark--light {
  display: block !important;
}

.psc-secure-heading {
  font-weight: 600;
  margin: 0;
  color: var(--psc-text);
  font-size: 1.05rem;
}

/* ---------- Step 1 banner ---------- */
.psc-step-banner {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--psc-banner-border);
  background: var(--psc-banner-bg);
  color: var(--psc-banner-text);
}

.psc-step-banner__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--psc-banner-text);
  opacity: 0.95;
}

.psc-step-banner__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--psc-banner-text);
}

.psc-step-banner__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--psc-banner-text);
}

/* ---------- Email / OTP gate ---------- */
.psc-research-gate {
  display: grid;
  gap: 0.85rem;
}

.psc-email-gate {
  display: grid;
  gap: 0.45rem;
  max-width: 28rem;
}

.psc-gate-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--psc-text) !important;
  margin: 0.25rem 0 0;
}

.psc-gate-help {
  margin: 0;
  font-size: 0.9rem;
  color: var(--psc-text-muted) !important;
  line-height: 1.35;
}

.psc-email-gate input[type="email"],
.psc-email-gate input[type="text"],
.psc-gate-email-input,
.psc-gate-code-input {
  width: 100%;
  max-width: 28rem;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--psc-input-text) !important;
  background: var(--psc-input-bg) !important;
  border: 1.5px solid var(--psc-input-border) !important;
  border-radius: 8px;
  opacity: 1 !important;
}

.psc-email-gate input:focus,
.psc-gate-email-input:focus,
.psc-gate-code-input:focus {
  outline: 2px solid var(--psc-focus);
  outline-offset: 1px;
}

.psc-btn-primary {
  justify-self: start;
  margin-top: 0.15rem;
  background: var(--psc-accent) !important;
  color: var(--psc-accent-text) !important;
  border-color: var(--psc-accent) !important;
  font-weight: 600;
}

.psc-otp-status {
  margin: 0.15rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.psc-otp-status[hidden] {
  display: none !important;
}

.psc-otp-status--success {
  color: var(--psc-success) !important;
  background: var(--psc-success-bg);
  border: 1px solid var(--psc-success);
}

.psc-otp-status--error {
  color: var(--psc-error) !important;
  background: var(--psc-error-bg);
  border: 1px solid var(--psc-error);
}

.psc-otp-status--info {
  color: var(--psc-text) !important;
  background: var(--psc-surface-2);
  border: 1px solid var(--psc-border);
}

.psc-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--psc-text) !important;
}

.psc-remember-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--psc-text-muted) !important;
}

.psc-attestation details {
  margin: 0.25rem 0;
}

.psc-attestation summary {
  color: var(--psc-text);
  cursor: pointer;
  font-weight: 600;
}

.psc-terms-copy {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.85rem;
  max-height: 8rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--psc-border);
  background: var(--psc-surface-2);
  color: var(--psc-text);
  border-radius: 8px;
}

.psc-order-slot:empty {
  display: none;
}

.psc-order-slot:not(:empty) {
  margin: 0.5rem 0;
}

.psc-wallet-stage {
  min-height: 48px;
  margin: 12px 0;
}

.psc-wallet-stage:not([hidden]) {
  margin-top: 0.75rem;
}

.psc-card-toggle {
  width: 100%;
  max-width: 28rem;
}

.psc-card-stage {
  margin-top: 0.75rem;
}

.psc-payment-stage {
  display: grid;
  gap: 0.75rem;
}

.psc-payment-message[hidden],
.psc-payment-stage[hidden],
.psc-wallet-stage[hidden],
.psc-card-stage[hidden],
.psc-card-toggle[hidden],
.psc-remember-note[hidden] {
  display: none !important;
}

.psc-payment-message {
  margin: 0.35rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--psc-error) !important;
  background: var(--psc-error-bg);
  border: 1px solid var(--psc-error);
}

.psc-payment-message--success {
  color: var(--psc-success) !important;
  background: var(--psc-success-bg);
  border-color: var(--psc-success);
}

/* Blocks alert: beat theme/[role=alert] error paint. Verified copy must stay green. */
#psc-blocks-alert.psc-payment-message--success {
  color: #0d6b35 !important;
  background: #e5f6eb !important;
  border: 1px solid #0d6b35 !important;
}
.psc-checkout--theme-dark #psc-blocks-alert.psc-payment-message--success {
  color: #8fd6a8 !important;
  background: rgba(46, 125, 70, 0.25) !important;
  border-color: #8fd6a8 !important;
}

.psc-payment-message--footer {
  margin-top: 0.75rem;
}

/* ---------- Woo notices readable under PSC themes (contrast ≥ 4.5) ----------
 * Notices often render outside .psc-checkout (top of form.checkout / notice wrapper).
 * Scope via body:has(.psc-checkout--theme-*) so dark storefronts get dark-readable errors.
 */
body:has(.psc-checkout--theme-dark) .woocommerce-error,
body:has(.psc-checkout--theme-dark) .woocommerce-message,
body:has(.psc-checkout--theme-dark) .woocommerce-info,
body:has(.psc-checkout--theme-dark) .woocommerce-NoticeGroup .woocommerce-error,
body:has(.psc-checkout--theme-dark) .woocommerce-NoticeGroup .woocommerce-message,
body:has(.psc-checkout--theme-dark) .woocommerce-NoticeGroup .woocommerce-info,
body:has(.psc-checkout--theme-dark) .woocommerce-notices-wrapper .woocommerce-error,
body:has(.psc-checkout--theme-dark) .woocommerce-notices-wrapper .woocommerce-message,
body:has(.psc-checkout--theme-dark) .woocommerce-notices-wrapper .woocommerce-info,
.psc-checkout--theme-dark .woocommerce-error,
.psc-checkout--theme-dark .woocommerce-message,
.psc-checkout--theme-dark .woocommerce-info {
  background: #3d1512 !important;
  color: #ffe8e4 !important;
  border: 1px solid #ffb4a8 !important;
  border-left-width: 4px !important;
  border-radius: 8px;
  padding: 0.85rem 1rem !important;
  font-weight: 600;
  list-style: none;
  opacity: 1 !important;
}

body:has(.psc-checkout--theme-dark) .woocommerce-message,
body:has(.psc-checkout--theme-dark) .woocommerce-NoticeGroup .woocommerce-message,
.psc-checkout--theme-dark .woocommerce-message {
  background: #143d22 !important;
  color: #d8f5e2 !important;
  border-color: #8fd6a8 !important;
}

body:has(.psc-checkout--theme-dark) .woocommerce-info,
body:has(.psc-checkout--theme-dark) .woocommerce-NoticeGroup .woocommerce-info,
.psc-checkout--theme-dark .woocommerce-info {
  background: #1a2433 !important;
  color: #dce9ff !important;
  border-color: #8eb4ff !important;
}

body:has(.psc-checkout--theme-dark) .woocommerce-error li,
body:has(.psc-checkout--theme-dark) .woocommerce-message li,
body:has(.psc-checkout--theme-dark) .woocommerce-info li,
body:has(.psc-checkout--theme-dark) .woocommerce-error a,
body:has(.psc-checkout--theme-dark) .woocommerce-message a,
body:has(.psc-checkout--theme-dark) .woocommerce-info a,
.psc-checkout--theme-dark .woocommerce-error li,
.psc-checkout--theme-dark .woocommerce-message li,
.psc-checkout--theme-dark .woocommerce-info li,
.psc-checkout--theme-dark .woocommerce-error a,
.psc-checkout--theme-dark .woocommerce-message a,
.psc-checkout--theme-dark .woocommerce-info a {
  color: inherit !important;
  opacity: 1 !important;
}

body:has(.psc-checkout--theme-light) .woocommerce-error,
body:has(.psc-checkout--theme-light) .woocommerce-NoticeGroup .woocommerce-error,
body:has(.psc-checkout--theme-light) .woocommerce-notices-wrapper .woocommerce-error,
.psc-checkout--theme-light .woocommerce-error {
  background: #fde8e8 !important;
  color: #7a1212 !important;
  border: 1px solid #c0392b !important;
  border-left-width: 4px !important;
  border-radius: 8px;
  padding: 0.85rem 1rem !important;
  font-weight: 600;
  list-style: none;
  opacity: 1 !important;
}

body:has(.psc-checkout--theme-light) .woocommerce-message,
body:has(.psc-checkout--theme-light) .woocommerce-NoticeGroup .woocommerce-message,
.psc-checkout--theme-light .woocommerce-message {
  background: #e5f6eb !important;
  color: #0a4d28 !important;
  border: 1px solid #0d6b35 !important;
  border-left-width: 4px !important;
  border-radius: 8px;
  padding: 0.85rem 1rem !important;
  font-weight: 600;
}

body:has(.psc-checkout--theme-light) .woocommerce-info,
body:has(.psc-checkout--theme-light) .woocommerce-NoticeGroup .woocommerce-info,
.psc-checkout--theme-light .woocommerce-info {
  background: #e8f0fe !important;
  color: #123a7a !important;
  border: 1px solid #1a56c4 !important;
  border-left-width: 4px !important;
  border-radius: 8px;
  padding: 0.85rem 1rem !important;
  font-weight: 600;
}

body:has(.psc-checkout--theme-light) .woocommerce-error li,
body:has(.psc-checkout--theme-light) .woocommerce-message li,
body:has(.psc-checkout--theme-light) .woocommerce-info li,
body:has(.psc-checkout--theme-light) .woocommerce-error a,
body:has(.psc-checkout--theme-light) .woocommerce-message a,
body:has(.psc-checkout--theme-light) .woocommerce-info a,
.psc-checkout--theme-light .woocommerce-error li,
.psc-checkout--theme-light .woocommerce-message li,
.psc-checkout--theme-light .woocommerce-info li {
  color: inherit !important;
  opacity: 1 !important;
}

.psc-payment-fields-note {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--psc-text-muted);
}

/* High-contrast labels / checkboxes */
.psc-checkout label,
.psc-remember,
.psc-attestation label {
  color: var(--psc-text) !important;
  font-size: 15px;
  opacity: 1 !important;
}

.psc-checkout input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--psc-accent);
  opacity: 1 !important;
  flex-shrink: 0;
}

.psc-checkout .psc-email-gate p,
.psc-checkout .psc-secure-heading {
  color: var(--psc-text);
}

.psc-native-fallback .psc-express-element {
  display: none;
}

/* When gate owns email, hide Woo's duplicate billing email row */
form.checkout.psc-gate-owns-email #billing_email_field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
 * Wallet-first progressive disclosure
 *
 * LAYOUT (1.0.10.12): every rule here is also switched off under .psc-layout-standard, the
 * gateway's "Standard" layout, where billing/shipping stay in WooCommerce's normal position.
 * Deliberately NOT applied to the express-element rule above: Standard keeps wallets.
 * -------------------------------------------------------------------------- */

form.checkout.psc-wallet-ready:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-billing-fields__field-wrapper > p:not(.validate-email),
form.checkout.psc-gate-incomplete:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-billing-fields__field-wrapper > p:not(.validate-email) {
  display: none !important;
}

/* If gate owns email, do not force-show Woo email field in the billing column */
form.checkout.psc-gate-owns-email.psc-gate-incomplete:not(.psc-native-fallback):not(.psc-layout-standard) #billing_email_field,
form.checkout.psc-gate-owns-email.psc-wallet-ready:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard) #billing_email_field {
  /* still sr-only via psc-gate-owns-email rule above */
}

form.checkout:not(.psc-gate-owns-email).psc-gate-incomplete:not(.psc-native-fallback):not(.psc-layout-standard) #billing_email_field,
form.checkout:not(.psc-gate-owns-email).psc-wallet-ready:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard) #billing_email_field {
  display: block !important;
}

form.checkout.psc-gate-incomplete:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-billing-fields > h3,
form.checkout.psc-wallet-ready:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-billing-fields > h3 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Wallet-first hides the native shipping / additional field blocks because the wallet
 * sheet collects that data. FIX (1.0.10.10): .woocommerce-additional-fields is ALSO where a
 * merchant's own checkout fields render. Hiding a container that holds a REQUIRED field
 * blocks the order with a validation error for something the buyer cannot see or fill —
 * a hard checkout failure. classic-checkout.js marks such containers .psc-keep-native. */
form.checkout.psc-wallet-ready:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-shipping-fields:not(.psc-keep-native),
form.checkout.psc-wallet-ready:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-additional-fields:not(.psc-keep-native),
form.checkout.psc-gate-incomplete:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-shipping-fields:not(.psc-keep-native),
form.checkout.psc-gate-incomplete:not(.psc-card-mode):not(.psc-native-fallback):not(.psc-layout-standard)
  .woocommerce-additional-fields:not(.psc-keep-native) {
  display: none !important;
}

form.checkout.psc-gate-incomplete #order_review,
form.checkout.psc-wallet-ready #order_review {
  visibility: visible;
}

.psc-checkout #order_review,
.psc-checkout .woocommerce-checkout-review-order-table {
  color: var(--psc-text);
}

/* Order-review table — fully token-themed. Merchant themes paint these rows
 * (white zebra + dark text) with high-specificity rules; without owning the
 * backgrounds here, the dark skin renders theme-light rows under --psc-text
 * and the table washes out. !important is deliberate: this container must win
 * over arbitrary merchant themes on heterogeneous installs. */
.psc-checkout #order_review table.shop_table,
.psc-checkout table.woocommerce-checkout-review-order-table {
  background: var(--psc-surface) !important;
  color: var(--psc-text) !important;
  border-color: var(--psc-border) !important;
}
.psc-checkout #order_review table.shop_table tr,
.psc-checkout #order_review table.shop_table th,
.psc-checkout #order_review table.shop_table td,
.psc-checkout table.woocommerce-checkout-review-order-table tr,
.psc-checkout table.woocommerce-checkout-review-order-table th,
.psc-checkout table.woocommerce-checkout-review-order-table td {
  background: var(--psc-surface) !important;
  color: var(--psc-text) !important;
  border-color: var(--psc-border) !important;
}
.psc-checkout #order_review table.shop_table thead th,
.psc-checkout #order_review table.shop_table tfoot th,
.psc-checkout #order_review table.shop_table tfoot .order-total th,
.psc-checkout #order_review table.shop_table tfoot .order-total td,
.psc-checkout table.woocommerce-checkout-review-order-table thead th,
.psc-checkout table.woocommerce-checkout-review-order-table tfoot th,
.psc-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th,
.psc-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
  background: var(--psc-surface-2) !important;
}
.psc-checkout #order_review table.shop_table a,
.psc-checkout #order_review table.shop_table strong,
.psc-checkout #order_review table.shop_table .amount,
.psc-checkout #order_review table.shop_table .product-quantity,
.psc-checkout table.woocommerce-checkout-review-order-table a,
.psc-checkout table.woocommerce-checkout-review-order-table strong,
.psc-checkout table.woocommerce-checkout-review-order-table .amount,
.psc-checkout table.woocommerce-checkout-review-order-table .product-quantity {
  color: inherit !important;
}
.psc-checkout #order_review ul#shipping_method li,
.psc-checkout #order_review ul#shipping_method label {
  color: var(--psc-text) !important;
}

/* --------------------------------------------------------------------------
 * UI simplify — gateway chrome hide, place order under card, remember callout
 * -------------------------------------------------------------------------- */

/* Sole/PSC-selected: hide gateway radio list + titles; keep input postable */
/* Only hide gateway radios when PSC is the sole method (class applied only then). */
form.checkout.psc-hide-gateway-chrome ul.wc_payment_methods,
form.checkout.psc-hide-gateway-chrome .wc_payment_methods,
form.checkout.psc-hide-gateway-chrome .payment_methods {
  display: none !important;
}
/* Multi-gateway: shell hidden while another method is selected (hidden attr + class). */
#psc-checkout-root[hidden],
#psc-checkout[hidden],
form.checkout:not(.psc-gateway-selected) #psc-checkout-root {
  display: none !important;
}
form.checkout.psc-hide-gateway-chrome #payment > .wc_payment_methods + .form-row,
form.checkout.psc-hide-gateway-chrome #payment .payment_box {
  background: transparent;
  border: 0;
  padding-top: 0;
}
form.checkout.psc-hide-gateway-chrome .psc-payment-fields-note,
form.checkout.psc-hide-gateway-chrome .psc-gateway-description {
  display: none !important;
}
/* Visually hide the payment method heading if theme prints one above the list */
form.checkout.psc-hide-gateway-chrome #payment .payment_method_psc > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Remember callout — light */
.psc-checkout--theme-light .psc-remember-callout {
  --psc-remember-bg: #fff6cc;
  --psc-remember-border: #d4a017;
  --psc-remember-text: #1a1714;
}
/* Remember callout — dark */
.psc-checkout--theme-dark .psc-remember-callout {
  --psc-remember-bg: #3a3018;
  --psc-remember-border: #e0b84a;
  --psc-remember-text: #fff8e7;
}
.psc-remember-callout {
  display: block;
  margin: 0.5rem 0;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 1.5px solid var(--psc-remember-border, #d4a017);
  background: var(--psc-remember-bg, #fff6cc);
  color: var(--psc-remember-text, #1a1714);
  max-width: 28rem;
  box-sizing: border-box;
}
.psc-remember-callout .psc-remember {
  color: inherit !important;
  margin: 0;
  gap: 0.6rem;
  align-items: flex-start;
  line-height: 1.35;
  font-weight: 600;
}

/* Place order under card — only the row owned under #psc-card-stage is the surface.
 * Do NOT promote #payment .form-row.place-order (Woo fragment) as a second visible row.
 * DOM ownership removes duplicates; this CSS belt never dual-styles both. */
#psc-card-stage + .form-row.place-order {
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0;
  float: none;
}
/* Belt (after JS ownership class): hide any place-order still under #payment.
 * Primary fix is DOM removal in placeOrderUnderCard — not this rule alone. */
form.checkout.psc-place-order-owned #payment .form-row.place-order {
  display: none !important;
}
#psc-card-stage + .form-row.place-order #place_order,
#psc-card-stage + .form-row.place-order button[name="woocommerce_checkout_place_order"],
#psc-card-stage + .form-row.place-order input[name="woocommerce_checkout_place_order"] {
  width: 100% !important;
  min-height: 48px;
  font-weight: 700;
  float: none !important;
}
#psc-card-stage {
  position: static;
  display: block;
}
#psc-card-stage[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .psc-card-toggle,
  .psc-remember-callout,
  #psc-card-stage + .form-row.place-order #place_order {
    max-width: none;
    width: 100%;
  }
  .psc-email-gate {
    max-width: none;
  }
}