/*
|--------------------------------------------------------------------------
| Matec Woo - Ingredients
|--------------------------------------------------------------------------
*/

.mtc-product-ingredients {
    display: grid;
    gap: var(--mtc-space-3, 12px);

    width: 100%;
    min-width: 0;

    color: var(--mtc-color-text, #1f1f1f);
}

.mtc-product-ingredients__summary,
.mtc-product-ingredients__note,
.mtc-product-ingredients__description,
.mtc-product-ingredients__more {
    margin: 0;

    color: var(--mtc-color-text-soft, #5d715f);
    font-size: var(--mtc-font-size-sm, 0.875rem);
    line-height: 1.45;
}

.mtc-product-ingredients__list {
    display: grid;
    gap: var(--mtc-space-2, 8px);

    margin: 0;
    padding: 0;

    list-style: none;
}

.mtc-product-ingredients__item {
    display: grid;
    gap: 4px;

    padding: var(--mtc-space-2, 8px) var(--mtc-space-3, 12px);

    border: 1px solid var(--mtc-color-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--mtc-radius-md, 12px);

    background: var(--mtc-color-surface-soft, rgba(255, 255, 255, 0.5));
}

.mtc-product-ingredients__item-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mtc-space-2, 8px);
}

.mtc-product-ingredients__name {
    min-width: 0;

    color: var(--mtc-color-text, #1f1f1f);
    font-size: var(--mtc-font-size-sm, 0.875rem);
    font-weight: 800;
    line-height: 1.2;
}

.mtc-product-ingredients__amount {
    flex: 0 0 auto;

    color: var(--mtc-color-text-soft, #5d715f);
    font-size: var(--mtc-font-size-xs, 0.75rem);
    font-weight: 700;
    line-height: 1.2;
}

.mtc-product-ingredients__type {
    justify-self: start;

    display: inline-flex;
    align-items: center;

    padding: 3px 8px;

    border-radius: 999px;

    background: var(--mtc-color-surface-muted, #f4efe6);
    color: var(--mtc-color-text-soft, #5d715f);

    font-size: var(--mtc-font-size-xs, 0.75rem);
    font-weight: 800;
    line-height: 1;
}

.mtc-product-ingredients__more {
    font-size: var(--mtc-font-size-xs, 0.75rem);
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| States / Types
|--------------------------------------------------------------------------
*/

.mtc-product-ingredients__item--allergen {
    border-color: color-mix(in srgb, var(--mtc-color-danger, #ef4444) 26%, transparent);
}

.mtc-product-ingredients__item--allergen .mtc-product-ingredients__type {
    background: color-mix(in srgb, var(--mtc-color-danger, #ef4444) 12%, transparent);
    color: var(--mtc-color-danger, #ef4444);
}

.mtc-product-ingredients__item--trace {
    border-color: color-mix(in srgb, var(--mtc-color-warning, #f59e0b) 28%, transparent);
}

.mtc-product-ingredients__item--trace .mtc-product-ingredients__type {
    background: color-mix(in srgb, var(--mtc-color-warning, #f59e0b) 14%, transparent);
    color: var(--mtc-color-warning, #b45309);
}

/*
|--------------------------------------------------------------------------
| Product Card Compact Variant
|--------------------------------------------------------------------------
*/

.mtc-product-ingredients--compact {
    gap: var(--mtc-space-2, 8px);
}

.mtc-product-ingredients--compact .mtc-product-ingredients__summary {
    color: var(--mtc-color-text-soft, #5d715f);
    font-size: var(--mtc-font-size-xs, 0.75rem);
    line-height: 1.35;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__list {
    gap: 6px;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__item {
    gap: 3px;

    padding: 7px 9px;

    border-radius: var(--mtc-radius-sm, 10px);

    background: var(--mtc-color-surface, #fff);
}

.mtc-product-ingredients--compact .mtc-product-ingredients__item-main {
    align-items: center;
    gap: 6px;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__name {
    overflow: hidden;

    font-size: var(--mtc-font-size-xs, 0.75rem);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__amount {
    font-size: 0.7rem;
    opacity: 0.8;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__type {
    padding: 2px 7px;

    font-size: 0.68rem;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__description {
    display: none;
}

.mtc-product-ingredients--compact .mtc-product-ingredients__note {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {
    .mtc-product-ingredients:not(.mtc-product-ingredients--compact) .mtc-product-ingredients__item-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}