.emma-free-shipping {
    --emma-free-progress: #6d3aa8;
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 3px 11px;
    width: 100%;
    margin: 0 0 16px;
    padding: 12px 14px 11px;
    overflow: hidden;
    color: #3d2d4d;
    border: 1px solid #ded1ec;
    border-radius: 9px;
    background: #f7f2fb;
}

.emma-free-shipping__icon {
    display: grid;
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--emma-free-progress);
    border-radius: 50%;
    background: #eee4f7;
}

.emma-free-shipping__icon svg { width: 20px; height: 20px; }
.emma-free-shipping__copy { display: block; min-width: 0; }
.emma-free-shipping__copy strong,
.emma-free-shipping__copy small { display: block; }
.emma-free-shipping__copy strong { color: #4d246e; font-size: 13px; font-weight: 900; line-height: 1.35; }
.emma-free-shipping__copy small { margin-top: 2px; color: #756b7e; font-size: 10px; font-weight: 700; line-height: 1.35; }
.emma-free-shipping__rail { grid-column: 2; display: block; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 5px; background: #e4d9ed; }
.emma-free-shipping__rail i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--emma-free-progress); transition: width .28s ease; }

.emma-free-shipping.is-complete {
    --emma-free-progress: #27885d;
    color: #185f42;
    border-color: #b9dfcd;
    background: #f1faf5;
}
.emma-free-shipping.is-complete .emma-free-shipping__icon { background: #dff3e8; }
.emma-free-shipping.is-complete .emma-free-shipping__copy strong { color: #176541; }
.emma-free-shipping.is-complete .emma-free-shipping__rail { background: #d4ebdf; }

.woocommerce-checkout .emma-free-shipping { margin-bottom: 14px; }

@media (max-width: 520px) {
    .emma-free-shipping { grid-template-columns: 34px minmax(0, 1fr); gap: 2px 9px; margin-bottom: 12px; padding: 10px 11px 9px; }
    .emma-free-shipping__icon { width: 31px; height: 31px; }
    .emma-free-shipping__icon svg { width: 18px; height: 18px; }
    .emma-free-shipping__copy strong { font-size: 12px; }
    .emma-free-shipping__copy small { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .emma-free-shipping__rail i { transition: none; }
}