.site-wide-fulfillment__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-x2);
}

.fulfillment-select-container {
    display: flex;
    gap: var(--space);
    width: 100%;
}

.fulfillment-select-button {
    min-width: 160px;
}

/* Fulfillment button error state */
.fulfillment-select-button:not(.has-warning) .ui-button__icon.warning-icon {
    display: none;
}

.fulfillment-select-button.has-warning {
    color: var(--theme-warning-20);

    /* Too many button styles to override with specificity */
    background-color: var(--theme-warning-40) !important
}

.fulfillment-option {
    position: relative;
    display: grid;
    grid-template-areas: "title button" "value button" "subtext button";
    grid-template-columns: 1fr auto;
    column-gap: var(--space);
    align-items: center;
}

.fulfillment-option__title {
    grid-area: title;
    font: var(--theme-paragraph-10);
    color: var(--theme-text-20);
    letter-spacing: var(--theme-paragraph-10-letter-spacing);
}

.fulfillment-option__button-wrapper {
    grid-area: button;
}

.fulfillment-option__button-wrapper > button {
    min-width: 95px;
}

.fulfillment-option .ui-loader--overlay {
    min-height: 0;
}

.fulfillment-option__value {
    grid-area: value;
    font-weight: var(--theme-font-weight-semibold);
    word-break: break-word;
}

.fulfillment-option__subtext {
    grid-area: subtext;
    font: var(--theme-paragraph-10);
    font-weight: var(--theme-font-weight-semibold);

}

.fulfillment-select__segmented-control .ui-segmented-control__button-label {
    font: var(--theme-paragraph-20-semibold);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.fulfillment-option__value--warning {
    color: var(--theme-warning-text);
}

.free-delivery-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

.free-delivery-progress__text {
    font-weight: var(--theme-font-weight-medium);
}

.free-delivery-progress_remaining {
    color: var(--theme-warning-text);
}

.free-delivery-progress--progress-bar {
    display: flex;
    gap: var(--space);
    align-items: center;
}

.delivery-progress-bar {
    --ui-progress-bar-color-override: var(--theme-warning-fill);
}