.beads-delivery-promise {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 18px;
    padding: 11px 13px;
    border: 1px solid #d7e2e1;
    border-radius: 10px;
    background: #f2f8f7;
    color: #17263a;
}

.beads-delivery-promise > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #3f908c;
    color: #fff;
    font-weight: 850;
}

.beads-delivery-promise > div {
    display: grid;
    gap: 2px;
}

.beads-delivery-promise small {
    color: #61707d;
}

.beads-delivery-progress {
    margin: 0 0 22px;
    padding: 17px;
    border: 1px solid #d7e2e1;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff, #eff8f6);
    color: #17263a;
}

.beads-delivery-progress__preview {
    display: inline-block;
    margin-bottom: 8px;
    color: #8a6030;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.beads-delivery-progress.is-preview {
    border-style: dashed;
}

.beads-delivery-progress__heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.beads-delivery-progress__heading > span,
.beads-delivery-progress > small {
    color: #61707d;
    font-size: 12px;
}

.beads-delivery-progress__track {
    height: 9px;
    margin: 12px 0 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe9e7;
}

.beads-delivery-progress__track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #3f908c;
    transition: width .25s ease;
}

.beads-checkout-promise {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #d7e2e1;
    border-radius: 11px;
    background: #f2f8f7;
    color: #17263a;
}

.beads-checkout-promise span {
    color: #61707d;
    font-size: 13px;
}

@media (max-width: 560px) {
    .beads-delivery-progress__heading,
    .beads-checkout-promise {
        align-items: start;
        flex-direction: column;
    }
}