/* AGI Systems — интерактивный подборщик запчастей по взрыв-схеме.
 * Дизайн-концепция от 10.07.2026. Классы совпадают с продакшн-разметкой виджета,
 * поэтому существующие правила Aspro не ломаются. Палитра фиксировано светлая. */

.agi{
  --g:#16a34a; --g2:#15803d; --soft:#f3f7f0; --line:#e3ece0; --ink:#242426;
  --mut:#6b7280; --warn:#d97706; --ord:#94a3b8; --hl:#eafff0; --hover:#f0f7ec;
  color:var(--ink); font-family:inherit; max-width:1320px; margin:0 auto;
  font-size:14px; line-height:1.5;
}
.agi *{box-sizing:border-box}
.agi a{color:inherit;text-decoration:none}
.agi :focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* шапка */
.agi-h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.agi-h1 h1,.agi-h1 h2{font-size:22px;margin:0}
.agi-h1 .sub{color:var(--mut);font-size:13px}

/* хиро на мягкой подложке (по прототипу) */
.agi-hero{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:22px 24px;margin:6px 0 2px}
.agi-hero h2{margin:0 0 4px;font-size:21px}
.agi-hero p{margin:0;color:#4b5a4e;font-size:13.5px;max-width:78ch}

/* мобильный хиро (прототип: заголовок + формула «Модель → узел → деталь») */
.agi-mhero{display:none}

/* подсказка под схемой: десктопная/мобильная версии текста */
.agi-hint .hm{display:none}

/* сетка: узлы 240 / схема 1fr / панель 380 */
.agi-shell{display:grid;grid-template-columns:240px 1fr 380px;gap:14px;align-items:start;margin-top:14px}
.agi-card{background:#fff;border:1px solid var(--line);border-radius:14px}

/* ── левая колонка: модель (селект) + узлы ── */
.agi-side{position:sticky;top:12px}
.agi-side .ttl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-weight:700;padding:13px 14px 8px}
.agi-side .tb{border-top:1px solid var(--line)}

/* десктоп: компактный выпадающий список — узлы сразу под ним */
.agi-modelpick{display:flex;align-items:center;gap:9px;cursor:pointer;padding:12px 12px 11px}
.agi-modelpick>span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-weight:700;flex:none}
#agi-model-sel{flex:1;min-width:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
  font:600 13.5px/1.2 inherit;font-family:inherit;padding:8px 30px 8px 12px;cursor:pointer;min-height:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2316a34a' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
#agi-model-sel:hover{border-color:var(--g)}

/* чипы моделей — только мобильная лента (на десктопе скрыты) */
.agi-models{display:none}
.agi-model{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:600;color:#555;cursor:pointer}
.agi-model:hover{border-color:var(--g)}
.agi-model.active{background:var(--g);border-color:var(--g);color:#fff}

.agi-nodes{padding:6px;max-height:520px;overflow:auto}
.agi-node{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:7px 9px;border-radius:10px;cursor:pointer;min-height:48px;border-left:3px solid transparent}
.agi-node:hover{background:var(--hover)}
.agi-node.active{background:var(--hl);border-left-color:var(--g);font-weight:700}
.agi-nthumb{width:44px;height:44px;border-radius:9px;background:var(--soft);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.agi-nthumb img{width:100%;height:100%;object-fit:cover;display:block}
.agi-nthumb svg{width:26px;height:26px;color:#8aa88f}
.agi-node .nm{flex:1;min-width:0;font-size:13px;line-height:1.25;color:#3a3f45}
.agi-node.active .nm{color:var(--g2)}
.agi-node .cnt{background:#eef2ec;color:#5b6b52;font-size:11px;font-weight:700;border-radius:9px;padding:2px 7px;flex:none}
.agi-node.active .cnt{background:#d7f0d9;color:var(--g2)}

/* ── центр: схема ── */
.agi-schemewrap{padding:12px;position:sticky;top:12px;min-width:0;overflow:hidden}
.agi-stitle{margin:2px 4px 10px;font-size:16px;font-weight:700}
.agi-stitle small{color:var(--mut);font-weight:400;font-size:12.5px;margin-left:8px}
.agi-schemebox{background:#fbfcfa;border:1px solid var(--line);border-radius:12px;min-height:440px;position:relative;overflow:hidden}
#agi-schema{display:block;max-width:100%}
.agi-schema{width:100%;max-width:100%;height:auto;display:block}
.agi-schema .cal{cursor:pointer}
.agi-schema .bg{fill:#fff;stroke:var(--line);stroke-width:2;transition:fill .13s,stroke .13s}
.agi-schema .anchor{fill:#d81e1e;stroke:#fff;stroke-width:1.5}
.agi-schema .ld{stroke:#aab0b8;stroke-width:1.6;transition:stroke .13s}
.agi-schema text{fill:var(--ink);font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.agi-schema .cal.stock-ok .bg{stroke:var(--g)}
.agi-schema .cal:hover .bg,.agi-schema .cal.hov .bg{fill:#dcfce7;stroke:var(--g);stroke-width:2.5}
.agi-schema .cal:hover .ld,.agi-schema .cal.hov .ld{stroke:var(--g);stroke-width:2}
.agi-schema .cal.sel .bg{fill:var(--g);stroke:var(--g2)}
.agi-schema .cal.sel text{fill:#fff}
.agi-schema .cal.sel .ld{stroke:var(--g);stroke-width:2.2}

/* впечатанные в фото номера (T20/T30): кольцо ВСЕГДА видно — рамка вокруг цифры
   говорит, что она кликабельна (как кружки на T40); белый ореол — читаемость на фото */
.agi-schema .cal.bk .ring{fill:rgba(255,255,255,.34);stroke:var(--g);stroke-width:2;
  transition:stroke .13s,fill .13s,stroke-width .13s;filter:drop-shadow(0 0 1.2px rgba(255,255,255,.95))}
.agi-schema .cal.bk.stock-ok .ring{stroke:var(--g);stroke-width:2.4}
.agi-schema .cal.bk:hover .ring,.agi-schema .cal.bk.hov .ring{stroke:var(--g2);stroke-width:3.2;fill:rgba(22,163,74,.20)}
.agi-schema .cal.bk.sel .ring{stroke:var(--g2);stroke-width:3.4;fill:rgba(22,163,74,.34)}
.agi-hint{font-size:11.5px;color:var(--mut);padding:10px 6px 2px}

/* ── правая колонка: детали ── */
.agi-panel{position:sticky;top:12px;display:flex;flex-direction:column;max-height:640px}
.agi-panel .top{padding:11px 12px;border-bottom:1px solid var(--line);position:relative}
.agi-panel .top .si{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--mut);font-size:14px;pointer-events:none}
.agi-panel .top input{width:100%;padding:9px 34px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;background:#fff;color:var(--ink)}
.agi-panel .top .sx{position:absolute;right:20px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--mut);cursor:pointer;font-size:14px;display:none;padding:4px}
.agi-panel .top .sx.show{display:block}

/* плашка ошибки цен */
.agi-err{margin:10px 12px 0;background:#fffbea;border:1px solid #f4e6b0;color:#6b5b17;border-radius:10px;
  padding:9px 12px;font-size:12.5px;display:none;gap:10px;align-items:center;justify-content:space-between}
.agi-err.show{display:flex}
.agi-err button{border:1px solid #e5d48a;background:#fff;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;color:#6b5b17;white-space:nowrap}

.agi-rows{overflow:auto;padding:7px;flex:1}
.agi-row{display:flex;gap:10px;padding:10px 9px;border-radius:11px;border:1px solid transparent;border-left:3px solid transparent}
.agi-row+.agi-row{margin-top:2px}
.agi-row.hov{background:var(--hover);border-left-color:var(--g)}
.agi-row.sel{background:var(--hl);border-color:var(--line);border-left-color:var(--g)}
.agi-bdg{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--ink);
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;padding:0}
.agi-row.sel .agi-bdg{background:var(--g);border-color:var(--g);color:#fff}
.agi-bdg.no{border-style:dashed;color:var(--mut)}
.agi-pi{flex:1;min-width:0}
.agi-pi .nm{font-size:13px;font-weight:600;line-height:1.3}
.agi-pi .meta{display:flex;align-items:baseline;gap:10px;margin:4px 0 3px;flex-wrap:wrap}
.agi-price{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.agi-stock{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:0;border-radius:0;background:none}
.agi-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.agi-stock.ok{color:var(--g2)}
.agi-stock.low{color:var(--warn)}
.agi-stock.ord{color:var(--ord)}
.agi-stock.na{color:var(--mut)}
.agi-pi .art{display:inline-block;font-size:11.5px;color:var(--mut);cursor:pointer;background:none;border:none;padding:0;font-family:ui-monospace,Menlo,monospace;text-align:left}
.agi-pi .art:hover{color:var(--g2)}
.agi-buy{display:flex;flex-direction:column;gap:7px;align-items:flex-end;justify-content:center;flex:none}
.agi-qty{display:flex}
.agi-qty button{width:32px;height:32px;border:1px solid var(--line);background:#f7f8fa;cursor:pointer;font-size:15px;color:var(--ink)}
.agi-qty button:first-child{border-radius:8px 0 0 8px}
.agi-qty button:last-child{border-radius:0 8px 8px 0}
.agi-qty input{width:40px;height:32px;text-align:center;border:1px solid var(--line);border-left:0;border-right:0;font-size:13px;background:#fff;color:var(--ink);-moz-appearance:textfield}
.agi-qty input::-webkit-outer-spin-button,.agi-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.agi-add{background:var(--g);color:#fff;border:none;border-radius:9px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;min-height:34px}
.agi-add:hover{background:var(--g2)}
.agi-add:disabled{background:#cbd5cf;cursor:default}

.foot{border-top:1px solid var(--line);padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.foot .sum{font-size:13px;color:var(--mut)}
.foot .sum b{font-size:16px;color:var(--ink)}
.agi-tocart{background:var(--g);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.agi-tocart:hover{background:var(--g2)}

/* пустой поиск */
.agi-empty{padding:26px 16px;text-align:center;color:var(--mut);font-size:13px}
.agi-empty button{display:block;margin:12px auto 0;border:1.5px solid var(--g);background:#fff;color:var(--g2);border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer}
.agi-empty button:hover{background:var(--hl)}

/* скелетоны загрузки */
.agi-skel-row{display:flex;gap:10px;padding:10px 9px}
.agi-skel{background:linear-gradient(100deg,#eef1ec 40%,#f7f9f5 50%,#eef1ec 60%);background-size:200% 100%;
  animation:agi-shim 1.2s infinite;border-radius:7px}
@keyframes agi-shim{to{background-position:-200% 0}}

/* тост */
.agi-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1e2329;color:#fff;
  padding:11px 18px;border-radius:10px;font-size:13.5px;opacity:0;transition:.25s;z-index:9999;pointer-events:none}
.agi-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── мобильные элементы (по умолчанию скрыты) ── */
.agi-mtoggle{display:none;margin:8px 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13.5px;font-weight:600;cursor:pointer;width:100%;text-align:left}
.agi-mbar{display:none}
.agi-pop{display:none}
.agi-sheet{display:none}

/* Скрыть штатный блок выбора модели Aspro "Запчасти для модели: ..." */
.agi-modelbar{display:none !important}

/* ═══════ ПЛАНШЕТ ≤1080: одна колонка ═══════ */
@media(max-width:1080px){
  .agi-shell{grid-template-columns:minmax(0,1fr)}   /* minmax(0,..) — иначе SVG-схема распирает колонку (grid-blowout) */
  .agi-side,.agi-panel,.agi-schemewrap{position:static;max-height:none;width:100%}
  .agi-nodes{max-height:none}
}

/* ═══════ МОБИЛЬНЫЙ ≤600: визард + bottom-sheet ═══════ */
@media(max-width:600px){
  .agi-shell{padding-bottom:78px;margin-top:0}
  /* десктопный хиро и заголовок схемы скрыты — их роль играют mhero и mbar */
  .agi-hero{display:none}
  .agi-stitle{display:none}
  /* мобильный хиро по прототипу */
  .agi-mhero{display:block;padding:12px 2px 0}
  .agi-mhero .t{font-size:17px;font-weight:700;line-height:1.25}
  .agi-mhero p{margin:3px 0 0;font-size:12px;color:#4b5a4e}
  .agi-side{border:none;background:none}
  .agi-side .ttl{display:none}
  /* селект скрыт — модель выбирается лентой чипов */
  .agi-modelpick{display:none}
  /* модели — липкая лента чипов (по прототипу) */
  .agi-models{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding:10px 2px;position:sticky;top:0;background:#fff;z-index:60;
    border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
  .agi-models::-webkit-scrollbar{display:none}
  .agi-model{flex:none}
  /* подсказка — мобильный текст */
  .agi-hint .hd{display:none}
  .agi-hint .hm{display:inline}
  /* схема: пинч-зум двумя пальцами, без лишней пустоты */
  .agi-schemebox{touch-action:pinch-zoom;min-height:240px}
  .agi-divider{margin-top:20px}
  /* узлы — горизонтальная лента плиток */
  .agi-nodes{display:flex;gap:8px;overflow-x:auto;max-height:none;padding:11px 2px;-webkit-overflow-scrolling:touch}
  .agi-nodes::-webkit-scrollbar{display:none}
  .agi-node{flex:none;width:88px;flex-direction:column;text-align:center;gap:5px;min-height:0;border-left:none;
    border:1px solid var(--line);border-radius:11px;padding:8px 6px;background:#fff}
  .agi-node.active{border-color:var(--g);background:var(--hl)}
  .agi-nthumb{width:46px;height:46px}
  .agi-nthumb svg{width:32px;height:32px}
  .agi-node .nm{flex:none;font-size:10.5px;font-weight:600}
  /* счётчик позиций на мобильных плитках не выводим */
  .agi-node .cnt{display:none}
  /* панель со списком скрыта — её роль играет bottom-sheet */
  .agi-panel{display:none}
  .agi-mtoggle{display:none}

  /* нижняя панель со смыслом */
  .agi-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:#1e2329;color:#fff;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .agi-mbar .s{flex:1;min-width:0;font-size:12px;line-height:1.3;opacity:.92;overflow:hidden}
  .agi-mbar .s b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .agi-mopen{background:#fff;color:#1e2329;border:none;border-radius:9px;padding:10px 13px;font-weight:700;font-size:12.5px;cursor:pointer;min-height:44px;white-space:nowrap}
  .agi-mcart{background:var(--g);border:none;color:#fff;border-radius:9px;padding:10px 12px;font-weight:700;font-size:13px;cursor:pointer;position:relative;min-height:44px;display:flex;align-items:center}
  .agi-mcart em{position:absolute;top:-6px;right:-6px;font-style:normal;background:#dc2626;font-size:10.5px;min-width:18px;height:18px;
    border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid #1e2329;padding:0 3px}
  .agi-mcart em:empty,.agi-mcart em[data-c="0"]{display:none}

  /* карточка детали по тапу на выноску */
  .agi-pop{display:none;position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));
    background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(2,6,23,.22);
    padding:13px 14px;z-index:950}
  .agi-pop.open{display:block}
  .agi-pop .nm{font-weight:700;font-size:13.5px;line-height:1.3;padding-right:22px}
  .agi-pop .art{font-size:11.5px;color:var(--mut);margin:3px 0 6px;font-family:ui-monospace,Menlo,monospace}
  .agi-pop .meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .agi-pop .actrow{display:flex;gap:9px}
  .agi-pop .agi-add{flex:1;min-height:44px}
  .agi-pop .x{position:absolute;top:8px;right:10px;border:none;background:none;font-size:15px;color:var(--mut);cursor:pointer;padding:6px}

  /* bottom-sheet со списком деталей */
  .agi-sheet{display:flex;position:fixed;left:0;right:0;bottom:0;top:16%;z-index:960;
    background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -14px 44px rgba(2,6,23,.28);
    flex-direction:column;transform:translateY(105%);transition:transform .28s}
  .agi-sheet.open{transform:none}
  .agi-sheet .grab{width:44px;height:5px;border-radius:3px;background:#d7ded6;margin:9px auto 4px;flex:none;cursor:pointer}
  .agi-sheet .sh-h{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px}
  .agi-sheet .sh-h b{font-size:14.5px}
  .agi-sheet .sh-h button{border:none;background:#f0f3ee;border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;color:var(--ink)}
  .agi-sheet .top{padding:0 14px 9px}
  .agi-sheet .top input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;background:#fff;color:var(--ink)}
  .agi-sheet .agi-rows{padding:4px 8px 16px}
}

/* ── разделитель перед штатным листингом (по прототипу) ── */
.agi-divider{margin:34px 0 0;border-top:1px solid var(--line);padding-top:20px}
.agi-divider h3{margin:0 0 3px;font-size:18px}
.agi-divider h3 span{color:var(--mut);font-weight:400;font-size:14px}
.agi-divider p{margin:0;color:var(--mut);font-size:13px}

/* доступность: уважать отключённую анимацию */
@media(prefers-reduced-motion:reduce){
  .agi-skel{animation:none}
  .agi-sheet{transition:none}
  .agi-schema .bg,.agi-schema .ld{transition:none}
  .agi-toast{transition:none}
}

/* ── листинг запчастей под подборщиком: плитки компактнее ──────────────
   файл грузится только на /catalog/parts/, поэтому .catalog_block здесь
   всегда относится к разделу запчастей — правки не задевают другие каталоги */
.catalog_block.items{margin-top:6px}
/* десктоп: 5 в ряд вместо 4 — плитки заметно мельче */
@media(min-width:1200px){
  .catalog_block .item.catalog-block-view__item.col-lg-3{width:20%;flex:0 0 20%;max-width:20%}
}
/* фото ниже, поля плотнее, типографика мельче */
.catalog_block .catalog_item .image_wrapper_block img{max-height:150px;width:auto}
.catalog_block .catalog_item .item-title,
.catalog_block .catalog_item .item-title a{font-size:12.5px;line-height:1.32}
.catalog_block .catalog_item .item-title{max-height:2.7em;overflow:hidden}
.catalog_block .catalog_item .item_info{padding:9px 10px 12px}
.catalog_block .catalog_item .item_info--top_block{margin-bottom:5px}
.catalog_block .catalog_item .article_block{font-size:11px;margin-bottom:3px}
.catalog_block .catalog_item .cost.prices{margin-top:2px}
.catalog_block .catalog_item .price{font-size:15px}
/* планшет/мобайл — нативная сетка Aspro (3/2 в ряд), только внутренняя плотность */
@media(max-width:767px){
  .catalog_block .catalog_item .image_wrapper_block img{max-height:118px}
  .catalog_block .catalog_item .item-title,
  .catalog_block .catalog_item .item-title a{font-size:12px}
  .catalog_block .catalog_item .item_info{padding:8px 8px 11px}
}