/* ============================================================
   Единый выпадающий список — <ss-select>. Один вид на весь сайт.
   Подача списка — как у списка подсказок в поповере товара (.cp-sug):
   плавающая панель, строки-кнопки, подсветка наведения, отметка выбранного.
   Только токены темы; размеры/рамку задаёт класс поля, на котором стоит элемент.
   ============================================================ */

ss-select{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;min-width:0;}
ss-select[disabled]{cursor:default;opacity:.55;}
ss-select>option,ss-select>optgroup{display:none;}
ss-select .ss-dd-ui{display:contents;}

ss-select .ss-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1 1 auto;width:100%;min-width:0;
  border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:inherit;outline:0;}
ss-select .ss-dd-btn:disabled{cursor:default;}
ss-select .ss-dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
ss-select .ss-dd-btn.is-empty .ss-dd-val{color:var(--ink-3,var(--ink-2));}
ss-select .ss-dd-chev{width:10px;height:10px;flex-shrink:0;opacity:.6;transition:transform var(--dur-fast) ease;}
ss-select.is-open .ss-dd-chev{transform:rotate(180deg);}

ss-select .ss-dd-list{position:fixed;z-index:2200;max-width:min(92vw,420px);
  background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);
  padding:4px;cursor:default;}
ss-select .ss-dd-list[hidden]{display:none;}
ss-select .ss-dd-opts{max-height:280px;overflow:auto;}
ss-select .ss-dd-list button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;
  color:var(--ink);font-family:inherit;font-size:13px;padding:8px 10px;border-radius:7px;cursor:pointer;}
ss-select .ss-dd-list button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
ss-select .ss-dd-list button:hover{background:var(--bg-2);color:var(--accent);}
ss-select .ss-dd-list button.on{color:var(--accent);}
ss-select .ss-dd-list button:disabled{opacity:.45;cursor:default;background:none;color:var(--ink-2);}
ss-select .ss-dd-ok{width:12px;height:12px;margin-left:auto;flex-shrink:0;}

ss-select .ss-dd-grp{padding:9px 10px 5px;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-2);opacity:.75;}
ss-select .ss-dd-search{padding:4px 4px 6px;}
ss-select .ss-dd-search input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font-family:inherit;font-size:13px;padding:8px 10px;outline:0;}
ss-select .ss-dd-search input:focus{border-color:var(--accent);}
ss-select .ss-dd-empty{padding:9px 10px;font-size:13px;color:var(--ink-2);}