/* =====================================================================================
   🛒 css/marketplaces.css — «Маркетплейси»: каталог і картка пропозиції (редизайн 6.141.0).
   Власник 12.11.2026: «раздел выглядит слабо, карточки товаров с характеристиками — запутанно».
   Напрям «Calm Apple» (скіл apple-design): спокійна ієрархія, згруповані списки, одна контекстна дія.
   • Префікс .mpx-. Поверхні / кнопки / чипи — ГЛОБАЛЬНІ класи (.card .btn .seg .chip .pill .hero-num .reveal
     з css/apple-ui.css); тут — розкладка, рядки списків, перемикачі, іконки.
   • Кольори — лише токени теми (--text-*, --bg-*, --accent, --success, --warning, --danger), тож темна тема працює.
     Винятки за матеріалом: біла «ручка» перемикача і білий фон мініатюр (фото товарів — на білому).
   • Іконки — CSS-маски (.mpx-i-<імʼя>): у розмітці каталогу й картки немає жодного інлайн-SVG.
   • Телефон (≤768 px) — НЕ тут, а в css/mobile-ux.css (блок «🛒 Маркетплейси .mpx»); тут лише ≥769 px.
   ===================================================================================== */

.mpx {
    --mpx-sep: color-mix(in srgb, var(--text-primary, #0f172a) 9%, transparent);      /* hairline */
    --mpx-fill: color-mix(in srgb, var(--text-primary, #0f172a) 4%, transparent);     /* hover */
    --mpx-fill-2: color-mix(in srgb, var(--text-primary, #0f172a) 7.5%, transparent); /* чип джерела, пошук */
    --mpx-canvas: color-mix(in srgb, var(--text-primary, #0f172a) 3.5%, var(--bg-secondary, #fff));
    --mpx-cell: var(--bg-secondary, #fff);
    --mpx-tint: color-mix(in srgb, var(--accent, #2563eb) 7%, transparent);
    --mpx-ok: var(--success, #16a34a);
    --mpx-bad: var(--danger, #dc2626);
    --mpx-warn: var(--warning, #f59e0b);
    --mpx-bad-t: color-mix(in srgb, var(--danger, #dc2626) 86%, var(--text-primary, #0f172a));
    /* бурштиновий текст (чип «вручну», «спайки нема», «⚠ N попереджень», лічильник «Увага» на треку сегмента): 62 % давав 3.82–4.26:1 —
       50 % дає ≥ 5:1 на всіх поверхнях .mpx (ревʼю 13.11, другий прохід) */
    --mpx-warn-t: color-mix(in srgb, var(--warning, #f59e0b) 50%, var(--text-primary, #0f172a));
    --mpx-ease: cubic-bezier(0.32, 0.72, 0, 1);   /* критично демпфована, як у CRM */
    --mpx-r: 12px;
    /* колонка підписів у рядках груп — ОДНА на весь лист (.mpx-row, .mpx-pr-h, відступ редактора): значення не «стрибають» між
       розділами при прокрутці (critic 12.11: 30 % проти 36 %) */
    --mpx-lw-min: 180px; --mpx-lw-k: .34;
    --mpx-lw: minmax(var(--mpx-lw-min), calc(var(--mpx-lw-k) * 100%));
    /* колонка «чип джерела + дія» рядків із полем (.fx) — одна ширина на весь лист: праві краї полів на одній вертикалі (ревʼю 13.11) */
    --mpx-actw: 156px;
    /* приглушений текст розділу: темніший за глобальний --text-muted (#64748B давав 4.44:1 на полотні листа, 4.32:1 на виділеному
       рядку, 3.94:1 на треку сегмента) — ≥ 5.2:1 на всіх поверхнях .mpx; ієрархія та сама: --text-secondary темніший (ревʼю 13.11).
       Темна тема — світліший, бо мішаємо з --text-primary */
    --mpx-muted: color-mix(in srgb, var(--text-muted, #64748b) 80%, var(--text-primary, #0f172a));
    color: var(--text-primary, #0f172a);
}
[data-theme="dark"] .mpx { --mpx-canvas: var(--bg-primary, #0f172a); }

/* ⚑ головна причина «слабкого» вигляду: у світлій темі .text-muted не мав кольору — підтекст був чорним */
.mpx .text-muted { color: var(--mpx-muted); }
.mpx [hidden] { display: none !important; }
.mpx-num, .mpx-v, .mpx .hero-num { font-variant-numeric: tabular-nums; }
.mpx-grow { flex: 1 1 auto; }
.mpx-sub { font-size: 12px; line-height: 1.4; color: var(--mpx-muted); letter-spacing: .005em; font-weight: 400; }
.mpx-loading { padding: 24px; }
.mpx-sub.bad, .mpx .bad-t { color: var(--mpx-bad-t); }
.mpx-sub.warn, .mpx .warn-t { color: var(--mpx-warn-t); }
.mpx-dash { color: var(--mpx-muted); }   /* «—» порожнього значення: 75 % --text-muted давав 2.97:1 */
.mpx-vh { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; opacity: 0;
    overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.mpx-state.card { padding: 18px; }

/* ── фокус: кільце 3px акценту лише з клавіатури — правила в КІНЦІ файлу (перекривають box-shadow: none кнопок і полів) ── */
.mpx #mpxSheet:focus, .mpx.mpx-sheet:focus { outline: none; box-shadow: none; }

/* ═════════════════════════════ ІКОНКИ (маски) ═════════════════════════════ */
.mpx-i { width: 16px; height: 16px; display: inline-block; flex: 0 0 auto; vertical-align: -3px; background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.mpx-i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E"); }
.mpx-i-chev, .mpx-i-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E"); }
.mpx-i-left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 6-6 6 6 6'/%3E%3C/svg%3E"); }
.mpx-i-updown { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 9.5 4.5-4.5 4.5 4.5'/%3E%3Cpath d='m7.5 14.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); }
.mpx-i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.mpx-i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mpx-i-doc { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5'/%3E%3Cpath d='M9 12.5h6M9 16h4'/%3E%3C/svg%3E"); }
.mpx-i-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.6 9.4a2.1 2.1 0 0 0-3-3L5 17v3'/%3E%3Cpath d='m13.8 8.2 3 3'/%3E%3C/svg%3E"); }
.mpx-i-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5A2 2 0 0 1 5.5 5.5H9l2 2.2h7.5a2 2 0 0 1 2 2v7.8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.mpx-i-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17'/%3E%3Cpath d='M12 3.5c2.4 2.4 3.4 5.2 3.4 8.5s-1 6.1-3.4 8.5c-2.4-2.4-3.4-5.2-3.4-8.5s1-6.1 3.4-8.5z'/%3E%3C/svg%3E"); }
.mpx-i-sync { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10.5A7.5 7.5 0 0 0 6 7l-1.5 1.5'/%3E%3Cpath d='M4.5 4.5v4h4'/%3E%3Cpath d='M4.5 13.5A7.5 7.5 0 0 0 18 17l1.5-1.5'/%3E%3Cpath d='M19.5 19.5v-4h-4'/%3E%3C/svg%3E"); }
.mpx-i-eyeoff { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 3.5 17 17'/%3E%3Cpath d='M10.5 6.2A9 9 0 0 1 12 6c4.8 0 8 4.3 9 6a15 15 0 0 1-2.6 3.2M6.8 7.8C4.8 9.2 3.5 11 3 12c1 1.7 4.2 6 9 6 1.5 0 2.8-.4 4-1'/%3E%3Cpath d='M10 10a2.8 2.8 0 0 0 4 4'/%3E%3C/svg%3E"); }
.mpx-i-expand { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E"); }
.mpx-i-collapse { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 20 5-5 5 5'/%3E%3Cpath d='m7 4 5 5 5-5'/%3E%3C/svg%3E"); }
.mpx-i-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.8 2.5 5.1 5.6.8-4 4 1 5.6-5.1-2.7-5 2.7.9-5.6-4-4 5.6-.8z'/%3E%3C/svg%3E"); }
.mpx-i-swap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.5h14l-3.5-3.5'/%3E%3Cpath d='M19.5 15.5h-14l3.5 3.5'/%3E%3C/svg%3E"); }
.mpx-i-power { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v8'/%3E%3Cpath d='M6.7 6.7a7.5 7.5 0 1 0 10.6 0'/%3E%3C/svg%3E"); }
.mpx-i-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='m6.5 7 .8 11.5a2 2 0 0 0 2 1.9h5.4a2 2 0 0 0 2-1.9L17.5 7'/%3E%3Cpath d='M9.5 7V4.8h5V7'/%3E%3C/svg%3E"); }
.mpx-i-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5v13M5.5 12h13'/%3E%3C/svg%3E"); }
.mpx-i-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.2 4.2 0 0 0 6 0l3-3a4.2 4.2 0 0 0-6-6l-1 1'/%3E%3Cpath d='M14 10a4.2 4.2 0 0 0-6 0l-3 3a4.2 4.2 0 0 0 6 6l1-1'/%3E%3C/svg%3E"); }
.mpx-i-image { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m20.5 15.5-4.5-4.5-9.5 8'/%3E%3C/svg%3E"); }
.mpx-i-code { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.5 7-5 5 5 5'/%3E%3Cpath d='m15.5 7 5 5-5 5'/%3E%3C/svg%3E"); }
.mpx-i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2.5'/%3E%3Cpath d='M15.5 8.5V6a2.5 2.5 0 0 0-2.5-2.5H6A2.5 2.5 0 0 0 3.5 6v7A2.5 2.5 0 0 0 6 15.5h2.5'/%3E%3Cpath d='M14.5 11.8v5.4M11.8 14.5h5.4'/%3E%3C/svg%3E"); }
.mpx-i-reset { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 1 0 2.4-5.5'/%3E%3Cpath d='M4.5 4.5V9H9'/%3E%3C/svg%3E"); }
.mpx-i-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v7.2'/%3E%3Cpath d='M12 17.6v.1'/%3E%3C/svg%3E"); }
.mpx-i-warn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.6 2.9 17.4A2 2 0 0 0 4.6 20.4h14.8a2 2 0 0 0 1.7-3L13.7 4.6a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Cpath d='M12 16.8v.1'/%3E%3C/svg%3E"); }
.mpx-i-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.8v.1'/%3E%3C/svg%3E"); }
.mpx-i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E"); }
.mpx-i-ext { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 16.5 16.5 7.5'/%3E%3Cpath d='M9 7.5h7.5V15'/%3E%3C/svg%3E"); }
.mpx-i-list { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5h10M9.5 12h10M9.5 17.5h10'/%3E%3Cpath d='M4.8 6.5h.1M4.8 12h.1M4.8 17.5h.1' stroke-width='2.8'/%3E%3C/svg%3E"); }

/* ═════════════════════════════ ПРИМІТИВИ ═════════════════════════════ */
/* статус — пігулка з кольоровою крапкою (глобальний .chip ok|warn|info|mut|bad + модифікатор) */
.chip.mpx-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip.mpx-lg { font-size: 12px; padding: 4px 10px 4px 9px; }
button.chip.mpx-pillbtn { appearance: none; border: 0; cursor: pointer; font-family: inherit; line-height: 1.25; transition: background 140ms ease; }
@media (hover: hover) { button.chip.mpx-pillbtn:hover { background: color-mix(in srgb, currentColor 18%, transparent); } }   /* кнопка, не статична пігулка (ревʼю 13.11) */
.mpx-pill-chev { width: 10px; height: 10px; margin: 0 -2px 0 1px; vertical-align: 0; }

/* крихітний чип джерела значення: приглушений; колір — лише для винятків */
.mpx-src { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; line-height: 1.55;
    letter-spacing: .01em; white-space: nowrap; color: var(--text-secondary); background: var(--mpx-fill-2); border-radius: 6px; padding: 0 6px; }   /* secondary: AA для 10.5 px (muted давав ~4.1:1) */
.mpx-src.man { color: var(--mpx-warn-t); background: color-mix(in srgb, var(--mpx-warn) 14%, transparent); }
.mpx-src.off { color: var(--text-secondary); }
.mpx-src.bad { color: var(--mpx-bad-t); background: color-mix(in srgb, var(--mpx-bad) 11%, transparent); }
/* «зі Службових ›» — чип-перехід на місці чипа джерела: значення службових характеристик живе в розділі «Службові» */
button.mpx-src.mpx-src-svc { appearance: none; border: 0; margin: 0; cursor: pointer; font-family: inherit;
    color: color-mix(in srgb, var(--accent, #2563eb) 86%, var(--text-primary, #0f172a)); background: var(--mpx-tint); }
button.mpx-src.mpx-src-svc.man { color: var(--mpx-warn-t); background: color-mix(in srgb, var(--mpx-warn) 14%, transparent); }
@media (hover: hover) { button.mpx-src.mpx-src-svc:hover { text-decoration: underline; text-underline-offset: 2px; } }
/* тег у мета-рядку переноситься в межах комірки товару (nowrap друкував «змінено: …» поверх «Уп.» і «Ціни» — verifier 12.11) */
.mpx-tag { display: inline-block; max-width: 100%; min-width: 0; font-size: 11px; font-weight: 600; line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
    color: color-mix(in srgb, var(--accent, #2563eb) 88%, var(--text-primary)); }
.mpx-tag .mpx-i { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.mpx-n { margin-left: 4px; font-weight: 500; color: var(--mpx-muted); font-variant-numeric: tabular-nums; }
.seg .mpx-n { color: var(--text-secondary); }   /* лічильники режимів на сірому треку сегмента — ключові числа («Відмічені 8») */
.mpx-nw { white-space: nowrap; }   /* «≈ 29 грн/шт» не рветься на «грн/» + «шт» */
.mpx-n.bad { color: var(--mpx-bad-t); font-weight: 650; }
.mpx-n.warn { color: var(--mpx-warn-t); font-weight: 650; }
.mpx-cap { font-size: 11px; font-weight: 600; line-height: 1.6; color: var(--text-secondary); background: var(--mpx-fill-2); border-radius: 999px;
    padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* iOS-перемикач на справжньому чекбоксі (фокус і клавіатура — нативні) */
.mpx-sw { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; vertical-align: middle; }
.mpx-sw > input[type=checkbox] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mpx-sw-t { position: relative; display: block; width: 38px; height: 22px; border-radius: 999px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--text-primary, #0f172a) 16%, transparent); transition: background 160ms ease, box-shadow 140ms ease; }
.mpx-sw-t::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .12); transition: transform 160ms var(--mpx-ease); }
.mpx-sw > input:checked + .mpx-sw-t { background: var(--mpx-ok); }
.mpx-sw > input:checked + .mpx-sw-t::before { transform: translateX(16px); }
/* «частково» (папка: «відмічено N з M» поруч) — не «майже увімкнено»: нейтральний темніший трек і бігунок по центру з рискою (як змішаний
   стан у macOS), без зеленої половини (ревʼю 13.11: «1 з 10» і «4 з 6» читались як майже повна папка, і клік «вимкнути зелену» відмічав
   решту). Риска — на білій ручці, тож темна в обох темах */
.mpx-sw > input:indeterminate + .mpx-sw-t { background: color-mix(in srgb, var(--text-primary, #0f172a) 30%, transparent); }
.mpx-sw > input:indeterminate + .mpx-sw-t::before { transform: translateX(8px); }
.mpx-sw > input:indeterminate + .mpx-sw-t::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; border-radius: 1px; background: #475569; }
.mpx-sw > input:disabled + .mpx-sw-t { opacity: .45; }
.mpx-sw:has(> input:disabled) { cursor: default; }
.mpx-sw > input:focus-visible + .mpx-sw-t, .mpx-sw > input[data-kf]:focus + .mpx-sw-t { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent); }
.mpx-sw.sm .mpx-sw-t { width: 32px; height: 18px; }
.mpx-sw.sm .mpx-sw-t::before { width: 14px; height: 14px; }
.mpx-sw.sm > input:checked + .mpx-sw-t::before { transform: translateX(14px); }

/* чекбокс вибору — нативний, акцентний (indeterminate — теж нативний) */
.mpx input[type=checkbox].mpx-ck { accent-color: var(--accent, #2563eb); width: 18px; height: 18px; margin: 0; cursor: pointer; flex: 0 0 auto; vertical-align: middle; }

/* іконкові кнопки (глобальні .btn .btn-ghost .btn-sm + квадрат) */
.mpx .btn.mpx-ib { width: 30px; height: 30px; min-width: 0; padding: 0; gap: 0; border-radius: 8px; border-color: transparent; box-shadow: none;
    background: transparent; color: var(--text-secondary); flex: 0 0 auto; }
@media (hover: hover) { .mpx .btn.mpx-ib:hover { background: var(--mpx-fill-2); color: var(--text-primary); box-shadow: none; } }
.mpx .btn.mpx-ib:hover:not(:active) { transform: none; }
.mpx .btn.mpx-ib:disabled { opacity: .35; cursor: default; background: transparent; }
.mpx .btn.mpx-ib .mpx-i { width: 17px; height: 17px; vertical-align: 0; }
.mpx .btn.mpx-ib.xs { width: 26px; height: 26px; border-radius: 7px; }
.mpx .btn.mpx-ib.xs .mpx-i { width: 15px; height: 15px; }
.mpx .btn:hover:not(:active) { transform: none; }   /* без «підскоку» на hover; натиск (scale .96 з apple-ui) лишається */
.mpx .btn .mpx-i { width: 14px; height: 14px; vertical-align: 0; }
/* недоступна кнопка (напр. «Зберегти» без правок) — видно, що натискати нема чого (глобального стилю :disabled для .btn немає) */
.mpx .btn:disabled { opacity: .42; cursor: default; box-shadow: none; transform: none; }
/* «Зберегти» без правок — нейтрально, як неактивна кнопка iOS: не блідо-синя пляма (білий на блідому 1.6:1 читався як «іде
   завантаження» й був найнасиченішим у низу листа — ревʼю 13.11) */
.mpx .btn.btn-primary:disabled { opacity: 1; background: var(--mpx-fill-2); border-color: transparent; color: var(--mpx-muted); box-shadow: none; }
.mpx .btn.btn-primary:disabled .mpx-kbd { opacity: .6; }
.mpx .btn-ghost { box-shadow: none; }

.mpx-link { appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--accent, #2563eb); border-radius: 5px; }
@media (hover: hover) { .mpx-link:hover { text-decoration: underline; text-underline-offset: 2px; } }
.mpx-link .mpx-i { width: 13px; height: 13px; vertical-align: 0; }
.mpx-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
.mpx-danger { appearance: none; border: 0; background: none; width: 100%; min-height: 44px; padding: 10px 16px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--mpx-bad-t); border-radius: var(--mpx-r); }
@media (hover: hover) { .mpx-danger:hover { background: color-mix(in srgb, var(--mpx-bad) 6%, transparent); } }

/* поля — лише всередині .mpx (перекривають глобальні input/select зі style.css) */
.mpx :is(input.mpx-field, select.mpx-field, textarea.mpx-field) { width: 100%; min-width: 0; height: 32px; padding: 5px 10px; margin: 0;
    font-family: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.3; color: var(--text-primary); background: var(--mpx-cell);
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent); border-radius: 8px; box-shadow: none; }
.mpx textarea.mpx-field { height: auto; min-height: 0; padding: 7px 10px; line-height: 1.5; resize: vertical; }
.mpx select.mpx-field { padding-right: 6px; cursor: pointer; }
/* селекти листа — стрілка ⇕ фоном, як у попапах каталогу (Chrome малював нативну «⌄», WebKit — «⇕»: два гліфи в одному розділі,
   текст зсунутий на 4 px від поля під ним — ревʼю 13.11); недоступний селект — без стрілки (фон перекриває :disabled) */
.mpx select.mpx-field, .mpx .mpx-svc select { -webkit-appearance: none; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 9.5 4.5-4.5 4.5 4.5'/%3E%3Cpath d='m7.5 14.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; }
.mpx .mpx-field::placeholder { color: var(--mpx-muted); }   /* плейсхолдер — це автозначення («725», бренд CRM): читається, але тихіше за вписане */
.mpx .mpx-field:disabled { color: var(--text-muted); background: var(--mpx-fill); cursor: default; }
.mpx .mpx-field.is-invalid { border-color: color-mix(in srgb, var(--mpx-bad) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpx-bad) 12%, transparent); }
/* поле «Службових», на яке вказує помилка сервера (JS edInvalid; ті поля — без .mpx-field) — та сама червона рамка */
.mpx .mpx-svc :is(input, select).is-invalid { border-color: color-mix(in srgb, var(--mpx-bad) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpx-bad) 12%, transparent); }
.mpx input.mpx-field.mpx-w80 { width: 84px; text-align: right; }
.mpx input.mpx-field.mpx-w100 { width: 112px; text-align: right; }
.mpx input.mpx-field.sm { height: 30px; font-size: 13px; }

/* пошук із іконкою */
.mpx-search { position: relative; display: block; flex: 1 1 240px; min-width: 180px; max-width: 520px; }   /* 4 контроли в ряд уже від ~720 px списку */
.mpx-search > .mpx-i { position: absolute; left: 11px; top: 50%; margin-top: -7.5px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
.mpx .mpx-search input.mpx-field { height: 36px; padding-left: 33px; border-radius: 10px; border-color: transparent; background: var(--mpx-fill-2); font-size: 14px; }
.mpx .mpx-search input.mpx-field:focus { background: var(--mpx-cell); }
.mpx-search.sm { flex: 0 1 260px; min-width: 0; }
.mpx .mpx-search.sm input.mpx-field { height: 32px; font-size: 13px; }

/* «спливна» кнопка-список: видимий підпис + прозорий нативний select поверх (клік відкриває системний список) */
.mpx-popup { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; max-width: 280px; padding: 0 11px 0 13px;
    border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent); background: var(--mpx-cell);
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.mpx-popup > .mpx-pt { overflow: hidden; text-overflow: ellipsis; }
.mpx-popup > .mpx-i { width: 14px; height: 14px; color: var(--text-muted); }
.mpx-popup > .mpx-i-folder { color: var(--text-secondary); }
.mpx .mpx-popup > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0; font-size: 14px; }
.mpx-popup:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent); }
.mpx-popup.sm { height: 32px; padding: 0 9px 0 10px; border-radius: 9px; }
.mpx-popup.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--mpx-tint); }

/* капсули-фільтри з прихованим чекбоксом */
.mpx label.pill { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; }   /* = поле пошуку й «Усі категорії» */
.mpx label.pill:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent); }
.mpx label.pill.on .mpx-n { color: color-mix(in srgb, #fff 82%, transparent); }

/* ═════════════════════════════ ШАПКА РОЗДІЛУ ═════════════════════════════ */
.mpx-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mpx-chan { display: inline-flex; align-items: center; gap: 10px; }
.mpx-chan-n { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

/* ═════════════════════════════ ОГЛЯД (вкладка) ═════════════════════════════ */
.mpx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.mpx-tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpx-tiles.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mpx .mpx-tile.card { padding: 13px 14px 12px; border-radius: var(--mpx-r); border: 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 7%, transparent), 0 1px 2px rgba(15, 23, 42, .04); min-width: 0; }
.mpx-tile-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.mpx .mpx-tile .hero-num { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.mpx .mpx-tile .hero-num.bad-t { color: var(--mpx-bad-t); }
.mpx-tile .mpx-sub { margin-top: 5px; }
.mpx-tile .mpx-tl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* рядок підтексту плитки — цілий («…», якщо не влізе) */
.mpx-ovw { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.mpx .mpx-panel.card { padding: 16px 18px; }
.mpx-panel-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.mpx-kv { display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.45; }
.mpx-kv b { font-weight: 600; }
.mpx-url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--mpx-fill); }
.mpx-url code { font-size: 12px; word-break: break-all; flex: 1 1 200px; }
.mpx-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.mpx-steps { display: flex; flex-direction: column; }
.mpx-step { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 13.5px; color: var(--text-primary); text-decoration: none; border-radius: 8px; }
.mpx-step + .mpx-step { border-top: 1px solid var(--mpx-sep); }
@media (hover: hover) { .mpx-step:hover { text-decoration: none; background: var(--mpx-fill); } }
.mpx-step-i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--mpx-ok); }
.mpx-step-i .mpx-i { width: 13px; height: 13px; vertical-align: 0; }
.mpx-step.todo .mpx-step-i { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-primary) 22%, transparent); }
.mpx-step.todo .mpx-step-t { color: var(--text-secondary); }
.mpx-step .mpx-i-chev { margin-left: auto; width: 13px; height: 13px; color: var(--text-muted); }
/* «Налаштування → 📥 Фото товарів»: перелік звіту з причинами — товар у рядку (JS impList) */
.mpx-imp-l { margin: 4px 0 0 18px; padding: 0; }

/* ═════════════════════════════ КАТАЛОГ ═════════════════════════════ */
.mpx .mpx-tools.card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; margin-bottom: 10px; border-radius: 14px; }
.mpx-tools2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* мета «папок · підгруп · пропозицій» і ⇕ ⤫ — одним блоком праворуч: при переносі не розʼїжджаються (critic 12.11) */
.mpx-tools2-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; }
.mpx-tools2-r > .mpx-sub { font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* режими — один сегмент, не два ряди в сірій підкладці: не влазить (вузько, меню розгорнуте) — гортається */
.mpx-tools2 > .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.mpx-tools2 > .seg::-webkit-scrollbar { display: none; }
.mpx-tools2 > .seg > .seg-btn { flex: 0 0 auto; white-space: nowrap; }
/* сегмент гортається — край гасне, поки є куди (JS segFade: .fl / .fr; ревʼю 13.11); червоний лічильник за краєм — крапка (телефон, mobile-ux.css) */
.mpx-tools2 > .seg.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.mpx-tools2 > .seg.fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
.mpx-tools2 > .seg.fl.fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent); }

/* список-дерево: рядки — CSS grid з однаковими колонками (без <table>: js/mobile.js його не чіпає).
   overflow: clip, НЕ hidden — інакше липка шапка не липне до сторінки.
   Набір колонок — за шириною САМОГО списку (container queries нижче), а не вікна: з розгорнутим бічним меню (1366 × 768 →
   список 1058 px) сітка за шириною вікна не влазила, і clip мовчки зрізав «Стан» і кнопки папок (verifier 12.11).
   --cols задано на рядках: контейнер своїм запитом сам себе не стилізує */
.mpx .mpx-list.card { padding: 0; border-radius: 14px; overflow: clip; overflow-clip-margin: 24px; container: mpxl / inline-size; }
/* «Стан» — minmax: на просторому списку росте, щоб «● 2 помилки ● 3 попередження» влазило в один рядок (мінімум — той самий, пороги
   container queries рахуються з мінімумів і не змінюються) */
.mpx-lh, .mpx-fold, .mpx-item { --cols: 28px 44px minmax(260px, 1fr) 64px 118px 108px minmax(150px, 210px) 92px minmax(150px, 200px); --fold-span: 5; }
.mpx-list.ro > :is(.mpx-lh, .mpx-fold, .mpx-item) { --cols: 44px minmax(260px, 1fr) 64px 118px 108px minmax(150px, 210px) 92px minmax(150px, 200px); }
.mpx-lh, .mpx-fold, .mpx-item { display: grid; grid-template-columns: var(--cols); column-gap: 12px; align-items: center; padding: 0 16px 0 14px; }
.mpx-lh { position: sticky; top: var(--mpx-top, 0px); z-index: 4; min-height: 38px; background: var(--mpx-cell);
    border-bottom: 1px solid var(--mpx-sep); border-radius: 14px 14px 0 0; }
.mpx-lh .mpx-h { font-size: 11.5px; font-weight: 600; color: var(--mpx-muted); letter-spacing: .02em; white-space: nowrap; }
.mpx-lh .mpx-h.r { text-align: right; }
.mpx-lh .mpx-lh-m, .mpx-lh .mpx-lh-t { display: none; }
.mpx-c-sel { display: flex; align-items: center; justify-content: center; align-self: stretch; }
.mpx-c-num { text-align: right; justify-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.mpx-c-num .mpx-sub { white-space: nowrap; }
.mpx-c-num.is-zero .mpx-v { color: var(--mpx-muted); font-weight: 500; }
.mpx-c-cat, .mpx-lh .mpx-h-cat { padding-left: 12px; }
.mpx-c-cat { min-width: 0; font-size: 12.5px; line-height: 1.38; color: var(--text-secondary); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.mpx-cat-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mpx-c-pub { display: flex; align-items: center; }
.mpx-c-state { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.mpx-c-state .mpx-sub { font-weight: 600; font-size: 11.5px; white-space: nowrap; }
/* під пігулкою — рівно один рядок (помилки й попередження невідміченої — разом); не влазить — «…», перелік у підказці */
.mpx-c-state .mpx-sub.mpx-st1 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* помилки НЕвідміченої — приглушено, колір лише в крапці (червоний текст — у відмічених, де вони справді валять фід); помилки й
   попередження — в одному рядку, але кожне число зі своєю крапкою: червона одна на обидва читалась як «усе — помилки» (ревʼю 13.11) */
.mpx-c-state .mpx-st1:has(> :is(.dotbad, .dotwarn)) { display: inline-flex; gap: 8px; }
.mpx-st1 > :is(.dotbad, .dotwarn) { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--text-secondary); }
.mpx-st1 > .dotbad { flex: 0 0 auto; }   /* не влазить — «…» лише в попереджень: число помилок видно завжди (перелік — у підказці) */
.mpx-st1 > :is(.dotbad, .dotwarn)::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--mpx-bad); vertical-align: 1px; }
.mpx-st1 > .dotwarn::before { background: var(--mpx-warn); }
.mpx-c-act { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* папки */
.mpx-fold { min-height: 48px; padding-top: 6px; padding-bottom: 6px; border-top: 1px solid var(--mpx-sep); cursor: pointer;
    background: var(--mpx-fill-2); transition: background 140ms ease; }
.mpx-lh + .mpx-fold { border-top: 0; }
.mpx-fold.l1 { min-height: 44px; background: var(--mpx-fill); }
@media (hover: hover) { .mpx-fold:hover { background: color-mix(in srgb, var(--text-primary) 9%, transparent); } }
@media (hover: hover) { .mpx-fold.l1:hover { background: color-mix(in srgb, var(--text-primary) 6.5%, transparent); } }
/* натиск на клікабельному рядку — миттєвий відгук (на дотику hover нема); не коли тиснуть вкладений контрол (перемикач, чекбокс, кнопку) */
.mpx-fold:active:not(:has(:is(button, input, label, select):active)) { background: color-mix(in srgb, var(--text-primary) 12%, transparent); transition-duration: 0s; }
.mpx-chev { width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-muted); transition: transform 160ms var(--mpx-ease); }
.mpx-chev .mpx-i { width: 14px; height: 14px; vertical-align: 0; }
.mpx-fold[aria-expanded="true"] .mpx-chev { transform: rotate(90deg); }
.mpx-fold.l1 .mpx-chev { margin-left: 16px; }
.mpx-fold-main { grid-column: span var(--fold-span); display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.mpx-fold-meta { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.mpx-fold.l1 .mpx-fold-main { padding-left: 16px; }   /* шеврон і назва зсуваються разом: відстань між ними — як у l0 (critic 12.11) */
.mpx-fold-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpx-fold.l1 .mpx-fold-name { font-weight: 600; font-size: 13.5px; }
.mpx-m { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mpx-m::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.mpx-m.info::before { background: var(--accent, #2563eb); }
.mpx-m.ok::before { background: var(--mpx-ok); }
.mpx-m.bad::before { background: var(--mpx-bad); }
.mpx-m.bad { color: var(--mpx-bad-t); }
.mpx-m.acc { color: var(--accent, #2563eb); font-weight: 600; }
.mpx-m.acc::before { background: var(--accent, #2563eb); }
.mpx-fold .mpx-c-act .btn.mpx-ib { opacity: .6; transition: opacity 140ms ease, background 140ms ease; }
.mpx-fold:hover .mpx-c-act .btn.mpx-ib, .mpx-fold:focus-within .mpx-c-act .btn.mpx-ib { opacity: 1; }
@media (hover: none) { .mpx-fold .mpx-c-act .btn.mpx-ib { opacity: 1; } }   /* iPad 769–1099: hover нема — 🗂 🌍 не лишаються на .6 (2.7:1) */
.mpx-fold-main .chip { font-size: 10.5px; padding: 1.5px 8px; }

/* рядки пропозицій */
.mpx-item { min-height: 72px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--mpx-sep); cursor: pointer; transition: background 140ms ease; }
@media (hover: hover) { .mpx-item:hover { background: var(--mpx-fill); } }
.mpx-item.is-sel { background: var(--mpx-tint); }
@media (hover: hover) { .mpx-item.is-sel:hover { background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent); } }
.mpx-item:active:not(:has(:is(button, input, label, select):active)) { background: var(--mpx-fill-2); transition-duration: 0s; }
.mpx-thumb { width: 44px; height: 44px; border-radius: 9px; background: #fff; border: 1px solid var(--mpx-sep); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.mpx-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mpx-thumb.empty { background: var(--mpx-fill); color: color-mix(in srgb, var(--text-muted) 75%, transparent); }
.mpx-thumb.empty .mpx-i { width: 18px; height: 18px; vertical-align: 0; }
.mpx-prod { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mpx-name { font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* назва не влазить у 2 рядки (JS: nameFitAll — рядок каталогу, shTitleFit — шапка листа → is-cut): голова — один рядок «…», хвіст (розмір ·
   кратність · «(артикул)», nameSplit) — під нею й видно завжди: ним різняться варіанти (7505 / 8236 / 7507) у вузькому списку, на телефоні й
   при ‹ › у шапці листа (ревʼю 13.11, фінальний прохід). Хвіст — на .9em (рядок специфікації під назвою, не дрібніший за мету 12 px):
   «115x1.6x22.23 мм 25 шт (NAECD…)» влазить у рядок і списку 1200 з розгорнутим меню (~235 px; і у WebKit), і телефону; довший за рядок
   (рідко) — переноситься, а не губиться. Будь-яка ширина */
.mpx-name.is-cut, .mpx-sh-title.is-cut { display: flex; flex-direction: column; -webkit-line-clamp: none; }
.mpx-name.is-cut > .mpx-nh, .mpx-sh-title.is-cut > .mpx-sh-th { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpx-name.is-cut > .mpx-nt, .mpx-sh-title.is-cut > .mpx-sh-tt { min-width: 0; overflow-wrap: anywhere; font-size: .9em; }
.mpx-meta { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.mpx-meta-id { white-space: nowrap; font-variant-numeric: tabular-nums; }   /* «7505 · NAECD11510» — одним вузлом, точка симетрична */
.mpx-meta .btn.mpx-ib.xs { width: 22px; height: 22px; margin: -3px 0; }
.mpx-meta .btn.mpx-ib.xs .mpx-i { width: 14px; height: 14px; }
.mpx-cat-inline, .mpx-pk-inline, .mpx-mline { display: none; }
.mpx-v { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mpx-chips { display: inline-flex; gap: 4px; margin-top: 2px; }
.mpx-more { padding: 10px; text-align: center; border-top: 1px solid var(--mpx-sep); }
.mpx-empty { padding: 44px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.mpx-empty > .mpx-i { width: 28px; height: 28px; color: var(--text-muted); }
.mpx-skel { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 90px; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--mpx-sep); }
.mpx-skel > i { display: block; height: 12px; border-radius: 6px; background: var(--mpx-fill-2); }
.mpx-skel > i:first-child { height: 44px; border-radius: 9px; }

/* масові дії — плаваюча матеріальна панель: липне до низу вікна, поки є вибір */
.mpx-bulk { position: sticky; bottom: 16px; z-index: 6; width: max-content; max-width: calc(100% - 24px); margin: 10px auto 14px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 8px 7px 16px; border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary, #fff) 92%, transparent);   /* 92 %: розмиття під панеллю спрацьовує не скрізь — текст рядків не «просвічує» (ревʼю 13.11) */
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 8px 24px rgba(15, 23, 42, .14); }
.mpx-bulk.is-new { animation: mpxRise 180ms var(--mpx-ease); }   /* лише коли вибір зʼявився, не на кожну наступну галочку */
.mpx-bulk.is-out { opacity: 0; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms var(--mpx-ease); pointer-events: none; }   /* «×» — іде, як прийшла */
@keyframes mpxRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mpx-bulk-n { font-size: 13.5px; font-weight: 600; white-space: nowrap; margin-right: 4px; font-variant-numeric: tabular-nums; }
.mpx-vsep { width: 1px; height: 22px; background: var(--mpx-sep); margin: 0 4px; }
.mpx .mpx-bulk .btn-sm { height: 32px; padding: 0 12px; border-radius: 9px; }
.mpx .mpx-bulk .btn-ghost { color: var(--text-primary); }
.mpx .mpx-bulk .btn-ghost .mpx-i { color: var(--text-muted); }
/* панель — в один ряд (ревʼю 13.11: список 590–905 px, розгорнуте бічне меню — підписи переносили «×» у другий ряд): bulkFit міряє саму
   панель (переносить у другий ряд?) і крок за кроком, доки не перестане: is-ic — другорядні дії іконками (підписи — у title /
   aria-label), is-sl — «Вибрати всі · N» без «за фільтром»; і так переносить (список < ~590 px) — is-2r: два ряди за правилом телефону
   («Вибрано · Вибрати всі · ×» / дії), «×» не самотній. is-fx — на час виміру без переходів (зі «Зменшити рух» apple-ui дає всім 0.01ms,
   і вимір бачив би стартові значення) */
.mpx-bulk.is-fx, .mpx-bulk.is-fx > * { transition: none !important; }
.mpx-bulk.is-ic .mpx-bt, .mpx-bulk.is-ic .mpx-popup > .mpx-i-updown { display: none; }
.mpx .mpx-bulk.is-ic .btn-ghost.btn-sm:not(.mpx-ib) { padding: 0 9px; }
.mpx-bulk.is-ic > .mpx-popup { padding: 0 9px; border-color: transparent; background: transparent; }
/* на дотику (iPad: hover: none) підказки title не видно — під значком іконкової кнопки короткий підпис (data-short: «Зняти», «Категорія»,
   «З CRM»), як у тулбарі iOS (ревʼю 13.11: ⟳ не читалось як «зміни з CRM», а воно шле опубліковані на модерацію) */
@media (hover: none) {
    .mpx-bulk.is-ic [data-short] { flex-direction: column; justify-content: center; gap: 1px; height: auto; min-height: 44px; }
    .mpx-bulk.is-ic [data-short]::after { content: attr(data-short); font-size: 10px; font-weight: 600; line-height: 1.1; color: var(--text-secondary); white-space: nowrap; }
}
.mpx-bulk.is-sl .mpx-bl { display: none; }
.mpx-bulk.is-2r { width: calc(100% - 24px); row-gap: 6px; }
.mpx-bulk.is-2r > .mpx-bulk-n { order: 1; }
.mpx-bulk.is-2r > .mpx-link { order: 2; }
.mpx-bulk.is-2r > .mpx-bulk-x { order: 3; margin-left: auto; }
.mpx-bulk.is-2r > .mpx-vsep { order: 4; flex: 1 1 100%; width: auto; height: 0; margin: 0; }
.mpx .mpx-bulk.is-2r > .btn-primary { order: 5; flex: 1 1 auto; }
.mpx .mpx-bulk.is-2r > .btn-ghost:not(.mpx-ib) { order: 6; }
.mpx-bulk.is-2r > .mpx-popup { order: 7; }
.mpx .mpx-bulk.is-2r > .btn-ghost.mpx-bulk-crm { order: 8; }
/* режим вибору (як «Фото» в iOS): панель масових дій замінює плаваючі кнопки — кнопка асистента (fixed, 56 px у правому нижньому куті)
   ховається, «×» її повертає. Піднята над панеллю (bottom 92 px), вона лягала на перемикачі «Розміщувати» вузького списку й на «Стан»,
   а панель до її колонки здебільшого й не доходила (ревʼю 13.11, третій прохід). Лише поки «Маркетплейси» на екрані: прихована сторінка
   лишає свій вміст у DOM (вибір у каталозі не ховає асистента на інших сторінках). Телефон — те саме (mobile-ux.css) */
body:has(#pageMarketplaces.active .mpx-bulk) .ai-assistant-btn { display: none; }

/* ширина СПИСКУ (не вікна) → менше колонок; ≤768 px вікна — css/mobile-ux.css (там своя розкладка комірок, тому тут лише ≥769).
   Пороги — сума мінімумів колонок + проміжки 12 px + поля 30 px: 1140 (усі), 930 (без «Категорії»), 790 (без «Уп.»); вужче — комірки */
@media (min-width: 769px) {
    @container mpxl (width < 1140px) {
        .mpx-lh, .mpx-fold, .mpx-item { --cols: 28px 44px minmax(240px, 1fr) 60px 112px 100px 92px minmax(140px, 192px); --fold-span: 4; }
        .mpx-list.ro > :is(.mpx-lh, .mpx-fold, .mpx-item) { --cols: 44px minmax(240px, 1fr) 60px 112px 100px 92px minmax(140px, 192px); }
        .mpx-c-cat, .mpx-lh .mpx-h-cat { display: none; }
        .mpx-cat-inline { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        /* «Категорію» прибрано — праворуч вирівняний «Залишок» упирався в «Розміщувати» (12 px; «Залишок Розміщувати» читалось однією
           фразою — ревʼю 13.11): перемикачі й заголовок — по центру колонки (папки й пропозиції — та сама вертикаль) */
        .mpx-c-pub { justify-content: center; }
        .mpx-lh .mpx-h-pub { text-align: center; }
    }
    @container mpxl (width < 930px) {
        .mpx-lh, .mpx-fold, .mpx-item { --cols: 28px 44px minmax(200px, 1fr) 108px 96px 84px minmax(128px, 192px); --fold-span: 3; }
        .mpx-list.ro > :is(.mpx-lh, .mpx-fold, .mpx-item) { --cols: 44px minmax(200px, 1fr) 108px 96px 84px minmax(128px, 192px); }
        .mpx-c-pack, .mpx-lh .mpx-h-pack { display: none; }
        .mpx-pk-inline { display: block; }
    }
    /* вузький список (планшет; 1024 / 834 / 769 px із розгорнутим меню) — комірки, як на телефоні, але десктопного розміру:
       назва · мета · категорія · «725 грн / уп. · 102 уп. · по 25 шт»; нижче — стан і перемикач; папка — два рядки */
    @container mpxl (width < 790px) {
        .mpx-lh { grid-template-columns: 28px minmax(0, 1fr); min-height: 44px; }
        .mpx-list.ro > .mpx-lh { grid-template-columns: minmax(0, 1fr); }
        .mpx-lh > :not(.mpx-c-sel):not(.mpx-lh-m) { display: none; }
        .mpx-lh .mpx-lh-m { display: block; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
        .mpx-lh .mpx-lh-m label { cursor: pointer; }
        .mpx-lh .mpx-lh-m .mpx-sub { display: none; }   /* «папок · підгруп» — уже в ряду над списком */
        /* перемикач «Розміщувати» папки — останньою колонкою, на тій самій вертикалі, що в пропозицій (ревʼю 13.11: зигзаг на 66 px) */
        .mpx-fold { grid-template-columns: 28px 20px minmax(0, 1fr) auto auto; grid-template-areas: "sel chev name act pub" ". . meta meta meta"; row-gap: 4px; }
        .mpx-list.ro > .mpx-fold { grid-template-columns: 20px minmax(0, 1fr) auto auto; grid-template-areas: "chev name act pub" ". meta meta meta"; }
        .mpx-fold > .mpx-c-sel { grid-area: sel; }
        .mpx-fold > .mpx-chev { grid-area: chev; }
        .mpx-fold > .mpx-c-pub { grid-area: pub; }
        .mpx-fold > .mpx-c-act { grid-area: act; }
        .mpx-fold.l1 .mpx-chev { margin-left: 0; }
        .mpx-fold-main { display: contents; }
        .mpx-fold-name { grid-area: name; }
        .mpx-fold-meta { grid-area: meta; }
        .mpx-item { grid-template-columns: 28px 44px minmax(0, 1fr) auto; grid-template-areas: "sel pic prod prod" "sel . state pub"; row-gap: 6px; align-items: start; }
        .mpx-list.ro > .mpx-item { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "pic prod prod" ". state pub"; }
        .mpx-item > .mpx-c-sel { grid-area: sel; align-self: start; height: 44px; }
        .mpx-item > .mpx-thumb { grid-area: pic; }
        .mpx-item > .mpx-prod { grid-area: prod; }
        .mpx-item > .mpx-c-state { grid-area: state; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; align-self: center; }
        .mpx-item > .mpx-c-pub { grid-area: pub; align-self: center; }
        .mpx-item > .mpx-c-num, .mpx-item > .mpx-c-cat { display: none; }
        .mpx-pk-inline { display: none; }
        .mpx-mline { display: block; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
        .mpx-mline b { color: var(--text-primary); font-weight: 600; }
        /* панель масових дій — компактна: другорядні дії іконками (підписи — у title / aria-label), як на телефоні */
        .mpx-bulk .mpx-bt, .mpx-bulk .mpx-popup > .mpx-i-updown { display: none; }
        .mpx .mpx-bulk .btn-ghost.btn-sm:not(.mpx-ib) { padding: 0 9px; }
        .mpx-bulk > .mpx-popup { padding: 0 9px; border-color: transparent; background: transparent; }
        /* на дотику (планшет) title не видно — короткий підпис під значком (data-short) */
        @media (hover: none) {
            .mpx .mpx-bulk [data-short] { flex-direction: column; justify-content: center; gap: 1px; height: auto; min-height: 44px; }
            .mpx .mpx-bulk [data-short]::after { content: attr(data-short); font-size: 10px; font-weight: 600; line-height: 1.1; color: var(--text-secondary); white-space: nowrap; }
        }
    }
}

/* ═════════════════════════════ КАРТКА ПРОПОЗИЦІЇ — лист ═════════════════════════════ */
/* вбудовування в App.openModal без правки app.js: шапка модалки схована, тіло — без відступів */
#modalContent:has(> #modalBody > .mpx-sheet) { height: min(94vh, 1000px); max-height: 94vh; }
#modalContent:has(> #modalBody > .mpx-sheet) > .modal-header { display: none; }
#modalBody:has(> .mpx-sheet) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal-overlay:not(.hidden) #modalContent:has(> #modalBody > .mpx-sheet) { animation-duration: 200ms; }   /* глобально 300 мс */
.mpx-sheet { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--mpx-canvas); }

/* шапка — поза прокруткою, суцільна; тінь-кромка, коли контент заїхав під неї */
.mpx-sh { position: relative; z-index: 3; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 14px 16px 14px 20px; background: var(--bg-secondary, #fff); box-shadow: 0 1px 0 var(--mpx-sep); transition: box-shadow 200ms ease; }
.mpx-sh.is-scrolled { box-shadow: 0 1px 0 var(--mpx-sep), 0 6px 16px -12px rgba(15, 23, 42, .25); }
.mpx-sh-pic { width: 48px; height: 48px; border-radius: 10px; background: #fff; border: 1px solid var(--mpx-sep); display: grid; place-items: center; overflow: hidden; }
.mpx-sh-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mpx-sh-pic.empty { background: var(--mpx-fill); color: var(--text-muted); }
.mpx-sh-id { min-width: 0; }
.mpx-sh-title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mpx-sh-meta { margin-top: 4px; display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 12px; color: var(--mpx-muted); }
.mpx-sh-meta .chip { font-size: 11px; }
.mpx-sh-ids { font-variant-numeric: tabular-nums; }
.mpx-sh-r { display: flex; align-items: center; gap: 14px; }
.mpx-sh-price { text-align: right; }
.mpx-sh-pv { font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.mpx-sh-price .mpx-sub { white-space: nowrap; margin-top: 2px; }
.mpx-sh-nav { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--mpx-fill); }
/* назва не влазить у 2 рядки — голова в рядок «…», хвіст під нею (is-cut — разом із назвою рядка каталогу, розділ «КАТАЛОГ» вище) */
/* вузька шапка (лист < 980 px — вікно ~769–1023; ревʼю 13.11): ціна праворуч забирала ~170 px у назви — та обрізалась на другому рядку
   («…25 шт…» без «(NAECD11510)»), а пігулка помилок падала сама в третій рядок. Ціна — під ‹ N з M › і ×, коротко «725 грн за уп. 25 шт».
   Поріг — за шириною САМОЇ шапки (container query), не вікна: як колонки каталогу */
.mpx-sh { container: mpxsh / inline-size; }
@media (min-width: 769px) {
    @container mpxsh (width < 980px) {
        .mpx-sh-r { display: grid; grid-template-columns: auto auto; grid-template-areas: "nav x" "price price"; gap: 2px 14px; align-items: center; justify-items: end; }
        .mpx-sh-r > .mpx-sh-nav { grid-area: nav; }
        .mpx-sh-r > .mpx-x { grid-area: x; }
        .mpx-sh-r > .mpx-sh-price { grid-area: price; display: flex; align-items: baseline; gap: 6px; }
        .mpx-sh-pv { font-size: 14px; }
        .mpx-sh-price .mpx-sub { margin-top: 0; }
        .mpx-sh-pu { display: none; }
    }
}
.mpx-sh-nav .mpx-sub { min-width: 52px; text-align: center; font-weight: 600; color: var(--text-secondary); }
.mpx-x { appearance: none; border: 0; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; cursor: pointer; display: grid; place-items: center;
    color: var(--text-secondary); background: var(--mpx-fill-2); transition: background 140ms ease, color 140ms ease; }
@media (hover: hover) { .mpx-x:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 12%, transparent); } }
.mpx-x .mpx-i { width: 14px; height: 14px; vertical-align: 0; }

/* тіло: навігація | єдиний скрол-контейнер */
.mpx-sb { min-height: 0; display: grid; grid-template-columns: 208px minmax(0, 1fr); }
.mpx-nav { min-height: 0; overflow-y: auto; padding: 16px 10px 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.mpx-nav-l { position: relative; display: flex; flex-direction: column; gap: 2px; }
.mpx-nav-i { appearance: none; border: 0; background: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
    cursor: pointer; text-align: left; font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--text-secondary); transition: background 140ms ease, color 140ms ease; }
@media (hover: hover) { .mpx-nav-i:hover { background: var(--mpx-fill-2); color: var(--text-primary); } }
.mpx-nav-i.on { background: color-mix(in srgb, var(--accent, #2563eb) 11%, transparent); color: var(--accent, #2563eb); font-weight: 600; }
.mpx-nav-i > .mpx-i { width: 17px; height: 17px; vertical-align: 0; }
.mpx-nav-t { flex: 1 1 auto; min-width: 0; }
.mpx-badge { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 18px; }
.mpx-badge .bn { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
    color: #fff; background: var(--mpx-bad); font-variant-numeric: tabular-nums; }
.mpx-badge .bw { width: 7px; height: 7px; border-radius: 50%; background: var(--mpx-warn); margin-right: 5px; }
.mpx-badge .bc { font-size: 11.5px; font-weight: 600; color: var(--mpx-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.mpx-nav-note { margin: 0; padding: 12px 10px 0; border-top: 1px solid var(--mpx-sep); font-size: 11.5px; line-height: 1.45; }

.mpx-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 28px 40px; scroll-padding-top: 12px; }
.mpx-scroll > * { max-width: 860px; }
.mpx-scroll.is-in-next { animation: mpxInNext 140ms var(--mpx-ease); }
.mpx-scroll.is-in-prev { animation: mpxInPrev 140ms var(--mpx-ease); }
@keyframes mpxInNext { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes mpxInPrev { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* секції */
.mpx-sec + .mpx-sec { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--mpx-sep);
    scroll-margin-top: -21px; }   /* перехід до розділу: межа — за верхнім краєм, заголовок на 20 px, як «Огляд» (не дві волосяні лінії — ревʼю 13.11) */
.mpx-sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mpx-sec-head .mpx-search { margin-left: auto; }
.mpx-sec-h { margin: 0; font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; color: var(--text-primary); }
.mpx-sec-h:focus, .mpx h3.mpx-sec-h:focus-visible { outline: none; box-shadow: none; }   /* фокус переходу edJump — без кільця навколо заголовка */
.mpx-sec-sub { margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--mpx-muted); max-width: 700px; }
.mpx-co-t, .mpx-sec-sub, .mpx-gf, .mpx-l > .mpx-sub { text-wrap: pretty; }   /* без слів-сиріт у другому рядку (де браузер уміє) */

/* згруповані списки (iOS inset grouped) */
.mpx-gh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 16px 7px; min-height: 22px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--text-secondary); }
.mpx-gh > .mpx-n { margin-left: 0; }
.mpx-gh-r { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--mpx-muted); font-variant-numeric: tabular-nums; }
.mpx-gh-r .bad { color: var(--mpx-bad-t); font-weight: 600; }
.mpx-group { background: var(--mpx-cell); border-radius: var(--mpx-r);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 7%, transparent), 0 1px 2px rgba(15, 23, 42, .04); }
.mpx-rz + .mpx-gh, .mpx-rz + [hidden] + .mpx-gh, .mpx-group + .mpx-gh, .mpx-gf + .mpx-gh, .mpx-group + .mpx-group, .mpx-gf + .mpx-group, .mpx-tiles + .mpx-gh, .mpx-callouts + .mpx-gh { margin-top: 22px; }
.mpx-gf { margin: 0; padding: 7px 16px 0; font-size: 12px; line-height: 1.5; color: var(--mpx-muted); max-width: 760px; }
.mpx-gf b { font-weight: 600; color: var(--text-secondary); }

.mpx-row { position: relative; display: grid; grid-template-columns: var(--mpx-lw) minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
    min-height: 44px; padding: 10px 16px; margin: 0; font-weight: 400; }
.mpx-row.f { grid-template-columns: minmax(0, 1fr) auto; }
/* рядок із полем: підпис | поле | чип джерела ПІСЛЯ поля (як у «Характеристиках» — після значення) і дія («↺ авто»). Колонка однакова
   на весь лист — поля всіх розділів закінчуються на одній вертикалі, ширина поля не залежить від чипа (ревʼю 13.11) */
.mpx-row.fx { grid-template-columns: var(--mpx-lw) minmax(0, 1fr) var(--mpx-actw); }
.mpx-row.fx > .mpx-act { justify-content: flex-start; gap: 8px; }
.mpx-row.fx > input.mpx-w80, .mpx-row.fx > input.mpx-w100 { justify-self: end; }
.mpx-row.fx > .mpx-val.mpx-inline { justify-content: flex-end; }
.mpx-row + .mpx-row::before, .mpx-group > :not(.mpx-row):not([hidden]) + .mpx-row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--mpx-sep); }
.mpx-l { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.35; color: var(--text-secondary); }
.mpx-l > .mpx-lt { color: var(--text-primary); }
/* лише для читання («Огляд → Товар у CRM»): підпис сірий, значення — темне, як у «Характеристиках» (critic 12.11) */
.mpx-ro .mpx-l > .mpx-lt { color: var(--text-secondary); }
.mpx-l .chip { align-self: flex-start; }
.mpx-val { min-width: 0; font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--text-primary); overflow-wrap: anywhere; }
.mpx-val.dim { color: var(--mpx-muted); font-weight: 400; }
.mpx-val .mpx-src { margin-left: 4px; }
.mpx-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.mpx-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.mpx-row.is-over .mpx-val { color: var(--text-muted); text-decoration: line-through; opacity: .55; }
.mpx-flash { box-shadow: 0 0 0 2px var(--accent, #2563eb) !important; border-radius: 10px; transition: box-shadow 200ms ease; }

/* «Огляд» картки: виноски, плитки */
.mpx-callouts { display: flex; flex-direction: column; gap: 8px; }
.mpx-callout { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--mpx-r);
    background: color-mix(in srgb, var(--mpx-bad) 6%, var(--mpx-cell)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mpx-bad) 16%, transparent); }
.mpx-callout.warn { background: color-mix(in srgb, var(--mpx-warn) 8%, var(--mpx-cell)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mpx-warn) 22%, transparent); }
.mpx-callout.info { background: color-mix(in srgb, var(--accent, #2563eb) 5%, var(--mpx-cell)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 15%, transparent); }
.mpx-callout.ok { background: color-mix(in srgb, var(--mpx-ok) 7%, var(--mpx-cell)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mpx-ok) 18%, transparent); }
.mpx-co-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--mpx-bad); }
.mpx-callout.warn .mpx-co-i { background: none; color: var(--mpx-warn-t); }   /* трикутник без кола: попередження ≠ помилка за формою */
.mpx-callout.warn .mpx-co-i .mpx-i { width: 19px; height: 19px; }
.mpx-callout.info .mpx-co-i { background: var(--accent, #2563eb); }
.mpx-callout.ok .mpx-co-i { background: var(--mpx-ok); }
.mpx-co-i .mpx-i { width: 14px; height: 14px; vertical-align: 0; }
.mpx-co-t { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--text-primary); }
.mpx-callout > .mpx-link, .mpx-callout > .btn { flex: 0 0 auto; }
.mpx-ov-more { margin: 2px 0 0 14px; align-self: flex-start; }
.mpx-callouts > .reveal > div { display: flex; flex-direction: column; gap: 8px; }
.mpx-callouts > .reveal.open { margin-top: -0px; }
/* виноски вгорі розділу — зауваження саме цього розділу (ті самі, що в «Огляді»; JS secCo). Порожній контейнер — hidden і відступу не дає */
.mpx-callouts.mpx-sec-co { margin-bottom: 18px; }
.mpx-callouts.mpx-sec-co + .mpx-gh { margin-top: 0; }

/* «Назва і ціна» */
/* назва — поле й є карткою (без рамки в рамці); шаблонна назва в плейсхолдері — текстом другого рівня, не сірим «порожньо»:
   це і є назва, що піде в Rozetka (ревʼю 13.11) */
.mpx-namebox { padding: 0; }
.mpx .mpx-namebox textarea.mpx-field { font-size: 14.5px; line-height: 1.45; font-weight: 500; resize: none;
    border-color: transparent; border-radius: var(--mpx-r); padding: 12px 16px; background: transparent;
    min-height: calc(2.9em + 24px); overflow-y: hidden; }   /* висота — за назвою (JS nameFit), не менше 2 рядків */
.mpx #mpEdName::placeholder { color: var(--text-secondary); }
.mpx .mpx-namebox textarea.mpx-field.is-invalid { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mpx-bad) 55%, transparent); }   /* без власної рамки — внутрішня */
/* у фокусі шаблонна назва тихне — видно, що це підказка, а не вписаний текст: перший же символ її замінить (ревʼю 13.11, третій прохід) */
.mpx #mpEdName:focus::placeholder { color: var(--mpx-muted); font-weight: 400; }
.mpx-gh #mpEdNameLen { margin-left: auto; }
.mpx-gh .chip { font-size: 10.5px; padding: 1.5px 8px; }
.mpx-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--mpx-muted); }
.mpx-lock .mpx-i { width: 12px; height: 12px; vertical-align: 0; }

/* фото */
.mpx-gal { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; }
.mpx .mpx-ph.card { width: 168px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; position: relative; background: var(--mpx-cell);
    box-shadow: 0 0 0 1px var(--mpx-sep), 0 1px 2px rgba(15, 23, 42, .04); }
.mpx-ph[draggable="true"] { cursor: grab; }
.mpx-ph.is-off .mpx-ph-img img { opacity: .4; }
.mpx-ph-img { position: relative; height: 140px; background: #fff; display: grid; place-items: center; }
.mpx-ph-img img { width: 120px; height: 120px; object-fit: contain; }
.mpx-ph-badges { position: absolute; left: 7px; top: 7px; right: 7px; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.mpx-ph-badges .chip { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mpx-ph-tools { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: center; gap: 1px; padding: 2px; border-radius: 9px;
    opacity: 0; transition: opacity 140ms ease; background: color-mix(in srgb, var(--bg-secondary, #fff) 80%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(15, 23, 42, .14), 0 0 0 1px var(--mpx-sep); }
.mpx-ph:hover .mpx-ph-tools, .mpx-ph:focus-within .mpx-ph-tools { opacity: 1; }
@media (hover: none) { .mpx-ph-tools { opacity: 1; } }
/* дужка «зʼявляються, коли навести…» у підзаголовку «Фото» — лише де є наведення: на дотику кнопки ‹ › видно завжди (рядок вище) */
@media (hover: none) { .mpx-hover-hint { display: none; } }
.mpx-ph-tools label.btn { cursor: pointer; }
.mpx-ph-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--mpx-sep); font-size: 12px; }
.mpx-ph-foot .mpx-sub { color: var(--text-secondary); font-weight: 500; }
.mpx-ph-add { width: 168px; min-height: 182px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--text-primary) 18%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px; text-align: center; color: var(--text-secondary); }
.mpx-ph-plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mpx-tint); color: var(--accent, #2563eb); }
.mpx-ph-plus .mpx-i { width: 18px; height: 18px; vertical-align: 0; }
.mpx-ph-add b { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mpx-ph-links { display: flex; gap: 12px; }
.mpx-ph-add label.mpx-link { position: relative; }
.mpx-ph-empty { flex: 1 1 260px; align-self: center; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.mpx-ph.is-skel .mpx-ph-img { background: var(--mpx-fill); }
.mpx-ph.is-skel .mpx-ph-foot { height: 37px; }
.mpx-gal-load { align-self: center; }

/* розкривні рядки (details) */
.mpx-disc > summary { list-style: none; cursor: pointer; }
.mpx-disc > summary::-webkit-details-marker { display: none; }
.mpx-disc > summary .mpx-i-chev { transition: transform 160ms var(--mpx-ease); color: var(--text-muted); }
.mpx-disc[open] > summary .mpx-i-chev { transform: rotate(90deg); }
@media (hover: hover) { .mpx-disc > summary:hover { background: var(--mpx-fill); } }
.mpx-disc-b { padding: 0 16px 14px; }
.mpx-disc .when-open { display: none; }
.mpx-disc[open] .when-open { display: inline; }
.mpx-disc[open] .when-closed { display: none; }
.mpx-photos > .mpx-disc { border-top: 1px solid var(--mpx-sep); }
.mpx-group > :not(.mpx-gal) + .mpx-disc > summary.mpx-row::before {
    content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--mpx-sep); }
.mpx-photos > .mpx-disc > summary { border-radius: 0 0 var(--mpx-r) var(--mpx-r); }
.mpx-photos > .mpx-disc[open] > summary { border-radius: 0; }

/* «Службові» — рядки з полями (розмітку самих полів не змінюємо: стиль через контейнер) */
.mpx-svc select, .mpx-svc input { width: 100%; min-width: 0; height: 32px; padding: 5px 10px; margin: 0; font-family: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.3;
    color: var(--text-primary); background: var(--mpx-cell); border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent); border-radius: 8px; box-shadow: none; }
.mpx-svc select { padding-right: 30px; }
.mpx-svc input[type=number] { width: 96px; justify-self: end; text-align: right; }
.mpx-svc input:disabled, .mpx-svc select:disabled { color: var(--text-muted); background: var(--mpx-fill); }
.mpx-svc-row { cursor: default; }
.mpx-svc-row > select, .mpx-svc-row > input { grid-column: 2; }
.mpx-svc .mpx-l { gap: 3px; }
.mpx-svc .mpx-act > .chip { flex: 0 0 auto; }
.mpx-svc .mpx-l .mpx-sub { max-width: 340px; }
/* чипи службових — як крихітні .mpx-src характеристик, без зміни розмітки */
.mpx-svc .chip { font-size: 10.5px; border-radius: 6px; padding: 0 6px; line-height: 1.55; letter-spacing: .01em; }
/* «↺ авто» — справа в колонці дій, чип — одразу після поля; місце зарезервовано колонкою .fx: поле не «стрибає» на першому символі */
.mpx-svc-auto { margin-left: auto; }

/* «Характеристики» */
.mpx-rz { display: flex; flex-direction: column; }
.mpx-rz:empty { display: none; }   /* без схеми Rozetka: порожній блок не додає відступ (ритм «підзаголовок → група» — 16 px) */
.mpx-rz:empty + .mpx-gh { margin-top: 0; }
.mpx-rz > .mpx-gh { margin-top: 22px; }
.mpx-rz > .mpx-gh:first-child, .mpx-rz > .mpx-callout:first-child { margin-top: 0; }
.mpx-pr { position: relative; }
.mpx-pr:not([hidden]) ~ .mpx-pr:not([hidden])::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--mpx-sep); z-index: 1; }
/* поля 16 px з обох боків — та сама ширина вмісту, що в .mpx-row, тож колонка значень збігається піксель у піксель (✎ — margin -6px) */
.mpx-pr-h { display: grid; grid-template-columns: var(--mpx-lw) minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 44px; padding: 9px 16px; }
.mpx-pr-h[onclick] { cursor: pointer; }
@media (hover: hover) { .mpx-pr-h[onclick]:hover { background: var(--mpx-fill); } }
.mpx-pr-h[onclick]:active:not(:has(:is(button, input, select):active)) { background: var(--mpx-fill-2); transition-duration: 0s; }
.mpx-group > .mpx-pr:first-child .mpx-pr-h, .reveal > div > .mpx-pr:first-child .mpx-pr-h { border-radius: var(--mpx-r) var(--mpx-r) 0 0; }
.mpx-pr-n { font-size: 13.5px; line-height: 1.38; color: var(--text-secondary); min-width: 0; }
.mpx-pv { font-size: 13.5px; line-height: 1.4; font-weight: 500; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.mpx-pv .chip { font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; }
.mpx-pv s { color: var(--mpx-muted); font-weight: 400; }
.mpx-pv .mpx-sub.bad { font-weight: 500; }
.mpx-pr-a { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 26px; margin-right: -6px; }
.mpx .mpx-pr-e { opacity: .45; transition: opacity 140ms ease, background 140ms ease; }
.mpx .mpx-pr-h:hover .mpx-pr-e, .mpx .mpx-pr:focus-within .mpx-pr-e, .mpx .mpx-pr.is-open .mpx-pr-e { opacity: 1; }
@media (hover: none) { .mpx .mpx-pr-e { opacity: 1; } }
.mpx-pr.is-off .mpx-pr-n { color: var(--mpx-muted); }
.mpx-pr.is-open > .mpx-pr-h, .mpx-pr.is-open > .mpx-pr-ed { background: color-mix(in srgb, var(--accent, #2563eb) 4%, transparent); }
.mpx-pr.is-open > .mpx-pr-h .mpx-pr-a .mpx-link { display: none; }   /* відкритий редактор — «↺ авто» дублював «Авто» сегмента під ним */
/* порожня обовʼязкова — червоний тинт і смуга на ВЕСЬ рядок разом із відкритим редактором (і важливіша за «відкрито» — critic 12.11) */
.mpx-pr.is-req-empty > .mpx-pr-h, .mpx-pr.is-req-empty > .mpx-pr-ed { background: color-mix(in srgb, var(--mpx-bad) 5%, transparent); box-shadow: inset 3px 0 0 var(--mpx-bad); }
/* останній рядок групи: тинт не вилазить за заокруглені кути */
.mpx-group > .mpx-pr:last-child:not(.is-open) > .mpx-pr-h, .reveal > div > .mpx-pr:last-child:not(.is-open) > .mpx-pr-h { border-radius: 0 0 var(--mpx-r) var(--mpx-r); }
.mpx-group > .mpx-pr:first-child:last-child:not(.is-open) > .mpx-pr-h { border-radius: var(--mpx-r); }
.mpx-group > .mpx-pr:last-child > .mpx-pr-ed, .reveal > div > .mpx-pr:last-child > .mpx-pr-ed { border-radius: 0 0 var(--mpx-r) var(--mpx-r); }
.mpx-pr.is-dirty .mpx-pr-n::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--mpx-warn); vertical-align: 2px; }
.mpx-pr-ed > div { overflow: hidden; min-height: 0; }
/* редактор — під колонкою значень: підпис (= --mpx-lw від ширини вмісту, рядок мінус 2 × 16 px) + проміжок 16 px */
.mpx-pr-ed-in { display: flex; flex-direction: column; gap: 8px; padding: 2px 16px 14px;
    margin-left: max(calc(var(--mpx-lw-min) + 16px), calc(var(--mpx-lw-k) * (100% - 32px) + 16px)); }
.mpx .seg.mpx-seg-sm { align-self: flex-start; flex-wrap: nowrap; }
.mpx .seg.mpx-seg-sm .seg-btn { padding: 5px 11px; font-size: 12.5px; }
.mpx .seg-btn:disabled { opacity: .42; cursor: default; }
.mpx .seg-btn:disabled:hover { color: inherit; }
.mpx-pr-ctl { max-width: 420px; }
.mpx-pr-ed-f { display: flex; align-items: flex-start; gap: 12px; }
.mpx-pr-ed-f > .mpx-sub { flex: 1 1 auto; }
.mpx-pr-ed-f > .mpx-sub .mpx-link { white-space: normal; font-size: 12px; text-align: left; }
.mpx-checks { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent); background: var(--mpx-cell); }
.mpx-checks > label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .mpx-checks > label:hover { background: var(--mpx-fill); } }
.mpx-checks input[type=checkbox] { accent-color: var(--accent, #2563eb); width: 16px; height: 16px; margin: 0; }
.mpx-pr-ctl > .mpx-field.sm { margin-bottom: 6px; }
.mpx-empty-names { padding: 11px 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mpx-rz.is-search #mpxGrpEmptyR { grid-template-rows: 1fr; opacity: 1; transform: none; }
.mpx-rz.is-search .mpx-empty-names { display: none; }
.mpx .mpx-rz.is-search #mpxGrpEmptyR > div { visibility: visible; transition: none; }
.mpx-rz-none { padding: 14px 16px; }
.mpx-xp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 8px; }
.mpx-rz .mpx-skel { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
.mpx-rz .mpx-skel > i:first-child { height: 12px; border-radius: 6px; }

/* «Опис» */
/* «Показати повністю» — max-height між числами (JS ставить справжню висоту), градієнт гасне разом: 180 мс (ревʼю 13.11: стрибало) */
.mpx-desc-body { position: relative; padding: 14px 16px 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-primary); max-height: 220px; overflow: hidden;
    transition: max-height 180ms var(--mpx-ease); }
.mpx-desc-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
    background: linear-gradient(color-mix(in srgb, var(--mpx-cell) 0%, transparent), var(--mpx-cell)); transition: opacity 180ms ease; }
.mpx-desc-body.is-full::after, .mpx-desc-body.is-short::after { opacity: 0; }
.mpx-desc-body p { margin: 0 0 8px; }
.mpx-desc-body ul, .mpx-desc-body ol { margin: 0 0 8px 18px; padding: 0; }
.mpx-desc-body li { margin: 2px 0; }
.mpx-desc-body h3 { font-size: 14px; margin: 10px 0 6px; }
.mpx-desc-body table { border-collapse: collapse; font-size: 12.5px; margin: 4px 0 8px; }
.mpx-desc-body td, .mpx-desc-body th { border: 1px solid var(--mpx-sep); padding: 3px 8px; text-align: left; }
.mpx-desc-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px 16px; }
.mpx-desc .mpx-gh { padding: 12px 16px 0; }
.mpx-desc-own { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.mpx-desc-own > .mpx-gh { padding-bottom: 0; }

/* «Технічне» */
.mpx-xml { margin: 0; padding: 12px 16px 14px; max-height: 280px; overflow: auto; font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-secondary); white-space: pre-wrap; word-break: break-all; border-top: 1px solid var(--mpx-sep); }
.mpx-inline { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* низ листа — поза прокруткою: іконкові другорядні дії, стан незбережених змін, одна контекстна дія */
.mpx-sf { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 10px 16px 10px 12px; min-height: 56px;
    background: var(--bg-secondary, #fff); box-shadow: 0 -1px 0 var(--mpx-sep); transition: box-shadow 200ms ease; }
.mpx-sf.has-more { box-shadow: 0 -1px 0 var(--mpx-sep), 0 -6px 16px -12px rgba(15, 23, 42, .22); }
.mpx-sf-tools { display: flex; align-items: center; gap: 2px; }
.mpx-sf-nav { display: none; }
.mpx-dirty { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap;
    animation: mpxFade 140ms ease; }
.mpx-dirty::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--mpx-warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpx-warn) 22%, transparent); }
@keyframes mpxFade { from { opacity: 0; } to { opacity: 1; } }
.mpx .mpx-sf > .btn:not(.mpx-ib) { height: 34px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; }
.mpx-kbd { margin-left: 6px; font-size: 11px; font-weight: 600; opacity: .7; letter-spacing: .02em; }

/* 769–1099 px: навігація — стрічка чипів над прокруткою */
@media (min-width: 769px) and (max-width: 1099px) {
    .mpx-sb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .mpx-nav { flex-direction: row; overflow: hidden; padding: 0; gap: 0; box-shadow: 0 1px 0 var(--mpx-sep); }
    .mpx-nav-l { flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px 16px; scrollbar-width: none; }
    .mpx-nav-l::-webkit-scrollbar { display: none; }
    /* край стрічки гасне, поки є куди гортати (JS: .fl / .fr) — видно, що чипи йдуть далі (ревʼю 13.11) */
    .mpx-nav-l.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    .mpx-nav-l.fl { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px); mask-image: linear-gradient(90deg, transparent, #000 24px); }
    .mpx-nav-l.fl.fr { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 28px), transparent); }
    /* червоний бейдж за правим краєм, а гортати стрічку від активного «Огляду» не можна — червона крапка на краю (JS: .bad-r) */
    .mpx-nav { position: relative; }
    .mpx-nav:has(> .mpx-nav-l.fr.bad-r)::after { content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
        border-radius: 50%; background: var(--mpx-bad); box-shadow: 0 0 0 2.5px var(--mpx-cell); pointer-events: none; }
    .mpx-nav-i { width: auto; flex: 0 0 auto; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; background: var(--mpx-cell); box-shadow: 0 0 0 1px var(--mpx-sep); }
    /* чип — по ширині тексту: без порожнього місця під значок (у бічній колонці воно вирівнює числа) */
    .mpx-nav-i > .mpx-i, .mpx-nav-i > .mpx-badge:empty { display: none; }
    .mpx-nav-i > .mpx-badge { min-width: 0; }
    .mpx-nav-i > .mpx-badge .bc, .mpx-nav-i > .mpx-badge .bw { margin-right: 0; }
    /* активний чип — тинт акценту, як пункт бічної навігації на десктопі (не друга залита синя кнопка поруч із «Зберегти» — critic 12.11) */
    .mpx-nav-i.on { background: color-mix(in srgb, var(--accent, #2563eb) 11%, var(--mpx-cell)); color: var(--accent, #2563eb);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent); }
    .mpx-nav-note { display: none; }
    .mpx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mpx-tiles.n3, .mpx-tiles.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── розкриття — коротше за глобальні 320 мс; закритий редактор не ловить Tab ── */
.mpx .reveal { transition-duration: 180ms, 160ms, 180ms; }
.mpx .reveal:not(.open) > div { visibility: hidden; transition: visibility 0s linear 180ms; }
.mpx .reveal.open > div { visibility: visible; }

/* ── доступність (§14 скіла) ── */
@media (prefers-reduced-motion: reduce) {
    .mpx *:active, .mpx .btn:active, .mpx button:active { transform: none !important; }
    .mpx-bulk.is-new, .mpx-scroll.is-in-next, .mpx-scroll.is-in-prev, .mpx-dirty { animation: none; }
    .mpx-chev, .mpx-sw-t::before, .mpx-disc > summary .mpx-i-chev { transition: none; }
    .mpx-flash { transition: none; }
    .mpx-desc-body, .mpx-desc-body::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .mpx-bulk, .mpx-ph-tools { background: var(--bg-secondary, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .mpx-group, .mpx .mpx-tile.card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 35%, transparent); }
    .mpx-sw-t { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 35%, transparent); }
    .mpx-src { outline: 1px solid currentColor; }
}
/* планшет (769+ із пальцем): цілі дотику більші — «Картка товару CRM» у мета рядка (22 px; поруч клікабельний рядок, промах відкриває
   лист) і 🗂 🌍 папок та ✎ характеристик (26 px); відʼємні поля — рядок не росте (ревʼю 13.11, третій прохід; телефон — mobile-ux.css).
   Тулбар фото не чіпаємо: 6 × 32 px не влазять у плитку 168 px */
@media (min-width: 769px) and (pointer: coarse) {
    .mpx-meta .btn.mpx-ib.xs { width: 32px; height: 32px; margin: -8px 0; }
    .mpx-fold .mpx-c-act .btn.mpx-ib, .mpx .mpx-pr-a .btn.mpx-ib { width: 36px; height: 36px; }
}

/* ── кільце фокуса — ОСТАННІМ у файлі (специфічність ≥ правил, що гасять box-shadow): іконкові кнопки (.mpx-ib з box-shadow: none),
   поля .mpx-field і «Службових», рядки каталогу (внутрішнє кільце 2 px). Раніше рівна специфічність і пізніше правило .mpx-ib
   скасовували кільце — verifier 12.11 ── */
/* [data-kf]:focus — фокус, переведений пасткою Tab листа (kbdFocus): WebKit не вмикає для нього :focus-visible, кільце — те саме */
.mpx :is(button, summary, a, [tabindex]):focus-visible, .mpx .btn.mpx-ib:focus-visible, .mpx :is(button, summary, a, [tabindex])[data-kf]:focus, .mpx .btn.mpx-ib[data-kf]:focus {
    outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent); }
.mpx :is(input.mpx-field, select.mpx-field, textarea.mpx-field):focus, .mpx .mpx-svc :is(input, select):focus {
    outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent); }
.mpx .mpx-field.is-invalid:focus, .mpx .mpx-svc :is(input, select).is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpx-bad) 18%, transparent); }
.mpx .mpx-item:focus-visible, .mpx .mpx-fold:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent, #2563eb); }
/* нативні чекбокси (вибір рядка / папки / «усі», галочки мультисписку): глобальне кільце apple-ui — акцент 16 %, майже не видно;
   тут — контур 2 px акценту з клавіатури (verifier 12.11) */
.mpx input[type=checkbox].mpx-ck:focus-visible, .mpx .mpx-checks input[type=checkbox]:focus-visible {
    outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; box-shadow: none; }
.mpx .mpx-checks input[type=checkbox][data-kf]:focus { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; box-shadow: none; }   /* пастка листа (kbdFocus) — і у WebKit */