.cs-commerce {
    --cs-commerce-gap: 1rem;
}

.cs-commerce-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cs-commerce-gap);
}

.cs-commerce-product {
    height: 100%;
}

.cs-commerce-product .cs-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cs-commerce-product .cs-button {
    margin-top: auto;
}

.cs-commerce-price {
    margin: 1rem 0;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 800;
}

@media (max-width: 900px) {
    .cs-commerce-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cs-commerce-grid {
        grid-template-columns: 1fr;
    }
}

.cs-commerce-status{display:inline-flex;align-items:center;min-height:26px;padding:.25rem .6rem;border:1px solid transparent;border-radius:999px;font-size:.82rem;font-weight:700;line-height:1;white-space:nowrap}
.cs-commerce-status--success{border-color:rgba(45,187,104,.42);background:rgba(45,187,104,.14);color:#20894d}
.cs-commerce-status--warning{border-color:rgba(226,165,40,.46);background:rgba(226,165,40,.15);color:#9a6a00}
.cs-commerce-status--danger{border-color:rgba(223,75,75,.46);background:rgba(223,75,75,.14);color:#b32d2e}
.cs-commerce-status--info{border-color:rgba(50,136,216,.42);background:rgba(50,136,216,.13);color:#2271b1}
.cs-commerce-status--neutral{border-color:var(--cs-border,#c3c4c7);background:var(--cs-surface-alt,#f0f0f1);color:var(--cs-text-muted,#646970)}


/* Commerce 1.2.0: Oma tilaus */
.cs-commerce-current-subscription{display:grid;gap:1rem;margin-top:1rem}
.cs-commerce-current-subscription dl{display:grid;gap:.7rem;margin:0}
.cs-commerce-current-subscription dl>div{display:grid;grid-template-columns:minmax(110px,.35fr) 1fr;gap:.8rem;align-items:center;padding-bottom:.55rem;border-bottom:1px solid var(--cs-border,rgba(127,127,127,.2))}
.cs-commerce-current-subscription dt{font-weight:700}
.cs-commerce-current-subscription dd{margin:0}
.cs-commerce-subscription-actions{margin-top:.25rem}
.cs-commerce-free-upgrade{display:grid;gap:.8rem;margin-top:1rem}
.cs-commerce-free-upgrade .cs-commerce-upgrade{width:fit-content}
@media(max-width:620px){.cs-commerce-current-subscription dl>div{grid-template-columns:1fr;gap:.25rem}.cs-commerce-subscription-actions .cs-button,.cs-commerce-free-upgrade .cs-commerce-upgrade{width:100%}}


/* Commerce 1.2.6: ilmoituskrediitit */
.cs-commerce-credit-summary{display:flex;flex-wrap:wrap;gap:.55rem 1rem;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--cs-border,rgba(127,127,127,.2))}
.cs-credit-status{display:inline-flex;align-items:center;padding:.25rem .6rem;border:1px solid transparent;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap}
.cs-credit-status--unused{background:rgba(45,187,104,.14);border-color:rgba(45,187,104,.42);color:#20894d}
.cs-credit-status--partial{background:rgba(50,136,216,.13);border-color:rgba(50,136,216,.42);color:#2271b1}
.cs-credit-status--used{background:var(--cs-surface-alt,#f0f0f1);border-color:var(--cs-border,#c3c4c7);color:var(--cs-text-muted,#646970)}
.cs-credit-status__date{display:block;margin-top:.25rem;color:var(--cs-text-muted,#646970)}