
.accfs-bar {
    /* Tokens base */
    --accfs-track-bg: #e8eef5;
    --accfs-text: #1A1A1A;
    --accfs-title: #1A1A1A;
    --accfs-bg: #F8FAFC;
    --accfs-missing: #E68232; 
    --accfs-fill: #02559F;
    --accfs-highlight: #E68232; 

    margin: 8px 0 12px;
    padding: 1.5rem;
    font-family: inherit;
    color: var(--accfs-text);
    background-color: var(--accfs-bg);
}

.accfs-bar__text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--accfs-text);
}

.accfs-bar__title,
.accfs-bar__detail {
    display: block;
}

.accfs-bar__title {
    color: var(--accfs-title);
    font-weight: 700;
}

.accfs-bar__missing,
.accfs-bar__threshold {
    font-weight: 700;
}

.accfs-bar__missing {
    color: var(--accfs-missing);
}

.accfs-bar__threshold {
    color: var(--accfs-highlight);
}

.accfs-bar__track {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--accfs-track-bg);
    border-radius: 999px;
    overflow: hidden;
}

.accfs-bar__fill {
    display: block;
    height: 100%;
    background: var(--accfs-fill);
    border-radius: inherit;
    transition: width .35s ease;
}


.accfs-bar--state-1 {
    --accfs-fill: #02559F;       
    --accfs-highlight: #E68232;  
}

.accfs-bar--state-2 {
    --accfs-fill: #039855;      
    --accfs-highlight: #039855; 
}

.accfs-bar--state-3 {
    --accfs-fill: #E68232;      
    --accfs-highlight: #E68232; 
}

.accfs-bar--state-4 {
    --accfs-fill: #7C3AED;      
    --accfs-highlight: #7C3AED; 
}

.accfs-bar--state-5 {
    --accfs-fill: #039855;      
    --accfs-highlight: #039855; 
}

.accfs-bar--complete .accfs-bar__fill {
    width: 100% !important;
}

#blockcart-content {
    --accfs-bleed-x: 1rem;
}

#blockcart-content > .accfs-bar {
    box-sizing: border-box;
    width: calc(100% + 2 * var(--accfs-bleed-x));
    max-width: none;
    margin-inline: calc(-1 * var(--accfs-bleed-x));
    border-bottom: 1px solid #DEDEDE !important;
}
