/*card widget*/
.card.card-widget {
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--color-sage-1);
    color: var(--color-black);
    border: 1px solid var(--color-sage-2);
    gap: 1rem;
}
.card.card-widget.bg-dark {
    color: var(--color-white);
}
.card.card-widget.card-widget-minimal {
    padding: 1rem;
    gap: 0;
    border-radius: 0.25rem;
}
.card.card-widget.updating > * {
    opacity: 0.3;
}

.card.card-widget hr {
    margin: 0
}

.form-compact {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.card-widget__title {
    font-size: var(--text-size-M);
    line-height: var(--text-line-height-M);
    letter-spacing: var(--text-letter-spacing-M);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-title);
}

.card-widget__footer {
    font-size: var(--text-size-XXS);
    line-height: var(--text-line-height-XXS);
    letter-spacing: var(--text-letter-spacing-XXS);
}.widget__product i.icon__x {
     color: var(--color-error-1);
 }.widget__product i.icon__check{
      color: var(--color-green-2);
  }

.widget-detail-container{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;}
@media (min-width: 576px) {

    .widget-detail-container{
        gap: 1rem;}
    .card.card-widget {
        /*gap: 1.5rem;*/
    }

    .card-widget__title {
        font-size: var(--title-size-L);
        line-height: var(--title-line-height-L);
        letter-spacing: var(--title-letter-spacing-L);

    }.widget__product-name, .widget__product-custom-name{
             font-size: var(--text-size-S);
             line-height: var(--text-line-height-S);
             letter-spacing: var(--text-letter-spacing-S);}
}


/*feature */
.feature-widget__label {
    font-size: var(--text-size-XS);
    line-height: var(--text-line-height-XS);
    letter-spacing: var(--text-letter-spacing-XS);
    font-weight: var(--font-weight-bold);
}

.feature-widget__content {
    font-size: var(--text-size-XS);
    line-height: var(--text-line-height-XS);
    letter-spacing: var(--text-letter-spacing-XS);
}

.widget__product:not(:last-child) {

}

.widget__product-name, .widget__product-custom-name {
    font-weight: var(--font-weight-bold);
}

@media (max-width: 575px) {
    .widget__product-description, .widget__product-price,.widget__product-detail-label {
        font-size: var(--text-size-XXS);
        line-height: var(--text-line-height-XXS);
        letter-spacing: var(--text-letter-spacing-XXS);
    }

}