/*
 * Darealmop_Lexicon — commerce cross-linking presentation.
 *
 * Styles the PDP "Learn about" strip (.dm-lexicon-terms) and the opt-in
 * inline glossary widget (.dm-lexicon-term). Token-driven: every colour /
 * spacing hook is a `--dm-lexicon-*` custom property with a neutral grey
 * fallback so a consuming theme can restyle without touching this file.
 * No brand colours are hard-coded here.
 */

/* ── PDP "Learn about" strip ─────────────────────────────────────────── */
.dm-lexicon-terms {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dm-lexicon-terms-gap, 0.5rem);
    margin: var(--dm-lexicon-terms-margin, 1rem 0);
    padding: var(--dm-lexicon-terms-padding, 0);
    font-size: var(--dm-lexicon-terms-font-size, 0.875rem);
    line-height: 1.4;
}

.dm-lexicon-terms__label {
    font-weight: var(--dm-lexicon-terms-label-weight, 600);
    color: var(--dm-lexicon-terms-label-color, #4a4a4a);
    text-transform: var(--dm-lexicon-terms-label-transform, none);
}

.dm-lexicon-terms__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-lexicon-terms-gap, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-lexicon-terms__item {
    margin: 0;
    padding: 0;
}

.dm-lexicon-terms__link {
    display: inline-block;
    padding: var(--dm-lexicon-chip-padding, 0.15rem 0.6rem);
    border: 1px solid var(--dm-lexicon-chip-border, #d6d6d6);
    border-radius: var(--dm-lexicon-chip-radius, 999px);
    background: var(--dm-lexicon-chip-bg, #f5f5f5);
    color: var(--dm-lexicon-chip-color, #333333);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dm-lexicon-terms__link:hover,
.dm-lexicon-terms__link:focus {
    background: var(--dm-lexicon-chip-bg-hover, #ececec);
    border-color: var(--dm-lexicon-chip-border-hover, #bcbcbc);
    text-decoration: none;
}

/* ── Inline glossary-term widget ─────────────────────────────────────── */
.dm-lexicon-term {
    display: inline;
}

.dm-lexicon-term__link {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.15em;
    color: var(--dm-lexicon-term-link-color, #2a2a2a);
}

.dm-lexicon-term__link:hover,
.dm-lexicon-term__link:focus {
    color: var(--dm-lexicon-term-link-color-hover, #000000);
}

.dm-lexicon-term__title {
    font-weight: var(--dm-lexicon-term-title-weight, 600);
}

.dm-lexicon-term__definition {
    display: inline;
    margin-left: var(--dm-lexicon-term-def-gap, 0.35em);
    color: var(--dm-lexicon-term-def-color, #5a5a5a);
    font-size: var(--dm-lexicon-term-def-font-size, 0.9em);
}