/* Start:/local/templates/grosio/cart-page.css?178747708361490*/
/* =================================================================
   /personal/cart/ — мультикорзина (переверстано на Bootstrap 5, 2026-07-08)

   Подключается только на /personal/cart/
   через SetAdditionalCSS — все классы .cart-*, .mk-*, .kp-*,
   .cm-* (модалки), .imp-* (импорт XLSX) живут здесь.

   Токены — --bs-primary (индиго, интерактив/CTA), --bs-danger (ошибки/удаление),
   --bs-success/--bs-warning (статусы) из base.css. Legacy-токены (--red, --text,
   --line, --bg-soft и т.п.) — тоже base.css, используются там, где ещё нет
   Bootstrap-эквивалента (типографика --rc/--ro, нейтральные поверхности).

   Кнопки (.btn/.btn-primary/.btn-outline/.btn-ghost) уже штатный Bootstrap
   (см. DESIGN.md §0.1) — здесь их не переопределяем, только geometry в разметке
   этой страницы. Сложную grid-структуру таблицы (9 треков, мобильная раскладка
   «подпись|значение» через data-label) НЕ переводим на 12-колоночный грид
   Bootstrap — она несёт десятки задокументированных инвариантов (multi-cart.md),
   риск регресса неоправдан; вместо этого — новые токены поверх той же структуры.
   ================================================================= */

.cart-wrap { padding: 0 32px; margin-top: 8px; }

/* ---------- Tabs строка ---------- */
.cart-tabbar {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 0 18px;
    flex-wrap: wrap;
}
.cart-tabs {
    display: inline-flex; align-items: center;
    background: var(--bg-soft);
    /* Шкала радиусов (дизайн-ревью): панель-капсула = карточный радиус 10px,
       вложенная пилюля-таб — 6px (кнопочный), концентрично вложены. */
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    flex-wrap: wrap;
}
.cart-tab {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px 9px 14px;
    border-radius: 6px;
    font-family: var(--rc); font-size: 15px; font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    cursor: pointer;
    border: 0; background: transparent;
    transition: background .15s, box-shadow .15s, color .15s;
    white-space: nowrap;
}
.cart-tab:hover { color: var(--text); }
.cart-tab.on {
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    color: var(--text);
}
.cart-tab .n {
    font-family: var(--rc); font-weight: 400; font-size: 14px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    margin-left: -4px; /* точку-сумму ближе к названию (счётчик товаров убран) */
}
.cart-tab.on .n { color: var(--text); }
.cart-tab .ren {
    width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3); margin-left: 2px;
    transition: color .15s, transform .12s;
}
/* Иконки-кнопки без подложки-фона (карандаш/корзина) — прозрачны в покое,
   hover меняет ТОЛЬКО цвет (см. приём шапки §0.3: фон на hover у мелких
   иконок читается «чужеродно» рядом с текстом таба). */
.cart-tab .ren:hover { color: var(--bs-primary); }
.cart-tab .ren:active, .cart-tab .del:active { transform: scale(0.96); }
/* Карандаш и корзина-удаление — реальные кнопки внутри .cart-tab (теперь div, не
   button: вложенный button был невалиден → браузер выносил его наружу, rename не
   срабатывал). Сброс UA-стилей кнопки. */
.cart-tab .ren, .cart-tab .del { border: 0; background: transparent; cursor: pointer; padding: 0; flex: 0 0 auto; }
.cart-tab .del {
    width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3);
    transition: color .15s, transform .12s;
}
.cart-tab .del:hover { color: var(--bs-danger); }
.cart-tab .ren .ti, .cart-tab .del .ti, .cart-add .ti { font-size: 14px; line-height: 1; }
.cart-add .plus .ti { font-size: 11px; }
.cart-add {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px;
    border-radius: 6px;
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--text);
    font-family: var(--rc); font-size: 15px; font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.cart-add:hover { border-color: var(--text); color: var(--text); background: #fff; }
.cart-add:active { transform: scale(0.96); }
.cart-add .plus {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-soft-2);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Заголовок ---------- */
.cart-title {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin: 0 0 16px;
    flex-wrap: wrap;
}
.cart-title-left { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.cart-title h1 {
    font-family: var(--rc); font-weight: 500; font-size: 41px;
    letter-spacing: -0.02em; line-height: 1; color: var(--text);
    margin: 0; text-transform: uppercase;
    text-wrap: balance;
}
.cart-meta-row {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    font-family: var(--rc); font-size: 15px; color: var(--text-2);
}
.cart-meta-row b {
    color: var(--text); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.cart-meta-row .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }

/* ---------- Баннер «нет индивидуальных цен» ---------- */
.cart-noprice {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.cart-noprice .ico {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bs-primary); flex-shrink: 0; font-size: 18px;
}
.cart-noprice .body { flex: 1; min-width: 0; }
.cart-noprice h4 {
    margin: 0 0 4px;
    font-family: var(--rc); font-weight: 500; font-size: 17px;
    color: var(--text); letter-spacing: -0.01em;
    text-wrap: balance;
}
.cart-noprice p {
    margin: 0; font-family: var(--ro); font-size: 15px; color: var(--text-2); line-height: 1.5;
    text-wrap: pretty;
}
.cart-noprice .mgr {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
    padding-left: 22px;
    border-left: 1px solid var(--line);
}
.cart-noprice .mgr .ava {
    width: 40px; height: 40px; border-radius: 50%;
    background: #4D4D4D; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--rc); font-weight: 500; font-size: 15px; letter-spacing: 0.02em;
}
.cart-noprice .mgr .name {
    font-family: var(--rc); font-size: 15px; font-weight: 500; color: var(--text);
    line-height: 1.2;
}
.cart-noprice .mgr .pos { font-family: var(--rc); font-size: 13px; color: var(--text-2); }
.cart-noprice .mgr a {
    font-family: var(--rc); font-size: 15px; font-weight: 500; color: var(--text);
    text-decoration: none;
}
.cart-noprice .mgr a:hover { color: var(--text-2); }

/* ===== Блок лимита по договору (П.1/П.10) ===== */
.cart-limit {
    background: var(--bg-soft);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.cart-limit-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.cart-limit-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--rc); font-weight: 500; font-size: 15px; color: var(--text);
}
.cart-limit-title svg, .cart-limit-title .ti { color: var(--bs-primary); flex: none; font-size: 18px; }
.cart-limit-org { color: var(--text-2); font-weight: 400; }
/* Пикер контрагента-плательщика в шапке блока (2026-07-06, вместо отдельной
   строки-селекта над блоком). Кнопка «имя + шеврон», меню — .cart-move-menu. */
.cart-org-pick {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; border: 0; padding: 2px 4px; margin: -2px -4px;
    border-radius: 6px; cursor: pointer;
    font-family: var(--rc); font-size: 15px; font-weight: 400; color: var(--text-2);
    transition: background .15s, color .15s, transform .12s;
    min-width: 0;
}
.cart-org-pick:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.cart-org-pick:active { transform: scale(0.96); }
.cart-org-pick svg, .cart-org-pick .ti { width: 14px; height: 14px; font-size: 14px; flex: none; color: var(--text-3); }
.cart-org-pick-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 420px;
}
/* Мобила: пикер плательщика — на отдельной строке под «Лимит по договору»
   (в одну строку с длинным именем орг не помещался в две колонки). Разделитель
   « · » (`.cart-limit-sep`) скрыт, кнопка занимает всю ширину под подписью. */
@media (max-width: 767px) {
    .cart-limit-title { display: flex; flex-wrap: wrap; width: 100%; }
    .cart-limit-sep { display: none; }
    .cart-limit-title .cart-org-pick { flex: 0 0 100%; justify-content: flex-start; margin-left: 0; }
    .cart-org-pick-name { max-width: 100%; }
}
/* Галочка выбранной организации в меню пикера.
   ⚠ [hidden]-вариант обязан оставаться display:none — не задавать display
   базовому правилу без него (перебивает UA-стиль hidden). */
.cart-org-menu { max-width: 380px; }
.cart-org-menu .mm-check { color: var(--bs-primary); display: inline-flex; }
.cart-org-menu .mm-check[hidden] { display: none; }
/* Нейтральное тело блока, когда лимита/долга нет или данные ещё грузятся. */
/* --text-3 давал ~2.3:1 на фоне --bg-soft (светлое-на-светлом) — недостаточный
   контраст для читаемого текста состояния; --text-2 держит ~7:1. */
.cart-limit-empty {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--rc); font-size: 13px; color: var(--text-2); line-height: 1.4;
}
/* Перезагрузка блока договора при смене организации — приглушаем, не очищаем. */
.onec-async.is-refreshing { opacity: .45; pointer-events: none; transition: opacity .15s; }
.cart-limit-nums {
    font-family: var(--rc); font-size: 14px; color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.cart-limit-nums b { font-weight: 600; color: var(--text); }
.cart-limit-bar {
    height: 8px; border-radius: 4px; background: var(--line); overflow: hidden;
}
.cart-limit-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.cart-limit-fill.is-ok   { background: var(--bs-success); }
.cart-limit-fill.is-warn { background: var(--bs-warning); }
.cart-limit-fill.is-crit { background: var(--bs-danger); }
.cart-limit-warn {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    font-family: var(--rc); font-size: 13px; color: var(--bs-danger); line-height: 1.4;
}
.cart-limit-warn svg, .cart-limit-warn .ti { flex: none; margin-top: 1px; font-size: 15px; }

/* ===== Кнопка «Оформить заказ» с суммой (П.6) ===== */
/* ⚠ Селектор `a.cart-checkout-btn` (спец. 0,1,1), НЕ `.cart-checkout-btn` (0,1,0):
   элемент — `<a class="btn btn-primary cart-checkout-btn">`, а bootstrap `.btn`
   (`display:inline-block`, `line-height:1.5`) живёт в template-бандле, который в HTML
   идёт ПОСЛЕ page-бандла (cart-page.css) — при равной специфичности `.btn` перебивал
   `inline-flex`, содержимое не центрировалось по вертикали (текст сидел по base-line,
   сумма `.js-checkout-sum` — жалоба клиента П.12). Тег+класс даёт перевес → flex-центр
   работает. */
a.cart-checkout-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    /* Основательная CTA-высота, согласована с .auth-submit (52px). Раньше кнопка
       наследовала дефолтную высоту .btn и читалась «низкой» (жалоба клиента 4a). */
    height: 52px; font-size: 17px; line-height: 1;
}
.cart-checkout-sum {
    font-variant-numeric: tabular-nums; font-weight: 600;
}
/* Разделитель «·» между названием и суммой (через ::before — JS обновляет
   сумму textContent'ом, не затрагивая псевдоэлемент). */
.cart-checkout-sum::before {
    content: '·'; margin-right: 8px; font-weight: 400; opacity: .7;
}
/* ===== Индикатор сохранения наценки/цены (П.8) ===== */
.cart-save {
    position: absolute; top: 6px; right: 44px;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--rc); font-size: 12px; color: var(--text-3);
    background: #fff; border: 1px solid var(--line-2);
    /* Статус-чип (не карточка) — пилюля допустима по шкале (§0.1: пилюли
       только бейджам-счётчикам/статус-чипам). */
    border-radius: var(--g-radius-pill);
    padding: 2px 9px; pointer-events: none;
    opacity: 0; transform: translateY(-3px); transition: opacity .2s, transform .2s;
    white-space: nowrap; z-index: 2;
}
.cart-save.show { opacity: 1; transform: none; }
.cart-save.saved { color: var(--bs-success); border-color: rgba(var(--bs-success-rgb), .3); }
.cart-save .spin {
    width: 11px; height: 11px; border: 2px solid var(--line); border-top-color: var(--text-3);
    border-radius: 50%; animation: cartSaveSpin .6s linear infinite;
}
@keyframes cartSaveSpin { to { transform: rotate(360deg); } }

/* ===== Меню «•••» строки: перенос (П.12) + удаление (2026-07-06, вместо
   пары иконок ↔/×) ===== */
.cart-row-actions {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
}
.cart-more {
    position: relative;
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3); transition: color .15s, transform .12s;
}
/* Расширение тач-таргета до ~40px. */
.cart-more::after { content: ''; position: absolute; inset: -4px; }
/* Иконка-кнопка без подложки: hover — только цвет (см. приём §0.3 шапки). */
.cart-more:hover { color: var(--bs-primary); }
.cart-more:active { transform: scale(0.96); }
.cart-more svg, .cart-more .ti { width: 18px; height: 18px; font-size: 18px; }
/* Floating-меню действий строки (перенос + удалить). */
.cart-move-menu {
    position: fixed; z-index: 120;
    min-width: 200px; max-width: 280px;
    /* Дропдаун-попап — 8px по шкале, пункты внутри — 4px (см. ниже). */
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 6px; overflow: hidden;
}
.cart-move-menu .mm-head {
    font-family: var(--rc); font-size: 12px; color: var(--text-3);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 6px 10px 4px;
}
.cart-move-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; background: transparent; border-radius: 4px;
    cursor: pointer; text-align: left;
    font-family: var(--rc); font-size: 14px; color: var(--text);
    transition: background .15s, transform .12s;
}
.cart-move-opt:hover { background: var(--bs-primary-bg-subtle); }
.cart-move-opt:active { transform: scale(0.96); }
.cart-move-opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-move-opt .ti { font-size: 15px; flex: 0 0 auto; }
/* Разделитель и красный пункт «Удалить» — единственный destructive-акцент в меню. */
.cart-move-menu .mm-sep { height: 1px; background: var(--line-2); margin: 4px 6px; }
.cart-move-opt.mm-del { color: var(--bs-danger); }
.cart-move-opt.mm-del:hover { background: var(--bs-danger-bg-subtle); }
/* «Новая корзина» — отличается от существующих корзин только иконкой-плюсом
   (нейтральный цвет, обычный вес; без разделителя над ней). */

/* ===== Undo-тост при удалении позиции (П.9) ===== */
.cart-undo-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(80px);
    z-index: 200;
    display: inline-flex; align-items: center; gap: 16px;
    background: var(--text); color: #fff;
    border-radius: 8px; padding: 12px 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    font-family: var(--rc); font-size: 14px;
    opacity: 0; transition: opacity .25s, transform .25s;
    overflow: hidden; /* обрезает полосу отсчёта по скруглению */
}
/* Обратный отсчёт: полоса внизу тоста, убывает за 5 c (синхронно с таймером
   commitRemoval). Останавливается с тостом (он удаляется при undo/commit). */
.cart-undo-bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: var(--bs-primary);
    transform-origin: left center;
    animation: cart-undo-countdown 5s linear forwards;
}
@keyframes cart-undo-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.cart-undo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cart-undo-toast .txt { white-space: nowrap; }
.cart-undo-btn {
    background: transparent; border: 0; cursor: pointer;
    color: var(--bs-primary-border-subtle); font-family: var(--rc); font-size: 14px; font-weight: 600;
    padding: 2px 4px; white-space: nowrap;
    transition: color .15s, transform .12s;
}
.cart-undo-btn:hover { color: #fff; text-decoration: underline; }
.cart-undo-btn:active { transform: scale(0.96); }

/* ===== Сворачивание списка КП (П.11) ===== */
.kp-list.is-collapsed .kp-extra { display: none; }
.kp-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--rc); font-size: 13px; font-weight: 500; color: var(--text-2);
    padding: 4px 4px; margin-top: 2px;
    transition: color .15s, transform .12s;
}
.kp-toggle:hover { color: var(--bs-primary); }
.kp-toggle:active { transform: scale(0.96); }
.kp-list:not(.is-collapsed) .kp-toggle-more { display: none; }
.kp-list.is-collapsed .kp-toggle-less { display: none; }

.cart-tools-note {
    margin: 0 4px 14px;
    font-family: var(--rc); font-size: 13px;
    color: var(--text-2);
    display: inline-flex; align-items: center; gap: 6px;
}
.cart-tools-note .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--bs-warning);
    display: inline-block;
}

/* Aux ряд — кнопки импорт/очистить. Кнопки выровнены по верху: «Скачать
   шаблон» — второй строкой ровно под «Загрузить из файла» (.cart-tools-imp). */
.cart-tools-aux {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 14px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cart-tools-imp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Радиус — по шкале кнопок (6px), не пилюля: местный override раньше держал
   40px-пилюлю поверх штатного Bootstrap .btn (--bs-border-radius уже 6px). */
.cart-tools-aux .btn { height: 40px; padding: 0 18px; font-size: 15px; border-radius: 6px; }
.cart-tools-aux .btn svg, .cart-tools-aux .btn .ti { width: 16px; height: 16px; font-size: 16px; }
/* «Скачать шаблон» — обычным (не жирным) вторичным текстом (2026-07-06). */
.cart-tools-aux .text-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 0;
    font-family: var(--rc); font-size: 13px; font-weight: 400;
    color: var(--text-2); letter-spacing: -0.01em;
    cursor: pointer;
    transition: color .15s, transform .12s;
}
.cart-tools-aux .text-link:hover { color: var(--bs-primary); }
.cart-tools-aux .text-link:active { transform: scale(0.96); }
/* Scale-on-press для .btn-кнопок корзины (.btn в base.css несёт
   transition:all и не имеет глобального :active — добавляем тактильность
   только в области корзины). */
.cart-tools-aux .btn:active,
.cart-actions .btn:active { transform: scale(0.96); }
.cart-tools-aux .text-link:hover .lab { text-decoration: underline; text-underline-offset: 3px; }
.cart-tools-aux .text-link svg, .cart-tools-aux .text-link .ti { width: 16px; height: 16px; font-size: 16px; }

/* ---------- Таблица товаров ---------- */
.cart-table {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    overflow: hidden;
}
/* Выбор организации-плательщика (В2.2) — пикер в шапке блока «Договор»
   (.cart-org-pick выше); отдельная строка-селект удалена 2026-07-06. */

/* ⚠ Специфичность .cart-table — иначе устаревший дубль `.cart-thead/.cart-row`
   в template_styles.css (старая до-мульти-корзинная вёрстка, 6 колонок) перебивал
   грид → 8 ячеек ломались в 6 колонок (правый край обрезан). */
/* В2.1 (Б24 72185): 9 треков — Фото · Товар · Кол-во · Закупка · Розничная ·
   Наценка · Прибыль · Итого · действия (2026-07-06). */
.cart-table .cart-thead, .cart-table .cart-row {
    display: grid;
    /* Колонка «Количество» = 168px (шире контрола ~128px) — центрированная пара
       заголовок+контрол смещается влево, справа появляется воздух до «Цены» (иначе
       капсула qty почти впритык к колонке цены). Лишние ~36px отдаёт «Товар» (1fr). */
    /* Ценовые колонки (Закупка…Итого) выровнены ПО ПРАВОМУ краю, треки подогнаны
       к контенту (заголовок/значение) — иначе визуальные зазоры между колонками
       гуляли: центрированные ячейки в широких треках давали разный воздух
       (жалоба пользователя 2026-07-06). При right-выравнивании видимый зазор =
       gap + (трек − контент), поэтому лишней ширины у треков быть не должно. */
    /* Наценка 78 / Итого 84 — сужены 2026-07-06 (при 96/90 слак трека давал
       увеличенный визуальный зазор слева от них; инпут наценки в edit-режиме
       шире трека — переполняет влево через min-width, это осознанно). */
    grid-template-columns: 72px minmax(180px, 1fr) 168px 84px 92px 78px 84px 84px 40px;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
}
/* Единый канон заголовков таблиц (согласован между шаблонами): типографика
   явными токенами, без фоновой заливки — отделяет только border-bottom. */
.cart-thead {
    /* Спокойный канон — без uppercase/letter-spacing, тише текста (клиент 2026-07-08). */
    border-bottom: 1px solid var(--bs-border-color);
    font: 500 13px/1.2 var(--rc);
    color: var(--bs-tertiary-color);
}
.cart-thead .ar { text-align: right; }
.cart-thead .ac { text-align: center; }

.cart-row { position: relative; border-bottom: 1px solid var(--line-2); transition: background .15s; }
/* Обёртка ценового блока. На десктопе прозрачна — Закуп/Наценка/Цена остаются
   прямыми grid-колонками таблицы (мобильную раскладку «Закуп → Цена» см. ниже). */
.cart-cost { display: contents; }
.cart-row.is-removing { display: none; } /* отложенное удаление с undo (П.9) */
.cart-row:last-of-type { border-bottom: 0; }
.cart-row:hover { background: var(--bg-soft); }

.cart-img {
    width: 64px; height: 64px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    /* Мелкий элемент внутри карточки/панели — 6px по шкале (§0.1), не карточный
       10px: фото не должно повторять радиус самой панели-таблицы (жалоба 4b). */
    border-radius: 6px;
    overflow: hidden;
    display: block;
}
.cart-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }

.cart-prod-name {
    font-family: var(--rc); font-size: 16px; font-weight: 500;
    color: var(--text); line-height: 1.3; margin: 0 0 4px;
    text-decoration: none;
    text-wrap: pretty;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-prod-name:hover { color: var(--bs-primary); }
.cart-prod-meta {
    font-family: var(--rc); font-size: 13px; color: var(--text-2);
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.cart-prod-meta .dotsep { width: 2px; height: 2px; border-radius: 50%; background: var(--text-3); }
.cart-prod-meta .meta-group {
    display: inline-flex; align-items: center; gap: 4px;
}
.cart-prod-meta .copy {
    position: relative;
    width: 20px; height: 20px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-3); cursor: pointer; transition: color .15s, transform .12s;
    background: transparent; border: 0; padding: 0;
}
/* Расширение тач-таргета до ~40px в нейтральный зазор справа (метаданные
   слева — не интерактивны). */
.cart-prod-meta .copy::after { content: ''; position: absolute; inset: -10px; }
.cart-prod-meta .copy:active { transform: scale(0.96); }
/* Иконка-кнопка без подложки: hover — только цвет. */
.cart-prod-meta .copy:hover { color: var(--bs-primary); }
.cart-prod-meta .copy.ok { color: var(--bs-success); }

.cart-price {
    font-family: var(--rc); font-weight: 500; font-size: 16px;
    color: var(--text); text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.cart-price .u {
    display: block;
    font-family: var(--rc); font-weight: 400; font-size: 12px;
    color: var(--text-3); letter-spacing: 0.02em;
    margin-top: 2px;
    text-transform: lowercase;
}
/* «Итого» строки — одна цена (сумма закупки; двухуровневый вид .cart-total-*
   убран 2026-07-06). */
.cart-sum {
    font-family: var(--rc); font-weight: 500; font-size: 17px;
    color: var(--text); text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Колонка «Количество» — вид qty-control (как после «В корзину»): красные залитые
   кнопки + мягкий трек + «N / наличие». Масштаб под колонку ~150px. */
/* Контрол по центру колонки (не растягиваем на всю ширину) — чтобы его центр
   совпадал с центром заголовка «Количество» (заголовок тоже .ac). */
.cart-row > .cart-qty-cell { display: flex; align-items: center; justify-content: center; }
/* Круглая пилюля (пред-полировка) → скругление по шкале (§0.1): контрол
   6px (кнопочный), вложенные +/- кнопки 4px, концентрично. */
.cart-row .qty-control { height: 40px; border-radius: 6px; }
.cart-row .qty-control__btn { width: 34px; height: 32px; border-radius: 4px; }
.cart-row .qty-control__btn svg, .cart-row .qty-control__btn .ti { width: 16px; height: 16px; font-size: 16px; }
.cart-row .qty-control__qty { font-size: 15px; min-width: 0; white-space: nowrap; }
.cart-row .qty-control__of { font-size: 11px; color: var(--text-3); font-weight: 400; margin-left: 2px; }

/* Наценка */
.cart-mk { display: flex; justify-content: flex-end; align-items: center; }
.mk-in {
    display: inline-flex; align-items: center;
    height: 40px; width: 100%; min-width: 96px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.mk-in:hover { border-color: var(--bs-secondary-color); }
.mk-in:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}
.mk-in.custom { background: rgba(var(--bs-warning-rgb), 0.1); border-color: var(--bs-warning); }
.mk-in.custom:focus-within { border-color: var(--bs-warning); box-shadow: 0 0 0 3px rgba(var(--bs-warning-rgb), 0.18); }
.mk-in input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: none; background: transparent;
    text-align: center;
    font-family: var(--rc); font-weight: 500; font-size: 15px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    padding: 0;
}
.mk-in input::-webkit-outer-spin-button,
.mk-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mk-in .suf {
    font-family: var(--rc); font-weight: 500; font-size: 14px;
    color: var(--text-2);
    padding-left: 2px;
}

/* Розничная (витринная BASE, справочно) и Прибыль (В2.1, Б24 72185).
   Вид как у «Цены закупа»; is-zero — приглушённые «—»/ноль. */
.cart-retail, .cart-profit {
    font-family: var(--rc); font-weight: 500; font-size: 16px;
    color: var(--text); text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
/* Прибыль — зелёная, как «Ваша маржа» сводки (её слагаемое; 2026-07-06). */
.cart-profit { color: var(--bs-success); position: relative; }
.cart-retail.is-zero, .cart-profit.is-zero { color: var(--text-3); font-weight: 400; }
/* Сохранение наценки (2026-07-08): значение прибыли скрыто, на его месте
   спиннер (вместо надписи «Сохранение…»; та осталась для qty и строк без
   розницы). Класс .is-saving ставит/снимает setProfitSaving в cart-page.js. */
.cart-profit.is-saving .js-cart-row-profit { visibility: hidden; }
.cart-profit.is-saving::after {
    content: '';
    position: absolute; right: 2px; top: 50%;
    width: 13px; height: 13px; margin-top: -7px; box-sizing: border-box;
    border: 2px solid var(--line); border-top-color: var(--bs-success);
    border-radius: 50%;
    animation: cartSaveSpin .6s linear infinite;
}

/* ---------- View / edit режим ячейки «Наценка» ----------
   По умолчанию показывается текст + иконка-карандаш (.cell-view).
   Клик по карандашу → ячейка получает .editing → показывается инпут
   с кнопкой-галочкой (.cell-ok). Продажная цена отдельной ячейки не имеет
   (В2.1): скрытый .js-client-input пересчитывается от наценки и виден
   только в «Клиентской сумме» сводки и КП (Прибыль/Итого — от розничной
   и закупки, 2026-07-06). */
.cart-mk .mk-in { display: none; }
.cart-mk.editing .mk-in { display: inline-flex; }
.cart-mk.editing .cell-view { display: none; }

.cell-view {
    position: relative;
    display: inline-flex; align-items: center;
    height: 40px; width: 100%;
    padding: 0 12px;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; cursor: pointer;
    font-family: var(--rc); font-weight: 500; font-size: 15px;
    color: var(--text); font-variant-numeric: tabular-nums;
    transition: background .15s, border-color .15s, transform .12s;
}
.cell-view:hover { background: var(--bs-primary-bg-subtle); }
.cell-view:active { transform: scale(0.96); }
/* Композиция «значение + карандаш» прижата к правому краю (как остальные
   ценовые колонки); карандаш — в потоке сразу за текстом, правый паддинг
   капсулы убран, чтобы край композиции совпадал с краем трека. */
.cart-mk .cell-view { justify-content: flex-end; padding-right: 0; }
.cart-mk.is-zero .cell-view-val { color: var(--text-3); }
.cell-view-inner { position: relative; display: inline-flex; align-items: center; }
.cell-view-val { white-space: nowrap; }
.cell-edit-ico {
    margin-left: 7px;
    width: 13px; height: 13px; flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-3); opacity: .5; transition: opacity .15s, color .15s;
    pointer-events: none;
}
.cell-view:hover .cell-edit-ico { opacity: 1; color: var(--bs-primary); }

/* Кнопка-галочка внутри инпута — фиксирует значение и сворачивает в текст. */
.cell-ok {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: var(--bs-primary); color: #fff;
    cursor: pointer; transition: background .15s, transform .12s;
}
/* Расширение тач-таргета до ~40px (безопасно — правее ничего нет, левее
   вход в поле ввода наценки, минорное перекрытие приемлемо). */
.cell-ok::after { content: ''; position: absolute; inset: -7px; }
.cell-ok:hover { background: var(--bs-success); }
.cell-ok:active { transform: scale(0.96); }
.cell-ok svg, .cell-ok .ti { width: 13px; height: 13px; font-size: 13px; }
.mk-in .cell-ok { margin-left: 2px; }

/* Summary */
.cart-summary {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}
.cart-summary .totals {
    display: flex; flex-direction: column;
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 20px 28px;
}
.cart-summary .row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 24px;
    padding: 12px 0;
    font-family: var(--rc);
}
.cart-summary .row + .row { border-top: 1px solid var(--line-2); }
.cart-summary .row.margin { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 16px; }
/* Гость/розница: «Итого» — единственная строка сводки в стиле маржи; верхняя
   линия и отступ разделителя не нужны, цвет — тёмный (зелёный = только маржа). */
.cart-summary .row.margin:first-child { border-top: 0; margin-top: 0; padding-top: 12px; }
.cart-summary .row.margin:first-child .val { color: var(--text); }
.cart-summary .row .lab {
    font-size: 15px; color: var(--text-2); letter-spacing: -0.01em;
}
.cart-summary .row.client .lab { color: var(--text); }
.cart-summary .row.margin .lab { color: var(--text); font-weight: 500; font-size: 16px; }
.cart-summary .row .lab .hint {
    display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; line-height: 1.3;
    font-weight: 400;
}
.cart-summary .row .val {
    font-size: 19px; font-weight: 500; color: var(--text);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
    text-align: right;
}
.cart-summary .row.client .val { font-size: 23px; color: var(--text); }
.cart-summary .row.margin .val {
    color: var(--bs-success); font-weight: 700; font-size: 27px;
}
.cart-summary .row.margin .pct {
    display: block; color: var(--text-2); font-weight: 400; font-size: 14px; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Пульс главной суммы при пересчёте от изменения количества: cart-page.js
   (tweenPrice) плавно «прокручивает» число (count-up) и навешивает .is-price-bump.
   scale не влияет на layout (flex/grid/block-элементы); tabular-nums на суммах
   держит ширину при прокрутке. Только главные суммы (Итого строки / Итого своды /
   кнопка), остальные числа получают только count-up без пульса. */
@keyframes cartPriceBump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.055); }
    100% { transform: scale(1); }
}
.js-cart-row-sum.is-price-bump,
.cart-summary .js-sum-base.is-price-bump,
.cart-checkout-sum.is-price-bump {
    animation: cartPriceBump 0.32s cubic-bezier(0.2, 0, 0, 1);
    transform-origin: right center;
}
.cart-checkout-sum.is-price-bump { display: inline-block; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
    .js-cart-row-sum.is-price-bump,
    .cart-summary .js-sum-base.is-price-bump,
    .cart-checkout-sum.is-price-bump { animation: none; }
}

.cart-actions {
    display: flex; flex-direction: column; gap: 12px;
    align-self: start;
    padding-top: 4px;
}
.cart-actions .btn { width: 100%; }
.cart-actions .clear-link {
    margin-top: 4px;
    font-family: var(--rc); font-size: 15px; color: var(--text-2);
    text-align: center; cursor: pointer; padding: 8px;
    background: transparent; border: 0;
    transition: color .15s, transform .12s;
}
.cart-actions .clear-link:hover { color: var(--bs-danger); }
.cart-actions .clear-link:active { transform: scale(0.96); }

/* Сформированный файл КП — появляется под кнопкой «Коммерческое предложение».
   Компактная строка без рамки: иконка-метка + имя/мета + мелкие кнопки
   скачивания/удаления (как .ren/.del в табах списков корзин). */
.kp-list { display: flex; flex-direction: column; gap: 2px; }
.kp-file {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 5px 2px;
    display: flex; align-items: center; gap: 10px;
}
.kp-file .body { flex: 1; min-width: 0; }
/* Имя файла + дата — в одну строку (дата серым после имени). */
.kp-file .kp-name-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.kp-file .name {
    font-family: var(--rc); font-size: 14px; font-weight: 500; color: var(--text);
    line-height: 1.3; overflow-wrap: anywhere; word-break: break-word;
    background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
    text-decoration: none;
}
.kp-file .name:hover { color: var(--bs-primary); }
.kp-file .kp-org {
    font-family: var(--rc); font-size: 12px; font-weight: 500; color: var(--text-2);
    margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere;
}
.kp-file .meta {
    font-family: var(--rc); font-size: 12px; color: var(--text-3);
    line-height: 1.3; white-space: nowrap; flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.kp-file .dl, .kp-file .kp-del {
    position: relative;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px; border: 0;
    color: var(--text-3);
    background: transparent; cursor: pointer; transition: color .15s, transform .12s;
}
/* Тач-таргет ~40px для мелких 26px кнопок скачать/удалить КП. Между ними gap
   10px → горизонталь -5px (касаются, без перекрытия), вертикаль -7px. */
.kp-file .dl::after, .kp-file .kp-del::after { content: ''; position: absolute; inset: -7px -5px; }
/* Иконки-кнопки без подложки: hover — только цвет. */
.kp-file .dl:hover { color: var(--bs-primary); }
.kp-file .kp-del:hover { color: var(--bs-danger); }
.kp-file .dl:active, .kp-file .kp-del:active { transform: scale(0.96); }
.kp-file .dl svg, .kp-file .kp-del svg,
.kp-file .dl .ti, .kp-file .kp-del .ti { width: 14px; height: 14px; font-size: 14px; }

/* Empty state */
/* .cart-empty вынесён в template_styles.css — общий компонент пустого
   состояния (корзина + избранное). cart-page.css грузится только на
   /personal/cart/, поэтому стиль не может жить здесь. Иконка (Tabler
   <i class="ti ti-shopping-cart-off">, только в разметке корзины — фаворитов
   не касается) сайзится тут через font-size (раньше — inline style на svg). */
.cart-wrap .cart-empty .ico .ti { font-size: 36px; }

/* ---------- Модалки (общая) ---------- */
.cm-overlay {
    position: fixed; inset: 0;
    background: rgba(32,30,30,0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 24px;
    animation: cm-fade .18s ease;
}
@keyframes cm-fade { from { opacity: 0; } }
.cm-dialog {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    width: 560px; max-width: 100%;
    max-height: calc(100vh - 48px);
    overflow: auto;
    animation: cm-pop .22s cubic-bezier(.2,.7,.3,1.2);
}
@keyframes cm-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.cm-head {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 24px 24px 8px;
}
.cm-head h3 {
    margin: 0; font-family: var(--rc); font-weight: 500; font-size: 23px;
    letter-spacing: -0.02em; color: var(--text); flex: 1;
    text-wrap: balance;
}
.cm-head .sub {
    font-family: var(--ro); font-size: 14px; color: var(--text-2); line-height: 1.4;
    margin: 4px 0 0;
    text-wrap: pretty;
}
.cm-close {
    position: relative;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg-soft); color: var(--text); border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s, transform .12s;
}
/* Тач-таргет до 40px (изолированная кнопка в углу заголовка — без соседей). */
.cm-close::after { content: ''; position: absolute; inset: -2px; }
.cm-close:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.cm-close:active { transform: scale(0.96); }
.cm-close svg, .cm-close .ti { font-size: 16px; }
.cm-body { padding: 16px 24px 8px; }
.cm-body label.lab {
    display: block;
    font-family: var(--rc); font-size: 13px; font-weight: 500; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 14px 0 6px;
}
/* .txt — базовая геометрия своя (высота/паддинг под язык этой страницы); класс
   form-control/form-select добавлен в разметке рядом (Bootstrap даёт :invalid/
   транзишны бесплатно, наши правила той же специфичности их не теряют). */
.cm-body input.txt, .cm-body select.txt {
    width: 100%; height: 48px; padding: 0 14px;
    border: 1px solid var(--bs-border-color); border-radius: 6px;
    background: #fff;
    font-family: var(--rc); font-size: 16px; color: var(--text);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.cm-body input.txt:focus, .cm-body select.txt:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}
.cm-foot { display: flex; gap: 10px; padding: 16px 24px 24px; }
.cm-foot .btn { flex: 1; height: 48px; }

.cm-warn {
    font-family: var(--ro); font-size: 15px; color: var(--text); line-height: 1.5;
    text-wrap: pretty;
    background: rgba(var(--bs-warning-rgb), 0.1); border: 1px solid rgba(var(--bs-warning-rgb), 0.35); border-radius: 8px;
    padding: 12px 14px; margin-top: 4px;
    display: flex; gap: 10px; align-items: flex-start;
}
.cm-warn svg, .cm-warn .ti { color: var(--bs-warning); flex-shrink: 0; margin-top: 2px; font-size: 18px; }

/* Drop-зона импорта XLSX/CSV (.js-cart-import → tpl-cart-import) — ранее без
   стилей вовсе (голый блок), добавлено при переверстке на Bootstrap-токены. */
.imp-drop {
    border: 1.5px dashed var(--bs-border-color);
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.imp-drop:hover, .imp-drop:focus-visible { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); outline: none; }
.imp-drop.over { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.imp-drop .ico {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.imp-drop .ico .ti { font-size: 26px; }
.imp-drop h4 { margin: 0 0 6px; font-family: var(--rc); font-size: 16px; font-weight: 500; color: var(--text); }
.imp-drop p { margin: 0; font-family: var(--ro); font-size: 13px; color: var(--text-2); line-height: 1.4; text-wrap: pretty; }
.imp-drop .formats { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.imp-drop .formats span {
    font-family: var(--rc); font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .02em; color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg); border-radius: 6px; padding: 3px 8px;
}
.imp-msg { font-family: var(--ro); }

/* ===== MOBILE (≤ 767 px) ===== */
@media (max-width: 767px) {
    .cart-wrap { padding: 0 16px; margin-top: 12px; }
    .cart-title { align-items: stretch; gap: 12px; margin-bottom: 12px; }
    .cart-title-left { gap: 8px; flex-direction: column; align-items: flex-start; }
    .cart-title h1 { font-size: 32px; line-height: 1; }
    .cart-meta-row { font-size: 13px; gap: 10px; }

    .cart-tabbar { flex-direction: column; align-items: stretch; gap: 10px; margin: 0 0 14px; }
    /* Лента табов — горизонтальный свайп. Правый fade-градиент (mask) намекает,
       что список продолжается за краем экрана (без него обрезанная корзина
       выглядит как «всё»). */
    .cart-tabs {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%;
        padding: 4px; gap: 2px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    }
    .cart-tabs::-webkit-scrollbar { display: none; }
    .cart-tab { flex: 0 0 auto; font-size: 14px; padding: 9px 14px; }
    /* Цена корзины в табе скрыта на мобиле — раздувала активный таб; сумма
       активной корзины есть в сводке ниже. */
    .cart-tab .n { display: none; }
    .cart-add { height: 44px; align-self: stretch; justify-content: center; }

    .cart-noprice { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px; margin-bottom: 16px; }
    .cart-noprice .ico { width: 36px; height: 36px; align-self: flex-start; }
    .cart-noprice h4 { font-size: 16px; }
    .cart-noprice p { font-size: 14px; }
    .cart-noprice .mgr { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line); width: 100%; }

    .cart-tools-aux { justify-content: flex-start; gap: 8px; margin-bottom: 10px; }
    .cart-tools-aux .btn { font-size: 14px; padding: 0 14px; }
    .cart-tools-aux .text-link { display: none; }


    .cart-thead { display: none !important; }
    /* Мобильная таблица — карточки «подпись | значение» по образцу
       /personal/organizations/: каждая позиция = карточка с рамкой #fff,
       заголовок (фото + название) сверху, свойства построчно «подпись (серая,
       фикс. ширина) | значение». */
    .cart-table {
        background: transparent !important; border: 0 !important;
        border-radius: 0 !important; overflow: visible !important;
        display: flex; flex-direction: column; gap: 10px;
    }
    .cart-row {
        grid-template-columns: 56px 1fr auto !important;
        grid-template-areas:
            "img   name  del"
            "cost  cost  cost"
            "qty   qty   qty"
            "sum   sum   sum" !important;
        gap: 6px 12px !important;
        padding: 14px 16px !important;
        border: 1px solid var(--line) !important;
        border-radius: 10px !important;
        background: #fff !important;
        align-items: center;
    }
    .cart-row:hover { background: #fff !important; } /* убираем десктоп-hover подсветку */
    .cart-row > a:first-child { grid-area: img; width: 56px !important; height: 56px !important; align-self: start; }
    .cart-row > div:nth-child(2) { grid-area: name; align-self: center; }
    .cart-prod-name { font-size: 16px !important; }
    /* Иконки «перенос»/«удалить» — комфортный тач-таргет 40×40 + разведены.
       align-self:center выравнивает их по вертикали со строкой названия. */
    .cart-row > .cart-row-actions { grid-area: del; align-self: center; flex-direction: row; gap: 8px; }
    .cart-row-actions .cart-more { width: 40px; height: 40px; }
    .cart-row-actions .cart-more svg { width: 20px; height: 20px; }
    /* Индикатор «Сохранено» — десктопный right:44px рассчитан на колонку
       действий, которой на мобиле нет → отступ от края. Прижимаем к правому
       краю карточки и уводим вниз, чтобы не пересекать иконки ↔/× сверху. */
    .cart-row .cart-save { top: auto; bottom: 14px; right: 16px; }

    /* ===== Ценовой блок (В2.1): строки «подпись 132 | значение» из data-label.
       Обёртка .cart-cost (на десктопе display:contents) на мобиле — столбик:
       Закупка → Розничная → Наценка (edit) → Прибыль (зелёная). */
    .cart-row .cart-cost {
        grid-area: cost; margin-top: 6px;
        display: flex !important; flex-direction: column; gap: 6px;
    }
    .cart-row .cart-cost > [data-label] {
        display: grid !important;
        grid-template-columns: 132px 1fr;
        align-items: center; gap: 0 10px;
        margin: 0 !important; padding: 0 !important; height: auto !important;
        font-size: 14px !important; font-weight: 400 !important;
        color: var(--text); text-align: left !important; line-height: 1.3;
    }
    .cart-row .cart-cost > [data-label]::before {
        content: attr(data-label);
        font-family: var(--rc); font-size: 14px; font-weight: 400;
        color: var(--text-3); white-space: nowrap;
    }
    /* Прибыль зелёная и на мобиле (генерик [data-label] выше красит в --text). */
    .cart-row .cart-cost > .cart-profit { color: var(--bs-success); }
    .cart-row .cart-cost > .cart-retail.is-zero,
    .cart-row .cart-cost > .cart-profit.is-zero { color: var(--text-3); }
    /* Спиннер сохранения наценки: значение — во 2-й колонке грида (после
       подписи 132px + gap 10px) → спиннер к началу значения, не к краю строки. */
    .cart-row .cart-cost > .cart-profit.is-saving::after { right: auto; left: 142px; }
    /* Наценка: cell-view слева, высота текста, без hover-фона. */
    .cart-row .cart-cost .cell-view {
        justify-content: flex-start !important; padding: 0 !important;
        height: auto !important; min-height: 0 !important;
    }
    .cart-row .cart-cost .cell-view-val { font-size: 14px; font-weight: 400; }
    .cart-row .cart-cost .cell-view:hover { background: transparent !important; }
    /* Инпут наценки — тонкая капсула ~26px (по образцу контрола количества). */
    .cart-row .cart-cost .mk-in {
        height: 26px !important; max-width: 116px; width: 100%;
        padding: 0 2px 0 6px !important;
        border: 1px solid var(--line) !important; border-radius: 6px !important;
    }
    .cart-row .cart-cost .mk-in input {
        height: 100% !important; font-size: 14px !important; font-weight: 400 !important;
        text-align: left !important; padding: 0 !important;
    }
    .cart-row .cart-cost .mk-in .suf { font-size: 13px; color: var(--text-3); }
    .cart-row .cart-cost .cell-ok {
        width: 20px !important; height: 20px !important; margin: 0 0 0 2px !important;
    }
    .cart-row .cart-cost .cell-ok svg { width: 11px !important; height: 11px !important; }
    /* Единый фон: у наценки убираем жёлтый custom-индикатор (в компактном
       инпуте он выбивался). */
    .cart-row .cart-cost .mk-in.custom {
        background: #fff !important; border-color: var(--line) !important;
    }

    /* Количество / Итого — обычные строки-свойства «подпись 132 | значение». */
    .cart-row > .cart-qty-cell,
    .cart-row > .cart-sum {
        grid-column: 1 / -1;
        display: grid !important; grid-template-columns: 132px 1fr;
        align-items: center; gap: 0 10px;
        height: auto !important; margin: 0 !important; padding: 0 !important;
        border: 0 !important; text-align: left !important;
    }
    .cart-row > .cart-qty-cell { grid-area: qty; }
    .cart-row > .cart-sum {
        grid-area: sum;
        /* 14px как у остальных строк-свойств: после упрощения «Итого» до одной
           цены значение — голый текст .cart-sum, наследовал десктопные 17px. */
        font-size: 14px !important; font-weight: 400 !important;
    }
    .cart-row > .cart-qty-cell::before,
    .cart-row > .cart-sum::before {
        font-family: var(--rc); font-weight: 400; font-size: 14px;
        color: var(--text-3); white-space: nowrap;
        text-transform: none; letter-spacing: 0; margin: 0; display: inline;
    }
    .cart-row > .cart-qty-cell::before { content: 'Количество'; }
    .cart-row > .cart-sum::before      { content: 'Итого'; }

    /* qty-control — нейтральная компактная капсула (mobile.css 44px!important
       перебиваем 0,3,0 + !important). */
    .cart-row > .cart-qty-cell .qty-control {
        max-width: 120px; height: 24px !important;
        padding: 0 !important; background: #fff !important;
        border: 1px solid var(--line) !important;
    }
    .cart-row > .cart-qty-cell .qty-control__btn {
        width: 28px !important; height: 22px !important; min-height: 0 !important;
        background: transparent !important; color: var(--text-2, #555) !important;
    }
    .cart-row > .cart-qty-cell .qty-control__qty {
        height: 22px !important; line-height: 22px !important; font-size: 13px !important;
    }
    .cart-row > .cart-qty-cell .qty-control svg,
    .cart-row > .cart-qty-cell .qty-control .ti { width: 12px !important; height: 12px !important; font-size: 12px !important; }
    .cart-row > .cart-qty-cell .qty-control__btn:disabled { opacity: 0.35; }

    /* Гость: нет наценки/цены клиенту — «Закуп»→«Цена». */
    .cart-row.cart-row--guest {
        grid-template-areas:
            "img  name del"
            "cost cost cost"
            "qty  qty  qty"
            "sum  sum  sum" !important;
    }
    /* Гость: в .cart-cost только одна строка «Цена» (data-label из шаблона). */

    .cart-summary { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
    .cart-summary .totals { padding: 16px 18px; }
    .cart-summary .row { padding: 10px 0; }
    .cart-summary .row .val { font-size: 17px; }
    .cart-summary .row.client .val { font-size: 21px; }
    .cart-summary .row.margin .val { font-size: 24px; }
    .cart-summary .row .lab { font-size: 14px; }
    .cart-summary .row .lab .hint { font-size: 12px; }
    .cart-actions .btn { font-size: 15px; }
    /* .cart-empty (моб) — в template_styles.css вместе с базовым правилом */

    /* КП-файлы — читаемый список: дата под именем, тач-кнопки 34×34,
       тонкий разделитель между файлами. */
    .kp-list { gap: 0; }
    .kp-file { padding: 10px 2px; gap: 12px; border-bottom: 1px solid var(--line-2); }
    .kp-file:last-child { border-bottom: 0; }
    .kp-file .kp-name-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .kp-file .meta { font-size: 11px; }
    .kp-file .dl, .kp-file .kp-del { width: 34px; height: 34px; }
    .kp-file .dl svg, .kp-file .kp-del svg,
    .kp-file .dl .ti, .kp-file .kp-del .ti { width: 16px; height: 16px; font-size: 16px; }

    .cm-overlay { padding: 12px; }
    .cm-head { padding: 18px 18px 4px; }
    .cm-head h3 { font-size: 19px; }
    .cm-body { padding: 12px 18px 4px; }
    .cm-foot { padding: 14px 18px 18px; flex-direction: column-reverse; gap: 8px; }
    /* flex:1 (десктоп) в column-flex ставит flex-basis:0% и убивает height:48px
       → кнопки схлопывались до высоты текста. Сброс flex возвращает высоту. */
    .cm-foot .btn { width: 100%; flex: 0 0 auto; }
}

/* Оверрайды модалок .om-/.rv-/.am- УДАЛЕНЫ 2026-07-08: базовые правила в
   template_styles.css сами на новых токенах И грузятся ПОЗЖЕ page-CSS
   (DESIGN.md §0.11) — дубли здесь были мёртвым кодом. */

/* End */
/* /local/templates/grosio/cart-page.css?178747708361490 */