Update app.py

app.py

@@ -29,22 +29,61 @@ def load_data():
             data = json.load(file)
             logging.info("Данные успешно загружены из JSON")
             if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
-                return {'products': [], 'categories': [] if not isinstance(data, list) else data}
+                logging.warning("Структура JSON неверна, инициализация...")
+                # Handle case where data is a list (old format) or dict is missing keys
+                if isinstance(data, list):
+                     return {'products': [], 'categories': data} # Assume list is categories if not dict
+                else:
+                     return {'products': [], 'categories': []}
+            # Ensure categories is always a list
+            if 'categories' not in data or not isinstance(data['categories'], list):
+                data['categories'] = []
+            # Ensure products is always a list
+            if 'products' not in data or not isinstance(data['products'], list):
+                data['products'] = []
             return data
     except FileNotFoundError:
-        logging.warning("Локальный файл базы данных не найден после скачивания.")
+        logging.warning("Локальный файл базы данных не найден.")
         return {'products': [], 'categories': []}
     except json.JSONDecodeError:
         logging.error("Ошибка: Невозможно декодировать JSON файл.")
         return {'products': [], 'categories': []}
     except RepositoryNotFoundError:
-        logging.error("Репозиторий не найден. Создание локальной базы данных.")
-        return {'products': [], 'categories': []}
+        logging.warning("Репозиторий HF не найден. Используется/создается локальная база.")
+        # Attempt to load local file even if repo not found, or return empty
+        try:
+            with open(DATA_FILE, 'r', encoding='utf-8') as file:
+                 data = json.load(file)
+                 if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
+                      if isinstance(data, list):
+                           return {'products': [], 'categories': data}
+                      else:
+                           return {'products': [], 'categories': []}
+                 if 'categories' not in data or not isinstance(data['categories'], list):
+                     data['categories'] = []
+                 if 'products' not in data or not isinstance(data['products'], list):
+                     data['products'] = []
+                 return data
+        except (FileNotFoundError, json.JSONDecodeError):
+             logging.warning("Локальный файл также не найден или поврежден.")
+             return {'products': [], 'categories': []}
     except Exception as e:
         logging.error(f"Произошла ошибка при загрузке данных: {e}")
         return {'products': [], 'categories': []}
 
+
 def save_data(data):
+    # Ensure data integrity before saving
+    if not isinstance(data, dict):
+        logging.error("Попытка сохранить данные не в формате словаря. Сохранение отменено.")
+        return
+    if 'products' not in data or not isinstance(data['products'], list):
+        data['products'] = []
+        logging.warning("Ключ 'products' отсутствует или не является списком. Инициализирован как пустой список.")
+    if 'categories' not in data or not isinstance(data['categories'], list):
+        data['categories'] = []
+        logging.warning("Ключ 'categories' отсутствует или не является списком. Инициализирован как пустой список.")
+
     try:
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
@@ -52,9 +91,16 @@ def save_data(data):
         upload_db_to_hf()
     except Exception as e:
         logging.error(f"Ошибка при сохранении данных: {e}")
-        raise
+        # Do not raise here to potentially allow app to continue running
+        # Consider more robust error handling if needed
 
 def upload_db_to_hf():
+    if not HF_TOKEN_WRITE:
+        logging.warning("HF_TOKEN_WRITE не установлен. Загрузка на Hugging Face пропущена.")
+        return
+    if not os.path.exists(DATA_FILE):
+        logging.warning(f"Файл {DATA_FILE} не найден для загрузки на Hugging Face.")
+        return
     try:
         api = HfApi()
         api.upload_file(
@@ -70,6 +116,10 @@ def upload_db_to_hf():
         logging.error(f"Ошибка при загрузке резервной копии: {e}")
 
 def download_db_from_hf():
+    if not HF_TOKEN_READ:
+        logging.warning("HF_TOKEN_READ не установлен. Скачивание с Hugging Face пропущено.")
+        # Try to load local file instead of raising immediately
+        return
     try:
         hf_hub_download(
             repo_id=REPO_ID,
@@ -77,26 +127,32 @@ def download_db_from_hf():
             repo_type="dataset",
             token=HF_TOKEN_READ,
             local_dir=".",
-            local_dir_use_symlinks=False
+            local_dir_use_symlinks=False,
+            force_download=True # Ensure fresh copy
         )
         logging.info("JSON база успешно скачана из Hugging Face.")
     except RepositoryNotFoundError as e:
         logging.error(f"Репозиторий не найден: {e}")
-        raise
+        raise # Re-raise to be caught by load_data
     except Exception as e:
+        # Handle other potential HF download errors (e.g., connection issues)
         logging.error(f"Ошибка при скачивании JSON базы: {e}")
-        raise
+        # Do not raise here, let load_data try local file
+
 
 def periodic_backup():
     while True:
-        upload_db_to_hf()
         time.sleep(800)
+        logging.info("Запуск периодического резервного копирования...")
+        upload_db_to_hf()
+
 
 @app.route('/')
 def catalog():
     data = load_data()
-    products = sorted(data['products'], key=lambda x: x.get('added_at', ''), reverse=True)
-    categories = data['categories']
+    # Sort products for display
+    products = sorted(data.get('products', []), key=lambda x: x.get('added_at', ''), reverse=True)
+    categories = data.get('categories', [])
 
     catalog_html = '''
     <!DOCTYPE html>
@@ -207,10 +263,26 @@ def catalog():
             }
             .products-grid {
                 display: grid;
-                grid-template-columns: repeat(2, minmax(200px, 1fr));
-                gap: 15px;
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* More responsive */
+                gap: 20px; /* Slightly larger gap */
                 padding: 10px;
             }
+             @media (min-width: 600px) {
+                .products-grid {
+                     grid-template-columns: repeat(2, minmax(200px, 1fr));
+                 }
+            }
+            @media (min-width: 900px) {
+                .products-grid {
+                     grid-template-columns: repeat(3, minmax(200px, 1fr));
+                 }
+            }
+            @media (min-width: 1200px) {
+                .products-grid {
+                     grid-template-columns: repeat(4, minmax(200px, 1fr));
+                 }
+            }
+
             .product {
                 background: var(--light-text);
                 border-radius: 15px;
@@ -218,6 +290,9 @@ def catalog():
                 box-shadow: 0 4px 15px var(--shadow-color);
                 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
                 overflow: hidden;
+                display: flex;
+                flex-direction: column; /* Stack elements vertically */
+                height: 100%; /* Make products fill grid cell height */
             }
             .product:hover {
                 transform: translateY(-5px) scale(1.02);
@@ -225,13 +300,14 @@ def catalog():
             }
             .product-image {
                 width: 100%;
-                aspect-ratio: 1;
+                aspect-ratio: 1 / 1.1; /* Slightly taller aspect ratio */
                 background-color: #fff;
                 border-radius: 10px;
                 overflow: hidden;
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                margin-bottom: 10px; /* Space below image */
             }
             .product-image img {
                 max-width: 100%;
@@ -245,11 +321,15 @@ def catalog():
             .product h2 {
                 font-size: 1rem;
                 font-weight: 600;
-                margin: 10px 0;
+                margin: 10px 0 5px 0; /* Adjust margins */
                 text-align: center;
-                white-space: nowrap;
+                white-space: normal; /* Allow wrapping */
                 overflow: hidden;
-                text-overflow: ellipsis;
+                 /* Limit title lines if desired
+                 display: -webkit-box;
+                 -webkit-line-clamp: 2;
+                 -webkit-box-orient: vertical;
+                 */
             }
             .product-price {
                 font-size: 1.1rem;
@@ -266,6 +346,13 @@ def catalog():
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+                 flex-grow: 1; /* Allow description to take space if needed */
+            }
+            .product-buttons {
+                margin-top: auto; /* Push buttons to bottom */
+                display: flex;
+                flex-direction: column; /* Stack buttons */
+                gap: 5px; /* Space between buttons */
             }
             .product-button {
                 display: block;
@@ -279,7 +366,6 @@ def catalog():
                 font-weight: 500;
                 cursor: pointer;
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin: 5px 0;
                 text-align: center;
                 text-decoration: none;
             }
@@ -311,6 +397,8 @@ def catalog():
                 box-shadow: 0 4px 15px rgba(255, 167, 38, 0.4);
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 z-index: 1000;
+                align-items: center; /* Center icon */
+                justify-content: center; /* Center icon */
             }
             #cart-button:hover {
                  background-color: var(--hover-primary-color);
@@ -335,17 +423,19 @@ def catalog():
                 max-width: 700px;
                 box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                 animation: slideIn 0.3s ease-out;
-                max-height: 85vh;
-                overflow-y: auto;
-                display: flex;
-                flex-direction: column;
+                max-height: 85vh; /* Limit height */
+                overflow-y: auto; /* Enable scrolling */
+                display: flex; /* Use flexbox for layout */
+                flex-direction: column; /* Stack content vertically */
+            }
+            #modalContent, #cartContent {
+                 overflow-y: auto; /* Allow content inside to scroll if needed */
+                 flex-grow: 1; /* Allow content to take available space */
+                 padding-right: 10px; /* Space for scrollbar */
             }
             #cartContent {
-                max-height: 60vh;
-                overflow-y: auto;
-                margin-bottom: 15px;
-                padding-right: 10px;
-                flex-grow: 1;
+                 max-height: 60vh; /* Specific max height for cart items */
+                 margin-bottom: 15px;
             }
             @keyframes slideIn {
                 from { transform: translateY(-50px); opacity: 0; }
@@ -357,7 +447,8 @@ def catalog():
                 color: #718096;
                 cursor: pointer;
                 transition: color 0.3s;
-                align-self: flex-end;
+                align-self: flex-end; /* Position close button top right */
+                margin-bottom: 10px; /* Space below close button */
             }
             .close:hover {
                 color: var(--primary-color);
@@ -368,13 +459,32 @@ def catalog():
                 align-items: center;
                 padding: 15px 0;
                 border-bottom: 1px solid var(--secondary-color);
+                gap: 10px; /* Add gap between elements */
+            }
+            .cart-item-details {
+                display: flex;
+                align-items: center;
+                gap: 15px;
+                 flex-grow: 1; /* Allow details to take space */
             }
             .cart-item img {
                 width: 50px;
                 height: 50px;
                 object-fit: contain;
                 border-radius: 8px;
-                margin-right: 15px;
+                flex-shrink: 0; /* Prevent image shrinking */
+            }
+            .cart-item-info {
+                 font-size: 0.9rem; /* Adjust font size */
+            }
+            .cart-item-info strong {
+                display: block; /* Name on its own line */
+                margin-bottom: 3px;
+            }
+            .cart-item-total {
+                 font-weight: bold;
+                 white-space: nowrap; /* Prevent price breaking */
+                 flex-shrink: 0;
             }
             .quantity-input, .color-select {
                 width: 100%;
@@ -400,15 +510,19 @@ def catalog():
                 box-shadow: 0 4px 15px rgba(255, 160, 0, 0.4);
             }
             .modal-footer {
-                 margin-top: auto;
+                 margin-top: auto; /* Push footer to bottom */
                  padding-top: 15px;
                  text-align: right;
                  border-top: 1px solid var(--secondary-color);
+                 display: flex; /* Use flexbox for footer buttons */
+                 justify-content: space-between; /* Space out total and buttons */
+                 align-items: center; /* Align items vertically */
+                 gap: 10px;
             }
+             .modal-footer strong {
+                 margin-right: auto; /* Push total to the left */
+             }
             @media (max-width: 768px) {
-                .products-grid {
-                    grid-template-columns: repeat(2, minmax(150px, 1fr));
-                }
                 .header h1 {
                     font-size: 1.2rem;
                 }
@@ -444,12 +558,15 @@ def catalog():
                  #cartContent {
                     max-height: 65vh;
                  }
+                 .cart-item {
+                     flex-wrap: wrap; /* Allow wrapping on small screens */
+                 }
+                 .cart-item-details {
+                     flex-basis: 100%; /* Take full width */
+                     margin-bottom: 5px; /* Space below details */
+                 }
             }
              @media (max-width: 480px) {
-                 .products-grid {
-                    grid-template-columns: 1fr;
-                    gap: 10px;
-                 }
                   .header {
                       flex-direction: column;
                       align-items: center;
@@ -466,6 +583,14 @@ def catalog():
                  .category-filter {
                      padding: 5px 10px;
                  }
+                 .modal-footer {
+                     flex-direction: column;
+                     align-items: flex-end; /* Align buttons right */
+                 }
+                 .modal-footer strong {
+                      margin-bottom: 10px; /* Space below total */
+                      align-self: flex-start; /* Align total left */
+                 }
             }
         </style>
     </head>
@@ -489,7 +614,7 @@ def catalog():
                 <div class="product"
                      data-name="{{ product['name']|lower }}"
                      data-description="{{ product['description']|lower }}"
-                     data-category="{{ product.get('category', 'Без категории') }}">
+                     data-category="{{ product.get('category', 'Без категории')|lower }}">
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     <div class="product-image">
                         <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
@@ -500,8 +625,10 @@ def catalog():
                     <h2>{{ product['name'] }}</h2>
                     <div class="product-price">{{ product['price'] }} с</div>
                     <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
-                    <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
-                    <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
+                    <div class="product-buttons">
+                        <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
+                        <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
+                    </div>
                 </div>
                 {% endfor %}
             </div>
@@ -520,7 +647,9 @@ def catalog():
                 <h2>Укажите количество и цвет</h2>
                 <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
                 <select id="colorSelect" class="color-select"></select>
-                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
+                <div class="modal-footer" style="border-top: none; padding-top: 10px;"> <!-- Re-use footer style for button -->
+                    <button class="product-button" style="margin-top: 0;" onclick="confirmAddToCart()">Добавить</button>
+                </div>
             </div>
         </div>
 
@@ -531,8 +660,10 @@ def catalog():
                 <div id="cartContent"></div>
                 <div class="modal-footer">
                     <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
+                    <div>
+                        <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
+                        <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -543,10 +674,12 @@ def catalog():
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
         <script>
+            // Use the same sorted product list on the client as generated by the server
             const products = {{ products|tojson }};
             let selectedProductIndex = null;
 
             function openModal(index) {
+                // Fetch details using the index relative to the currently displayed (sorted) list
                 loadProductDetails(index);
                 document.getElementById('productModal').style.display = "block";
             }
@@ -556,45 +689,63 @@ def catalog():
             }
 
             function loadProductDetails(index) {
+                // Send the index to the server endpoint
                 fetch('/product/' + index)
-                    .then(response => response.text())
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok ' + response.statusText);
+                        }
+                        return response.text();
+                    })
                     .then(data => {
                         document.getElementById('modalContent').innerHTML = data;
                         initializeSwiper();
                     })
-                    .catch(error => console.error('Ошибка:', error));
+                    .catch(error => {
+                        console.error('Ошибка загрузки деталей продукта:', error);
+                        document.getElementById('modalContent').innerHTML = '<p>Не удалось загрузить детали продукта.</p>';
+                    });
             }
 
             function initializeSwiper() {
-                new Swiper('.swiper-container', {
+                 // Destroy previous Swiper instance if it exists
+                 if (document.querySelector('.swiper-container') && document.querySelector('.swiper-container').swiper) {
+                     document.querySelector('.swiper-container').swiper.destroy(true, true);
+                 }
+                 // Initialize new Swiper
+                 new Swiper('.swiper-container', {
                     slidesPerView: 1,
                     spaceBetween: 20,
-                    loop: true,
+                    loop: true, // Consider disabling loop if only 1 image
                     grabCursor: true,
                     pagination: { el: '.swiper-pagination', clickable: true },
                     navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                    zoom: { maxRatio: 3 }
+                    zoom: { maxRatio: 3 },
+                    observer: true, // Re-init on DOM changes
+                    observeParents: true // Re-init on parent DOM changes
                 });
             }
 
             function openQuantityModal(index) {
                 selectedProductIndex = index;
+                // Use the client-side sorted 'products' array
                 const product = products[index];
+                if (!product) {
+                    console.error("Product not found at index:", index);
+                    alert("Ошибка: товар не найден.");
+                    return;
+                }
                 const colorSelect = document.getElementById('colorSelect');
                 colorSelect.innerHTML = '';
-                if (product.colors && product.colors.length > 0) {
-                    product.colors.forEach(color => {
-                        const option = document.createElement('option');
-                        option.value = color;
-                        option.text = color;
-                        colorSelect.appendChild(option);
-                    });
-                } else {
+                const availableColors = product.colors && product.colors.length > 0 ? product.colors : ['Нет информации'];
+
+                availableColors.forEach(color => {
                     const option = document.createElement('option');
-                    option.value = 'Нет цвета';
-                    option.text = 'Нет цвета';
+                    option.value = color;
+                    option.text = color;
                     colorSelect.appendChild(option);
-                }
+                });
+
                 document.getElementById('quantityModal').style.display = 'block';
                 document.getElementById('quantityInput').value = 1;
             }
@@ -608,15 +759,23 @@ def catalog():
                     return;
                 }
                 let cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                 // Use the client-side sorted 'products' array
                 const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
-                const existingItem = cart.find(item => item.id === cartItemId);
+                 if (!product) {
+                    console.error("Product not found at index:", selectedProductIndex);
+                    alert("Ошибка: товар не найден при добавлении в корзину.");
+                    return;
+                }
 
-                if (existingItem) {
-                    existingItem.quantity += quantity;
+                // Use a unique ID combining product name and color
+                const cartItemId = `${product.name}-${color}`; // Assuming name is unique enough or use a real ID if available
+                const existingItemIndex = cart.findIndex(item => item.id === cartItemId);
+
+                if (existingItemIndex > -1) {
+                    cart[existingItemIndex].quantity += quantity;
                 } else {
                     cart.push({
-                        id: cartItemId,
+                        id: cartItemId, // Use a unique ID
                         name: product.name,
                         price: product.price,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
@@ -628,14 +787,13 @@ def catalog():
                 localStorage.setItem('cart', JSON.stringify(cart));
                 closeModal('quantityModal');
                 updateCartButton();
+                openCartModal(); // Optionally open cart after adding
             }
 
             function updateCartButton() {
                 const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                 const cartButton = document.getElementById('cart-button');
                 cartButton.style.display = cart.length > 0 ? 'flex' : 'none';
-                cartButton.style.alignItems = 'center';
-                cartButton.style.justifyContent = 'center';
             }
 
             function openCartModal() {
@@ -644,24 +802,29 @@ def catalog():
                 let total = 0;
 
                 cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
-                    const itemTotal = item.price * item.quantity;
+                    // Ensure price and quantity are numbers
+                    const price = parseFloat(item.price) || 0;
+                    const quantity = parseInt(item.quantity) || 0;
+                    const itemTotal = price * quantity;
                     total += itemTotal;
                     return `
                         <div class="cart-item">
-                            <div style="display: flex; align-items: center;">
-                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
-                                <div>
+                            <div class="cart-item-details">
+                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : '<div style="width:50px; height: 50px; background: #eee; border-radius: 8px;"></div>'}
+                                <div class="cart-item-info">
                                     <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
+                                    <span>${price.toFixed(1)} с × ${quantity} (Цвет: ${item.color})</span>
                                 </div>
                             </div>
-                            <span>${itemTotal} с</span>
+                            <span class="cart-item-total">${itemTotal.toFixed(1)} с</span>
                         </div>
                     `;
                 }).join('');
 
-                document.getElementById('cartTotal').textContent = total;
+                document.getElementById('cartTotal').textContent = total.toFixed(1);
                 document.getElementById('cartModal').style.display = 'block';
+                 // Scroll cart content to top when opened
+                cartContent.scrollTop = 0;
             }
 
             function orderViaWhatsApp() {
@@ -671,14 +834,22 @@ def catalog():
                     return;
                 }
                 let total = 0;
-                let orderText = "Заказ:%0A";
+                let orderText = "Здравствуйте! Хочу сделать заказ:%0A%0A";
                 cart.forEach((item, index) => {
-                    const itemTotal = item.price * item.quantity;
+                     const price = parseFloat(item.price) || 0;
+                     const quantity = parseInt(item.quantity) || 0;
+                    const itemTotal = price * quantity;
                     total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
+                    orderText += `${index + 1}. ${item.name}%0A`;
+                    orderText += `   Цвет: ${item.color}%0A`;
+                    orderText += `   Кол-во: ${quantity}%0A`;
+                    orderText += `   Цена: ${price.toFixed(1)} с%0A`;
+                    orderText += `   Сумма: ${itemTotal.toFixed(1)} с%0A%0A`;
                 });
-                orderText += `Итого: ${total} с`;
-                window.open(`https://api.whatsapp.com/send?phone=996704667878&text=${orderText}`, '_blank');
+                orderText += `*Итого: ${total.toFixed(1)} с*`;
+
+                const whatsappUrl = `https://api.whatsapp.com/send?phone=996704667878&text=${orderText}`;
+                window.open(whatsappUrl, '_blank');
             }
 
             function clearCart() {
@@ -687,10 +858,14 @@ def catalog():
                 updateCartButton();
             }
 
+            // Close modal if clicking outside content
             window.onclick = function(event) {
-                if (event.target.classList.contains('modal')) {
-                     event.target.style.display = "none";
-                }
+                const modals = document.querySelectorAll('.modal');
+                modals.forEach(modal => {
+                    if (event.target == modal) {
+                        modal.style.display = "none";
+                    }
+                });
             }
 
             document.getElementById('search-input').addEventListener('input', filterProducts);
@@ -703,19 +878,52 @@ def catalog():
             });
 
             function filterProducts() {
-                const searchTerm = document.getElementById('search-input').value.toLowerCase();
-                const activeCategory = document.querySelector('.category-filter.active').dataset.category;
-                document.querySelectorAll('.product').forEach(product => {
-                    const name = product.getAttribute('data-name');
-                    const description = product.getAttribute('data-description');
-                    const category = product.getAttribute('data-category');
-                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm);
+                const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
+                const activeCategory = document.querySelector('.category-filter.active').dataset.category.toLowerCase();
+                const grid = document.getElementById('products-grid');
+                // Instead of hiding/showing, store matched elements and re-render grid
+                // This ensures elements are in the correct order if search/filter changes
+                const matchedProducts = [];
+                products.forEach((product, index) => { // Iterate over the original client-side sorted array
+                    const name = product.name.toLowerCase();
+                    const description = product.description.toLowerCase();
+                    const category = product.category ? product.category.toLowerCase() : 'без категории';
+
+                    const matchesSearch = searchTerm === '' || name.includes(searchTerm) || description.includes(searchTerm);
                     const matchesCategory = activeCategory === 'all' || category === activeCategory;
-                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
+
+                    if (matchesSearch && matchesCategory) {
+                        // Store the original index along with the product data if needed later,
+                        // or just recreate the HTML element directly.
+                        // Recreating is simpler here.
+                        matchedProducts.push(`
+                         <div class="product"
+                             data-name="${name}"
+                             data-description="${description}"
+                             data-category="${category}">
+                            ${product.photos && product.photos.length > 0 ? `
+                            <div class="product-image">
+                                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${product.photos[0]}"
+                                     alt="${product.name}"
+                                     loading="lazy">
+                            </div>` : ''}
+                            <h2>${product.name}</h2>
+                            <div class="product-price">${product.price} с</div>
+                            <p class="product-description">${product.description.substring(0, 50)}${product.description.length > 50 ? '...' : ''}</p>
+                            <div class="product-buttons">
+                                <button class="product-button" onclick="openModal(${index})">Подробнее</button>
+                                <button class="product-button add-to-cart" onclick="openQuantityModal(${index})">В корзину</button>
+                            </div>
+                        </div>`);
+                    }
                 });
+                grid.innerHTML = matchedProducts.join(''); // Replace grid content
             }
 
+            // Initial setup
             updateCartButton();
+            filterProducts(); // Apply initial filter (e.g., "All categories")
+
         </script>
     </body>
     </html>
@@ -725,42 +933,51 @@ def catalog():
 @app.route('/product/<int:index>')
 def product_detail(index):
     data = load_data()
-    products = data['products']
+    # Sort products exactly as in the catalog view to match the index
+    products = sorted(data.get('products', []), key=lambda x: x.get('added_at', ''), reverse=True)
     try:
+        # Access the product using the index from the sorted list
         product = products[index]
     except IndexError:
+        logging.error(f"Product index {index} out of range after sorting.")
         return "Продукт не найден", 404
+    except Exception as e:
+        logging.error(f"Error retrieving product at index {index}: {e}")
+        return "Ошибка при загрузке продукта", 500
 
     detail_html = '''
-    <div class="container" style="padding: 20px; font-family: 'Poppins', sans-serif; color: #333;">
-        <h2 style="font-size: 1.8rem; font-weight: 600; margin-bottom: 20px; color: #FFA726;">{{ product['name'] }}</h2>
-        <div class="swiper-container" style="max-width: 400px; margin: 0 auto 20px; --swiper-navigation-color: #FFA726; --swiper-pagination-color: #FFA726;">
+    <div style="font-family: 'Poppins', sans-serif; color: #333;">
+        <h2 style="font-size: 1.8rem; font-weight: 600; margin-bottom: 20px; color: #FFA726; text-align: center;">{{ product['name'] }}</h2>
+        <div class="swiper-container" style="max-width: 400px; margin: 0 auto 20px; --swiper-navigation-color: #FFA726; --swiper-pagination-color: #FFA726; border-radius: 10px; overflow: hidden;">
             <div class="swiper-wrapper">
-                {% if product.get('photos') and product['photos']|length > 0 %}
-                {% for photo in product['photos'] %}
-                <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
-                    <div class="swiper-zoom-container">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
-                             alt="{{ product['name'] }}"
-                             style="max-width: 100%; max-height: 350px; object-fit: contain;">
+                {% set photos = product.get('photos', []) %}
+                {% if photos and photos|length > 0 %}
+                    {% for photo in photos %}
+                    <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
+                        <div class="swiper-zoom-container">
+                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
+                                 alt="{{ product['name'] }}"
+                                 style="max-width: 100%; max-height: 350px; object-fit: contain; display: block;">
+                        </div>
                     </div>
-                </div>
-                {% endfor %}
+                    {% endfor %}
                 {% else %}
-                <div class="swiper-slide" style="background-color: #eee; display: flex; justify-content: center; align-items: center; border-radius: 10px; height: 350px;">
-                    <span style="color: #999;">Нет изображения</span>
-                </div>
+                    <div class="swiper-slide" style="background-color: #eee; display: flex; justify-content: center; align-items: center; height: 350px;">
+                        <span style="color: #999;">Нет изображения</span>
+                    </div>
                 {% endif %}
             </div>
+            {% if photos and photos|length > 1 %} <!-- Show nav/pagination only if multiple photos -->
             <div class="swiper-pagination"></div>
             <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
+            {% endif %}
         </div>
         <div style="background: #FFF8E1; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
             <p style="margin-bottom: 10px;"><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
             <p style="margin-bottom: 10px;"><strong>Цена:</strong> <span style="color: #D84315; font-weight: bold;">{{ product['price'] }} с</span></p>
-            <p style="margin-bottom: 10px;"><strong>Описание:</strong> {{ product['description'] }}</p>
-            <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') if product.get('colors') else 'Нет цветов' }}</p>
+            <p style="margin-bottom: 10px; white-space: pre-wrap;"><strong>Описание:</strong> {{ product['description'] }}</p>
+            <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет информации'])|join(', ') if product.get('colors') else 'Нет информации' }}</p>
         </div>
     </div>
     '''
@@ -770,44 +987,66 @@ def product_detail(index):
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():
     data = load_data()
-    products = data['products']
-    categories = data['categories']
+    products = data.get('products', []) # Use .get for safety
+    categories = data.get('categories', [])
 
     if request.method == 'POST':
         action = request.form.get('action')
 
         if action == 'add_category':
-            category_name = request.form.get('category_name')
+            category_name = request.form.get('category_name', '').strip()
             if category_name and category_name not in categories:
                 categories.append(category_name)
-                save_data(data)
+                save_data({'products': products, 'categories': categories})
                 return redirect(url_for('admin'))
-            return "Ошибка: Категория уже существует или не указано название", 400
+            elif category_name in categories:
+                 return "Ошибка: Категория с таким названием уже существует.", 400
+            else:
+                 return "Ошибка: Название категории не может быть пустым.", 400
 
         elif action == 'delete_category':
-            category_index = int(request.form.get('category_index'))
-            deleted_category = categories.pop(category_index)
-            for product in products:
-                if product.get('category') == deleted_category:
-                    product['category'] = 'Без категории'
-            save_data(data)
-            return redirect(url_for('admin'))
+            try:
+                category_index = int(request.form.get('category_index'))
+                if 0 <= category_index < len(categories):
+                    deleted_category = categories.pop(category_index)
+                    # Update products that used this category
+                    for product in products:
+                        if product.get('category') == deleted_category:
+                            product['category'] = 'Без категории'
+                    save_data({'products': products, 'categories': categories})
+                    return redirect(url_for('admin'))
+                else:
+                    return "Ошибка: Неверный индекс категории.", 400
+            except (ValueError, TypeError, IndexError):
+                 return "Ошибка: Неверный индекс категории.", 400
 
         elif action == 'add':
-            name = request.form.get('name')
-            price = request.form.get('price')
-            description = request.form.get('description')
+            name = request.form.get('name', '').strip()
+            price_str = request.form.get('price', '').strip()
+            description = request.form.get('description', '').strip()
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
             photos_list = []
 
+            if not name or not price_str or not description:
+                return "Ошибка: Заполните все обязательные поля (Название, Цена, Описание).", 400
+
+            try:
+                price = float(price_str.replace(',', '.'))
+                if price < 0:
+                     return "Ошибка: Цена не может быть отрицательной.", 400
+            except ValueError:
+                 return "Ошибка: Неверный формат цены. Используйте число (например, 150 или 150.50).", 400
+
             if photos_files:
+                uploads_dir = 'uploads'
+                os.makedirs(uploads_dir, exist_ok=True)
                 for photo in photos_files[:10]:
                     if photo and photo.filename:
-                        photo_filename = secure_filename(f"{int(time.time())}_{photo.filename}")
-                        uploads_dir = 'uploads'
-                        os.makedirs(uploads_dir, exist_ok=True)
+                        # Sanitize filename and make unique
+                        base, ext = os.path.splitext(secure_filename(photo.filename))
+                        photo_filename = f"{base}_{int(time.time())}{ext}"
                         temp_path = os.path.join(uploads_dir, photo_filename)
                         try:
                             photo.save(temp_path)
@@ -821,6 +1060,7 @@ def admin():
                                 commit_message=f"Добавлено фото для товара {name}"
                             )
                             photos_list.append(photo_filename)
+                            logging.info(f"Загружено фото: photos/{photo_filename}")
                         except Exception as e:
                              logging.error(f"Ошибка при загрузке фото {photo_filename}: {e}")
                         finally:
@@ -831,14 +1071,6 @@ def admin():
                                     logging.error(f"Ошибка при удалении временного файла {temp_path}: {e}")
 
 
-            if not name or not price or not description:
-                return "Ошибка: Заполните все обязательные поля", 400
-
-            try:
-                price = float(price.replace(',', '.'))
-            except ValueError:
-                 return "Ошибка: Неверный формат цены", 400
-
             new_product = {
                 'name': name,
                 'price': price,
@@ -846,43 +1078,49 @@ def admin():
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list,
                 'colors': colors,
-                'added_at': datetime.now().isoformat()
+                'added_at': datetime.now().isoformat() # Add timestamp
             }
             products.append(new_product)
-            save_data(data)
+            save_data({'products': products, 'categories': categories})
             return redirect(url_for('admin'))
 
         elif action == 'edit':
             try:
                 index = int(request.form.get('index'))
                 if not 0 <= index < len(products):
-                    return "Ошибка: Неверный индекс товара", 400
+                    return "Ошибка: Неверный индекс товара для редактирования.", 400
             except (ValueError, TypeError):
-                 return "Ошибка: Неверный индекс товара", 400
+                 return "Ошибка: Неверный индекс товара.", 400
 
-            name = request.form.get('name')
-            price = request.form.get('price')
-            description = request.form.get('description')
+            name = request.form.get('name', '').strip()
+            price_str = request.form.get('price', '').strip()
+            description = request.form.get('description', '').strip()
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
 
-            if not name or not price or not description:
-                 return "Ошибка: Заполните все обязательные поля", 400
+            if not name or not price_str or not description:
+                 return "Ошибка: Заполните все обязательные поля (Название, Цена, Описание).", 400
 
             try:
-                 price_float = float(price.replace(',', '.'))
+                 price_float = float(price_str.replace(',', '.'))
+                 if price_float < 0:
+                     return "Ошибка: Цена не может быть отрицательной.", 400
             except ValueError:
-                 return "Ошибка: Неверный формат цены", 400
+                 return "Ошибка: Неверный формат цены. Используйте число (например, 150 или 150.50).", 400
 
+            new_photos_list = products[index].get('photos', []) # Start with existing photos
 
-            if photos_files and any(photo.filename for photo in photos_files):
+            if photos_files and any(f.filename for f in photos_files):
+                # If new photos are uploaded, replace the old list
                 new_photos_list = []
+                # TODO: Optionally delete old photos from HF here (requires tracking filenames)
+                uploads_dir = 'uploads'
+                os.makedirs(uploads_dir, exist_ok=True)
                 for photo in photos_files[:10]:
                     if photo and photo.filename:
-                        photo_filename = secure_filename(f"{int(time.time())}_{photo.filename}")
-                        uploads_dir = 'uploads'
-                        os.makedirs(uploads_dir, exist_ok=True)
+                        base, ext = os.path.splitext(secure_filename(photo.filename))
+                        photo_filename = f"{base}_{int(time.time())}{ext}"
                         temp_path = os.path.join(uploads_dir, photo_filename)
                         try:
                             photo.save(temp_path)
@@ -896,6 +1134,7 @@ def admin():
                                 commit_message=f"Обновлено фото для товара {name}"
                             )
                             new_photos_list.append(photo_filename)
+                            logging.info(f"Загружено (обновление) фото: photos/{photo_filename}")
                         except Exception as e:
                              logging.error(f"Ошибка при загрузке фото {photo_filename} при редактировании: {e}")
                         finally:
@@ -905,28 +1144,39 @@ def admin():
                                 except OSError as e:
                                      logging.error(f"Ошибка при удалении временного файла {temp_path} при редактировании: {e}")
 
-
-                products[index]['photos'] = new_photos_list
-
             products[index]['name'] = name
             products[index]['price'] = price_float
             products[index]['description'] = description
             products[index]['category'] = category if category in categories else 'Без категории'
+            products[index]['photos'] = new_photos_list # Assign potentially updated list
             products[index]['colors'] = colors
+            # Keep original 'added_at' if it exists, otherwise set it? Might not be needed.
+            # products[index]['added_at'] = products[index].get('added_at', datetime.now().isoformat())
 
-            save_data(data)
+            save_data({'products': products, 'categories': categories})
             return redirect(url_for('admin'))
 
         elif action == 'delete':
             try:
                 index = int(request.form.get('index'))
                 if not 0 <= index < len(products):
-                     return "Ошибка: Неверный индекс товара", 400
+                     return "Ошибка: Неверный индекс товара для удаления.", 400
+
+                # TODO: Optionally delete photos from HF here
+                # photos_to_delete = products[index].get('photos', [])
+                # if photos_to_delete:
+                #     api = HfApi()
+                #     try:
+                #         api.delete_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE,
+                #                          paths_in_repo=[f"photos/{p}" for p in photos_to_delete])
+                #         logging.info(f"Удалены фото для товара {products[index]['name']}: {photos_to_delete}")
+                #     except Exception as e:
+                #         logging.error(f"Ошибка при удалении фото с HF: {e}")
 
                 del products[index]
-                save_data(data)
+                save_data({'products': products, 'categories': categories})
             except (ValueError, TypeError):
-                 return "Ошибка: Неверный индекс товара", 400
+                 return "Ошибка: Неверный индекс товара.", 400
             except Exception as e:
                  logging.error(f"Ошибка при удалении товара: {e}")
                  return "Ошибка при удалении товара", 500
@@ -1032,6 +1282,7 @@ def admin():
              textarea {
                 resize: vertical;
                 min-height: 80px;
+                 white-space: pre-wrap; /* Preserve line breaks */
             }
              input[type="file"] {
                 padding: 10px;
@@ -1111,12 +1362,15 @@ def admin():
                  margin: 0;
                  color: var(--text-color);
                  font-weight: 500;
+                 word-break: break-all; /* Prevent long category names from overflowing */
+                 margin-right: 15px;
              }
              .category-item form {
                  background: none;
                  padding: 0;
                  box-shadow: none;
                  margin: 0;
+                 flex-shrink: 0; /* Prevent button from shrinking */
              }
              .category-item button {
                  margin: 0;
@@ -1131,10 +1385,16 @@ def admin():
                  margin-bottom: 8px;
                  font-size: 0.9rem;
                  line-height: 1.5;
+                 word-break: break-word; /* Allow long words to break */
              }
              .product-item p strong {
                  color: #555;
+                 display: inline-block; /* Ensure strong tag doesn't cause weird wrapping */
+                 margin-right: 5px;
              }
+              .product-item p:has(> strong)::before { /* Add spacing before content after strong tag if needed */
+                   /* content: ' '; */
+               }
              .product-item .product-photos {
                  display: flex;
                  flex-wrap: wrap;
@@ -1163,6 +1423,13 @@ def admin():
              .product-item summary:hover {
                   color: var(--hover-primary-color);
              }
+             .product-item summary::marker { /* Style the arrow */
+                 color: var(--primary-color);
+             }
+             .product-item details[open] > summary { /* Style when open */
+                  margin-bottom: 10px;
+             }
+
             .edit-form {
                 margin-top: 15px;
                 padding: 20px;
@@ -1189,11 +1456,17 @@ def admin():
                  font-size: 0.8rem;
                  background-color: #ddd;
                  color: #333;
+                 border: none; /* Remove border */
                  border-radius: 50%;
                  margin-top: 0;
                  min-width: 25px;
                  height: 25px;
-                 line-height: 1;
+                 line-height: 1; /* Center 'X' vertically */
+                 cursor: pointer;
+                 display: flex; /* Center 'X' */
+                 align-items: center;
+                 justify-content: center;
+                 flex-shrink: 0; /* Prevent shrinking */
              }
               .color-input-group .remove-color-btn:hover {
                   background-color: #ccc;
@@ -1204,18 +1477,36 @@ def admin():
              .button-group {
                  margin-top: 20px;
                  display: flex;
+                 flex-wrap: wrap; /* Allow buttons to wrap */
                  gap: 10px;
              }
-             .button-group form {
+             .button-group form,
+             .button-group details { /* Apply to both forms and details */
                  background: none;
                  padding: 0;
                  margin: 0;
                  box-shadow: none;
+                 display: flex; /* Align button/summary */
              }
-             .button-group button {
+             .button-group button,
+             .button-group summary { /* Reset margin for buttons/summary in group */
                  margin-top: 0;
              }
 
+             /* Make icon buttons more visually appealing */
+             button > i.fas {
+                 margin-right: 8px;
+             }
+             .add-color-btn i.fas,
+             .delete-button i.fas {
+                 margin-right: 5px; /* Smaller margin for smaller buttons */
+             }
+             .edit-form button[type="submit"] i.fas,
+             details > summary i.fas {
+                 margin-right: 8px;
+             }
+
+
              @media (max-width: 768px) {
                  .product-list, .category-list {
                      grid-template-columns: 1fr;
@@ -1231,6 +1522,16 @@ def admin():
                      padding: 20px;
                  }
              }
+             @media (max-width: 480px) {
+                  .category-item {
+                     flex-direction: column; /* Stack category name and button */
+                     align-items: flex-start; /* Align left */
+                     gap: 10px;
+                 }
+                  .category-item form {
+                      align-self: flex-end; /* Move button to the right */
+                 }
+             }
 
         </style>
     </head>
@@ -1248,7 +1549,7 @@ def admin():
                 <input type="text" id="add-name" name="name" required>
 
                 <label for="add-price">Цена (с):</label>
-                <input type="number" id="add-price" name="price" step="0.01" required placeholder="Например: 150.50">
+                <input type="text" inputmode="decimal" id="add-price" name="price" required placeholder="Например: 150.50">
 
                 <label for="add-description">Описание:</label>
                 <textarea id="add-description" name="description" rows="4" required></textarea>
@@ -1261,8 +1562,8 @@ def admin():
                     {% endfor %}
                 </select>
 
-                <label for="add-photos">Фотографии (до 10):</label>
-                <input type="file" id="add-photos" name="photos" accept="image/*" multiple>
+                <label for="add-photos">Фотографии (до 10, JPG/PNG/WEBP):</label>
+                <input type="file" id="add-photos" name="photos" accept="image/jpeg, image/png, image/webp" multiple>
 
                 <label>Доступные цвета:</label>
                 <div id="add-color-inputs" class="color-input-container">
@@ -1289,7 +1590,7 @@ def admin():
                 {% for category in categories %}
                 <div class="category-item">
                     <h3>{{ category }}</h3>
-                    <form method="POST" style="display: inline;">
+                    <form method="POST" onsubmit="return confirm('Вы уверены, что хотите удалить категорию \'{{ category }}\'? Товары этой категории станут \'Без категории\'.');">
                         <input type="hidden" name="action" value="delete_category">
                         <input type="hidden" name="category_index" value="{{ loop.index0 }}">
                         <button type="submit" class="delete-button"><i class="fas fa-trash-alt"></i> Удалить</button>
@@ -1312,13 +1613,15 @@ def admin():
 
             <h2>Список товаров</h2>
             <div class="product-list">
-                {% for product in products %}
+                {% set sorted_admin_products = products|sort(attribute='added_at', reverse=True) %}
+                {% for product in sorted_admin_products %}
                 <div class="product-item">
                     <h3>{{ product['name'] }}</h3>
                     <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
                     <p><strong>Цена:</strong> {{ product['price'] }} с</p>
-                    <p><strong>Описание:</strong> {{ product['description'] }}</p>
+                    <p style="white-space: pre-wrap;"><strong>Описание:</strong> {{ product['description'] }}</p>
                     <p><strong>Цвета:</strong> {{ product.get('colors', [])|join(', ') if product.get('colors') else 'Нет цветов' }}</p>
+                     <p><small><strong>Добавлено:</strong> {{ product.get('added_at', 'N/A') }}</small></p>
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     <div class="product-photos">
                         {% for photo in product['photos'] %}
@@ -1327,9 +1630,11 @@ def admin():
                              loading="lazy">
                         {% endfor %}
                     </div>
+                    {% else %}
+                     <p><small>Нет фотографий</small></p>
                     {% endif %}
                     <div class="button-group">
-                        <details style="margin-top: 0;">
+                        <details>
                             <summary><i class="fas fa-edit"></i> Редактировать</summary>
                             <form method="POST" enctype="multipart/form-data" class="edit-form">
                                 <input type="hidden" name="action" value="edit">
@@ -1337,7 +1642,7 @@ def admin():
                                 <label for="edit-name-{{ loop.index0 }}">Название:</label>
                                 <input type="text" id="edit-name-{{ loop.index0 }}" name="name" value="{{ product['name'] }}" required>
                                 <label for="edit-price-{{ loop.index0 }}">Цена (с):</label>
-                                <input type="number" id="edit-price-{{ loop.index0 }}" name="price" step="0.01" value="{{ product['price'] }}" required>
+                                <input type="text" inputmode="decimal" id="edit-price-{{ loop.index0 }}" name="price" value="{{ product['price'] }}" required>
                                 <label for="edit-description-{{ loop.index0 }}">Описание:</label>
                                 <textarea id="edit-description-{{ loop.index0 }}" name="description" rows="4" required>{{ product['description'] }}</textarea>
                                 <label for="edit-category-{{ loop.index0 }}">Категория:</label>
@@ -1348,7 +1653,7 @@ def admin():
                                     {% endfor %}
                                 </select>
                                 <label for="edit-photos-{{ loop.index0 }}">Заменить фотографии (до 10):</label>
-                                <input type="file" id="edit-photos-{{ loop.index0 }}" name="photos" accept="image/*" multiple>
+                                <input type="file" id="edit-photos-{{ loop.index0 }}" name="photos" accept="image/jpeg, image/png, image/webp" multiple>
                                 <label>Доступные цвета:</label>
                                 <div id="edit-color-inputs-{{ loop.index0 }}" class="color-input-container">
                                     {% set colors = product.get('colors', []) %}
@@ -1370,10 +1675,10 @@ def admin():
                                 <button type="submit"><i class="fas fa-save"></i> Сохранить изменения</button>
                             </form>
                         </details>
-                        <form method="POST">
+                        <form method="POST" onsubmit="return confirm('Вы уверены, что хотите удалить товар \'{{ product['name'] }}\'?');">
                             <input type="hidden" name="action" value="delete">
-                            <input type="hidden" name="index" value="{{ loop.index0 }}">
-                            <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить этот товар?');"><i class="fas fa-trash-alt"></i> Удалить товар</button>
+                             <input type="hidden" name="index" value="{{ loop.index0 }}">
+                            <button type="submit" class="delete-button"><i class="fas fa-trash-alt"></i> Удалить товар</button>
                         </form>
                      </div>
                 </div>
@@ -1385,6 +1690,7 @@ def admin():
         <script>
             function addColorInput(containerId) {
                 const container = document.getElementById(containerId);
+                if (!container) return;
                 const newInputGroup = document.createElement('div');
                 newInputGroup.className = 'color-input-group';
                 newInputGroup.innerHTML = `
@@ -1392,22 +1698,30 @@ def admin():
                     <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">X</button>
                 `;
 
-                container.querySelectorAll('.remove-color-btn').forEach(btn => btn.style.display = 'inline-block');
+                container.querySelectorAll('.remove-color-btn').forEach(btn => btn.style.display = 'inline-flex'); // Use inline-flex for centering
                 container.appendChild(newInputGroup);
             }
 
             function removeColorInput(button) {
-                const container = button.closest('.color-input-container');
-                button.closest('.color-input-group').remove();
+                const inputGroup = button.closest('.color-input-group');
+                 const container = button.closest('.color-input-container');
+                if (!inputGroup || !container) return;
+
+                inputGroup.remove();
 
                 const remainingGroups = container.querySelectorAll('.color-input-group');
                 if (remainingGroups.length === 1) {
                     const lastRemoveBtn = remainingGroups[0].querySelector('.remove-color-btn');
                     if(lastRemoveBtn) lastRemoveBtn.style.display = 'none';
-                }
-
-                 if (remainingGroups.length === 0) {
+                } else if (remainingGroups.length === 0) {
+                    // If all are removed, add a new empty one back
                      addColorInput(container.id);
+                     // And hide its remove button immediately
+                     const firstGroup = container.querySelector('.color-input-group');
+                     if (firstGroup) {
+                         const firstRemoveBtn = firstGroup.querySelector('.remove-color-btn');
+                         if (firstRemoveBtn) firstRemoveBtn.style.display = 'none';
+                     }
                  }
             }
 
@@ -1417,18 +1731,36 @@ def admin():
                  if (groups.length === 1) {
                       const removeBtn = groups[0].querySelector('.remove-color-btn');
                       if (removeBtn) removeBtn.style.display = 'none';
+                 } else if (groups.length === 0) {
+                      // If initialized with zero groups (e.g., editing product with no colors)
+                      // Add one and hide its button
+                      addColorInput(container.id);
+                      const firstGroup = container.querySelector('.color-input-group');
+                      if (firstGroup) {
+                          const firstRemoveBtn = firstGroup.querySelector('.remove-color-btn');
+                          if (firstRemoveBtn) firstRemoveBtn.style.display = 'none';
+                      }
+                 } else {
+                      // Ensure all buttons are visible if more than one exists initially
+                      groups.forEach(group => {
+                          const removeBtn = group.querySelector('.remove-color-btn');
+                          if(removeBtn) removeBtn.style.display = 'inline-flex';
+                      });
                  }
              });
         </script>
     </body>
     </html>
     '''
+    # Pass the unsorted products list to the admin template
+    # Sorting is handled within the template itself if needed for display there
     return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID)
 
 @app.route('/backup', methods=['POST'])
 def backup():
     try:
-        upload_db_to_hf()
+        save_data(load_data()) # Ensure latest data is saved before uploading
+        # upload_db_to_hf() is called inside save_data
         return "Резервная копия успешно создана и загружена на Hugging Face.", 200
     except Exception as e:
         logging.error(f"Ошибка при ручном создании резервной копии: {e}")
@@ -1439,9 +1771,8 @@ def backup():
 def download():
      try:
         download_db_from_hf()
-
-
-        return "Актуальная база данных успешно скачана из Hugging Face.", 200
+        load_data() # Reload data into memory after download
+        return "Актуальная база данных успешно скачана из Hugging Face и загружена в приложение.", 200
      except RepositoryNotFoundError:
          return "Ошибка: Репозиторий Hugging Face не найден.", 404
      except Exception as e:
@@ -1450,22 +1781,28 @@ def download():
 
 
 if __name__ == '__main__':
-
     os.makedirs('uploads', exist_ok=True)
 
+    # Start background backup thread only if HF token is available
+    if HF_TOKEN_WRITE:
+        backup_thread = threading.Thread(target=periodic_backup, daemon=True)
+        backup_thread.start()
+        logging.info("Поток периодического резервного копирования запущен.")
+    else:
+        logging.warning("HF_TOKEN_WRITE не установлен, периодическое резервное копирование отключено.")
 
-    backup_thread = threading.Thread(target=periodic_backup, daemon=True)
-    backup_thread.start()
-
-
+    # Initial data load attempt
     try:
         load_data()
     except Exception as e:
+        logging.warning(f"Не удалось первоначально загрузить/скачать базу данных: {e}. Приложение запустится с пустыми/старыми локальными данными.")
 
-        logging.warning(f"Не удалось первоначально загрузить/скачать базу данных: {e}. Приложение запустится с пустыми данными.")
-
-
+    port = int(os.environ.get("PORT", 7860))
+    logging.info(f"Запуск Flask приложения на хосте 0.0.0.0 и порту {port}")
+    # Use 'waitress' for production instead of Flask's development server
+    # from waitress import serve
+    # serve(app, host='0.0.0.0', port=port)
+    app.run(debug=False, host='0.0.0.0', port=port)
 
-    app.run(debug=False, host='0.0.0.0', port=int(os.environ.get("PORT", 7860)))
 
 # --- END OF FILE app.py ---