/* SOL48 §G — корзина на мобильном. Подключается только на /shop/cart.
 * Замер «было» (390 px, живая корзина с одной позицией):
 *   название, категория и артикул шли одной синей подчёркнутой строкой;
 *   цена позиции печаталась дважды подряд и третий раз в итоге;
 *   поле счётчика 70x44, стрелки 38x16 — обе ниже нормы касания 44;
 *   «Продолжить покупки», «Очистить корзину» и «Сформировать КП» —
 *   три кнопки 350x50 одного веса, опасное действие неотличимо от главного;
 *   предложение установить приложение перекрывало кнопки;
 *   полоса шагов: подписи в две строки, 88x31 на шаг;
 *   «Общий вес: 7.5кг | Итого:» — одна строка, точка вместо запятой.
 * Расчёт заказа, доставки и оформления не трогается — только вывод.
 */
/* SOL48 G10: граница включает 768 — задание проверяет корзину на 390 И 768,
   а до правки на ровно 768 показывалась настольная раскладка со стрелками
   счётчика 38x16. */
@media screen and (max-width: 768px) {

  /* ── G1. Название: три строки, ссылка только на товаре ─────────────── */
  .basket-table__title .basket-table__cat,
  .basket-table__title .basket-table__name,
  .basket-table__title .basket-table__art { display: block; }
  .basket-table__title .basket-table__cat { margin: 0 0 2px; font-size: 12px; line-height: 1.3; }
  .basket-table__title .basket-table__cat a { color: #6e7178; text-decoration: none; }
  .basket-table__title .basket-table__name { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.25; }
  .basket-table__title .basket-table__art { color: #6e7178; font-size: 12px; line-height: 1.3; text-decoration: none; }

  /* ── G2. Цена и сумма подписаны, чтобы не читались как повтор ───────── */
  .basket-table td.basket-table__price::before { content: "Цена за единицу: "; color: #6e7178; font-size: 12px; }
  .basket-table td.basket-table__summ::before  { content: "Сумма по позиции: "; color: #6e7178; font-size: 12px; }

  /* ── G3. Счётчик одним рядом: −  [1]  + ────────────────────────────── */
  .basket-table .ui-spinner {
    display: inline-flex; align-items: center; gap: 6px;
    width: auto; height: auto; border: 0; background: none; padding: 0;
  }
  .basket-table .ui-spinner .forms-spinner {
    order: 2; width: 56px; min-width: 56px; height: 44px; box-sizing: border-box;
    text-align: center; font-size: 16px; border: 1px solid #d9d9d9; border-radius: 8px; margin: 0;
  }
  .basket-table .ui-spinner .ui-spinner-button {
    position: static; width: 44px; height: 44px; min-width: 44px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; margin: 0; float: none;
  }
  .basket-table .ui-spinner .ui-spinner-down { order: 1; }
  .basket-table .ui-spinner .ui-spinner-up   { order: 3; }
  /* SOL48 G10: на кнопках счётчика показывалась обрезанная картинка-стрелка
     из набора jQuery UI — вместо неё рисуем настоящие знаки. Доступные имена
     («Увеличить количество» / «Уменьшить количество») стоят на самих кнопках
     и не зависят от значка. */
  .basket-table .ui-spinner .ui-spinner-button .ui-icon { display: none; }
  .basket-table .ui-spinner .ui-spinner-button::after { font-size: 22px; line-height: 1; color: #15161a; }
  .basket-table .ui-spinner .ui-spinner-down::after { content: "\2212"; }
  .basket-table .ui-spinner .ui-spinner-up::after { content: "+"; }

  /* ── G4. Иерархия действий ─────────────────────────────────────────── */
  .wrap_button_cart { display: flex; flex-direction: column; gap: 10px; }
  .wrap_button_cart .button_cart_next,
  .wrap_button_cart .button_cart_submit { order: 0; background: var(--brand, #FFCC29); color: #15161a; border: 0; font-weight: 700; }
  .wrap_button_cart .basket__btn-commercial { order: 1; background: #fff; color: #15161a; border: 1.5px solid #15161a; }
  /* «Продолжить покупки» и «Очистить корзину» — ссылки, а не кнопки.
     Рамку и фон им ставит mpkm-cart-canon.css с !important; там эти значения
     вынесены в переменные, поэтому здесь достаточно задать переменные —
     новых !important не появляется. */
  .wrap_button_cart a.basket__btn-left {
    --cart-left-bg: transparent; --cart-left-border: 0; --cart-left-radius: 0;
    text-decoration: underline; min-height: 44px; line-height: 44px;
  }
  .wrap_button_cart a.basket__btn-left[href$="/shop"] { order: 2; --cart-left-color: #15161a; }
  .wrap_button_cart a.js_clear_cart { order: 3; --cart-left-color: #6e7178; font-weight: 400; }

  /* ── G5. Предложение установить приложение на корзине не показывается:
        оно перекрывало кнопки и целевое действие. ─────────────────────── */
  /* Правило пишем от body: свои стили предложение печатает уже в ходе работы
     страницы, и при равном весе побеждало бы более позднее объявление. */
  body .mpkm-pwa { display: none; }

  /* ── G6. Запас снизу, чтобы виджет чата не накрывал последнюю кнопку ── */
  .parent_wrap_block_cart { padding-bottom: 92px; }

  /* ── G7. Полоса шагов: короткие подписи, текущий шаг виден ──────────── */
  .wrap_block_cart nav .tab-rest { display: none; }
  .wrap_block_cart nav ul { display: flex; gap: 4px; }
  .wrap_block_cart nav li { flex: 1 1 0; min-width: 0; }
  .wrap_block_cart nav li a {
    display: block; padding: 10px 4px; text-align: center; font-size: 13px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; box-sizing: border-box;
  }
  .wrap_block_cart nav li.tab-current a { font-weight: 700; box-shadow: inset 0 -3px 0 var(--brand, #FFCC29); }

  /* ── G8. Вес и итог — разные строки ─────────────────────────────────── */
  /* G8: вес и итог — разные строки. Вес печатается двумя шаблонами:
     .basket__summ-weight (шаг состава) и .basket__itogo-weight (шаги 2–4). */
  .basket__summ-weight,
  .basket__itogo-weight { display: block; margin-top: 6px; }
  .basket__itogo { display: block; }
  .basket__itogo-title { display: block; }
}