/* ============================================================
   Two-Step Checkout (Template 4) — matches checkoutAbilling.html
   ("2-Step Checkout — Template A (with billing)"), the pixel reference.

   Loaded on BOTH the front end and the block editor (enqueue_block_assets)
   so the editor preview mirrors the front end. EVERYTHING is scoped to
   .scp-checkout-template-4 so the older checkout templates are untouched.
   Step visibility is driven by the root step-state classes
   (.scp-on-step-1 / .scp-on-step-2) set by scp-checkout.js / the editor ext.

   Reference tokens are copied verbatim; the ONLY intentional deviation is the
   brand/primary colour, which stays the merchant's own checkout primary var
   (--scp-checkout-primary-bg-color) so merchant branding keeps working — the
   reference indigo #4f46e5 is just the fallback.
   ============================================================ */
.scp-checkout-template-4 {
    --t4-ink: #1a1a2e;
    --t4-muted: #6b7280;
    --t4-line: #e5e7eb;
    /* Field borders are deliberately darker than --t4-line (which is for hairline
       dividers and card edges) so the inputs read as filled-in targets. */
    --t4-field-line: #cbd5e1;
    --t4-bg: #f4f5f8;
    /* Card background is merchant-configurable (Checkout editor → Card background);
       the render callback emits --scp-checkout-card-bg-color, default #ffffff. */
    --t4-card: var(--scp-checkout-card-bg-color, #ffffff);
    --t4-brand: var(--scp-checkout-primary-bg-color, #4f46e5);
    --t4-brand-text: var(--scp-checkout-primary-text-color, #ffffff);
    --t4-brand-soft: #eef2ff;
    --t4-brand-soft: color-mix(in srgb, var(--t4-brand) 12%, #fff);
    --t4-green: #16a34a;
    --t4-green-soft: #ecfdf5;
    --t4-radius: 14px;
    --t4-shadow: 0 1px 3px rgba(16, 24, 40, .04);

    color: var(--t4-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

/* Page width: driven by the block's own width control (checkout_width, emitted as
   --scp-checkout-width by the render callback / block edit) so the merchant sizes
   it the block way instead of a hard-coded cap. Falls back to 1100px (wider than
   the old 960 reference) when the var is somehow unset. The cards sit on the page
   background; no wrapper "card". */
.scp-checkout-template-4 #scp-checkout { background: transparent; padding: 0; border: none; }
.scp-checkout-template-4 .scp-container {
    max-width: var(--scp-checkout-width, 1100px); margin: 0 auto;
    border: none !important; box-shadow: none !important; background: transparent;
}

/* Anti-FOUC: hide the checkout until scp-checkout.js has injected the step chrome
   and wrapped the panels (it then removes .scp-two-step-init). The animation is a
   fallback that reveals after 2s even if the JS never runs, so the checkout can
   never stay permanently hidden. */
.scp-checkout-template-4.scp-two-step-init { opacity: 0; animation: scpTwoStepReveal .01s linear 2s forwards; }
@keyframes scpTwoStepReveal { to { opacity: 1; } }

/* ---------- Progress header ----------
   Reference: max-width 460px, mb 34; circles 42px/2px border; line max 120px
   /3px; step 130px wide, 9px gap; labels 13/700. */
.scp-checkout-template-4 .scp-step-indicator {
    display: flex; align-items: flex-start; justify-content: center;
    max-width: 460px; margin: 0 auto 20px;
}
.scp-checkout-template-4 .scp-step-node {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    width: 130px; text-align: center;
    background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.scp-checkout-template-4 .scp-step-node:focus { outline: none; }
.scp-checkout-template-4 .scp-step-dot {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    background: #fff; border: 2px solid var(--t4-line); color: var(--t4-muted);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transition: .25s;
}
.scp-checkout-template-4 .scp-step-name {
    font-size: 15px; font-weight: 700; color: var(--t4-muted); transition: .25s;
}
.scp-checkout-template-4 .scp-step-node.is-active .scp-step-dot {
    background: var(--t4-brand); border-color: var(--t4-brand); color: var(--t4-brand-text);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}
.scp-checkout-template-4 .scp-step-node.is-active .scp-step-name { color: var(--t4-ink); }
.scp-checkout-template-4 .scp-step-node.is-done .scp-step-dot {
    background: var(--t4-green); border-color: var(--t4-green); color: #fff;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .3);
}
.scp-checkout-template-4 .scp-step-node.is-done .scp-step-name { color: var(--t4-ink); }
.scp-checkout-template-4 .scp-step-line {
    flex: 1; max-width: 120px; height: 3px; border-radius: 3px;
    background: var(--t4-line); margin: 20px 6px 0; transition: .25s;
}
.scp-checkout-template-4 .scp-step-line.is-done { background: var(--t4-green); }

/* ---------- Step-2 greeting banner ----------
   Full-width message shown below the step indicator once the buyer reaches step 2
   (Payment). Injected by scp-checkout.js (and the editor extension) just above the
   two-column grid; [name] is filled from the first-name field. First line is the
   heading, the rest is sub-text. Merchant-configurable + toggleable via the block's
   Two-Step settings. Hidden on step 1 by the .scp-on-step-1 rule below. */
.scp-checkout-template-4 .scp-step2-greeting {
    background: #f8fafc;
    border: 1px solid var(--t4-line);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 20px;
}
.scp-checkout-template-4 .scp-step2-greeting-title {
    font-size: 15px; font-weight: 700; color: var(--t4-ink); margin: 0; line-height: 1.35;
}
.scp-checkout-template-4 .scp-step2-greeting-sub {
    font-size: 13px; color: var(--t4-muted); margin: 4px 0 0; line-height: 1.5;
}
.scp-checkout-template-4.scp-on-step-1 .scp-step2-greeting { display: none; }

/* ---------- Two-column grid ----------
   Columns are TOP-aligned (align-items:flex-start), not stretched, so the left
   (form) column can be shorter than the right and STICK while the taller right
   column (summary + plans + order bump) scrolls past it. !important beats
   WordPress' inline column flex-basis. */
.scp-checkout-template-4 .wp-block-columns {
    display: flex; gap: 24px !important; align-items: flex-start; margin: 0;
}
/* The columns themselves must stay transparent: the checkout's per-page design
   settings emit an inline `.scp-left-part-checkout { background-color: #fff }`,
   which painted a square white block directly behind the rounded step-1 card
   (its corners poked out past the card radius) and, in step 2, flooded the whole
   column white so the payment/billing panels stopped reading as separate cards.
   In this template the CARD provides the surface, never the column. */
.scp-checkout-template-4 .scp-left-part-checkout,
.scp-checkout-template-4 .scp-right-part-checkout { background: transparent; }
/* Column split: 55% form (left) / 45% summary + order bump (right). flex-basis 0
   with grow 55:45 makes the ratio exact regardless of content, and !important
   beats WordPress' inline column flex-basis. */
/* Left (form) column sticks to the top while the taller right column scrolls. */
.scp-checkout-template-4 .scp-left-part-checkout {
    flex: 55 1 0 !important; min-width: 0; padding: 0;
    position: sticky; top: 20px; align-self: flex-start;
}
.scp-checkout-template-4 .scp-right-part-checkout {
    flex: 45 1 0 !important; min-width: 0; padding: 0;
    display: flex; flex-direction: column;
}
/* The block's own stylesheet (build/checkout/form/style-index.css) sets
   `margin-left/right: auto` on EVERY direct child of the checkout columns. The
   right column is a flex column and #scp-checkout-cart-summary is display:flex, so
   those auto cross-axis margins shrank the cart-summary card to its content width
   and centred it — it came out far narrower than its column (and than the order
   bump, whose content is simply wider). Zero the side margins so the summary and
   order bump stretch to fill the widened column. !important beats the block rule's
   high (1 id + 4 class) specificity. */
.scp-checkout-template-4 #scp-checkout .scp-right-part-checkout > * {
    margin-left: 0 !important; margin-right: 0 !important;
}

/* ---------- Cards & panels ----------
   Reference: STEP 1 is a .card (radius 14, padding 24, shadow); the summary is
   a .card too. STEP 2 is NOT a card — it is two .panel boxes (Payment method,
   Billing address). Panels: border 1px, radius 12, padding 18, mb 14, shadow. */
.scp-checkout-template-4 .scp-step-pane-1,
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-order-summary {
    background: var(--t4-card);
    border: 1px solid var(--t4-line);
    box-shadow: var(--t4-shadow);
    border-radius: var(--t4-radius);
    padding: 28px;
}
/* Step 2 is a plain container — the two .scp-step2-panel boxes provide the
   framing. The panels ship in the block markup (wp:group) so the editor preview
   and the front end render the SAME structure/styles. */
.scp-checkout-template-4 .scp-step-pane-2 {
    background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0;
}
.scp-checkout-template-4 .scp-step2-panel {
    border: 1px solid var(--t4-line); border-radius: 12px;
    padding: 18px; background: var(--t4-card); margin-bottom: 14px; box-shadow: var(--t4-shadow);
}
/* Billing is OFF by default in this template (collect_billing_details:false), so
   the billing block renders nothing. Hide the empty .scp-bill-panel card (no
   "Billing Address" heading) so no blank bordered box shows. When the merchant
   turns billing back on the heading returns and the card shows again. */
.scp-checkout-template-4 .scp-bill-panel:not(:has(.scp-checkout-section-heading)) { display: none; }
/* Editor preview: the block's editor bundle resets
   `.scp-left-part-checkout .wp-block { padding: 0 }` at the SAME specificity as the
   shared pane-1 card rule and loads later, so the Contact card loses its 24px
   padding in the editor. (`.wp-block` is editor-only, so the front end is fine.)
   Restate it with higher specificity for the preview. */
.scp-checkout-template-4.scp-editor-preview .scp-step-pane-1 {
    /* Kept in step with the shared card padding above (raised 24 -> 28px), so the
       preview card isn't tighter than the front-end one. */
    padding: 28px;
}
/* Editor preview: the front end wraps step 2 into separate .scp-step2-panel cards
   at runtime (scp-checkout.js wrapAll), but the editor MUST NOT restructure
   Gutenberg's React tree. So instead of a single fallback card, frame the block's
   OWN section wrappers (Payments / Billing) as separate cards — giving the same
   "each section is its own card" look the front end produces. */
.scp-checkout-template-4.scp-editor-preview .scp-step-pane-2:not(:has(.scp-step2-panel)) {
    background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0;
}
.scp-checkout-template-4.scp-editor-preview .scp-step-pane-2 .wp-block-smart-creator-press-checkout-payments,
.scp-checkout-template-4.scp-editor-preview .scp-step-pane-2 .wp-block-smart-creator-press-checkout-billing {
    border: 1px solid var(--t4-line); border-radius: 12px;
    padding: 18px; background: var(--t4-card); margin-bottom: 14px; box-shadow: var(--t4-shadow);
}
/* Each heading now sits at the top of its own card — drop the inter-section divider. */
.scp-checkout-template-4.scp-editor-preview .scp-step-pane-2 .scp-checkout-section-heading {
    margin-top: 0; padding-top: 0; border-top: 0;
}
/* (The emoji ::before that used to give the payment section head a 💳 here is
   gone: step-2 head icons are inline SVG in a .scp-ref-ico span now, injected by
   scp-checkout-editor.js — card for the payments section, pin for billing — so
   the preview matches the front end without depending on an emoji font. The
   shared ::before rule this used to build on no longer exists either.) */
/* Hide the shipping-address sub-section in the editor preview to match the front
   end (which hides .scp-form-shipping). The editor's billing block renders the
   shipping fields as flat siblings WITHOUT that wrapper class, led by the "Use
   same as billing address" checkbox — so hide that checkbox and every sibling
   after it (the Shipping heading + fields). */
.scp-checkout-template-4.scp-editor-preview .wp-block-smart-creator-press-checkout-billing .components-checkbox-control,
.scp-checkout-template-4.scp-editor-preview .wp-block-smart-creator-press-checkout-billing .components-checkbox-control ~ * {
    display: none;
}

/* Panel head (Payment method / Billing address) — reference .panel-head. */
.scp-checkout-template-4 .scp-ref-panel-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 800; margin-bottom: 16px; color: var(--t4-ink);
}
.scp-checkout-template-4 .scp-ref-ico {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--t4-brand-soft); color: var(--t4-brand);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.scp-checkout-template-4 .scp-ref-ico svg { width: 16px; height: 16px; }

/* ---------- Step-1 heading / sub ---------- */
/* padding-bottom is zeroed because the base sheet puts 5px on every
   h3.scp-checkout-section-heading (smart-creator-press-public.css:2259), which
   pushed the sub away from the heading it belongs to. */
.scp-checkout-template-4 .scp-step-pane-1 .scp-checkout-section-heading {
    font-size: 19px; font-weight: 750; margin: 0 0 2px; padding-bottom: 0;
    color: var(--t4-ink); line-height: 1.25; letter-spacing: -.01em;
}
/* Heading + sub read as one header block, closed off from the fields by a
   hairline rule. #scp-checkout is in the selector because `body #scp-checkout p`
   (base :3014) is an ID selector that otherwise wins and drops the 13px size,
   the bottom margin and the divider. */
.scp-checkout-template-4 #scp-checkout .scp-ref-sub {
    color: var(--t4-muted); font-size: 15px; line-height: 1.45;
    margin: 0 0 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--t4-line);
}
/* Contact info: e-mail before the name row, matching the mockup order. */
.scp-checkout-template-4 .scp-step-pane-1 { display: flex; flex-direction: column; }
.scp-checkout-template-4 .scp-step-pane-1 > .scp-checkout-section-heading { order: 0; }
.scp-checkout-template-4 .scp-step-pane-1 > .scp-ref-sub { order: 1; }
.scp-checkout-template-4 .scp-step-pane-1 > .scp-form-field { order: 2; }
.scp-checkout-template-4 .scp-step-pane-1 > .scp-form-scp-form-fields--2 { order: 3; }
.scp-checkout-template-4 .scp-step-pane-1 > .scp-step-continue { order: 4; }
.scp-checkout-template-4 .scp-step-pane-1 > .scp-ref-trust { order: 5; }

/* Billing heading = the billing panel's head, styled like .panel-head.
   The panel border separates it from payment, so no top-border divider.
   The icon used to be an emoji in a ::before (📍), which meant it rendered in
   whatever emoji font the OS supplies. It is now a real inline SVG inside a
   .scp-ref-ico span, injected next to the heading text by scp-checkout.js (and
   by scp-checkout-editor.js for the preview) — the same span the payment head
   uses, so both step-2 heads share one icon treatment and take the brand colour
   from --t4-brand instead of being locked to the emoji's own colours. */
.scp-checkout-template-4 .scp-step-pane-2 .scp-checkout-section-heading {
    font-size: 14px; font-weight: 800; margin: 0 0 22px; padding: 0; border: 0;
    color: var(--t4-ink); display: flex; align-items: center; gap: 9px;
}

/* ---------- Form fields ----------
   Reference: label 13/600, mb 6; input padding 12/13, border 1px, radius 10,
   font 14, focus ring 3px brand-soft; field mb 16; row2 1fr/1fr, row3 2fr/1fr/1fr. */
.scp-checkout-template-4 .scp-form-field { display: block; margin-bottom: 20px; }
.scp-checkout-template-4 .scp-form-field__label {
    display: block; font-size: 15px; font-weight: 700; margin-bottom: 7px; color: var(--t4-ink);
}
.scp-checkout-template-4 .scp-form-field__input,
.scp-checkout-template-4 .scp-checkout-currency-select {
    width: 100%; padding: 13px 14px;
    border: 2px solid var(--t4-field-line); border-radius: 10px;
    font-size: 15px; color: var(--t4-ink); background: #fff;
    font-family: inherit; transition: border-color .15s, box-shadow .15s; outline: none;
}
.scp-checkout-template-4 .scp-form-field__input:focus {
    border-color: var(--t4-brand);
    box-shadow: 0 0 0 3px var(--t4-brand-soft);
}
.scp-checkout-template-4 .scp-form-field__input::placeholder { color: #9ca3af; }
.scp-checkout-template-4 .scp-form-scp-form-fields--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scp-checkout-template-4 .scp-form-scp-form-fields--3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.scp-checkout-template-4 .scp-form-scp-form-fields--2 .scp-form-field,
.scp-checkout-template-4 .scp-form-scp-form-fields--3 .scp-form-field { margin-bottom: 20px; }
/* Last field in the billing panel has no trailing gap (reference mb:0). */
.scp-checkout-template-4 .scp-bill-panel > .scp-form-field:last-child,
.scp-checkout-template-4 .scp-bill-panel .scp-form-selectbox:last-child { margin-bottom: 0; }
/* Reference has no "Billing address different from shipping?" toggle / shipping
   section, so hide it (billing is used as shipping — no behaviour change for the
   digital-goods checkout the reference targets). */
.scp-checkout-template-4 .scp-form-shipping,
.scp-checkout-template-4 .scp-checkbox-shipping { display: none; }

/* ---------- Payment method: side-by-side tabs (reference .pay-tabs / .pay-tab) --
   Card | PayPal, flex:1 each, centred, padding 11, active = brand border/tint. */
.scp-checkout-template-4 .scp-payment-form { margin: 0; }
.scp-checkout-template-4 .scp-payment-form .scp-divider { display: none; } /* header comes from the injected panel head */
.scp-checkout-template-4 .scp-payment-method-container {
    display: flex; flex-direction: row; gap: 8px; margin-bottom: 16px;
}
.scp-checkout-template-4 .scp-payment-option { position: relative; margin: 0; flex: 1; }
.scp-checkout-template-4 .scp-payment-radio { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scp-checkout-template-4 .scp-payment-button {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--t4-line); border-radius: 10px; padding: 11px;
    text-align: center; cursor: pointer; background: #fff;
    transition: border-color .15s, background .15s, color .15s;
}
.scp-checkout-template-4 .scp-payment-radio:checked + .scp-payment-button {
    border-color: var(--t4-brand); background: var(--t4-brand-soft);
}
.scp-checkout-template-4 .scp-payment-icon { display: flex; }
.scp-checkout-template-4 .scp-payment-icon svg { width: 18px; height: 18px; stroke: var(--t4-muted); }
.scp-checkout-template-4 .scp-payment-radio:checked + .scp-payment-button .scp-payment-icon svg { stroke: var(--t4-brand); }
.scp-checkout-template-4 .scp-payment-label { font-size: 13px; font-weight: 600; color: var(--t4-muted); }
.scp-checkout-template-4 .scp-payment-radio:checked + .scp-payment-button .scp-payment-label { color: var(--t4-brand); }
/* The tab is Card | PayPal only — no descriptive sub-line in the reference. */
.scp-checkout-template-4 .scp-payment-description { display: none; }
/* Breathing room between the Card | PayPal tabs and the gateway's own first field
   label ("Card number"), which otherwise sat almost flush against the tab. */
.scp-checkout-template-4 .scp-payment-gateway-form { margin-top: 22px; }
/* No rule/line between the tabs and the card fields: the panel border already
   separates this section, so a divider across the top of the gateway form is a
   second, redundant edge. Cleared on every wrapper between the tabs and
   #card-element so it doesn't matter which one carries it. */
.scp-checkout-template-4 #scp-checkout .scp-payment-gateway-form,
.scp-checkout-template-4 #scp-checkout .scp-stripe-payment-form,
.scp-checkout-template-4 #scp-checkout .scp-stripe-payment-form .scp-form-row {
    border: none; padding-top: 0; background: transparent; box-shadow: none;
}
/* !important because the rule survived the plain resets above, so whatever draws
   it is either later/more specific than anything greppable in these two sheets or
   is the mounted <iframe>'s own edge. This is a narrow, template-scoped reset over
   elements that must never carry a border in this design, so forcing is safe here.
   (If the line is painted INSIDE Stripe's iframe, no outer CSS can reach it — that
   case is handled by the '.BlockDivider' appearance rule in scp-stripe.js.) */
.scp-checkout-template-4 #scp-checkout .scp-payment-gateway-form,
.scp-checkout-template-4 #scp-checkout .scp-payment-gateway-form > *,
.scp-checkout-template-4 #scp-checkout .scp-stripe-payment-form > *,
.scp-checkout-template-4 #scp-checkout #card-element,
.scp-checkout-template-4 #scp-checkout #card-element > *,
.scp-checkout-template-4 #scp-checkout #card-element iframe {
    border: 0 !important; box-shadow: none !important;
}
.scp-checkout-template-4 #scp-checkout .scp-payment-gateway-form > hr,
.scp-checkout-template-4 #scp-checkout .scp-stripe-payment-form hr { display: none; }
/* Stripe Payment Element mount: it renders its own field UI (styled via the
   Stripe appearance API in scp-stripe.js), so no wrapper border/padding here —
   that produced a redundant "box inside a box". */
.scp-checkout-template-4 #card-element {
    padding: 0; border: none; border-radius: 0; background: transparent;
}
.scp-checkout-template-4 #card-errors { font-size: 12px; color: #df1b41; margin-top: 8px; }

/* ---------- Primary buttons (Continue / Complete order) ----------
   Reference .btn: padding 14, radius 11, font 15/700, brand fill. */
.scp-checkout-template-4 .scp-step-continue,
.scp-checkout-template-4 .scp-checkout-pay-now-btn .scp-submit-button {
    width: 100%; padding: 16px; border: none; border-radius: 11px;
    font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--t4-brand); color: var(--t4-brand-text);
    transition: filter .15s; margin-top: 4px;
}
.scp-checkout-template-4 .scp-step-continue { margin-top: 8px; }
/* Trailing arrow, as in the reference. ::after keeps clear of .scp-loader-btn's
   ::before spinner; it is dropped while loading so the two never sit together. */
.scp-checkout-template-4 .scp-step-continue::after { content: "\2192"; font-size: 17px; line-height: 1; }
.scp-checkout-template-4 .scp-step-continue.scp-loader-active::after { content: none; }
.scp-checkout-template-4 .scp-step-continue:hover,
.scp-checkout-template-4 .scp-checkout-pay-now-btn .scp-submit-button:hover { filter: brightness(.92); }
.scp-checkout-template-4 .scp-checkout-pay-now-btn { margin-top: 4px; }

/* Back link — reference .btnrow (mt 6) with a left-aligned .btn-ghost. */
.scp-checkout-template-4 .scp-step-back {
    display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0;
    background: none; border: none; cursor: pointer;
    color: var(--t4-muted); font-weight: 600; font-size: 14px; font-family: inherit; padding: 10px 0;
}
.scp-checkout-template-4 .scp-step-back::before { content: "\2190"; }
.scp-checkout-template-4 .scp-step-back:hover { color: var(--t4-ink); }

/* ---------- Trust rows / guarantee (injected) ---------- */
.scp-checkout-template-4 .scp-ref-trust {
    display: flex; gap: 20px; justify-content: center; margin-top: 18px;
    color: var(--t4-muted); font-size: 13px; flex-wrap: wrap;
}
.scp-checkout-template-4 .scp-ref-trust span { display: flex; align-items: center; gap: 6px; }
/* Inline-SVG trust icons (no emoji): stroke inherits currentColor, so the icon
   picks up the row's muted tone; the guarantee tick keeps the semantic green. */
.scp-checkout-template-4 .scp-ref-trust svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.scp-checkout-template-4 .scp-ref-trust svg.scp-trust-ok { color: var(--t4-green); }
/* Summary card's own trust row (injected by scp-checkout.js), below the total. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-summary-trust { margin-top: 14px; flex: 0 0 auto; }
.scp-checkout-template-4 .scp-ref-guarantee {
    font-size: 12px; color: var(--t4-muted); text-align: center; margin-top: 14px; line-height: 1.5;
}

/* ---------- Order summary (reference .card.summary) ----------
   EQUAL-HEIGHT CHAIN: the card must fill the column so it ends level with the
   step-1 card, with the total pinned to the bottom. Every wrapper between the
   column and the total has to pass the height down, hence the flex chain:
   column > #scp-checkout-cart-summary > .scp-checkout-order-summary (the card)
   > .scp-order-summary-v2-container > .scp-order-summary-v2-summary > total.
   This replaces the previous `position: sticky; align-self: flex-start`
   sidebar — a sticky column cannot stretch, so sticky and equal height are
   mutually exclusive; equal height is the requested design. */
.scp-checkout-template-4 #scp-checkout-cart-summary,
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-order-summary,
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container,
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-summary {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    margin-top: 0;
}
/* Base's `#scp-checkout .scp-order-summary-v2-container .scp-order-summary-v2-summary`
   sets margin-top: 10px at the SAME specificity as the rule above (1 ID + 2
   classes) and loads later, so it won the tie — that stray 10px sat between the
   line item and the coupon row and made the gap above the coupon field wider than
   the gap below it. Naming the container adds the class needed to win. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary { margin-top: 0; }
/* The base sheet gives the summary wrapper margin-top: 24px, which offset the
   card 24px below the step-1 card and broke the level top edge. */
.scp-checkout-template-4 .scp-right-part-checkout > #scp-checkout-cart-summary { margin-top: 0; }

/* Equal height applies to STEP 1 only — that is the layout the design calls for,
   and there the two cards are comparable in size. Step 2's left column is far
   taller (payment panel + billing panel), so stretching the summary to match
   would strand the total hundreds of pixels below the fold. There the summary
   goes back to being a sticky sidebar that follows the scroll, which is also how
   it behaved before the equal-height change. */
.scp-checkout-template-4.scp-on-step-2 .wp-block-columns { align-items: flex-start; }
/* Step 2: the left column (payment + billing) is the tall one, so the right
   summary STICKS and follows the scroll instead of scrolling out of view.
   align-self:flex-start keeps the summary at its own content height (the total
   is never stranded below the tall left column), and top:20px matches the left
   column's sticky offset so both start level and the shorter (summary) column
   is the one that pins as you scroll. This mirrors Step 1, where the left (form)
   column sticks whenever the right column is the taller one — whichever side is
   shorter is the side that sticks. */
.scp-checkout-template-4.scp-on-step-2 .scp-right-part-checkout {
    position: sticky; top: 20px; align-self: flex-start;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-order-summary { border-radius: var(--t4-radius); padding: 28px; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container { margin: 0; }
/* The mockup's summary card has no title — it opens straight on the line item.
   display:none needs !important because the markup carries inline display:flex. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-summary-head { display: none !important; }

/* Product row — the product image is HIDDEN for this template, so the row is a
   simple two-column line: title (left) + price (right) on line 1, and the
   renewal/trial terms tight on line 2. Minimal row-gap, no wasted spacing. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-item {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; align-items: baseline;
    /* margin-bottom is 0 on purpose: the coupon row below owns the spacing on both
       sides of itself, so the gaps above and below the coupon field stay equal. */
    padding-bottom: 16px; border-bottom: 1px solid var(--t4-line); margin-bottom: 0;
}
/* Hide the product thumbnail/image for this template. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-item > div:first-child { display: none; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-details { grid-column: 1; grid-row: 1; min-width: 0; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-title { font-weight: 700; font-size: 15px; color: var(--t4-ink); line-height: 1.3; margin: 0; }
/* Subtitle duplicates the title in this data model, so it is hidden. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-subtitle { display: none; }
/* Unwrap the price column so amount + terms become grid items. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-order-item-price { display: contents; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-order-item-total-price,
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .slc-pp-v2-price {
    grid-column: 2; grid-row: 1; align-self: baseline; text-align: right; font-size: 16px; font-weight: 750; color: var(--t4-ink); white-space: nowrap; margin: 0;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-order-item-price-type {
    grid-column: 1 / span 2; grid-row: 2; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--t4-muted); white-space: normal; line-height: 1.4; margin: 0;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-change-price-plan { grid-column: 1 / span 2; grid-row: 3; margin-top: 2px; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-change-price-plan a { font-size: 12px; font-weight: 600; color: var(--t4-brand); }

/* ---------- Pricing plans (plugin extra — same design language) ----------
   scp_plan_render_inline: .scp-inline-plans--2col > .scp-inline-plan(.selected)
   > radio + .scp-inline-plan-body(.scp-inline-plan-title + .scp-inline-plan-meta). */
/* Pricing plans always stack one card per row (never multi-column), on both the
   front end and the editor preview. */
.scp-checkout-template-4 .scp-inline-plans,
.scp-checkout-template-4 .scp-inline-plans--2col,
.scp-checkout-template-4 .scp-inline-plans--1col { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0 4px; }
.scp-checkout-template-4 .scp-inline-plan {
    display: flex; align-items: flex-start; gap: 9px;
    border: 1px solid var(--t4-line); border-radius: 10px; padding: 12px;
    cursor: pointer; background: var(--t4-card); transition: border-color .15s, background .15s; margin: 0;
}
.scp-checkout-template-4 .scp-inline-plan.selected {
    border-color: var(--t4-brand); background: var(--t4-brand-soft);
}
.scp-checkout-template-4 .scp-inline-plan-radio { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--t4-brand); }
.scp-checkout-template-4 .scp-inline-plan-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scp-checkout-template-4 .scp-inline-plan-title { font-size: 13px; font-weight: 700; color: var(--t4-ink); line-height: 1.3; }
.scp-checkout-template-4 .scp-inline-plan-meta { font-size: 12px; font-weight: 500; color: var(--t4-muted); line-height: 1.4; }
/* Simple-radio-list variant */
.scp-checkout-template-4 .scp-plan-radio-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.scp-checkout-template-4 .scp-plan-radio-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t4-ink); }
.scp-checkout-template-4 .scp-plan-radio-row input { accent-color: var(--t4-brand); }

/* ---------- Summary line rows (discount, subtotal, etc.) ---------- */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-summary > div {
    display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--t4-ink);
}

/* ---------- Coupon ----------
   The markup nests two elements that BOTH carry .scp-coupen-field (a wrapper div
   and the input), which produced a "box inside a box". Flatten it: the wrapper
   div is the single bordered field (a flex row: input + Apply), the input inside
   is borderless/transparent, and the outer code-wrapper has no box of its own. */
/* Anchored as its own row: tight under the line item with a rule beneath it, so
   it reads as a defined row of the summary. Left floating on its own it looked
   dropped at random in the middle of the (equal-height) card, since all the slack
   in the card collects between the coupon and the bottom-pinned total. */
/* Base pins this to padding: 0 via `#scp-checkout ...v2-summary
   .scp-checkout-coupen-code-wrapper.scp-coupon-apply-wrapper` (1 ID + 4 classes),
   and the base sheet loads AFTER this file, so the selector below has to be
   longer still (1 ID + 5 classes) for the row's padding to survive. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary .scp-checkout-coupen-code-wrapper.scp-coupon-apply-wrapper {
    border: none; border-bottom: 1px solid var(--t4-line);
    /* Symmetric padding is what makes the gap above the field equal the gap below
       it; the line item's margin-bottom is zeroed (see the product-row rule) so
       this padding is the ONLY thing between the item's divider and the field. */
    padding: 20px 0; background: transparent; margin: 0;
}
/* A real bordered field (input + "Apply" inside the box), matching the reference:
   one box, the input borderless inside it, Apply as a brand-coloured link on the
   right. The wrapper div is the box; the input must NOT draw a second border. */
/* The padding needs 1 ID + 4 classes: base's
   `#scp-checkout .scp-order-summary-v2-container .scp-order-summary-v2-summary div`
   (1 ID + 2 classes + 1 element) also matches this div, ties with a shorter
   selector, and loads later — which squashed the box to 5px vertical / 0
   horizontal padding, so the placeholder ran straight into "Apply". */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary div.scp-coupen-field {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: 1px solid var(--t4-field-line); border-radius: 10px; box-shadow: none;
    padding: 13px 14px; background: #fff; margin: 0; cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
/* Must carry the same long prefix as the box rule above, otherwise that rule's
   `border`/`box-shadow` shorthands out-specify these and the focus ring never
   shows. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary div.scp-coupen-field:focus-within {
    border-color: var(--t4-brand); box-shadow: 0 0 0 3px var(--t4-brand-soft);
}
/* Same reason as the wrapper above — the base `... v2-summary div` padding rule
   doesn't hit the input, but base's own input rules do, so keep this long too. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary input.scp-coupen-field {
    flex: 1 1 auto; min-width: 0; width: auto;
    border: none; border-radius: 0; box-shadow: none; outline: none;
    padding: 0; margin: 0; background: transparent; height: auto; line-height: 1.3;
    font-size: 14px; font-family: inherit; color: var(--t4-ink); text-align: left;
}
/* Kept in step with the Apply rule further down (which wins on specificity) so
   the two can't drift apart. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-coupen-btb {
    flex-shrink: 0; padding: 0; background: none;
    color: var(--t4-brand); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-coupen-error-msg { font-size: 12px; color: #df1b41; margin-top: 6px; }
/* The base sheet right-aligns the input, hides "Apply" until focus, and paints the
   placeholder blue (smart-creator-press-public.css:2430-2437). For the boxed field
   the input stays left-aligned with a muted placeholder and Apply is always
   visible on the right. The Apply rule has to out-specify base's
   `#scp-checkout ... input + a#scp-apply-coupon-button` (2 IDs, 3 classes, 2
   elements), hence the long selector — base also loads after this file. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-summary div.scp-coupen-field.scp-checkout-label-right { justify-content: space-between; gap: 12px; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-summary div.scp-checkout-label-right input.scp-coupen-field { text-align: left; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-summary div.scp-checkout-label-right input.scp-coupen-field::placeholder {
    color: var(--t4-muted); font-weight: 500; font-size: 14px; opacity: 1; text-decoration: none;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary div.scp-checkout-label-right input.scp-coupen-field + a#scp-apply-coupon-button,
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary div.scp-checkout-label-right a#scp-apply-coupon-button {
    display: block; flex: 0 0 auto; min-width: 0; padding: 0; background: none;
    color: var(--t4-brand); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}

/* ---------- Total (reference .total: top border, bottom of the card) ----------
   margin-top:auto is what pins the total to the bottom of the stretched card, so
   the summary ends level with the step-1 card instead of leaving a ragged gap.
   It needs the flex chain declared in the "Order summary" block above. */
/* Specificity note: the sibling `.scp-order-summary-v2-summary > div` rule above
   (1 ID + 3 classes) and the base `...v2-summary div.scp-order-summary-v2-total`
   (1 ID + 3 classes + 1 element) both out-rank a plain 1-ID-2-class selector, so
   this one is written long enough (1 ID + 4 classes + 1 element) to win outright. */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary > div.scp-order-summary-v2-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 21px; font-weight: 800; color: var(--t4-ink);
    padding-top: 16px; border-top: 1px solid var(--t4-line);
    margin-top: auto; margin-bottom: 0;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-summary > div.scp-order-summary-v2-total .scp-total-right { font-size: 21px; font-weight: 800; }

/* ---------- Currency dropdown (plugin extra — same design language) ---------- */
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-currency-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-currency-row label { font-size: 12.5px; color: var(--t4-muted); margin: 0; }
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-currency-select {
    padding: 8px 10px; border: 1px solid var(--t4-line); border-radius: 8px; font-size: 13px; background: #fff; width: auto;
}

/* ---------- Order bump ----------
   No wrapper "box": the order bump's own template box (.scp-order-bump-template-2,
   a dashed-border card) is the standalone box, so the green .scp-checkout-order-
   bump-wrap box is stripped to a transparent pass-through (otherwise it read as a
   box-inside-a-box). #scp-checkout is needed to beat the base rule
   `#scp-checkout .scp-checkout-order-bump-wrap { margin-top:30px; margin-bottom:0 }`. */
.scp-checkout-template-4 .scp-checkout-order-bump-wrap:empty { display: none; }
.scp-checkout-template-4 #scp-checkout .scp-checkout-order-bump-wrap {
    background: transparent; border: none; border-radius: 0; padding: 0; margin: 0;
}
/* Align the bump box's top with the contact card and keep a gap before the cart
   summary (its own margins otherwise push it 30px down). */
.scp-checkout-template-4 #scp-checkout .scp-checkout-order-bump-wrap .scp-order-bump-template-2 {
    margin-top: 0; margin-bottom: 20px;
}
.scp-checkout-template-4 .scp-bump-checkbox { accent-color: var(--t4-green); width: 18px; height: 18px; }

/* ---------- Step panes: show only the current step ----------
   Non-current pane kept laid out (never display:none) so the Stripe iframe
   retains real dimensions and mounts correctly. */
.scp-checkout-template-4 .scp-step-pane { position: relative; margin-top: 0; }
.scp-checkout-template-4.scp-on-step-1 .scp-step-pane-2,
.scp-checkout-template-4.scp-on-step-2 .scp-step-pane-1 {
    position: absolute; top: 0; left: 0; width: 100%;
    visibility: hidden; pointer-events: none; opacity: 0; z-index: -1;
}
.scp-checkout-template-4.scp-on-step-1 .scp-step-pane-1,
.scp-checkout-template-4.scp-on-step-2 .scp-step-pane-2 { animation: scpStepFade .25s ease; }
@keyframes scpStepFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.scp-checkout-template-4 .scp-step-continue.scp-loader-active { opacity: .8; }

/* ---------- "Show Order Summary in Step 1?" = No ----------
   Hide the summary column, but DON'T let the contact card stretch full-width —
   cap it and centre it so step 1 stays a comfortable single-column form. */
.scp-checkout-template-4.scp-summary-step1-no.scp-on-step-1 .scp-right-part-checkout { display: none; }
.scp-checkout-template-4.scp-summary-step1-no.scp-on-step-1 .scp-left-part-checkout {
    flex: 0 1 560px; max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ---------- Editor preview niceties ---------- */
.scp-editor-preview .scp-step-continue,
.scp-editor-preview .scp-step-back,
.scp-editor-preview .scp-step2-greeting-title,
.scp-editor-preview .scp-step2-greeting-sub { cursor: text; }
.scp-editor-preview .scp-step-continue:focus,
.scp-editor-preview .scp-step-back:focus,
.scp-editor-preview .scp-step2-greeting-title:focus,
.scp-editor-preview .scp-step2-greeting-sub:focus { outline: 2px dashed rgba(0, 0, 0, .28); outline-offset: 2px; }
/* Empty sub-text line stays clickable to edit in the preview. */
.scp-editor-preview .scp-step2-greeting-sub:empty::before { content: ""; display: inline-block; min-height: 1em; }

/* ---------- Specificity overrides (must include #scp-checkout to beat base) ----
   The base stylesheet targets #scp-checkout ..., which out-specifies plain
   .scp-checkout-template-4 rules, so these fixes are re-stated with #scp-checkout. */

/* Payment method tab: the base gives it a 40px purple icon box, a checked-state
   2px outline + translateY glow, and a growing content column — which made the
   single "Credit Card" tab look oversized. Strip all of that for a compact tab. */
.scp-checkout-template-4 #scp-checkout .scp-payment-button {
    padding: 10px 12px; border: 1px solid var(--t4-line); border-radius: 10px; width: 100%;
    background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: none; backdrop-filter: none; transform: none; overflow: visible; min-height: 0;
    transition: border-color .15s, background .15s;
}
.scp-checkout-template-4 #scp-checkout .scp-payment-button::before { display: none; }
.scp-checkout-template-4 #scp-checkout .scp-payment-radio:checked + .scp-payment-button {
    border: 1px solid var(--t4-brand); outline: none; background: var(--t4-brand-soft); transform: none; box-shadow: none;
}
.scp-checkout-template-4 #scp-checkout .scp-payment-icon {
    width: auto; height: auto; margin: 0; background: none; border-radius: 0; box-shadow: none;
}
.scp-checkout-template-4 #scp-checkout .scp-payment-icon svg { width: 18px; height: 18px; }
.scp-checkout-template-4 #scp-checkout .scp-payment-content { flex-grow: 0; }

/* Inputs / selects: the base forces height:40px + line-height:1.5, which CLIPS
   the <select> text (e.g. Country). Let them size to content so nothing is cut. */
.scp-checkout-template-4 #scp-checkout .scp-form-field__input {
    height: auto; line-height: 1.4; padding: 13px 14px; font-size: 15px;
    border: 2px solid var(--t4-field-line); border-radius: 10px; background: #fff; box-shadow: none;
}
.scp-checkout-template-4 #scp-checkout .scp-form-field__input:hover,
.scp-checkout-template-4 #scp-checkout .scp-form-field__input:focus { outline: none; }
.scp-checkout-template-4 #scp-checkout .scp-form-field__input:focus {
    border-color: var(--t4-brand); box-shadow: 0 0 0 3px var(--t4-brand-soft);
}
.scp-checkout-template-4 #scp-checkout select.scp-form-field__input { min-height: 44px; padding-right: 30px; }

/* Field labels: base sets `#scp-checkout .scp-form-field__label` to 14px/400,
   an ID selector that beats the class-only rule in the Form fields block above,
   so the label size/weight has to be re-stated here to take effect. */
.scp-checkout-template-4 #scp-checkout .scp-form-field__label { font-size: 15px; font-weight: 700; color: var(--t4-ink); }

/* Section headings: base forces h3.scp-checkout-section-heading to 21px, which
   made "Billing Address" much bigger than the injected "Payment method" head.
   Re-state at higher specificity so the step-2 headings match the panel heads. */
.scp-checkout-template-4 #scp-checkout .scp-step-pane-1 h3.scp-checkout-section-heading { font-size: 19px; font-weight: 750; margin-bottom: 2px; padding-bottom: 0; }
/* The whole margin box belongs here, not just the size: base sets margin-bottom
   to 0 via `#scp-checkout .wp-block-...-checkout-form h3.scp-checkout-section-heading`
   and the h3 also picks up a top margin (the Payment method head is a plain div,
   so it never had one — which is why the Billing panel looked more padded at the
   top than the Payment panel). The shorthand zeroes the top and pads the bottom
   in one go, at a specificity that beats base. */
.scp-checkout-template-4 #scp-checkout .scp-step-pane-2 h3.scp-checkout-section-heading {
    /* 16px matches .scp-ref-panel-head's margin-bottom, so the Billing Address head
       and the Payment method head sit at identical distances from their first
       field. padding-bottom is zeroed because base adds 5px on top of the margin. */
    font-size: 14px; font-weight: 800; margin: 0 0 16px; padding-top: 0; padding-bottom: 0;
}
.scp-checkout-template-4 #scp-checkout-cart-summary .scp-checkout-summary-head h3.scp-checkout-section-heading { font-size: 15px; font-weight: 650; margin-bottom: 0; }

/* ---------- Responsive (reference @760: single column, summary on top) ---------- */
@media (max-width: 760px) {
    .scp-checkout-template-4 #scp-checkout { padding: 16px; }
    .scp-checkout-template-4 .wp-block-columns { flex-direction: column; }
    .scp-checkout-template-4 .scp-right-part-checkout,
    .scp-checkout-template-4 .scp-left-part-checkout { width: 100% !important; flex-basis: 100% !important; }
    .scp-checkout-template-4 .scp-right-part-checkout { position: static; order: -1; }
    .scp-checkout-template-4 .scp-step-node { width: auto; min-width: 96px; }
    .scp-checkout-template-4 .scp-form-scp-form-fields--3 { grid-template-columns: 1fr 1fr; }
    .scp-checkout-template-4 .scp-inline-plans--2col { grid-template-columns: 1fr; }
}