/* ============================================================
   БИНЭКСТ — config2: строки слотов в стиле конструктора DNS,
   но в бренде: синий #004D99, фаски, моно-подписи.
   Пустой слот = шапка: номер+название слева, чип+ДОБАВИТЬ справа.
   Выбранный слот: строка с фото/управлением/ценой (без бейджа).
   Саммари 33%: явный порядок блоков, рамка склада — под ИТОГО.
   ============================================================ */

/* ---------- карточка слота и шапка ---------- */
.cfg2 .cfg-slot{border:1px solid var(--line,#e4e8ec);background:#fff;margin:0;padding:10px 12px;clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%))}
.cfg2 .cfg-slot>div:first-child{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding-left:0}
.cfg2 .cfg-slot>div:first-child>*{margin-left:0}
.cfg2 .cfg-slot h4{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6f7479)}
.cfg2 .cfg-qtyrow{border:none;padding:0}
.cfg2 .cfgx-pick{display:none!important}

/* пустой слот: строка не показывается вовсе */
.cfg2 .ui-row:not(.has){display:none!important}

/* ---------- компактная лента слотов ---------- */
.cfg2 #cfgSlots{display:grid;gap:4px!important}

/* ---------- строка слота (десктоп): фото | инфо | кнопки | цена ---------- */
.cfg2 .ui-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:10px;align-items:center}
.cfg2 .ui-thumb{width:56px;height:56px;border:1px solid var(--line,#e4e8ec);background:#fff;display:grid;place-items:center}
.cfg2 .ui-thumb img{width:100%;height:100%;object-fit:contain}
.cfg2 .ui-ic{font-size:20px;color:var(--line2,#c9cfd6)}
.cfg2 .ui-main{min-width:0}
.cfg2 .ui-name{font-weight:700;font-size:14px;display:block;color:var(--ink,#000);overflow-wrap:break-word}
.cfg2 .ui-specs{display:block;font-size:11.5px;color:var(--muted,#6f7479);margin-top:2px}
.cfg2 .ui-stock{display:block;font-size:11px;margin-top:4px}
.cfg2 .ui-stock.in{color:var(--mint-dk,#0e8a4f)}
.cfg2 .ui-stock.out{color:#b3261e}
.cfg2 .ui-stock.ord,.cfg2 .ui-stock.transit{color:#8a5a00}
.cfg2 .ui-badge{display:none!important}
.cfg2 .ui-side{display:flex;align-items:center;gap:8px}
.cfg2 .ui-price{font-family:var(--mono,monospace);font-weight:700;font-size:15px;color:var(--navy,#004d99);min-width:90px;text-align:right;white-space:nowrap}
.cfg2 .cfg-addpick{font-size:10px;padding:6px 10px}

/* кликабельное название выбранного товара */
.cfg2 .ui-row.has .ui-name{cursor:pointer;color:var(--navy,#004d99)}
.cfg2 .ui-row.has .ui-name:hover{text-decoration:underline}

/* ---------- кнопки: квадрат 34×34 с фаской / текстовая в шапке ---------- */
.cfg2 .ui-del,
.cfg2 .ui-open.icon{
  width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2,#c9cfd6);background:#fff;
  clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));
  cursor:pointer;
}
.cfg2 .ui-del{color:#b3261e}
.cfg2 .ui-del svg,.cfg2 .ui-open.icon svg{display:block;width:16px;height:16px}
.cfg2 .ui-del:hover{border-color:#b3261e;background:#fde8e8}
.cfg2 .ui-open.icon{color:var(--navy,#004d99)}
.cfg2 .ui-open.icon:hover{background:var(--navy,#004d99);color:#fff}
.cfg2 .ui-open:not(.icon){border:1px solid var(--navy,#004d99);background:#fff;color:var(--navy,#004d99);font-family:var(--mono,monospace);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;cursor:pointer;clip-path:var(--cham)}
.cfg2 .ui-open:not(.icon):hover{background:var(--navy,#004d99);color:#fff}

/* ---------- степпер количества 76×34 ---------- */
.cfg2 .cfg-qty{
  display:inline-flex;align-items:stretch;
  width:76px!important;min-width:0!important;max-width:76px!important;
  height:34px!important;padding:0!important;
  border:1px solid var(--line2,#c9cfd6);background:#fff;
  clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));
}
.cfg2 .cfg-qty button{width:22px!important;min-width:22px!important;padding:0!important;border:none;background:transparent;color:var(--navy,#004d99);font-size:13px!important;cursor:pointer}
.cfg2 .cfg-qty button:hover{background:#eef4fb}
.cfg2 .cfg-qty>*:not(button){flex:1;min-width:0!important;padding:0!important;display:flex;align-items:center;justify-content:center;font-family:var(--mono,monospace);font-size:12px!important;font-weight:700;color:var(--ink,#000)}

/* ---------- прогресс обязательных ---------- */
.cfg2 .ui-progress{background:#fff;border:1px solid var(--line,#e4e8ec);padding:10px 12px;margin:0;clip-path:var(--cham)}
.cfg2 .ui-progress span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6f7479)}
.cfg2 .ui-progress b{font-family:var(--mono,monospace);font-size:12px;color:var(--navy,#004d99);float:right}
.cfg2 .ui-bar{height:6px;background:#eef2f7;margin-top:8px}
.cfg2 .ui-bar i{display:block;height:100%;background:var(--mint-dk,#0e8a4f);width:0;transition:width .3s}

/* ---------- саммари: только инфо и кнопки, ширина 33% ---------- */
.cfg2 #cfgList{display:none!important}
@media(min-width:961px){
  .cfg2 .cfg-layout{grid-template-columns:minmax(0,1fr) 33%}
}

.cfg2 .cfg-summary>.cfg-totalrow{order:2}
.cfg2 .cfg-summary>#uiStockWarn{order:3}
.cfg2 .cfg-summary>#cfgOutWarn{order:4}
.cfg2 .cfg-summary>#cfgNote{order:5}
.cfg2 .cfg-summary>.cfg-actions{order:6}
.cfg2 #cfgAdd{width:100%;padding:14px 12px;font-size:12px}

/* ---------- предупреждение: позиции не в наличии ---------- */
.cfg2 .ui-stockwarn{
  border:1px solid #e05252;background:#fdecec;color:#8f1d1d;
  padding:10px 12px;margin:4px 0 10px;
  font-size:12px;font-weight:700;line-height:1.45;
  clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));
}
.cfg2 .ui-stockwarn[hidden]{display:none}
.cfg2 #cfgNote.warn{background:#fff4e0;border:1px solid #f0d9a8;color:#8a5a00;padding:10px 12px}

/* ---------- карточка товара по клику на название ---------- */
.uim-ov{position:fixed;inset:0;z-index:1200;background:rgba(0,51,102,.55);display:none;align-items:center;justify-content:center;padding:20px}
.uim-ov.show{display:flex}
.uim-box{position:relative;background:#fff;width:min(680px,100%);max-height:88vh;overflow:auto;clip-path:var(--cham,polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%));box-shadow:0 24px 70px rgba(0,77,153,.35)}
.uim-head{display:flex;align-items:center;gap:12px;background:var(--navy,#004d99);color:#fff;padding:12px 16px}
.uim-code{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#cfe3ff}
.uim-close{margin-left:auto;width:32px;height:32px;background:#fff;color:var(--navy,#004d99);border:none;clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));cursor:pointer;font-size:14px}
.uim-close:hover{background:#e3f8ec;color:#0e8a4f}
.uim-body{padding:20px}
.uim-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px}
.uim-photo{width:220px;height:220px;object-fit:contain;border:1px solid var(--line,#e4e8ec);background:#fff;clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%))}
.uim-name{font-family:var(--disp,inherit);font-weight:700;font-size:18px;line-height:1.35;margin:0 0 10px;color:var(--ink,#000)}
.uim-line{font-size:12.5px;color:var(--muted,#6f7479);margin:4px 0}
.uim-line b{color:var(--ink,#000)}
.uim-price{font-family:var(--mono,monospace);font-weight:700;font-size:22px;color:var(--navy,#004d99);margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--line,#e4e8ec)}
.uim-act{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* защита от длинных vendor-названий */
.uim-grid>*{min-width:0}
.uim-name,.uim-line,.uim-line b{overflow-wrap:anywhere}
.uim-photo{max-width:100%}
.uim-act .ui-open{flex:1 1 auto}

/* ---------- мобильная раскладка строки слота (≤700px) ---------- */
@media(max-width:700px){
  .cfg2 .ui-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "main  thumb"
      "price side";
    gap:10px;
    align-items:start;
  }
  .cfg2 .ui-thumb{grid-area:thumb;width:56px;height:56px;justify-self:end}
  .cfg2 .ui-main{grid-area:main;min-width:0}
  .cfg2 .ui-price{grid-area:price;align-self:center;text-align:left;min-width:0}
  .cfg2 .ui-side{grid-area:side;flex-direction:row;align-items:center;justify-content:flex-end;align-self:center}
}

/* ---------- мобильный чип обязательности: круг с «!» ---------- */
@media(max-width:700px){
  .cfg2 .ui-chip{
    font-size:0!important;letter-spacing:0!important;text-transform:none!important;
    width:22px;height:22px;padding:0;border-radius:50%;
    background:transparent;border:2px solid var(--navy,#004d99);
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 22px;
  }
  .cfg2 .ui-chip::after{
    content:'!';
    font-family:var(--mono,monospace);font-weight:700;font-size:13px;line-height:1;
    color:var(--navy,#004d99);
  }
}

/* ---------- мобильная карточка товара (≤600px) ---------- */
@media(max-width:600px){
  .uim-ov{padding:12px}
  .uim-body{padding:16px}
  .uim-grid{grid-template-columns:1fr;gap:12px}
  .uim-photo{width:100%;max-width:240px;height:auto;aspect-ratio:1/1;justify-self:center}
  .uim-name{font-size:16px}
  .uim-line{font-size:12px}
  .uim-price{font-size:18px}
  .uim-act .ui-open{width:100%;padding:12px}
}
/* ---------- прогресс обязательных в строке кнопки наличия ---------- */
.cfg2 .ui-barline{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.cfg2 .ui-barline .ui-progress{
  flex:1 1 260px;min-width:220px;min-height:40px;
  display:flex;align-items:center;gap:10px;
  background:#fff;
  border:1px solid var(--line,#e4e8ec);
  padding:0 12px;margin:0;
  clip-path:var(--cham,polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%));
}
.cfg2 .ui-barline .ui-progress span{white-space:nowrap;font-size:11px}
.cfg2 .ui-barline .ui-bar{flex:1;margin:0;order:2}
.cfg2 .ui-barline .ui-progress b{float:none;order:3}
@media(max-width:700px){
  .cfg2 .ui-barline .ui-progress{min-width:100%}   /* на мобильном прогресс второй строкой */
}