/* =====================================================================
 *  Reusable chips: denomination, grape, wine style, and wine attribute.
 *  Used by app/Views/common chip partials.
 * ===================================================================== */

.iw-denom-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 8px 7px 14px;
    background: var(--color-surface-container-lowest, #fff);
    border-radius: 999px;
    font-family: var(--font-body), serif;
    font-size: 13px; font-weight: 600;
    color: var(--color-on-surface, #1f1a17);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(86, 19, 113, 0.1);
    transition: all 120ms;
    max-width: 100%;
}
span.iw-denom-pill,
span.iw-grape-pill {
    cursor: default;
}

a.iw-denom-pill,
a.iw-grape-pill {
    cursor: pointer;
}

a.iw-denom-pill:hover,
a.iw-grape-pill:hover {
    box-shadow: inset 0 0 0 1px var(--color-primary, #561371);
    transform: translateY(-1px);
}

a.iw-denom-pill:focus-visible,
a.iw-grape-pill:focus-visible {
    outline: 2px solid var(--color-primary, #561371);
    outline-offset: 2px;
}
.iw-denom-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}
.iw-denom-badge {
    font-family: var(--font-label), serif;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.14em;
    color: #fff;
    padding: 4px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.iw-grape-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    background: var(--color-surface-container-lowest, #fff);
    border-radius: 999px;
    font-family: var(--font-body), serif;
    font-size: 13px; font-weight: 500;
    color: var(--color-on-surface, #1f1a17);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(86, 19, 113, 0.1);
    transition: all 120ms;
    max-width: 100%;
}
.iw-grape-icon {
    width: 14px; height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
.iw-grape-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16ch;
}

/* Compact modifier for tighter contexts (e.g. inside cards). */
.iw-denom-pill--sm,
.iw-grape-pill--sm {
    font-size: 11.5px;
    padding: 5px 10px;
    gap: 6px;
}
.iw-denom-pill--sm { padding-right: 6px; }
.iw-denom-pill--sm .iw-denom-badge {
    font-size: 8.5px;
    padding: 3px 6px;
    letter-spacing: 0.12em;
}
.iw-grape-pill--sm .iw-grape-icon {
    width: 12px; height: 12px;
}

.iw-facet-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 10px;
    background: var(--color-surface-container-lowest, #fff);
    border-radius: 999px;
    font-family: var(--font-body), serif;
    font-size: 13px; font-weight: 600;
    color: var(--color-on-surface, #1f1a17);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(86, 19, 113, 0.1);
    transition: all 120ms;
    max-width: 100%;
}
span.iw-facet-pill {
    cursor: default;
}

a.iw-facet-pill {
    cursor: pointer;
}

a.iw-facet-pill:hover {
    box-shadow: inset 0 0 0 1px var(--color-primary, #561371);
    transform: translateY(-1px);
}
a.iw-facet-pill:focus-visible {
    outline: 2px solid var(--color-primary, #561371);
    outline-offset: 2px;
}
.iw-facet-icon {
    width: 18px; height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.iw-facet-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
}
.iw-quick-chip-shell {
    display: inline-flex;
    flex: 0 0 auto;
}
.iw-quick-chip-shell.is-active > .iw-denom-pill,
.iw-quick-chip-shell.is-active > .iw-facet-pill {
    background: var(--color-primary, #561371);
    color: var(--color-on-primary, #fff);
    box-shadow: 0 10px 26px rgba(86, 19, 113, 0.16);
}
.iw-quick-chip-shell.is-active > .iw-denom-pill .iw-denom-badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: var(--color-on-primary, #fff);
}