:root {
    --color-primary: #dd6579;
    --color-secondary: #15433d;
    --color-accent: #b0cb7d;
    --spb-circle-size: 60px;
    --spb-line-thickness: 10px;
    --spb-title-line-height: 1.4;
    --spb-title-fs: 2.25rem;
    --spb-responsive-title-fs: 1.75rem;

    @media (max-width: 549px) {
        --spb-circle-size: 44px;
        --spb-title-fs: 1.75rem;
    }
}

.artichoka-spb {
    background-color: #fff;
    border-width: 2px;
    border-radius: 10px;
    border-style: solid;
    border-color: var(--color-secondary);
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.artichoka-spb-container {
    padding: 10px;
}

.artichoka-spb-fragment {
    display: contents;
}

.single-product .artichoka-spb--product {
    margin-top: 2rem;
}

.artichoka-spb__summary {
    text-align: center;
    padding-top: 1rem;
}

.artichoka-spb__disclaimer {
    font-style: italic;
    text-align: center;
    color: var(--color-secondary);
    font-weight: 400;
}

.artichoka-spb-h2 {
    color: var(--color-secondary);
    font-size: var(--spb-title-fs) !important;
    line-height: var(--spb-title-line-height) !important;
}

.nowrap {
    white-space: nowrap;
}

.text-primary {
    color: var(--color-primary);
}

.font-black {
    font-weight: 900;
}

.artichoka-spb-reward {
    color: #fff;
    text-align: center;
    background-color: var(--color-secondary);
}

.artichoka-spb-reward-title {
    display: inline-block;
    font-size: 2rem;
    line-height: var(--spb-title-line-height);
    padding: .5rem 0;
    font-weight: 500;
}

.elementor-menu-cart__main .artichoka-spb-h2,
.elementor-menu-cart__main .artichoka-spb-reward-title {
    font-size: var(--spb-responsive-title-fs) !important;
}

@media (max-width: 549px) {
    .artichoka-spb-reward-title {
        font-size: var(--spb-responsive-title-fs) !important;
    }
}

.artichoka-spb .emphasize {
    font-weight: 900;
}

/* Progress track + evenly spaced markers ---------------------------------- */

.artichoka-spb__progress {
    position: relative;
    /* Room for the first/last circles, whose centers sit at the track ends. */
    padding: 28px calc(var(--spb-circle-size) / 2) 8px;

    @media (max-width: 549px) {
        padding-inline: 8px;
        margin-left: -16px;
        padding-bottom: 2rem;
    }
}

.artichoka-spb__track {
    position: absolute;
    top: calc(28px + var(--spb-circle-size) / 2);
    right: calc(var(--spb-circle-size) / 2);
    left: calc(var(--spb-circle-size) / 2);
    z-index: 0;
    height: var(--spb-line-thickness);
    background-color: var(--color-accent);
    border-radius: 999px;
    transform: translateY(-50%);
    overflow: hidden;
}

.artichoka-spb__fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: inherit;
    transition: width .2s ease; /* width set inline in php via getTrackFillPercent() - do not remove */
}

.artichoka-spb__thresholds {
    position: relative;
    z-index: 1;
    min-height: calc(var(--spb-circle-size) + 3.4em);
    margin: 0;
    padding: 0;
    list-style: none;
}

.artichoka-spb__threshold {
    position: absolute;
    top: 0;
    /*noinspection CssUnresolvedCustomProperty*/
    left: var(--spb-pos, 0); /* defined in php - do not remove */
    display: flex;
    width: calc(var(--spb-circle-size) * 1.7);
    flex-direction: column;
    align-items: center;
    transform: translateX(-70%);
}

.artichoka-spb__threshold-marker {
    display: flex;
    width: var(--spb-circle-size);
    height: var(--spb-circle-size);
    align-items: center;
    justify-content: center;
}

.artichoka-spb__threshold-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.artichoka-spb__threshold-name {
    margin-top: 12px;
    font-size: .8em;
    color: var(--color-secondary);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.elementor-menu-cart__main {
    --spb-circle-size: 44px;
}

.elementor-menu-cart__main .artichoka-spb__progress {
    padding-inline: 8px;
    margin-left: -16px;
    padding-bottom: 2rem;
}