/* ect-multiselect — styles for the dependency-free searchable multi-select
 * (replaces Tom Select). Neutral look that fits both the storefront MTM
 * drawer filters and the admin (blog) forms. */
.ems { position: relative; }
.ems-box {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    min-height: 38px; padding: 4px 6px;
    border: 1px solid #ccc; border-radius: 4px; background: #fff;
    cursor: text;
}
.ems-box:focus-within { border-color: #212121; box-shadow: 0 0 0 2px rgba(33,33,33,.12); }
.ems-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f0f0f0; border: 1px solid #ddd; border-radius: 3px;
    padding: 1px 4px 1px 8px; font-size: 13px; line-height: 1.5; color: #222;
}
.ems-x {
    border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
    color: #888; padding: 0 2px;
}
.ems-x:hover { color: #b22; }
.ems-input {
    flex: 1; min-width: 80px; border: 0; outline: none; background: transparent;
    font-size: 13px; padding: 3px 2px; font-family: inherit; color: #222;
}
.ems-drop {
    position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 2px);
    max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ems-opt { padding: 7px 10px; font-size: 13px; cursor: pointer; color: #222; }
.ems-opt.is-active, .ems-opt:hover { background: #f0f0f0; }
.ems-create { color: #0073aa; font-style: italic; }
.ems-empty { padding: 8px 10px; font-size: 12px; color: #999; }