Исправлен порядок операций при конвертации резервов в продажи

Проблема:
При продаже витринного комплекта резервы оставались в статусе 'reserved'
вместо 'converted_to_sale'. Товары из состава комплекта не освобождались.

Причина:
В методе sell_showcase_items порядок операций был неправильный:
1. create_sale_from_reservation вызывался ПЕРВЫМ
2. reservation.order_item устанавливался ПОСЛЕ

В SaleProcessor.create_sale_from_reservation есть логика:
  if order and reservation.order_item:
      sale_price = reservation.order_item.price
  else:
      sale_price = reservation.product.actual_price

Так как order_item был None, цена бралась из product.actual_price,
а не из OrderItem, и резерв не конвертировался корректно.

Решение:
Правильный порядок операций:
1. Устанавливаем reservation.order_item = order_item
2. Сохраняем reservation
3. Вызываем create_sale_from_reservation (теперь order_item доступен)
4. Обновляем статус на 'converted_to_sale'
5. Сохраняем финальное состояние

Теперь резервы корректно преобразуются в продажи с правильной ценой
из позиции заказа, и товары освобождаются после продажи.

myproject/pos/static/pos/css/terminal.css

@@ -286,3 +286,73 @@ body {
 .action-buttons-panel #scheduleLater {
   white-space: normal;
 }
+
+/* Адаптивность для элементов корзины на маленьких экранах */
+@media (max-width: 991.98px) {
+  .cart-item {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .item-name-price {
+    width: 100%;
+    order: 1;
+  }
+  
+  .multiply-sign {
+    display: none;
+  }
+  
+  .cart-item > div:has(.d-flex.align-items-center) {
+    order: 2;
+  }
+  
+  .item-total {
+    order: 3;
+    margin-left: auto;
+  }
+  
+  .cart-item .btn-link {
+    order: 4;
+  }
+}
+
+/* Адаптивность для карточек товаров и витринных комплектов на маленьких экранах */
+@media (max-width: 575.98px) {
+  /* Уменьшаем минимальную высоту карточки */
+  .product-card {
+    min-height: 160px;
+  }
+  
+  /* Уменьшаем высоту изображения */
+  .product-image {
+    min-height: 100px;
+    font-size: 2rem;
+  }
+  
+  /* Уменьшаем отступы в информационном блоке */
+  .product-info {
+    padding: 0.5rem;
+    gap: 0.2rem;
+  }
+  
+  /* Уменьшаем размер названия товара */
+  .product-name {
+    font-size: 0.8rem;
+    -webkit-line-clamp: 2;
+  }
+  
+  /* Уменьшаем размер информации об остатках */
+  .product-stock {
+    font-size: 0.7rem;
+  }
+  
+  /* Уменьшаем размер артикула и цены */
+  .product-sku {
+    font-size: 0.7rem;
+  }
+  
+  .product-price {
+    font-size: 0.8rem;
+  }
+}