/**
 * Express lane: label, the wallet buttons side by side, and an "or" rule.
 * Squared and 48px high to sit with the theme's own checkout button
 * (.mw-sf-cobtn) rather than looking like a borrowed widget on top of it.
 * The surrounding surface (drawer footer, checkout column, cart summary)
 * supplies the horizontal padding, so the lane carries none.
 */
.mwa-lane {
    margin: 0 0 12px;
}

.mwa-lane__label {
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(20, 20, 22, .55);
    margin: 0 0 8px;
}

.mwa-lane__btns {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.mwa-lane__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
}

/* Apple's element honours these custom properties; without them it keeps its
   default pill inside a square drawer. */
.mwa-lane__btn--apple apple-pay-button {
    display: block;
    width: 100%;
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 48px;
    --apple-pay-button-border-radius: 0;
}

/* CSS-drawn Apple Pay button (apple-pay.js renderButton): Safari paints it. */
.mwa-apple-pay-css-button {
    -webkit-appearance: -apple-pay-button;
    appearance: -apple-pay-button;
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.mwa-lane__btn--google .mwa-gpay,
.mwa-lane__btn--google .mwa-gpay--checkout {
    margin: 0;
    max-width: none;
}

.mwa-lane__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 4px;
    color: rgba(20, 20, 22, .5);
    font-family: var(--mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mwa-lane__or::before,
.mwa-lane__or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(20, 20, 22, .12);
}

/* Top of the checkout form column. */
.mwa-lane--checkout {
    margin: 0 0 32px;
}

.mwa-lane--checkout .mwa-lane__or {
    margin: 16px 0 0;
}

/* Google's saved-card button is wider than a half slot: stack when it overflows
   (googlepay.js adds the class after measuring). */
.mwa-lane--stack .mwa-lane__btns {
    flex-direction: column;
}

/* Two wallets stay side by side down to small phones (about 170px each at 390px). */
@media (max-width: 340px) {
    .mwa-lane--two .mwa-lane__btns {
        flex-direction: column;
    }
}