/* Checkout + cart skin. The surface itself is always light: gateway-hosted card iframes render on
   their own white/cream background and cannot be themed to match, so inheriting a dark merchant
   palette here put a black cardholder-name input next to white card fields. Merchant continuity
   comes from the accent, typography, corner radius and logo instead — never the surface colours.

   Merchant-authored CustomCss is NEVER emitted into this layout — only the trusted token block. The
   .co-mor merchant-of-record bar and the .co-secure badge are Settld's statements and are pinned to
   fixed values rather than merchant tokens. */

.co-shell {
    --co-bg: var(--settld-paper);
    --co-surface: var(--settld-white);
    --co-text: var(--settld-carbon);
    --co-muted: var(--settld-ink-70);
    --co-border: var(--settld-mist);
    --co-primary: var(--st-primary, var(--settld-thread-teal));
    --co-primary-text: var(--st-primary-text, var(--settld-carbon));
    --co-accent: var(--st-accent, var(--co-primary));
    --co-radius: var(--st-radius, var(--settld-radius-inner));
    --co-radius-lg: var(--st-radius-lg, var(--settld-radius-card));
    --co-font: var(--st-font-body, "Inter Variable", "Inter", system-ui, sans-serif);
    --co-font-heading: var(--st-font-heading, var(--co-font));

    --co-mark-surface: var(--settld-paper);
    --co-mark-text: var(--settld-carbon);

    color-scheme: light;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--co-bg);
    color: var(--co-text);
    font-family: var(--co-font);
}

/* The store index is Settld's own page, not a merchant's, so it takes the back office's Carbon
   surface rather than the light one. Only this route: every other CheckoutLayout page carries a
   gateway-hosted card iframe that renders on its own white background and cannot follow us dark. */
.co-shell[data-surface="carbon"] {
    --co-bg: var(--settld-carbon);
    --co-surface: var(--settld-carbon-2);
    --co-text: var(--settld-white);
    --co-muted: rgba(255, 255, 255, 0.68);
    --co-border: rgba(255, 255, 255, 0.08);
    --co-primary: var(--settld-thread-teal);
    --co-primary-text: var(--settld-carbon);
    --co-mark-surface: rgba(255, 255, 255, 0.05);
    --co-mark-text: var(--settld-thread-teal);

    color-scheme: dark;
}

/* Same content-box overflow the storefront shell had: without border-box the padding is added to a
   full-width box and the payment funnel scrolls sideways on a phone. */
.co-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding-inline: 1.25rem;
}

.co-wrap--narrow {
    max-width: 34rem;
}

/* Header: merchant identity on the left, Settld's assurance on the right. Both always present —
   the shopper should never have to guess who they are buying from or who is taking the money. */

.co-header {
    background: var(--co-surface);
    border-bottom: 1px solid var(--co-border);
}

.co-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.95rem;
}

.co-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.co-brand__logo {
    max-height: 2.1rem;
    max-width: 10rem;
    object-fit: contain;
}

/* Settld's own wordmark, shown when the funnel is not entered from a merchant store. Locked art,
   so no colour is applied here. The master bakes its 2X clear space into the viewBox, hence the
   box being roughly twice the height of the letterforms it shows. */
.co-brand__settld {
    height: 3.2rem;
    width: auto;
    margin-block: -0.75rem;
}

/* A merchant with no logo of their own gets their initials, not Settld's glyph - this slot is the
   merchant's identity. Neutral surface rather than the action colour, so the only teal on the page
   stays the thing you press. */
.co-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    background: var(--co-mark-surface);
    color: var(--co-mark-text);
    font-family: var(--co-font-heading);
    font-size: 0.8rem;
}

.co-brand__name {
    font-family: var(--co-font-heading);
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-secure {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgb(16 19 26 / 0.12);
    border-radius: 9999px;
    background: rgb(16 19 26 / 0.04);
    color: #10131a;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
}

.co-secure svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

.co-secure__brand {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Pinned to fixed values rather than merchant tokens, so the Carbon surface is the one case that
   has to restate them - a merchant cannot reach either of these rules. */
.co-shell[data-surface="carbon"] .co-secure {
    border-color: rgb(255 255 255 / 0.14);
    background: rgb(255 255 255 / 0.05);
    color: var(--settld-white);
}

.co-shell[data-surface="carbon"] .co-mor {
    background: var(--settld-carbon-2);
}

/* Main grid: payment on the left, order summary on the right. */

.co-main {
    flex: 1 0 auto;
    padding-block: 2.25rem 3rem;
}

.co-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.co-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
}

.co-card {
    padding: 1.35rem;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius-lg);
    background: var(--co-surface);
}

.co-card + .co-card {
    margin-top: 1rem;
}

.co-card__title {
    margin: 0 0 0.35rem;
    font-family: var(--co-font-heading);
    font-size: 1.02rem;
    font-weight: 600;
}

.co-card__hint {
    margin: 0 0 1rem;
    color: var(--co-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.co-payment-stage {
    scroll-margin-block: 1rem;
    animation: co-payment-stage-enter 260ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.co-payment-stage__title {
    margin-bottom: 1rem;
}

.co-payment-stage:focus {
    outline: none;
}

.co-payment-stage:focus-visible {
    outline: 2px solid var(--co-primary);
    outline-offset: 2px;
}

.co-hosted-field-proxy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@keyframes co-payment-stage-enter {
    from {
        opacity: 0;
        transform: translateY(min(12vh, 5rem));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section micro-label — small, tracked and uppercase, so the eye reads the structure of the page
   before any of its content. */

.co-label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--co-muted);
    font-size: 0.7rem;
    font-weight: 550;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Order head: what is being bought on the left, what it costs on the right. */

.co-amount {
    margin-bottom: 2rem;
}

.co-amount__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
}

.co-amount__title {
    margin: 0;
    font-family: var(--co-font-heading);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.co-amount__value {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--co-font-heading);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.co-amount__meta {
    margin: 0.5rem 0 0;
    color: var(--co-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.co-amount__meta code {
    color: inherit;
    font-size: 0.8rem;
}

/* One neutral mark set. The glyphs already tell the routes apart, so six competing hues on a payment
   list only added noise and none of them were brand colours. Teal is spent on the row the customer
   has actually selected, which means exactly one thing in the list is ever coloured. */
.co-mark {
    --co-mark-color: var(--co-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: calc(var(--co-radius) * 0.8);
    background: color-mix(in srgb, var(--co-mark-color) 12%, transparent);
    color: var(--co-mark-color);
}

.co-mark svg {
    width: 1.35rem;
    height: 1.35rem;
}

.co-wallet-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 0;
}

.co-wallet-mark svg {
    display: block;
    width: auto;
    height: 1.6rem;
    max-width: 100%;
}

/* Form fields. The card number/expiry/CVV are gateway-hosted iframes that can only be styled through
   the SDK's own string DSL (see checkout-tokenize.js) - these values and that DSL's have to be kept
   in step, or the cardholder name sits in a differently-coloured box to the card fields beside it. */

.co-field {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 1rem;
}

.co-field__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 550;
    color: var(--co-text);
}

/* 60px, not a rem-relative value: the gateway's SDK sets that height inline on the iframe it mounts,
   which no external rule can beat, so the plain inputs match it rather than the other way around. */
.co-field__input {
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 0.75rem;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    background: var(--co-surface);
    color: var(--co-text);
    font-family: var(--co-font);
    font-size: 1rem;
}

.co-field__input:focus {
    outline: 2px solid var(--co-primary);
    outline-offset: 1px;
    border-color: var(--co-primary);
}

.co-field-row {
    display: flex;
    gap: 0.75rem;
}

.co-fieldset {
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--co-border);
}

/* The single commitment on the page. */

.co-cta {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.05rem 1.5rem;
    border: 0;
    border-radius: var(--co-radius);
    background: var(--co-primary);
    color: var(--co-primary-text);
    font-family: var(--co-font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.co-cta:hover {
    filter: brightness(0.94);
}

.co-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    color: var(--co-muted);
    font-size: 0.7rem;
    font-weight: 550;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.co-foot svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 auto;
}

/* Order summary */

.co-summary {
    position: sticky;
    top: 1.5rem;
}

.co-summary__title {
    margin: 0 0 0.9rem;
    font-family: var(--co-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
}

.co-lines {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--co-border);
    list-style: none;
}

.co-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.co-line__name {
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.co-line__qty {
    display: block;
    margin-top: 0.15rem;
    color: var(--co-muted);
    font-size: 0.8rem;
}

.co-line__amount {
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.co-totals {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.co-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: var(--co-muted);
    font-size: 0.88rem;
}

.co-total__value {
    font-variant-numeric: tabular-nums;
}

.co-total--grand {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--co-border);
    color: var(--co-text);
    font-family: var(--co-font-heading);
    font-size: 1.08rem;
    font-weight: 650;
}

/* Mobile is one column: the order head, the itemised breakdown as a disclosure directly under it,
   then the methods and the single pay button. The sticky desktop aside carries the same breakdown,
   so exactly one of the two is ever visible. CSS-only, so it works under static SSR. */

.co-summary__toggle {
    display: none;
    margin-bottom: 2rem;
}

@media (max-width: 860px) {
    .co-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .co-summary {
        position: static;
    }

    .co-summary__toggle {
        display: block;
    }

    .co-summary__toggle > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.9rem 1.05rem;
        border: 1px solid var(--co-border);
        border-radius: var(--co-radius);
        background: var(--co-surface);
        cursor: pointer;
        list-style: none;
        font-size: 0.9rem;
    }

    .co-summary__toggle > summary::-webkit-details-marker {
        display: none;
    }

    .co-summary__toggle > summary .co-summary__toggle-total {
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    .co-summary__toggle[open] > summary {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .co-summary__toggle .co-card {
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .co-summary__desktop {
        display: none;
    }
}

@media (min-width: 861px) {
    .co-summary__toggle {
        display: none;
    }
}

/* Buttons */

.co-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--co-radius);
    font-family: var(--co-font);
    font-size: 0.95rem;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.co-btn:hover {
    filter: brightness(0.94);
}

.co-btn--primary {
    background: var(--co-primary);
    border-color: var(--co-primary);
    color: var(--co-primary-text);
}

.co-btn--secondary {
    background: transparent;
    border-color: var(--co-border);
    color: var(--co-text);
}

.co-btn--block {
    width: 100%;
}

.co-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.co-actions form {
    display: contents;
}

/* Progress rail */

.co-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--co-muted);
    font-size: 0.8rem;
}

.co-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.co-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--co-border);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.co-step--current {
    color: var(--co-text);
    font-weight: 550;
}

.co-step--current .co-step__dot {
    border-color: var(--co-primary);
    background: var(--co-primary);
    color: var(--co-primary-text);
}

.co-step--done .co-step__dot {
    border-color: var(--co-primary);
    color: var(--co-primary);
}

.co-steps__sep {
    flex: 0 0 1.25rem;
    height: 1px;
    background: var(--co-border);
}

/* Notices */

.co-notice {
    display: flex;
    gap: 0.7rem;
    padding: 0.95rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    background: var(--co-surface);
    font-size: 0.9rem;
    line-height: 1.5;
}

.co-notice--success {
    border-color: #b9dcc9;
    background: #e9f6ef;
    color: #0f4a30;
}

.co-notice--danger {
    border-color: #e3b7b1;
    background: #fbeceb;
    color: #6e241d;
}

.co-notice--warning {
    border-color: #e8cfa0;
    background: #fdf4e3;
    color: #6b4d15;
}

.co-notice--info {
    border-color: #b9cddd;
    background: #eaf2f9;
    color: #274a68;
}

.co-notice p {
    margin: 0;
}

.co-notice p + p {
    margin-top: 0.35rem;
}

.co-notice strong,
.co-notice a,
.co-notice code {
    color: inherit;
}

.co-notice a {
    font-weight: 600;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
}

.co-notice code {
    background: rgb(255 255 255 / 0.45);
}

/* Cart line items */

.co-cart {
    display: flex;
    flex-direction: column;
}

.co-cart__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--co-border);
}

.co-cart__row:first-child {
    padding-top: 0;
}

.co-cart__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.co-cart__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.co-cart__unit {
    display: block;
    margin-top: 0.15rem;
    color: var(--co-muted);
    font-size: 0.82rem;
}

.co-qty {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    overflow: hidden;
}

.co-qty form {
    display: contents;
}

.co-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: var(--co-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.co-qty__btn:hover {
    background: color-mix(in srgb, var(--co-text) 6%, transparent);
}

.co-qty__value {
    min-width: 2rem;
    text-align: center;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.co-cart__amount {
    flex: 0 0 auto;
    min-width: 5rem;
    text-align: right;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.co-cart__remove {
    flex: 0 0 auto;
    padding: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--co-muted);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.co-cart__remove:hover {
    color: #b42318;
}

/* Merchant-of-record bar. Settld's disclosure, deliberately outside the merchant's palette so it
   reads as the platform speaking rather than the store. Never themed, never merchant-editable. */

.co-mor {
    flex-shrink: 0;
    padding-block: 1.1rem;
    background: #10131a;
    color: rgb(255 255 255 / 0.72);
    font-size: 0.8rem;
    line-height: 1.55;
}

.co-mor__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.co-mor__icon {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    color: #ffffff;
}

.co-mor strong {
    color: #ffffff;
    font-weight: 650;
}

.co-mor__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.35rem;
}

.co-mor__links a {
    color: rgb(255 255 255 / 0.72);
    text-decoration: underline;
}

.co-mor__links a:hover {
    color: #ffffff;
}

/* Inline checkout only. The SDK sizes the frame from the height this page reports, so a shell that
   claims 100vh would claim the full height of the frame it just caused to grow - the frame gets taller,
   the shell matches it, and neither settles. Set by checkout-lifecycle.js on <html> when the page is
   framed; a full-page checkout never sees this and keeps filling the viewport as before. */
html[data-settld-embed="true"] .co-shell {
    min-height: 0;
}

@media (max-width: 575.98px) {
    .co-wrap {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .co-header__inner {
        gap: 0.5rem;
        padding-block: 0.75rem;
    }

    .co-brand__logo {
        max-width: 7.5rem;
    }

    .co-brand__name {
        max-width: 42vw;
    }

    .co-secure {
        gap: 0.3rem;
        padding: 0.35rem 0.55rem;
    }

    .co-main {
        padding-block: 1.25rem 2rem;
    }

    .co-card {
        padding: 1rem;
    }

    .co-amount {
        margin-bottom: 1.5rem;
    }

    .co-field-row {
        display: block;
    }

    .co-btn,
    .co-qty__btn,
    .co-cart__remove {
        min-height: 2.75rem;
    }

    .co-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .co-actions .co-btn,
    .co-actions .btn {
        width: 100%;
        min-height: 2.75rem;
    }

    .co-cart__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .co-cart__name {
        grid-column: 1 / -1;
    }

    .co-cart__amount {
        min-width: 0;
        align-self: center;
    }

    .co-cart__row > form {
        grid-column: 1 / -1;
    }

    .co-cart__remove {
        padding-inline: 0;
    }
}

@media (max-width: 390px) {
    .co-secure__prefix {
        display: none;
    }

    .co-amount__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}

.co-discount {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--co-border);
}

.co-discount__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.co-discount__row .co-field__input {
    height: 44px;
    text-transform: uppercase;
}

.co-discount__row .co-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.co-total--discount {
    color: var(--co-text);
}

.co-total--discount .co-total__value {
    color: var(--co-primary);
}

.co-total--discount .co-cart__remove {
    margin-left: 0.5rem;
}

/* Checkout redesign v2 */
.ck-wrap {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 36px;
    align-items: start;
    padding: 28px 0 40px;
}

.ck-wrap--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
}

.ck-paycol {
    max-width: 520px;
    min-width: 0;
}

.ck-sumcol {
    position: sticky;
    top: 24px;
}

.ck-num {
    font-variant-numeric: tabular-nums;
}

.ck-micro {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--settld-ink-70, #70726F);
}

.ck-ln {
    flex: 1;
    height: 1px;
    background: var(--settld-hairline, #E4E6E4);
}

.ck-xhead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ck-xbtns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ck-xbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    border-radius: var(--settld-radius, 12px);
    border: 1px solid var(--settld-carbon, #0B0C0D);
    background: var(--settld-carbon, #0B0C0D);
    color: #fff;
    cursor: pointer;
    padding: 0 14px;
}

.ck-xbtn[data-rail="google_pay"] {
    background: #fff;
    color: #3C4043;
    border-color: var(--settld-hairline, #E4E6E4);
}

.ck-xbtn .co-wallet-mark svg {
    height: 20px;
    width: auto;
}

.ck-xbtn:hover {
    filter: brightness(1.1);
}

.ck-xmore {
    grid-column: 1 / -1;
}

.ck-xmore > summary {
    font-size: 12px;
    color: var(--settld-ink-70, #70726F);
    cursor: pointer;
    text-decoration: underline;
    list-style: none;
    text-align: center;
}

.ck-xmore > summary::-webkit-details-marker {
    display: none;
}

.ck-xmore[open] > summary {
    margin-bottom: 10px;
}

.ck-xmore .ck-xbtn {
    width: 100%;
}

.ck-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 12px;
    color: var(--settld-ink-70, #70726F);
}

.ck-fld {
    margin-bottom: 16px;
}

.ck-fld--tight {
    margin-bottom: 8px;
}

.ck-fld label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--settld-carbon, #0B0C0D);
    margin-bottom: 6px;
}

.ck-fld-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
}

.ck-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: var(--settld-radius-sm, 10px);
    border: 1px solid var(--settld-hairline, #E4E6E4);
    background: #fff;
    color: var(--settld-carbon, #0B0C0D);
    font: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.ck-input:focus {
    outline: none;
    border-color: var(--settld-thread-teal, #00C2A8);
    box-shadow: 0 0 0 3px var(--settld-teal-20, #CCF3ED);
    background: #fff;
}

.ck-hosted {
    height: 46px;
    border-radius: var(--settld-radius-sm, 10px);
    border: 1px solid var(--settld-hairline, #E4E6E4);
    background: #fff;
    overflow: hidden;
}

.ck-hosted > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ck-hosted-proxy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ck-fh {
    font-size: 12px;
    line-height: 1.45;
    color: var(--settld-ink-70, #70726F);
    margin-top: 7px;
}

.ck-fh b {
    color: var(--settld-carbon, #0B0C0D);
    font-weight: 600;
}

.ck-fh svg {
    vertical-align: -2px;
    margin-right: 2px;
}

.ck-fh--lock {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ck-contact-known {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: var(--settld-radius-sm, 10px);
    background: var(--settld-teal-20, #CCF3ED);
}

.ck-contact-known .ck-fh {
    margin: 0;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-error {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--settld-radius-sm, 10px);
    background: #F9E9E8;
    color: #8C1D18;
    font-size: 13px;
    line-height: 1.45;
}

.ck-error a {
    color: inherit;
    font-weight: 600;
}

.ck-error--wide {
    text-align: left;
    max-width: 480px;
    margin: 18px auto 0;
}

.ck-methods {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.ck-meth {
    display: block;
    border: 1px solid var(--settld-hairline, #E4E6E4);
    border-radius: var(--settld-radius, 12px);
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ck-meth:hover {
    border-color: var(--settld-mist, #C9CCCA);
}

.ck-meth__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ck-meth__head {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
}

.ck-radio {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid var(--settld-mist, #C9CCCA);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ck-meth__t {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-meth__s {
    display: block;
    font-size: 11px;
    color: var(--settld-ink-70, #70726F);
    margin-top: 1px;
}

.ck-logos {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ck-logo svg {
    display: block;
}

.ck-lg {
    font-size: 11px;
    font-weight: 600;
    color: var(--settld-ink-70, #70726F);
    padding-left: 2px;
}

.ck-meth__body {
    display: none;
    padding: 2px 15px 16px 43px;
}

.ck-meth--soon {
    cursor: not-allowed;
    background: var(--settld-paper, #F7F8F7);
}

.ck-meth--soon:hover {
    border-color: var(--settld-hairline, #E4E6E4);
}

.ck-meth--soon .ck-meth__t,
.ck-meth--soon .ck-meth__s {
    color: var(--settld-ink-50, #9A9C99);
}

.ck-meth--soon .ck-radio {
    border-style: dashed;
    background: transparent;
}

.ck-meth--soon .ck-logo {
    opacity: 0.45;
    filter: grayscale(1);
}

.ck-soon {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--settld-ink-70, #70726F);
    background: #fff;
    border: 1px solid var(--settld-hairline, #E4E6E4);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    white-space: nowrap;
}

.ck-meth:has(.ck-meth__radio:checked) {
    border-color: var(--settld-thread-teal, #00C2A8);
    box-shadow: 0 0 0 1px var(--settld-thread-teal, #00C2A8);
}

.ck-meth:has(.ck-meth__radio:checked) .ck-radio {
    border: 5.5px solid var(--settld-thread-teal, #00C2A8);
}

.ck-meth:has(.ck-meth__radio:checked) .ck-meth__body {
    display: block;
}

.ck-meth:has(.ck-meth__radio:focus-visible) {
    outline: 2px solid var(--settld-thread-teal, #00C2A8);
    outline-offset: 2px;
}

@supports not selector(:has(*)) {
    .ck-meth__body {
        display: block;
    }
}

.ck-cardrow {
    display: grid;
    gap: 9px;
}

.ck-cardrow .ck-input {
    font-size: 14px;
}

.ck-cardrow__details {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr) 72px 44px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 46px;
    min-width: 0;
    border: 1px solid var(--settld-hairline, #E4E6E4);
    border-radius: 10px;
    background: #fff;
}

.ck-cardrow__icon {
    color: #C9CCCA;
}

.ck-cardrow__details:focus-within {
    border-color: var(--settld-thread-teal, #00C2A8);
}

.ck-cardrow__details .ck-hosted {
    height: 44px;
    min-width: 0;
    border: 0;
    border-radius: 0;
}

.ck-cardrow__details #div_card_number > div {
    width: calc(100% + 128px) !important;
}

.ck-bank-widget {
    min-height: 0;
}

.ck-bank-widget:not([data-idle]) {
    min-height: 120px;
    margin-bottom: 8px;
}

.ck-paywrap {
    margin-top: 20px;
}

.ck-paybtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    border-radius: var(--settld-radius, 12px);
    border: 0;
    background: var(--settld-thread-teal, #00C2A8);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}

.ck-paybtn:hover {
    background: #00B098;
}

.ck-paybtn:disabled {
    opacity: 0.6;
    cursor: default;
}

.ck-paybtn--inline {
    max-width: 320px;
    margin: 18px auto 0;
}

.ck-subnote {
    margin-top: 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--settld-ink-70, #70726F);
}

.ck-subnote b {
    color: var(--settld-carbon, #0B0C0D);
    font-weight: 600;
}

.ck-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    font-size: 10.5px;
    color: var(--settld-ink-70, #70726F);
}

.ck-trust span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ck-trust b {
    color: var(--settld-carbon, #0B0C0D);
    font-weight: 600;
}

.ck-sum {
    border: 1px solid var(--settld-hairline, #E4E6E4);
    border-radius: var(--settld-radius, 12px);
    background: #fff;
    overflow: hidden;
}

.ck-sum__check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ck-sum__toggle {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
}

.ck-sum__label {
    font-size: 12.5px;
    color: var(--settld-ink-70, #70726F);
    flex: 1;
}

.ck-amt {
    font-size: 15px;
    font-weight: 600;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-chev {
    transition: transform 160ms ease;
}

.ck-sum__body {
    padding: 20px;
}

.ck-sum__body h3 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-sum-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.ck-sum-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--settld-paper, #F5F6F5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-sum-item__t {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-sum-item__s {
    display: block;
    font-size: 11.5px;
    color: var(--settld-ink-70, #70726F);
    margin-top: 2px;
}

.ck-sum-item__p {
    font-size: 14px;
    font-weight: 500;
    color: var(--settld-carbon, #0B0C0D);
    white-space: nowrap;
}

.ck-sum-rows {
    display: grid;
    gap: 8px;
}

.ck-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--settld-ink-70, #70726F);
}

.ck-sum-row--strong {
    color: var(--settld-carbon, #0B0C0D);
    font-weight: 500;
}

.ck-sum-row--pos {
    color: #00806F;
}

.ck-sum-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--settld-hairline, #E4E6E4);
    font-size: 16px;
    font-weight: 600;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-sum-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--settld-ink-70, #70726F);
}

.ck-mor {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--settld-hairline, #E4E6E4);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--settld-ink-70, #70726F);
}

.ck-mor svg {
    flex: 0 0 13px;
    margin-top: 2px;
}

.ck-mor b {
    color: var(--settld-carbon, #0B0C0D);
    font-weight: 600;
}

.ck-state {
    box-sizing: border-box;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 20px;
}

.ck-state h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 18px 0 8px;
    color: var(--settld-carbon, #0B0C0D);
}

.ck-state p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--settld-ink-70, #70726F);
    margin: 0 auto;
    max-width: 420px;
}

.ck-state p b {
    color: var(--settld-carbon, #0B0C0D);
    font-weight: 600;
}

.ck-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--settld-teal-20, #CCF3ED);
    color: #007562;
    font-size: 28px;
    font-weight: 700;
}

.ck-state__icon--neg {
    background: #F9E9E8;
    color: #8C1D18;
}

.ck-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(0, 117, 98, 0.25);
    border-top-color: #007562;
    animation: ck-spin 800ms linear infinite;
}

@keyframes ck-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ck-spinner {
        animation-duration: 2s;
    }
}

.ck-receipt {
    margin: 22px 0;
    max-width: 100%;
    text-align: left;
    border: 1px solid var(--settld-hairline, #E4E6E4);
    border-radius: var(--settld-radius, 12px);
    padding: 20px;
    box-shadow: 0 1px 2px rgba(11,12,13,.05), 0 4px 16px rgba(11,12,13,.04);
    background: #fff;
}

.ck-receipt .ck-sum-row {
    font-size: 12.5px;
    padding: 3px 0;
    gap: 12px;
}

.ck-receipt .ck-sum-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ck-receipt .ck-sum-row > span:last-child {
    flex: 1;
    text-align: right;
}

.ck-receipt .ck-sum-row > span:first-child {
    flex-shrink: 0;
    max-width: 55%;
}

.ck-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.ck-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--settld-hairline, #E4E6E4);
    background: #fff;
    color: var(--settld-carbon, #0B0C0D);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.ck-ghost:hover {
    border-color: var(--settld-carbon, #0B0C0D);
    color: var(--settld-carbon, #0B0C0D);
}

.ck-state__return {
    flex-basis: 100%;
}

.ck-state .ck-state__foot {
    margin-top: 22px;
    font-size: 11px;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .ck-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 14px 0 120px;
    }

    .ck-paycol {
        max-width: none;
        order: 2;
    }

    .ck-sumcol {
        position: static;
        order: 1;
    }

    .ck-sum__toggle {
        display: flex;
    }

    .ck-sum__body {
        display: none;
        border-top: 1px solid var(--settld-hairline, #E4E6E4);
    }

    .ck-sum__check:checked ~ .ck-sum .ck-sum__body {
        display: block;
    }

    .ck-sum__check:checked ~ .ck-sum .ck-chev {
        transform: rotate(180deg);
    }

    .ck-paywrap {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        margin: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--settld-hairline, #E4E6E4);
    }

    .ck-trust {
        display: flex;
        margin-top: 7px;
        gap: 10px;
        font-size: 9.5px;
    }

    .ck-subnote {
        margin-top: 6px;
    }

    .ck-meth__head {
        padding: 12px 14px;
    }

    .ck-meth__body {
        padding: 0 14px 14px 14px;
    }

    .ck-fld-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ck-bankgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ck-bank {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.ck-bank input {
    position: absolute;
    opacity: 0;
}
.ck-bank span {
    display: block;
    padding: 10px 6px;
    border: 1px solid var(--co-border);
    border-radius: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
}
.ck-bank input:checked + span {
    border-color: var(--co-primary);
    box-shadow: 0 0 0 1px var(--co-primary);
}
.ck-bank input:focus-visible + span {
    outline: 2px solid var(--co-primary);
    outline-offset: 3px;
}

.co-shell[data-checkout-v2] {
    font-size: 14px;
    line-height: 1.45;
}
.co-shell[data-checkout-v2] .co-wrap {
    max-width: 1040px;
}
.co-shell[data-checkout-v2] .co-main {
    padding: 0;
}
.co-shell[data-checkout-v2] .co-header__inner {
    padding-block: 14px;
}
.co-shell[data-checkout-v2] .co-brand__name {
    font-size: 14.5px;
}
.co-shell[data-checkout-v2] .co-brand__mark,
.co-shell[data-checkout-v2] .co-brand__logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 13px;
}
.ck-paycol {
    width: 100%;
    justify-self: end;
}
.ck-meth__head {
    margin: 0;
    cursor: pointer;
}
.ck-sum {
    box-shadow: 0 1px 2px rgba(11,12,13,.05), 0 4px 16px rgba(11,12,13,.04);
}

.ck-order-editor {
    margin-top: 12px;
    font-size: 12px;
}
.ck-order-editor summary {
    cursor: pointer;
    color: var(--co-muted);
}
.ck-order-editor form {
    margin-top: 12px;
}

.ck-xbtn[data-rail="apple_pay"] .co-wallet-mark path,
.ck-xbtn[data-rail="apple_pay"] .co-wallet-mark text,
.ck-xbtn[data-rail="samsung_pay"] .co-wallet-mark text { fill: #fff; }

.co-shell[data-checkout-v2="true"] .co-brand__mark {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: #CCF3ED;
    color: #007562;
}

.co-shell[data-checkout-v2="true"] .co-secure {
    padding: 0;
    border: 0;
    background: transparent;
    color: #70726F;
    font-size: 11.5px;
}

.co-shell[data-checkout-v2="true"] .co-secure__brand {
    color: #0B0C0D;
}

/* Recurring-terms consent: sits between the method chooser and the pay button so the agreement is the
   last thing read before paying. The implicit variant is the one-off purchase's pay-tap wording. */
.ck-consent {
    margin: 14px 0 6px;
    padding: 12px 14px;
    border: 1px solid var(--ck-line, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.ck-consent--implicit {
    border: 0;
    padding: 0 2px;
    opacity: 0.8;
    font-size: 12px;
}

.ck-consent__row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.ck-consent__row input {
    margin-top: 3px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.ck-consent__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 12px;
}

.ck-consent__links a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ck-policy {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 0 48px;
}

.ck-policy__text {
    white-space: pre-wrap;
    font: inherit;
    line-height: 1.55;
}

.ck-policy__version {
    opacity: 0.6;
    font-size: 12px;
}