.timeline-ssw { position: relative; padding-left: 24px; }
.timeline-ssw::before {
    content: '';
    position: absolute;
    left: 7px; top: 6px; bottom: 6px;
    width: 2px;
    background: #e2e8f0;
}
.timeline-ssw__item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
}
.timeline-ssw__item:last-child { padding-bottom: 0; }
.timeline-ssw__dot {
    position: absolute;
    left: -21px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #cbd5e1;
    flex-shrink: 0;
}
.timeline-ssw__dot--past {
    background: #94a3b8;
    box-shadow: 0 0 0 2px #94a3b8;
}
.timeline-ssw__dot--active {
    background: var(--color-primary, #e21d26);
    box-shadow: 0 0 0 2px var(--color-primary, #e21d26);
}
.timeline-ssw__dot--delivered {
    background: #16a34a;
    box-shadow: 0 0 0 2px #16a34a;
}
.timeline-ssw__body { flex: 1; }