.crm-linked-elements {
    max-height: calc(100vh - 130px);
    overflow: auto;
    color: var(--crm-text, #102033);
}

.crm-linked-elements__loading,
.crm-linked-elements__error {
    padding: 42px 24px;
    text-align: center;
}

.crm-linked-elements__error { color: #b91c1c; }

.crm-linked-elements__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 18px;
}

.crm-linked-elements__head img {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
}

.crm-linked-elements__head span,
.crm-linked-elements__head small,
.crm-linked-elements__property > span,
.crm-linked-elements__meta span {
    color: var(--crm-muted, #607083);
}

.crm-linked-elements__head h3 { margin: 4px 0; font-size: 22px; }

.crm-linked-elements__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.crm-linked-elements__meta > div,
.crm-linked-elements__text,
.crm-linked-elements__property {
    padding: 12px;
    border: 1px solid var(--crm-border, #dbe5ee);
    border-radius: 8px;
    background: var(--crm-surface-soft, #f8fafc);
}

.crm-linked-elements__meta span,
.crm-linked-elements__meta b { display: block; }
.crm-linked-elements__meta b { margin-top: 4px; }
.crm-linked-elements__text { margin-bottom: 12px; line-height: 1.5; }

.crm-linked-elements__products { margin: 0 0 14px; }
.crm-linked-elements__products h4 { margin: 0 0 8px; font-size: 16px; }
.crm-linked-elements__product {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(90px, auto));
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--crm-border, #dbe5ee);
    border-radius: 8px;
    background: var(--crm-surface-soft, #f8fafc);
}
.crm-linked-elements__product > div { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 6px; background: #fff; }
.crm-linked-elements__product > div > span { color: var(--crm-muted, #607083); font-size: 12px; }
.crm-linked-elements__product-name { flex-direction: row !important; align-items: center; }
.crm-linked-elements__product-name > span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--crm-primary-soft, #d1fae5); color: var(--crm-primary-dark, #047857) !important; font-weight: 700; }
.crm-linked-elements__product-total { background: var(--crm-primary-soft, #d1fae5) !important; }

.crm-linked-elements__properties { display: grid; gap: 8px; }
.crm-linked-elements__property { display: grid; grid-template-columns: minmax(130px, 34%) minmax(0, 1fr); gap: 12px; }
.crm-linked-elements__values { display: grid; gap: 6px; min-width: 0; }
.crm-linked-elements__value { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.crm-linked-elements__property--multiple .crm-linked-elements__value { padding: 7px 9px; border: 1px solid var(--crm-border, #dbe5ee); border-radius: 6px; background: #fff; }
.crm-linked-elements__value-index { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--crm-primary-soft, #d1fae5); color: var(--crm-primary-dark, #047857); font-size: 12px; font-weight: 700; }

.crm-linked-elements__link {
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--crm-primary, #10b981) 38%, #dbe5ee);
    border-radius: 6px;
    background: var(--crm-primary-soft, #d1fae5);
    color: var(--crm-primary-dark, #047857);
    cursor: pointer;
    text-align: left;
}

.crm-linked-elements__link span { opacity: .65; }

.crm-popup-linked-element {
    margin-left: 8px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--crm-primary, #10b981) 38%, #dbe5ee);
    border-radius: 6px;
    background: var(--crm-primary-soft, #d1fae5);
    color: var(--crm-primary-dark, #047857);
    cursor: pointer;
}

@media (max-width: 560px) {
    .crm-linked-elements__meta { grid-template-columns: 1fr; }
    .crm-linked-elements__property { grid-template-columns: 1fr; gap: 5px; }
    .crm-linked-elements__head img { width: 76px; height: 76px; }
    .crm-linked-elements__product { grid-template-columns: repeat(3, 1fr); }
    .crm-linked-elements__product-name { grid-column: 1 / -1; }
}