/* Both parts of the order journey use the same centered step groups and connecting rail. */
.staged-checkout .transaction-progress,.guided-confirmation #order-timeline.transaction-progress{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%;max-width:none;padding:0;list-style:none;border:0}
.staged-checkout .transaction-progress::before,.guided-confirmation #order-timeline.transaction-progress::before{content:'';position:absolute;top:16px;left:12%;right:12%;border-top:1px solid #cbdce6}
.staged-checkout .transaction-progress>li,.guided-confirmation #order-timeline.transaction-progress>li{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;min-width:0;padding:0}
.staged-checkout .transaction-progress>li::after,.guided-confirmation #order-timeline.transaction-progress>li::after{display:none}
.staged-checkout .transaction-progress .transaction-progress-step,.guided-confirmation #order-timeline.transaction-progress .transaction-progress-step{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;width:max-content;max-width:100%;padding:0 7px;background:var(--canvas);justify-self:center}
.staged-checkout .checkout-progress,.guided-confirmation #order-timeline.transaction-progress{width:calc(100% - 401px);max-width:none}
@media(max-width:1100px){.staged-checkout .checkout-progress,.guided-confirmation #order-timeline.transaction-progress{width:calc(100% - 324px)}}
@media(max-width:850px){.staged-checkout .checkout-progress,.guided-confirmation #order-timeline.transaction-progress{width:100%}}
@media(max-width:680px){.staged-checkout .transaction-progress .transaction-progress-step,.guided-confirmation #order-timeline.transaction-progress .transaction-progress-step{padding-inline:5px;gap:5px}}