:root {
  /*! UnitedB2B viewport shell */
}

html,
body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
}

/* Keep Salesforce's managed payment component mounted for Checkout lifecycle
   events, but do not render payment entry while our authoritative presenter
   says it is not applicable. This contract must apply at every viewport. */
.united-checkout-flow
  .checkout-payment-card:has(
    c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
  )
  commerce_builder-checkout-payment-sheet-with-purchase-order,
.united-checkout-flow
  .checkout-payment-card:has(
    c-zero-dollar-order-with-alt-payment[data-payment-state="zero-due"]
  )
  commerce_builder-checkout-payment-sheet-with-purchase-order,
.united-checkout-flow
  .checkout-payment-card:has(
    c-zero-dollar-order-with-alt-payment[data-payment-state="internal-deferred"]
  )
  commerce_builder-checkout-payment-sheet-with-purchase-order,
.united-checkout-flow
  .checkout-payment-card:has(
    c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
  )
  commerce_builder-checkout-payment-sheet-with-purchase-order,
.united-checkout-flow
  .checkout-payment-card:has(
    c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
  )
  commerce_builder-checkout-payment-sheet-with-purchase-order {
  display: none;
}

commerce-layout-site {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0 !important;
  overflow: hidden;
}

#layout-site-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Shared Add-ons-style shell for the unified checkout route. */
@media (min-width: 48.0625rem) {
  #layout-site-content:has(.united-checkout-shell) {
    overflow-y: hidden !important;
    scrollbar-gutter: auto;
  }

  .united-checkout-shell {
    --united-checkout-bottom-gap: 1.5rem;
    /* Live Add-ons geometry starts both rails 2rem below the storefront
       header. Use that measured contract here rather than a route-specific
       visual offset. */
    --united-checkout-rail-top: 2rem;
    --united-checkout-rail-bottom: var(--united-checkout-bottom-gap);
    width: min(110rem, calc(100vw - 3rem)) !important;
    max-width: none !important;
    /* The shell starts immediately below the 4.875rem storefront header. The
       shared rail offsets below reserve the same intentional top and bottom
       breathing room for both columns; no checkout-only footer is involved. */
    height: calc(100dvh - 4.875rem);
    min-height: 0;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    /* `clip` also blocks scrollIntoView from moving the entire two-column
       canvas when validation focuses a field near the bottom of the form. */
    overflow: clip;
  }

  .united-checkout-shell > .columns-content {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) 27.5rem;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    column-gap: 1.5rem !important;
    row-gap: 0 !important;
    overflow: hidden;
  }

  .united-checkout-shell > .columns-content > community_layout-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    grid-column: auto !important;
    grid-row: 1 !important;
    overflow: hidden !important;
  }

  .united-checkout-shell > div,
  .united-checkout-shell > div > div {
    height: 100%;
    min-height: 0;
  }

  .united-checkout-shell .column-content:has(.united-checkout-flow),
  .united-checkout-shell
    .column-content:has(.united-checkout-flow)
    > commerce_data_provider-cart-data-provider,
  .united-checkout-shell
    .column-content:has(.united-checkout-flow)
    > commerce_data_provider-cart-data-provider
    > dxp_data_provider-data-proxy {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .united-checkout-shell *:has(> .united-checkout-flow) {
    height: 100%;
    min-height: 0;
    /* The Checkout flow already owns its internal card spacing. Reserving the
       Add-ons card gap on this data-provider wrapper shortened only the left
       scrollport and rendered as a false white footer below Payment. */
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .united-checkout-flow {
    display: block !important;
    height: calc(100% - var(--united-checkout-rail-top)) !important;
    min-height: 0 !important;
    margin-top: var(--united-checkout-rail-top);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Let the left scrollport reach the viewport bottom. Reserve the
       Add-ons-style breathing room inside the scrollable content instead of
       shortening the rail and exposing the page as a false white footer. */
    padding-top: 0;
    padding-bottom: var(--united-checkout-rail-bottom);
    box-sizing: border-box;
    overscroll-behavior: contain;
    /* Minimal but visible scroll indicator instead of a fully hidden one. */
    scrollbar-width: thin;
    scrollbar-color: rgba(18, 50, 82, 0.28) transparent;
  }

  .united-checkout-flow::-webkit-scrollbar {
    width: 0.375rem;
  }

  .united-checkout-flow::-webkit-scrollbar-track {
    background: transparent;
  }

  .united-checkout-flow::-webkit-scrollbar-thumb {
    background-color: rgba(18, 50, 82, 0.28);
    border-radius: 999px;
  }

  .united-checkout-flow::-webkit-scrollbar-thumb:hover {
    background-color: rgba(18, 50, 82, 0.42);
  }

  .united-checkout-flow > * + * {
    margin-top: 1rem;
  }

  .united-checkout-flow .checkout-payment-card {
    display: block;
    overflow: hidden;
    padding: 0.25rem 0.5rem 0;
    border: 1px solid #d9d9d9;
    border-radius: 0.5rem;
    background: #fff;
    box-sizing: border-box;
  }

  /* Salesforce wraps configured Payment children in its one-page section.
     Select the stable parent that directly owns our named action host; never
     rely on generated LWC class names. */
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > * {
    grid-column: 1 / -1;
  }

  /* Experience Cloud adds 1.5rem below every component wrapper. These four
     controls form one compact action group, so remove that wrapper gap only
     here instead of changing spacing for the rest of Checkout. */
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > c-checkout-terms-agreement,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-totals,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-shop-more {
    margin-bottom: 0;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > c-checkout-terms-agreement {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    margin-bottom: 0.625rem;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-totals {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 0;
    padding: 0.5rem 0.5rem 0.25rem;
    align-self: stretch;
    border: 1px solid #b8d7f4;
    border-bottom: 0;
    border-radius: 0.625rem 0.625rem 0 0;
    background: #fff;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-shop-more {
    grid-column: 1;
    min-width: 0;
    margin-top: 0;
    padding: 0.375rem 0.25rem 0.625rem 0.5rem;
    align-self: stretch;
    border-bottom: 1px solid #b8d7f4;
    border-left: 1px solid #b8d7f4;
    border-radius: 0 0 0 0.625rem;
    background: #fff;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order {
    position: relative;
    display: block;
    grid-column: 2;
    min-width: 0;
    margin-top: 0;
    padding: 0.375rem 0.5rem 0.625rem 0.25rem;
    align-self: stretch;
    border-right: 1px solid #b8d7f4;
    border-bottom: 1px solid #b8d7f4;
    border-radius: 0 0 0.625rem;
    background: #fff;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order
    commerce-action-button {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
  }

  .checkout-inline-place-order {
    --slds-c-button-brand-color-background: #f45b57;
    --slds-c-button-brand-color-background-hover: #e44e4a;
    --slds-c-button-brand-color-background-active: #d94340;
    --slds-c-button-brand-color-border: #f45b57;
    --slds-c-button-brand-color-border-hover: #e44e4a;
  }

  .checkout-inline-place-order button {
    position: static;
    display: block;
    width: 100%;
    min-height: var(--united-package-action-height, 2.375rem);
    height: var(--united-package-action-height, 2.375rem);
    margin: 0;
    transform: none;
    box-sizing: border-box;
    border-color: #f45b57;
    border-radius: 0.5rem;
    background: #f45b57;
    font-size: 1rem;
    font-weight: 700;
  }

  .united-checkout-flow
    .checkout-payment-card
    > commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow .checkout-payment-card > c-checkout-billing-address {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #d7e3ee;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow:
      0 0.0625rem 0.125rem rgba(0, 0, 0, 0.03),
      0 0.0625rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.02);
  }

  .united-checkout-flow
    .checkout-payment-card
    > commerce_builder-checkout-payment-sheet-with-purchase-order {
    margin-top: 0;
    padding: 0.25rem 1rem 0.375rem;
  }

  .united-checkout-flow
    .checkout-payment-card:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="zero-due"]
    )
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="internal-deferred"]
    )
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    commerce_builder-checkout-payment-sheet-with-purchase-order {
    display: none;
  }

  .united-checkout-flow
    .checkout-payment-card[data-payment-state="checking"]
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card[data-payment-state="zero-due"]
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card[data-payment-state="internal-deferred"]
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card[data-payment-state="information-required"]
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card[data-payment-state="payment-preparing"]
    commerce_builder-checkout-payment-sheet-with-purchase-order {
    display: none;
  }

  /* Experience Builder can insert an extra layout wrapper on narrow screens.
     Preserve the managed payment surface in the DOM for Commerce, but hide it
     whenever the authoritative payment-state component says entry is not yet
     applicable or nothing is due. */
  .united-checkout-flow
    .checkout-payment-card
    > c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    ~ commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card
    > c-zero-dollar-order-with-alt-payment[data-payment-state="zero-due"]
    ~ commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card
    > c-zero-dollar-order-with-alt-payment[data-payment-state="internal-deferred"]
    ~ commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card
    > c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    ~ commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow
    .checkout-payment-card
    > c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    ~ commerce_builder-checkout-payment-sheet-with-purchase-order {
    display: none;
  }

  .united-checkout-flow .checkout-payment-card > c-checkout-billing-address {
    margin-top: 0.375rem;
    padding: 0.625rem 1rem 0.75rem;
  }

  .united-checkout-flow .checkout-payment-card .sfpp-payment-method-card,
  .united-checkout-flow .checkout-payment-card .sfpp-form-element {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .united-checkout-flow .checkout-payment-card .sfpp-payment-method-card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .united-checkout-shell *:has(> .checkout-package-panel) {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
    padding: 0 0 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
    --united-package-action-height: 2.375rem;
    --united-package-action-gap: 0.4375rem;
    --united-package-actions-padding: 0.4375rem 0.75rem 0.5rem;
    --united-package-back-width: 6rem;
  }

  .united-checkout-shell
    > .columns-content
    > community_layout-column:has(.checkout-package-panel) {
    height: 100% !important;
    align-self: start !important;
  }

  /* Keep the Account/Payment scrollport at the full shell height. The package
     panel independently reserves the Add-ons-style bottom gap; applying that
     gap to this column exposes the page background as a white footer strip. */
  .united-checkout-shell
    > .columns-content
    > community_layout-column:has(.united-checkout-flow) {
    height: 100% !important;
    align-self: start !important;
  }

  .checkout-package-panel {
    position: absolute !important;
    top: var(--united-checkout-rail-top) !important;
    right: 0 !important;
    left: 0 !important;
    bottom: var(--united-checkout-rail-bottom) !important;
    display: block;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    overflow: hidden;
  }

  .checkout-sidebar-back {
    position: absolute;
    right: 0.75rem;
    bottom: calc(var(--united-checkout-rail-bottom) + 0.5rem);
    left: 0.75rem;
    z-index: 2;
    display: block;
    width: auto !important;
    min-height: var(--united-package-action-height);
    margin: 0;
    box-sizing: border-box;
  }

  .checkout-sidebar-back {
    right: auto;
    width: var(--united-package-back-width) !important;
  }

  .checkout-sidebar-place-order {
    --slds-c-button-brand-color-background: #f45b57;
    --slds-c-button-brand-color-background-hover: #e44e4a;
    --slds-c-button-brand-color-background-active: #d94340;
    --slds-c-button-brand-color-border: #f45b57;
    --slds-c-button-brand-color-border-hover: #e44e4a;
    display: contents;
  }

  .checkout-sidebar-place-order commerce-action-button {
    position: absolute;
    right: 0.75rem;
    bottom: calc(var(--united-checkout-rail-bottom) + 0.5rem);
    left: calc(
      0.75rem + var(--united-package-back-width) +
        var(--united-package-action-gap)
    );
    z-index: 2;
    display: block;
    width: auto !important;
    min-height: var(--united-package-action-height);
    margin: 0;
    box-sizing: border-box;
  }

  .checkout-sidebar-place-order commerce-action-button:has(> button),
  .checkout-sidebar-place-order button {
    width: 100%;
    min-height: var(--united-package-action-height);
    height: var(--united-package-action-height);
    border-color: #f45b57;
    border-radius: 0.5rem;
    background: #f45b57;
    font-size: 1rem;
    font-weight: 700;
  }

  .united-checkout-shell
    .checkout-inline-place-order
    commerce-action-button:has(> button) {
    width: 100%;
    align-self: stretch;
  }

  .checkout-inline-place-order button:disabled {
    border-color: #d7dce1;
    background: #d7dce1;
    color: #687989;
  }

  /* Keep Salesforce's one native Place Order action clickable so its checkout
     lifecycle can report and focus missing fields, but present it as pending
     until every custom required section reports complete. */
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-totals[data-order-ready="false"])
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> c-checkout-billing-address[data-checkout-valid="false"])
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    > .checkout-inline-place-order {
    --slds-c-button-brand-color-background: #dfe5ea;
    --slds-c-button-brand-color-background-hover: #d7dee4;
    --slds-c-button-brand-color-background-active: #ced7de;
    --slds-c-button-brand-color-border: #c9d2da;
    --slds-c-button-brand-color-border-hover: #bcc7d0;
    --slds-c-button-brand-text-color: #5f6f7d;
    --slds-c-button-text-color: #5f6f7d;
    filter: none;
    opacity: 1;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-totals[data-order-ready="false"])
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> c-checkout-billing-address[data-checkout-valid="false"])
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    > .checkout-inline-place-order
    button {
    border-color: #c9d2da;
    background: #dfe5ea;
    color: #5f6f7d;
  }

  .united-checkout-shell:has(.checkout-inline-totals[data-order-ready="false"])
    .checkout-sidebar-place-order,
  .united-checkout-shell:has(
      c-checkout-billing-address[data-checkout-valid="false"]
    )
    .checkout-sidebar-place-order,
  .united-checkout-shell:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    .checkout-sidebar-place-order,
  .united-checkout-shell:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    .checkout-sidebar-place-order,
  .united-checkout-shell:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    .checkout-sidebar-place-order {
    --slds-c-button-brand-color-background: #dfe5ea;
    --slds-c-button-brand-color-background-hover: #d7dee4;
    --slds-c-button-brand-color-background-active: #ced7de;
    --slds-c-button-brand-color-border: #c9d2da;
    --slds-c-button-brand-color-border-hover: #bcc7d0;
    --slds-c-button-brand-text-color: #5f6f7d;
    --slds-c-button-text-color: #5f6f7d;
    filter: grayscale(1);
    opacity: 0.62;
  }

  .united-checkout-shell:has(.checkout-inline-totals[data-order-ready="false"])
    .checkout-sidebar-place-order
    button,
  .united-checkout-shell:has(
      c-checkout-billing-address[data-checkout-valid="false"]
    )
    .checkout-sidebar-place-order
    button,
  .united-checkout-shell:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    .checkout-sidebar-place-order
    button,
  .united-checkout-shell:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    .checkout-sidebar-place-order
    button,
  .united-checkout-shell:has(
      c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    .checkout-sidebar-place-order
    button,
  .checkout-sidebar-place-order button:disabled {
    border-color: #c9d2da;
    background: #dfe5ea;
    color: #5f6f7d;
  }
}

@media (min-width: 48.0625rem) and (max-width: 68.75rem) {
  .united-checkout-shell > .columns-content {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }
}

@media (max-width: 48rem) {
  .united-checkout-shell,
  .united-checkout-flow,
  .united-checkout-flow .checkout-payment-card,
  .united-checkout-flow .checkout-payment-card > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Payment-state, managed payment, billing, and terms are full-row sections.
     Experience Builder can project these components directly into the action
     grid at mobile widths, so name the grid contract instead of relying on
     generated wrapper markup or DOM order. */
  .united-checkout-flow
    .checkout-payment-card
    c-zero-dollar-order-with-alt-payment,
  .united-checkout-flow
    .checkout-payment-card
    commerce_builder-checkout-payment-sheet-with-purchase-order,
  .united-checkout-flow .checkout-payment-card c-checkout-billing-address,
  .united-checkout-flow .checkout-payment-card c-checkout-terms-agreement {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > c-checkout-terms-agreement,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-totals,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-shop-more {
    margin-bottom: 0;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > c-checkout-terms-agreement {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    margin-bottom: 0.625rem;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-totals {
    grid-column: 1 / -1;
    width: auto;
    margin-top: 0;
    padding: 0.5rem 0.5rem 0.25rem;
    border: 1px solid #b8d7f4;
    border-bottom: 0;
    border-radius: 0.625rem 0.625rem 0 0;
    background: #fff;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-shop-more {
    grid-column: 1;
    min-width: 0;
    margin-top: 0;
    padding: 0.5rem 0.5rem 0.3125rem;
    border-right: 1px solid #b8d7f4;
    border-left: 1px solid #b8d7f4;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order {
    position: relative;
    display: block;
    grid-column: 1;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0.3125rem 0.5rem 0.625rem;
    border-right: 1px solid #b8d7f4;
    border-bottom: 1px solid #b8d7f4;
    border-left: 1px solid #b8d7f4;
    border-radius: 0 0 0.625rem 0.625rem;
    background: #fff;
    box-shadow: none;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order
    commerce-action-button {
    position: static;
    display: block;
    grid-column: 1;
    width: 100%;
    height: auto;
    min-height: var(--united-package-action-height, 2.375rem);
    margin: 0;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order
    commerce-action-button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order
    commerce-action-button
    > button {
    position: static;
    display: block;
    width: 100%;
    min-height: var(--united-package-action-height, 2.375rem);
    height: var(--united-package-action-height, 2.375rem);
    margin: 0;
    transform: none;
    border-color: #f45b57;
    border-radius: 0.5rem;
    background: #f45b57;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding-right: 0.375rem;
    padding-left: 0.375rem;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order
    commerce-action-button
    > button:hover {
    border-color: #e44e4a;
    background: #e44e4a;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-place-order)
    > .checkout-inline-place-order
    commerce-action-button
    > button:active {
    border-color: #d94340;
    background: #d94340;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-totals[data-order-ready="false"])
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> c-checkout-billing-address[data-checkout-valid="false"])
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    > .checkout-inline-place-order,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    > .checkout-inline-place-order {
    filter: none;
    opacity: 1;
  }

  .united-checkout-flow
    .checkout-payment-card
    div:has(> .checkout-inline-totals[data-order-ready="false"])
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(> c-checkout-billing-address[data-checkout-valid="false"])
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="checking"]
    )
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="information-required"]
    )
    > .checkout-inline-place-order
    button,
  .united-checkout-flow
    .checkout-payment-card
    div:has(
      > c-zero-dollar-order-with-alt-payment[data-payment-state="payment-preparing"]
    )
    > .checkout-inline-place-order
    button,
  .united-checkout-shell .checkout-inline-place-order button:disabled {
    border-color: #c9d2da;
    background: #dfe5ea;
    color: #5f6f7d;
  }

  .united-checkout-flow .checkout-payment-card {
    padding: 0.25rem 0.375rem 0.5rem;
  }

  .united-checkout-flow
    .checkout-payment-card
    > commerce_builder-checkout-payment-sheet-with-purchase-order {
    padding: 0.25rem 0.75rem 0.375rem;
  }

  .united-checkout-flow .checkout-payment-card > c-checkout-billing-address {
    padding: 0.5rem 0.75rem 0.625rem;
  }

  .united-checkout-flow .checkout-payment-card c-checkout-promo-code {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .checkout-package-panel {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .united-checkout-shell community_layout-column:has(.checkout-package-panel) {
    position: static;
    z-index: auto;
    width: 0;
    height: 0;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    background: transparent;
  }

  .united-checkout-shell *:has(> .checkout-package-panel) {
    position: static;
    padding: 0;
    overflow: visible;
    --united-package-action-height: 2.375rem;
    --united-package-action-gap: 0.4375rem;
    --united-package-actions-padding: 0.4375rem 0.75rem 0.5rem;
    --united-package-back-width: 6rem;
  }

  .checkout-sidebar-back,
  .checkout-sidebar-place-order,
  .checkout-sidebar-place-order commerce-action-button {
    display: none;
  }

  /* Experience Cloud renders the native Place Order host with
     `display: contents`, so hiding only the host can leave its button in the
     document flow. Keep both checkout actions hidden while the shared mobile
     package panel is collapsed, exactly like Add-ons. */
  .checkout-sidebar-back button,
  .checkout-sidebar-place-order button {
    display: none !important;
  }

  .united-checkout-shell
    .column-content:has(
      > c-cart-package-panel[data-action-mode="checkout"][data-expanded="true"]
    )
    .checkout-sidebar-back {
    position: fixed;
    right: 1.5rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    left: calc(
      1.5rem + var(--united-package-back-width) +
        var(--united-package-action-gap)
    );
    z-index: 9000;
    display: block;
    margin: 0;
    width: auto;
  }

  .united-checkout-shell
    .column-content:has(
      > c-cart-package-panel[data-action-mode="checkout"][data-expanded="true"]
    )
    .checkout-sidebar-place-order
    commerce-action-button {
    position: fixed;
    right: 1.5rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    left: calc(
      1.5rem + var(--united-package-back-width) +
        var(--united-package-action-gap)
    );
    z-index: 9000;
    display: block;
    width: auto;
    margin: 0;
  }

  .united-checkout-shell
    .column-content:has(
      > c-cart-package-panel[data-action-mode="checkout"][data-expanded="true"]
    )
    .checkout-sidebar-back {
    right: auto;
    left: 1.5rem;
    width: var(--united-package-back-width) !important;
  }

  .united-checkout-shell
    .column-content:has(
      > c-cart-package-panel[data-action-mode="checkout"][data-expanded="true"]
    )
    .checkout-sidebar-back
    button,
  .united-checkout-shell
    .column-content:has(
      > c-cart-package-panel[data-action-mode="checkout"][data-expanded="true"]
    )
    .checkout-sidebar-place-order
    commerce-action-button
    button {
    display: block !important;
  }
}