.eco-free-shipping {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--color-primary-border, #d8e5da);
    border-radius: 8px;
    background: #fff;
    color: var(--green-dark, #003d27);
    overflow-wrap: anywhere;
}

.eco-free-shipping[hidden],
.eco-free-shipping [hidden] {
    display: none !important;
}

.eco-free-shipping__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.eco-free-shipping__score {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.eco-free-shipping__unlocked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.eco-free-shipping__unlocked svg {
    flex: none;
    animation: eco-shipping-unlock 220ms ease-out;
}

.eco-free-shipping__meter {
    height: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-primary-border, #d8e5da);
}

.eco-free-shipping__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--green, #003d27);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease-out;
}

.eco-free-shipping.is-unlocked {
    background: var(--pale, #f2f8f3);
    border-color: var(--green, #003d27);
}

@keyframes eco-shipping-unlock {
    from { transform: scale(.8); opacity: .4; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .eco-free-shipping__fill { transition: none; }
    .eco-free-shipping__unlocked svg { animation: none; }
}

.eco-free-shipping .eco-free-shipping__message {
    margin: 0;
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.eco-free-shipping .eco-free-shipping__condition {
    margin: 8px 0 0;
    color: var(--muted, #5b675f);
    font-size: 13px;
    line-height: 1.5;
}

.eco-free-shipping .eco-free-shipping__message[hidden] + .eco-free-shipping__condition {
    margin-top: 0;
}

.eco-cart-modal__actions .eco-free-shipping {
    margin: 0;
    padding: 12px;
}

.eco-cart-modal__actions .eco-free-shipping__heading {
    margin-bottom: 8px;
}

.eco-cart-modal__actions .eco-free-shipping__meter {
    margin-bottom: 8px;
}

/* Keep the live offer beside quick ordering, never in the rotating mobile slot. */
body .top-benefits > .top-benefits__free-shipping[hidden] {
    display: none !important;
}

body .top-benefits.has-free-shipping {
    gap: clamp(8px, 2vw, 28px) !important;
}

body .top-benefits.has-free-shipping > span {
    padding-inline: clamp(6px, 1vw, 16px) !important;
}

body .top-benefits > .top-benefits__free-shipping {
    position: relative !important;
    inset: auto !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

@media (max-width: 900px) {
    body .top:has(.top-benefits.has-free-shipping),
    body .top:has(.top-benefits.has-free-shipping) .top__wrap {
        height: auto !important;
        min-height: 32px !important;
    }

    body .top .top__wrap .top-benefits.has-free-shipping {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 0 !important;
        height: auto !important;
        min-height: 32px !important;
    }

    body .top .top-benefits.has-free-shipping > .top-benefits__rotating {
        display: none !important;
        animation: none !important;
    }

    body .top .top-benefits.has-free-shipping > .top-benefits__free-shipping,
    body .top .top-benefits.has-free-shipping > .top-benefits__fixed {
        position: relative !important;
        inset: auto !important;
        grid-row: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 32px !important;
        padding: 4px 6px !important;
        justify-content: center !important;
        gap: 4px !important;
        color: #fff !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body .top .top-benefits.has-free-shipping > .top-benefits__free-shipping {
        grid-column: 1 !important;
    }

    body .top .top-benefits.has-free-shipping > .top-benefits__fixed {
        grid-column: 2 !important;
    }

    body .top .top-benefits.has-free-shipping > span:before,
    body .top .top-benefits.has-free-shipping > span:after {
        content: none !important;
    }
}