.mps-commerce-status {
    --mps-commerce-height: 48px;
    --mps-commerce-gap: 8px;
    --mps-commerce-bg: #fff;
    --mps-commerce-text: #2B241C;
    --mps-commerce-muted: #776A5A;
    --mps-commerce-accent: #9E835C;
    display: flex;
    align-items: stretch;
    gap: var(--mps-commerce-gap);
    min-height: var(--mps-commerce-height);
    padding: 4px;
    border: 1px solid #e8e0d5;
    border-radius: 14px;
    background: var(--mps-commerce-bg);
    color: var(--mps-commerce-text);
    box-shadow: 0 7px 22px rgba(66, 50, 31, .06);
    direction: inherit
}

.mps-commerce-status__link,
.mps-commerce-status__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--mps-commerce-height);
    min-height: calc(var(--mps-commerce-height) - 8px);
    padding: 7px 10px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease
}

.mps-commerce-status__link:hover,
.mps-commerce-status__link:focus-visible,
.mps-commerce-status__cta:hover,
.mps-commerce-status__cta:focus-visible {
    background: #f7f2ea;
    color: var(--mps-commerce-accent);
    outline: 0
}

.mps-commerce-status__link:focus-visible,
.mps-commerce-status__cta:focus-visible {
    box-shadow: 0 0 0 3px rgba(158, 131, 92, .2)
}

.mps-commerce-status__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1;
    color: var(--mps-commerce-accent)
}

.mps-commerce-status__icon svg {
    width: 1em;
    height: 1em
}

.mps-commerce-status__copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    line-height: 1.35
}

.mps-commerce-status__copy small {
    color: var(--mps-commerce-muted);
    font-size: .72em;
    white-space: nowrap
}

.mps-commerce-status__copy strong {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92em
}

.mps-commerce-status__cart-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--mps-commerce-bg);
    border-radius: 999px;
    background: var(--mps-commerce-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    line-height: 1
}

.mps-commerce-status__cart-count.is-empty {
    display: none
}

.mps-commerce-status__cta {
    margin-inline-start: auto;
    padding-inline: 18px;
    background: var(--mps-commerce-accent);
    color: #fff;
    font-weight: 800;
    white-space: nowrap
}

.mps-commerce-status__cta:hover,
.mps-commerce-status__cta:focus-visible {
    background: color-mix(in srgb, var(--mps-commerce-accent), #000 10%);
    color: #fff
}

.mps-commerce-status--icon {
    width: max-content
}

.mps-commerce-status--icon .mps-commerce-status__link {
    padding: 7px
}

.mps-commerce-status--compact .mps-commerce-status__plan .mps-commerce-status__copy small {
    display: none
}

@media(min-width:1025px) {
    .mps-commerce-hide-desktop {
        display: none !important
    }
}

@media(min-width:768px) and (max-width:1024px) {
    .mps-commerce-hide-tablet {
        display: none !important
    }

    .mps-commerce-status--full .mps-commerce-status__copy {
        display: none
    }

    .mps-commerce-status--full .mps-commerce-status__cta {
        padding-inline: 10px
    }
}

@media(max-width:767px) {
    .mps-commerce-hide-mobile {
        display: none !important
    }

    .mps-commerce-status {
        --mps-commerce-height: 44px;
        gap: 3px
    }

    .mps-commerce-status__copy {
        display: none
    }

    .mps-commerce-status__link {
        padding: 6px
    }

    .mps-commerce-status__cta {
        padding-inline: 10px;
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {

    .mps-commerce-status__link,
    .mps-commerce-status__cta {
        transition: none
    }
}